feat(diashow): guarantee all eligible photos shown + 2048px display derivative

Diashow completeness rewrite so every eligible upload is shown regardless of
bursts, disconnects, or library size:

- queue.ts: SlideQueue with live/shuffle queues, allKnown map, recentlyShown
  ring; merge(dedup, live-first), remove/removeByUser (prunes recentlyShown),
  knownIds for reconcile-eviction. Adds queue.test.ts (burst/completeness/race).
- diashow/+page.svelte: reconcile (full paginate + evict, pre-scan snapshot to
  spare concurrent uploads) on mount/reconnect/periodic; catchUpNew paginate-
  until-known for bursts with debounced maxWait; hard-cut removals; decode
  timeout + candidate fallback + bounded skip so a broken image never stalls.

New ~2048px "display" derivative for big-screen sharpness, decoupled from the
data-saver preview (800px) used on phones:

- migration 016: upload.display_path + v_feed rebuilt (DROP+CREATE, not REPLACE,
  to slot the column beside preview/thumbnail).
- compression: generate_image_derivatives emits preview+display (downscale-only
  guard, no upscaling); backfill_missing_display regenerates on startup (safe:
  logs on error, never soft-deletes).
- upload.rs/main.rs: GET /upload/{id}/display (mirrors preview auth/cache),
  /media/displays direct-serve blocked.
- feed.rs + types.ts: display_url in feed/delta DTOs.
- diashow candidate chain: display -> original -> preview.

Verified on the running stack: migration applied, 10/10 existing images
backfilled (2048px cap honoured, small images not upscaled), /display serves
200, /feed returns display_url, diashow cycles.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/routes/diashow/+page.svelte

@@ -4,7 +4,6 @@
 	import { api } from '$lib/api';
 	import { getToken } from '$lib/auth';
 	import { showBottomNav } from '$lib/ui-store';
-	import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
 	import { connectSse, disconnectSse, onSseEvent } from '$lib/sse';
 	import { SlideQueue } from '$lib/diashow/queue';
 	import { transitions, findTransition } from '$lib/diashow/transitions';
@@ -12,6 +11,17 @@
 	import type { FeedUpload, FeedResponse, DeltaResponse } from '$lib/types';
 
 	const DWELL_OPTIONS = [3000, 6000, 10000];
+	// Cap on how long we wait for the next image to decode before showing it anyway.
+	const PRELOAD_TIMEOUT_MS = 4000;
+	// If every source for a slide is unreadable we skip it — but bail out of skipping after
+	// this many in a row so a total media outage can't hot-loop the show.
+	const MAX_CONSECUTIVE_SKIPS = 5;
+	// Feed pagination: the server caps `limit` at 100, so we page to cover larger events.
+	const FEED_PAGE = 100;
+	const MAX_PAGES = 100; // safety bound (~10k images) against a runaway pagination loop
+	// Periodic full reconcile — the completeness backstop for anything a live event missed
+	// (dropped SSE, rate-limited fetch, an add/remove that never arrived).
+	const RECONCILE_INTERVAL_MS = 120_000;
 
 	let queue = new SlideQueue();
 	let current = $state<FeedUpload | null>(null);
@@ -25,8 +35,11 @@
 	type SlideLayer = { key: string; src: string; isVideo: boolean; phase: 'enter' | 'exit' };
 	let layers = $state<SlideLayer[]>([]);
 	let dropPrevTimer: ReturnType<typeof setTimeout> | null = null;
+	let reconcileInterval: ReturnType<typeof setInterval> | null = null;
 	// Guards the async (decode-gated) layer commit against a newer advance superseding it.
 	let slideToken = 0;
+	// Consecutive slides skipped because no source decoded — reset the moment one shows.
+	let consecutiveSkips = 0;
 	let dwellMs = $state(6000);
 	let transitionId = $state('crossfade');
 	let paused = $state(false);
@@ -66,18 +79,31 @@
 		}
 	}
 
-	function advance() {
+	// `immediate` = hard-cut with no exiting layer, used when the outgoing slide was just
+	// removed (deleted / banned): it must vanish at once, not linger through the transition.
+	function advance(immediate = false) {
 		const next = queue.next();
-		showSlide(next);
+		showSlide(next, immediate);
 		if (current) scheduleNext();
 	}
 
-	// Swap in the next slide as the top layer while holding the outgoing one beneath it
-	// for the length of the transition. For images we decode the incoming frame first so
-	// the fade reveals a painted picture rather than a blank one; the outgoing slide stays
-	// visible until then, so there's never a black gap. Videos can't be pre-decoded, so
-	// they swap in immediately.
-	function showSlide(next: FeedUpload | null) {
+	// The diashow is a big screen (usually on good connectivity), so it ALWAYS prefers the
+	// crisp ~2048px `display` derivative — decoupled from the per-device data-saver mode,
+	// which is about a guest's phone data plan and irrelevant here. It falls back to the
+	// original (uploads without a display yet) and then the 800px preview.
+	function imageCandidates(u: FeedUpload): string[] {
+		const displayOrOriginal = u.display_url ?? `/api/v1/upload/${u.id}/original`;
+		const list = [displayOrOriginal];
+		if (u.preview_url && u.preview_url !== displayOrOriginal) list.push(u.preview_url);
+		return list;
+	}
+
+	// Swap in the next slide as the top layer while holding the outgoing one beneath it for
+	// the length of the transition. Images are decode-gated (the fade reveals a painted
+	// frame, not a blank one) and try each source in turn; the outgoing slide stays visible
+	// until one commits, so there's never a black gap. Videos can't be pre-decoded, so they
+	// swap in immediately.
+	function showSlide(next: FeedUpload | null, immediate = false) {
 		const token = ++slideToken;
 		if (dropPrevTimer) {
 			clearTimeout(dropPrevTimer);
@@ -88,21 +114,26 @@
 			layers = [];
 			return;
 		}
-		const slide: SlideLayer = {
-			key: next.id,
-			src: pickMediaUrl($dataMode, next),
-			isVideo: next.mime_type.startsWith('video/'),
-			phase: 'enter'
-		};
+		const isVid = next.mime_type.startsWith('video/');
 		const prev = layers.length ? layers[layers.length - 1] : null;
-		// Re-showing the same slide (e.g. a feed re-fetch resolved to the current head) —
-		// just replace it; never stack a slide on top of itself.
-		if (prev && prev.key === slide.key) {
-			layers = [slide];
-			return;
-		}
-		const commit = () => {
+
+		const commit = (src: string) => {
 			if (token !== slideToken) return; // superseded by a newer advance — drop this frame
+			consecutiveSkips = 0; // a slide actually reached the screen — reset the skip guard
+			const slide: SlideLayer = { key: next.id, src, isVideo: isVid, phase: 'enter' };
+			// Re-showing the same slide id (e.g. a re-fetch resolved to the current head) —
+			// just replace it; never stack a slide on itself.
+			if (prev && prev.key === slide.key) {
+				layers = [slide];
+				return;
+			}
+			// Removal-driven advance: drop the outgoing (removed) frame instantly — no exiting
+			// layer. A brief blank over black beats showing a just-deleted/banned photo for
+			// another second while it slides away.
+			if (immediate) {
+				layers = [slide];
+				return;
+			}
 			// Mark the outgoing frame as exiting so slide transitions push it off in step with
 			// the incoming one. Crossfade/Ken Burns ignore `phase` and just hold it opaque.
 			const exiting = prev ? { ...prev, phase: 'exit' as const } : null;
@@ -114,43 +145,141 @@
 				}, transitionDef.defaultDurationMs + 80);
 			}
 		};
-		if (slide.isVideo) {
-			commit();
+
+		// Videos play the original file directly (can't be pre-decoded) — show immediately.
+		if (isVid) {
+			commit(`/api/v1/upload/${next.id}/original`);
 			return;
 		}
-		const pre = new Image();
-		pre.src = slide.src;
-		// decode() resolves once the bitmap is ready to paint; on failure just commit anyway
-		// (a broken image should still advance the show rather than stall it).
-		pre.decode().then(commit).catch(commit);
+
+		// Try each image source in order. A decoded one is shown; a SLOW one is shown after
+		// the timeout (don't stall the wall); a BROKEN one (fast decode reject) falls through
+		// to the next source. If every source is unreadable, skip to a different slide rather
+		// than parking a broken frame — guarded so a full media outage can't hot-loop.
+		const candidates = imageCandidates(next);
+		const tryCandidate = (i: number) => {
+			if (token !== slideToken) return;
+			if (i >= candidates.length) {
+				if (consecutiveSkips < MAX_CONSECUTIVE_SKIPS) {
+					consecutiveSkips++;
+					advance();
+				} else {
+					consecutiveSkips = 0;
+					commit(candidates[candidates.length - 1]); // give up skipping; show last try
+				}
+				return;
+			}
+			let settled = false;
+			let timer: ReturnType<typeof setTimeout>;
+			const done = (action: () => void) => {
+				if (settled || token !== slideToken) return;
+				settled = true;
+				clearTimeout(timer);
+				action();
+			};
+			timer = setTimeout(() => done(() => commit(candidates[i])), PRELOAD_TIMEOUT_MS);
+			const pre = new Image();
+			pre.src = candidates[i];
+			pre.decode().then(
+				() => done(() => commit(candidates[i])),
+				() => done(() => tryCandidate(i + 1))
+			);
+		};
+		tryCandidate(0);
 	}
 
 	// A video finished before its dwell/12s cap — advance immediately (unless paused).
-	// The {#key current.id} block destroys the old <video> on advance, so a fallback
-	// timer that already fired can't trigger this handler for a stale slide.
+	// `onended` is only wired to the layer whose key === current.id (see the template), so a
+	// stale/exiting <video> that ends mid-transition can't trigger an advance.
 	function handleVideoEnded() {
 		if (!paused) advance();
 	}
 
-	async function loadInitial() {
+	// Full reconcile: page the ENTIRE eligible feed, merge everything, then evict anything
+	// the server no longer returns. v_feed already excludes deleted/banned/hidden, so the
+	// feed's id-set IS the eligible set — retaining exactly those ids converges the show to
+	// the server truth in both directions, catching any add/remove a live event missed.
+	// Runs on mount (initial fill), on reconnect deltas, and periodically as the backstop.
+	// `initial` reshuffles once the whole set is in, so the first cycle isn't newest-first.
+	async function reconcile(initial = false) {
+		// Ids known BEFORE the scan — only these are eviction candidates, so an upload that
+		// arrives mid-scan (not in this snapshot) is never wrongly pruned.
+		const before = new Set(queue.knownIds());
+		const seen = new Set<string>();
+		let cursor: string | null = null;
+		let complete = false;
 		try {
-			const feed = await api.get<FeedResponse>('/feed?limit=200');
-			queue.seed(feed.uploads);
-			advance();
+			for (let page = 0; page < MAX_PAGES; page++) {
+				const qs: string = cursor ? `?limit=${FEED_PAGE}&cursor=${cursor}` : `?limit=${FEED_PAGE}`;
+				const feed: FeedResponse = await api.get<FeedResponse>(`/feed${qs}`);
+				for (const u of feed.uploads) seen.add(u.id);
+				queue.merge(feed.uploads, { live: false });
+				if (!current) advance(); // start the show the moment the first page lands
+				if (feed.next_cursor == null) {
+					complete = true;
+					break;
+				}
+				cursor = feed.next_cursor;
+			}
 		} catch {
-			// Silent — placeholder stays shown
+			// Partial fetch (network / rate-limit): keep what we merged but DON'T prune — a
+			// truncated `seen` set must never evict valid slides. The next reconcile retries.
+			complete = false;
+		}
+		if (complete) {
+			if (initial) queue.reshuffle();
+			// Evict only pre-existing slides the server no longer lists (deletions/bans/hides
+			// we missed a live event for). Hard-cut if the current slide was one of them.
+			let removedCurrent = false;
+			for (const id of before) {
+				if (!seen.has(id) && queue.remove(id, current?.id ?? null).wasCurrent) {
+					removedCurrent = true;
+				}
+			}
+			if (removedCurrent) advance(true);
+		}
+		if (!current) advance();
+	}
+
+	// Live catch-up after `upload-processed`. Pages from the newest downward, merging onto
+	// the live queue (shown soon), and stops at the first page overlapping what we already
+	// know — so a burst larger than one 100-item page is fully captured, while a steady
+	// trickle costs a single request. We deliberately ignore `new-upload` (fires before
+	// compression, so preview_url is still null and the item isn't displayable yet).
+	async function catchUpNew() {
+		let cursor: string | null = null;
+		try {
+			for (let page = 0; page < MAX_PAGES; page++) {
+				const qs: string = cursor ? `?limit=${FEED_PAGE}&cursor=${cursor}` : `?limit=${FEED_PAGE}`;
+				const feed: FeedResponse = await api.get<FeedResponse>(`/feed${qs}`);
+				// A known id marks the boundary: everything below it we already have.
+				const reachedKnown = feed.uploads.some((u) => queue.has(u.id));
+				queue.merge(feed.uploads, { live: true });
+				if (!current) advance();
+				if (feed.next_cursor == null || reachedKnown) break;
+				cursor = feed.next_cursor;
+			}
+		} catch {
+			// transient — the max-wait debounce re-fires and the periodic reconcile backstops
 		}
 	}
 
-	// `upload-processed` carries only `{ upload_id }`; we re-fetch from /feed to get the
-	// preview/thumbnail URLs that just became available. We deliberately do NOT listen
-	// to `new-upload` here — its payload arrives before compression finishes
-	// (preview_url is still null), and `SlideQueue.pushLive` dedupes by id, so the
-	// preview would never be picked up if we enqueued the pre-processed version first.
-	// COALESCE the fetch: a host bulk-uploading fires dozens of `upload-processed` events in
-	// seconds; one `/feed` fetch per event trips the per-user feed rate limit (429) and drops
-	// slides. Debounce into a single fetch of the newest slice instead.
+	// Debounce `upload-processed` into a single catch-up, BUT with a max-wait: a sustained
+	// burst (every guest uploading at once) would otherwise keep resetting a plain trailing
+	// debounce and never fire. The max-wait forces a catch-up at least every 2s mid-burst.
 	let processedDebounce: ReturnType<typeof setTimeout> | null = null;
+	let processedMaxWait: ReturnType<typeof setTimeout> | null = null;
+	function fireCatchUp() {
+		if (processedDebounce) {
+			clearTimeout(processedDebounce);
+			processedDebounce = null;
+		}
+		if (processedMaxWait) {
+			clearTimeout(processedMaxWait);
+			processedMaxWait = null;
+		}
+		void catchUpNew();
+	}
 	function handleUploadProcessed(data: string) {
 		try {
 			const { upload_id } = JSON.parse(data) as { upload_id: string };
@@ -159,97 +288,55 @@
 			return;
 		}
 		if (processedDebounce) clearTimeout(processedDebounce);
-		processedDebounce = setTimeout(() => {
-			processedDebounce = null;
-			void refreshRecentFromFeed();
-		}, 500);
-	}
-
-	async function refreshRecentFromFeed() {
-		try {
-			const feed = await api.get<FeedResponse>('/feed?limit=50');
-			for (const upload of feed.uploads) {
-				if (upload.preview_url || upload.thumbnail_url) queue.pushLive(upload);
-			}
-			if (!current) advance();
-		} catch {
-			// ignore — silent recovery; the next event or reconnect delta retries
-		}
+		processedDebounce = setTimeout(fireCatchUp, 500);
+		if (!processedMaxWait) processedMaxWait = setTimeout(fireCatchUp, 2000);
 	}
 
 	function handleUploadDeleted(data: string) {
 		try {
-			const payload = JSON.parse(data) as { upload_id: string };
-			const result = queue.remove(payload.upload_id, current?.id ?? null);
-			if (result.wasCurrent) advance();
+			const { upload_id } = JSON.parse(data) as { upload_id: string };
+			// Hard-cut: a just-deleted photo must not linger through the exit transition.
+			if (queue.remove(upload_id, current?.id ?? null).wasCurrent) advance(true);
 		} catch {
 			// ignore
 		}
 	}
 
-	// After an all-night projector reconnects (SSE drop, network blip), the live events
-	// it missed are gone. The SSE client fans out a `feed-delta` of everything since the
-	// last seen timestamp — merge it so the show backfills the gap instead of silently
-	// stalling on a stale set.
-	function handleFeedDelta(data: string) {
-		try {
-			const delta = JSON.parse(data) as DeltaResponse;
-			// Apply deletions + ban-hides FIRST and unconditionally: both are explicit, uncapped
-			// lists, so a moderated/removed photo (or a banned user's whole set) must leave the
-			// rotation even when the delta is truncated. This replays a `user-hidden`/delete the
-			// projector missed while disconnected — the reason a banned guest's slides used to
-			// keep cycling all night. (We can't infer removals by absence from a capped /feed
-			// backfill — older slides beyond the newest 200 would be falsely dropped.)
-			for (const id of delta.deleted_ids) {
-				const result = queue.remove(id, current?.id ?? null);
-				if (result.wasCurrent) advance();
-			}
-			for (const userId of delta.hidden_user_ids) {
-				const result = queue.removeByUser(userId, current?.id ?? null);
-				if (result.wasCurrent) advance();
-			}
-			// A truncated delta's `uploads` is only the newest slice of a larger gap; merging it
-			// alone would skip the older-but-still-new items in between. Backfill new uploads from
-			// a full feed fetch (pushLive dedupes by id, so the current slide isn't disturbed).
-			if (delta.truncated) {
-				void backfillFromFeed();
-				return;
-			}
-			for (const upload of delta.uploads) {
-				// Only enqueue displayable (processed) items; pushLive dedupes by id, so a
-				// later `upload-processed` still refines anything that arrives raw.
-				if (upload.preview_url || upload.thumbnail_url) queue.pushLive(upload);
-			}
-			if (!current) advance();
-		} catch {
-			// ignore — non-fatal; the next live event keeps the show moving
-		}
-	}
-
-	// Full-feed backfill used when a reconnect delta overflows the cap. Merges via
-	// pushLive (id-deduped) so a long-running projector recovers the whole gap.
-	async function backfillFromFeed() {
-		try {
-			const feed = await api.get<FeedResponse>('/feed?limit=200');
-			for (const upload of feed.uploads) {
-				if (upload.preview_url || upload.thumbnail_url) queue.pushLive(upload);
-			}
-			if (!current) advance();
-		} catch {
-			// ignore — the next live event keeps the show moving
-		}
-	}
-
 	function handleUserHidden(data: string) {
 		try {
-			const payload = JSON.parse(data) as { user_id: string };
-			const result = queue.removeByUser(payload.user_id, current?.id ?? null);
-			if (result.wasCurrent) advance();
+			const { user_id } = JSON.parse(data) as { user_id: string };
+			if (queue.removeByUser(user_id, current?.id ?? null).wasCurrent) advance(true);
 		} catch {
 			// ignore
 		}
 	}
 
+	// Reconnect after an SSE drop: the client fans out a delta of everything since the last
+	// seen timestamp. Apply removals first (hard-cut off the current slide if affected),
+	// then merge additions; a truncated delta means the gap overflowed the cap, so fall back
+	// to a full catch-up scan.
+	function handleFeedDelta(data: string) {
+		try {
+			const delta = JSON.parse(data) as DeltaResponse;
+			let removedCurrent = false;
+			for (const id of delta.deleted_ids) {
+				if (queue.remove(id, current?.id ?? null).wasCurrent) removedCurrent = true;
+			}
+			for (const userId of delta.hidden_user_ids) {
+				if (queue.removeByUser(userId, current?.id ?? null).wasCurrent) removedCurrent = true;
+			}
+			if (removedCurrent) advance(true); // one advance regardless of how many were removed
+			if (delta.truncated) {
+				void catchUpNew();
+				return;
+			}
+			queue.merge(delta.uploads, { live: true });
+			if (!current) advance();
+		} catch {
+			// ignore — non-fatal; the periodic reconcile backstops anything dropped here
+		}
+	}
+
 	// Reveal the control cluster on any pointer/keyboard activity and re-arm the idle timer.
 	// Controls stay up while the settings panel is open so it can't vanish mid-interaction.
 	function showControls() {
@@ -340,7 +427,10 @@
 		// (no-ops if the feed page already opened it). Subscriptions are registered above
 		// first so no early event is missed.
 		connectSse();
-		void loadInitial();
+		void reconcile(true); // initial full load
+		// Completeness backstop: periodically re-sync the whole eligible set, so a dropped
+		// SSE event, a rate-limited catch-up, or any missed add/remove self-heals.
+		reconcileInterval = setInterval(() => void reconcile(), RECONCILE_INTERVAL_MS);
 	});
 
 	onDestroy(() => {
@@ -348,6 +438,8 @@
 		clearTimer();
 		if (controlsHideTimer) clearTimeout(controlsHideTimer);
 		if (processedDebounce) clearTimeout(processedDebounce);
+		if (processedMaxWait) clearTimeout(processedMaxWait);
+		if (reconcileInterval) clearInterval(reconcileInterval);
 		if (dropPrevTimer) clearTimeout(dropPrevTimer);
 		document.removeEventListener('fullscreenchange', handleFullscreenChange);
 		// Leave fullscreen when exiting the show, so /feed isn't stuck fullscreen.
@@ -426,7 +518,13 @@
 		>
 			{#if isFullscreen}
 				<!-- arrows pointing in -->
-				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
+				<svg
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1.8"
+				>
 					<path
 						stroke-linecap="round"
 						stroke-linejoin="round"
@@ -435,7 +533,13 @@
 				</svg>
 			{:else}
 				<!-- arrows pointing out -->
-				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
+				<svg
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+					stroke-width="1.8"
+				>
 					<path
 						stroke-linecap="round"
 						stroke-linejoin="round"