fix(imaging): support .hab assets, cache avatars/badges, harden routes

The hotel moved from .nitro to .hab bundles, so the imager must treat .hab
like .nitro and the public avatar endpoints must accept the figure strings
the client sends (including extra trailing segments such as `.0`, which the
old FIGURE_RE rejected with a 400).

- imager-upstream: relax FIGURE_RE, extend parseAvatarQuery test coverage
- api/imaging/avatar + /imaging: shared validation, placeholder and ETag/304
- api/imaging/badge: single-flight upstream fetch and conditional responses
- imager-http/imager-png: strong ETag helpers and APNG passthrough guard
- csp + next/image: unoptimized external images, tightened CSP
- deps: override postcss-selector-parser to ^7.1.6
- also fold in the pending drizzle draft snapshot and stray test cleanup

src/app/(site)/news/page.tsx

@@ -99,6 +99,7 @@ async function NewsPage({
 											fill
 											sizes="(max-width: 1024px) 50vw, 300px"
 											style={{ objectFit: "cover" }}
+											unoptimized
 										/>
 									</div>
 								) : (

src/app/(site)/page.tsx

@@ -170,12 +170,9 @@ function GlassPanel({
 }
 
 async function getHotelData() {
-	const [hotelName, logo] = await Promise.all([
-		resolveHotelName(),
-		siteSettings.get("cms_logo", ""),
-	]);
-
 	const [
+		hotelName,
+		logo,
 		online,
 		users,
 		rooms,
@@ -185,6 +182,8 @@ async function getHotelData() {
 		recentUsers,
 		recentPhotos,
 	] = await Promise.all([
+		resolveHotelName(),
+		siteSettings.get("cms_logo", ""),
 		cachedOnlineCount().catch(publicReadFailure("home.online")),
 		cached("total_users", 300_000, countUsers, { staleMs: 300000 }).catch(
 			publicReadFailure("home.users"),
@@ -243,22 +242,34 @@ export default async function Home() {
 	const session = await auth();
 	if (session?.user?.id) redirect("/me");
 
-	const tp = await getTranslations("pages.home");
-	const te = await getTranslations("publicData");
-	const th = await getTranslations("header");
-	const tn = await getTranslations("nav");
-	const {
-		hotelName,
-		online,
-		users,
-		rooms,
-		totalPhotos,
-		articleCount,
-		articles,
-		recentUsers: rawRecentUsers,
-		recentPhotos,
-		logo,
-	} = await getHotelData();
+	const [
+		tp,
+		te,
+		th,
+		tn,
+		{
+			hotelName,
+			online,
+			users,
+			rooms,
+			totalPhotos,
+			articleCount,
+			articles,
+			recentUsers: rawRecentUsers,
+			recentPhotos,
+			logo,
+		},
+		captcha,
+		nonceHeaders,
+	] = await Promise.all([
+		getTranslations("pages.home"),
+		getTranslations("publicData"),
+		getTranslations("header"),
+		getTranslations("nav"),
+		getHotelData(),
+		captchaConfig(),
+		headers(),
+	]);
 
 	// Users who hide their online state must not surface in the "who is online"
 	// rails on the homepage either.
@@ -271,8 +282,7 @@ export default async function Home() {
 			: rawRecentUsers.filter(
 					(u) => recentUserPrivacy.get(u.id)?.online !== false,
 				);
-	const captcha = await captchaConfig();
-	const nonce = (await headers()).get("x-nonce") ?? undefined;
+	const nonce = nonceHeaders.get("x-nonce") ?? undefined;
 
 	const features = [
 		{
@@ -315,6 +325,7 @@ export default async function Home() {
 					fill
 					sizes={featured ? "100vw" : "(max-width: 640px) 100vw, 33vw"}
 					className="rounded-2xl object-cover transition-transform duration-700 ease-out group-hover:scale-108"
+					unoptimized
 				/>
 				<div
 					className="absolute right-2.5 top-2.5 flex h-8 w-8 translate-x-1 items-center justify-center rounded-full opacity-0 backdrop-blur-sm transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"

src/app/api/imaging/avatar/route.ts

@@ -1,5 +1,6 @@
 import { type NextRequest, NextResponse } from "next/server";
 import { AVATAR_FALLBACK_SRC } from "@/lib/imager";
+import { ifNoneMatchSatisfied, strongEtag } from "@/lib/imager-http";
 import {
 	fetchAvatarImage,
 	ImagerUnavailableError,
@@ -43,24 +44,52 @@ export async function GET(request: NextRequest) {
 			parsed.params,
 		);
 
+		const etag = strongEtag(body);
+		const cacheControl = cacheControlFor(source);
+		if (ifNoneMatchSatisfied(request.headers.get("if-none-match"), etag)) {
+			return new NextResponse(null, {
+				status: 304,
+				headers: {
+					ETag: etag,
+					"Cache-Control": cacheControl,
+					"X-Imager-Source": source,
+					"Access-Control-Allow-Origin": "*",
+				},
+			});
+		}
+
 		return new NextResponse(body as unknown as BodyInit, {
 			status: 200,
 			headers: {
 				"Content-Type": contentType,
 				"Content-Length": String(body.length),
-				"Cache-Control": cacheControlFor(source),
+				"Cache-Control": cacheControl,
+				ETag: etag,
 				"X-Imager-Source": source,
 				"Access-Control-Allow-Origin": "*",
 			},
 		});
 	} catch (error) {
 		if (error instanceof ImagerUnavailableError) {
+			const etag = strongEtag(PLACEHOLDER_SVG_BYTES);
+			if (ifNoneMatchSatisfied(request.headers.get("if-none-match"), etag)) {
+				return new NextResponse(null, {
+					status: 304,
+					headers: {
+						ETag: etag,
+						"Cache-Control": cacheControlFor("unavailable"),
+						"X-Imager-Source": "unavailable",
+						"Access-Control-Allow-Origin": "*",
+					},
+				});
+			}
 			return new NextResponse(PLACEHOLDER_SVG_BYTES as unknown as BodyInit, {
 				status: 200,
 				headers: {
 					"Content-Type": "image/svg+xml",
 					"Content-Length": String(PLACEHOLDER_SVG_BYTES.length),
 					"Cache-Control": cacheControlFor("unavailable"),
+					ETag: etag,
 					"X-Imager-Source": "unavailable",
 					"Access-Control-Allow-Origin": "*",
 				},

src/app/api/imaging/badge/route.ts

@@ -7,6 +7,7 @@ import {
 	readImagingCache,
 	writeImagingCache,
 } from "@/lib/imager-cache";
+import { ifNoneMatchSatisfied, strongEtag } from "@/lib/imager-http";
 import { resolveBadgeBase } from "@/lib/runtime-asset-config";
 import { siteSettings } from "@/lib/services/site-settings";
 
@@ -33,6 +34,64 @@ const BADGE_PLACEHOLDER_SVG =
 
 type BadgeSource = "upstream" | "local" | "cache" | "unavailable";
 
+interface ResolvedBadge {
+	body: Uint8Array;
+	contentType: string;
+	source: BadgeSource;
+}
+
+/**
+ * Concurrent cold-cache requests for the same badge would otherwise each walk
+ * the whole candidate list, and when the first candidate is a slow/unreachable
+ * CDN that means every one of them waits out the fetch timeout before falling
+ * back. Sharing a single resolution keeps a cold cache from stacking identical
+ * upstream work. Held on globalThis because Next can evaluate this module more
+ * than once per process.
+ */
+const globalForBadgeFetches = globalThis as typeof globalThis & {
+	imagingBadgeFetches?: Map<string, Promise<ResolvedBadge>>;
+};
+const inFlight =
+	globalForBadgeFetches.imagingBadgeFetches ??
+	new Map<string, Promise<ResolvedBadge>>();
+globalForBadgeFetches.imagingBadgeFetches = inFlight;
+
+async function resolveBadge(
+	cacheKey: string,
+	code: string,
+	candidates: string[],
+): Promise<ResolvedBadge> {
+	const pending = inFlight.get(cacheKey);
+	if (pending) return pending;
+
+	const work = (async (): Promise<ResolvedBadge> => {
+		for (const base of candidates) {
+			const result = await fetchCandidate(base, code);
+			if (result) {
+				await writeImagingCache(
+					badgeCacheDir(),
+					cacheKey,
+					result.body,
+					result.contentType,
+				);
+				return result;
+			}
+		}
+		return {
+			body: new TextEncoder().encode(BADGE_PLACEHOLDER_SVG),
+			contentType: "image/svg+xml",
+			source: "unavailable",
+		};
+	})();
+
+	inFlight.set(cacheKey, work);
+	try {
+		return await work;
+	} finally {
+		if (inFlight.get(cacheKey) === work) inFlight.delete(cacheKey);
+	}
+}
+
 export async function GET(request: NextRequest) {
 	const code = request.nextUrl.searchParams.get("code")?.trim();
 	if (!code || code.length > CODE_MAX_LEN || !CODE_RE.test(code)) {
@@ -56,25 +115,20 @@ export async function GET(request: NextRequest) {
 
 	const cacheKey = imagingCacheKey(`${code}\n${candidates.join("\n")}`);
 	const cached = await readImagingCache(badgeCacheDir(), cacheKey);
-	if (cached) return badgeResponse(cached.body, cached.contentType, "cache");
-
-	for (const base of candidates) {
-		const result = await fetchCandidate(base, code);
-		if (result) {
-			await writeImagingCache(
-				badgeCacheDir(),
-				cacheKey,
-				result.body,
-				result.contentType,
-			);
-			return badgeResponse(result.body, result.contentType, result.source);
-		}
-	}
+	if (cached)
+		return badgeResponse(
+			cached.body,
+			cached.contentType,
+			"cache",
+			request.headers.get("if-none-match"),
+		);
 
+	const resolved = await resolveBadge(cacheKey, code, candidates);
 	return badgeResponse(
-		new TextEncoder().encode(BADGE_PLACEHOLDER_SVG),
-		"image/svg+xml",
-		"unavailable",
+		resolved.body,
+		resolved.contentType,
+		resolved.source,
+		request.headers.get("if-none-match"),
 	);
 }
 
@@ -140,16 +194,31 @@ function badgeResponse(
 	body: Uint8Array,
 	contentType: string,
 	source: BadgeSource,
+	ifNoneMatch: string | null = null,
 ) {
+	const etag = strongEtag(body);
+	const cacheControl =
+		source === "unavailable" ? "no-cache, max-age=0" : "public, max-age=3600";
+	// Same bytes the client already has: skip the body. Validators are hashed
+	// from the body, so a fallback→upstream swap still forces a fresh 200.
+	if (ifNoneMatchSatisfied(ifNoneMatch, etag)) {
+		return new NextResponse(null, {
+			status: 304,
+			headers: {
+				ETag: etag,
+				"Cache-Control": cacheControl,
+				"X-Imager-Source": source,
+				"Access-Control-Allow-Origin": "*",
+			},
+		});
+	}
 	return new NextResponse(body as unknown as BodyInit, {
 		status: 200,
 		headers: {
 			"Content-Type": contentType,
 			"Content-Length": String(body.length),
-			"Cache-Control":
-				source === "unavailable"
-					? "no-cache, max-age=0"
-					: "public, max-age=3600",
+			"Cache-Control": cacheControl,
+			ETag: etag,
 			"X-Imager-Source": source,
 			"Access-Control-Allow-Origin": "*",
 		},

src/app/imaging/route.ts

@@ -1,8 +1,33 @@
 import { type NextRequest, NextResponse } from "next/server";
 import sharp from "sharp";
-import { fetchAvatarImage, parseAvatarQuery } from "@/lib/imager-upstream";
+import { AVATAR_FALLBACK_SRC } from "@/lib/imager";
+import {
+	avatarCacheDir,
+	imagingCacheKey,
+	readImagingCache,
+	writeImagingCache,
+} from "@/lib/imager-cache";
+import { ifNoneMatchSatisfied, strongEtag } from "@/lib/imager-http";
+import { isAnimatedPng } from "@/lib/imager-png";
+import {
+	fetchAvatarImage,
+	ImagerUnavailableError,
+	parseAvatarQuery,
+} from "@/lib/imager-upstream";
+import { resolveImagerBase } from "@/lib/runtime-asset-config";
 
 type AvatarFormat = "png" | "webp" | "avif";
+type TranscodeFormat = Exclude<AvatarFormat, "png">;
+
+// Same neutral silhouette the sibling /api/imaging/avatar route serves, so a
+// figure no upstream can render still shows a graceful image instead of the
+// browser's broken-image glyph. This is the site-wide default imager endpoint,
+// so a 502 here would blank avatars across every server-rendered page.
+const PLACEHOLDER_SVG_BYTES = new TextEncoder().encode(
+	decodeURIComponent(
+		AVATAR_FALLBACK_SRC.slice("data:image/svg+xml;utf8,".length),
+	),
+);
 
 function resolveFormat(raw: string | null): AvatarFormat {
 	switch (raw?.toLowerCase()) {
@@ -15,6 +40,89 @@ function resolveFormat(raw: string | null): AvatarFormat {
 	}
 }
 
+/**
+ * Concurrent cold-cache requests for the same figure all arrive with the same
+ * decoded PNG and the same target format, so they would each run the same
+ * sharp transcode — the one operation on this route that is CPU-bound. Sharing
+ * a single transcode across those requests keeps a cold cache from stacking
+ * identical encoder work. Held on globalThis because Next can evaluate this
+ * module more than once per process; separate copies would each start their own
+ * transcode and defeat the point.
+ */
+const globalForTranscodes = globalThis as typeof globalThis & {
+	imagingTranscodes?: Map<string, Promise<TranscodeResult | null>>;
+};
+const inFlight =
+	globalForTranscodes.imagingTranscodes ??
+	new Map<string, Promise<TranscodeResult | null>>();
+globalForTranscodes.imagingTranscodes = inFlight;
+
+interface TranscodeResult {
+	body: Uint8Array;
+	contentType: string;
+}
+
+/**
+ * Serve a WebP/AVIF variant of the decoded render, cached on disk so sharp only
+ * runs once per (figure, variant) rather than on every avatar request. This
+ * endpoint is the default imager, so re-encoding on each hit would burn CPU for
+ * an image that never changes.
+ *
+ * Returns `null` when a conversion cannot be produced (e.g. sharp cannot decode
+ * the input) so the caller falls back to serving the original render unchanged.
+ */
+async function transcodeToVariant(
+	body: Uint8Array,
+	format: TranscodeFormat,
+	variantKey: string,
+): Promise<TranscodeResult | null> {
+	if (isAnimatedPng(body)) return null;
+
+	const cached = await readImagingCache(avatarCacheDir(), variantKey);
+	if (cached) return cached;
+
+	const pending = inFlight.get(variantKey);
+	if (pending) return pending;
+
+	const work = runTranscode(body, format, variantKey);
+	inFlight.set(variantKey, work);
+	try {
+		return await work;
+	} finally {
+		if (inFlight.get(variantKey) === work) inFlight.delete(variantKey);
+	}
+}
+
+async function runTranscode(
+	body: Uint8Array,
+	format: TranscodeFormat,
+	variantKey: string,
+): Promise<TranscodeResult | null> {
+	try {
+		// `animated: true` lets sharp carry animation through for inputs it can
+		// decode frame-by-frame (animated GIF/WebP). APNG is handled before this
+		// point: libvips here reads only its first frame, so those are left as-is.
+		const pipeline = sharp(Buffer.from(body), { animated: true });
+		const out =
+			format === "webp"
+				? await pipeline.webp().toBuffer()
+				: await pipeline.avif().toBuffer();
+		const contentType = format === "webp" ? "image/webp" : "image/avif";
+		const result = { body: new Uint8Array(out), contentType };
+		// Best-effort: a failed write must never turn a good render into an
+		// error; the next request simply re-runs the transcode.
+		await writeImagingCache(
+			avatarCacheDir(),
+			variantKey,
+			result.body,
+			contentType,
+		);
+		return result;
+	} catch {
+		return null;
+	}
+}
+
 export async function GET(request: NextRequest) {
 	const { searchParams } = new URL(request.url);
 
@@ -31,48 +139,84 @@ export async function GET(request: NextRequest) {
 			parsed.params,
 		);
 
-		// Re-encode PNG avatars to WebP/AVIF with sharp to cut bandwidth.
-		// Falls back to the original PNG if conversion fails.
 		let respBody: Uint8Array = body;
 		let respContentType = contentType;
 		if (format !== "png") {
-			try {
-				if (format === "webp") {
-					respBody = new Uint8Array(
-						await sharp(Buffer.from(body)).webp().toBuffer(),
-					);
-					respContentType = "image/webp";
-				} else {
-					respBody = new Uint8Array(
-						await sharp(Buffer.from(body)).avif().toBuffer(),
-					);
-					respContentType = "image/avif";
-				}
-			} catch {
-				respBody = body;
-				respContentType = contentType;
+			// The variant is keyed off the exact render that produced it (the
+			// resolved upstream + the normalized query) plus the target format,
+			// mirroring how the underlying render itself is cached.
+			const variantKey = imagingCacheKey(
+				`${resolveImagerBase(new URL(request.url).origin)}\n${parsed.params.toString()}\n${format}`,
+			);
+			const converted = await transcodeToVariant(body, format, variantKey);
+			if (converted) {
+				respBody = converted.body;
+				respContentType = converted.contentType;
 			}
 		}
 
+		const etag = strongEtag(respBody);
+		// s-maxage lets Cloudflare/edge cache avatars (currently DYNAMIC),
+		// stale-while-revalidate keeps them fresh without blocking requests.
+		// The ?format= param is part of the URL, so variants cache separately.
+		// Fallback renders use a shorter TTL so the configured imager is
+		// retried soon instead of being masked for hours.
+		const cacheControl =
+			source === "fallback"
+				? "public, max-age=300, s-maxage=3600, stale-while-revalidate=3600"
+				: "public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400";
+		if (ifNoneMatchSatisfied(request.headers.get("if-none-match"), etag)) {
+			return new NextResponse(null, {
+				status: 304,
+				headers: {
+					ETag: etag,
+					"Cache-Control": cacheControl,
+					"X-Imager-Source": source,
+					"Access-Control-Allow-Origin": "*",
+				},
+			});
+		}
+
 		return new NextResponse(respBody as unknown as BodyInit, {
 			status: 200,
 			headers: {
 				"Content-Type": respContentType,
 				"Content-Length": String(respBody.length),
-				// s-maxage lets Cloudflare/edge cache avatars (currently DYNAMIC),
-				// stale-while-revalidate keeps them fresh without blocking requests.
-				// The ?format= param is part of the URL, so variants cache separately.
-				// Fallback renders use a shorter TTL so the configured imager is
-				// retried soon instead of being masked for hours.
-				"Cache-Control":
-					source === "fallback"
-						? "public, max-age=300, s-maxage=3600, stale-while-revalidate=3600"
-						: "public, max-age=3600, s-maxage=86400, stale-while-revalidate=86400",
+				"Cache-Control": cacheControl,
+				ETag: etag,
 				"X-Imager-Source": source,
 				"Access-Control-Allow-Origin": "*",
 			},
 		});
-	} catch {
+	} catch (error) {
+		if (error instanceof ImagerUnavailableError) {
+			// Every upstream is down and nothing was cached: serve the graceful
+			// silhouette as a 200 so <img> tags never break, and keep it
+			// uncached so a real render is picked up as soon as one recovers.
+			const etag = strongEtag(PLACEHOLDER_SVG_BYTES);
+			if (ifNoneMatchSatisfied(request.headers.get("if-none-match"), etag)) {
+				return new NextResponse(null, {
+					status: 304,
+					headers: {
+						ETag: etag,
+						"Cache-Control": "no-cache, max-age=0",
+						"X-Imager-Source": "unavailable",
+						"Access-Control-Allow-Origin": "*",
+					},
+				});
+			}
+			return new NextResponse(PLACEHOLDER_SVG_BYTES as unknown as BodyInit, {
+				status: 200,
+				headers: {
+					"Content-Type": "image/svg+xml",
+					"Content-Length": String(PLACEHOLDER_SVG_BYTES.length),
+					"Cache-Control": "no-cache, max-age=0",
+					ETag: etag,
+					"X-Imager-Source": "unavailable",
+					"Access-Control-Allow-Origin": "*",
+				},
+			});
+		}
 		return NextResponse.json(
 			{ error: "Failed to fetch avatar from upstream" },
 			{ status: 502 },