feat: use enhanced lod system

src/dashboard.css

···
 	color: var(--text-primary);
 }
 
+.chart-outer {
+	position: relative;
+	height: 300px;
+}
+
 .chart-wrapper {
-	height: 300px;
-	position: relative;
+	height: 100%;
+}
+
+.chart-loading {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: rgba(250, 246, 243, 0.5);
+	backdrop-filter: blur(1px);
+	font-size: 0.75rem;
+	color: var(--text-secondary);
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 0.15s ease-out;
+	z-index: 10;
+}
+
+.chart-loading.visible {
+	opacity: 1;
 }
 
 .chart-hint {

src/dashboard.html

···
 
     <section class="chart-container">
       <h2>Traffic Overview</h2>
-      <div class="chart-wrapper" id="chart" role="img" aria-label="Traffic over time chart"></div>
+      <div class="chart-outer">
+        <div class="chart-wrapper" id="chart" role="img" aria-label="Traffic over time chart"></div>
+        <div id="chart-loading" class="chart-loading">Refining...</div>
+      </div>
       <p class="chart-hint">Drag to zoom, double-click to reset</p>
     </section>
 

src/dashboard.ts

···
 	topImages: Array<{ image_key: string; total: number }>;
 }
 
+type Granularity = "10min" | "hourly" | "daily";
+
+interface LodCacheEntry {
+	granularity: Granularity;
+	range: { start: number; end: number };
+	timestamps: number[];
+	hits: number[];
+}
+
 function formatNumber(n: number): string {
 	if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
 	if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
 	return n.toString();
 }
 
+function downsample(
+	timestamps: number[],
+	hits: number[],
+	minX: number,
+	maxX: number,
+	maxPoints: number,
+): { timestamps: number[]; hits: number[] } {
+	const startIdx = timestamps.findIndex((t) => t >= minX);
+	if (startIdx === -1) return { timestamps: [], hits: [] };
+
+	let endIdx = timestamps.length - 1;
+	for (let i = timestamps.length - 1; i >= 0; i--) {
+		if (timestamps[i]! <= maxX) {
+			endIdx = i;
+			break;
+		}
+	}
+
+	const sliceLen = endIdx - startIdx + 1;
+	if (sliceLen <= 0) return { timestamps: [], hits: [] };
+
+	const tsSlice = timestamps.slice(startIdx, endIdx + 1);
+	const hSlice = hits.slice(startIdx, endIdx + 1);
+
+	if (sliceLen <= maxPoints) {
+		return { timestamps: tsSlice, hits: hSlice };
+	}
+
+	const bucketSize = Math.ceil(sliceLen / maxPoints);
+	const dsTs: number[] = [];
+	const dsHits: number[] = [];
+
+	for (let i = 0; i < sliceLen; i += bucketSize) {
+		const jEnd = Math.min(i + bucketSize, sliceLen);
+		let sumHits = 0;
+		for (let j = i; j < jEnd; j++) sumHits += hSlice[j]!;
+		const avgHits = sumHits / (jEnd - i);
+		dsTs.push(tsSlice[i]!);
+		dsHits.push(avgHits);
+	}
+
+	return { timestamps: dsTs, hits: dsHits };
+}
+
 class Dashboard {
 	private days = 7;
 	private chart: uPlot | null = null;
 	private abortController: AbortController | null = null;
 	private originalRange: { start: number; end: number } | null = null;
 	private currentRange: { start: number; end: number } | null = null;
+	private lodCache: Partial<Record<Granularity, LodCacheEntry>> = {};
+	private activeGranularity: Granularity | null = null;
+	private isLoading = false;
+	private dblClickHandler: (() => void) | null = null;
 
 	private readonly totalHitsEl = document.getElementById(
 		"total-hits",
···
 		"image-list",
 	) as HTMLElement;
 	private readonly chartEl = document.getElementById("chart") as HTMLElement;
+	private readonly loadingEl = document.getElementById(
+		"chart-loading",
+	) as HTMLElement | null;
 	private readonly buttons = document.querySelectorAll<HTMLButtonElement>(
 		".time-selector button",
 	);
 
 	constructor() {
+		this.days = this.getDaysFromUrl();
+		this.updateActiveButton();
 		this.setupEventListeners();
 		this.fetchData();
 		window.addEventListener("resize", this.handleResize);
+		window.addEventListener("popstate", this.handlePopState);
 	}
 
+	private getDaysFromUrl(): number {
+		const params = new URLSearchParams(window.location.search);
+		const days = parseInt(params.get("days") || "7", 10);
+		if ([1, 7, 30, 90, 365].includes(days)) {
+			return days;
+		}
+		return 7;
+	}
+
+	private updateUrl(days: number) {
+		const url = new URL(window.location.href);
+		url.searchParams.set("days", String(days));
+		window.history.pushState({ days }, "", url.toString());
+	}
+
+	private handlePopState = (event: PopStateEvent) => {
+		const days = event.state?.days ?? this.getDaysFromUrl();
+		if (days !== this.days) {
+			this.days = days;
+			this.currentRange = null;
+			this.originalRange = null;
+			this.lodCache = {};
+			this.activeGranularity = null;
+			this.updateActiveButton();
+			this.fetchData();
+		}
+	};
+
 	private setupEventListeners() {
 		this.buttons.forEach((btn) => {
 			btn.addEventListener("click", () => {
 				const newDays = parseInt(btn.dataset.days || "7", 10);
 				if (newDays !== this.days) {
 					this.days = newDays;
-					this.currentRange = null; // Reset zoom
+					this.currentRange = null;
 					this.originalRange = null;
+					this.lodCache = {};
+					this.activeGranularity = null;
 					this.updateActiveButton();
+					this.updateUrl(newDays);
 					this.fetchData();
 				}
 			});
···
 		});
 	}
 
+	private setLoading(loading: boolean) {
+		this.isLoading = loading;
+		if (this.loadingEl) {
+			this.loadingEl.classList.toggle("visible", loading);
+		}
+	}
+
+	private getGranularityForRange(start: number, end: number): Granularity {
+		const spanDays = (end - start) / 86400;
+		if (spanDays <= 1) return "10min";
+		if (spanDays <= 30) return "hourly";
+		return "daily";
+	}
+
 	private async fetchData() {
 		this.abortController?.abort();
 		this.abortController = new AbortController();
 		const signal = this.abortController.signal;
 
+		this.setLoading(true);
+
 		try {
 			let trafficUrl = `/api/stats/traffic?days=${this.days}`;
 
-			// If we have a current range from zooming, use start/end instead
 			if (this.currentRange) {
 				trafficUrl = `/api/stats/traffic?start=${this.currentRange.start}&end=${this.currentRange.end}`;
 			}
···
 			if (signal.aborted) return;
 
 			this.renderOverview(overview);
-			this.renderChart(traffic);
+
+			const { timestamps, hits } = this.transformTraffic(traffic);
+
+			if (timestamps.length === 0) {
+				return;
+			}
+
+			if (!this.chart) {
+				this.initChart(timestamps, hits);
+			}
+
+			this.updateCache(traffic);
 		} catch (e) {
 			if ((e as Error).name !== "AbortError") {
 				console.error("Failed to fetch data:", e);
+			}
+		} finally {
+			if (!signal.aborted) {
+				this.setLoading(false);
 			}
 		}
 	}
···
 		});
 	}
 
-	private renderChart(data: TrafficData) {
+	private transformTraffic(data: TrafficData): {
+		timestamps: number[];
+		hits: number[];
+	} {
 		const timestamps: number[] = [];
 		const hits: number[] = [];
 
···
 			hits.push(point.hits);
 		}
 
-		if (timestamps.length === 0) {
+		return { timestamps, hits };
+	}
+
+	private updateCache(traffic: TrafficData) {
+		const { timestamps, hits } = this.transformTraffic(traffic);
+		if (timestamps.length === 0) return;
+
+		const first = timestamps[0]!;
+		const last = timestamps[timestamps.length - 1]!;
+
+		const gran = traffic.granularity as Granularity;
+
+		this.lodCache[gran] = {
+			granularity: gran,
+			range: { start: first, end: last },
+			timestamps,
+			hits,
+		};
+
+		this.activeGranularity = gran;
+
+		if (!this.currentRange) {
+			this.originalRange = { start: first, end: last };
+			this.renderCurrentViewport({ min: first, max: last });
+		} else {
+			this.renderCurrentViewport();
+		}
+	}
+
+	private getBestCacheForRange(
+		minX: number,
+		maxX: number,
+	): LodCacheEntry | null {
+		const lodPriority: Granularity[] = ["10min", "hourly", "daily"];
+
+		for (const lod of lodPriority) {
+			const cache = this.lodCache[lod];
+			if (cache && cache.range.start <= minX && cache.range.end >= maxX) {
+				return cache;
+			}
+		}
+
+		for (const lod of lodPriority) {
+			const cache = this.lodCache[lod];
+			if (cache) return cache;
+		}
+
+		return null;
+	}
+
+	private renderCurrentViewport(forceRange?: { min: number; max: number }) {
+		if (!this.chart) return;
+
+		let minX: number | undefined;
+		let maxX: number | undefined;
+
+		if (forceRange) {
+			minX = forceRange.min;
+			maxX = forceRange.max;
+		} else {
+			const xScale = this.chart.scales.x;
+			minX =
+				xScale && xScale.min != null ? xScale.min : this.originalRange?.start;
+			maxX =
+				xScale && xScale.max != null ? xScale.max : this.originalRange?.end;
+		}
+
+		if (minX == null || maxX == null) return;
+
+		const cache = this.getBestCacheForRange(minX, maxX);
+		if (!cache) return;
+
+		this.activeGranularity = cache.granularity;
+
+		const width = this.chartEl.clientWidth || 600;
+		const maxPoints = Math.min(width, 800);
+
+		const { timestamps, hits } = downsample(
+			cache.timestamps,
+			cache.hits,
+			minX,
+			maxX,
+			maxPoints,
+		);
+
+		if (timestamps.length === 0) return;
+
+		this.chart.setData([timestamps, hits]);
+		this.chart.setScale("x", { min: minX, max: maxX });
+	}
+
+	private handleSelect(u: uPlot) {
+		if (u.select.width <= 10) return;
+
+		const min = Math.floor(u.posToVal(u.select.left, "x"));
+		const max = Math.floor(u.posToVal(u.select.left + u.select.width, "x"));
+
+		u.setSelect({ left: 0, top: 0, width: 0, height: 0 }, false);
+
+		this.currentRange = { start: min, end: max };
+
+		const bestCache = this.getBestCacheForRange(min, max);
+		const targetGran = this.getGranularityForRange(min, max);
+
+		if (bestCache && bestCache.granularity === targetGran) {
+			this.renderCurrentViewport({ min, max });
 			return;
 		}
 
-		// Store original range if not set
-		if (!this.originalRange) {
-			this.originalRange = {
-				start: timestamps[0],
-				end: timestamps[timestamps.length - 1],
-			};
-		}
+		this.renderCurrentViewport({ min, max });
+		this.fetchData();
+	}
 
-		const chartData: uPlot.AlignedData = [timestamps, hits];
+	private resetZoom() {
+		this.currentRange = null;
 
+		if (this.originalRange && this.chart) {
+			this.chart.setScale("x", {
+				min: this.originalRange.start,
+				max: this.originalRange.end,
+			});
+			this.renderCurrentViewport();
+		}
+	}
+
+	private initChart(timestamps: number[], hits: number[]) {
 		const opts: uPlot.Options = {
 			width: this.chartEl.clientWidth,
 			height: 280,
···
 				},
 			],
 			hooks: {
-				setSelect: [
-					(u) => {
-						if (u.select.width > 10) {
-							const min = Math.floor(u.posToVal(u.select.left, "x"));
-							const max = Math.floor(
-								u.posToVal(u.select.left + u.select.width, "x"),
-							);
-
-							// Store the zoomed range and fetch new data
-							this.currentRange = { start: min, end: max };
-							this.fetchData();
-
-							u.setSelect({ left: 0, top: 0, width: 0, height: 0 }, false);
-						}
-					},
-				],
+				setSelect: [(u) => this.handleSelect(u)],
 			},
 		};
 
-		if (this.chart) {
-			this.chart.destroy();
-		}
-
 		this.chartEl.innerHTML = "";
-		this.chart = new uPlot(opts, chartData, this.chartEl);
+		this.chart = new uPlot(opts, [timestamps, hits], this.chartEl);
 
-		// Add double-click to reset zoom
-		this.chartEl.addEventListener("dblclick", () => {
-			this.currentRange = null;
-			this.fetchData();
-		});
+		if (this.dblClickHandler) {
+			this.chartEl.removeEventListener("dblclick", this.dblClickHandler);
+		}
+		this.dblClickHandler = () => this.resetZoom();
+		this.chartEl.addEventListener("dblclick", this.dblClickHandler);
 	}
 
 	private handleResize = () => {
···
 				width: this.chartEl.clientWidth,
 				height: 280,
 			});
+			this.renderCurrentViewport();
 		}
 	};
 }

src/index.ts

···
 					const end = parseInt(endParam, 10);
 					const spanDays = (end - start) / 86400;
 
-					// Use span as "days" parameter, pass end time
-					return Response.json(getTraffic(spanDays, end));
+					return Response.json(
+						getTraffic(spanDays, { startTime: start, endTime: end }),
+					);
 				}
 
 				// Normal mode: last N days

src/stats.ts

···
 		.all(since) as { bucket_day: number; hits: number }[];
 }
 
-export function getTraffic(sinceDays: number = 7, endTime?: number) {
+export function getTraffic(
+	sinceDays: number = 7,
+	options?: { startTime?: number; endTime?: number },
+) {
 	const now = Math.floor(Date.now() / 1000);
-	const since = now - sinceDays * 86400;
-	const end = endTime || now;
+	const since = options?.startTime ?? now - sinceDays * 86400;
+	const end = options?.endTime ?? now;
 
-	// Calculate actual span (in case we're querying a specific range)
 	const spanSeconds = end - since;
 	const spanDays = spanSeconds / 86400;
 
-	// For <= 1 day, use 10-minute data if available
+	// <= 1 day: 10min data if available
 	if (spanDays <= 1) {
 		const data = db
 			.prepare(
···
 		}
 	}
 
-	// For > 30 days, use daily data for better performance
-	if (spanDays > 30) {
-		const rangeResult = db
-			.prepare(
-				`SELECT MIN(bucket_day) as min_time, MAX(bucket_day) as max_time 
-         FROM image_stats_daily WHERE bucket_day >= ? AND bucket_day <= ?`,
-			)
-			.get(since, end) as { min_time: number | null; max_time: number | null };
-
-		if (!rangeResult.min_time || !rangeResult.max_time) {
-			return { granularity: "daily", data: [] };
-		}
-
-		const actualSpanSeconds = rangeResult.max_time - rangeResult.min_time;
-		const actualSpanDays = actualSpanSeconds / 86400;
-
-		let bucketSize: number;
-		let bucketLabel: string;
-
-		// For very long ranges, group days into larger buckets
-		if (actualSpanDays <= 90) {
-			bucketSize = 86400; // 1 day
-			bucketLabel = "daily";
-		} else {
-			// For 90+ days, use multi-day buckets to keep point count reasonable
-			const dayMultiplier = Math.max(1, Math.floor(actualSpanDays / 90));
-			bucketSize = 86400 * dayMultiplier;
-			bucketLabel = dayMultiplier === 1 ? "daily" : `${dayMultiplier}daily`;
-		}
-
+	// 1-30 days: always hourly
+	if (spanDays <= 30) {
 		const data = db
 			.prepare(
-				`SELECT (bucket_day / ?1) * ?1 as bucket, SUM(hits) as hits 
-         FROM image_stats_daily WHERE bucket_day >= ?2 AND bucket_day <= ?3
-         GROUP BY bucket ORDER BY bucket`,
+				`SELECT bucket_hour as bucket, SUM(hits) as hits
+         FROM image_stats WHERE bucket_hour >= ? AND bucket_hour <= ?
+         GROUP BY bucket_hour ORDER BY bucket_hour`,
 			)
-			.all(bucketSize, since, end) as { bucket: number; hits: number }[];
-
-		return { granularity: bucketLabel, data };
-	}
-
-	// For 1-30 days, use hourly data
-	const rangeResult = db
-		.prepare(
-			`SELECT MIN(bucket_hour) as min_time, MAX(bucket_hour) as max_time 
-       FROM image_stats WHERE bucket_hour >= ? AND bucket_hour <= ?`,
-		)
-		.get(since, end) as { min_time: number | null; max_time: number | null };
-
-	if (!rangeResult.min_time || !rangeResult.max_time) {
-		return { granularity: "hourly", data: [] };
-	}
-
-	// Calculate actual data span in days
-	const actualSpanSeconds = rangeResult.max_time - rangeResult.min_time;
-	const actualSpanDays = actualSpanSeconds / 86400;
-
-	// Scale granularity based on actual data span
-	// <= 7 days: hourly
-	// > 7 days: bucket size = floor(days / 7) hours
-
-	let bucketSize: number;
-	let bucketLabel: string;
+			.all(since, end) as { bucket: number; hits: number }[];
 
-	if (actualSpanDays <= 7) {
-		bucketSize = 3600; // 1 hour
-		bucketLabel = "hourly";
-	} else {
-		const hourMultiplier = Math.floor(actualSpanDays / 7);
-		bucketSize = 3600 * hourMultiplier;
-		bucketLabel = `${hourMultiplier}hourly`;
+		return { granularity: "hourly", data };
 	}
 
+	// > 30 days: daily
 	const data = db
 		.prepare(
-			`SELECT (bucket_hour / ?1) * ?1 as bucket, SUM(hits) as hits 
-       FROM image_stats WHERE bucket_hour >= ?2 AND bucket_hour <= ?3
-       GROUP BY bucket ORDER BY bucket`,
+			`SELECT bucket_day as bucket, SUM(hits) as hits 
+       FROM image_stats_daily WHERE bucket_day >= ? AND bucket_day <= ?
+       GROUP BY bucket_day ORDER BY bucket_day`,
 		)
-		.all(bucketSize, since, end) as { bucket: number; hits: number }[];
+		.all(since, end) as { bucket: number; hits: number }[];
 
-	return { granularity: bucketLabel, data };
+	return { granularity: "daily", data };
 }