diff --git a/.npmrc b/.npmrc
index 5c14126a..63fe4a52 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,5 +1,2 @@
 engine-strict=true
 node-linker=hoisted
-@cropwatchdevelopment:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
-always-auth=true
diff --git a/messages/en.json b/messages/en.json
index c0c2f6de..351d2873 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -911,6 +911,10 @@
 	"traffic_calendar_auth_required": "Calendar data requires an authenticated session.",
 	"traffic_calendar_fetch_subtitle": "{monthLabel} calendar fetch",
 	"traffic_calendar_total": "Traffic Total: {count}",
+	"traffic_chart_hourly_subtitle": "Today, stacked by detection class",
+	"traffic_chart_hourly_title": "Hourly Traffic Volume",
+	"traffic_class_breakdown": "Class Breakdown",
+	"traffic_class_breakdown_subtitle": "Share of today's total",
 	"traffic_current_hour_today": "Current hour today",
 	"traffic_current_hour_total": "Current Hour Total",
 	"traffic_daily_traffic_weather": "Daily Traffic & Weather",
@@ -933,14 +937,18 @@
 	"traffic_no_data_this_month": "No traffic recorded for this month",
 	"traffic_no_data_today": "No traffic data is available for today.",
 	"traffic_no_traffic_today": "No traffic today",
+	"traffic_peak_hour": "Peak Hour",
 	"traffic_precip_summary": "{value} mm precip",
 	"traffic_preparing_csv": "Preparing CSV...",
 	"traffic_raw_records_count": "{count} raw records",
 	"traffic_samples": "Samples",
 	"traffic_samples_count": "{count} samples",
 	"traffic_selected_period": "Selected Period",
+	"traffic_share_of_total": "{value}% of total",
 	"traffic_today_only": "Today only",
+	"traffic_today_total": "Today's Total",
 	"traffic_today_via_coordinates": "Today via device coordinates",
+	"traffic_top_class": "Top Class",
 	"traffic_total_traffic": "Total Traffic",
 	"traffic_tracked_hours_count": "{count} tracked hour(s)",
 	"traffic_unavailable": "Unavailable",
@@ -1111,6 +1119,9 @@
 	"cwui_chart_last_sensor": "At least one sensor must stay visible",
 	"cwui_chart_hide_series": "Hide {label}",
 	"cwui_chart_show_series": "Show {label}",
+	"cwui_stacked_bar_aria": "Stacked bar chart",
+	"cwui_stacked_bar_total": "Total",
+	"cwui_stacked_bar_bar": "{label}: {total}",
 	"cwui_donut_aria": "Donut chart",
 	"cwui_donut_total": "Total",
 	"cwui_donut_of_total": "of {total}",
diff --git a/messages/ja.json b/messages/ja.json
index e2e55258..a7d8f4dc 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -927,6 +927,10 @@
 	"traffic_calendar_auth_required": "カレンダーデータの表示には認証済みセッションが必要です。",
 	"traffic_calendar_fetch_subtitle": "{monthLabel} のカレンダー取得",
 	"traffic_calendar_total": "交通合計: {count}",
+	"traffic_chart_hourly_subtitle": "本日・検出クラス別",
+	"traffic_chart_hourly_title": "時間別交通量",
+	"traffic_class_breakdown": "クラス別内訳",
+	"traffic_class_breakdown_subtitle": "本日の合計に対する割合",
 	"traffic_current_hour_today": "今日の現在時間帯",
 	"traffic_current_hour_total": "現在時間帯の合計",
 	"traffic_daily_traffic_weather": "日別交通量と天気",
@@ -949,14 +953,18 @@
 	"traffic_no_data_this_month": "この月の交通データは記録されていません",
 	"traffic_no_data_today": "今日の交通データはありません。",
 	"traffic_no_traffic_today": "今日は交通データがありません",
+	"traffic_peak_hour": "ピーク時間",
 	"traffic_precip_summary": "降水量 {value} mm",
 	"traffic_preparing_csv": "CSV を準備中...",
 	"traffic_raw_records_count": "生レコード {count} 件",
 	"traffic_samples": "サンプル",
 	"traffic_samples_count": "サンプル {count} 件",
 	"traffic_selected_period": "選択期間",
+	"traffic_share_of_total": "全体の{value}%",
 	"traffic_today_only": "今日のみ",
+	"traffic_today_total": "本日の合計",
 	"traffic_today_via_coordinates": "デバイス座標に基づく今日の天気",
+	"traffic_top_class": "最多クラス",
 	"traffic_total_traffic": "交通量合計",
 	"traffic_tracked_hours_count": "追跡時間 {count} 件",
 	"traffic_unavailable": "利用不可",
@@ -1111,6 +1119,9 @@
 	"cwui_chart_last_sensor": "少なくとも 1 つのセンサーを表示する必要があります",
 	"cwui_chart_hide_series": "{label} を非表示",
 	"cwui_chart_show_series": "{label} を表示",
+	"cwui_stacked_bar_aria": "積み上げ棒グラフ",
+	"cwui_stacked_bar_total": "合計",
+	"cwui_stacked_bar_bar": "{label}: {total}",
 	"cwui_donut_aria": "ドーナツチャート",
 	"cwui_donut_total": "合計",
 	"cwui_donut_of_total": "/ {total}",
diff --git a/package.json b/package.json
index 5f6c9107..2003223b 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
 		}
 	},
 	"dependencies": {
-		"@cropwatchdevelopment/cwui": "0.1.110",
+		"@cropwatchdevelopment/cwui": "0.1.113",
 		"@supabase/supabase-js": "^2.108.2",
 		"jwt-decode": "^4.0.0"
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d0f84879..157390bb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,8 +13,8 @@ importers:
   .:
     dependencies:
       '@cropwatchdevelopment/cwui':
-        specifier: 0.1.110
-        version: 0.1.110(svelte@5.56.3(@typescript-eslint/types@8.61.1))
+        specifier: 0.1.113
+        version: 0.1.113(svelte@5.56.3(@typescript-eslint/types@8.61.1))
       '@supabase/supabase-js':
         specifier: ^2.108.2
         version: 2.108.2
@@ -112,8 +112,8 @@ packages:
   '@blazediff/core@1.9.1':
     resolution: {integrity: sha512-ehg3jIkYKulZh+8om/O25vkvSsXXwC+skXmyA87FFx6A/45eqOkZsBltMw/TVteb0mloiGT8oGRTcjRAz66zaA==}
 
-  '@cropwatchdevelopment/cwui@0.1.110':
-    resolution: {integrity: sha512-tH8fRf6yv0eYiKXusZEcB/XdO1QPBYF0E9OOPXq3xYIrhFyA4pDrMQX3SQBqNjx1+rFQX8spCxEeUSbJ81bCqg==, tarball: https://npm.pkg.github.com/download/@cropwatchdevelopment/cwui/0.1.110/365655baf3d097e75a2b7a3539c7c4f1369b7ca9}
+  '@cropwatchdevelopment/cwui@0.1.113':
+    resolution: {integrity: sha512-FKAhB5OTb2AK4KhyQVNP3E9ASmcNlxCWKEo6gJ1RAahMWgIGIWxJeLgRDG/dlJQXn7Xd9eBPZLBG/fZ/KgHzlw==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -1946,7 +1946,7 @@ snapshots:
 
   '@blazediff/core@1.9.1': {}
 
-  '@cropwatchdevelopment/cwui@0.1.110(svelte@5.56.3(@typescript-eslint/types@8.61.1))':
+  '@cropwatchdevelopment/cwui@0.1.113(svelte@5.56.3(@typescript-eslint/types@8.61.1))':
     dependencies:
       svelte: 5.56.3(@typescript-eslint/types@8.61.1)
 
diff --git a/src/lib/components/dashboard/DashboardCards.svelte b/src/lib/components/dashboard/DashboardCards.svelte
index 7dd61f7a..ec3aa201 100644
--- a/src/lib/components/dashboard/DashboardCards.svelte
+++ b/src/lib/components/dashboard/DashboardCards.svelte
@@ -21,6 +21,7 @@
 	import type { DashboardLocationGroup, DashboardRow } from '$lib/api/api.dtos';
 	import { getAppContext } from '$lib/appContext.svelte';
 	import { isDisplayableColumn, labelFor } from '$lib/sensor-labels';
+	import { formatDateTime } from '$lib/i18n/format';
 	import { formatSensorMeasurement } from '$lib/units';
 	import { m } from '$lib/paraglide/messages.js';
 	import { goto } from '$app/navigation';
@@ -253,6 +254,16 @@
 		return Object.entries(details)
 			.filter(([col, value]) => isDisplayableColumn(col) && value !== null && value !== undefined)
 			.map(([col, value]) => {
+				// traffic_hour is the hourly bucket start timestamp — render it as a
+				// localized date+hour instead of letting the number formatter see NaN.
+				if (col === 'traffic_hour') {
+					const valueDisplay = formatDateTime(
+						String(value),
+						{ month: 'short', day: 'numeric', hour: 'numeric' },
+						String(value)
+					);
+					return { col, def: labelFor(col), valueDisplay, unit: '' };
+				}
 				const fm = formatSensorMeasurement(col, value, app.preferences);
 				return { col, def: labelFor(col), valueDisplay: fm.valueDisplay, unit: fm.unit };
 			});
@@ -260,11 +271,17 @@
 
 	// Unit-bearing numeric metrics come back converted to the user's preference;
 	// booleans render as an On/Off label, unmapped columns keep their canonical unit.
+	// Integer metrics pass their formatted text as the label so the card doesn't
+	// re-format them with its 2-decimal number formatter ("0.00" for counts).
 	function readingProps(col: string, raw: unknown) {
 		const fm = formatSensorMeasurement(col, raw, app.preferences);
-		if (labelFor(col).format === 'boolean') {
+		const format = labelFor(col).format;
+		if (format === 'boolean') {
 			return { value: null, unit: '', label: fm.valueDisplay };
 		}
+		if (format === 'integer' && fm.value !== null && fm.value !== undefined) {
+			return { value: fm.value, unit: fm.unit, label: fm.valueDisplay };
+		}
 		return { value: fm.value, unit: fm.unit, label: undefined };
 	}
 
@@ -379,6 +396,7 @@
 								row.device_type.default_upload_interval ??
 								60}
 							storageKey={`dashboard:${row.dev_eui}`}
+							detailsHeading={m.common_details()}
 							onExpand={() => loadDetails(row.dev_eui)}
 						>
 							{#if details === undefined || details === 'loading'}
@@ -388,7 +406,7 @@
 							{:else}
 								<dl class="dashboard-cards__details-list">
 									{#each detailRows as { col, def, valueDisplay, unit } (col)}
-										{#if def.label() != 'created_at'}
+										{#if col !== 'created_at'}
 											<div class="dashboard-cards__details-row">
 												<dt>{def.label()}</dt>
 												<dd>
diff --git a/src/lib/components/displays/TrafficDisplay/TrafficCalendarCard.svelte b/src/lib/components/displays/TrafficDisplay/TrafficCalendarCard.svelte
new file mode 100644
index 00000000..88ade091
--- /dev/null
+++ b/src/lib/components/displays/TrafficDisplay/TrafficCalendarCard.svelte
@@ -0,0 +1,355 @@
+<script lang="ts">
+	import { CwCalendar, CwCard, CwChip } from '@cropwatchdevelopment/cwui';
+	import { ApiService } from '$lib/api/api.service';
+	import { formatNumber } from '$lib/i18n/format';
+	import { m } from '$lib/paraglide/messages.js';
+	import {
+		buildDailyTrafficSummaries,
+		formatMeasurement,
+		formatTrafficValue,
+		getMonthBounds,
+		metricLabel,
+		normalizeTrafficRows,
+		resolveTrafficClassKeys,
+		toDayKey,
+		type DailyTrafficSummary,
+		type TrafficRow
+	} from './traffic-data';
+	import { fetchWeatherByRange, weatherEmoji, type WeatherDaySummary } from './traffic-weather';
+
+	interface Props {
+		devEui: string;
+		authToken: string | null;
+		latitude: number | null;
+		longitude: number | null;
+		/** Anchors the initially shown month (e.g. the device's latest data). */
+		anchorDate: Date | null;
+		locationLabel: string;
+	}
+
+	let { devEui, authToken, latitude, longitude, anchorDate, locationLabel }: Props = $props();
+
+	// Capture once for the initial month; later device changes re-anchor in the effect below.
+	const initialAnchor = (() => anchorDate)() ?? new Date();
+	let calendarYear = $state(initialAnchor.getFullYear());
+	let calendarMonth = $state(initialAnchor.getMonth());
+	let trackedDevice = $state('');
+
+	let monthRows = $state<TrafficRow[]>([]);
+	let weatherByDay = $state<Record<string, WeatherDaySummary>>({});
+	let calendarLoading = $state(false);
+	let calendarError = $state<string | null>(null);
+	let requestId = 0;
+	let lastLoadKey = '';
+
+	const calendarMonthLabel = $derived(
+		new Date(calendarYear, calendarMonth, 1).toLocaleDateString(undefined, {
+			month: 'long',
+			year: 'numeric'
+		})
+	);
+
+	const classKeys = $derived(resolveTrafficClassKeys(monthRows));
+	const dailySummaries = $derived(buildDailyTrafficSummaries(monthRows, classKeys));
+	const summaryByKey = $derived<Record<string, DailyTrafficSummary>>(
+		Object.fromEntries(dailySummaries.map((summary) => [summary.dayKey, summary]))
+	);
+
+	async function loadMonth(
+		deviceKey: string,
+		token: string | null,
+		year: number,
+		month: number,
+		lat: number | null,
+		lng: number | null
+	): Promise<void> {
+		requestId += 1;
+		const currentRequest = requestId;
+
+		if (!deviceKey || !token) {
+			monthRows = [];
+			weatherByDay = {};
+			calendarLoading = false;
+			calendarError = deviceKey ? m.traffic_calendar_auth_required() : null;
+			return;
+		}
+
+		const { start, end } = getMonthBounds(year, month);
+		monthRows = [];
+		weatherByDay = {};
+		calendarLoading = true;
+		calendarError = null;
+
+		try {
+			const api = new ApiService({ authToken: token });
+			const trafficPromise = api.getTrafficData(deviceKey, {
+				start: start.toISOString(),
+				end: end.toISOString()
+			});
+			const weatherPromise =
+				lat !== null && lng !== null
+					? fetchWeatherByRange(start, end, lat, lng).catch((error) => {
+							console.error('Failed to fetch calendar weather:', error);
+							return {};
+						})
+					: Promise.resolve({});
+
+			const [trafficData, weather] = await Promise.all([trafficPromise, weatherPromise]);
+			if (currentRequest !== requestId) return;
+
+			monthRows = normalizeTrafficRows(trafficData, deviceKey);
+			weatherByDay = weather;
+		} catch (error) {
+			if (currentRequest !== requestId) return;
+			console.error('Failed to fetch calendar month traffic:', error);
+			monthRows = [];
+			weatherByDay = {};
+			calendarError = m.traffic_load_month_failed();
+		} finally {
+			if (currentRequest === requestId) {
+				calendarLoading = false;
+			}
+		}
+	}
+
+	$effect(() => {
+		// Re-anchor the visible month when the device changes.
+		if (devEui !== trackedDevice) {
+			trackedDevice = devEui;
+			const anchor = anchorDate ?? new Date();
+			calendarYear = anchor.getFullYear();
+			calendarMonth = anchor.getMonth();
+		}
+
+		const key = `${devEui.trim()}:${authToken ?? 'no-token'}:${calendarYear}:${calendarMonth}:${latitude ?? 'na'}:${longitude ?? 'na'}`;
+		if (key === lastLoadKey) return;
+		lastLoadKey = key;
+
+		void loadMonth(devEui.trim(), authToken, calendarYear, calendarMonth, latitude, longitude);
+	});
+
+	function handleCalendarMonthChange(year: number, month: number): void {
+		calendarYear = year;
+		calendarMonth = month;
+	}
+</script>
+
+<CwCard
+	title={m.traffic_daily_traffic_weather()}
+	subtitle={m.traffic_calendar_fetch_subtitle({ monthLabel: calendarMonthLabel })}
+	elevated
+>
+	<div class="traffic-calendar__meta">
+		<CwChip
+			label={m.traffic_month_traffic_days({ count: formatNumber(dailySummaries.length) })}
+			tone="info"
+			variant="soft"
+		/>
+		<CwChip
+			label={m.traffic_lat_lng_label({ label: locationLabel })}
+			tone={latitude !== null && longitude !== null ? 'secondary' : 'warning'}
+			variant="soft"
+		/>
+
+		{#if calendarLoading}
+			<CwChip label={m.traffic_loading_visible_month()} tone="secondary" variant="soft" />
+		{/if}
+
+		{#if calendarError}
+			<CwChip label={calendarError} tone="danger" variant="soft" />
+		{:else if !calendarLoading && dailySummaries.length === 0}
+			<CwChip label={m.traffic_no_data_this_month()} tone="secondary" variant="soft" />
+		{/if}
+	</div>
+
+	<CwCalendar
+		bind:year={calendarYear}
+		bind:month={calendarMonth}
+		maxDate={new Date()}
+		onMonthChange={handleCalendarMonthChange}
+		loading={calendarLoading}
+		class="traffic-calendar__calendar"
+	>
+		{#snippet dayContent(date)}
+			{@const summary = summaryByKey[toDayKey(date)]}
+			{@const weather = weatherByDay[toDayKey(date)]}
+			{#if summary || weather}
+				<div class="traffic-calendar__summary">
+					{#if weather}
+						<div class="traffic-calendar__weather-panel">
+							<div class="traffic-calendar__weather-topline">
+								<p class="traffic-calendar__weather-temp">
+									{weather.temperatureHighC !== null
+										? `${Math.round(weather.temperatureHighC)}°`
+										: '--'}
+								</p>
+								<p class="traffic-calendar__weather-low">
+									{m.traffic_low_temperature({
+										value:
+											weather.temperatureLowC !== null
+												? `${Math.round(weather.temperatureLowC)}°`
+												: '--'
+									})}
+								</p>
+							</div>
+
+							<p class="traffic-calendar__weather-label">
+								{weatherEmoji(weather.weatherCode)}
+								{weather.label}
+							</p>
+							<p class="traffic-calendar__copy">
+								💧 {formatMeasurement(weather.precipitationMm, 'mm', 1)}
+							</p>
+						</div>
+					{/if}
+
+					{#if summary}
+						<div class="traffic-calendar__traffic-panel">
+							<p class="traffic-calendar__section-heading">
+								{m.traffic_calendar_total({ count: formatNumber(summary.totalTraffic) })}
+							</p>
+
+							{#if classKeys.length > 0}
+								<div class="traffic-calendar__class-list">
+									{#each classKeys as key (key)}
+										<p class="traffic-calendar__copy">
+											{metricLabel(key)}: {formatTrafficValue(summary.classTotals[key])}
+										</p>
+									{/each}
+								</div>
+							{:else}
+								<p class="traffic-calendar__copy">{m.traffic_no_class_data_recorded()}</p>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/if}
+		{/snippet}
+	</CwCalendar>
+</CwCard>
+
+<style>
+	.traffic-calendar__meta {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+	}
+
+	.traffic-calendar__summary {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.35rem;
+	}
+
+	.traffic-calendar__weather-panel,
+	.traffic-calendar__traffic-panel {
+		width: 100%;
+		border-radius: 0.95rem;
+		padding: 0.75rem;
+		border: 1px solid transparent;
+		box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
+	}
+
+	.traffic-calendar__weather-panel {
+		background: linear-gradient(180deg, #8cc8ff 0%, #72b5f2 100%);
+		color: #0f172a;
+	}
+
+	.traffic-calendar__traffic-panel {
+		background: linear-gradient(180deg, #1f5ca8 0%, #18498a 100%);
+		color: #eff6ff;
+	}
+
+	.traffic-calendar__weather-topline {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 0.75rem;
+	}
+
+	.traffic-calendar__weather-temp {
+		margin: 0;
+		font-size: 1.8rem;
+		font-weight: 700;
+		line-height: 1;
+	}
+
+	.traffic-calendar__weather-low {
+		margin: 0.15rem 0 0;
+		font-size: 0.82rem;
+		font-weight: 600;
+	}
+
+	.traffic-calendar__weather-label,
+	.traffic-calendar__section-heading {
+		margin: 0.6rem 0 0.25rem;
+		font-size: 0.98rem;
+		font-weight: 700;
+	}
+
+	.traffic-calendar__class-list {
+		display: grid;
+		gap: 0.15rem;
+	}
+
+	.traffic-calendar__copy {
+		margin: 0.5rem 0 0;
+		font-size: 0.9rem;
+		line-height: 1.3;
+		word-break: break-word;
+	}
+
+	.traffic-calendar__weather-panel .traffic-calendar__copy,
+	.traffic-calendar__weather-panel .traffic-calendar__weather-label,
+	.traffic-calendar__traffic-panel .traffic-calendar__copy,
+	.traffic-calendar__traffic-panel .traffic-calendar__section-heading {
+		color: inherit;
+	}
+
+	:global([data-theme='dark']) .traffic-calendar__weather-panel {
+		background:
+			radial-gradient(
+				130% 100% at 0% 0%,
+				color-mix(in srgb, var(--cw-info-300) 18%, transparent),
+				transparent 55%
+			),
+			linear-gradient(
+				180deg,
+				color-mix(in srgb, var(--cw-info-600) 32%, var(--cw-bg-surface-elevated)) 0%,
+				color-mix(in srgb, var(--cw-info-900) 42%, var(--cw-bg-surface)) 100%
+			);
+		color: #eff6ff;
+		border-color: color-mix(in srgb, var(--cw-info-300) 30%, transparent);
+		box-shadow:
+			inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent),
+			0 8px 18px color-mix(in srgb, #050a16 36%, transparent);
+	}
+
+	:global([data-theme='dark']) .traffic-calendar__traffic-panel {
+		background:
+			radial-gradient(
+				120% 100% at 100% 0%,
+				color-mix(in srgb, var(--cw-primary-300) 16%, transparent),
+				transparent 58%
+			),
+			linear-gradient(
+				180deg,
+				color-mix(in srgb, var(--cw-primary-800) 34%, var(--cw-bg-surface-elevated)) 0%,
+				color-mix(in srgb, var(--cw-primary-900) 48%, var(--cw-bg-surface)) 100%
+			);
+		color: #f8fbff;
+		border-color: color-mix(in srgb, var(--cw-primary-300) 24%, transparent);
+		box-shadow:
+			inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
+			0 8px 18px color-mix(in srgb, #050a16 38%, transparent);
+	}
+
+	:global(.traffic-calendar__calendar .cw-calendar__day-body) {
+		gap: 0.5rem;
+	}
+
+	:global(.traffic-calendar__calendar .cw-calendar__day) {
+		min-height: 16rem;
+	}
+</style>
diff --git a/src/lib/components/displays/TrafficDisplay/TrafficClassBreakdown.svelte b/src/lib/components/displays/TrafficDisplay/TrafficClassBreakdown.svelte
new file mode 100644
index 00000000..c73010e8
--- /dev/null
+++ b/src/lib/components/displays/TrafficDisplay/TrafficClassBreakdown.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { formatNumber } from '$lib/i18n/format';
+	import { m } from '$lib/paraglide/messages.js';
+	import { appTheme } from '$lib/theme/appTheme.svelte';
+	import {
+		metricEmoji,
+		metricLabelText,
+		trafficClassColor,
+		TRAFFIC_CLASS_KEYS
+	} from './traffic-data';
+
+	interface Props {
+		classKeys: string[];
+		classTotals: Record<string, number>;
+	}
+
+	let { classKeys, classTotals }: Props = $props();
+
+	const total = $derived(classKeys.reduce((sum, key) => sum + (classTotals[key] ?? 0), 0));
+
+	// Sorted by volume for reading; colors stay pinned to each class's fixed slot.
+	const rows = $derived(
+		classKeys
+			.map((key, index) => {
+				const slot = TRAFFIC_CLASS_KEYS.indexOf(key as (typeof TRAFFIC_CLASS_KEYS)[number]);
+				return {
+					key,
+					value: classTotals[key] ?? 0,
+					share: total > 0 ? ((classTotals[key] ?? 0) / total) * 100 : 0,
+					color: trafficClassColor(appTheme.current, slot >= 0 ? slot : index)
+				};
+			})
+			.sort((left, right) => right.value - left.value)
+	);
+</script>
+
+{#if total > 0}
+	<div class="traffic-breakdown">
+		{#each rows as row (row.key)}
+			<div class="traffic-breakdown__row">
+				<span class="traffic-breakdown__emoji" aria-hidden="true">{metricEmoji(row.key)}</span>
+				<div class="traffic-breakdown__body">
+					<div class="traffic-breakdown__topline">
+						<span class="traffic-breakdown__label">{metricLabelText(row.key)}</span>
+						<span class="traffic-breakdown__value">{formatNumber(row.value)}</span>
+					</div>
+					<div class="traffic-breakdown__track">
+						<div
+							class="traffic-breakdown__bar"
+							style:width="{Math.max(row.share, row.value > 0 ? 1 : 0)}%"
+							style:background-color={row.color}
+						></div>
+					</div>
+					<span class="traffic-breakdown__share">
+						{m.traffic_share_of_total({ value: row.share.toFixed(row.share >= 10 ? 0 : 1) })}
+					</span>
+				</div>
+			</div>
+		{/each}
+	</div>
+{:else}
+	<p class="traffic-breakdown__empty">{m.traffic_no_class_data_recorded()}</p>
+{/if}
+
+<style>
+	.traffic-breakdown {
+		display: flex;
+		flex-direction: column;
+		gap: 0.7rem;
+	}
+
+	.traffic-breakdown__row {
+		display: flex;
+		align-items: flex-start;
+		gap: 0.6rem;
+	}
+
+	.traffic-breakdown__emoji {
+		font-size: 1.05rem;
+		line-height: 1.4;
+	}
+
+	.traffic-breakdown__body {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.traffic-breakdown__topline {
+		display: flex;
+		align-items: baseline;
+		justify-content: space-between;
+		gap: 0.75rem;
+	}
+
+	.traffic-breakdown__label {
+		font-size: 0.9rem;
+		color: var(--cw-text-primary);
+	}
+
+	.traffic-breakdown__value {
+		font-size: 0.95rem;
+		font-weight: 700;
+		color: var(--cw-text-primary);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.traffic-breakdown__track {
+		margin-top: 0.3rem;
+		height: 0.375rem;
+		border-radius: 999px;
+		background: color-mix(in srgb, var(--cw-border-muted) 40%, transparent);
+		overflow: hidden;
+	}
+
+	.traffic-breakdown__bar {
+		height: 100%;
+		border-radius: 999px;
+		transition: width var(--cw-duration-fast, 150ms) ease;
+	}
+
+	.traffic-breakdown__share {
+		display: inline-block;
+		margin-top: 0.2rem;
+		font-size: 0.75rem;
+		color: var(--cw-text-muted);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.traffic-breakdown__empty {
+		margin: 0;
+		font-size: 0.9rem;
+		color: var(--cw-text-secondary);
+	}
+</style>
diff --git a/src/lib/components/displays/TrafficDisplay/TrafficDisplay.svelte b/src/lib/components/displays/TrafficDisplay/TrafficDisplay.svelte
index f700d36c..dfb84d67 100644
--- a/src/lib/components/displays/TrafficDisplay/TrafficDisplay.svelte
+++ b/src/lib/components/displays/TrafficDisplay/TrafficDisplay.svelte
@@ -1,496 +1,38 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { SvelteDate, SvelteMap } from 'svelte/reactivity';
 	import { page } from '$app/state';
-	import { ApiService } from '$lib/api/api.service';
-	import {
-		CwButton,
-		CwCalendar,
-		CwCard,
-		CwChip,
-		CwDataTable,
-		CwSpinner,
-		type CwColumnDef,
-		type CwTableQuery,
-		type CwTableResult,
-		type CwTone
-	} from '@cropwatchdevelopment/cwui';
-	import { formatNumber } from '$lib/i18n/format';
-	import { cwDataTableLabels } from '$lib/i18n/cwuiLabels';
+	import { CwCard } from '@cropwatchdevelopment/cwui';
 	import type { DeviceDisplayProps } from '$lib/interfaces/deviceDisplay';
 	import { m } from '$lib/paraglide/messages.js';
-
-	type TelemetryRow = Record<string, unknown>;
-	type CsvRow = Record<string, string | number | null>;
-	type HourlyCellValue = string | number | null;
-
-	interface TrafficRow extends TelemetryRow {
-		id: string;
-		created_at: string;
-		dev_eui: string;
-	}
-
-	interface HourlyTrafficRow {
-		id: string;
-		traffic_hour: string;
-		day_key: string;
-		hour_timestamp: number;
-		total_traffic: number;
-		samples: number;
-		weather_summary: string;
-		[key: string]: HourlyCellValue;
-	}
-
-	interface WeatherDaySummary {
-		dayKey: string;
-		summary: string;
-		label: string;
-		tone: CwTone;
-		temperatureLabel: string | null;
-		temperatureHighC: number | null;
-		temperatureLowC: number | null;
-		precipitationMm: number | null;
-		windSpeedKmh: number | null;
-		weatherCode: number | null;
-	}
-
-	interface DailyTrafficSummary {
-		dayKey: string;
-		date: Date;
-		totalTraffic: number;
-		hourCount: number;
-		sampleCount: number;
-		classTotals: Record<string, number>;
-		weatherSummary: string;
-		weatherLabel: string;
-		weatherTone: CwTone;
-		temperatureLabel: string | null;
-		temperatureHighC: number | null;
-		temperatureLowC: number | null;
-		weatherCode: number | null;
-		precipitationMm: number | null;
-		windSpeedKmh: number | null;
-	}
-
-	const METADATA_KEYS = new Set([
-		'id',
-		'dev_eui',
-		'created_at',
-		'updated_at',
-		'deleted_at',
-		'is_simulated',
-		'timestamp',
-		'date',
-		'time',
-		'traffic_hour'
-	]);
-
-	const WEATHER_KEYWORDS = [
-		'weather',
-		'condition',
-		'summary',
-		'description',
-		'icon',
-		'temp',
-		'temperature',
-		'humidity',
-		'wind',
-		'rain',
-		'snow',
-		'precip',
-		'pressure',
-		'cloud',
-		'fog',
-		'dew',
-		'uv',
-		'visibility',
-		'barometer',
-		'feels_like',
-		'feelslike'
-	];
-
-	const PRIORITY_TRAFFIC_KEYWORDS = [
-		'count',
-		'traffic',
-		'vehicle',
-		'volume',
-		'car',
-		'truck',
-		'bus',
-		'bike',
-		'bicycle',
-		'ped',
-		'pedestrian',
-		'person',
-		'people',
-		'north',
-		'south',
-		'east',
-		'west',
-		'inbound',
-		'outbound',
-		'entry',
-		'exit',
-		'lane',
-		'bound',
-		'class',
-		'axle'
-	];
-
-	const OPEN_METEO_FORECAST_URL = 'https://api.open-meteo.com/v1/forecast';
-	const OPEN_METEO_ARCHIVE_URL = 'https://archive-api.open-meteo.com/v1/archive';
-	const OPEN_METEO_DAILY_FIELDS =
-		'weather_code,temperature_2m_max,temperature_2m_min,precipitation_sum,wind_speed_10m_max';
+	import TrafficCalendarCard from './TrafficCalendarCard.svelte';
+	import TrafficClassBreakdown from './TrafficClassBreakdown.svelte';
+	import TrafficHourlyChart from './TrafficHourlyChart.svelte';
+	import TrafficHourlyTable from './TrafficHourlyTable.svelte';
+	import TrafficKpiStrip from './TrafficKpiStrip.svelte';
+	import {
+		buildHourlyTrafficRows,
+		computeTrafficKpis,
+		getDayBounds,
+		isRecord,
+		normalizeTrafficRows,
+		parseDate,
+		readNumber,
+		resolveTrafficClassKeys,
+		toDayKey,
+		type TelemetryRow,
+		type TrafficRow
+	} from './traffic-data';
+	import { fetchWeatherByRange, type WeatherDaySummary } from './traffic-weather';
 
 	let { latestData, historicalData, loading, locationName, devEui, authToken }: DeviceDisplayProps =
 		$props();
 
-	function isRecord(value: unknown): value is TelemetryRow {
-		return typeof value === 'object' && value !== null && !Array.isArray(value);
-	}
-
-	function readNumber(value: unknown): number | null {
-		if (typeof value === 'number' && Number.isFinite(value)) {
-			return value;
-		}
-
-		if (typeof value === 'string' && value.trim().length > 0) {
-			const parsed = Number(value);
-			return Number.isFinite(parsed) ? parsed : null;
-		}
-
-		return null;
-	}
-
-	function readString(value: unknown): string | null {
-		return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null;
-	}
-
-	function parseDate(value: unknown): Date | null {
-		const text = readString(value);
-		if (!text) return null;
-
-		const parsed = new Date(text);
-		return Number.isNaN(parsed.getTime()) ? null : parsed;
-	}
-
-	function normalizeKey(key: string): string {
-		return key.trim().toLowerCase();
-	}
-
-	function prettifyKey(key: string): string {
-		return key.replaceAll('_', ' ').replace(/\b\w/g, (letter) => letter.toUpperCase());
-	}
-
-	function toDayKey(date: Date): string {
-		const year = date.getFullYear();
-		const month = String(date.getMonth() + 1).padStart(2, '0');
-		const day = String(date.getDate()).padStart(2, '0');
-		return `${year}-${month}-${day}`;
-	}
-
-	function shiftDayKey(dayKey: string, days: number): string {
-		return toDayKey(new Date(new Date(`${dayKey}T12:00:00`).getTime() + days * 86_400_000));
-	}
-
-	function toHourStart(date: Date): Date {
-		return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours());
-	}
-
-	function toHourKey(date: Date): string {
-		return `${toDayKey(date)} ${String(date.getHours()).padStart(2, '0')}:00`;
-	}
-
-	function formatHour(value: string | number): string {
-		const date = typeof value === 'number' ? new Date(value) : parseDate(value);
-		return date
-			? date.toLocaleString(undefined, {
-					month: 'short',
-					day: 'numeric',
-					hour: 'numeric',
-					minute: '2-digit'
-				})
-			: String(value);
-	}
-
-	function formatDay(value: Date): string {
-		return value.toLocaleDateString(undefined, {
-			month: 'short',
-			day: 'numeric',
-			year: 'numeric'
-		});
-	}
-
-	function formatTrafficValue(value: unknown): string {
-		const numeric = readNumber(value);
-		return numeric === null ? '0' : formatNumber(numeric);
-	}
-
-	function formatCoordinate(value: number | null): string {
-		return value === null ? m.common_not_available() : value.toFixed(4);
-	}
-
-	function formatCompactTemperature(value: number | null): string {
-		return value === null ? '--' : `${Math.round(value)}°`;
-	}
-
-	function formatMeasurement(value: number | null, suffix: string, digits = 0): string {
-		return value === null ? `-- ${suffix}` : `${value.toFixed(digits)} ${suffix}`;
-	}
-
-	function metricEmoji(key: string): string {
-		const normalized = normalizeKey(key);
-
-		if (normalized.includes('truck')) return '🚚';
-		if (normalized.includes('bus')) return '🚌';
-		if (normalized.includes('bike') || normalized.includes('bicycle')) return '🚲';
-		if (
-			normalized.includes('ped') ||
-			normalized.includes('person') ||
-			normalized.includes('people')
-		) {
-			return '🚶';
-		}
-		if (normalized.includes('car') || normalized.includes('vehicle')) return '🚗';
-		if (normalized.includes('motor')) return '🏍️';
-		return '🚦';
-	}
-
-	const METRIC_LABEL_KEYS: Record<string, () => string> = {
-		bicycle_count: () => m.traffic_metric_bicycle_count(),
-		bus_count: () => m.traffic_metric_bus_count(),
-		car_count: () => m.traffic_metric_car_count(),
-		motorcycle_count: () => m.traffic_metric_motorcycle_count(),
-		people_count: () => m.traffic_metric_people_count(),
-		train_count: () => m.traffic_metric_train_count(),
-		truck_count: () => m.traffic_metric_truck_count()
-	};
-
-	function metricLabel(key: string): string {
-		const translated = METRIC_LABEL_KEYS[key];
-		return `${metricEmoji(key)} ${translated ? translated() : prettifyKey(key)}`;
-	}
-
-	function weatherEmoji(code: number | null): string {
-		if (code === 0 || code === 1) return '☀️';
-		if (code === 2) return '🌤️';
-		if (code === 3) return '☁️';
-		if (code === 45 || code === 48) return '🌫️';
-		if ([51, 53, 55, 56, 57].includes(code ?? -1)) return '🌦️';
-		if ([61, 63, 65, 66, 67, 80, 81, 82].includes(code ?? -1)) return '🌧️';
-		if ([71, 73, 75, 77, 85, 86].includes(code ?? -1)) return '❄️';
-		if ([95, 96, 99].includes(code ?? -1)) return '⛈️';
-		return '🌡️';
-	}
-
-	function emptyClassTotals(metricKeys: string[]): Record<string, number> {
-		return Object.fromEntries(metricKeys.map((key) => [key, 0]));
-	}
-
-	function isWeatherKey(key: string): boolean {
-		const normalized = normalizeKey(key);
-		if (METADATA_KEYS.has(normalized)) return false;
-		return WEATHER_KEYWORDS.some((keyword) => normalized.includes(keyword));
-	}
-
-	function isPriorityTrafficKey(key: string): boolean {
-		const normalized = normalizeKey(key);
-		return PRIORITY_TRAFFIC_KEYWORDS.some((keyword) => normalized.includes(keyword));
-	}
-
-	function normalizeTrafficRows(
-		rows: unknown[],
-		fallbackDevEui: string,
-		extraRow?: unknown
-	): TrafficRow[] {
-		const seen: Record<string, true> = {};
-		const result: TrafficRow[] = [];
-		const candidates = [...rows];
-
-		if (isRecord(extraRow)) {
-			candidates.push(extraRow);
-		}
-
-		for (const [index, row] of candidates.entries()) {
-			if (!isRecord(row)) continue;
-
-			const createdAt = readString(row.created_at);
-			const parsedDate = parseDate(createdAt);
-			if (!createdAt || !parsedDate) continue;
-
-			const id = String(row.id ?? row.data_id ?? `${createdAt}-${index}`);
-			const dedupeKey = `${id}:${createdAt}`;
-			if (seen[dedupeKey]) continue;
-
-			seen[dedupeKey] = true;
-			result.push({
-				...row,
-				id,
-				created_at: createdAt,
-				dev_eui: String(row.dev_eui ?? fallbackDevEui ?? '')
-			});
-		}
-
-		return result.sort(
-			(left, right) => new Date(left.created_at).getTime() - new Date(right.created_at).getTime()
-		);
-	}
-
-	function resolveTrafficMetricKeys(rows: TrafficRow[]): string[] {
-		const numericKeyMap: Record<string, true> = {};
-
-		for (const row of rows) {
-			for (const [key, value] of Object.entries(row)) {
-				const normalized = normalizeKey(key);
-				if (METADATA_KEYS.has(normalized) || isWeatherKey(key)) continue;
-				if (readNumber(value) === null) continue;
-				numericKeyMap[key] = true;
-			}
-		}
-
-		const keys = Object.keys(numericKeyMap);
-		const prioritized = keys.filter((key) => isPriorityTrafficKey(key));
-		return (prioritized.length > 0 ? prioritized : keys).sort((left, right) =>
-			left.localeCompare(right)
-		);
-	}
-
-	function sumTrafficValues(row: TrafficRow, metricKeys: string[]): number {
-		if (metricKeys.length === 0) {
-			return 1;
-		}
-
-		return metricKeys.reduce((total, key) => total + (readNumber(row[key]) ?? 0), 0);
-	}
-
-	function resolveMissingWeatherState(loadingState: boolean): Omit<
-		WeatherDaySummary,
-		| 'dayKey'
-		| 'temperatureHighC'
-		| 'temperatureLowC'
-		| 'precipitationMm'
-		| 'windSpeedKmh'
-		| 'weatherCode'
-	> & {
-		temperatureHighC: null;
-		temperatureLowC: null;
-		precipitationMm: null;
-		windSpeedKmh: null;
-		weatherCode: null;
-	} {
-		return {
-			summary: loadingState ? m.traffic_loading_weather() : m.traffic_weather_unavailable(),
-			label: loadingState ? m.common_weather() : m.traffic_unavailable(),
-			tone: 'secondary',
-			temperatureLabel: null,
-			temperatureHighC: null,
-			temperatureLowC: null,
-			precipitationMm: null,
-			windSpeedKmh: null,
-			weatherCode: null
-		};
-	}
-
-	function describeWeatherCode(code: number | null): {
-		label: string;
-		description: string;
-		tone: CwTone;
-	} {
-		if (code === 0) {
-			return { label: m.weather_clear(), description: m.weather_clear_sky(), tone: 'success' };
-		}
-
-		if (code === 1) {
-			return {
-				label: m.weather_mostly_clear(),
-				description: m.weather_mostly_clear_description(),
-				tone: 'success'
-			};
-		}
-
-		if (code === 2) {
-			return {
-				label: m.weather_partly_cloudy(),
-				description: m.weather_partly_cloudy_description(),
-				tone: 'info'
-			};
-		}
-
-		if (code === 3) {
-			return { label: m.weather_cloudy(), description: m.weather_overcast(), tone: 'secondary' };
-		}
-
-		if (code === 45 || code === 48) {
-			return { label: m.weather_fog(), description: m.weather_foggy(), tone: 'secondary' };
-		}
-
-		if ([51, 53, 55, 56, 57].includes(code ?? -1)) {
-			return { label: m.weather_drizzle(), description: m.weather_drizzle(), tone: 'info' };
-		}
-
-		if ([61, 63, 65, 66, 67, 80, 81, 82].includes(code ?? -1)) {
-			return { label: m.weather_rain(), description: m.weather_rain(), tone: 'info' };
-		}
-
-		if ([71, 73, 75, 77, 85, 86].includes(code ?? -1)) {
-			return { label: m.weather_snow(), description: m.weather_snow(), tone: 'secondary' };
-		}
-
-		if ([95, 96, 99].includes(code ?? -1)) {
-			return {
-				label: m.weather_storm(),
-				description: m.weather_thunderstorm(),
-				tone: 'danger'
-			};
-		}
-
-		return {
-			label: m.common_weather(),
-			description: m.traffic_weather_unavailable(),
-			tone: 'secondary'
-		};
-	}
-
-	function buildWeatherDaySummary(
-		dayKey: string,
-		weatherCode: number | null,
-		temperatureHighC: number | null,
-		temperatureLowC: number | null,
-		precipitationMm: number | null,
-		windSpeedKmh: number | null
-	): WeatherDaySummary {
-		const descriptor = describeWeatherCode(weatherCode);
-		const temperatureLabel =
-			temperatureHighC !== null || temperatureLowC !== null
-				? `${temperatureHighC !== null ? temperatureHighC.toFixed(0) : '--'}° / ${temperatureLowC !== null ? temperatureLowC.toFixed(0) : '--'}°C`
-				: null;
-
-		const summaryParts = [descriptor.description];
-		if (temperatureLabel) {
-			summaryParts.push(temperatureLabel);
-		}
+	/* ── Device coordinates (route data) ──────────────────────────────── */
 
-		if (precipitationMm !== null) {
-			summaryParts.push(m.traffic_precip_summary({ value: precipitationMm.toFixed(1) }));
-		}
-
-		if (windSpeedKmh !== null) {
-			summaryParts.push(m.traffic_wind_summary({ value: windSpeedKmh.toFixed(0) }));
-		}
-
-		return {
-			dayKey,
-			summary: summaryParts.join(' • '),
-			label: descriptor.label,
-			tone: descriptor.tone,
-			temperatureLabel,
-			temperatureHighC,
-			temperatureLowC,
-			precipitationMm,
-			windSpeedKmh,
-			weatherCode
-		};
-	}
+	let routeDevice = $derived.by<TelemetryRow | null>(() => {
+		const routeData = page.data as Record<string, unknown>;
+		return isRecord(routeData.device) ? routeData.device : null;
+	});
 
 	function readCoordinate(source: TelemetryRow | null, key: 'lat' | 'long'): number | null {
 		if (!source) return null;
@@ -507,311 +49,18 @@
 		return null;
 	}
 
-	function getMonthBounds(year: number, month: number): { start: Date; end: Date } {
-		const start = new Date(year, month, 1, 0, 0, 0, 0);
-		const end = new Date(year, month + 1, 0, 23, 59, 59, 999);
-		return { start, end };
-	}
-
-	function getDayBounds(date: Date): { start: Date; end: Date } {
-		const start = new SvelteDate(date);
-		start.setHours(0, 0, 0, 0);
-
-		const end = new SvelteDate(date);
-		end.setHours(23, 59, 59, 999);
-
-		return { start, end };
-	}
-
-	function normalizeWeatherPayload(payload: unknown): Record<string, WeatherDaySummary> {
-		if (!isRecord(payload) || !isRecord(payload.daily) || !Array.isArray(payload.daily.time)) {
-			return {};
-		}
-
-		const daily = payload.daily as Record<string, unknown> & { time: unknown[] };
-		const result: Record<string, WeatherDaySummary> = {};
-
-		for (const [index, rawDayKey] of daily.time.entries()) {
-			const dayKey = readString(rawDayKey);
-			if (!dayKey) continue;
-
-			result[dayKey] = buildWeatherDaySummary(
-				dayKey,
-				readNumber(Array.isArray(daily.weather_code) ? daily.weather_code[index] : null),
-				readNumber(
-					Array.isArray(daily.temperature_2m_max) ? daily.temperature_2m_max[index] : null
-				),
-				readNumber(
-					Array.isArray(daily.temperature_2m_min) ? daily.temperature_2m_min[index] : null
-				),
-				readNumber(Array.isArray(daily.precipitation_sum) ? daily.precipitation_sum[index] : null),
-				readNumber(Array.isArray(daily.wind_speed_10m_max) ? daily.wind_speed_10m_max[index] : null)
-			);
-		}
-
-		return result;
-	}
-
-	const weatherCache = new SvelteMap<string, Record<string, WeatherDaySummary>>();
-
-	async function fetchWeatherByRange(
-		startDate: Date,
-		endDate: Date,
-		latitude: number,
-		longitude: number
-	): Promise<Record<string, WeatherDaySummary>> {
-		const startDay = toDayKey(startDate);
-		const endDay = toDayKey(endDate);
-		const cacheKey = `${latitude.toFixed(4)}:${longitude.toFixed(4)}:${startDay}:${endDay}`;
-		const cached = weatherCache.get(cacheKey);
-		if (cached) {
-			return cached;
-		}
-
-		const todayKey = toDayKey(new Date());
-		const requests: Promise<Record<string, WeatherDaySummary>>[] = [];
-		const addRequest = (baseUrl: string, requestStart: string, requestEnd: string) => {
-			if (requestStart > requestEnd) return;
-
-			const url = new URL(baseUrl);
-			url.searchParams.set('latitude', String(latitude));
-			url.searchParams.set('longitude', String(longitude));
-			url.searchParams.set('daily', OPEN_METEO_DAILY_FIELDS);
-			url.searchParams.set('timezone', 'auto');
-			url.searchParams.set('start_date', requestStart);
-			url.searchParams.set('end_date', requestEnd);
-
-			requests.push(
-				fetch(url.toString()).then(async (response) => {
-					if (!response.ok) {
-						throw new Error(`Weather request failed with ${response.status}`);
-					}
-
-					return normalizeWeatherPayload(await response.json());
-				})
-			);
-		};
-
-		if (endDay < todayKey) {
-			addRequest(OPEN_METEO_ARCHIVE_URL, startDay, endDay);
-		} else if (startDay >= todayKey) {
-			addRequest(OPEN_METEO_FORECAST_URL, startDay, endDay);
-		} else {
-			addRequest(OPEN_METEO_ARCHIVE_URL, startDay, shiftDayKey(todayKey, -1));
-			addRequest(OPEN_METEO_FORECAST_URL, todayKey, endDay);
-		}
-
-		const merged: Record<string, WeatherDaySummary> = {};
-		for (const weatherResult of await Promise.all(requests)) {
-			Object.assign(merged, weatherResult);
-		}
-
-		weatherCache.set(cacheKey, merged);
-		return merged;
-	}
-
-	function buildHourlyTrafficRows(
-		rows: TrafficRow[],
-		metricKeys: string[],
-		weatherByDay: Record<string, WeatherDaySummary>,
-		weatherLoading: boolean
-	): HourlyTrafficRow[] {
-		const buckets: Record<string, HourlyTrafficRow> = {};
-
-		for (const row of rows) {
-			const timestamp = parseDate(row.created_at);
-			if (!timestamp) continue;
-
-			const hourStart = toHourStart(timestamp);
-			const hourKey = toHourKey(hourStart);
-			let bucket = buckets[hourKey];
-
-			if (!bucket) {
-				bucket = {
-					id: hourKey,
-					traffic_hour: hourStart.toISOString(),
-					day_key: toDayKey(hourStart),
-					hour_timestamp: hourStart.getTime(),
-					total_traffic: 0,
-					samples: 0,
-					weather_summary: ''
-				};
-
-				for (const key of metricKeys) {
-					bucket[key] = 0;
-				}
-
-				buckets[hourKey] = bucket;
-			}
-
-			bucket.samples += 1;
-			bucket.total_traffic += sumTrafficValues(row, metricKeys);
-
-			for (const key of metricKeys) {
-				bucket[key] = (readNumber(bucket[key]) ?? 0) + (readNumber(row[key]) ?? 0);
-			}
-		}
-
-		const missingWeatherState = resolveMissingWeatherState(weatherLoading);
-		return Object.values(buckets)
-			.sort((left, right) => left.hour_timestamp - right.hour_timestamp)
-			.map((row) => ({
-				...row,
-				weather_summary: weatherByDay[row.day_key]?.summary ?? missingWeatherState.summary
-			}));
-	}
-
-	function buildDailyTrafficSummaries(
-		rows: TrafficRow[],
-		metricKeys: string[],
-		weatherByDay: Record<string, WeatherDaySummary>,
-		weatherLoading: boolean
-	): DailyTrafficSummary[] {
-		type DailyAccumulator = {
-			dayKey: string;
-			date: Date;
-			totalTraffic: number;
-			sampleCount: number;
-			hourKeys: Record<string, true>;
-			classTotals: Record<string, number>;
-		};
-
-		const dailyTotals: Record<string, DailyAccumulator> = {};
-
-		for (const row of rows) {
-			const timestamp = parseDate(row.created_at);
-			if (!timestamp) continue;
-
-			const dayKey = toDayKey(timestamp);
-			let daily = dailyTotals[dayKey];
-			if (!daily) {
-				daily = {
-					dayKey,
-					date: new Date(timestamp),
-					totalTraffic: 0,
-					sampleCount: 0,
-					hourKeys: {},
-					classTotals: emptyClassTotals(metricKeys)
-				};
-				dailyTotals[dayKey] = daily;
-			}
-
-			daily.totalTraffic += sumTrafficValues(row, metricKeys);
-			daily.sampleCount += 1;
-			daily.hourKeys[toHourKey(timestamp)] = true;
-			for (const key of metricKeys) {
-				daily.classTotals[key] = (daily.classTotals[key] ?? 0) + (readNumber(row[key]) ?? 0);
-			}
-		}
-
-		for (const dayKey of Object.keys(weatherByDay)) {
-			if (dailyTotals[dayKey]) continue;
-
-			dailyTotals[dayKey] = {
-				dayKey,
-				date: new Date(`${dayKey}T12:00:00`),
-				totalTraffic: 0,
-				sampleCount: 0,
-				hourKeys: {},
-				classTotals: emptyClassTotals(metricKeys)
-			};
-		}
-
-		const missingWeatherState = resolveMissingWeatherState(weatherLoading);
-		return Object.values(dailyTotals)
-			.sort((left, right) => left.date.getTime() - right.date.getTime())
-			.map((daily) => {
-				const weather = weatherByDay[daily.dayKey] ?? {
-					dayKey: daily.dayKey,
-					...missingWeatherState
-				};
-				return {
-					dayKey: daily.dayKey,
-					date: daily.date,
-					totalTraffic: daily.totalTraffic,
-					hourCount: Object.keys(daily.hourKeys).length,
-					sampleCount: daily.sampleCount,
-					classTotals: daily.classTotals,
-					weatherSummary: weather.summary,
-					weatherLabel: weather.label,
-					weatherTone: weather.tone,
-					temperatureLabel: weather.temperatureLabel,
-					temperatureHighC: weather.temperatureHighC,
-					temperatureLowC: weather.temperatureLowC,
-					weatherCode: weather.weatherCode,
-					precipitationMm: weather.precipitationMm,
-					windSpeedKmh: weather.windSpeedKmh
-				};
-			});
-	}
-
-	function downloadCsv(rows: CsvRow[], filename: string): void {
-		if (rows.length === 0) return;
-
-		const keyMap: Record<string, true> = {};
-		for (const row of rows) {
-			for (const key of Object.keys(row)) {
-				keyMap[key] = true;
-			}
-		}
-
-		const preferredOrder = [
-			'traffic_hour',
-			'day',
-			'total_traffic',
-			'samples',
-			'weather_label',
-			'weather_summary',
-			'weather_code',
-			'weather_temp_high_c',
-			'weather_temp_low_c',
-			'weather_precip_mm',
-			'weather_wind_kmh'
-		];
-		const ordered = preferredOrder.filter((key) => {
-			if (!keyMap[key]) return false;
-			delete keyMap[key];
-			return true;
-		});
-		const columns = [
-			...ordered,
-			...Object.keys(keyMap).sort((left, right) => left.localeCompare(right))
-		];
-		const escape = (value: unknown): string => {
-			const text = value == null ? '' : String(value);
-			return /[",\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
-		};
-
-		const csv = [
-			columns.join(','),
-			...rows.map((row) => columns.map((column) => escape(row[column])).join(','))
-		].join('\n');
-
-		const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-		const url = URL.createObjectURL(blob);
-		const link = document.createElement('a');
-		link.href = url;
-		link.download = filename;
-		document.body.append(link);
-		link.click();
-		link.remove();
-		URL.revokeObjectURL(url);
-	}
-
-	let routeDevice = $derived.by<TelemetryRow | null>(() => {
-		const routeData = page.data as Record<string, unknown>;
-		return isRecord(routeData.device) ? routeData.device : null;
-	});
-
-	let now = $state(new Date());
 	let deviceLatitude = $derived.by<number | null>(() => readCoordinate(routeDevice, 'lat'));
 	let deviceLongitude = $derived.by<number | null>(() => readCoordinate(routeDevice, 'long'));
-	let weatherLocationLabel = $derived(
+	let locationLabel = $derived(
 		deviceLatitude !== null && deviceLongitude !== null
-			? `${formatCoordinate(deviceLatitude)}, ${formatCoordinate(deviceLongitude)}`
+			? `${deviceLatitude.toFixed(4)}, ${deviceLongitude.toFixed(4)}`
 			: m.traffic_device_coordinates_unavailable()
 	);
 
+	/* ── Today's rows, hourly buckets, KPIs ───────────────────────────── */
+
+	let now = $state(new Date());
+
 	let allRows = $derived.by<TrafficRow[]>(() =>
 		normalizeTrafficRows(historicalData, devEui, latestData)
 	);
@@ -825,619 +74,126 @@
 			return timestamp !== null && timestamp >= start && timestamp <= end;
 		});
 	});
-	let trafficMetricKeys = $derived.by<string[]>(() => resolveTrafficMetricKeys(todayRows));
-	let selectedPeriodMetricTotals = $derived.by<Record<string, number>>(() =>
-		Object.fromEntries(
-			trafficMetricKeys.map((key) => [
-				key,
-				todayRows.reduce((total, row) => total + (readNumber(row[key]) ?? 0), 0)
-			])
-		)
-	);
-
-	let selectedWeatherByDay = $state<Record<string, WeatherDaySummary>>({});
-	let selectedWeatherLoading = $state(false);
-	let selectedWeatherError = $state<string | null>(null);
-	let selectedWeatherRequestId = 0;
-
-	let hourlyRows = $derived.by<HourlyTrafficRow[]>(() =>
-		buildHourlyTrafficRows(
-			todayRows,
-			trafficMetricKeys,
-			selectedWeatherByDay,
-			selectedWeatherLoading
-		)
-	);
-
-	let dailySummaries = $derived.by<DailyTrafficSummary[]>(() =>
-		buildDailyTrafficSummaries(
-			todayRows,
-			trafficMetricKeys,
-			selectedWeatherByDay,
-			selectedWeatherLoading
-		)
-	);
-
-	let dailySummaryByKey = $derived.by<Record<string, DailyTrafficSummary>>(() =>
-		Object.fromEntries(dailySummaries.map((summary) => [summary.dayKey, summary]))
-	);
-
-	let selectedPeriodTotal = $derived(
-		hourlyRows.reduce((total, row) => total + row.total_traffic, 0)
-	);
-
-	let currentHourKey = $derived.by(() => toHourKey(toHourStart(now)));
-	let currentHourRow = $derived.by<HourlyTrafficRow | null>(() => {
-		return (
-			hourlyRows.find((row) => row.id === currentHourKey) ??
-			hourlyRows[hourlyRows.length - 1] ??
-			null
-		);
-	});
-
-	let currentDaySummary = $derived.by<DailyTrafficSummary | null>(() => {
-		return dailySummaryByKey[todayDayKey] ?? null;
-	});
-
-	let currentHourLabel = $derived(
-		currentHourRow?.id === currentHourKey
-			? m.traffic_current_hour_today()
-			: m.traffic_latest_available_hour_today()
-	);
-
-	let hourlyColumns = $derived<CwColumnDef<HourlyTrafficRow>[]>([
-		{ key: 'traffic_hour', header: m.traffic_hour(), sortable: true, width: '14rem' },
-		{ key: 'total_traffic', header: m.traffic_total_traffic(), sortable: true, width: '8rem' },
-		{ key: 'samples', header: m.traffic_samples(), sortable: true, width: '7rem' },
-		...trafficMetricKeys.map((key) => ({
-			key,
-			header: prettifyKey(key),
-			sortable: true,
-			width: '8rem'
-		})),
-		{ key: 'weather_summary', header: m.common_weather(), sortable: true, width: '20rem' }
-	]);
-
-	let tableLoading = $state(false);
-	let csvDownloading = $state(false);
+	let classKeys = $derived.by<string[]>(() => resolveTrafficClassKeys(todayRows));
+	let hourlyRows = $derived.by(() => buildHourlyTrafficRows(todayRows, classKeys));
+	let kpis = $derived.by(() => computeTrafficKpis(hourlyRows, classKeys, now));
 
-	let calendarYear = $state(new Date().getFullYear());
-	let calendarMonth = $state(new Date().getMonth());
-	let trackedCalendarDevice = $state('');
-	let calendarMonthRows = $state<TrafficRow[]>([]);
-	let calendarWeatherByDay = $state<Record<string, WeatherDaySummary>>({});
-	let calendarLoading = $state(false);
-	let calendarError = $state<string | null>(null);
-	let calendarRequestId = 0;
-	let lastSelectedWeatherKey = $state('');
-	let lastCalendarLoadKey = $state('');
+	/* ── Today's weather (Open-Meteo, daily granularity) ──────────────── */
 
-	let calendarMonthLabel = $derived(
-		new Date(calendarYear, calendarMonth, 1).toLocaleDateString(undefined, {
-			month: 'long',
-			year: 'numeric'
-		})
-	);
-	let calendarTrafficMetricKeys = $derived.by<string[]>(() =>
-		resolveTrafficMetricKeys(calendarMonthRows)
-	);
+	let weatherByDay = $state<Record<string, WeatherDaySummary>>({});
+	let weatherLoading = $state(false);
+	let weatherError = $state<string | null>(null);
+	let weatherRequestId = 0;
 
-	let calendarDailySummaries = $derived.by<DailyTrafficSummary[]>(() =>
-		buildDailyTrafficSummaries(
-			calendarMonthRows,
-			calendarTrafficMetricKeys,
-			calendarWeatherByDay,
-			calendarLoading
-		)
-	);
+	let currentDayWeather = $derived(weatherByDay[todayDayKey] ?? null);
 
-	let calendarSummaryByKey = $derived.by<Record<string, DailyTrafficSummary>>(() =>
-		Object.fromEntries(calendarDailySummaries.map((summary) => [summary.dayKey, summary]))
-	);
-
-	async function refreshSelectedWeather(): Promise<void> {
-		const bounds = todayBounds;
+	$effect(() => {
 		const dayKey = todayDayKey;
+		const bounds = todayBounds;
 		const latitude = deviceLatitude;
 		const longitude = deviceLongitude;
-		const key = `${dayKey}:${latitude ?? 'na'}:${longitude ?? 'na'}`;
+		void dayKey;
 
-		if (key === lastSelectedWeatherKey) {
-			return;
-		}
-
-		lastSelectedWeatherKey = key;
-
-		selectedWeatherRequestId += 1;
-		const requestId = selectedWeatherRequestId;
+		weatherRequestId += 1;
+		const requestId = weatherRequestId;
 
 		if (latitude === null || longitude === null) {
-			selectedWeatherByDay = {};
-			selectedWeatherLoading = false;
-			selectedWeatherError = m.traffic_weather_requires_coordinates();
-			return;
-		}
-
-		selectedWeatherByDay = {};
-		selectedWeatherLoading = true;
-		selectedWeatherError = null;
-
-		try {
-			const weather = await fetchWeatherByRange(bounds.start, bounds.end, latitude, longitude);
-			if (requestId !== selectedWeatherRequestId) return;
-			selectedWeatherByDay = weather;
-		} catch (error) {
-			if (requestId !== selectedWeatherRequestId) return;
-			console.error('Failed to fetch selected-period weather:', error);
-			selectedWeatherByDay = {};
-			selectedWeatherError = m.traffic_weather_today_failed();
-		} finally {
-			if (requestId === selectedWeatherRequestId) {
-				selectedWeatherLoading = false;
-			}
-		}
-	}
-
-	async function refreshCalendarMonth(): Promise<void> {
-		const deviceKey = devEui.trim();
-		const token = authToken;
-		const year = calendarYear;
-		const month = calendarMonth;
-		const latitude = deviceLatitude;
-		const longitude = deviceLongitude;
-		const key = `${deviceKey}:${token ?? 'no-token'}:${year}:${month}:${latitude ?? 'na'}:${longitude ?? 'na'}`;
-
-		if (key === lastCalendarLoadKey) {
-			return;
-		}
-
-		lastCalendarLoadKey = key;
-
-		calendarRequestId += 1;
-		const requestId = calendarRequestId;
-
-		if (!deviceKey || !token) {
-			calendarMonthRows = [];
-			calendarWeatherByDay = {};
-			calendarLoading = false;
-			calendarError = deviceKey ? m.traffic_calendar_auth_required() : null;
+			weatherByDay = {};
+			weatherLoading = false;
+			weatherError = m.traffic_weather_requires_coordinates();
 			return;
 		}
 
-		const { start, end } = getMonthBounds(year, month);
-		calendarMonthRows = [];
-		calendarWeatherByDay = {};
-		calendarLoading = true;
-		calendarError = null;
-
-		try {
-			const api = new ApiService({ authToken: token });
-			const trafficPromise = api.getTrafficData(deviceKey, {
-				start: start.toISOString(),
-				end: end.toISOString()
+		weatherLoading = true;
+		weatherError = null;
+
+		fetchWeatherByRange(bounds.start, bounds.end, latitude, longitude)
+			.then((weather) => {
+				if (requestId !== weatherRequestId) return;
+				weatherByDay = weather;
+			})
+			.catch((error) => {
+				if (requestId !== weatherRequestId) return;
+				console.error('Failed to fetch selected-period weather:', error);
+				weatherByDay = {};
+				weatherError = m.traffic_weather_today_failed();
+			})
+			.finally(() => {
+				if (requestId === weatherRequestId) {
+					weatherLoading = false;
+				}
 			});
-			const weatherPromise =
-				latitude !== null && longitude !== null
-					? fetchWeatherByRange(start, end, latitude, longitude).catch((error) => {
-							console.error('Failed to fetch calendar weather:', error);
-							return {};
-						})
-					: Promise.resolve({});
-
-			const [trafficData, weatherByDay] = await Promise.all([trafficPromise, weatherPromise]);
-			if (requestId !== calendarRequestId) return;
+	});
 
-			calendarMonthRows = normalizeTrafficRows(trafficData, deviceKey);
-			calendarWeatherByDay = weatherByDay;
-		} catch (error) {
-			if (requestId !== calendarRequestId) return;
-			console.error('Failed to fetch calendar month traffic:', error);
-			calendarMonthRows = [];
-			calendarWeatherByDay = {};
-			calendarError = m.traffic_load_month_failed();
-		} finally {
-			if (requestId === calendarRequestId) {
-				calendarLoading = false;
-			}
-		}
-	}
+	let anchorDate = $derived(parseDate(isRecord(latestData) ? latestData.created_at : null));
 
 	onMount(() => {
 		const devicePage = document.querySelector('.traffic-display')?.closest('.device-page');
 		devicePage?.classList.add('device-page--traffic');
 
-		const synchronize = () => {
+		// A minute tick keeps "today"/"current hour" boundaries honest; data
+		// refresh itself is driven by the page-level scheduler via props.
+		const intervalId = window.setInterval(() => {
 			now = new Date();
+		}, 60_000);
 
-			if (devEui !== trackedCalendarDevice) {
-				trackedCalendarDevice = devEui;
-				const anchor = parseDate(isRecord(latestData) ? latestData.created_at : null) ?? now;
-				calendarYear = anchor.getFullYear();
-				calendarMonth = anchor.getMonth();
-				lastCalendarLoadKey = '';
-			}
-
-			void refreshSelectedWeather();
-			void refreshCalendarMonth();
-		};
-
-		synchronize();
-		const intervalId = window.setInterval(synchronize, 250);
 		return () => {
 			window.clearInterval(intervalId);
 			devicePage?.classList.remove('device-page--traffic');
 		};
 	});
-
-	function buildCsvRows(weatherByDay: Record<string, WeatherDaySummary>): CsvRow[] {
-		return hourlyRows.map((row) => {
-			const weather = weatherByDay[row.day_key];
-			const csvRow: CsvRow = {
-				traffic_hour: formatHour(row.traffic_hour),
-				day: formatDay(new Date(row.hour_timestamp)),
-				total_traffic: row.total_traffic,
-				samples: row.samples,
-				weather_label: weather?.label ?? m.traffic_unavailable(),
-				weather_summary: weather?.summary ?? m.traffic_weather_unavailable(),
-				weather_code: weather?.weatherCode ?? null,
-				weather_temp_high_c: weather?.temperatureHighC ?? null,
-				weather_temp_low_c: weather?.temperatureLowC ?? null,
-				weather_precip_mm: weather?.precipitationMm ?? null,
-				weather_wind_kmh: weather?.windSpeedKmh ?? null
-			};
-
-			for (const key of trafficMetricKeys) {
-				csvRow[key] = readNumber(row[key]) ?? 0;
-			}
-
-			return csvRow;
-		});
-	}
-
-	function buildCsvFilename(): string {
-		const safeLocation = locationName.trim().replace(/[^a-zA-Z0-9_-]/g, '_') || 'location';
-		const safeDevEui = devEui.trim().replace(/[^a-zA-Z0-9_-]/g, '_') || 'device';
-		return `${safeLocation}-${safeDevEui}-${todayDayKey}-traffic-hourly.csv`;
-	}
-
-	async function handleCsvDownload(): Promise<void> {
-		if (hourlyRows.length === 0) return;
-
-		let weatherByDay = selectedWeatherByDay;
-		const bounds = todayBounds;
-		const latitude = deviceLatitude;
-		const longitude = deviceLongitude;
-
-		if (bounds && latitude !== null && longitude !== null) {
-			csvDownloading = true;
-			try {
-				weatherByDay = await fetchWeatherByRange(bounds.start, bounds.end, latitude, longitude);
-			} catch (error) {
-				console.error('Failed to refresh CSV weather:', error);
-			} finally {
-				csvDownloading = false;
-			}
-		}
-
-		downloadCsv(buildCsvRows(weatherByDay), buildCsvFilename());
-	}
-
-	function handleCalendarMonthChange(year: number, month: number): void {
-		calendarYear = year;
-		calendarMonth = month;
-	}
-
-	async function loadHourlyData(query: CwTableQuery): Promise<CwTableResult<HourlyTrafficRow>> {
-		tableLoading = true;
-
-		try {
-			let filtered = [...hourlyRows].sort(
-				(left, right) => right.hour_timestamp - left.hour_timestamp
-			);
-
-			if (query.search.trim()) {
-				const search = query.search.trim().toLowerCase();
-				filtered = filtered.filter((row) =>
-					[
-						formatHour(row.traffic_hour),
-						row.weather_summary,
-						row.total_traffic,
-						row.samples,
-						...trafficMetricKeys.map((key) => row[key] ?? '')
-					]
-						.join(' ')
-						.toLowerCase()
-						.includes(search)
-				);
-			}
-
-			if (query.sort) {
-				const direction = query.sort.direction === 'asc' ? 1 : -1;
-				filtered.sort((left, right) => {
-					const leftValue = left[query.sort!.column];
-					const rightValue = right[query.sort!.column];
-					const leftNumber = readNumber(leftValue);
-					const rightNumber = readNumber(rightValue);
-
-					if (leftNumber !== null && rightNumber !== null) {
-						return (leftNumber - rightNumber) * direction;
-					}
-
-					return String(leftValue ?? '').localeCompare(String(rightValue ?? '')) * direction;
-				});
-			}
-
-			const start = Math.max(0, (query.page - 1) * query.pageSize);
-			return {
-				rows: filtered.slice(start, start + query.pageSize),
-				total: filtered.length
-			};
-		} finally {
-			tableLoading = false;
-		}
-	}
 </script>
 
 <div class="traffic-display">
-	<div class="traffic-display__summary-grid">
-		<CwCard title={m.traffic_current_hour_total()} subtitle={currentHourLabel} elevated>
-			{#if loading && !currentHourRow}
-				<div class="traffic-display__status">
-					<CwSpinner />
-					<span>{m.traffic_loading_current_traffic()}</span>
-				</div>
-			{:else if currentHourRow}
-				<p class="traffic-display__kpi">
-					{formatNumber(currentHourRow.total_traffic)}
-					<span>{formatHour(currentHourRow.traffic_hour)}</span>
-				</p>
-
-				<div class="traffic-display__chips">
-					<CwChip
-						label={m.traffic_samples_count({ count: formatNumber(currentHourRow.samples) })}
-						tone="secondary"
-						variant="soft"
-					/>
-				</div>
-
-				{#if trafficMetricKeys.length > 0}
-					<div class="traffic-display__metric-panel">
-						{#each trafficMetricKeys as key (key)}
-							<div class="traffic-display__metric-row">
-								<span>{metricLabel(key)}</span>
-								<strong>{formatTrafficValue(currentHourRow[key])}</strong>
-							</div>
-						{/each}
-					</div>
-				{/if}
-			{:else}
-				<p class="traffic-display__supporting-copy">{m.traffic_no_data_today()}</p>
-			{/if}
-		</CwCard>
-
+	<TrafficKpiStrip
+		{kpis}
+		{loading}
+		weather={currentDayWeather}
+		{weatherLoading}
+		{weatherError}
+		{locationLabel}
+	/>
+
+	<div class="traffic-display__viz-grid">
 		<CwCard
-			title={m.traffic_selected_period()}
-			subtitle={hourlyRows.length > 0 ? m.traffic_today_only() : m.traffic_no_traffic_today()}
+			title={m.traffic_chart_hourly_title()}
+			subtitle={m.traffic_chart_hourly_subtitle()}
 			elevated
+			class="traffic-display__chart-card"
 		>
-			<p class="traffic-display__kpi">
-				{formatNumber(selectedPeriodTotal)}
-				<span>{m.traffic_tracked_hours_count({ count: formatNumber(hourlyRows.length) })}</span>
-			</p>
-
-			<div class="traffic-display__chips">
-				<CwChip
-					label={m.traffic_raw_records_count({ count: formatNumber(todayRows.length) })}
-					tone="secondary"
-					variant="soft"
-				/>
-				<CwChip
-					label={m.traffic_weather_days_count({ count: formatNumber(dailySummaries.length) })}
-					tone="success"
-					variant="soft"
-				/>
-			</div>
-
-			{#if trafficMetricKeys.length > 0}
-				<div class="traffic-display__metric-panel">
-					{#each trafficMetricKeys as key (key)}
-						<div class="traffic-display__metric-row">
-							<span>{metricLabel(key)}</span>
-							<strong>{formatTrafficValue(selectedPeriodMetricTotals[key])}</strong>
-						</div>
-					{/each}
-				</div>
-			{/if}
+			<TrafficHourlyChart {hourlyRows} {classKeys} dayStart={todayBounds.start} />
 		</CwCard>
 
-		<CwCard title={m.traffic_daily_weather()} subtitle={m.traffic_today_via_coordinates()} elevated>
-			{#if selectedWeatherLoading && !currentDaySummary}
-				<div class="traffic-display__status traffic-display__status--compact">
-					<CwSpinner />
-					<span>{m.traffic_loading_weather()}</span>
-				</div>
-			{:else if currentDaySummary}
-				<div class="traffic-display__weather-panel">
-					<div class="traffic-display__weather-topline">
-						<p class="traffic-display__weather-temperature">
-							{weatherEmoji(currentDaySummary.weatherCode)}
-							{formatCompactTemperature(currentDaySummary.temperatureHighC)}
-						</p>
-						<p class="traffic-display__weather-low">
-							{m.traffic_low_temperature({
-								value: formatCompactTemperature(currentDaySummary.temperatureLowC)
-							})}
-						</p>
-					</div>
-
-					<p class="traffic-display__weather-label">
-						{weatherEmoji(currentDaySummary.weatherCode)}
-						{currentDaySummary.weatherLabel}
-					</p>
-
-					<div class="traffic-display__chips">
-						<CwChip
-							label={`💧 ${formatMeasurement(currentDaySummary.precipitationMm, 'mm', 1)}`}
-							tone="info"
-							variant="soft"
-						/>
-						<CwChip
-							label={`💨 ${formatMeasurement(currentDaySummary.windSpeedKmh, 'km/h')}`}
-							tone="secondary"
-							variant="soft"
-						/>
-						<CwChip
-							label={`📍 ${weatherLocationLabel}`}
-							tone={deviceLatitude !== null && deviceLongitude !== null ? 'secondary' : 'warning'}
-							variant="soft"
-						/>
-					</div>
-
-					<p class="traffic-display__supporting-copy">{currentDaySummary.weatherSummary}</p>
-				</div>
-			{:else if selectedWeatherError}
-				<p class="traffic-display__supporting-copy">{selectedWeatherError}</p>
-			{:else}
-				<p class="traffic-display__supporting-copy">{m.traffic_weather_unavailable()}</p>
-			{/if}
+		<CwCard
+			title={m.traffic_class_breakdown()}
+			subtitle={m.traffic_class_breakdown_subtitle()}
+			elevated
+		>
+			<TrafficClassBreakdown {classKeys} classTotals={kpis.classTotals} />
 		</CwCard>
 	</div>
 
-	<CwCard
-		title={m.traffic_hourly_traffic()}
-		subtitle={m.traffic_hourly_traffic_subtitle()}
-		elevated
-	>
-		<div class="traffic-display__actions">
-			<CwButton
-				variant="secondary"
-				size="sm"
-				disabled={hourlyRows.length === 0 || csvDownloading}
-				onclick={handleCsvDownload}
-			>
-				{csvDownloading ? m.traffic_preparing_csv() : m.traffic_download_hourly_csv()}
-			</CwButton>
-		</div>
-
-		{#if loading && hourlyRows.length === 0}
-			<div class="traffic-display__status">
-				<CwSpinner />
-				<span>{m.traffic_fetching_traffic_data()}</span>
-			</div>
-		{:else if hourlyRows.length === 0}
-			<p class="traffic-display__supporting-copy">{m.traffic_no_data_today()}</p>
-		{:else}
-			<CwDataTable
-				labels={cwDataTableLabels()}
-				columns={hourlyColumns}
-				loadData={loadHourlyData}
-				loading={tableLoading}
-				rowKey="id"
-				searchable
-			>
-				{#snippet cell(
-					row: HourlyTrafficRow,
-					col: CwColumnDef<HourlyTrafficRow>,
-					defaultValue: string
-				)}
-					{#if col.key === 'traffic_hour'}
-						{formatHour(row.traffic_hour)}
-					{:else if col.key === 'total_traffic' || col.key === 'samples'}
-						{formatTrafficValue(row[col.key])}
-					{:else if col.key === 'weather_summary'}
-						{row.weather_summary}
-					{:else}
-						{formatTrafficValue(row[col.key] ?? defaultValue)}
-					{/if}
-				{/snippet}
-			</CwDataTable>
-		{/if}
-	</CwCard>
-
-	<CwCard
-		title={m.traffic_daily_traffic_weather()}
-		subtitle={m.traffic_calendar_fetch_subtitle({ monthLabel: calendarMonthLabel })}
-		elevated
-	>
-		<div class="traffic-display__calendar-meta">
-			<CwChip
-				label={m.traffic_month_traffic_days({
-					count: formatNumber(calendarDailySummaries.length)
-				})}
-				tone="info"
-				variant="soft"
-			/>
-			<CwChip
-				label={m.traffic_lat_lng_label({ label: weatherLocationLabel })}
-				tone={deviceLatitude !== null && deviceLongitude !== null ? 'secondary' : 'warning'}
-				variant="soft"
-			/>
-
-			{#if calendarLoading}
-				<CwChip label={m.traffic_loading_visible_month()} tone="secondary" variant="soft" />
-			{/if}
-
-			{#if calendarError}
-				<CwChip label={calendarError} tone="danger" variant="soft" />
-			{:else if !calendarLoading && calendarDailySummaries.length === 0}
-				<CwChip label={m.traffic_no_data_this_month()} tone="secondary" variant="soft" />
-			{/if}
-		</div>
-
-		<CwCalendar
-			bind:year={calendarYear}
-			bind:month={calendarMonth}
-			maxDate={new Date()}
-			onMonthChange={handleCalendarMonthChange}
-			class="traffic-display__calendar"
-		>
-			{#snippet dayContent(date)}
-				{@const summary = calendarSummaryByKey[toDayKey(date)]}
-				{#if summary}
-					<div class="traffic-display__calendar-summary">
-						<div class="traffic-display__calendar-weather-panel">
-							<div class="traffic-display__calendar-weather-topline">
-								<p class="traffic-display__calendar-weather-temp">
-									{formatCompactTemperature(summary.temperatureHighC)}
-								</p>
-								<p class="traffic-display__calendar-weather-low">
-									{m.traffic_low_temperature({
-										value: formatCompactTemperature(summary.temperatureLowC)
-									})}
-								</p>
-							</div>
-
-							<p class="traffic-display__calendar-weather-label">
-								{weatherEmoji(summary.weatherCode)}
-								{summary.weatherLabel}
-							</p>
-							<p class="traffic-display__calendar-copy">
-								💧 {formatMeasurement(summary.precipitationMm, 'mm', 1)}
-							</p>
-						</div>
-
-						<div class="traffic-display__calendar-traffic-panel">
-							<p class="traffic-display__calendar-section-heading">
-								{m.traffic_calendar_total({ count: formatNumber(summary.totalTraffic) })}
-							</p>
-
-							{#if calendarTrafficMetricKeys.length > 0}
-								<div class="traffic-display__calendar-class-list">
-									{#each calendarTrafficMetricKeys as key (key)}
-										<p class="traffic-display__calendar-copy">
-											{metricLabel(key)}: {formatTrafficValue(summary.classTotals[key])}
-										</p>
-									{/each}
-								</div>
-							{:else}
-								<p class="traffic-display__calendar-copy">{m.traffic_no_class_data_recorded()}</p>
-							{/if}
-						</div>
-					</div>
-				{/if}
-			{/snippet}
-		</CwCalendar>
-	</CwCard>
+	<TrafficHourlyTable
+		{hourlyRows}
+		{classKeys}
+		{locationName}
+		{devEui}
+		{todayDayKey}
+		{todayBounds}
+		latitude={deviceLatitude}
+		longitude={deviceLongitude}
+		{weatherByDay}
+		{loading}
+	/>
+
+	<TrafficCalendarCard
+		{devEui}
+		{authToken}
+		latitude={deviceLatitude}
+		longitude={deviceLongitude}
+		{anchorDate}
+		{locationLabel}
+	/>
 </div>
 
 <style>
@@ -1447,231 +203,20 @@
 		gap: 1rem;
 	}
 
-	.traffic-display__summary-grid {
+	.traffic-display__viz-grid {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+		grid-template-columns: 1fr;
 		gap: 1rem;
+		align-items: start;
 	}
 
-	.traffic-display__kpi {
-		margin: 0 0 0.85rem;
-		font-size: clamp(1.5rem, 2.2vw, 2.2rem);
-		font-weight: 700;
-		color: var(--cw-text-primary);
-	}
-
-	.traffic-display__kpi span {
-		display: block;
-		margin-top: 0.35rem;
-		font-size: 0.95rem;
-		font-weight: 500;
-		color: var(--cw-text-muted);
-	}
-
-	.traffic-display__chips,
-	.traffic-display__calendar-meta {
-		display: flex;
-		flex-wrap: wrap;
-		gap: 0.5rem;
-	}
-
-	.traffic-display__actions {
-		display: flex;
-		justify-content: flex-end;
-		margin-bottom: 0.75rem;
-	}
-
-	.traffic-display__metric-panel {
-		display: grid;
-		gap: 0.45rem;
-		margin-top: 0.9rem;
-	}
-
-	.traffic-display__metric-row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 0.75rem;
-		padding: 0.55rem 0.7rem;
-		border-radius: 0.85rem;
-		border: 1px solid color-mix(in srgb, var(--cw-border-default) 46%, transparent);
-		/* background: color-mix(in srgb, var(--cw-surface, #f8fafc) 86%, #dbeafe 14%); DO NOT PUT THIS BACK IN */
-		font-size: 0.95rem;
-	}
-
-	.traffic-display__metric-row strong {
-		font-size: 1rem;
-		color: var(--cw-text-primary);
-	}
-
-	.traffic-display__status {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.75rem;
-		color: var(--cw-text-muted);
-	}
-
-	.traffic-display__status--compact {
-		margin-top: 0.75rem;
-	}
-
-	.traffic-display__supporting-copy,
-	.traffic-display__calendar-copy {
-		margin: 0.5rem 0 0;
-		font-size: 0.9rem;
-		color: var(--cw-text-secondary);
-	}
-
-	.traffic-display__calendar-summary {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 0.35rem;
-	}
-
-	.traffic-display__weather-panel,
-	.traffic-display__calendar-weather-panel,
-	.traffic-display__calendar-traffic-panel {
-		width: 100%;
-		border-radius: 0.95rem;
-		padding: 0.75rem;
-		border: 1px solid transparent;
-		box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
-	}
-
-	.traffic-display__weather-panel,
-	.traffic-display__calendar-weather-panel {
-		background: linear-gradient(180deg, #8cc8ff 0%, #72b5f2 100%);
-		color: #0f172a;
-	}
-
-	.traffic-display__calendar-traffic-panel {
-		background: linear-gradient(180deg, #1f5ca8 0%, #18498a 100%);
-		color: #eff6ff;
-	}
-
-	.traffic-display__weather-topline,
-	.traffic-display__calendar-weather-topline {
-		display: flex;
-		align-items: flex-start;
-		justify-content: space-between;
-		gap: 0.75rem;
-	}
-
-	.traffic-display__weather-temperature,
-	.traffic-display__calendar-weather-temp {
-		margin: 0;
-		font-size: 1.8rem;
-		font-weight: 700;
-		line-height: 1;
-	}
-
-	.traffic-display__weather-low,
-	.traffic-display__calendar-weather-low {
-		margin: 0.15rem 0 0;
-		font-size: 0.82rem;
-		font-weight: 600;
-	}
-
-	.traffic-display__weather-label,
-	.traffic-display__calendar-weather-label,
-	.traffic-display__calendar-section-heading {
-		margin: 0.6rem 0 0.25rem;
-		font-size: 0.98rem;
-		font-weight: 700;
-	}
-
-	.traffic-display__calendar-class-list {
-		display: grid;
-		gap: 0.15rem;
-	}
-
-	.traffic-display__calendar-copy {
-		line-height: 1.3;
-		word-break: break-word;
-	}
-
-	.traffic-display__weather-panel .traffic-display__supporting-copy,
-	.traffic-display__weather-panel :global(.cw-chip),
-	.traffic-display__calendar-weather-panel .traffic-display__calendar-copy,
-	.traffic-display__calendar-weather-panel .traffic-display__calendar-weather-label {
-		color: inherit;
-	}
-
-	.traffic-display__calendar-traffic-panel .traffic-display__calendar-copy,
-	.traffic-display__calendar-traffic-panel .traffic-display__calendar-section-heading {
-		color: inherit;
-	}
-
-	:global([data-theme='dark']) .traffic-display__metric-row {
-		background: color-mix(in srgb, var(--cw-bg-surface-elevated) 80%, var(--cw-info-800) 20%);
-		border-color: color-mix(in srgb, var(--cw-info-400) 20%, var(--cw-border-default));
-		color: var(--cw-text-primary);
-	}
-
-	:global([data-theme='dark']) .traffic-display__weather-panel,
-	:global([data-theme='dark']) .traffic-display__calendar-weather-panel {
-		background:
-			radial-gradient(
-				130% 100% at 0% 0%,
-				color-mix(in srgb, var(--cw-info-300) 18%, transparent),
-				transparent 55%
-			),
-			linear-gradient(
-				180deg,
-				color-mix(in srgb, var(--cw-info-600) 32%, var(--cw-bg-surface-elevated)) 0%,
-				color-mix(in srgb, var(--cw-info-900) 42%, var(--cw-bg-surface)) 100%
-			);
-		color: #eff6ff;
-		border-color: color-mix(in srgb, var(--cw-info-300) 30%, transparent);
-		box-shadow:
-			inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent),
-			0 8px 18px color-mix(in srgb, #050a16 36%, transparent);
-	}
-
-	:global([data-theme='dark']) .traffic-display__calendar-traffic-panel {
-		background:
-			radial-gradient(
-				120% 100% at 100% 0%,
-				color-mix(in srgb, var(--cw-primary-300) 16%, transparent),
-				transparent 58%
-			),
-			linear-gradient(
-				180deg,
-				color-mix(in srgb, var(--cw-primary-800) 34%, var(--cw-bg-surface-elevated)) 0%,
-				color-mix(in srgb, var(--cw-primary-900) 48%, var(--cw-bg-surface)) 100%
-			);
-		color: #f8fbff;
-		border-color: color-mix(in srgb, var(--cw-primary-300) 24%, transparent);
-		box-shadow:
-			inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent),
-			0 8px 18px color-mix(in srgb, #050a16 38%, transparent);
-	}
-
-	:global([data-theme='dark']) .traffic-display__weather-panel :global(.cw-chip),
-	:global([data-theme='dark']) .traffic-display__calendar-weather-panel :global(.cw-chip) {
-		box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 6%, transparent);
-	}
-
-	:global(.traffic-display__calendar .cw-calendar__day-body) {
-		gap: 0.5rem;
-	}
-
-	:global(.traffic-display__calendar .cw-calendar__day) {
-		min-height: 16rem;
+	@media (min-width: 1024px) {
+		.traffic-display__viz-grid {
+			grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
+		}
 	}
 
 	:global(.device-page--traffic .device-page__group--ranges) {
 		display: none;
 	}
-
-	@media (max-width: 640px) {
-		.traffic-display__actions {
-			justify-content: stretch;
-		}
-
-		.traffic-display__actions :global(button) {
-			width: 100%;
-		}
-	}
 </style>
diff --git a/src/lib/components/displays/TrafficDisplay/TrafficHourlyChart.svelte b/src/lib/components/displays/TrafficDisplay/TrafficHourlyChart.svelte
new file mode 100644
index 00000000..d1e0a004
--- /dev/null
+++ b/src/lib/components/displays/TrafficDisplay/TrafficHourlyChart.svelte
@@ -0,0 +1,76 @@
+<script lang="ts">
+	import {
+		CwStackedBarChart,
+		type CwStackedBarBucket,
+		type CwStackedBarCategory
+	} from '@cropwatchdevelopment/cwui';
+	import { formatNumber } from '$lib/i18n/format';
+	import { cwStackedBarChartLabels } from '$lib/i18n/cwuiLabels';
+	import { m } from '$lib/paraglide/messages.js';
+	import { appTheme } from '$lib/theme/appTheme.svelte';
+	import {
+		metricLabel,
+		readNumber,
+		toHourKey,
+		trafficClassColor,
+		TRAFFIC_CLASS_KEYS,
+		type HourlyTrafficRow
+	} from './traffic-data';
+
+	interface Props {
+		hourlyRows: HourlyTrafficRow[];
+		classKeys: string[];
+		/** Local midnight of the displayed day. */
+		dayStart: Date;
+	}
+
+	let { hourlyRows, classKeys, dayStart }: Props = $props();
+
+	// Color follows the class's fixed slot in TRAFFIC_CLASS_KEYS (falling back
+	// to list position for discovered keys) so it matches the breakdown card
+	// and never changes as classes come and go.
+	const categories = $derived<CwStackedBarCategory[]>(
+		classKeys.map((key, index) => ({
+			id: key,
+			label: metricLabel(key),
+			color: trafficClassColor(
+				appTheme.current,
+				TRAFFIC_CLASS_KEYS.indexOf(key as (typeof TRAFFIC_CLASS_KEYS)[number]) >= 0
+					? TRAFFIC_CLASS_KEYS.indexOf(key as (typeof TRAFFIC_CLASS_KEYS)[number])
+					: index
+			)
+		}))
+	);
+
+	// Always render the full 00–23 axis so quiet hours read as quiet, not missing.
+	const buckets = $derived<CwStackedBarBucket[]>(
+		Array.from({ length: 24 }, (_, hour) => {
+			const hourDate = new Date(
+				dayStart.getFullYear(),
+				dayStart.getMonth(),
+				dayStart.getDate(),
+				hour
+			);
+			const row = hourlyRows.find((r) => r.id === toHourKey(hourDate));
+			return {
+				key: hourDate.toISOString(),
+				label: `${String(hour).padStart(2, '0')}`,
+				values: Object.fromEntries(
+					classKeys.map((key) => [key, row ? (readNumber(row[key]) ?? 0) : 0])
+				)
+			};
+		})
+	);
+
+	const hasAnyData = $derived(hourlyRows.some((row) => row.total_traffic > 0));
+</script>
+
+<CwStackedBarChart
+	{categories}
+	{buckets}
+	theme={appTheme.current}
+	height={300}
+	formatValue={formatNumber}
+	labels={cwStackedBarChartLabels()}
+	noData={hasAnyData ? false : m.traffic_no_data_today()}
+/>
diff --git a/src/lib/components/displays/TrafficDisplay/TrafficHourlyTable.svelte b/src/lib/components/displays/TrafficDisplay/TrafficHourlyTable.svelte
new file mode 100644
index 00000000..62ef2d27
--- /dev/null
+++ b/src/lib/components/displays/TrafficDisplay/TrafficHourlyTable.svelte
@@ -0,0 +1,287 @@
+<script lang="ts">
+	import {
+		CwButton,
+		CwCard,
+		CwDataTable,
+		type CwColumnDef,
+		type CwTableQuery,
+		type CwTableResult
+	} from '@cropwatchdevelopment/cwui';
+	import { cwDataTableLabels } from '$lib/i18n/cwuiLabels';
+	import { m } from '$lib/paraglide/messages.js';
+	import {
+		formatDay,
+		formatHour,
+		formatTrafficValue,
+		metricLabel,
+		readNumber,
+		type HourlyTrafficRow
+	} from './traffic-data';
+	import { fetchWeatherByRange, type WeatherDaySummary } from './traffic-weather';
+
+	type CsvRow = Record<string, string | number | null>;
+
+	interface Props {
+		hourlyRows: HourlyTrafficRow[];
+		classKeys: string[];
+		locationName: string;
+		devEui: string;
+		todayDayKey: string;
+		todayBounds: { start: Date; end: Date };
+		latitude: number | null;
+		longitude: number | null;
+		weatherByDay: Record<string, WeatherDaySummary>;
+		loading: boolean;
+	}
+
+	let {
+		hourlyRows,
+		classKeys,
+		locationName,
+		devEui,
+		todayDayKey,
+		todayBounds,
+		latitude,
+		longitude,
+		weatherByDay,
+		loading
+	}: Props = $props();
+
+	let tableLoading = $state(false);
+	let csvDownloading = $state(false);
+
+	const columns = $derived<CwColumnDef<HourlyTrafficRow>[]>([
+		{ key: 'traffic_hour', header: m.traffic_hour(), sortable: true, width: '12rem' },
+		{ key: 'total_traffic', header: m.traffic_total_traffic(), sortable: true, width: '8rem' },
+		...classKeys.map((key) => ({
+			key,
+			header: metricLabel(key),
+			sortable: true,
+			width: '8rem'
+		}))
+	]);
+
+	// CwDataTable only re-calls loadData when its query changes; this fingerprint
+	// rides in as an external filter so fresh telemetry re-renders the table.
+	const dataFingerprint = $derived(
+		`${hourlyRows.length}:${hourlyRows.reduce((sum, row) => sum + row.total_traffic, 0)}`
+	);
+
+	async function loadHourlyData(query: CwTableQuery): Promise<CwTableResult<HourlyTrafficRow>> {
+		tableLoading = true;
+
+		try {
+			let filtered = [...hourlyRows].sort(
+				(left, right) => right.hour_timestamp - left.hour_timestamp
+			);
+
+			if (query.search.trim()) {
+				const search = query.search.trim().toLowerCase();
+				filtered = filtered.filter((row) =>
+					[
+						formatHour(row.traffic_hour),
+						row.total_traffic,
+						row.samples,
+						...classKeys.map((key) => row[key] ?? '')
+					]
+						.join(' ')
+						.toLowerCase()
+						.includes(search)
+				);
+			}
+
+			if (query.sort) {
+				const direction = query.sort.direction === 'asc' ? 1 : -1;
+				filtered.sort((left, right) => {
+					const leftValue = left[query.sort!.column];
+					const rightValue = right[query.sort!.column];
+					const leftNumber = readNumber(leftValue);
+					const rightNumber = readNumber(rightValue);
+
+					if (leftNumber !== null && rightNumber !== null) {
+						return (leftNumber - rightNumber) * direction;
+					}
+
+					return String(leftValue ?? '').localeCompare(String(rightValue ?? '')) * direction;
+				});
+			}
+
+			const start = Math.max(0, (query.page - 1) * query.pageSize);
+			return {
+				rows: filtered.slice(start, start + query.pageSize),
+				total: filtered.length
+			};
+		} finally {
+			tableLoading = false;
+		}
+	}
+
+	/* ── CSV export (keeps the daily weather columns) ─────────────────── */
+
+	function buildCsvRows(weather: Record<string, WeatherDaySummary>): CsvRow[] {
+		return hourlyRows.map((row) => {
+			const dayWeather = weather[row.day_key];
+			const csvRow: CsvRow = {
+				traffic_hour: formatHour(row.traffic_hour),
+				day: formatDay(new Date(row.hour_timestamp)),
+				total_traffic: row.total_traffic,
+				samples: row.samples,
+				weather_label: dayWeather?.label ?? m.traffic_unavailable(),
+				weather_summary: dayWeather?.summary ?? m.traffic_weather_unavailable(),
+				weather_code: dayWeather?.weatherCode ?? null,
+				weather_temp_high_c: dayWeather?.temperatureHighC ?? null,
+				weather_temp_low_c: dayWeather?.temperatureLowC ?? null,
+				weather_precip_mm: dayWeather?.precipitationMm ?? null,
+				weather_wind_kmh: dayWeather?.windSpeedKmh ?? null
+			};
+
+			for (const key of classKeys) {
+				csvRow[key] = readNumber(row[key]) ?? 0;
+			}
+
+			return csvRow;
+		});
+	}
+
+	function downloadCsv(rows: CsvRow[], filename: string): void {
+		if (rows.length === 0) return;
+
+		const keyMap: Record<string, true> = {};
+		for (const row of rows) {
+			for (const key of Object.keys(row)) {
+				keyMap[key] = true;
+			}
+		}
+
+		const preferredOrder = [
+			'traffic_hour',
+			'day',
+			'total_traffic',
+			'samples',
+			'weather_label',
+			'weather_summary',
+			'weather_code',
+			'weather_temp_high_c',
+			'weather_temp_low_c',
+			'weather_precip_mm',
+			'weather_wind_kmh'
+		];
+		const ordered = preferredOrder.filter((key) => {
+			if (!keyMap[key]) return false;
+			delete keyMap[key];
+			return true;
+		});
+		const columnKeys = [
+			...ordered,
+			...Object.keys(keyMap).sort((left, right) => left.localeCompare(right))
+		];
+		const escape = (value: unknown): string => {
+			const text = value == null ? '' : String(value);
+			return /[",\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+		};
+
+		const csv = [
+			columnKeys.join(','),
+			...rows.map((row) => columnKeys.map((column) => escape(row[column])).join(','))
+		].join('\n');
+
+		const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+		const url = URL.createObjectURL(blob);
+		const link = document.createElement('a');
+		link.href = url;
+		link.download = filename;
+		document.body.append(link);
+		link.click();
+		link.remove();
+		URL.revokeObjectURL(url);
+	}
+
+	async function handleCsvDownload(): Promise<void> {
+		if (hourlyRows.length === 0) return;
+
+		let weather = weatherByDay;
+		if (latitude !== null && longitude !== null) {
+			csvDownloading = true;
+			try {
+				weather = await fetchWeatherByRange(
+					todayBounds.start,
+					todayBounds.end,
+					latitude,
+					longitude
+				);
+			} catch (error) {
+				console.error('Failed to refresh CSV weather:', error);
+			} finally {
+				csvDownloading = false;
+			}
+		}
+
+		const safeLocation = locationName.trim().replace(/[^a-zA-Z0-9_-]/g, '_') || 'location';
+		const safeDevEui = devEui.trim().replace(/[^a-zA-Z0-9_-]/g, '_') || 'device';
+		downloadCsv(
+			buildCsvRows(weather),
+			`${safeLocation}-${safeDevEui}-${todayDayKey}-traffic-hourly.csv`
+		);
+	}
+</script>
+
+<CwCard title={m.traffic_hourly_traffic()} subtitle={m.traffic_hourly_traffic_subtitle()} elevated>
+	<div class="traffic-hourly-table__actions">
+		<CwButton
+			variant="secondary"
+			size="sm"
+			disabled={hourlyRows.length === 0 || csvDownloading}
+			onclick={handleCsvDownload}
+		>
+			{csvDownloading ? m.traffic_preparing_csv() : m.traffic_download_hourly_csv()}
+		</CwButton>
+	</div>
+
+	{#if loading && hourlyRows.length === 0}
+		<p class="traffic-hourly-table__empty">{m.traffic_fetching_traffic_data()}</p>
+	{:else if hourlyRows.length === 0}
+		<p class="traffic-hourly-table__empty">{m.traffic_no_data_today()}</p>
+	{:else}
+		<CwDataTable
+			labels={cwDataTableLabels()}
+			{columns}
+			loadData={loadHourlyData}
+			loading={tableLoading}
+			filters={{ fingerprint: [dataFingerprint] }}
+			rowKey="id"
+			searchable
+		>
+			{#snippet cell(row: HourlyTrafficRow, col: CwColumnDef<HourlyTrafficRow>)}
+				{#if col.key === 'traffic_hour'}
+					{formatHour(row.traffic_hour)}
+				{:else}
+					{formatTrafficValue(row[col.key])}
+				{/if}
+			{/snippet}
+		</CwDataTable>
+	{/if}
+</CwCard>
+
+<style>
+	.traffic-hourly-table__actions {
+		display: flex;
+		justify-content: flex-end;
+		margin-bottom: 0.75rem;
+	}
+
+	.traffic-hourly-table__empty {
+		margin: 0.5rem 0 0;
+		font-size: 0.9rem;
+		color: var(--cw-text-secondary);
+	}
+
+	@media (max-width: 640px) {
+		.traffic-hourly-table__actions {
+			justify-content: stretch;
+		}
+
+		.traffic-hourly-table__actions :global(button) {
+			width: 100%;
+		}
+	}
+</style>
diff --git a/src/lib/components/displays/TrafficDisplay/TrafficKpiStrip.svelte b/src/lib/components/displays/TrafficDisplay/TrafficKpiStrip.svelte
new file mode 100644
index 00000000..63fe9093
--- /dev/null
+++ b/src/lib/components/displays/TrafficDisplay/TrafficKpiStrip.svelte
@@ -0,0 +1,199 @@
+<script lang="ts">
+	import { CwSpinner } from '@cropwatchdevelopment/cwui';
+	import { formatNumber } from '$lib/i18n/format';
+	import { m } from '$lib/paraglide/messages.js';
+	import {
+		formatHour,
+		formatMeasurement,
+		metricEmoji,
+		metricLabelText,
+		type TrafficKpis
+	} from './traffic-data';
+	import { weatherEmoji, type WeatherDaySummary } from './traffic-weather';
+
+	interface Props {
+		kpis: TrafficKpis;
+		loading: boolean;
+		weather: WeatherDaySummary | null;
+		weatherLoading: boolean;
+		weatherError: string | null;
+		locationLabel: string;
+	}
+
+	let { kpis, loading, weather, weatherLoading, weatherError, locationLabel }: Props = $props();
+</script>
+
+<div class="traffic-kpis">
+	<!-- Today's total -->
+	<div class="traffic-kpis__tile">
+		<p class="traffic-kpis__label">{m.traffic_today_total()}</p>
+		<p class="traffic-kpis__value">{formatNumber(kpis.todayTotal)}</p>
+		<p class="traffic-kpis__hint">
+			{m.traffic_tracked_hours_count({ count: formatNumber(kpis.trackedHours) })}
+		</p>
+	</div>
+
+	<!-- Current (or latest available) hour -->
+	<div class="traffic-kpis__tile">
+		<p class="traffic-kpis__label">
+			{kpis.isCurrentHour
+				? m.traffic_current_hour_today()
+				: m.traffic_latest_available_hour_today()}
+		</p>
+		{#if loading && !kpis.currentHourRow}
+			<p class="traffic-kpis__value traffic-kpis__value--pending"><CwSpinner /></p>
+		{:else if kpis.currentHourRow}
+			<p class="traffic-kpis__value">{formatNumber(kpis.currentHourRow.total_traffic)}</p>
+			<p class="traffic-kpis__hint">{formatHour(kpis.currentHourRow.traffic_hour)}</p>
+		{:else}
+			<p class="traffic-kpis__value">0</p>
+			<p class="traffic-kpis__hint">{m.traffic_no_traffic_today()}</p>
+		{/if}
+	</div>
+
+	<!-- Peak hour -->
+	<div class="traffic-kpis__tile">
+		<p class="traffic-kpis__label">{m.traffic_peak_hour()}</p>
+		{#if kpis.peakHourRow}
+			<p class="traffic-kpis__value">{formatNumber(kpis.peakHourRow.total_traffic)}</p>
+			<p class="traffic-kpis__hint">{formatHour(kpis.peakHourRow.traffic_hour)}</p>
+		{:else}
+			<p class="traffic-kpis__value">--</p>
+			<p class="traffic-kpis__hint">{m.traffic_no_traffic_today()}</p>
+		{/if}
+	</div>
+
+	<!-- Busiest detection class -->
+	<div class="traffic-kpis__tile">
+		<p class="traffic-kpis__label">{m.traffic_top_class()}</p>
+		{#if kpis.topClassKey}
+			<p class="traffic-kpis__value">
+				<span class="traffic-kpis__emoji" aria-hidden="true">{metricEmoji(kpis.topClassKey)}</span>
+				{formatNumber(kpis.classTotals[kpis.topClassKey] ?? 0)}
+			</p>
+			<p class="traffic-kpis__hint">{metricLabelText(kpis.topClassKey)}</p>
+		{:else}
+			<p class="traffic-kpis__value">--</p>
+			<p class="traffic-kpis__hint">{m.traffic_no_class_data_recorded()}</p>
+		{/if}
+	</div>
+
+	<!-- Today's weather -->
+	<div class="traffic-kpis__tile traffic-kpis__tile--weather">
+		<p class="traffic-kpis__label">{m.traffic_daily_weather()}</p>
+		{#if weatherLoading && !weather}
+			<p class="traffic-kpis__value traffic-kpis__value--pending"><CwSpinner /></p>
+		{:else if weather}
+			<p class="traffic-kpis__value">
+				<span class="traffic-kpis__emoji" aria-hidden="true"
+					>{weatherEmoji(weather.weatherCode)}</span
+				>
+				{weather.temperatureHighC !== null ? `${Math.round(weather.temperatureHighC)}°` : '--'}
+				<span class="traffic-kpis__value-low">
+					{m.traffic_low_temperature({
+						value:
+							weather.temperatureLowC !== null ? `${Math.round(weather.temperatureLowC)}°` : '--'
+					})}
+				</span>
+			</p>
+			<p class="traffic-kpis__hint">
+				{weather.label}
+				· 💧 {formatMeasurement(weather.precipitationMm, 'mm', 1)}
+				· 💨 {formatMeasurement(weather.windSpeedKmh, 'km/h')}
+			</p>
+			<p class="traffic-kpis__hint traffic-kpis__hint--muted">📍 {locationLabel}</p>
+		{:else}
+			<p class="traffic-kpis__hint">{weatherError ?? m.traffic_weather_unavailable()}</p>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.traffic-kpis {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
+		gap: 0.75rem;
+	}
+
+	.traffic-kpis__tile {
+		display: flex;
+		flex-direction: column;
+		gap: 0.3rem;
+		padding: 0.9rem 1rem;
+		border-radius: 1rem;
+		border: 1px solid color-mix(in srgb, var(--cw-border-default) 46%, transparent);
+		background: var(--cw-bg-surface-elevated);
+	}
+
+	.traffic-kpis__tile--weather {
+		background: linear-gradient(180deg, #8cc8ff 0%, #72b5f2 100%);
+		border-color: transparent;
+		color: #0f172a;
+		box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent);
+	}
+
+	.traffic-kpis__tile--weather .traffic-kpis__label,
+	.traffic-kpis__tile--weather .traffic-kpis__value,
+	.traffic-kpis__tile--weather .traffic-kpis__hint,
+	.traffic-kpis__tile--weather .traffic-kpis__hint--muted {
+		color: inherit;
+	}
+
+	.traffic-kpis__label {
+		margin: 0;
+		font-size: 0.78rem;
+		font-weight: 600;
+		letter-spacing: 0.02em;
+		text-transform: uppercase;
+		color: var(--cw-text-muted);
+	}
+
+	.traffic-kpis__value {
+		margin: 0;
+		font-size: clamp(1.4rem, 2vw, 1.9rem);
+		font-weight: 700;
+		line-height: 1.1;
+		color: var(--cw-text-primary);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.traffic-kpis__value--pending {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.traffic-kpis__value-low {
+		font-size: 0.8rem;
+		font-weight: 600;
+	}
+
+	.traffic-kpis__emoji {
+		font-size: 1.2rem;
+	}
+
+	.traffic-kpis__hint {
+		margin: 0;
+		font-size: 0.82rem;
+		color: var(--cw-text-secondary);
+	}
+
+	.traffic-kpis__hint--muted {
+		color: var(--cw-text-muted);
+	}
+
+	:global([data-theme='dark']) .traffic-kpis__tile--weather {
+		background:
+			radial-gradient(
+				130% 100% at 0% 0%,
+				color-mix(in srgb, var(--cw-info-300) 18%, transparent),
+				transparent 55%
+			),
+			linear-gradient(
+				180deg,
+				color-mix(in srgb, var(--cw-info-600) 32%, var(--cw-bg-surface-elevated)) 0%,
+				color-mix(in srgb, var(--cw-info-900) 42%, var(--cw-bg-surface)) 100%
+			);
+		color: #eff6ff;
+		border-color: color-mix(in srgb, var(--cw-info-300) 30%, transparent);
+	}
+</style>
diff --git a/src/lib/components/displays/TrafficDisplay/traffic-data.ts b/src/lib/components/displays/TrafficDisplay/traffic-data.ts
new file mode 100644
index 00000000..4a1b887a
--- /dev/null
+++ b/src/lib/components/displays/TrafficDisplay/traffic-data.ts
@@ -0,0 +1,520 @@
+/**
+ * Pure data helpers for the traffic (AI camera) display.
+ *
+ * cw_traffic2 rows are hourly accumulator buckets: one row per
+ * (dev_eui, traffic_hour, line_number), incremented in place. Bucketing here
+ * therefore keys on `traffic_hour` (falling back to the created_at hour) and
+ * sums across line_number rows that share an hour.
+ */
+import { formatDate, formatDateTime, formatNumber } from '$lib/i18n/format';
+import { m } from '$lib/paraglide/messages.js';
+
+export type TelemetryRow = Record<string, unknown>;
+
+export interface TrafficRow extends TelemetryRow {
+	id: string;
+	created_at: string;
+	dev_eui: string;
+}
+
+export interface HourlyTrafficRow {
+	id: string;
+	traffic_hour: string;
+	day_key: string;
+	hour_timestamp: number;
+	total_traffic: number;
+	samples: number;
+	[key: string]: string | number;
+}
+
+export interface DailyTrafficSummary {
+	dayKey: string;
+	date: Date;
+	totalTraffic: number;
+	hourCount: number;
+	sampleCount: number;
+	classTotals: Record<string, number>;
+}
+
+export interface TrafficKpis {
+	todayTotal: number;
+	trackedHours: number;
+	sampleCount: number;
+	currentHourRow: HourlyTrafficRow | null;
+	/** True when currentHourRow is genuinely this hour (vs latest available). */
+	isCurrentHour: boolean;
+	peakHourRow: HourlyTrafficRow | null;
+	topClassKey: string | null;
+	classTotals: Record<string, number>;
+}
+
+/**
+ * Known cw_traffic2 detection classes in fixed display order — the stack
+ * order (bottom first) and the color assignment both follow this order, so
+ * a class keeps its color no matter which classes are present or hidden.
+ */
+export const TRAFFIC_CLASS_KEYS = [
+	'car_count',
+	'people_count',
+	'truck_count',
+	'bicycle_count',
+	'bus_count',
+	'motorcycle_count',
+	'train_count'
+] as const;
+
+/**
+ * Categorical palette for traffic classes (light/dark steps of the same
+ * hues), indexed by position in TRAFFIC_CLASS_KEYS. Validated for CVD
+ * separation and normal-vision distance on the CWUI light/dark surfaces.
+ * Matches CwStackedBarChart's default palette so chart and breakdown agree.
+ */
+const TRAFFIC_CLASS_COLORS = {
+	light: ['#2a78d6', '#eb6834', '#1baf7a', '#eda100', '#e87ba4', '#008300', '#4a3aa7', '#e34948'],
+	dark: ['#3987e5', '#d95926', '#199e70', '#c98500', '#d55181', '#008300', '#9085e9', '#e66767']
+} as const;
+
+export function trafficClassColor(theme: 'light' | 'dark', classIndex: number): string {
+	const palette = TRAFFIC_CLASS_COLORS[theme];
+	return palette[classIndex % palette.length];
+}
+
+const METADATA_KEYS = new Set([
+	'id',
+	'dev_eui',
+	'created_at',
+	'updated_at',
+	'deleted_at',
+	'is_simulated',
+	'timestamp',
+	'date',
+	'time',
+	'traffic_hour',
+	'line_number'
+]);
+
+const WEATHER_KEYWORDS = [
+	'weather',
+	'condition',
+	'summary',
+	'description',
+	'icon',
+	'temp',
+	'temperature',
+	'humidity',
+	'wind',
+	'rain',
+	'snow',
+	'precip',
+	'pressure',
+	'cloud',
+	'fog',
+	'dew',
+	'uv',
+	'visibility',
+	'barometer',
+	'feels_like',
+	'feelslike'
+];
+
+const PRIORITY_TRAFFIC_KEYWORDS = [
+	'count',
+	'traffic',
+	'vehicle',
+	'volume',
+	'car',
+	'truck',
+	'bus',
+	'bike',
+	'bicycle',
+	'ped',
+	'pedestrian',
+	'person',
+	'people',
+	'north',
+	'south',
+	'east',
+	'west',
+	'inbound',
+	'outbound',
+	'entry',
+	'exit',
+	'lane',
+	'bound',
+	'class',
+	'axle'
+];
+
+/* ── Value guards ─────────────────────────────────────────────────────── */
+
+export function isRecord(value: unknown): value is TelemetryRow {
+	return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+export function readNumber(value: unknown): number | null {
+	if (typeof value === 'number' && Number.isFinite(value)) {
+		return value;
+	}
+
+	if (typeof value === 'string' && value.trim().length > 0) {
+		const parsed = Number(value);
+		return Number.isFinite(parsed) ? parsed : null;
+	}
+
+	return null;
+}
+
+export function readString(value: unknown): string | null {
+	return typeof value === 'string' && value.trim().length > 0 ? value.trim() : null;
+}
+
+export function parseDate(value: unknown): Date | null {
+	const text = readString(value);
+	if (!text) return null;
+
+	const parsed = new Date(text);
+	return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+function normalizeKey(key: string): string {
+	return key.trim().toLowerCase();
+}
+
+/* ── Date/format helpers (all in the viewer's local timezone) ─────────── */
+
+export function toDayKey(date: Date): string {
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, '0');
+	const day = String(date.getDate()).padStart(2, '0');
+	return `${year}-${month}-${day}`;
+}
+
+export function shiftDayKey(dayKey: string, days: number): string {
+	return toDayKey(new Date(new Date(`${dayKey}T12:00:00`).getTime() + days * 86_400_000));
+}
+
+export function toHourStart(date: Date): Date {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours());
+}
+
+export function toHourKey(date: Date): string {
+	return `${toDayKey(date)} ${String(date.getHours()).padStart(2, '0')}:00`;
+}
+
+export function getDayBounds(date: Date): { start: Date; end: Date } {
+	const start = new Date(date);
+	start.setHours(0, 0, 0, 0);
+
+	const end = new Date(date);
+	end.setHours(23, 59, 59, 999);
+
+	return { start, end };
+}
+
+export function getMonthBounds(year: number, month: number): { start: Date; end: Date } {
+	const start = new Date(year, month, 1, 0, 0, 0, 0);
+	const end = new Date(year, month + 1, 0, 23, 59, 59, 999);
+	return { start, end };
+}
+
+export function formatHour(value: string | number): string {
+	const date = typeof value === 'number' ? new Date(value) : parseDate(value);
+	return date
+		? formatDateTime(date, {
+				month: 'short',
+				day: 'numeric',
+				hour: 'numeric',
+				minute: '2-digit'
+			})
+		: String(value);
+}
+
+export function formatDay(value: Date): string {
+	return formatDate(value, {
+		month: 'short',
+		day: 'numeric',
+		year: 'numeric'
+	});
+}
+
+export function formatMeasurement(value: number | null, suffix: string, digits = 0): string {
+	return value === null ? `-- ${suffix}` : `${value.toFixed(digits)} ${suffix}`;
+}
+
+export function formatTrafficValue(value: unknown): string {
+	const numeric = readNumber(value);
+	return numeric === null ? '0' : formatNumber(numeric);
+}
+
+/* ── Class labels ─────────────────────────────────────────────────────── */
+
+export function metricEmoji(key: string): string {
+	const normalized = normalizeKey(key);
+
+	if (normalized.includes('truck')) return '🚚';
+	if (normalized.includes('bus')) return '🚌';
+	if (normalized.includes('bike') || normalized.includes('bicycle')) return '🚲';
+	if (
+		normalized.includes('ped') ||
+		normalized.includes('person') ||
+		normalized.includes('people')
+	) {
+		return '🚶';
+	}
+	if (normalized.includes('train')) return '🚆';
+	if (normalized.includes('car') || normalized.includes('vehicle')) return '🚗';
+	if (normalized.includes('motor')) return '🏍️';
+	return '🚦';
+}
+
+const METRIC_LABEL_KEYS: Record<string, () => string> = {
+	bicycle_count: () => m.traffic_metric_bicycle_count(),
+	bus_count: () => m.traffic_metric_bus_count(),
+	car_count: () => m.traffic_metric_car_count(),
+	motorcycle_count: () => m.traffic_metric_motorcycle_count(),
+	people_count: () => m.traffic_metric_people_count(),
+	train_count: () => m.traffic_metric_train_count(),
+	truck_count: () => m.traffic_metric_truck_count()
+};
+
+function prettifyKey(key: string): string {
+	return key.replaceAll('_', ' ').replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+/** Translated class name without the emoji prefix. */
+export function metricLabelText(key: string): string {
+	const translated = METRIC_LABEL_KEYS[key];
+	return translated ? translated() : prettifyKey(key);
+}
+
+/** Translated class name with an emoji prefix. */
+export function metricLabel(key: string): string {
+	return `${metricEmoji(key)} ${metricLabelText(key)}`;
+}
+
+/* ── Row normalization + bucketing ────────────────────────────────────── */
+
+export function normalizeTrafficRows(
+	rows: unknown[],
+	fallbackDevEui: string,
+	extraRow?: unknown
+): TrafficRow[] {
+	const seen: Record<string, true> = {};
+	const result: TrafficRow[] = [];
+	const candidates = [...rows];
+
+	if (isRecord(extraRow)) {
+		candidates.push(extraRow);
+	}
+
+	for (const [index, row] of candidates.entries()) {
+		if (!isRecord(row)) continue;
+
+		const createdAt = readString(row.created_at);
+		const parsedDate = parseDate(createdAt);
+		if (!createdAt || !parsedDate) continue;
+
+		const id = String(row.id ?? row.data_id ?? `${createdAt}-${index}`);
+		const dedupeKey = `${id}:${createdAt}`;
+		if (seen[dedupeKey]) continue;
+
+		seen[dedupeKey] = true;
+		result.push({
+			...row,
+			id,
+			created_at: createdAt,
+			dev_eui: String(row.dev_eui ?? fallbackDevEui ?? '')
+		});
+	}
+
+	return result.sort(
+		(left, right) => new Date(left.created_at).getTime() - new Date(right.created_at).getTime()
+	);
+}
+
+function isWeatherKey(key: string): boolean {
+	const normalized = normalizeKey(key);
+	if (METADATA_KEYS.has(normalized)) return false;
+	return WEATHER_KEYWORDS.some((keyword) => normalized.includes(keyword));
+}
+
+function isPriorityTrafficKey(key: string): boolean {
+	const normalized = normalizeKey(key);
+	return PRIORITY_TRAFFIC_KEYWORDS.some((keyword) => normalized.includes(keyword));
+}
+
+/**
+ * Detection classes present in the rows, in TRAFFIC_CLASS_KEYS order. Unknown
+ * schemas fall back to keyword discovery over numeric columns.
+ */
+export function resolveTrafficClassKeys(rows: TrafficRow[]): string[] {
+	const present = TRAFFIC_CLASS_KEYS.filter((key) =>
+		rows.some((row) => readNumber(row[key]) !== null)
+	);
+	if (present.length > 0) return [...present];
+
+	const numericKeyMap: Record<string, true> = {};
+	for (const row of rows) {
+		for (const [key, value] of Object.entries(row)) {
+			const normalized = normalizeKey(key);
+			if (METADATA_KEYS.has(normalized) || isWeatherKey(key)) continue;
+			if (readNumber(value) === null) continue;
+			numericKeyMap[key] = true;
+		}
+	}
+
+	const keys = Object.keys(numericKeyMap);
+	const prioritized = keys.filter((key) => isPriorityTrafficKey(key));
+	return (prioritized.length > 0 ? prioritized : keys).sort((left, right) =>
+		left.localeCompare(right)
+	);
+}
+
+export function sumTrafficValues(row: TrafficRow, classKeys: string[]): number {
+	if (classKeys.length === 0) {
+		return 1;
+	}
+
+	return classKeys.reduce((total, key) => total + (readNumber(row[key]) ?? 0), 0);
+}
+
+/**
+ * The bucket-start instant for a row: `traffic_hour` when present (the true
+ * accumulator key), otherwise the created_at hour floor.
+ */
+export function rowHourStart(row: TrafficRow): Date | null {
+	const trafficHour = parseDate(row.traffic_hour);
+	if (trafficHour) return trafficHour;
+
+	const createdAt = parseDate(row.created_at);
+	return createdAt ? toHourStart(createdAt) : null;
+}
+
+export function buildHourlyTrafficRows(
+	rows: TrafficRow[],
+	classKeys: string[]
+): HourlyTrafficRow[] {
+	const buckets: Record<string, HourlyTrafficRow> = {};
+
+	for (const row of rows) {
+		const hourStart = rowHourStart(row);
+		if (!hourStart) continue;
+
+		const hourKey = toHourKey(hourStart);
+		let bucket = buckets[hourKey];
+
+		if (!bucket) {
+			bucket = {
+				id: hourKey,
+				traffic_hour: hourStart.toISOString(),
+				day_key: toDayKey(hourStart),
+				hour_timestamp: hourStart.getTime(),
+				total_traffic: 0,
+				samples: 0
+			};
+
+			for (const key of classKeys) {
+				bucket[key] = 0;
+			}
+
+			buckets[hourKey] = bucket;
+		}
+
+		bucket.samples += 1;
+		bucket.total_traffic += sumTrafficValues(row, classKeys);
+
+		for (const key of classKeys) {
+			bucket[key] = (readNumber(bucket[key]) ?? 0) + (readNumber(row[key]) ?? 0);
+		}
+	}
+
+	return Object.values(buckets).sort((left, right) => left.hour_timestamp - right.hour_timestamp);
+}
+
+export function buildDailyTrafficSummaries(
+	rows: TrafficRow[],
+	classKeys: string[]
+): DailyTrafficSummary[] {
+	type DailyAccumulator = DailyTrafficSummary & { hourKeys: Record<string, true> };
+
+	const dailyTotals: Record<string, DailyAccumulator> = {};
+
+	for (const row of rows) {
+		const hourStart = rowHourStart(row);
+		if (!hourStart) continue;
+
+		const dayKey = toDayKey(hourStart);
+		let daily = dailyTotals[dayKey];
+		if (!daily) {
+			daily = {
+				dayKey,
+				date: new Date(hourStart),
+				totalTraffic: 0,
+				hourCount: 0,
+				sampleCount: 0,
+				hourKeys: {},
+				classTotals: Object.fromEntries(classKeys.map((key) => [key, 0]))
+			};
+			dailyTotals[dayKey] = daily;
+		}
+
+		daily.totalTraffic += sumTrafficValues(row, classKeys);
+		daily.sampleCount += 1;
+		daily.hourKeys[toHourKey(hourStart)] = true;
+		for (const key of classKeys) {
+			daily.classTotals[key] = (daily.classTotals[key] ?? 0) + (readNumber(row[key]) ?? 0);
+		}
+	}
+
+	return Object.values(dailyTotals)
+		.sort((left, right) => left.date.getTime() - right.date.getTime())
+		.map(({ hourKeys, ...daily }) => ({ ...daily, hourCount: Object.keys(hourKeys).length }));
+}
+
+export function computeTrafficKpis(
+	hourlyRows: HourlyTrafficRow[],
+	classKeys: string[],
+	now: Date
+): TrafficKpis {
+	const todayTotal = hourlyRows.reduce((total, row) => total + row.total_traffic, 0);
+	const sampleCount = hourlyRows.reduce((total, row) => total + row.samples, 0);
+
+	const currentHourKey = toHourKey(toHourStart(now));
+	const exactCurrent = hourlyRows.find((row) => row.id === currentHourKey) ?? null;
+	const currentHourRow = exactCurrent ?? hourlyRows[hourlyRows.length - 1] ?? null;
+
+	let peakHourRow: HourlyTrafficRow | null = null;
+	for (const row of hourlyRows) {
+		if (!peakHourRow || row.total_traffic > peakHourRow.total_traffic) {
+			peakHourRow = row;
+		}
+	}
+
+	const classTotals: Record<string, number> = Object.fromEntries(
+		classKeys.map((key) => [
+			key,
+			hourlyRows.reduce((total, row) => total + (readNumber(row[key]) ?? 0), 0)
+		])
+	);
+
+	let topClassKey: string | null = null;
+	for (const key of classKeys) {
+		if (topClassKey === null || (classTotals[key] ?? 0) > (classTotals[topClassKey] ?? 0)) {
+			topClassKey = key;
+		}
+	}
+	if (topClassKey !== null && (classTotals[topClassKey] ?? 0) === 0) {
+		topClassKey = null;
+	}
+
+	return {
+		todayTotal,
+		trackedHours: hourlyRows.length,
+		sampleCount,
+		currentHourRow,
+		isCurrentHour: exactCurrent !== null,
+		peakHourRow,
+		topClassKey,
+		classTotals
+	};
+}
diff --git a/src/lib/components/displays/TrafficDisplay/traffic-weather.ts b/src/lib/components/displays/TrafficDisplay/traffic-weather.ts
new file mode 100644
index 00000000..5b04f65b
--- /dev/null
+++ b/src/lib/components/displays/TrafficDisplay/traffic-weather.ts
@@ -0,0 +1,223 @@
+/**
+ * Client-side daily weather for the traffic display, fetched directly from
+ * Open-Meteo (forecast API for today/future days, archive API for the past)
+ * and cached per coordinates + day range.
+ */
+import type { CwTone } from '@cropwatchdevelopment/cwui';
+import { SvelteMap } from 'svelte/reactivity';
+import { m } from '$lib/paraglide/messages.js';
+import { isRecord, readNumber, readString, shiftDayKey, toDayKey } from './traffic-data';
+
+export interface WeatherDaySummary {
+	dayKey: string;
+	summary: string;
+	label: string;
+	tone: CwTone;
+	temperatureLabel: string | null;
+	temperatureHighC: number | null;
+	temperatureLowC: number | null;
+	precipitationMm: number | null;
+	windSpeedKmh: number | null;
+	weatherCode: number | null;
+}
+
+const OPEN_METEO_FORECAST_URL = 'https://api.open-meteo.com/v1/forecast';
+const OPEN_METEO_ARCHIVE_URL = 'https://archive-api.open-meteo.com/v1/archive';
+const OPEN_METEO_DAILY_FIELDS =
+	'weather_code,temperature_2m_max,temperature_2m_min,precipitation_sum,wind_speed_10m_max';
+
+export function weatherEmoji(code: number | null): string {
+	if (code === 0 || code === 1) return '☀️';
+	if (code === 2) return '🌤️';
+	if (code === 3) return '☁️';
+	if (code === 45 || code === 48) return '🌫️';
+	if ([51, 53, 55, 56, 57].includes(code ?? -1)) return '🌦️';
+	if ([61, 63, 65, 66, 67, 80, 81, 82].includes(code ?? -1)) return '🌧️';
+	if ([71, 73, 75, 77, 85, 86].includes(code ?? -1)) return '❄️';
+	if ([95, 96, 99].includes(code ?? -1)) return '⛈️';
+	return '🌡️';
+}
+
+export function describeWeatherCode(code: number | null): {
+	label: string;
+	description: string;
+	tone: CwTone;
+} {
+	if (code === 0) {
+		return { label: m.weather_clear(), description: m.weather_clear_sky(), tone: 'success' };
+	}
+
+	if (code === 1) {
+		return {
+			label: m.weather_mostly_clear(),
+			description: m.weather_mostly_clear_description(),
+			tone: 'success'
+		};
+	}
+
+	if (code === 2) {
+		return {
+			label: m.weather_partly_cloudy(),
+			description: m.weather_partly_cloudy_description(),
+			tone: 'info'
+		};
+	}
+
+	if (code === 3) {
+		return { label: m.weather_cloudy(), description: m.weather_overcast(), tone: 'secondary' };
+	}
+
+	if (code === 45 || code === 48) {
+		return { label: m.weather_fog(), description: m.weather_foggy(), tone: 'secondary' };
+	}
+
+	if ([51, 53, 55, 56, 57].includes(code ?? -1)) {
+		return { label: m.weather_drizzle(), description: m.weather_drizzle(), tone: 'info' };
+	}
+
+	if ([61, 63, 65, 66, 67, 80, 81, 82].includes(code ?? -1)) {
+		return { label: m.weather_rain(), description: m.weather_rain(), tone: 'info' };
+	}
+
+	if ([71, 73, 75, 77, 85, 86].includes(code ?? -1)) {
+		return { label: m.weather_snow(), description: m.weather_snow(), tone: 'secondary' };
+	}
+
+	if ([95, 96, 99].includes(code ?? -1)) {
+		return {
+			label: m.weather_storm(),
+			description: m.weather_thunderstorm(),
+			tone: 'danger'
+		};
+	}
+
+	return {
+		label: m.common_weather(),
+		description: m.traffic_weather_unavailable(),
+		tone: 'secondary'
+	};
+}
+
+function buildWeatherDaySummary(
+	dayKey: string,
+	weatherCode: number | null,
+	temperatureHighC: number | null,
+	temperatureLowC: number | null,
+	precipitationMm: number | null,
+	windSpeedKmh: number | null
+): WeatherDaySummary {
+	const descriptor = describeWeatherCode(weatherCode);
+	const temperatureLabel =
+		temperatureHighC !== null || temperatureLowC !== null
+			? `${temperatureHighC !== null ? temperatureHighC.toFixed(0) : '--'}° / ${temperatureLowC !== null ? temperatureLowC.toFixed(0) : '--'}°C`
+			: null;
+
+	const summaryParts = [descriptor.description];
+	if (temperatureLabel) {
+		summaryParts.push(temperatureLabel);
+	}
+
+	if (precipitationMm !== null) {
+		summaryParts.push(m.traffic_precip_summary({ value: precipitationMm.toFixed(1) }));
+	}
+
+	if (windSpeedKmh !== null) {
+		summaryParts.push(m.traffic_wind_summary({ value: windSpeedKmh.toFixed(0) }));
+	}
+
+	return {
+		dayKey,
+		summary: summaryParts.join(' • '),
+		label: descriptor.label,
+		tone: descriptor.tone,
+		temperatureLabel,
+		temperatureHighC,
+		temperatureLowC,
+		precipitationMm,
+		windSpeedKmh,
+		weatherCode
+	};
+}
+
+function normalizeWeatherPayload(payload: unknown): Record<string, WeatherDaySummary> {
+	if (!isRecord(payload) || !isRecord(payload.daily) || !Array.isArray(payload.daily.time)) {
+		return {};
+	}
+
+	const daily = payload.daily as Record<string, unknown> & { time: unknown[] };
+	const result: Record<string, WeatherDaySummary> = {};
+
+	for (const [index, rawDayKey] of daily.time.entries()) {
+		const dayKey = readString(rawDayKey);
+		if (!dayKey) continue;
+
+		result[dayKey] = buildWeatherDaySummary(
+			dayKey,
+			readNumber(Array.isArray(daily.weather_code) ? daily.weather_code[index] : null),
+			readNumber(Array.isArray(daily.temperature_2m_max) ? daily.temperature_2m_max[index] : null),
+			readNumber(Array.isArray(daily.temperature_2m_min) ? daily.temperature_2m_min[index] : null),
+			readNumber(Array.isArray(daily.precipitation_sum) ? daily.precipitation_sum[index] : null),
+			readNumber(Array.isArray(daily.wind_speed_10m_max) ? daily.wind_speed_10m_max[index] : null)
+		);
+	}
+
+	return result;
+}
+
+const weatherCache = new SvelteMap<string, Record<string, WeatherDaySummary>>();
+
+export async function fetchWeatherByRange(
+	startDate: Date,
+	endDate: Date,
+	latitude: number,
+	longitude: number
+): Promise<Record<string, WeatherDaySummary>> {
+	const startDay = toDayKey(startDate);
+	const endDay = toDayKey(endDate);
+	const cacheKey = `${latitude.toFixed(4)}:${longitude.toFixed(4)}:${startDay}:${endDay}`;
+	const cached = weatherCache.get(cacheKey);
+	if (cached) {
+		return cached;
+	}
+
+	const todayKey = toDayKey(new Date());
+	const requests: Promise<Record<string, WeatherDaySummary>>[] = [];
+	const addRequest = (baseUrl: string, requestStart: string, requestEnd: string) => {
+		if (requestStart > requestEnd) return;
+
+		const url = new URL(baseUrl);
+		url.searchParams.set('latitude', String(latitude));
+		url.searchParams.set('longitude', String(longitude));
+		url.searchParams.set('daily', OPEN_METEO_DAILY_FIELDS);
+		url.searchParams.set('timezone', 'auto');
+		url.searchParams.set('start_date', requestStart);
+		url.searchParams.set('end_date', requestEnd);
+
+		requests.push(
+			fetch(url.toString()).then(async (response) => {
+				if (!response.ok) {
+					throw new Error(`Weather request failed with ${response.status}`);
+				}
+
+				return normalizeWeatherPayload(await response.json());
+			})
+		);
+	};
+
+	if (endDay < todayKey) {
+		addRequest(OPEN_METEO_ARCHIVE_URL, startDay, endDay);
+	} else if (startDay >= todayKey) {
+		addRequest(OPEN_METEO_FORECAST_URL, startDay, endDay);
+	} else {
+		addRequest(OPEN_METEO_ARCHIVE_URL, startDay, shiftDayKey(todayKey, -1));
+		addRequest(OPEN_METEO_FORECAST_URL, todayKey, endDay);
+	}
+
+	const merged: Record<string, WeatherDaySummary> = {};
+	for (const weatherResult of await Promise.all(requests)) {
+		Object.assign(merged, weatherResult);
+	}
+
+	weatherCache.set(cacheKey, merged);
+	return merged;
+}
diff --git a/src/lib/i18n/cwuiLabels.ts b/src/lib/i18n/cwuiLabels.ts
index fe855522..b4a719db 100644
--- a/src/lib/i18n/cwuiLabels.ts
+++ b/src/lib/i18n/cwuiLabels.ts
@@ -13,6 +13,7 @@ import type {
 	CwDataTableLabels,
 	CwResponsiveLineChartLabels,
 	CwDonutChartLabels,
+	CwStackedBarChartLabels,
 	CwHeatmapLabels,
 	CwPPFDChartLabels,
 	DliCardLabels,
@@ -91,6 +92,14 @@ export function cwDonutChartLabels(): CwDonutChartLabels {
 	};
 }
 
+export function cwStackedBarChartLabels(): CwStackedBarChartLabels {
+	return {
+		ariaLabel: m.cwui_stacked_bar_aria(),
+		total: m.cwui_stacked_bar_total(),
+		barLabel: (label, total) => m.cwui_stacked_bar_bar({ label, total })
+	};
+}
+
 export function cwHeatmapLabels(): CwHeatmapLabels {
 	return {
 		title: m.cwui_heatmap_title(),
diff --git a/src/lib/sensor-labels/index.ts b/src/lib/sensor-labels/index.ts
index de58dae5..965ac635 100644
--- a/src/lib/sensor-labels/index.ts
+++ b/src/lib/sensor-labels/index.ts
@@ -44,10 +44,21 @@ const SENSOR_LABELS: Record<string, SensorLabel> = {
 	relay_1: { label: () => m.sensor_relay_1(), unit: '', format: 'boolean' },
 	relay_2: { label: () => m.sensor_relay_2(), unit: '', format: 'boolean' },
 	people_count: { label: () => m.sensor_people_count(), unit: '', format: 'integer' },
-	car_count: { label: () => m.sensor_car_count(), unit: '', format: 'integer' }
+	car_count: { label: () => m.sensor_car_count(), unit: '', format: 'integer' },
+	bicycle_count: { label: () => m.traffic_metric_bicycle_count(), unit: '', format: 'integer' },
+	bus_count: { label: () => m.traffic_metric_bus_count(), unit: '', format: 'integer' },
+	motorcycle_count: {
+		label: () => m.traffic_metric_motorcycle_count(),
+		unit: '',
+		format: 'integer'
+	},
+	train_count: { label: () => m.traffic_metric_train_count(), unit: '', format: 'integer' },
+	truck_count: { label: () => m.traffic_metric_truck_count(), unit: '', format: 'integer' },
+	// Hourly accumulator bucket start (cw_traffic2) — a timestamp, not a reading.
+	traffic_hour: { label: () => m.traffic_hour(), unit: '', format: 'number' }
 };
 
-const HIDDEN_COLUMNS = new Set(['dev_eui', 'id', 'is_simulated', 'last_update']);
+const HIDDEN_COLUMNS = new Set(['dev_eui', 'id', 'is_simulated', 'last_update', 'line_number']);
 
 export function labelFor(column: string): SensorLabel {
 	return SENSOR_LABELS[column] ?? { label: () => column, unit: '', format: 'number' };
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/+page.svelte b/src/routes/locations/[location_id]/devices/[dev_eui]/+page.svelte
index 93a41bcf..23483456 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/+page.svelte
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/+page.svelte
@@ -2,7 +2,7 @@
 	import { AppPage } from '$lib/components/layout';
 	import { afterNavigate } from '$app/navigation';
 	import { getAppContext } from '$lib/appContext.svelte';
-	import { isRelayTable, resolveDisplayComponent } from '$lib/config/deviceTables';
+	import { isRelayTable, isTrafficTable, resolveDisplayComponent } from '$lib/config/deviceTables';
 	import { ApiService, ApiServiceError } from '$lib/api/api.service';
 	import { readApiErrorMessage } from '$lib/api/api-error';
 	import {
@@ -146,7 +146,7 @@
 	// Dew point is opt-in per page view: it mounts hidden and the user shows it
 	// via the chart legend.
 	let chartInitialHidden = $derived(isAirDevice ? [DEW_POINT_SERIES_ID] : []);
-	let isTrafficDevice = $derived(data.device?.cw_device_type.name === '[CROPWATCH] Nvidia Jetson');
+	let isTrafficDevice = $derived(isTrafficTable(data.dataTable));
 	let rangeOptions = $derived(getRangeOptions());
 	let lastUpdatedAt = $derived(readCreatedAt(displayCurrentRecord));
 	let noDataYet = $derived(
@@ -487,7 +487,10 @@
 			titleName={data?.device?.name || devEui.toUpperCase()}
 		/>
 
-		{#if chartSeries.length > 0}
+		<!-- Traffic devices render their own purpose-built hourly chart inside
+		     TrafficDisplay; the generic per-column time series is unreadable for
+		     hourly accumulator counts. -->
+		{#if chartSeries.length > 0 && !isTrafficDevice}
 			<div class="device-page__chart">
 				<CwResponsiveLineChart
 					series={chartSeries}
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/device-detail.ts b/src/routes/locations/[location_id]/devices/[dev_eui]/device-detail.ts
index d687269b..fb47f8de 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/device-detail.ts
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/device-detail.ts
@@ -185,7 +185,8 @@ const CHART_EXCLUDED_COLUMNS = new Set([
 	'updated_at',
 	'location_id',
 	'traffic_hour',
-	'traffic_day'
+	'traffic_day',
+	'line_number'
 ]);
 
 /** Coerce a raw telemetry cell to a plottable number. Booleans map to 0/1. */