From f7d9cb0e01e9c1aaa8ca40889f5135a16bb22229 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 14:05:32 +0900
Subject: [PATCH 01/12] perf(ui): improve v2 media grid loading

Avoid mounting the full result set while virtual grid metrics are pending, prioritize the first two rows, and prefetch V2 filter metadata like the existing routes.
---
 apps/server/src/routes/search.tsx             |  4 +-
 .../components/source-media-page.tsx          |  1 +
 apps/server/src/routes/v2/search.tsx          | 13 ++++
 .../v2/sources/$mediaSourceId/index.tsx       | 20 ++++++
 apps/tauri/src/routes/search.tsx              |  3 +-
 .../components/source-media-page.tsx          |  3 +-
 packages/ui/src/screens/search-screen.tsx     | 10 ++-
 .../ui/src/screens/source-media-screen.tsx    |  1 +
 packages/ui/src/source-media-grid.tsx         | 61 +++++++++++++------
 9 files changed, 92 insertions(+), 24 deletions(-)

diff --git a/apps/server/src/routes/search.tsx b/apps/server/src/routes/search.tsx
index 4c992f29..9f72ad77 100644
--- a/apps/server/src/routes/search.tsx
+++ b/apps/server/src/routes/search.tsx
@@ -119,7 +119,9 @@ function SearchRoute() {
 			onSelectSource={(id) => setSearchState("selectedSource", id)}
 			page={page}
 			presetClient={PresetClient}
-			renderMediaItem={(media) => <MediaGridItem media={media} />}
+			renderMediaItem={(media, options) => (
+				<MediaGridItem media={media} priority={options?.priority} />
+			)}
 			renderNavActions={({ openMobileFilters }) => (
 				<Button
 					class="size-11 border-input text-foreground hover:bg-accent md:hidden"
diff --git a/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx b/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
index f71d2ec6..0613b054 100644
--- a/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
+++ b/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
@@ -144,6 +144,7 @@ export function SourceMediaPage(
 				renderItem={(media, options) => (
 					<MediaGridItem
 						media={media}
+						priority={options.priority}
 						routeVersion={props.variant === "v2" ? "v2" : "default"}
 						onContextMenu={options.onContextMenu}
 						isBulkSelectMode={options.isBulkSelectMode}
diff --git a/apps/server/src/routes/v2/search.tsx b/apps/server/src/routes/v2/search.tsx
index bf29ca88..3beb2717 100644
--- a/apps/server/src/routes/v2/search.tsx
+++ b/apps/server/src/routes/v2/search.tsx
@@ -23,6 +23,7 @@ import {
 	searchMedia,
 	searchSimilar,
 } from "~/infrastructure/api-clients/search-api";
+import type { RouteLoaderContext } from "~/infrastructure/router/route-types";
 import {
 	getSearchCondition,
 	searchState,
@@ -33,6 +34,17 @@ const SEARCH_RESULTS_REFRESH_DEBOUNCE_MS = 300;
 const PresetClient = createPresetClient(rawPresetClient);
 
 export const Route = createFileRoute("/v2/search")({
+	ssr: "data-only",
+	loader: async ({ context }: RouteLoaderContext) => {
+		await Promise.all([
+			context.queryClient.prefetchQuery(tagsQueryOptions()),
+			context.queryClient.prefetchQuery(mediaSourcesQueryOptions()),
+			context.queryClient.prefetchQuery(allProjectsQueryOptions()),
+			context.queryClient.prefetchQuery(allIpsQueryOptions()),
+			context.queryClient.prefetchQuery(allCharactersQueryOptions()),
+			context.queryClient.prefetchQuery(allAuthorsQueryOptions()),
+		]);
+	},
 	component: V2SearchRoute,
 });
 
@@ -88,6 +100,7 @@ function V2SearchRoute() {
 					isSelected={options?.isPreviewSelected}
 					media={media}
 					onPreviewSelect={options?.onPreviewSelect}
+					priority={options?.priority}
 					routeVersion="v2"
 				/>
 			)}
diff --git a/apps/server/src/routes/v2/sources/$mediaSourceId/index.tsx b/apps/server/src/routes/v2/sources/$mediaSourceId/index.tsx
index 9dd068ac..a6b64205 100644
--- a/apps/server/src/routes/v2/sources/$mediaSourceId/index.tsx
+++ b/apps/server/src/routes/v2/sources/$mediaSourceId/index.tsx
@@ -1,10 +1,30 @@
 import { createFileRoute } from "@tanstack/solid-router";
+import {
+	allAuthorsQueryOptions,
+	allCharactersQueryOptions,
+	allIpsQueryOptions,
+	allProjectsQueryOptions,
+	mediaSourcesQueryOptions,
+	tagsQueryOptions,
+} from "~/infrastructure/api-clients/queries";
+import type { RouteLoaderContext } from "~/infrastructure/router/route-types";
 import { SourceMediaPage } from "~/routes/sources/$mediaSourceId/components/source-media-page";
 
 export const Route = createFileRoute("/v2/sources/$mediaSourceId/")({
+	ssr: "data-only",
 	remountDeps: ({ params }: { params: { mediaSourceId: string } }) => [
 		params.mediaSourceId,
 	],
+	loader: async ({ context }: RouteLoaderContext) => {
+		await Promise.all([
+			context.queryClient.prefetchQuery(tagsQueryOptions()),
+			context.queryClient.prefetchQuery(allProjectsQueryOptions()),
+			context.queryClient.prefetchQuery(allIpsQueryOptions()),
+			context.queryClient.prefetchQuery(allCharactersQueryOptions()),
+			context.queryClient.prefetchQuery(allAuthorsQueryOptions()),
+			context.queryClient.prefetchQuery(mediaSourcesQueryOptions()),
+		]);
+	},
 	component: V2SourceMediaRoute,
 });
 
diff --git a/apps/tauri/src/routes/search.tsx b/apps/tauri/src/routes/search.tsx
index 9d1ce748..d2e9e052 100644
--- a/apps/tauri/src/routes/search.tsx
+++ b/apps/tauri/src/routes/search.tsx
@@ -86,9 +86,10 @@ function SearchRoute() {
 			onSelectSource={(id) => setSearchState("selectedSource", id)}
 			page={page}
 			presetClient={PresetClient}
-			renderMediaItem={(media) => (
+			renderMediaItem={(media, options) => (
 				<MediaGridItem
 					media={media}
+					priority={options?.priority}
 					sourceRootPath={page.getSourceRootPath(media.mediaSourceId)}
 				/>
 			)}
diff --git a/apps/tauri/src/routes/sources/$mediaSourceId/components/source-media-page.tsx b/apps/tauri/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
index a7b9416e..517cecc7 100644
--- a/apps/tauri/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
+++ b/apps/tauri/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
@@ -78,10 +78,11 @@ export function SourceMediaPage() {
 			ipsQueryOptions={allIpsQueryOptions}
 			charactersQueryOptions={allCharactersQueryOptions}
 			authorsQueryOptions={allAuthorsQueryOptions}
-			renderItem={(media, { onContextMenu }) => (
+			renderItem={(media, { onContextMenu, priority }) => (
 				<MediaGridItem
 					media={media}
 					onContextMenu={onContextMenu}
+					priority={priority}
 					sourceRootPath={sourceRootPathResolver(mediaSourceId())}
 				/>
 			)}
diff --git a/packages/ui/src/screens/search-screen.tsx b/packages/ui/src/screens/search-screen.tsx
index 404f76e9..9c71d05d 100644
--- a/packages/ui/src/screens/search-screen.tsx
+++ b/packages/ui/src/screens/search-screen.tsx
@@ -31,7 +31,11 @@ export type SearchScreenProps = {
 	renderNavActions?: (actions: SearchScreenNavActions) => JSX.Element;
 	renderMediaItem: (
 		media: Media,
-		options?: { onPreviewSelect?: () => void; isPreviewSelected?: boolean },
+		options?: {
+			onPreviewSelect?: () => void;
+			isPreviewSelected?: boolean;
+			priority?: boolean;
+		},
 	) => JSX.Element;
 	renderMediaPreview?: (media: Media) => JSX.Element;
 	onOpenMediaDetail?: (media: Media) => void;
@@ -148,7 +152,9 @@ export function SearchScreen(props: SearchScreenProps) {
 								await page().searchResultQuery.refetch();
 							}}
 							hasNextPage={page().searchResultQuery.hasNextPage}
-							renderItem={(media, _options) => props.renderMediaItem(media)}
+							renderItem={(media, options) =>
+								props.renderMediaItem(media, options)
+							}
 							setLoadMoreRef={page().setLoadMoreRef}
 							showEmptyState
 							showResultCount
diff --git a/packages/ui/src/screens/source-media-screen.tsx b/packages/ui/src/screens/source-media-screen.tsx
index 702fdfca..847c6c04 100644
--- a/packages/ui/src/screens/source-media-screen.tsx
+++ b/packages/ui/src/screens/source-media-screen.tsx
@@ -34,6 +34,7 @@ export type SourceMediaScreenProps = {
 		media: Media,
 		options: {
 			onContextMenu: () => void;
+			priority?: boolean;
 			isBulkSelectMode?: boolean;
 			isSelected?: boolean;
 			onPreviewSelect?: () => void;
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index 268dd430..df78e931 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -34,6 +34,7 @@ import {
 const VIRTUALIZATION_THRESHOLD = 100;
 const GRID_GAP_PX = 12;
 const VIRTUAL_ROWS_OVERSCAN = 4;
+const INITIAL_PRIORITY_ROWS = 2;
 
 type SourceMediaGridProps = {
 	detailBasePath?: string;
@@ -68,6 +69,7 @@ type SourceMediaGridProps = {
 		media: Media,
 		options: {
 			onContextMenu: () => void;
+			priority?: boolean;
 			isBulkSelectMode?: boolean;
 			isSelected?: boolean;
 			onPreviewSelect?: () => void;
@@ -178,6 +180,15 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 			props.mediaResults().length > VIRTUALIZATION_THRESHOLD &&
 			mediaItemWidth() > 0,
 	);
+	const virtualizationPending = createMemo(
+		() =>
+			enableVirtualization() &&
+			props.mediaResults().length > VIRTUALIZATION_THRESHOLD &&
+			mediaGridWidth() <= 0,
+	);
+	const initialPriorityMediaCount = createMemo(() =>
+		Math.max(columnCount() * INITIAL_PRIORITY_ROWS, 1),
+	);
 
 	const updateMediaGridMetrics = () => {
 		if (!mediaGridRef) return;
@@ -269,25 +280,36 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		>
 			<Show
 				fallback={
-					<div class={mediaGridClassName} data-media-grid>
-						<For each={props.mediaResults()}>
-							{(media) =>
-								props.renderItem(media, {
-									onContextMenu: onContextMenuHandler(media.id),
-									get isBulkSelectMode() {
-										return props.isBulkSelectMode?.();
-									},
-									get isSelected() {
-										return props.isSelected?.(media.id);
-									},
-									onPreviewSelect: () => props.onPreviewSelect?.(media),
-									get isPreviewSelected() {
-										return props.previewSelectedMediaId?.() === media.id;
-									},
-								})
-							}
-						</For>
-					</div>
+					<Show
+						fallback={
+							<MediaGridSkeleton
+								aspectRatio={props.itemAspectRatio === 4 / 3 ? "4/3" : "3/4"}
+								count={Math.max(initialPriorityMediaCount(), 8)}
+							/>
+						}
+						when={!virtualizationPending()}
+					>
+						<div class={mediaGridClassName} data-media-grid>
+							<For each={props.mediaResults()}>
+								{(media, index) =>
+									props.renderItem(media, {
+										onContextMenu: onContextMenuHandler(media.id),
+										priority: index() < initialPriorityMediaCount(),
+										get isBulkSelectMode() {
+											return props.isBulkSelectMode?.();
+										},
+										get isSelected() {
+											return props.isSelected?.(media.id);
+										},
+										onPreviewSelect: () => props.onPreviewSelect?.(media),
+										get isPreviewSelected() {
+											return props.previewSelectedMediaId?.() === media.id;
+										},
+									})
+								}
+							</For>
+						</div>
+					</Show>
 				}
 				when={shouldVirtualize()}
 			>
@@ -311,6 +333,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 									{(media) =>
 										props.renderItem(media, {
 											onContextMenu: onContextMenuHandler(media.id),
+											priority: virtualRow.index < INITIAL_PRIORITY_ROWS,
 											get isBulkSelectMode() {
 												return props.isBulkSelectMode?.();
 											},

From 375b95101c8559db66dc5430e1e72eeed9759d62 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 14:16:09 +0900
Subject: [PATCH 02/12] fix(ui): keep virtualized media thumbnails visible

Keep skeleton rows aligned to the responsive column count and eagerly load the mounted virtual range with a larger overscan buffer.
---
 packages/ui/src/source-media-grid.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index df78e931..a24ac4e7 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -33,8 +33,9 @@ import {
 
 const VIRTUALIZATION_THRESHOLD = 100;
 const GRID_GAP_PX = 12;
-const VIRTUAL_ROWS_OVERSCAN = 4;
+const VIRTUAL_ROWS_OVERSCAN = 10;
 const INITIAL_PRIORITY_ROWS = 2;
+const INITIAL_SKELETON_ROWS = 3;
 
 type SourceMediaGridProps = {
 	detailBasePath?: string;
@@ -284,7 +285,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 						fallback={
 							<MediaGridSkeleton
 								aspectRatio={props.itemAspectRatio === 4 / 3 ? "4/3" : "3/4"}
-								count={Math.max(initialPriorityMediaCount(), 8)}
+								count={columnCount() * INITIAL_SKELETON_ROWS}
 							/>
 						}
 						when={!virtualizationPending()}
@@ -333,7 +334,10 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 									{(media) =>
 										props.renderItem(media, {
 											onContextMenu: onContextMenuHandler(media.id),
-											priority: virtualRow.index < INITIAL_PRIORITY_ROWS,
+											// Only viewport-adjacent rows are mounted while virtualized,
+											// so load them immediately instead of relying on the browser's
+											// lazy-load distance during a fast element scroll.
+											priority: true,
 											get isBulkSelectMode() {
 												return props.isBulkSelectMode?.();
 											},

From df1048306a908ac10f437558d336296dc99569cc Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 14:25:52 +0900
Subject: [PATCH 03/12] fix(v2): defer search grid initialization

Match the source collection mount guard so the virtual grid initializes only after the client mount and persisted search state restoration begins.
---
 apps/server/src/routes/v2/search.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/server/src/routes/v2/search.tsx b/apps/server/src/routes/v2/search.tsx
index 3beb2717..6fb68fe7 100644
--- a/apps/server/src/routes/v2/search.tsx
+++ b/apps/server/src/routes/v2/search.tsx
@@ -125,6 +125,7 @@ function V2SearchRoute() {
 				/>
 			)}
 			selectedSource={searchState.selectedSource}
+			ssrGuard
 			sources={page.sources()}
 			variant="v2"
 		/>

From 190f0ba7289155433915913e9ee7e446906ac77c Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 14:45:23 +0900
Subject: [PATCH 04/12] perf(media): reuse cached grid results

Limit virtual image prefetching to the initial rows and keep search result queries fresh while navigating back from media details.
---
 packages/ui/src/query-options/search-query.test.ts | 3 +++
 packages/ui/src/query-options/search-query.ts      | 4 ++++
 packages/ui/src/source-media-grid.tsx              | 7 ++-----
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/query-options/search-query.test.ts b/packages/ui/src/query-options/search-query.test.ts
index 3d6e9357..b8d49143 100644
--- a/packages/ui/src/query-options/search-query.test.ts
+++ b/packages/ui/src/query-options/search-query.test.ts
@@ -9,6 +9,7 @@ import {
 	buildSearchResultsQueryOptions,
 	buildSourceMediaResultsQueryOptions,
 	isSourceMediaResultsQueryKey,
+	MEDIA_RESULTS_STALE_TIME_MS,
 	removeMediaFromInfiniteQueryData,
 	searchQueryKeys,
 	sourceMediaQueryKeys,
@@ -160,6 +161,7 @@ describe("buildSearchResultsQueryOptions", () => {
 		expect(options.initialPageParam).toBe(0);
 		expect(options.enabled).toBe(false);
 		expect(options.gcTime).toBe(12_345);
+		expect(options.staleTime).toBe(MEDIA_RESULTS_STALE_TIME_MS);
 
 		const queryFn = options.queryFn;
 		if (typeof queryFn !== "function") {
@@ -346,6 +348,7 @@ describe("buildSourceMediaResultsQueryOptions", () => {
 		]);
 		expect(options.initialPageParam).toBe(0);
 		expect(options.enabled).toBe(true);
+		expect(options.staleTime).toBe(MEDIA_RESULTS_STALE_TIME_MS);
 
 		const queryFn = options.queryFn;
 		if (typeof queryFn !== "function") {
diff --git a/packages/ui/src/query-options/search-query.ts b/packages/ui/src/query-options/search-query.ts
index 17d9e807..4b7b3bfb 100644
--- a/packages/ui/src/query-options/search-query.ts
+++ b/packages/ui/src/query-options/search-query.ts
@@ -8,6 +8,8 @@ import {
 	keepPreviousData,
 } from "@tanstack/solid-query";
 
+export const MEDIA_RESULTS_STALE_TIME_MS = 1000 * 60 * 5;
+
 export type SearchResultsQueryKeyInput = {
 	mode: "simple" | "pro" | "vector";
 	sourceId: string | undefined;
@@ -187,6 +189,7 @@ export function buildSearchResultsQueryOptions(
 		placeholderData: input.mode === "vector" ? undefined : keepPreviousData,
 		enabled: input.enabled,
 		gcTime: input.gcTime,
+		staleTime: MEDIA_RESULTS_STALE_TIME_MS,
 	});
 }
 
@@ -238,5 +241,6 @@ export function buildSourceMediaResultsQueryOptions(
 		},
 		placeholderData: keepPreviousData,
 		enabled: input.enabled,
+		staleTime: MEDIA_RESULTS_STALE_TIME_MS,
 	});
 }
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index a24ac4e7..ee75b2e0 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -33,7 +33,7 @@ import {
 
 const VIRTUALIZATION_THRESHOLD = 100;
 const GRID_GAP_PX = 12;
-const VIRTUAL_ROWS_OVERSCAN = 10;
+const VIRTUAL_ROWS_OVERSCAN = 4;
 const INITIAL_PRIORITY_ROWS = 2;
 const INITIAL_SKELETON_ROWS = 3;
 
@@ -334,10 +334,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 									{(media) =>
 										props.renderItem(media, {
 											onContextMenu: onContextMenuHandler(media.id),
-											// Only viewport-adjacent rows are mounted while virtualized,
-											// so load them immediately instead of relying on the browser's
-											// lazy-load distance during a fast element scroll.
-											priority: true,
+											priority: virtualRow.index < INITIAL_PRIORITY_ROWS,
 											get isBulkSelectMode() {
 												return props.isBulkSelectMode?.();
 											},

From 61b31bfb805bed521b9c4333a5b0ff19a62c8a78 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 15:20:00 +0900
Subject: [PATCH 05/12] perf(v2): mature media loading UX

---
 .../src/hooks/use-media-source-events.ts      |  7 ++++--
 ...urces.$mediaSourceId.thumbnail.$mediaId.ts |  5 +++-
 apps/server/src/routes/v2/search.tsx          | 19 +++++---------
 .../v2/sources/$mediaSourceId/index.tsx       | 22 ++--------------
 packages/ui/src/source-media-grid.tsx         | 14 ++++++++---
 packages/ui/src/thumbnail-image.tsx           | 25 ++++++++++++++-----
 6 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/apps/server/src/hooks/use-media-source-events.ts b/apps/server/src/hooks/use-media-source-events.ts
index d216a6ff..a5b37e83 100644
--- a/apps/server/src/hooks/use-media-source-events.ts
+++ b/apps/server/src/hooks/use-media-source-events.ts
@@ -80,10 +80,13 @@ export function createServerTransport(
 			return false;
 		}
 		if (id === "*") {
-			return pathname === "/search";
+			return pathname === "/search" || pathname === "/v2/search";
 		}
 		return (
-			pathname === `/sources/${id}` || pathname.startsWith(`/sources/${id}/`)
+			pathname === `/sources/${id}` ||
+			pathname.startsWith(`/sources/${id}/`) ||
+			pathname === `/v2/sources/${id}` ||
+			pathname.startsWith(`/v2/sources/${id}/`)
 		);
 	};
 
diff --git a/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts b/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts
index e5c1ca58..a9fe755f 100644
--- a/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts
+++ b/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts
@@ -28,7 +28,10 @@ export const Route = createFileRoute(
 				}
 
 				return new Response(file, {
-					headers: { "Content-Type": "image/webp" },
+					headers: {
+						"Cache-Control": "private, max-age=300",
+						"Content-Type": "image/webp",
+					},
 				});
 			},
 		},
diff --git a/apps/server/src/routes/v2/search.tsx b/apps/server/src/routes/v2/search.tsx
index 6fb68fe7..84916c2f 100644
--- a/apps/server/src/routes/v2/search.tsx
+++ b/apps/server/src/routes/v2/search.tsx
@@ -23,7 +23,6 @@ import {
 	searchMedia,
 	searchSimilar,
 } from "~/infrastructure/api-clients/search-api";
-import type { RouteLoaderContext } from "~/infrastructure/router/route-types";
 import {
 	getSearchCondition,
 	searchState,
@@ -31,20 +30,12 @@ import {
 } from "~/presentation/store/search-store";
 
 const SEARCH_RESULTS_REFRESH_DEBOUNCE_MS = 300;
+const V2_SEARCH_RESULTS_PER_PAGE = 200;
 const PresetClient = createPresetClient(rawPresetClient);
 
 export const Route = createFileRoute("/v2/search")({
-	ssr: "data-only",
-	loader: async ({ context }: RouteLoaderContext) => {
-		await Promise.all([
-			context.queryClient.prefetchQuery(tagsQueryOptions()),
-			context.queryClient.prefetchQuery(mediaSourcesQueryOptions()),
-			context.queryClient.prefetchQuery(allProjectsQueryOptions()),
-			context.queryClient.prefetchQuery(allIpsQueryOptions()),
-			context.queryClient.prefetchQuery(allCharactersQueryOptions()),
-			context.queryClient.prefetchQuery(allAuthorsQueryOptions()),
-		]);
-	},
+	ssr: false,
+	pendingComponent: () => null,
 	component: V2SearchRoute,
 });
 
@@ -67,7 +58,9 @@ function V2SearchRoute() {
 		getSearchCondition,
 		sortBy: () => searchState.sortBy,
 		sortOrder: () => searchState.sortOrder,
-		limit: () => searchState.limit,
+		// V2 can display up to eight columns. Fetch enough complete rows per page
+		// so scrolling does not stop for another request every two or three rows.
+		limit: () => Math.max(searchState.limit, V2_SEARCH_RESULTS_PER_PAGE),
 		scrollY: () => searchState.scrollY,
 		setScrollY: (value) => setSearchState("scrollY", value),
 		setOffset: (value) => setSearchState("offset", value),
diff --git a/apps/server/src/routes/v2/sources/$mediaSourceId/index.tsx b/apps/server/src/routes/v2/sources/$mediaSourceId/index.tsx
index a6b64205..3dfe796f 100644
--- a/apps/server/src/routes/v2/sources/$mediaSourceId/index.tsx
+++ b/apps/server/src/routes/v2/sources/$mediaSourceId/index.tsx
@@ -1,30 +1,12 @@
 import { createFileRoute } from "@tanstack/solid-router";
-import {
-	allAuthorsQueryOptions,
-	allCharactersQueryOptions,
-	allIpsQueryOptions,
-	allProjectsQueryOptions,
-	mediaSourcesQueryOptions,
-	tagsQueryOptions,
-} from "~/infrastructure/api-clients/queries";
-import type { RouteLoaderContext } from "~/infrastructure/router/route-types";
 import { SourceMediaPage } from "~/routes/sources/$mediaSourceId/components/source-media-page";
 
 export const Route = createFileRoute("/v2/sources/$mediaSourceId/")({
-	ssr: "data-only",
+	ssr: false,
+	pendingComponent: () => null,
 	remountDeps: ({ params }: { params: { mediaSourceId: string } }) => [
 		params.mediaSourceId,
 	],
-	loader: async ({ context }: RouteLoaderContext) => {
-		await Promise.all([
-			context.queryClient.prefetchQuery(tagsQueryOptions()),
-			context.queryClient.prefetchQuery(allProjectsQueryOptions()),
-			context.queryClient.prefetchQuery(allIpsQueryOptions()),
-			context.queryClient.prefetchQuery(allCharactersQueryOptions()),
-			context.queryClient.prefetchQuery(allAuthorsQueryOptions()),
-			context.queryClient.prefetchQuery(mediaSourcesQueryOptions()),
-		]);
-	},
 	component: V2SourceMediaRoute,
 });
 
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index ee75b2e0..25181575 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -33,7 +33,8 @@ import {
 
 const VIRTUALIZATION_THRESHOLD = 100;
 const GRID_GAP_PX = 12;
-const VIRTUAL_ROWS_OVERSCAN = 4;
+const WINDOW_VIRTUAL_ROWS_OVERSCAN = 4;
+const ELEMENT_VIRTUAL_ROWS_OVERSCAN = 1;
 const INITIAL_PRIORITY_ROWS = 2;
 const INITIAL_SKELETON_ROWS = 3;
 
@@ -151,7 +152,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		estimateSize: () => mediaItemHeight() || 320,
 		gap: GRID_GAP_PX,
 		getItemKey: (index) => index,
-		overscan: VIRTUAL_ROWS_OVERSCAN,
+		overscan: WINDOW_VIRTUAL_ROWS_OVERSCAN,
 		get scrollMargin() {
 			return scrollMargin();
 		},
@@ -165,7 +166,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		estimateSize: () => mediaItemHeight() || 320,
 		gap: GRID_GAP_PX,
 		getItemKey: (index) => index,
-		overscan: VIRTUAL_ROWS_OVERSCAN,
+		overscan: ELEMENT_VIRTUAL_ROWS_OVERSCAN,
 		get scrollMargin() {
 			return scrollMargin();
 		},
@@ -334,7 +335,12 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 									{(media) =>
 										props.renderItem(media, {
 											onContextMenu: onContextMenuHandler(media.id),
-											priority: virtualRow.index < INITIAL_PRIORITY_ROWS,
+											// Native lazy loading can leave transformed rows blank in a
+											// nested scroller. Element virtualization already keeps only
+											// the visible row and one row of overscan mounted.
+											priority:
+												props.scrollMode === "element" ||
+												virtualRow.index < INITIAL_PRIORITY_ROWS,
 											get isBulkSelectMode() {
 												return props.isBulkSelectMode?.();
 											},
diff --git a/packages/ui/src/thumbnail-image.tsx b/packages/ui/src/thumbnail-image.tsx
index 51fae54a..7b69a465 100644
--- a/packages/ui/src/thumbnail-image.tsx
+++ b/packages/ui/src/thumbnail-image.tsx
@@ -26,12 +26,25 @@ export function ThumbnailImage(props: ThumbnailImageProps) {
 		setError(false);
 		let cancelled = false;
 
-		const load = async () => {
+		const applyResolvedUrl = (resolved: string) => {
+			if (!cancelled) {
+				setUrl(resolved);
+			}
+		};
+
+		const load = () => {
 			try {
-				const resolved = await source.getUrl();
-				if (!cancelled) {
-					setUrl(resolved);
+				const resolved = source.getUrl();
+				if (typeof resolved === "string") {
+					applyResolvedUrl(resolved);
+					return;
 				}
+				void resolved.then(applyResolvedUrl).catch(() => {
+					if (!cancelled) {
+						setError(true);
+						source.onError?.();
+					}
+				});
 			} catch {
 				if (!cancelled) {
 					setError(true);
@@ -40,11 +53,11 @@ export function ThumbnailImage(props: ThumbnailImageProps) {
 			}
 		};
 
-		void load();
+		load();
 
 		const unsubscribe = source.subscribe?.(() => {
 			setError(false);
-			void load();
+			load();
 		});
 
 		onCleanup(() => {

From a56cffef105f117febb99f6139aca9d19e29d345 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 15:20:17 +0900
Subject: [PATCH 06/12] test(ui): cover large virtual media grids

---
 .../tests/e2e/ui-components.gallery.spec.ts   | 67 +++++++++++++++
 apps/server/src/tests/e2e/ui-gallery/src.tsx  | 81 ++++++++++++++++++-
 2 files changed, 147 insertions(+), 1 deletion(-)

diff --git a/apps/server/src/tests/e2e/ui-components.gallery.spec.ts b/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
index 09a5a106..5313e695 100644
--- a/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
+++ b/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
@@ -57,3 +57,70 @@ test("shared Solid UI gallery has no narrow viewport overflow", async ({
 		fullPage: true,
 	});
 });
+
+test("virtual media grid stays populated and DOM-bounded during fast scrolling", async ({
+	page,
+}) => {
+	await page.setViewportSize({ width: 1_280, height: 720 });
+	await page.goto(`${getGalleryUrl()}/?virtual-grid=1`);
+	await expect(
+		page.getByRole("heading", {
+			name: "Virtual media grid performance fixture",
+		}),
+	).toBeAttached();
+
+	const scroller = page.getByTestId("virtual-grid-scroller");
+	await expect(scroller.locator("[data-media-id]").first()).toBeVisible();
+
+	const samples = await scroller.evaluate(async (element) => {
+		const sampleRows: Array<{
+			mounted: number;
+			visible: number;
+			loadedVisible: number;
+			firstVisibleId: string | null;
+		}> = [];
+		const settleFrame = () =>
+			new Promise<void>((resolve) =>
+				requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+			);
+
+		for (let step = 0; step <= 20; step += 1) {
+			element.scrollTop =
+				(element.scrollHeight - element.clientHeight) * (step / 20);
+			await settleFrame();
+
+			const scrollerRect = element.getBoundingClientRect();
+			const mounted = [
+				...element.querySelectorAll<HTMLElement>("[data-media-id]"),
+			];
+			const visible = mounted.filter((item) => {
+				const rect = item.getBoundingClientRect();
+				return rect.bottom > scrollerRect.top && rect.top < scrollerRect.bottom;
+			});
+			const loadedVisible = visible.filter((item) => {
+				const image = item.querySelector("img");
+				return image?.complete && image.naturalWidth > 0;
+			});
+			sampleRows.push({
+				mounted: mounted.length,
+				visible: visible.length,
+				loadedVisible: loadedVisible.length,
+				firstVisibleId: visible[0]?.dataset.mediaId ?? null,
+			});
+		}
+
+		return sampleRows;
+	});
+
+	expect(samples.every((sample) => sample.mounted > 0)).toBe(true);
+	expect(Math.max(...samples.map((sample) => sample.mounted))).toBeLessThan(
+		100,
+	);
+	expect(samples.every((sample) => sample.visible > 0)).toBe(true);
+	expect(
+		samples.every((sample) => sample.loadedVisible === sample.visible),
+	).toBe(true);
+	expect(
+		new Set(samples.map((sample) => sample.firstVisibleId)).size,
+	).toBeGreaterThan(10);
+});
diff --git a/apps/server/src/tests/e2e/ui-gallery/src.tsx b/apps/server/src/tests/e2e/ui-gallery/src.tsx
index 95cef06c..40ae28ac 100644
--- a/apps/server/src/tests/e2e/ui-gallery/src.tsx
+++ b/apps/server/src/tests/e2e/ui-gallery/src.tsx
@@ -1,3 +1,4 @@
+import type { Media } from "@solid-imager/core/domain/media/schemas";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -76,6 +77,7 @@ import {
 	SelectValue,
 } from "@solid-imager/ui/select";
 import { Skeleton } from "@solid-imager/ui/skeleton";
+import { SourceMediaGrid } from "@solid-imager/ui/source-media-grid";
 import {
 	Switch,
 	SwitchControl,
@@ -102,6 +104,80 @@ import { render } from "solid-js/web";
 import "../../../app.css";
 
 const OPTIONS = ["Alpha", "Beta", "Gamma"];
+const VIRTUAL_GRID_ITEM_COUNT = 1_000;
+const THUMBNAIL_DATA_URL =
+	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'%3E%3Crect width='160' height='120' fill='%23dbeafe'/%3E%3Cpath d='M0 100 45 55l30 30 22-22 63 57H0Z' fill='%2393c5fd'/%3E%3C/svg%3E";
+
+function createVirtualGridMedia(index: number): Media {
+	const timestamp = new Date("2026-01-01T00:00:00.000Z");
+	return {
+		id: `00000000-0000-4000-8000-${index.toString().padStart(12, "0")}`,
+		mediaSourceId: "00000000-0000-4000-8000-000000000001",
+		filePath: `/fixture/${index}.webp`,
+		fileName: `fixture-${index}.webp`,
+		mediaType: "image",
+		width: 160,
+		height: 120,
+		fileSize: 1_024,
+		description: null,
+		createdAt: timestamp,
+		modifiedAt: timestamp,
+		indexedAt: timestamp,
+		status: "active",
+	};
+}
+
+const VIRTUAL_GRID_MEDIA = Array.from(
+	{ length: VIRTUAL_GRID_ITEM_COUNT },
+	(_, index) => createVirtualGridMedia(index),
+);
+
+function VirtualGridGallery() {
+	return (
+		<main class="h-dvh bg-background p-4 text-foreground">
+			<h1 class="sr-only">Virtual media grid performance fixture</h1>
+			<div
+				class="h-full min-h-0 overflow-y-auto overscroll-contain"
+				data-media-scroll
+				data-testid="virtual-grid-scroller"
+			>
+				<SourceMediaGrid
+					disableContextMenu
+					enableVirtualization
+					isFetchingNextPage={false}
+					itemAspectRatio={4 / 3}
+					mediaResults={() => VIRTUAL_GRID_MEDIA}
+					mediaSourceId={() => VIRTUAL_GRID_MEDIA[0]?.mediaSourceId}
+					renderItem={(media, options) => (
+						<a
+							class="block aspect-[4/3] overflow-hidden rounded-md bg-muted"
+							data-media-id={media.id}
+							href={`#${media.id}`}
+							onContextMenu={options.onContextMenu}
+						>
+							<img
+								alt={media.fileName}
+								class="h-full w-full object-cover"
+								loading={options.priority ? "eager" : "lazy"}
+								src={THUMBNAIL_DATA_URL}
+							/>
+						</a>
+					)}
+					scrollMode="element"
+					setLoadMoreRef={() => undefined}
+					showResultCount={false}
+					state={() => ({
+						data: VIRTUAL_GRID_MEDIA,
+						error: undefined,
+						fetchState: "idle",
+						phase: "data",
+					})}
+					totalCount={VIRTUAL_GRID_ITEM_COUNT}
+				/>
+			</div>
+		</main>
+	);
+}
 
 function Gallery() {
 	const [dark, setDark] = createSignal(false);
@@ -327,4 +403,7 @@ const root = document.querySelector("#root");
 if (!(root instanceof HTMLElement)) {
 	throw new Error("Gallery root element was not found");
 }
-render(() => <Gallery />, root);
+const showVirtualGrid = new URLSearchParams(window.location.search).has(
+	"virtual-grid",
+);
+render(() => (showVirtualGrid ? <VirtualGridGallery /> : <Gallery />), root);

From 576599da2d50ee7fb9eb9b001d99572611cacad8 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 15:43:23 +0900
Subject: [PATCH 07/12] perf(v2): prefetch media in scroll direction

---
 .../tests/e2e/ui-components.gallery.spec.ts   | 62 +++++++++++++++++--
 apps/server/src/tests/e2e/ui-gallery/src.tsx  |  4 +-
 packages/ui/src/source-media-grid.tsx         | 35 +++++++++--
 3 files changed, 88 insertions(+), 13 deletions(-)

diff --git a/apps/server/src/tests/e2e/ui-components.gallery.spec.ts b/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
index 5313e695..3e2be782 100644
--- a/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
+++ b/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
@@ -61,6 +61,14 @@ test("shared Solid UI gallery has no narrow viewport overflow", async ({
 test("virtual media grid stays populated and DOM-bounded during fast scrolling", async ({
 	page,
 }) => {
+	await page.route("**/virtual-thumbnail/*.svg", async (route) => {
+		await new Promise((resolve) => setTimeout(resolve, 20));
+		await route.fulfill({
+			body: `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="120" viewBox="0 0 160 120"><rect width="160" height="120" fill="#dbeafe"/><path d="M0 100 45 55l30 30 22-22 63 57H0Z" fill="#93c5fd"/></svg>`,
+			contentType: "image/svg+xml",
+			headers: { "Cache-Control": "private, max-age=300" },
+		});
+	});
 	await page.setViewportSize({ width: 1_280, height: 720 });
 	await page.goto(`${getGalleryUrl()}/?virtual-grid=1`);
 	await expect(
@@ -71,9 +79,32 @@ test("virtual media grid stays populated and DOM-bounded during fast scrolling",
 
 	const scroller = page.getByTestId("virtual-grid-scroller");
 	await expect(scroller.locator("[data-media-id]").first()).toBeVisible();
+	await expect
+		.poll(() =>
+			scroller.evaluate((element) => {
+				const scrollerRect = element.getBoundingClientRect();
+				const visibleImages = [
+					...element.querySelectorAll<HTMLImageElement>("[data-media-id] img"),
+				].filter((image) => {
+					const rect = image.getBoundingClientRect();
+					return (
+						rect.bottom > scrollerRect.top && rect.top < scrollerRect.bottom
+					);
+				});
+				return (
+					visibleImages.length > 0 &&
+					visibleImages.every(
+						(image) => image.complete && image.naturalWidth > 0,
+					)
+				);
+			}),
+		)
+		.toBe(true);
 
 	const samples = await scroller.evaluate(async (element) => {
 		const sampleRows: Array<{
+			above: number;
+			below: number;
 			mounted: number;
 			visible: number;
 			loadedVisible: number;
@@ -81,10 +112,16 @@ test("virtual media grid stays populated and DOM-bounded during fast scrolling",
 		}> = [];
 		const settleFrame = () =>
 			new Promise<void>((resolve) =>
-				requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+				requestAnimationFrame(() =>
+					requestAnimationFrame(() => setTimeout(resolve, 75)),
+				),
 			);
 
-		for (let step = 0; step <= 20; step += 1) {
+		const scrollSteps = [
+			...Array.from({ length: 21 }, (_, step) => step),
+			...Array.from({ length: 20 }, (_, step) => 19 - step),
+		];
+		for (const step of scrollSteps) {
 			element.scrollTop =
 				(element.scrollHeight - element.clientHeight) * (step / 20);
 			await settleFrame();
@@ -102,6 +139,12 @@ test("virtual media grid stays populated and DOM-bounded during fast scrolling",
 				return image?.complete && image.naturalWidth > 0;
 			});
 			sampleRows.push({
+				above: mounted.filter(
+					(item) => item.getBoundingClientRect().bottom <= scrollerRect.top,
+				).length,
+				below: mounted.filter(
+					(item) => item.getBoundingClientRect().top >= scrollerRect.bottom,
+				).length,
 				mounted: mounted.length,
 				visible: visible.length,
 				loadedVisible: loadedVisible.length,
@@ -114,13 +157,20 @@ test("virtual media grid stays populated and DOM-bounded during fast scrolling",
 
 	expect(samples.every((sample) => sample.mounted > 0)).toBe(true);
 	expect(Math.max(...samples.map((sample) => sample.mounted))).toBeLessThan(
-		100,
+		160,
 	);
 	expect(samples.every((sample) => sample.visible > 0)).toBe(true);
-	expect(
-		samples.every((sample) => sample.loadedVisible === sample.visible),
-	).toBe(true);
+	const unloadedSamples = samples.flatMap((sample, index) =>
+		sample.loadedVisible === sample.visible ? [] : [{ index, ...sample }],
+	);
+	expect(unloadedSamples).toEqual([]);
 	expect(
 		new Set(samples.map((sample) => sample.firstVisibleId)).size,
 	).toBeGreaterThan(10);
+	expect(Math.max(...samples.map((sample) => sample.below))).toBeGreaterThan(
+		20,
+	);
+	expect(Math.max(...samples.map((sample) => sample.above))).toBeGreaterThan(
+		20,
+	);
 });
diff --git a/apps/server/src/tests/e2e/ui-gallery/src.tsx b/apps/server/src/tests/e2e/ui-gallery/src.tsx
index 40ae28ac..12081863 100644
--- a/apps/server/src/tests/e2e/ui-gallery/src.tsx
+++ b/apps/server/src/tests/e2e/ui-gallery/src.tsx
@@ -105,8 +105,6 @@ import "../../../app.css";
 
 const OPTIONS = ["Alpha", "Beta", "Gamma"];
 const VIRTUAL_GRID_ITEM_COUNT = 1_000;
-const THUMBNAIL_DATA_URL =
-	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'%3E%3Crect width='160' height='120' fill='%23dbeafe'/%3E%3Cpath d='M0 100 45 55l30 30 22-22 63 57H0Z' fill='%2393c5fd'/%3E%3C/svg%3E";
 
 function createVirtualGridMedia(index: number): Media {
 	const timestamp = new Date("2026-01-01T00:00:00.000Z");
@@ -159,7 +157,7 @@ function VirtualGridGallery() {
 								alt={media.fileName}
 								class="h-full w-full object-cover"
 								loading={options.priority ? "eager" : "lazy"}
-								src={THUMBNAIL_DATA_URL}
+								src={`/virtual-thumbnail/${media.id}.svg`}
 							/>
 						</a>
 					)}
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index 25181575..52bc0122 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -2,6 +2,8 @@ import type { Media } from "@solid-imager/core/domain/media/schemas";
 import {
 	createVirtualizer,
 	createWindowVirtualizer,
+	type Range,
+	type Virtualizer,
 } from "@tanstack/solid-virtual";
 import type { Accessor, JSX, Setter } from "solid-js";
 import {
@@ -34,10 +36,27 @@ import {
 const VIRTUALIZATION_THRESHOLD = 100;
 const GRID_GAP_PX = 12;
 const WINDOW_VIRTUAL_ROWS_OVERSCAN = 4;
-const ELEMENT_VIRTUAL_ROWS_OVERSCAN = 1;
+const ELEMENT_TRAILING_ROWS = 3;
+const ELEMENT_LEADING_ROWS = 8;
 const INITIAL_PRIORITY_ROWS = 2;
 const INITIAL_SKELETON_ROWS = 3;
 
+type ScrollDirection = "backward" | "forward" | null;
+
+function extractDirectionalRows(
+	range: Range,
+	direction: ScrollDirection,
+): number[] {
+	const rowsBefore =
+		direction === "backward" ? ELEMENT_LEADING_ROWS : ELEMENT_TRAILING_ROWS;
+	const rowsAfter =
+		direction === "backward" ? ELEMENT_TRAILING_ROWS : ELEMENT_LEADING_ROWS;
+	const start = Math.max(range.startIndex - rowsBefore, 0);
+	const end = Math.min(range.endIndex + rowsAfter, range.count - 1);
+
+	return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+}
+
 type SourceMediaGridProps = {
 	detailBasePath?: string;
 	itemAspectRatio?: number;
@@ -158,7 +177,10 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		},
 	});
 
-	const elementRowVirtualizer = createVirtualizer<HTMLElement, HTMLDivElement>({
+	let elementRowVirtualizer:
+		| Virtualizer<HTMLElement, HTMLDivElement>
+		| undefined;
+	elementRowVirtualizer = createVirtualizer<HTMLElement, HTMLDivElement>({
 		get count() {
 			return rowCount();
 		},
@@ -166,14 +188,19 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		estimateSize: () => mediaItemHeight() || 320,
 		gap: GRID_GAP_PX,
 		getItemKey: (index) => index,
-		overscan: ELEMENT_VIRTUAL_ROWS_OVERSCAN,
+		overscan: 0,
+		rangeExtractor: (range) =>
+			extractDirectionalRows(
+				range,
+				elementRowVirtualizer?.scrollDirection ?? null,
+			),
 		get scrollMargin() {
 			return scrollMargin();
 		},
 	});
 	const mediaRowVirtualizer = () =>
 		props.scrollMode === "element"
-			? elementRowVirtualizer
+			? (elementRowVirtualizer ?? windowRowVirtualizer)
 			: windowRowVirtualizer;
 
 	const shouldVirtualize = createMemo(

From b9adc00845184a00fbb9f1cca5d8e4fde46b3207 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 16:54:42 +0900
Subject: [PATCH 08/12] perf(thumbnails): add responsive derivatives and warmup
 jobs

---
 apps/server/public/openapi.json               |  50 ++-
 .../services/job-dispatch-service.ts          |   7 +-
 .../application/services/thumbnail-service.ts |  20 +-
 .../src/components/media/media-grid-item.tsx  |   6 +
 .../src/components/media/thumbnail-image.tsx  |  16 +-
 .../infrastructure/api-clients/thumbnails.ts  |  10 +-
 .../api/routers/thumbnails-router.ts          |  12 +-
 .../src/infrastructure/jobs/job-worker.ts     |  27 +-
 .../src/infrastructure/jobs/thumbnails.ts     | 376 ++++++++++++++++--
 ...urces.$mediaSourceId.thumbnail.$mediaId.ts |  46 ++-
 .../src/ports/thumbnail-service.ts            |  10 +-
 .../src/services/thumbnail-service.ts         |  29 +-
 .../domain/contract/thumbnails.contract.ts    |   8 +-
 packages/core/src/domain/sources/events.ts    |   2 +
 .../core/src/domain/thumbnails/schemas.ts     |  31 ++
 .../src/repositories/job-repository.test.ts   |  30 ++
 .../db/src/repositories/job-repository.ts     |  27 +-
 17 files changed, 637 insertions(+), 70 deletions(-)
 create mode 100644 packages/core/src/domain/thumbnails/schemas.ts

diff --git a/apps/server/public/openapi.json b/apps/server/public/openapi.json
index 055685a1..ec1a9a92 100644
--- a/apps/server/public/openapi.json
+++ b/apps/server/public/openapi.json
@@ -1099,6 +1099,16 @@
                                     },
                                     "timestamp": {
                                       "type": "string"
+                                    },
+                                    "size": {
+                                      "anyOf": [
+                                        {
+                                          "const": 256
+                                        },
+                                        {
+                                          "const": 512
+                                        }
+                                      ]
                                     }
                                   },
                                   "required": [
@@ -4597,6 +4607,21 @@
                   "sourceId": {
                     "type": "string",
                     "format": "uuid"
+                  },
+                  "size": {
+                    "anyOf": [
+                      {
+                        "const": 256
+                      },
+                      {
+                        "const": 512
+                      }
+                    ],
+                    "default": 512
+                  },
+                  "missingOnly": {
+                    "type": "boolean",
+                    "default": false
                   }
                 },
                 "required": [
@@ -4612,11 +4637,28 @@
             "content": {
               "application/json": {
                 "schema": {
-                  "anyOf": [
-                    {},
-                    {
-                      "not": {}
+                  "type": "object",
+                  "properties": {
+                    "success": {
+                      "type": "boolean"
+                    },
+                    "count": {
+                      "type": "integer",
+                      "minimum": 0,
+                      "maximum": 9007199254740991
+                    },
+                    "jobId": {
+                      "type": "string",
+                      "format": "uuid"
+                    },
+                    "message": {
+                      "type": "string"
                     }
+                  },
+                  "required": [
+                    "success",
+                    "count",
+                    "message"
                   ]
                 }
               }
diff --git a/apps/server/src/application/services/job-dispatch-service.ts b/apps/server/src/application/services/job-dispatch-service.ts
index da7d4c1c..b5daaccc 100644
--- a/apps/server/src/application/services/job-dispatch-service.ts
+++ b/apps/server/src/application/services/job-dispatch-service.ts
@@ -6,7 +6,10 @@ import {
 	processAutoTaggingJob,
 	processBulkTaggingDispatchJob,
 } from "~/infrastructure/jobs/tagging-jobs";
-import { deleteThumbnail } from "~/infrastructure/jobs/thumbnails";
+import {
+	deleteThumbnail,
+	processThumbnailGenerationJob,
+} from "~/infrastructure/jobs/thumbnails";
 import { logger } from "~/infrastructure/logger";
 
 // Helper for unified job processing (Called by JobWorker)
@@ -44,6 +47,8 @@ export async function processJob(job: DbJob) {
 			"~/infrastructure/jobs/ccip-jobs"
 		);
 		await processBatchCcipDispatchJob(job);
+	} else if (job.type === "generate_thumbnail") {
+		await processThumbnailGenerationJob(job);
 	} else if (job.type === "sync_lancedb" || job.type === "sync_lancedb_full") {
 		if (!mediaSourceId) {
 			throw new Error(`Job ${job.id} missing mediaSourceId`);
diff --git a/apps/server/src/application/services/thumbnail-service.ts b/apps/server/src/application/services/thumbnail-service.ts
index 3f84e839..02960db7 100644
--- a/apps/server/src/application/services/thumbnail-service.ts
+++ b/apps/server/src/application/services/thumbnail-service.ts
@@ -1,3 +1,4 @@
+import type { ThumbnailSize } from "@solid-imager/core/domain/thumbnails/schemas";
 import { services } from "~/application/registry";
 import {
 	generateThumbnailsForSource,
@@ -10,7 +11,7 @@ export const ThumbnailService = {
 	getMediaThumbnailUrl(
 		mediaSourceId: string,
 		mediaId: string,
-		size?: number,
+		size?: ThumbnailSize,
 	): string {
 		let url = `/api/sources/${mediaSourceId}/thumbnail/${mediaId}`;
 		if (size) {
@@ -19,9 +20,20 @@ export const ThumbnailService = {
 		return url;
 	},
 
-	async startThumbnailGeneration(mediaSourceId: string) {
-		const count = await generateThumbnailsForSource(mediaSourceId);
-		return { success: true, count };
+	async startThumbnailGeneration(
+		mediaSourceId: string,
+		options: { size: ThumbnailSize; missingOnly: boolean },
+	) {
+		const result = await generateThumbnailsForSource(mediaSourceId, options);
+		return {
+			success: true,
+			count: result.count,
+			jobId: result.jobId,
+			message:
+				result.count > 0
+					? `Queued ${result.count} thumbnail job(s)`
+					: "No thumbnails need generation",
+		};
 	},
 
 	async clearThumbnailCache(mediaSourceId: string) {
diff --git a/apps/server/src/components/media/media-grid-item.tsx b/apps/server/src/components/media/media-grid-item.tsx
index acfcf0cb..e24a260d 100644
--- a/apps/server/src/components/media/media-grid-item.tsx
+++ b/apps/server/src/components/media/media-grid-item.tsx
@@ -1,5 +1,6 @@
 import type { Media } from "@solid-imager/core/domain/media/schemas";
 import {
+	type MediaGridImageLoadPolicy,
 	type MediaGridLinkProps,
 	MediaGridItem as SharedMediaGridItem,
 } from "@solid-imager/ui/media-grid-item";
@@ -11,6 +12,7 @@ type MediaGridItemProps = {
 	linkPrefix?: string;
 	routeVersion?: "default" | "v2";
 	media: Media;
+	imageLoadPolicy?: MediaGridImageLoadPolicy;
 	onContextMenu?: (event: MouseEvent) => void;
 	priority?: boolean;
 	sourceRootPath?: string;
@@ -84,6 +86,7 @@ export function MediaGridItem(props: MediaGridItemProps) {
 			variant={props.routeVersion === "v2" ? "v2" : "default"}
 			isBulkSelectMode={props.isBulkSelectMode}
 			isSelected={props.isSelected}
+			imageLoadPolicy={props.imageLoadPolicy}
 			linkComponent={(linkProps) => (
 				<Show fallback={detailLink(linkProps)} when={props.isBulkSelectMode}>
 					<button
@@ -109,9 +112,12 @@ export function MediaGridItem(props: MediaGridItemProps) {
 				<ThumbnailImage
 					alt={thumbnailProps.alt}
 					class={thumbnailProps.class}
+					enabled={thumbnailProps.enabled}
+					fetchpriority={thumbnailProps.fetchpriority}
 					height={thumbnailProps.height}
 					loading={thumbnailProps.loading}
 					media={thumbnailProps.media}
+					sizes={thumbnailProps.sizes}
 					sourceRootPath={thumbnailProps.sourceRootPath}
 					width={thumbnailProps.width}
 				/>
diff --git a/apps/server/src/components/media/thumbnail-image.tsx b/apps/server/src/components/media/thumbnail-image.tsx
index 103d9dc1..9e48406e 100644
--- a/apps/server/src/components/media/thumbnail-image.tsx
+++ b/apps/server/src/components/media/thumbnail-image.tsx
@@ -3,35 +3,46 @@ import { ThumbnailImage as SharedThumbnailImage } from "@solid-imager/ui/thumbna
 import {
 	type BuildThumbnailUrlArgs,
 	createHttpThumbnailSource,
+	type ThumbnailRequestSize,
 } from "@solid-imager/ui/thumbnail-source";
 import { createMemo } from "solid-js";
 
 type ThumbnailImageProps = {
 	alt: string;
 	class?: string;
+	enabled?: boolean;
 	fallback?: string;
+	fetchpriority?: "high" | "low" | "auto";
 	height?: number | null;
 	loading?: "eager" | "lazy";
 	maxRetries?: number;
 	media: MediaSafe;
 	retryDelayMs?: number;
+	requestedSize?: ThumbnailRequestSize;
+	sizes?: string;
 	sourceRootPath?: string;
 	width?: number | null;
 };
 
 function buildUrl(args: BuildThumbnailUrlArgs): string {
 	const base = `/api/sources/${args.mediaSourceId}/thumbnail/${args.mediaId}`;
-	return args.cacheKey ? `${base}?t=${args.cacheKey}` : base;
+	const query = new URLSearchParams();
+	if (args.size) query.set("size", String(args.size));
+	if (args.cacheKey) query.set("t", String(args.cacheKey));
+	const search = query.toString();
+	return search ? `${base}?${search}` : base;
 }
 
 export function ThumbnailImage(props: ThumbnailImageProps) {
 	const source = createMemo(() =>
 		createHttpThumbnailSource({
 			buildUrl,
+			defaultSize: props.requestedSize ?? (props.sizes ? 512 : undefined),
 			maxRetries: props.maxRetries,
 			mediaId: props.media.id,
 			mediaSourceId: props.media.mediaSourceId,
 			modifiedAt: props.media.modifiedAt,
+			responsiveSizes: props.sizes ? [256, 512] : undefined,
 			retryDelayMs: props.retryDelayMs,
 		}),
 	);
@@ -39,9 +50,12 @@ export function ThumbnailImage(props: ThumbnailImageProps) {
 		<SharedThumbnailImage
 			alt={props.alt}
 			class={props.class}
+			enabled={props.enabled}
 			fallback={props.fallback}
+			fetchpriority={props.fetchpriority}
 			height={props.height}
 			loading={props.loading}
+			sizes={props.sizes}
 			source={source()}
 			width={props.width}
 		/>
diff --git a/apps/server/src/infrastructure/api-clients/thumbnails.ts b/apps/server/src/infrastructure/api-clients/thumbnails.ts
index 0af893e2..a9ecda34 100644
--- a/apps/server/src/infrastructure/api-clients/thumbnails.ts
+++ b/apps/server/src/infrastructure/api-clients/thumbnails.ts
@@ -10,8 +10,14 @@ import { orpc } from "~/infrastructure/api-clients/orpc-client";
  * Starts thumbnail generation for a media source
  * @param mediaSourceId - The ID of the media source
  */
-export function startThumbnailGeneration(mediaSourceId: string) {
-	return orpc.thumbnails.generate({ sourceId: mediaSourceId });
+export function startThumbnailGeneration(
+	mediaSourceId: string,
+	options: { size: 256 | 512; missingOnly: boolean } = {
+		size: 512,
+		missingOnly: false,
+	},
+) {
+	return orpc.thumbnails.generate({ sourceId: mediaSourceId, ...options });
 }
 
 /**
diff --git a/apps/server/src/infrastructure/api/routers/thumbnails-router.ts b/apps/server/src/infrastructure/api/routers/thumbnails-router.ts
index 1d7c26ee..d599d7e2 100644
--- a/apps/server/src/infrastructure/api/routers/thumbnails-router.ts
+++ b/apps/server/src/infrastructure/api/routers/thumbnails-router.ts
@@ -1,4 +1,8 @@
 import { os } from "@orpc/server";
+import {
+	generateThumbnailsRequestSchema,
+	generateThumbnailsResponseSchema,
+} from "@solid-imager/core/domain/thumbnails/schemas";
 import { z } from "zod";
 import { ThumbnailService } from "~/application/services/thumbnail-service";
 
@@ -10,10 +14,14 @@ export const thumbnailsRouter = {
 	 * Generates thumbnails for all media in a source
 	 */
 	generate: os
-		.input(z.object({ sourceId: z.string().uuid() }))
+		.input(generateThumbnailsRequestSchema)
+		.output(generateThumbnailsResponseSchema)
 		.handler(
 			async ({ input }) =>
-				await ThumbnailService.startThumbnailGeneration(input.sourceId),
+				await ThumbnailService.startThumbnailGeneration(input.sourceId, {
+					size: input.size,
+					missingOnly: input.missingOnly,
+				}),
 		),
 
 	/**
diff --git a/apps/server/src/infrastructure/jobs/job-worker.ts b/apps/server/src/infrastructure/jobs/job-worker.ts
index 2f6879cf..accec26b 100644
--- a/apps/server/src/infrastructure/jobs/job-worker.ts
+++ b/apps/server/src/infrastructure/jobs/job-worker.ts
@@ -48,6 +48,7 @@ export class JobWorker {
 	private aiConcurrency = 1;
 	private activeJobs = 0;
 	private activeAiJobs = 0;
+	private activeThumbnailJobs = 0;
 	private readonly activeLanceDbSyncKeys = new Set<string>();
 
 	private readonly jobRepo: IJobRepository;
@@ -57,6 +58,7 @@ export class JobWorker {
 		"auto_tagging",
 		"extract_ccip_vector",
 	]);
+	private readonly thumbnailJobTypes = new Set(["generate_thumbnail"]);
 
 	constructor(
 		jobRepo: IJobRepository,
@@ -138,14 +140,26 @@ export class JobWorker {
 				}
 			}
 
-			// 2. Poll Other Jobs
+			// 2. Keep thumbnail warming in its own single-worker pool. A burst of
+			// cache misses must not consume the general job concurrency.
+			if (this.activeThumbnailJobs < 1) {
+				const jobs = await this.jobRepo.claimPending(1, {
+					includeTypes: Array.from(this.thumbnailJobTypes),
+				});
+				for (const job of jobs) {
+					void this.tryProcessJob(job);
+				}
+			}
+
+			// 3. Poll Other Jobs
 			// "concurrency" is treated as the limit for NON-AI jobs in this independent pool model
-			const activeOtherJobs = this.activeJobs - this.activeAiJobs;
+			const activeOtherJobs =
+				this.activeJobs - this.activeAiJobs - this.activeThumbnailJobs;
 			if (activeOtherJobs < this.concurrency) {
 				const slots = this.concurrency - activeOtherJobs;
 				if (slots > 0) {
 					const jobs = await this.jobRepo.claimPending(slots, {
-						excludeTypes: Array.from(this.aiJobTypes),
+						excludeTypes: [...this.aiJobTypes, ...this.thumbnailJobTypes],
 						excludeLanceDbSourceIds: Array.from(this.activeLanceDbSyncKeys),
 					});
 					for (const job of jobs) {
@@ -189,10 +203,14 @@ export class JobWorker {
 	private async processJob(job: Job, lanceDbSyncKey?: string) {
 		this.activeJobs++;
 		const isAiJob = this.aiJobTypes.has(job.type);
+		const isThumbnailJob = this.thumbnailJobTypes.has(job.type);
 		const startedAt = Date.now();
 		if (isAiJob) {
 			this.activeAiJobs++;
 		}
+		if (isThumbnailJob) {
+			this.activeThumbnailJobs++;
+		}
 
 		logger.info(
 			{
@@ -239,6 +257,9 @@ export class JobWorker {
 			if (isAiJob) {
 				this.activeAiJobs--;
 			}
+			if (isThumbnailJob) {
+				this.activeThumbnailJobs--;
+			}
 			if (lanceDbSyncKey) {
 				this.activeLanceDbSyncKeys.delete(lanceDbSyncKey);
 			}
diff --git a/apps/server/src/infrastructure/jobs/thumbnails.ts b/apps/server/src/infrastructure/jobs/thumbnails.ts
index 96af4cee..ea8bc6e7 100644
--- a/apps/server/src/infrastructure/jobs/thumbnails.ts
+++ b/apps/server/src/infrastructure/jobs/thumbnails.ts
@@ -1,21 +1,35 @@
 import fs from "node:fs/promises";
 import path from "node:path";
+import { batchParentPayloadSchema } from "@solid-imager/core/domain/tagging/schemas";
+import {
+	generateThumbnailJobPayloadSchema,
+	type ThumbnailSize,
+} from "@solid-imager/core/domain/thumbnails/schemas";
 import { services } from "~/application/registry";
-// import {
-//   selectMediaById,
-//   selectMediaBySourceId,
-// } from "~/infrastructure/db/queries/media"; // Removed
-import { db } from "~/infrastructure/db";
-import { jobs, type Media, type NewJob } from "~/infrastructure/db/schema";
+import type { Job, Media } from "~/infrastructure/db/schema";
+import { RealtimeEventBus } from "~/infrastructure/events/realtime-event-bus";
 import { ImageProcessor } from "~/infrastructure/processing/image-processor";
-import { MediaRepository } from "~/infrastructure/repositories/media-repository"; // Added
+import { MediaRepository } from "~/infrastructure/repositories/media-repository";
 import { DrizzleSourceRepository } from "~/infrastructure/repositories/source-repository";
 
 const sourceRepo = DrizzleSourceRepository;
 
 const DEFAULT_THUMBNAIL_DIR = ".cache/thumbnails";
-const DEFAULT_THUMBNAIL_SIZE = 512;
+export const THUMBNAIL_SIZE_SMALL = 256 as const;
+export const THUMBNAIL_SIZE_LARGE = 512 as const;
+const DEFAULT_THUMBNAIL_SIZE = THUMBNAIL_SIZE_LARGE;
 const DEFAULT_THUMBNAIL_QUALITY = 80;
+const ENQUEUE_CONCURRENCY = 25;
+const FILE_CHECK_CONCURRENCY = 50;
+
+type ThumbnailQueueGlobal = typeof globalThis & {
+	__THUMBNAIL_QUEUE_IN_FLIGHT__?: Map<string, Promise<void>>;
+};
+const thumbnailQueueGlobal = globalThis as ThumbnailQueueGlobal;
+const thumbnailQueueInFlight =
+	thumbnailQueueGlobal.__THUMBNAIL_QUEUE_IN_FLIGHT__ ??
+	new Map<string, Promise<void>>();
+thumbnailQueueGlobal.__THUMBNAIL_QUEUE_IN_FLIGHT__ = thumbnailQueueInFlight;
 
 /**
  * Gets storage config with safe fallback for tests or when ConfigService is not registered
@@ -44,8 +58,20 @@ export function getSourceCacheDir(mediaSourceId: string): string {
  * @param {string} mediaSourceId - The ID of the media source.
  * @returns {Promise<void>} A promise that resolves when the directory is ensured.
  */
-async function ensureCacheDir(mediaSourceId: string) {
-	await fs.mkdir(getSourceCacheDir(mediaSourceId), { recursive: true });
+async function ensureCacheDir(mediaSourceId: string, size: ThumbnailSize) {
+	await fs.mkdir(getThumbnailCacheDir(mediaSourceId, size), {
+		recursive: true,
+	});
+}
+
+export function getThumbnailCacheDir(
+	mediaSourceId: string,
+	size: ThumbnailSize,
+): string {
+	const sourceCacheDir = getSourceCacheDir(mediaSourceId);
+	return size === THUMBNAIL_SIZE_LARGE
+		? sourceCacheDir
+		: path.join(sourceCacheDir, String(size));
 }
 
 /**
@@ -58,8 +84,28 @@ async function ensureCacheDir(mediaSourceId: string) {
 export function getThumbnailPath(
 	mediaSourceId: string,
 	mediaId: string,
+	size: ThumbnailSize = THUMBNAIL_SIZE_LARGE,
 ): string {
-	return path.join(getSourceCacheDir(mediaSourceId), `${mediaId}.webp`);
+	return path.join(
+		getThumbnailCacheDir(mediaSourceId, size),
+		`${mediaId}.webp`,
+	);
+}
+
+export async function thumbnailExists(
+	mediaSourceId: string,
+	mediaId: string,
+	size: ThumbnailSize,
+): Promise<boolean> {
+	try {
+		await fs.access(getThumbnailPath(mediaSourceId, mediaId, size));
+		return true;
+	} catch (error) {
+		if ((error as { code?: string }).code === "ENOENT") {
+			return false;
+		}
+		throw error;
+	}
 }
 
 /**
@@ -74,16 +120,100 @@ export async function generateThumbnail(
 	sourcePath: string,
 	mediaSourceId: string,
 ): Promise<void> {
-	await ensureCacheDir(mediaSourceId);
+	const inputPath = path.join(sourcePath, media.filePath);
+	await generateThumbnailAtSize(
+		inputPath,
+		mediaSourceId,
+		media.id,
+		THUMBNAIL_SIZE_LARGE,
+	);
+	await generateThumbnailAtSize(
+		getThumbnailPath(mediaSourceId, media.id, THUMBNAIL_SIZE_LARGE),
+		mediaSourceId,
+		media.id,
+		THUMBNAIL_SIZE_SMALL,
+	);
+}
 
+async function generateThumbnailAtSize(
+	inputPath: string,
+	mediaSourceId: string,
+	mediaId: string,
+	size: ThumbnailSize,
+): Promise<void> {
+	await ensureCacheDir(mediaSourceId, size);
 	const storageConfig = getStorageConfig();
-	const size = storageConfig.thumbnailSize;
-	const quality = storageConfig.thumbnailQuality;
+	const outputPath = getThumbnailPath(mediaSourceId, mediaId, size);
+	if (
+		size === THUMBNAIL_SIZE_SMALL &&
+		storageConfig.thumbnailSize <= THUMBNAIL_SIZE_SMALL
+	) {
+		await fs.copyFile(inputPath, outputPath);
+		return;
+	}
+	await ImageProcessor.generateThumbnail(
+		inputPath,
+		outputPath,
+		size === THUMBNAIL_SIZE_LARGE
+			? storageConfig.thumbnailSize
+			: THUMBNAIL_SIZE_SMALL,
+		storageConfig.thumbnailQuality,
+	);
+}
 
-	const inputPath = path.join(sourcePath, media.filePath);
-	const outputPath = getThumbnailPath(mediaSourceId, media.id);
+export async function generateThumbnailForMedia(
+	mediaSourceId: string,
+	mediaId: string,
+	size: ThumbnailSize,
+): Promise<void> {
+	const [source, media] = await Promise.all([
+		sourceRepo.findById(mediaSourceId),
+		MediaRepository.findById(mediaId),
+	]);
+	if (
+		source?.type !== "local" ||
+		!media ||
+		media.mediaSourceId !== mediaSourceId
+	) {
+		throw new Error("Media or local source not found");
+	}
+	const sourcePath = (source.connectionInfo as { path?: string }).path;
+	if (!sourcePath) {
+		throw new Error("Local source path is missing");
+	}
+
+	const originalPath = path.join(sourcePath, media.filePath);
+	if (size === THUMBNAIL_SIZE_SMALL) {
+		const largePath = getThumbnailPath(
+			mediaSourceId,
+			mediaId,
+			THUMBNAIL_SIZE_LARGE,
+		);
+		if (
+			!(await thumbnailExists(mediaSourceId, mediaId, THUMBNAIL_SIZE_LARGE))
+		) {
+			await generateThumbnailAtSize(
+				originalPath,
+				mediaSourceId,
+				mediaId,
+				THUMBNAIL_SIZE_LARGE,
+			);
+		}
+		await generateThumbnailAtSize(
+			largePath,
+			mediaSourceId,
+			mediaId,
+			THUMBNAIL_SIZE_SMALL,
+		);
+		return;
+	}
 
-	await ImageProcessor.generateThumbnail(inputPath, outputPath, size, quality);
+	await generateThumbnailAtSize(
+		originalPath,
+		mediaSourceId,
+		mediaId,
+		THUMBNAIL_SIZE_LARGE,
+	);
 }
 
 /**
@@ -96,13 +226,13 @@ export async function deleteThumbnail(
 	mediaSourceId: string,
 	mediaId: string,
 ): Promise<void> {
-	const thumbnailPath = getThumbnailPath(mediaSourceId, mediaId);
-	try {
-		await fs.unlink(thumbnailPath);
-	} catch (error: unknown) {
-		// ファイルが存在しない場合、このコンテキストではエラーではありません。
-		if ((error as { code?: string }).code !== "ENOENT") {
-			throw error;
+	for (const size of [THUMBNAIL_SIZE_LARGE, THUMBNAIL_SIZE_SMALL] as const) {
+		try {
+			await fs.unlink(getThumbnailPath(mediaSourceId, mediaId, size));
+		} catch (error: unknown) {
+			if ((error as { code?: string }).code !== "ENOENT") {
+				throw error;
+			}
 		}
 	}
 }
@@ -133,7 +263,8 @@ export function processMediaJob(
  */
 export async function generateThumbnailsForSource(
 	mediaSourceId: string,
-): Promise<number> {
+	options: { size: ThumbnailSize; missingOnly: boolean },
+): Promise<{ count: number; jobId?: string }> {
 	const mediaSource = await sourceRepo.findById(mediaSourceId);
 	if (mediaSource?.type !== "local") {
 		throw new Error("Source not found or not a local source");
@@ -141,28 +272,191 @@ export async function generateThumbnailsForSource(
 
 	const mediaItems = await MediaRepository.findAllBySourceId(mediaSourceId);
 	if (mediaItems.length === 0) {
-		return 0;
+		return { count: 0 };
 	}
 
-	// Use processMedia job type for unified processing
-	const basePath = (mediaSource.connectionInfo as { path: string }).path;
+	const targets = options.missingOnly
+		? await filterMissingThumbnails(mediaSourceId, mediaItems, options.size)
+		: mediaItems;
+	if (targets.length === 0) {
+		return { count: 0 };
+	}
 
-	const jobRows: NewJob[] = mediaItems.map((media) => ({
-		type: "processMedia",
+	const jobRepo = services.getJobRepository();
+	const parent = await jobRepo.create({
+		type: "thumbnail_generation_parent",
 		mediaSourceId,
+		status: "in_progress",
 		payload: {
-			mediaId: media.id,
-			sourcePath: basePath,
-			type: "processMedia",
+			total: targets.length,
+			processed: 0,
+			failed: 0,
+			mediaSourceId,
 		},
-	}));
-	if (jobRows.length === 0) return 0;
-	const BATCH_SIZE = 500;
-	for (let i = 0; i < jobRows.length; i += BATCH_SIZE) {
-		const chunk = jobRows.slice(i, i + BATCH_SIZE);
-		await db.insert(jobs).values(chunk);
+	});
+
+	let count = 0;
+	try {
+		for (let index = 0; index < targets.length; index += ENQUEUE_CONCURRENCY) {
+			const chunk = targets.slice(index, index + ENQUEUE_CONCURRENCY);
+			const created = await Promise.all(
+				chunk.map((media) =>
+					jobRepo.createIfUnique({
+						type: "generate_thumbnail",
+						mediaSourceId,
+						parentId: parent.id,
+						payload: { mediaId: media.id, size: options.size },
+					}),
+				),
+			);
+			count += created.filter(Boolean).length;
+		}
+
+		const currentParent = await jobRepo.findById(parent.id);
+		const currentProgress = parseThumbnailParentPayload(currentParent?.payload);
+		await jobRepo.update(parent.id, {
+			payload: {
+				total: count,
+				processed: currentProgress.processed,
+				failed: currentProgress.failed,
+				mediaSourceId,
+			},
+		});
+		if (count === 0) {
+			await jobRepo.update(parent.id, { status: "completed" });
+			return { count: 0 };
+		}
+		if (currentProgress.processed + currentProgress.failed >= count) {
+			await finalizeThumbnailParent(parent.id, {
+				...currentProgress,
+				total: count,
+			});
+		}
+		return { count, jobId: parent.id };
+	} catch (error) {
+		await jobRepo.update(parent.id, { status: "failed" });
+		throw error;
 	}
+}
+
+async function filterMissingThumbnails(
+	mediaSourceId: string,
+	mediaItems: Media[],
+	size: ThumbnailSize,
+): Promise<Media[]> {
+	const missing: Media[] = [];
+	for (
+		let index = 0;
+		index < mediaItems.length;
+		index += FILE_CHECK_CONCURRENCY
+	) {
+		const chunk = mediaItems.slice(index, index + FILE_CHECK_CONCURRENCY);
+		const results = await Promise.all(
+			chunk.map(async (media) => ({
+				media,
+				exists: await thumbnailExists(mediaSourceId, media.id, size),
+			})),
+		);
+		missing.push(
+			...results.filter((result) => !result.exists).map(({ media }) => media),
+		);
+	}
+	return missing;
+}
+
+export async function queueThumbnailGeneration(
+	mediaSourceId: string,
+	mediaId: string,
+	size: ThumbnailSize,
+): Promise<void> {
+	const key = `${mediaSourceId}:${mediaId}:${size}`;
+	const existing = thumbnailQueueInFlight.get(key);
+	if (existing) {
+		await existing;
+		return;
+	}
+	const queued = services
+		.getJobRepository()
+		.createIfUnique({
+			type: "generate_thumbnail",
+			mediaSourceId,
+			payload: { mediaId, size },
+		})
+		.then(() => undefined)
+		.finally(() => thumbnailQueueInFlight.delete(key));
+	thumbnailQueueInFlight.set(key, queued);
+	await queued;
+}
+
+export async function processThumbnailGenerationJob(job: Job): Promise<void> {
+	const payload = generateThumbnailJobPayloadSchema.parse(job.payload);
+	if (!job.mediaSourceId) {
+		throw new Error("Thumbnail generation job is missing mediaSourceId");
+	}
+
+	try {
+		await generateThumbnailForMedia(
+			job.mediaSourceId,
+			payload.mediaId,
+			payload.size,
+		);
+		RealtimeEventBus.publishSource(job.mediaSourceId, "thumbnail-generated", {
+			mediaId: payload.mediaId,
+			size: payload.size,
+			timestamp: new Date().toISOString(),
+		});
+		await updateThumbnailParentProgress(job, true);
+	} catch (error) {
+		await updateThumbnailParentProgress(job, false);
+		throw error;
+	}
+}
+
+async function updateThumbnailParentProgress(
+	job: Job,
+	succeeded: boolean,
+): Promise<void> {
+	if (!job.parentId) {
+		return;
+	}
+	const jobRepo = services.getJobRepository();
+	const progress = succeeded
+		? await jobRepo.incrementProgress(job.parentId, job.id)
+		: await jobRepo.incrementFailedCount(job.parentId, job.id);
+	if (!progress) {
+		return;
+	}
+	RealtimeEventBus.publishJob("job-progress", {
+		jobId: job.parentId,
+		processed: progress.processed,
+		total: progress.total,
+	});
+	if (progress.processed + progress.failed < progress.total) {
+		return;
+	}
+	await finalizeThumbnailParent(job.parentId, progress);
+}
+
+async function finalizeThumbnailParent(
+	parentId: string,
+	progress: { processed: number; failed: number; total: number },
+): Promise<void> {
+	const jobRepo = services.getJobRepository();
+	if (progress.failed > 0) {
+		await jobRepo.update(parentId, { status: "failed" });
+		RealtimeEventBus.publishJob("job-failed", {
+			jobId: parentId,
+			error: `${progress.failed} thumbnail job(s) failed`,
+		});
+		return;
+	}
+	await jobRepo.update(parentId, { status: "completed" });
+	RealtimeEventBus.publishJob("job-completed", {
+		jobId: parentId,
+		message: "Thumbnail generation completed",
+	});
+}
 
-	// Jobs start automatically via worker
-	return mediaItems.length;
+function parseThumbnailParentPayload(payload: unknown) {
+	return batchParentPayloadSchema.parse(payload);
 }
diff --git a/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts b/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts
index a9fe755f..5e15a937 100644
--- a/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts
+++ b/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts
@@ -1,5 +1,12 @@
+import { thumbnailSizeSchema } from "@solid-imager/core/domain/thumbnails/schemas";
 import { createFileRoute } from "@tanstack/solid-router";
-import { getThumbnailPath } from "~/infrastructure/jobs/thumbnails";
+import {
+	getThumbnailPath,
+	queueThumbnailGeneration,
+	THUMBNAIL_SIZE_LARGE,
+	THUMBNAIL_SIZE_SMALL,
+} from "~/infrastructure/jobs/thumbnails";
+import { logger } from "~/infrastructure/logger";
 import type { ServerRouteContext } from "~/infrastructure/router/route-types";
 import { bootstrapServerRoute } from "~/infrastructure/server-route-bootstrap";
 
@@ -10,13 +17,44 @@ export const Route = createFileRoute(
 		handlers: {
 			GET: async ({
 				params,
+				request,
 			}: ServerRouteContext<{ mediaId: string; mediaSourceId: string }>) => {
 				bootstrapServerRoute();
 				const { mediaSourceId, mediaId } = params;
-				const thumbnailPath = getThumbnailPath(mediaSourceId, mediaId);
+				const searchParams = new URL(request.url).searchParams;
+				const rawSize = searchParams.get("size");
+				const parsedSize = thumbnailSizeSchema.safeParse(
+					rawSize === null ? THUMBNAIL_SIZE_LARGE : Number(rawSize),
+				);
+				if (!parsedSize.success) {
+					return new Response("size must be 256 or 512", { status: 400 });
+				}
+				const size = parsedSize.data;
+				const thumbnailPath = getThumbnailPath(mediaSourceId, mediaId, size);
 				const file = Bun.file(thumbnailPath);
 
 				if (!(await file.exists())) {
+					if (size === THUMBNAIL_SIZE_SMALL) {
+						void queueThumbnailGeneration(mediaSourceId, mediaId, size).catch(
+							(error) =>
+								logger.error(
+									{ err: error, mediaId, mediaSourceId, size },
+									"Failed to queue on-demand thumbnail generation",
+								),
+						);
+						const fallback = Bun.file(
+							getThumbnailPath(mediaSourceId, mediaId, THUMBNAIL_SIZE_LARGE),
+						);
+						if (await fallback.exists()) {
+							return new Response(fallback, {
+								headers: {
+									"Cache-Control": "private, max-age=30",
+									"Content-Type": "image/webp",
+									"X-Thumbnail-Fallback": "512",
+								},
+							});
+						}
+					}
 					// A missing thumbnail is an expected transient state while the
 					// background job is running. The image component treats an empty
 					// response as a load error and retries, without flooding the
@@ -29,7 +67,9 @@ export const Route = createFileRoute(
 
 				return new Response(file, {
 					headers: {
-						"Cache-Control": "private, max-age=300",
+						"Cache-Control": searchParams.has("t")
+							? "private, max-age=31536000, immutable"
+							: "private, max-age=300",
 						"Content-Type": "image/webp",
 					},
 				});
diff --git a/packages/application/src/ports/thumbnail-service.ts b/packages/application/src/ports/thumbnail-service.ts
index a19e3c1c..5649ccb7 100644
--- a/packages/application/src/ports/thumbnail-service.ts
+++ b/packages/application/src/ports/thumbnail-service.ts
@@ -1,13 +1,19 @@
+import type {
+	GenerateThumbnailsResponse,
+	ThumbnailSize,
+} from "@solid-imager/core/domain/thumbnails/schemas";
+
 export interface IThumbnailService {
 	getMediaThumbnailUrl(
 		mediaSourceId: string,
 		mediaId: string,
-		size?: number,
+		size?: ThumbnailSize,
 	): string;
 
 	startThumbnailGeneration(
 		mediaSourceId: string,
-	): Promise<{ success: boolean; count: number }>;
+		options: { size: ThumbnailSize; missingOnly: boolean },
+	): Promise<GenerateThumbnailsResponse>;
 
 	clearThumbnailCache(mediaSourceId: string): Promise<{ success: boolean }>;
 }
diff --git a/packages/application/src/services/thumbnail-service.ts b/packages/application/src/services/thumbnail-service.ts
index db7214c3..6ded5a46 100644
--- a/packages/application/src/services/thumbnail-service.ts
+++ b/packages/application/src/services/thumbnail-service.ts
@@ -1,10 +1,17 @@
+import type {
+	GenerateThumbnailsResponse,
+	ThumbnailSize,
+} from "@solid-imager/core/domain/thumbnails/schemas";
 import type { IFileSystem } from "@solid-imager/core/interfaces/file-system";
 import type { IThumbnailService } from "../ports/thumbnail-service";
 
 export type ThumbnailServiceDeps = {
 	fileSystem: IFileSystem;
 	thumbnailCacheDir: string;
-	generateThumbnailsForSource: (mediaSourceId: string) => Promise<number>;
+	generateThumbnailsForSource: (
+		mediaSourceId: string,
+		options: { size: ThumbnailSize; missingOnly: boolean },
+	) => Promise<{ count: number; jobId?: string }>;
 };
 
 export class ThumbnailServiceImpl implements IThumbnailService {
@@ -21,7 +28,7 @@ export class ThumbnailServiceImpl implements IThumbnailService {
 	getMediaThumbnailUrl(
 		mediaSourceId: string,
 		mediaId: string,
-		size?: number,
+		size?: ThumbnailSize,
 	): string {
 		let url = `/api/sources/${mediaSourceId}/thumbnail/${mediaId}`;
 		if (size) {
@@ -32,9 +39,21 @@ export class ThumbnailServiceImpl implements IThumbnailService {
 
 	async startThumbnailGeneration(
 		mediaSourceId: string,
-	): Promise<{ success: boolean; count: number }> {
-		const count = await this.generateThumbnailsForSource(mediaSourceId);
-		return { success: true, count };
+		options: { size: ThumbnailSize; missingOnly: boolean },
+	): Promise<GenerateThumbnailsResponse> {
+		const result = await this.generateThumbnailsForSource(
+			mediaSourceId,
+			options,
+		);
+		return {
+			success: true,
+			count: result.count,
+			jobId: result.jobId,
+			message:
+				result.count > 0
+					? `Queued ${result.count} thumbnail job(s)`
+					: "No thumbnails need generation",
+		};
 	}
 
 	async clearThumbnailCache(
diff --git a/packages/core/src/domain/contract/thumbnails.contract.ts b/packages/core/src/domain/contract/thumbnails.contract.ts
index a357e87a..eb36b18f 100644
--- a/packages/core/src/domain/contract/thumbnails.contract.ts
+++ b/packages/core/src/domain/contract/thumbnails.contract.ts
@@ -1,8 +1,14 @@
 import { oc } from "@orpc/contract";
 import { z } from "zod";
+import {
+	generateThumbnailsRequestSchema,
+	generateThumbnailsResponseSchema,
+} from "../thumbnails/schemas";
 
 export const thumbnailsContract = {
-	generate: oc.input(z.object({ sourceId: z.string().uuid() })),
+	generate: oc
+		.input(generateThumbnailsRequestSchema)
+		.output(generateThumbnailsResponseSchema),
 
 	clear: oc.input(z.object({ sourceId: z.string().uuid() })),
 };
diff --git a/packages/core/src/domain/sources/events.ts b/packages/core/src/domain/sources/events.ts
index 041a3ac1..b0c4ef21 100644
--- a/packages/core/src/domain/sources/events.ts
+++ b/packages/core/src/domain/sources/events.ts
@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { thumbnailSizeSchema } from "../thumbnails/schemas";
 
 const sourceScopedEventSchema = z.object({
 	mediaSourceId: z.string().uuid().optional(),
@@ -43,6 +44,7 @@ export const thumbnailGeneratedEventSchema = z.object({
 	mediaId: z.string().uuid(),
 	filePath: z.string().optional(),
 	timestamp: z.string().optional(),
+	size: thumbnailSizeSchema.optional(),
 });
 export type ThumbnailGeneratedEvent = z.infer<
 	typeof thumbnailGeneratedEventSchema
diff --git a/packages/core/src/domain/thumbnails/schemas.ts b/packages/core/src/domain/thumbnails/schemas.ts
new file mode 100644
index 00000000..59e8216c
--- /dev/null
+++ b/packages/core/src/domain/thumbnails/schemas.ts
@@ -0,0 +1,31 @@
+import { z } from "zod";
+
+export const thumbnailSizeSchema = z.union([z.literal(256), z.literal(512)]);
+export type ThumbnailSize = z.infer<typeof thumbnailSizeSchema>;
+
+export const generateThumbnailsRequestSchema = z.object({
+	sourceId: z.string().uuid(),
+	size: thumbnailSizeSchema.optional().default(512),
+	missingOnly: z.boolean().optional().default(false),
+});
+export type GenerateThumbnailsRequest = z.infer<
+	typeof generateThumbnailsRequestSchema
+>;
+
+export const generateThumbnailsResponseSchema = z.object({
+	success: z.boolean(),
+	count: z.number().int().nonnegative(),
+	jobId: z.string().uuid().optional(),
+	message: z.string(),
+});
+export type GenerateThumbnailsResponse = z.infer<
+	typeof generateThumbnailsResponseSchema
+>;
+
+export const generateThumbnailJobPayloadSchema = z.object({
+	mediaId: z.string().uuid(),
+	size: thumbnailSizeSchema,
+});
+export type GenerateThumbnailJobPayload = z.infer<
+	typeof generateThumbnailJobPayloadSchema
+>;
diff --git a/packages/db/src/repositories/job-repository.test.ts b/packages/db/src/repositories/job-repository.test.ts
index 2e188ebc..5957c367 100644
--- a/packages/db/src/repositories/job-repository.test.ts
+++ b/packages/db/src/repositories/job-repository.test.ts
@@ -25,6 +25,9 @@ describe("JobRepository", () => {
 				],
 			}),
 			update: vi.fn().mockReturnThis(),
+			select: vi.fn().mockReturnThis(),
+			from: vi.fn().mockReturnThis(),
+			limit: vi.fn().mockResolvedValue([]),
 			set: vi.fn().mockReturnThis(),
 			where: vi.fn().mockReturnThis(),
 			returning: vi
@@ -90,6 +93,33 @@ describe("JobRepository", () => {
 		expect(mockExecutor.update).toHaveBeenCalledOnce();
 	});
 
+	it("does not requeue thumbnail batch parent progress records", async () => {
+		await repository.requeueStaleInProgress(
+			new Date("2026-06-23T00:00:00.000Z"),
+		);
+
+		const where = extractSqlText(mockExecutor.where.mock.calls[0]?.[0]);
+		expect(where).toContain("thumbnail_generation_parent");
+	});
+
+	it("deduplicates active thumbnail jobs by source, media and size", async () => {
+		mockExecutor.limit.mockResolvedValueOnce([
+			{ id: "11111111-1111-4111-8111-111111111111" },
+		]);
+
+		const created = await repository.createIfUnique({
+			type: "generate_thumbnail",
+			mediaSourceId: "22222222-2222-4222-8222-222222222222",
+			payload: {
+				mediaId: "33333333-3333-4333-8333-333333333333",
+				size: 256,
+			},
+		});
+
+		expect(created).toBeNull();
+		expect(mockExecutor.select).toHaveBeenCalledOnce();
+	});
+
 	it("clears stale result and error markers when requeueing", async () => {
 		await repository.requeueStaleInProgress(
 			new Date("2026-06-23T00:00:00.000Z"),
diff --git a/packages/db/src/repositories/job-repository.ts b/packages/db/src/repositories/job-repository.ts
index 9b145d3a..f9b0f529 100644
--- a/packages/db/src/repositories/job-repository.ts
+++ b/packages/db/src/repositories/job-repository.ts
@@ -5,6 +5,7 @@ import type {
 	NewJob,
 } from "@solid-imager/core/domain/repositories/job-repository";
 import { batchParentPayloadSchema } from "@solid-imager/core/domain/tagging/schemas";
+import { generateThumbnailJobPayloadSchema } from "@solid-imager/core/domain/thumbnails/schemas";
 import { isJobStatus } from "@solid-imager/core/utils/type-guards";
 import {
 	and,
@@ -68,6 +69,26 @@ export function createJobRepository(
 		},
 
 		async createIfUnique(job: NewJob): Promise<Job | null> {
+			if (job.type === "generate_thumbnail" && job.mediaSourceId) {
+				const payload = generateThumbnailJobPayloadSchema.parse(job.payload);
+				const [existing] = await db()
+					.select({ id: jobs.id })
+					.from(jobs)
+					.where(
+						and(
+							eq(jobs.type, job.type),
+							eq(jobs.mediaSourceId, job.mediaSourceId),
+							inArray(jobs.status, ["pending", "in_progress"]),
+							sql`${jobs.payload}->>'mediaId' = ${payload.mediaId}`,
+							sql`${jobs.payload}->>'size' = ${String(payload.size)}`,
+						),
+					)
+					.limit(1);
+				if (existing) {
+					return null;
+				}
+			}
+
 			if (job.type === "sync_lancedb_delta" && job.mediaSourceId) {
 				const [pending] = await db()
 					.select()
@@ -341,7 +362,11 @@ export function createJobRepository(
 					and(
 						eq(jobs.status, "in_progress"),
 						lt(jobs.updatedAt, olderThan),
-						notInArray(jobs.type, ["batch_ccip_parent", "bulk_tagging_parent"]),
+						notInArray(jobs.type, [
+							"batch_ccip_parent",
+							"bulk_tagging_parent",
+							"thumbnail_generation_parent",
+						]),
 					),
 				)
 				.returning();

From 51d607d705596843216c9241401dfb8cd85453f3 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 16:55:00 +0900
Subject: [PATCH 09/12] perf(ui): optimize virtual media grid loading

---
 apps/server/src/routes/manager.tsx            |  10 ++
 apps/server/src/routes/search.tsx             |   6 +-
 .../components/source-media-page.tsx          |   2 +
 apps/server/src/routes/v2/manager.tsx         |  10 ++
 apps/server/src/routes/v2/search.tsx          |   2 +
 .../src/components/media/media-grid-item.tsx  |  10 +-
 .../src/components/media/thumbnail-image.tsx  |  10 ++
 .../api-clients/thumbnails-api.ts             |  13 +++
 .../infrastructure/media/thumbnail-runtime.ts |   7 +-
 apps/tauri/src/routes/manager.tsx             |   2 +
 apps/tauri/src/routes/search.tsx              |   1 +
 .../components/source-media-page.tsx          |   3 +-
 packages/ui/src/hooks/use-manager-page.ts     |  58 +++++++++-
 packages/ui/src/media-grid-item.tsx           |  27 ++++-
 packages/ui/src/screens/manager-screen.tsx    |  94 ++++++++++++++++
 packages/ui/src/screens/search-screen.tsx     |   2 +
 .../ui/src/screens/source-media-screen.tsx    |   2 +
 packages/ui/src/screens/v2-manager-screen.tsx | 103 +++++++++++++++++
 packages/ui/src/source-media-grid.tsx         | 105 ++++++++++++++++--
 packages/ui/src/thumbnail-image.tsx           |  34 ++++++
 packages/ui/src/thumbnail-source.test.ts      |  51 +++++++++
 packages/ui/src/thumbnail-source.ts           |  19 ++++
 22 files changed, 551 insertions(+), 20 deletions(-)
 create mode 100644 apps/tauri/src/infrastructure/api-clients/thumbnails-api.ts
 create mode 100644 packages/ui/src/thumbnail-source.test.ts

diff --git a/apps/server/src/routes/manager.tsx b/apps/server/src/routes/manager.tsx
index f6d8af91..1537a136 100644
--- a/apps/server/src/routes/manager.tsx
+++ b/apps/server/src/routes/manager.tsx
@@ -36,6 +36,7 @@ import {
 	allProjectsQueryOptions,
 	mediaSourcesQueryOptions,
 } from "~/infrastructure/api-clients/queries";
+import { startThumbnailGeneration } from "~/infrastructure/api-clients/thumbnails";
 import type { RouteLoaderContext } from "~/infrastructure/router/route-types";
 
 const managerQueryOptions = {
@@ -61,6 +62,15 @@ const managerActions = {
 	startBatchCcipExtraction,
 	findDuplicateMedia,
 	bulkDeleteMedia,
+	startThumbnailWarmup: (input: {
+		mediaSourceId: string;
+		missingOnly: true;
+		size: 256;
+	}) =>
+		startThumbnailGeneration(input.mediaSourceId, {
+			missingOnly: input.missingOnly,
+			size: input.size,
+		}),
 };
 
 export const Route = createFileRoute("/manager")({
diff --git a/apps/server/src/routes/search.tsx b/apps/server/src/routes/search.tsx
index 9f72ad77..bda64668 100644
--- a/apps/server/src/routes/search.tsx
+++ b/apps/server/src/routes/search.tsx
@@ -120,7 +120,11 @@ function SearchRoute() {
 			page={page}
 			presetClient={PresetClient}
 			renderMediaItem={(media, options) => (
-				<MediaGridItem media={media} priority={options?.priority} />
+				<MediaGridItem
+					imageLoadPolicy={options?.imageLoadPolicy}
+					media={media}
+					priority={options?.priority}
+				/>
 			)}
 			renderNavActions={({ openMobileFilters }) => (
 				<Button
diff --git a/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx b/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
index 0613b054..7bd79037 100644
--- a/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
+++ b/apps/server/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
@@ -143,6 +143,7 @@ export function SourceMediaPage(
 				onEnterBulkSelectMode={() => setIsBulkSelectMode(true)}
 				renderItem={(media, options) => (
 					<MediaGridItem
+						imageLoadPolicy={options.imageLoadPolicy}
 						media={media}
 						priority={options.priority}
 						routeVersion={props.variant === "v2" ? "v2" : "default"}
@@ -170,6 +171,7 @@ export function SourceMediaPage(
 						height={media.height}
 						loading="eager"
 						media={media}
+						requestedSize={512}
 						width={media.width}
 					/>
 				)}
diff --git a/apps/server/src/routes/v2/manager.tsx b/apps/server/src/routes/v2/manager.tsx
index 978a5a84..5df497ff 100644
--- a/apps/server/src/routes/v2/manager.tsx
+++ b/apps/server/src/routes/v2/manager.tsx
@@ -42,6 +42,7 @@ import {
 	importSourceNdjson,
 	importSourceZip,
 } from "~/infrastructure/api-clients/sources-api";
+import { startThumbnailGeneration } from "~/infrastructure/api-clients/thumbnails";
 
 const managerQueryOptions = {
 	projects: allProjectsQueryOptions,
@@ -66,6 +67,15 @@ const managerActions = {
 	startBatchCcipExtraction,
 	findDuplicateMedia,
 	bulkDeleteMedia,
+	startThumbnailWarmup: (input: {
+		mediaSourceId: string;
+		missingOnly: true;
+		size: 256;
+	}) =>
+		startThumbnailGeneration(input.mediaSourceId, {
+			missingOnly: input.missingOnly,
+			size: input.size,
+		}),
 };
 
 function downloadBlob(blob: Blob, fileName: string): void {
diff --git a/apps/server/src/routes/v2/search.tsx b/apps/server/src/routes/v2/search.tsx
index 84916c2f..ad67e420 100644
--- a/apps/server/src/routes/v2/search.tsx
+++ b/apps/server/src/routes/v2/search.tsx
@@ -90,6 +90,7 @@ function V2SearchRoute() {
 			presetClient={PresetClient}
 			renderMediaItem={(media, options) => (
 				<MediaGridItem
+					imageLoadPolicy={options?.imageLoadPolicy}
 					isSelected={options?.isPreviewSelected}
 					media={media}
 					onPreviewSelect={options?.onPreviewSelect}
@@ -114,6 +115,7 @@ function V2SearchRoute() {
 					height={media.height}
 					loading="eager"
 					media={media}
+					requestedSize={512}
 					width={media.width}
 				/>
 			)}
diff --git a/apps/tauri/src/components/media/media-grid-item.tsx b/apps/tauri/src/components/media/media-grid-item.tsx
index efc6f100..75c1edd6 100644
--- a/apps/tauri/src/components/media/media-grid-item.tsx
+++ b/apps/tauri/src/components/media/media-grid-item.tsx
@@ -1,11 +1,15 @@
 import type { Media } from "@solid-imager/core/domain/media/schemas";
-import { MediaGridItem as SharedMediaGridItem } from "@solid-imager/ui/media-grid-item";
+import {
+	type MediaGridImageLoadPolicy,
+	MediaGridItem as SharedMediaGridItem,
+} from "@solid-imager/ui/media-grid-item";
 import { Link } from "@tanstack/solid-router";
 import { ThumbnailImage } from "./thumbnail-image";
 
 type MediaGridItemProps = {
 	linkPrefix?: string;
 	media: Media;
+	imageLoadPolicy?: MediaGridImageLoadPolicy;
 	onContextMenu?: (event: MouseEvent) => void;
 	priority?: boolean;
 	sourceRootPath?: string;
@@ -30,15 +34,19 @@ export function MediaGridItem(props: MediaGridItemProps) {
 			)}
 			linkPrefix={props.linkPrefix}
 			media={props.media}
+			imageLoadPolicy={props.imageLoadPolicy}
 			onContextMenu={props.onContextMenu}
 			priority={props.priority}
 			renderThumbnail={(thumbnailProps) => (
 				<ThumbnailImage
 					alt={thumbnailProps.alt}
 					class={thumbnailProps.class}
+					enabled={thumbnailProps.enabled}
+					fetchpriority={thumbnailProps.fetchpriority}
 					height={thumbnailProps.height}
 					loading={thumbnailProps.loading}
 					media={thumbnailProps.media}
+					sizes={thumbnailProps.sizes}
 					sourceRootPath={thumbnailProps.sourceRootPath}
 					width={thumbnailProps.width}
 				/>
diff --git a/apps/tauri/src/components/media/thumbnail-image.tsx b/apps/tauri/src/components/media/thumbnail-image.tsx
index 5aacf53c..52f3ad4a 100644
--- a/apps/tauri/src/components/media/thumbnail-image.tsx
+++ b/apps/tauri/src/components/media/thumbnail-image.tsx
@@ -6,18 +6,23 @@ import {
 import {
 	type BuildThumbnailUrlArgs,
 	createHttpThumbnailSource,
+	type ThumbnailRequestSize,
 } from "@solid-imager/ui/thumbnail-source";
 import { buildThumbnailUrl } from "~/infrastructure/media/thumbnail-runtime";
 
 type ThumbnailImageProps = {
 	alt: string;
 	class?: string;
+	enabled?: boolean;
 	fallback?: string;
+	fetchpriority?: "high" | "low" | "auto";
 	height?: number | null;
 	loading?: "eager" | "lazy";
 	maxRetries?: number;
 	media: MediaSafe;
 	retryDelayMs?: number;
+	requestedSize?: ThumbnailRequestSize;
+	sizes?: string;
 	sourceRootPath?: string;
 	width?: number | null;
 };
@@ -29,18 +34,23 @@ function buildUrl(args: BuildThumbnailUrlArgs): string {
 export function ThumbnailImage(props: ThumbnailImageProps) {
 	const source = createHttpThumbnailSource({
 		buildUrl,
+		defaultSize: props.requestedSize ?? (props.sizes ? 512 : undefined),
 		maxRetries: props.maxRetries,
 		mediaId: props.media.id,
 		mediaSourceId: props.media.mediaSourceId,
 		modifiedAt: props.media.modifiedAt,
+		responsiveSizes: props.sizes ? [256, 512] : undefined,
 		retryDelayMs: props.retryDelayMs,
 	});
 	const sharedProps: SharedThumbnailImageProps = {
 		alt: props.alt,
 		class: props.class,
+		enabled: props.enabled,
 		fallback: props.fallback,
+		fetchpriority: props.fetchpriority,
 		height: props.height,
 		loading: props.loading,
+		sizes: props.sizes,
 		source,
 		width: props.width,
 	};
diff --git a/apps/tauri/src/infrastructure/api-clients/thumbnails-api.ts b/apps/tauri/src/infrastructure/api-clients/thumbnails-api.ts
new file mode 100644
index 00000000..7e624e12
--- /dev/null
+++ b/apps/tauri/src/infrastructure/api-clients/thumbnails-api.ts
@@ -0,0 +1,13 @@
+import { orpc } from "~/infrastructure/api-clients/orpc-client";
+
+export function startThumbnailWarmup(input: {
+	mediaSourceId: string;
+	missingOnly: true;
+	size: 256;
+}) {
+	return orpc.thumbnails.generate({
+		sourceId: input.mediaSourceId,
+		missingOnly: input.missingOnly,
+		size: input.size,
+	});
+}
diff --git a/apps/tauri/src/infrastructure/media/thumbnail-runtime.ts b/apps/tauri/src/infrastructure/media/thumbnail-runtime.ts
index dc6b68bd..db5b6484 100644
--- a/apps/tauri/src/infrastructure/media/thumbnail-runtime.ts
+++ b/apps/tauri/src/infrastructure/media/thumbnail-runtime.ts
@@ -11,11 +11,16 @@ export function buildThumbnailUrl(args: {
 	cacheKey: number;
 	mediaId: string;
 	mediaSourceId: string;
+	size?: 256 | 512;
 }): string {
 	const base = buildAbsoluteUrl(
 		`/api/sources/${args.mediaSourceId}/thumbnail/${args.mediaId}`,
 	);
-	return args.cacheKey ? `${base}?t=${args.cacheKey}` : base;
+	const query = new URLSearchParams();
+	if (args.size) query.set("size", String(args.size));
+	if (args.cacheKey) query.set("t", String(args.cacheKey));
+	const search = query.toString();
+	return search ? `${base}?${search}` : base;
 }
 
 export function buildMediaContentUrl(
diff --git a/apps/tauri/src/routes/manager.tsx b/apps/tauri/src/routes/manager.tsx
index b83ed67b..c1043d51 100644
--- a/apps/tauri/src/routes/manager.tsx
+++ b/apps/tauri/src/routes/manager.tsx
@@ -31,6 +31,7 @@ import {
 	deleteProject,
 	updateProject,
 } from "~/infrastructure/api-clients/projects-api";
+import { startThumbnailWarmup } from "~/infrastructure/api-clients/thumbnails-api";
 import {
 	allCharactersQueryOptions,
 	allIpsQueryOptions,
@@ -61,6 +62,7 @@ const managerActions = {
 	startBatchCcipExtraction,
 	findDuplicateMedia,
 	bulkDeleteMedia,
+	startThumbnailWarmup,
 };
 
 export const Route = createFileRoute("/manager")({
diff --git a/apps/tauri/src/routes/search.tsx b/apps/tauri/src/routes/search.tsx
index d2e9e052..82a9b738 100644
--- a/apps/tauri/src/routes/search.tsx
+++ b/apps/tauri/src/routes/search.tsx
@@ -88,6 +88,7 @@ function SearchRoute() {
 			presetClient={PresetClient}
 			renderMediaItem={(media, options) => (
 				<MediaGridItem
+					imageLoadPolicy={options?.imageLoadPolicy}
 					media={media}
 					priority={options?.priority}
 					sourceRootPath={page.getSourceRootPath(media.mediaSourceId)}
diff --git a/apps/tauri/src/routes/sources/$mediaSourceId/components/source-media-page.tsx b/apps/tauri/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
index 517cecc7..44faeb41 100644
--- a/apps/tauri/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
+++ b/apps/tauri/src/routes/sources/$mediaSourceId/components/source-media-page.tsx
@@ -78,8 +78,9 @@ export function SourceMediaPage() {
 			ipsQueryOptions={allIpsQueryOptions}
 			charactersQueryOptions={allCharactersQueryOptions}
 			authorsQueryOptions={allAuthorsQueryOptions}
-			renderItem={(media, { onContextMenu, priority }) => (
+			renderItem={(media, { imageLoadPolicy, onContextMenu, priority }) => (
 				<MediaGridItem
+					imageLoadPolicy={imageLoadPolicy}
 					media={media}
 					onContextMenu={onContextMenu}
 					priority={priority}
diff --git a/packages/ui/src/hooks/use-manager-page.ts b/packages/ui/src/hooks/use-manager-page.ts
index b16af346..0c233f9e 100644
--- a/packages/ui/src/hooks/use-manager-page.ts
+++ b/packages/ui/src/hooks/use-manager-page.ts
@@ -27,6 +27,7 @@ export type ManagerEntityType =
 	| "characters"
 	| "tagging"
 	| "vectors"
+	| "thumbnails"
 	| "duplicates";
 export type ManagerEntity = Project | Ip | Character;
 
@@ -36,12 +37,14 @@ export type ManagerFormData = {
 	ipIds?: string[];
 };
 
-export type StartBatchTaggingResult = {
+export type StartBatchJobResult = {
 	success: boolean;
 	jobId?: string;
 	message: string;
 };
 
+export type StartBatchTaggingResult = StartBatchJobResult;
+
 export type ManagerPageQueries = {
 	projects: Accessor<Project[] | undefined>;
 	ips: Accessor<Ip[] | undefined>;
@@ -81,13 +84,16 @@ export type ManagerPageActions = {
 		force: boolean;
 		mediaSourceId?: string;
 	}) => Promise<StartBatchTaggingResult>;
+	startThumbnailWarmup: (input: {
+		mediaSourceId: string;
+		missingOnly: true;
+		size: 256;
+	}) => Promise<StartBatchJobResult>;
 	findDuplicateMedia: (
 		mediaSourceId?: string,
 	) => Promise<{ groups: DuplicateGroup[] }>;
 	bulkDeleteMedia: (sourceId: string, mediaIds: string[]) => Promise<unknown>;
-	invalidate: (
-		entityType: Exclude<ManagerEntityType, "tagging" | "vectors">,
-	) => void;
+	invalidate: (entityType: "projects" | "ips" | "characters") => void;
 };
 
 export type ManagerPageMutationActions = Omit<ManagerPageActions, "invalidate">;
@@ -173,6 +179,7 @@ export type UseManagerPageResult = {
 	handleScan: () => Promise<void>;
 	handleStartBatchTagging: () => Promise<void>;
 	handleStartBatchCcipExtraction: () => Promise<void>;
+	handleStartThumbnailWarmup: () => Promise<void>;
 	jobHandlers: ManagerJobHandlers;
 	// Duplicates tab
 	duplicateSourceId: Accessor<string | undefined>;
@@ -208,9 +215,13 @@ function resetForm(setFormData: Setter<ManagerFormData>) {
 
 function activeCrudTab(
 	activeTab: ManagerEntityType,
-): Exclude<ManagerEntityType, "tagging" | "vectors" | "duplicates"> | null {
+): Exclude<
+	ManagerEntityType,
+	"tagging" | "vectors" | "thumbnails" | "duplicates"
+> | null {
 	return activeTab === "tagging" ||
 		activeTab === "vectors" ||
+		activeTab === "thumbnails" ||
 		activeTab === "duplicates"
 		? null
 		: activeTab;
@@ -277,7 +288,7 @@ export function useManagerPage(
 
 	createEffect(() => {
 		const tab = activeTab();
-		if (tab !== "tagging" && tab !== "vectors") {
+		if (tab !== "tagging" && tab !== "vectors" && tab !== "thumbnails") {
 			return;
 		}
 
@@ -510,6 +521,40 @@ export function useManagerPage(
 		}
 	};
 
+	const handleStartThumbnailWarmup = async () => {
+		const mediaSourceId = selectedSourceId();
+		if (!mediaSourceId) {
+			toast.error("Select a media source first.");
+			return;
+		}
+
+		try {
+			setTaggingStatus("Scanning for missing 256px thumbnails...");
+			setJobProgress(null);
+			const result = await actions.startThumbnailWarmup({
+				mediaSourceId,
+				missingOnly: true,
+				size: 256,
+			});
+			if (result.success && result.jobId) {
+				toast.success(result.message);
+				setTaggingStatus("Thumbnail warmup in progress...");
+				setActiveJobId(result.jobId);
+				return;
+			}
+			if (result.success) {
+				toast.success(result.message);
+				setTaggingStatus(result.message);
+				return;
+			}
+			toast.error(result.message || "Failed to start thumbnail warmup.");
+			setTaggingStatus(result.message || "Failed to start thumbnail warmup.");
+		} catch (error) {
+			toast.error(`Error: ${getErrorMessage(error)}`);
+			setTaggingStatus(`Error: ${getErrorMessage(error)}`);
+		}
+	};
+
 	// --- Duplicates ---
 
 	const setKeepForGroup = (_groupId: string, mediaId: string) => {
@@ -748,6 +793,7 @@ export function useManagerPage(
 		handleScan,
 		handleStartBatchTagging,
 		handleStartBatchCcipExtraction,
+		handleStartThumbnailWarmup,
 		jobHandlers,
 		// Duplicates
 		duplicateSourceId,
diff --git a/packages/ui/src/media-grid-item.tsx b/packages/ui/src/media-grid-item.tsx
index 12c400d6..454f0a37 100644
--- a/packages/ui/src/media-grid-item.tsx
+++ b/packages/ui/src/media-grid-item.tsx
@@ -3,12 +3,24 @@ import type { JSX } from "solid-js";
 import { Show } from "solid-js";
 import { cn } from "./utils/cn";
 
+export const V2_MEDIA_GRID_IMAGE_SIZES =
+	"(min-width: 1536px) 12vw, (min-width: 1120px) 14vw, (min-width: 960px) 17vw, (min-width: 640px) 25vw, 50vw";
+
+export type MediaGridImageLoadPolicy = {
+	enabled?: boolean;
+	fetchpriority?: "high" | "low" | "auto";
+	loading?: "eager" | "lazy";
+};
+
 export type MediaGridThumbnailProps = {
 	alt: string;
 	class: string;
+	enabled?: boolean;
+	fetchpriority?: "high" | "low" | "auto";
 	height?: number | null;
 	loading: "eager" | "lazy";
 	media: Media;
+	sizes?: string;
 	sourceRootPath?: string;
 	width?: number | null;
 };
@@ -26,6 +38,7 @@ export type MediaGridLinkProps = {
 type MediaGridItemProps = {
 	variant?: "default" | "v2";
 	media: Media;
+	imageLoadPolicy?: MediaGridImageLoadPolicy;
 	linkPrefix?: string;
 	priority?: boolean;
 	sourceRootPath?: string;
@@ -104,8 +117,20 @@ export function MediaGridItem(props: MediaGridItemProps) {
 						props.thumbnailClass,
 					),
 					height: props.media.height,
-					loading: props.priority ? "eager" : "lazy",
+					get enabled() {
+						return props.imageLoadPolicy?.enabled;
+					},
+					get fetchpriority() {
+						return props.imageLoadPolicy?.fetchpriority;
+					},
+					get loading() {
+						return (
+							props.imageLoadPolicy?.loading ??
+							(props.priority ? "eager" : "lazy")
+						);
+					},
 					media: props.media,
+					sizes: props.variant === "v2" ? V2_MEDIA_GRID_IMAGE_SIZES : undefined,
 					sourceRootPath: props.sourceRootPath,
 					width: props.media.width,
 				})}
diff --git a/packages/ui/src/screens/manager-screen.tsx b/packages/ui/src/screens/manager-screen.tsx
index 596fce04..4b52c1c4 100644
--- a/packages/ui/src/screens/manager-screen.tsx
+++ b/packages/ui/src/screens/manager-screen.tsx
@@ -78,6 +78,7 @@ const managerTabs: ManagerEntityType[] = [
 	"characters",
 	"tagging",
 	"vectors",
+	"thumbnails",
 	"duplicates",
 ];
 
@@ -88,6 +89,9 @@ function tabLabel(tab: ManagerEntityType) {
 	if (tab === "vectors") {
 		return "Vector Extraction";
 	}
+	if (tab === "thumbnails") {
+		return "Thumbnails";
+	}
 	if (tab === "ips") {
 		return "IPs";
 	}
@@ -358,6 +362,96 @@ export function ManagerScreen(props: ManagerScreenProps) {
 				</div>
 			</Show>
 
+			<Show
+				when={manager().activeTab() === "thumbnails" && canRenderActiveTab()}
+			>
+				<Card>
+					<CardHeader>
+						<CardTitle>Thumbnail Warmup</CardTitle>
+						<CardDescription>
+							Generate only missing 256px thumbnails used by dense media grids.
+						</CardDescription>
+					</CardHeader>
+					<CardContent class="space-y-4">
+						<div class="grid gap-2">
+							<Label>Target Media Source</Label>
+							<Select
+								itemComponent={(selectProps) => (
+									<SelectItem item={selectProps.item}>
+										{selectProps.item.rawValue.name}
+									</SelectItem>
+								)}
+								onChange={(value) => manager().setSelectedSourceId(value?.id)}
+								options={manager().sources()}
+								optionTextValue="name"
+								optionValue="id"
+								placeholder="Select source"
+								value={
+									manager().selectedSourceId()
+										? manager()
+												.sources()
+												.find(
+													(source) =>
+														source.id === manager().selectedSourceId(),
+												)
+										: null
+								}
+							>
+								<SelectTrigger>
+									<SelectValue<unknown>>
+										{(state) => {
+											const option = state.selectedOption();
+											return option &&
+												typeof option === "object" &&
+												"name" in option
+												? (option as { name: string }).name
+												: "Select source";
+										}}
+									</SelectValue>
+								</SelectTrigger>
+								<SelectContent />
+							</Select>
+							<p class="text-muted-foreground text-xs">
+								Existing 512px previews are preserved. Only missing 256px
+								variants are queued.
+							</p>
+						</div>
+						<Button
+							disabled={
+								!!manager().activeJobId() || !manager().selectedSourceId()
+							}
+							onClick={() => void manager().handleStartThumbnailWarmup()}
+						>
+							Warm Missing Thumbnails
+						</Button>
+						<Show when={manager().taggingStatus()}>
+							<div class="break-words rounded bg-gray-100 p-2 text-sm">
+								{manager().taggingStatus()}
+							</div>
+						</Show>
+						<Show when={manager().jobProgress()}>
+							{(progress) => (
+								<div class="space-y-2" role="status">
+									<div class="flex justify-between text-muted-foreground text-sm">
+										<span>Batch progress</span>
+										<span>
+											{progress().processed} / {progress().total}
+										</span>
+									</div>
+									<Progress
+										value={
+											progress().total > 0
+												? (progress().processed / progress().total) * 100
+												: 0
+										}
+									/>
+								</div>
+							)}
+						</Show>
+					</CardContent>
+				</Card>
+			</Show>
+
 			<Show
 				when={manager().activeTab() === "duplicates" && canRenderActiveTab()}
 			>
diff --git a/packages/ui/src/screens/search-screen.tsx b/packages/ui/src/screens/search-screen.tsx
index 9c71d05d..7b318256 100644
--- a/packages/ui/src/screens/search-screen.tsx
+++ b/packages/ui/src/screens/search-screen.tsx
@@ -10,6 +10,7 @@ import type {
 	UseSearchPageResult,
 } from "../hooks/use-search-page";
 import type { SourceMediaPagePresetClient } from "../hooks/use-source-media-page";
+import type { MediaGridImageLoadPolicy } from "../media-grid-item";
 import { MobileSearchFilterDialog } from "../mobile-search-filter-dialog";
 import { SearchControlPanel } from "../search-control-panel";
 import { LoadingRegion, MediaGridSkeleton } from "../skeleton";
@@ -32,6 +33,7 @@ export type SearchScreenProps = {
 	renderMediaItem: (
 		media: Media,
 		options?: {
+			imageLoadPolicy?: MediaGridImageLoadPolicy;
 			onPreviewSelect?: () => void;
 			isPreviewSelected?: boolean;
 			priority?: boolean;
diff --git a/packages/ui/src/screens/source-media-screen.tsx b/packages/ui/src/screens/source-media-screen.tsx
index 847c6c04..f0c772ad 100644
--- a/packages/ui/src/screens/source-media-screen.tsx
+++ b/packages/ui/src/screens/source-media-screen.tsx
@@ -17,6 +17,7 @@ import type {
 	UploadOptions,
 	UseSourceMediaPageResult,
 } from "../hooks/use-source-media-page";
+import type { MediaGridImageLoadPolicy } from "../media-grid-item";
 import { MobileSearchFilterDialog } from "../mobile-search-filter-dialog";
 import { SearchControlPanel } from "../search-control-panel";
 import { LoadingRegion, MediaGridSkeleton } from "../skeleton";
@@ -33,6 +34,7 @@ export type SourceMediaScreenProps = {
 	renderItem: (
 		media: Media,
 		options: {
+			imageLoadPolicy?: MediaGridImageLoadPolicy;
 			onContextMenu: () => void;
 			priority?: boolean;
 			isBulkSelectMode?: boolean;
diff --git a/packages/ui/src/screens/v2-manager-screen.tsx b/packages/ui/src/screens/v2-manager-screen.tsx
index 5450337b..c9c13999 100644
--- a/packages/ui/src/screens/v2-manager-screen.tsx
+++ b/packages/ui/src/screens/v2-manager-screen.tsx
@@ -127,6 +127,12 @@ const MANAGER_CATEGORIES: ManagerCategory[] = [
 		label: "Vector extraction",
 		value: "vectors",
 	},
+	{
+		description: "Warm responsive image cache",
+		group: "Tools",
+		label: "Thumbnails",
+		value: "thumbnails",
+	},
 	{
 		description: "Review matching media",
 		group: "Tools",
@@ -201,6 +207,8 @@ function ManagerCategoryIcon(props: { value: V2ManagerCategory }) {
 			return <Bot aria-hidden="true" size={16} />;
 		case "vectors":
 			return <Share2 aria-hidden="true" size={16} />;
+		case "thumbnails":
+			return <Image aria-hidden="true" size={16} />;
 		case "duplicates":
 			return <CopyCheck aria-hidden="true" size={16} />;
 		case "transfer":
@@ -761,6 +769,98 @@ function BatchToolPanel(props: {
 	);
 }
 
+function ThumbnailWarmupPanel(props: { manager: UseManagerPageResult }) {
+	const [isStarting, setIsStarting] = createSignal(false);
+	const startWarmup = async () => {
+		if (isStarting() || props.manager.activeJobId()) return;
+		setIsStarting(true);
+		try {
+			await props.manager.handleStartThumbnailWarmup();
+		} finally {
+			setIsStarting(false);
+		}
+	};
+
+	return (
+		<div class="space-y-5">
+			<div>
+				<h2 class="font-semibold text-lg text-[var(--v2-text)]">
+					Thumbnail warmup
+				</h2>
+				<p class="mt-0.5 text-xs text-[var(--v2-text-muted)]">
+					Generate missing 256px grid thumbnails without replacing existing
+					512px previews.
+				</p>
+			</div>
+
+			<section class="border-[var(--v2-border)] border-y bg-[var(--v2-surface)] py-4 sm:rounded-md sm:border sm:p-4">
+				<div class="space-y-1.5">
+					<Label>Target source</Label>
+					<SourceSelect
+						manager={props.manager}
+						onChange={props.manager.setSelectedSourceId}
+						value={props.manager.selectedSourceId()}
+					/>
+					<p class="text-xs text-[var(--v2-text-muted)]">
+						Only missing 256px variants are queued. Select one source to keep
+						the operation bounded.
+					</p>
+				</div>
+				<div class="mt-4 flex justify-end border-[var(--v2-border)] border-t pt-4">
+					<Button
+						class="w-full sm:w-auto"
+						disabled={
+							isStarting() ||
+							!!props.manager.activeJobId() ||
+							!props.manager.selectedSourceId()
+						}
+						onClick={() => void startWarmup()}
+					>
+						{isStarting() ? "Submitting..." : "Warm missing thumbnails"}
+					</Button>
+				</div>
+			</section>
+
+			<Show when={props.manager.taggingStatus() || props.manager.jobProgress()}>
+				<section
+					aria-live="polite"
+					class="space-y-3 rounded-md border border-[var(--v2-border)] bg-[var(--v2-surface)] p-4"
+				>
+					<div class="flex flex-wrap items-center justify-between gap-2">
+						<h3 class="font-medium text-sm">Current run</h3>
+						<Badge variant="secondary">
+							{props.manager.activeJobId() ? "Running" : "Status"}
+						</Badge>
+					</div>
+					<p class="text-xs text-[var(--v2-text-secondary)]">
+						{props.manager.taggingStatus()}
+					</p>
+					<Show when={props.manager.jobProgress()}>
+						{(progress) => (
+							<div class="space-y-2">
+								<div class="flex justify-between text-xs text-[var(--v2-text-muted)]">
+									<span>Progress</span>
+									<span>
+										{progress().processed} / {progress().total}
+									</span>
+								</div>
+								<Progress
+									class="h-2"
+									value={
+										progress().total > 0
+											? (progress().processed / progress().total) * 100
+											: 0
+									}
+								/>
+							</div>
+						)}
+					</Show>
+				</section>
+			</Show>
+		</div>
+	);
+}
+
 function DuplicateToolPanel(props: { manager: UseManagerPageResult }) {
 	const [isScanning, setIsScanning] = createSignal(false);
 	const scan = async () => {
@@ -1572,6 +1672,9 @@ export function V2ManagerScreen(props: {
 								<Match when={activeCategory() === "vectors"}>
 									<BatchToolPanel kind="vectors" manager={props.manager} />
 								</Match>
+								<Match when={activeCategory() === "thumbnails"}>
+									<ThumbnailWarmupPanel manager={props.manager} />
+								</Match>
 								<Match when={activeCategory() === "duplicates"}>
 									<DuplicateToolPanel manager={props.manager} />
 								</Match>
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index 52bc0122..90ab2969 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -25,6 +25,7 @@ import {
 	ContextMenuSeparator,
 	ContextMenuTrigger,
 } from "./context-menu";
+import type { MediaGridImageLoadPolicy } from "./media-grid-item";
 import type { QueryUiState } from "./query-state";
 import {
 	getMediaGridColumnCount,
@@ -36,9 +37,10 @@ import {
 const VIRTUALIZATION_THRESHOLD = 100;
 const GRID_GAP_PX = 12;
 const WINDOW_VIRTUAL_ROWS_OVERSCAN = 4;
-const ELEMENT_TRAILING_ROWS = 3;
-const ELEMENT_LEADING_ROWS = 8;
+const ELEMENT_PREFETCH_ROWS = 3;
+const ELEMENT_RETAIN_ROWS = 4;
 const INITIAL_PRIORITY_ROWS = 2;
+const INITIAL_HIGH_PRIORITY_MEDIA = 2;
 const INITIAL_SKELETON_ROWS = 3;
 
 type ScrollDirection = "backward" | "forward" | null;
@@ -48,9 +50,9 @@ function extractDirectionalRows(
 	direction: ScrollDirection,
 ): number[] {
 	const rowsBefore =
-		direction === "backward" ? ELEMENT_LEADING_ROWS : ELEMENT_TRAILING_ROWS;
+		direction === "backward" ? ELEMENT_PREFETCH_ROWS : ELEMENT_RETAIN_ROWS;
 	const rowsAfter =
-		direction === "backward" ? ELEMENT_TRAILING_ROWS : ELEMENT_LEADING_ROWS;
+		direction === "backward" ? ELEMENT_RETAIN_ROWS : ELEMENT_PREFETCH_ROWS;
 	const start = Math.max(range.startIndex - rowsBefore, 0);
 	const end = Math.min(range.endIndex + rowsAfter, range.count - 1);
 
@@ -89,6 +91,7 @@ type SourceMediaGridProps = {
 	renderItem: (
 		media: Media,
 		options: {
+			imageLoadPolicy?: MediaGridImageLoadPolicy;
 			onContextMenu: () => void;
 			priority?: boolean;
 			isBulkSelectMode?: boolean;
@@ -132,6 +135,11 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		null,
 	);
 	const [scrollMargin, setScrollMargin] = createSignal(0);
+	const [elementLoadState, setElementLoadState] = createSignal<{
+		direction: ScrollDirection;
+		endIndex: number;
+		startIndex: number;
+	} | null>(null);
 	let mediaGridRef: HTMLDivElement | undefined;
 
 	const columnCount = createMemo(() => {
@@ -189,6 +197,18 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		gap: GRID_GAP_PX,
 		getItemKey: (index) => index,
 		overscan: 0,
+		onChange: (instance) => {
+			const range = instance.range;
+			setElementLoadState(
+				range
+					? {
+							direction: instance.scrollDirection,
+							endIndex: range.endIndex,
+							startIndex: range.startIndex,
+						}
+					: null,
+			);
+		},
 		rangeExtractor: (range) =>
 			extractDirectionalRows(
 				range,
@@ -218,6 +238,52 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 	const initialPriorityMediaCount = createMemo(() =>
 		Math.max(columnCount() * INITIAL_PRIORITY_ROWS, 1),
 	);
+	const resolveElementImageLoadPolicy = (
+		rowIndex: number,
+		mediaIndex: number,
+	): MediaGridImageLoadPolicy => {
+		const state = elementLoadState();
+		if (!state) {
+			return { enabled: false };
+		}
+
+		const isVisible =
+			rowIndex >= state.startIndex && rowIndex <= state.endIndex;
+		const isForwardPrefetch =
+			state.direction !== "backward" &&
+			rowIndex > state.endIndex &&
+			rowIndex <= state.endIndex + ELEMENT_PREFETCH_ROWS;
+		const isBackwardPrefetch =
+			state.direction === "backward" &&
+			rowIndex < state.startIndex &&
+			rowIndex >= state.startIndex - ELEMENT_PREFETCH_ROWS;
+		const isPrefetch = isForwardPrefetch || isBackwardPrefetch;
+
+		return {
+			enabled: isVisible || isPrefetch,
+			fetchpriority:
+				isVisible && mediaIndex < INITIAL_HIGH_PRIORITY_MEDIA
+					? "high"
+					: isPrefetch
+						? "low"
+						: undefined,
+			loading: isVisible || isPrefetch ? "eager" : "lazy",
+		};
+	};
+	const createElementImageLoadPolicy = (
+		rowIndex: number,
+		mediaIndex: number,
+	): MediaGridImageLoadPolicy => ({
+		get enabled() {
+			return resolveElementImageLoadPolicy(rowIndex, mediaIndex).enabled;
+		},
+		get fetchpriority() {
+			return resolveElementImageLoadPolicy(rowIndex, mediaIndex).fetchpriority;
+		},
+		get loading() {
+			return resolveElementImageLoadPolicy(rowIndex, mediaIndex).loading;
+		},
+	});
 
 	const updateMediaGridMetrics = () => {
 		if (!mediaGridRef) return;
@@ -322,6 +388,20 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 							<For each={props.mediaResults()}>
 								{(media, index) =>
 									props.renderItem(media, {
+										imageLoadPolicy:
+											props.scrollMode === "element"
+												? {
+														enabled: true,
+														fetchpriority:
+															index() < INITIAL_HIGH_PRIORITY_MEDIA
+																? "high"
+																: undefined,
+														loading:
+															index() < INITIAL_HIGH_PRIORITY_MEDIA
+																? "eager"
+																: "lazy",
+													}
+												: undefined,
 										onContextMenu: onContextMenuHandler(media.id),
 										priority: index() < initialPriorityMediaCount(),
 										get isBulkSelectMode() {
@@ -359,14 +439,21 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 								}}
 							>
 								<For each={rowMedia()}>
-									{(media) =>
+									{(media, mediaIndexInRow) =>
 										props.renderItem(media, {
+											imageLoadPolicy:
+												props.scrollMode === "element"
+													? createElementImageLoadPolicy(
+															virtualRow.index,
+															virtualRow.index * columnCount() +
+																mediaIndexInRow(),
+														)
+													: undefined,
 											onContextMenu: onContextMenuHandler(media.id),
-											// Native lazy loading can leave transformed rows blank in a
-											// nested scroller. Element virtualization already keeps only
-											// the visible row and one row of overscan mounted.
+											// Window virtualization keeps its established native lazy-loading
+											// behavior. Element mode supplies a separate direction-aware policy.
 											priority:
-												props.scrollMode === "element" ||
+												props.scrollMode !== "element" &&
 												virtualRow.index < INITIAL_PRIORITY_ROWS,
 											get isBulkSelectMode() {
 												return props.isBulkSelectMode?.();
diff --git a/packages/ui/src/thumbnail-image.tsx b/packages/ui/src/thumbnail-image.tsx
index 7b69a465..d4122a52 100644
--- a/packages/ui/src/thumbnail-image.tsx
+++ b/packages/ui/src/thumbnail-image.tsx
@@ -2,6 +2,7 @@ import { createEffect, createSignal, onCleanup, Show } from "solid-js";
 
 export interface ThumbnailSource {
 	getUrl(): string | Promise<string>;
+	getSrcSet?(): string | undefined | Promise<string | undefined>;
 	onError?(): void;
 	onLoad?(): void;
 	subscribe?(callback: () => void): () => void;
@@ -10,19 +11,33 @@ export interface ThumbnailSource {
 export interface ThumbnailImageProps {
 	alt: string;
 	class?: string;
+	enabled?: boolean;
 	fallback?: string;
+	fetchpriority?: "high" | "low" | "auto";
 	height?: number | null;
 	loading?: "eager" | "lazy";
+	sizes?: string;
 	source: ThumbnailSource;
 	width?: number | null;
 }
 
 export function ThumbnailImage(props: ThumbnailImageProps) {
 	const [url, setUrl] = createSignal<string | null>(null);
+	const [srcSet, setSrcSet] = createSignal<string | undefined>();
 	const [error, setError] = createSignal(false);
+	let previousSource: ThumbnailSource | undefined;
 
 	createEffect(() => {
 		const source = props.source;
+		if (source !== previousSource) {
+			previousSource = source;
+			setUrl(null);
+			setSrcSet(undefined);
+			setError(false);
+		}
+		if (props.enabled === false) {
+			return;
+		}
 		setError(false);
 		let cancelled = false;
 
@@ -52,12 +67,28 @@ export function ThumbnailImage(props: ThumbnailImageProps) {
 				}
 			}
 		};
+		const loadSrcSet = () => {
+			try {
+				const resolved = source.getSrcSet?.();
+				if (typeof resolved === "string" || resolved === undefined) {
+					if (!cancelled) setSrcSet(resolved);
+					return;
+				}
+				void resolved.then((value) => {
+					if (!cancelled) setSrcSet(value);
+				});
+			} catch {
+				if (!cancelled) setSrcSet(undefined);
+			}
+		};
 
 		load();
+		loadSrcSet();
 
 		const unsubscribe = source.subscribe?.(() => {
 			setError(false);
 			load();
+			loadSrcSet();
 		});
 
 		onCleanup(() => {
@@ -101,11 +132,14 @@ export function ThumbnailImage(props: ThumbnailImageProps) {
 				<img
 					alt={props.alt}
 					class={props.class}
+					fetchpriority={props.fetchpriority}
 					height={props.height ?? undefined}
 					loading={props.loading}
 					onError={handleError}
 					onLoad={handleLoad}
+					sizes={srcSet() ? props.sizes : undefined}
 					src={resolvedUrl()}
+					srcset={srcSet()}
 					width={props.width ?? undefined}
 				/>
 			)}
diff --git a/packages/ui/src/thumbnail-source.test.ts b/packages/ui/src/thumbnail-source.test.ts
new file mode 100644
index 00000000..d6a32a90
--- /dev/null
+++ b/packages/ui/src/thumbnail-source.test.ts
@@ -0,0 +1,51 @@
+import { createRoot } from "solid-js";
+import { describe, expect, it } from "vitest";
+import {
+	type BuildThumbnailUrlArgs,
+	createHttpThumbnailSource,
+} from "./thumbnail-source";
+
+function buildUrl(args: BuildThumbnailUrlArgs) {
+	const query = new URLSearchParams();
+	if (args.size) query.set("size", String(args.size));
+	query.set("t", String(args.cacheKey));
+	return `/thumbnail/${args.mediaId}?${query.toString()}`;
+}
+
+describe("createHttpThumbnailSource", () => {
+	it("builds a 512px fallback and responsive 256/512 candidates", () => {
+		createRoot((dispose) => {
+			const modifiedAt = "2026-08-02T00:00:00.000Z";
+			const cacheKey = new Date(modifiedAt).getTime();
+			const source = createHttpThumbnailSource({
+				buildUrl,
+				defaultSize: 512,
+				mediaId: "media-1",
+				mediaSourceId: "source-1",
+				modifiedAt,
+				responsiveSizes: [256, 512],
+			});
+
+			expect(source.getUrl()).toContain("size=512");
+			expect(source.getSrcSet?.()).toBe(
+				`${buildUrl({ cacheKey, mediaId: "media-1", mediaSourceId: "source-1", size: 256 })} 256w, ${buildUrl({ cacheKey, mediaId: "media-1", mediaSourceId: "source-1", size: 512 })} 512w`,
+			);
+			dispose();
+		});
+	});
+
+	it("keeps the legacy URL when no requested size is provided", () => {
+		createRoot((dispose) => {
+			const source = createHttpThumbnailSource({
+				buildUrl,
+				mediaId: "media-1",
+				mediaSourceId: "source-1",
+				modifiedAt: "2026-08-02T00:00:00.000Z",
+			});
+
+			expect(source.getUrl()).not.toContain("size=");
+			expect(source.getSrcSet?.()).toBeUndefined();
+			dispose();
+		});
+	});
+});
diff --git a/packages/ui/src/thumbnail-source.ts b/packages/ui/src/thumbnail-source.ts
index f8bc4392..3e5bf17e 100644
--- a/packages/ui/src/thumbnail-source.ts
+++ b/packages/ui/src/thumbnail-source.ts
@@ -22,14 +22,19 @@ export type BuildThumbnailUrlArgs = {
 	cacheKey: number;
 	mediaId: string;
 	mediaSourceId: string;
+	size?: ThumbnailRequestSize;
 };
 
+export type ThumbnailRequestSize = 256 | 512;
+
 export type CreateHttpThumbnailSourceProps = {
 	buildUrl: (args: BuildThumbnailUrlArgs) => string;
+	defaultSize?: ThumbnailRequestSize;
 	maxRetries?: number;
 	mediaId: string;
 	mediaSourceId: string;
 	modifiedAt: Date | string;
+	responsiveSizes?: readonly ThumbnailRequestSize[];
 	retryDelayMs?: number;
 };
 
@@ -108,8 +113,22 @@ export function createHttpThumbnailSource(
 				cacheKey: cacheKey(),
 				mediaId: props.mediaId,
 				mediaSourceId: props.mediaSourceId,
+				size: props.defaultSize,
 			});
 		},
+		getSrcSet() {
+			return props.responsiveSizes
+				?.map(
+					(size) =>
+						`${props.buildUrl({
+							cacheKey: cacheKey(),
+							mediaId: props.mediaId,
+							mediaSourceId: props.mediaSourceId,
+							size,
+						})} ${size}w`,
+				)
+				.join(", ");
+		},
 		onLoad() {
 			clearRetryTimer();
 		},

From 3f6acacd0a3a3169001dbb89d3cf1e22f3571492 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 16:55:16 +0900
Subject: [PATCH 10/12] test(perf): cover large gallery scrolling and thumbnail
 selection

---
 .../tests/e2e/ui-components.gallery.spec.ts   | 232 +++++++++++++-----
 apps/server/src/tests/e2e/ui-gallery/src.tsx  |  24 +-
 .../src/tests/e2e/ui-gallery/vite.config.ts   |  75 +++++-
 .../services/job-dispatch-service.test.ts     |  18 ++
 .../infrastructure/jobs/job-worker.test.ts    |  62 ++++-
 5 files changed, 333 insertions(+), 78 deletions(-)

diff --git a/apps/server/src/tests/e2e/ui-components.gallery.spec.ts b/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
index 3e2be782..98fffe76 100644
--- a/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
+++ b/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, type Locator, test } from "@playwright/test";
 
 function getGalleryUrl(): string {
 	const port = process.env.E2E_GALLERY_PORT;
@@ -8,6 +8,50 @@ function getGalleryUrl(): string {
 	return `http://127.0.0.1:${port}`;
 }
 
+async function expectVisibleImagesLoaded(scroller: Locator): Promise<void> {
+	await expect
+		.poll(() =>
+			scroller.evaluate((element) => {
+				const scrollerRect = element.getBoundingClientRect();
+				const visibleImages = [
+					...element.querySelectorAll<HTMLImageElement>("[data-media-id] img"),
+				].filter((image) => {
+					const rect = image.getBoundingClientRect();
+					return (
+						rect.bottom > scrollerRect.top && rect.top < scrollerRect.bottom
+					);
+				});
+				return (
+					visibleImages.length > 0 &&
+					visibleImages.every(
+						(image) => image.complete && image.naturalWidth > 0,
+					)
+				);
+			}),
+		)
+		.toBe(true);
+}
+
+async function expectResponsiveThumbnailWidth(
+	scroller: Locator,
+	expectedWidth: 256 | 512,
+): Promise<void> {
+	await expect
+		.poll(() =>
+			scroller.evaluate((element, width) => {
+				const image = element.querySelector<HTMLImageElement>(
+					"[data-media-id] img",
+				);
+				return (
+					image?.complete === true &&
+					image.naturalWidth > 0 &&
+					image.currentSrc.endsWith(`-${width}.webp`)
+				);
+			}, expectedWidth),
+		)
+		.toBe(true);
+}
+
 test("shared Solid UI components preserve keyboard and overlay behavior", async ({
 	page,
 }) => {
@@ -61,14 +105,9 @@ test("shared Solid UI gallery has no narrow viewport overflow", async ({
 test("virtual media grid stays populated and DOM-bounded during fast scrolling", async ({
 	page,
 }) => {
-	await page.route("**/virtual-thumbnail/*.svg", async (route) => {
-		await new Promise((resolve) => setTimeout(resolve, 20));
-		await route.fulfill({
-			body: `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="120" viewBox="0 0 160 120"><rect width="160" height="120" fill="#dbeafe"/><path d="M0 100 45 55l30 30 22-22 63 57H0Z" fill="#93c5fd"/></svg>`,
-			contentType: "image/svg+xml",
-			headers: { "Cache-Control": "private, max-age=300" },
-		});
-	});
+	await page.addInitScript(() =>
+		performance.setResourceTimingBufferSize(5_000),
+	);
 	await page.setViewportSize({ width: 1_280, height: 720 });
 	await page.goto(`${getGalleryUrl()}/?virtual-grid=1`);
 	await expect(
@@ -79,52 +118,26 @@ test("virtual media grid stays populated and DOM-bounded during fast scrolling",
 
 	const scroller = page.getByTestId("virtual-grid-scroller");
 	await expect(scroller.locator("[data-media-id]").first()).toBeVisible();
-	await expect
-		.poll(() =>
-			scroller.evaluate((element) => {
-				const scrollerRect = element.getBoundingClientRect();
-				const visibleImages = [
-					...element.querySelectorAll<HTMLImageElement>("[data-media-id] img"),
-				].filter((image) => {
-					const rect = image.getBoundingClientRect();
-					return (
-						rect.bottom > scrollerRect.top && rect.top < scrollerRect.bottom
-					);
-				});
-				return (
-					visibleImages.length > 0 &&
-					visibleImages.every(
-						(image) => image.complete && image.naturalWidth > 0,
-					)
-				);
-			}),
-		)
-		.toBe(true);
+	await expectVisibleImagesLoaded(scroller);
+	await expectResponsiveThumbnailWidth(scroller, 256);
 
-	const samples = await scroller.evaluate(async (element) => {
-		const sampleRows: Array<{
+	const scrollDownSamples = await scroller.evaluate(async (element) => {
+		const samples: Array<{
 			above: number;
 			below: number;
 			mounted: number;
+			srcImages: number;
 			visible: number;
-			loadedVisible: number;
 			firstVisibleId: string | null;
 		}> = [];
-		const settleFrame = () =>
+		const nextPaint = () =>
 			new Promise<void>((resolve) =>
-				requestAnimationFrame(() =>
-					requestAnimationFrame(() => setTimeout(resolve, 75)),
-				),
+				requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
 			);
-
-		const scrollSteps = [
-			...Array.from({ length: 21 }, (_, step) => step),
-			...Array.from({ length: 20 }, (_, step) => 19 - step),
-		];
-		for (const step of scrollSteps) {
+		for (let step = 0; step <= 48; step += 1) {
 			element.scrollTop =
-				(element.scrollHeight - element.clientHeight) * (step / 20);
-			await settleFrame();
+				(element.scrollHeight - element.clientHeight) * (step / 48);
+			await nextPaint();
 
 			const scrollerRect = element.getBoundingClientRect();
 			const mounted = [
@@ -134,11 +147,7 @@ test("virtual media grid stays populated and DOM-bounded during fast scrolling",
 				const rect = item.getBoundingClientRect();
 				return rect.bottom > scrollerRect.top && rect.top < scrollerRect.bottom;
 			});
-			const loadedVisible = visible.filter((item) => {
-				const image = item.querySelector("img");
-				return image?.complete && image.naturalWidth > 0;
-			});
-			sampleRows.push({
+			samples.push({
 				above: mounted.filter(
 					(item) => item.getBoundingClientRect().bottom <= scrollerRect.top,
 				).length,
@@ -146,31 +155,118 @@ test("virtual media grid stays populated and DOM-bounded during fast scrolling",
 					(item) => item.getBoundingClientRect().top >= scrollerRect.bottom,
 				).length,
 				mounted: mounted.length,
+				srcImages: mounted.filter((item) => item.querySelector("img[src]"))
+					.length,
 				visible: visible.length,
-				loadedVisible: loadedVisible.length,
 				firstVisibleId: visible[0]?.dataset.mediaId ?? null,
 			});
 		}
 
-		return sampleRows;
+		return samples;
 	});
 
-	expect(samples.every((sample) => sample.mounted > 0)).toBe(true);
-	expect(Math.max(...samples.map((sample) => sample.mounted))).toBeLessThan(
-		160,
-	);
-	expect(samples.every((sample) => sample.visible > 0)).toBe(true);
-	const unloadedSamples = samples.flatMap((sample, index) =>
-		sample.loadedVisible === sample.visible ? [] : [{ index, ...sample }],
-	);
-	expect(unloadedSamples).toEqual([]);
+	expect(scrollDownSamples.every((sample) => sample.mounted > 0)).toBe(true);
+	expect(
+		Math.max(...scrollDownSamples.map((sample) => sample.mounted)),
+	).toBeLessThan(160);
 	expect(
-		new Set(samples.map((sample) => sample.firstVisibleId)).size,
+		Math.max(...scrollDownSamples.map((sample) => sample.srcImages)),
+	).toBeLessThan(160);
+	expect(
+		scrollDownSamples.every((sample) => sample.srcImages >= sample.visible),
+	).toBe(true);
+	expect(scrollDownSamples.every((sample) => sample.visible > 0)).toBe(true);
+	expect(
+		new Set(scrollDownSamples.map((sample) => sample.firstVisibleId)).size,
 	).toBeGreaterThan(10);
-	expect(Math.max(...samples.map((sample) => sample.below))).toBeGreaterThan(
-		20,
-	);
-	expect(Math.max(...samples.map((sample) => sample.above))).toBeGreaterThan(
-		20,
-	);
+	expect(
+		Math.max(...scrollDownSamples.map((sample) => sample.below)),
+	).toBeGreaterThan(20);
+	expect(
+		Math.max(...scrollDownSamples.map((sample) => sample.above)),
+	).toBeGreaterThan(20);
+
+	// Loading is allowed while the user is moving, but stopping must leave no
+	// blank thumbnails in the viewport.
+	await expectVisibleImagesLoaded(scroller);
+
+	const scrollUpSamples = await scroller.evaluate(async (element) => {
+		const samples: Array<{
+			mounted: number;
+			srcImages: number;
+			visible: number;
+		}> = [];
+		const nextPaint = () =>
+			new Promise<void>((resolve) =>
+				requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+			);
+		for (let step = 47; step >= 0; step -= 1) {
+			element.scrollTop =
+				(element.scrollHeight - element.clientHeight) * (step / 48);
+			await nextPaint();
+			const scrollerRect = element.getBoundingClientRect();
+			const mounted = [
+				...element.querySelectorAll<HTMLElement>("[data-media-id]"),
+			];
+			samples.push({
+				mounted: mounted.length,
+				srcImages: mounted.filter((item) => item.querySelector("img[src]"))
+					.length,
+				visible: mounted.filter((item) => {
+					const rect = item.getBoundingClientRect();
+					return (
+						rect.bottom > scrollerRect.top && rect.top < scrollerRect.bottom
+					);
+				}).length,
+			});
+		}
+		return samples;
+	});
+
+	expect(scrollUpSamples.every((sample) => sample.mounted > 0)).toBe(true);
+	expect(scrollUpSamples.every((sample) => sample.visible > 0)).toBe(true);
+	expect(
+		scrollUpSamples.every((sample) => sample.srcImages >= sample.visible),
+	).toBe(true);
+	expect(
+		Math.max(...scrollUpSamples.map((sample) => sample.mounted)),
+	).toBeLessThan(160);
+	expect(
+		Math.max(...scrollUpSamples.map((sample) => sample.srcImages)),
+	).toBeLessThan(160);
+	await expectVisibleImagesLoaded(scroller);
+
+	const transferSummary = await page.evaluate(() => {
+		const resources = (
+			performance.getEntriesByType("resource") as PerformanceResourceTiming[]
+		).filter((entry) => entry.name.includes("/virtual-thumbnail/"));
+		const positiveTransfers = resources.filter(
+			(entry) => entry.transferSize > 0,
+		);
+		const transfersByUrl = new Map<string, number>();
+		for (const entry of positiveTransfers) {
+			transfersByUrl.set(entry.name, (transfersByUrl.get(entry.name) ?? 0) + 1);
+		}
+		return {
+			positiveTransferCount: positiveTransfers.length,
+			retransferredUrls: [...transfersByUrl.entries()].filter(
+				([, count]) => count > 1,
+			),
+		};
+	});
+	expect(transferSummary.positiveTransferCount).toBeGreaterThan(0);
+	expect(transferSummary.retransferredUrls).toEqual([]);
+});
+
+test.describe("high-density virtual media grid", () => {
+	test.use({ deviceScaleFactor: 2 });
+
+	test("selects the 512px WebP candidate at DPR 2", async ({ page }) => {
+		await page.setViewportSize({ width: 1_280, height: 720 });
+		await page.goto(`${getGalleryUrl()}/?virtual-grid=1`);
+		const scroller = page.getByTestId("virtual-grid-scroller");
+		await expect(scroller.locator("[data-media-id]").first()).toBeVisible();
+		await expectVisibleImagesLoaded(scroller);
+		await expectResponsiveThumbnailWidth(scroller, 512);
+	});
 });
diff --git a/apps/server/src/tests/e2e/ui-gallery/src.tsx b/apps/server/src/tests/e2e/ui-gallery/src.tsx
index 12081863..1896dc94 100644
--- a/apps/server/src/tests/e2e/ui-gallery/src.tsx
+++ b/apps/server/src/tests/e2e/ui-gallery/src.tsx
@@ -98,6 +98,7 @@ import {
 	TextFieldLabel,
 	TextFieldTextArea,
 } from "@solid-imager/ui/text-field";
+import { ThumbnailImage } from "@solid-imager/ui/thumbnail-image";
 import { Toaster, toast } from "@solid-imager/ui/toast";
 import { createSignal } from "solid-js";
 import { render } from "solid-js/web";
@@ -114,9 +115,9 @@ function createVirtualGridMedia(index: number): Media {
 		filePath: `/fixture/${index}.webp`,
 		fileName: `fixture-${index}.webp`,
 		mediaType: "image",
-		width: 160,
-		height: 120,
-		fileSize: 1_024,
+		width: 512,
+		height: 384,
+		fileSize: 52_840,
 		description: null,
 		createdAt: timestamp,
 		modifiedAt: timestamp,
@@ -147,17 +148,28 @@ function VirtualGridGallery() {
 					mediaResults={() => VIRTUAL_GRID_MEDIA}
 					mediaSourceId={() => VIRTUAL_GRID_MEDIA[0]?.mediaSourceId}
 					renderItem={(media, options) => (
+						// The immutable, uniquely-addressed URLs exercise the browser's real
+						// memory cache when a virtual row is unmounted and revisited.
 						<a
 							class="block aspect-[4/3] overflow-hidden rounded-md bg-muted"
 							data-media-id={media.id}
 							href={`#${media.id}`}
 							onContextMenu={options.onContextMenu}
 						>
-							<img
+							<ThumbnailImage
 								alt={media.fileName}
 								class="h-full w-full object-cover"
-								loading={options.priority ? "eager" : "lazy"}
-								src={`/virtual-thumbnail/${media.id}.svg`}
+								enabled={options.imageLoadPolicy?.enabled}
+								fetchpriority={options.imageLoadPolicy?.fetchpriority}
+								height={384}
+								loading={options.imageLoadPolicy?.loading}
+								sizes="160px"
+								source={{
+									getSrcSet: () =>
+										`/virtual-thumbnail/${media.id}-256.webp 256w, /virtual-thumbnail/${media.id}-512.webp 512w`,
+									getUrl: () => `/virtual-thumbnail/${media.id}-512.webp`,
+								}}
+								width={512}
 							/>
 						</a>
 					)}
diff --git a/apps/server/src/tests/e2e/ui-gallery/vite.config.ts b/apps/server/src/tests/e2e/ui-gallery/vite.config.ts
index 53a82caf..1fa7c341 100644
--- a/apps/server/src/tests/e2e/ui-gallery/vite.config.ts
+++ b/apps/server/src/tests/e2e/ui-gallery/vite.config.ts
@@ -1,12 +1,83 @@
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import tailwindcss from "@tailwindcss/vite";
-import { defineConfig } from "vite";
+import sharp from "sharp";
+import { defineConfig, type Plugin } from "vite";
 import solidPlugin from "vite-plugin-solid";
 
 const galleryRoot = path.dirname(fileURLToPath(import.meta.url));
 const workspaceRoot = path.resolve(galleryRoot, "../../../../../..");
 
+function createPhotoLikePixels(width: number, height: number): Buffer {
+	const pixels = Buffer.alloc(width * height * 3);
+	for (let y = 0; y < height; y += 1) {
+		for (let x = 0; x < width; x += 1) {
+			const index = (y * width + x) * 3;
+			const noise = ((x * 17 + y * 31 + ((x * y) % 97)) % 37) - 18;
+			pixels[index] = Math.max(
+				0,
+				Math.min(255, 40 + (x * 150) / width + noise),
+			);
+			pixels[index + 1] = Math.max(
+				0,
+				Math.min(255, 80 + (y * 120) / height + noise),
+			);
+			pixels[index + 2] = Math.max(
+				0,
+				Math.min(255, 190 + (Math.sin(x / 11) + Math.cos(y / 9)) * 25 + noise),
+			);
+		}
+	}
+	return pixels;
+}
+
+const thumbnailBuffers = new Map(
+	([256, 512] as const).map((width) => {
+		const height = Math.round(width * 0.75);
+		const pixels = createPhotoLikePixels(width, height);
+		return [
+			width,
+			sharp(pixels, { raw: { channels: 3, height, width } })
+				.webp({ effort: 4, quality: 82 })
+				.toBuffer(),
+		] as const;
+	}),
+);
+
+function virtualThumbnailPlugin(): Plugin {
+	return {
+		name: "solid-imager-e2e-virtual-thumbnails",
+		configureServer(server) {
+			server.middlewares.use(async (request, response, next) => {
+				const match = request.url?.match(
+					/^\/virtual-thumbnail\/[0-9a-f-]+-(256|512)\.webp(?:\?.*)?$/,
+				);
+				if (!match) {
+					next();
+					return;
+				}
+
+				const width = Number(match[1]) as 256 | 512;
+				const thumbnail = await thumbnailBuffers.get(width);
+				if (!thumbnail) {
+					response.statusCode = 404;
+					response.end();
+					return;
+				}
+
+				response.statusCode = 200;
+				response.setHeader(
+					"Cache-Control",
+					"public, max-age=31536000, immutable",
+				);
+				response.setHeader("Content-Length", thumbnail.byteLength);
+				response.setHeader("Content-Type", "image/webp");
+				response.end(thumbnail);
+			});
+		},
+	};
+}
+
 export default defineConfig({
 	root: galleryRoot,
 	resolve: {
@@ -20,5 +91,5 @@ export default defineConfig({
 			allow: [workspaceRoot],
 		},
 	},
-	plugins: [solidPlugin(), tailwindcss()],
+	plugins: [virtualThumbnailPlugin(), solidPlugin(), tailwindcss()],
 });
diff --git a/apps/server/src/tests/unit/application/services/job-dispatch-service.test.ts b/apps/server/src/tests/unit/application/services/job-dispatch-service.test.ts
index 975f4c46..1b659b4d 100644
--- a/apps/server/src/tests/unit/application/services/job-dispatch-service.test.ts
+++ b/apps/server/src/tests/unit/application/services/job-dispatch-service.test.ts
@@ -3,6 +3,7 @@ import type { Job as DbJob } from "~/infrastructure/db/schema";
 
 const processBatchCcipDispatchJob = vi.fn();
 const processBulkTaggingDispatchJob = vi.fn();
+const processThumbnailGenerationJob = vi.fn();
 
 vi.doMock("~/infrastructure/jobs/ccip-jobs", () => ({
 	processBatchCcipDispatchJob,
@@ -13,6 +14,11 @@ vi.doMock("~/infrastructure/jobs/tagging-jobs", () => ({
 	processAutoTaggingJob: vi.fn(),
 }));
 
+vi.doMock("~/infrastructure/jobs/thumbnails", () => ({
+	deleteThumbnail: vi.fn(),
+	processThumbnailGenerationJob,
+}));
+
 const { processJob } = await import(
 	"~/application/services/job-dispatch-service"
 );
@@ -40,6 +46,7 @@ describe("processJob", () => {
 	beforeEach(() => {
 		processBatchCcipDispatchJob.mockReset();
 		processBulkTaggingDispatchJob.mockReset();
+		processThumbnailGenerationJob.mockReset();
 	});
 
 	it("allows batch_ccip_dispatch without mediaSourceId", async () => {
@@ -65,4 +72,15 @@ describe("processJob", () => {
 		expect(processBatchCcipDispatchJob).not.toHaveBeenCalled();
 		expect(processBulkTaggingDispatchJob).not.toHaveBeenCalled();
 	});
+
+	it("dispatches generate_thumbnail jobs", async () => {
+		const job = createJob(
+			"generate_thumbnail",
+			"22222222-2222-4222-8222-222222222222",
+		);
+		processThumbnailGenerationJob.mockResolvedValueOnce(undefined);
+
+		await expect(processJob(job)).resolves.toBeUndefined();
+		expect(processThumbnailGenerationJob).toHaveBeenCalledWith(job);
+	});
 });
diff --git a/apps/server/src/tests/unit/infrastructure/jobs/job-worker.test.ts b/apps/server/src/tests/unit/infrastructure/jobs/job-worker.test.ts
index 5b0acc65..81e7a44e 100644
--- a/apps/server/src/tests/unit/infrastructure/jobs/job-worker.test.ts
+++ b/apps/server/src/tests/unit/infrastructure/jobs/job-worker.test.ts
@@ -75,6 +75,9 @@ describe("JobWorker", () => {
 		// When excluding AI types, return normal jobs
 		(jobRepo.claimPending as any).mockImplementation(
 			(limit: number, options: any) => {
+				if (options?.includeTypes?.includes("generate_thumbnail")) {
+					return Promise.resolve([]);
+				}
 				if (options?.excludeTypes) {
 					return Promise.resolve(normalJobs.slice(0, limit));
 				}
@@ -89,7 +92,11 @@ describe("JobWorker", () => {
 		expect(jobRepo.claimPending).toHaveBeenCalledWith(
 			2,
 			expect.objectContaining({
-				excludeTypes: ["auto_tagging", "extract_ccip_vector"],
+				excludeTypes: [
+					"auto_tagging",
+					"extract_ccip_vector",
+					"generate_thumbnail",
+				],
 			}),
 		);
 		expect(processor).toHaveBeenCalledTimes(2);
@@ -115,6 +122,9 @@ describe("JobWorker", () => {
 		// Mock claimPending
 		(jobRepo.claimPending as any).mockImplementation(
 			(limit: number, options: any) => {
+				if (options?.includeTypes?.includes("generate_thumbnail")) {
+					return Promise.resolve([]);
+				}
 				if (options?.includeTypes) {
 					return Promise.resolve(aiJobs.slice(0, limit));
 				}
@@ -163,6 +173,9 @@ describe("JobWorker", () => {
 		// Mock claimPending
 		(jobRepo.claimPending as any).mockImplementation(
 			(limit: number, options: any) => {
+				if (options?.includeTypes?.includes("generate_thumbnail")) {
+					return Promise.resolve([]);
+				}
 				if (options?.includeTypes) {
 					// AI request
 					return Promise.resolve([aiJob].slice(0, limit));
@@ -188,7 +201,11 @@ describe("JobWorker", () => {
 		expect(jobRepo.claimPending).toHaveBeenCalledWith(
 			2,
 			expect.objectContaining({
-				excludeTypes: ["auto_tagging", "extract_ccip_vector"],
+				excludeTypes: [
+					"auto_tagging",
+					"extract_ccip_vector",
+					"generate_thumbnail",
+				],
 			}),
 		);
 
@@ -216,6 +233,9 @@ describe("JobWorker", () => {
 
 		(jobRepo.claimPending as any).mockImplementation(
 			(limit: number, options: any) => {
+				if (options?.includeTypes?.includes("generate_thumbnail")) {
+					return Promise.resolve([]);
+				}
 				if (options?.excludeTypes) {
 					return Promise.resolve([customJob].slice(0, limit));
 				}
@@ -271,6 +291,9 @@ describe("JobWorker", () => {
 
 		(jobRepo.claimPending as any).mockImplementation(
 			(limit: number, options: any) => {
+				if (options?.includeTypes?.includes("generate_thumbnail")) {
+					return Promise.resolve([]);
+				}
 				if (options?.excludeTypes) {
 					return Promise.resolve(
 						[
@@ -299,6 +322,41 @@ describe("JobWorker", () => {
 		await vi.runOnlyPendingTimersAsync();
 	});
 
+	it("processes at most one thumbnail generation job at a time", async () => {
+		let resolveThumbnail: () => void = () => {};
+		processor = vi.fn(
+			() =>
+				new Promise<void>((resolve) => {
+					resolveThumbnail = resolve;
+				}),
+		);
+		worker = new JobWorker(jobRepo, processor);
+		const thumbnailJob = {
+			id: "thumbnail-1",
+			type: "generate_thumbnail",
+			status: "pending",
+		} as Job;
+		(jobRepo.claimPending as any).mockImplementation(
+			(_limit: number, options: any) =>
+				Promise.resolve(
+					options?.includeTypes?.includes("generate_thumbnail")
+						? [thumbnailJob]
+						: [],
+				),
+		);
+
+		worker.start();
+		await vi.advanceTimersByTimeAsync(TimerDelay);
+		await vi.advanceTimersByTimeAsync(1000);
+
+		expect(processor).toHaveBeenCalledTimes(1);
+		expect(jobRepo.claimPending).toHaveBeenCalledWith(1, {
+			includeTypes: ["generate_thumbnail"],
+		});
+		resolveThumbnail();
+		await vi.runOnlyPendingTimersAsync();
+	});
+
 	it("should pass active LanceDB sync source IDs to claimPending for exclusion", async () => {
 		worker.updateConfig({
 			jobs: { concurrency: 3, aiConcurrency: 1, pollIntervalMs: 1000 },

From 07a148541d16cba8f0df5058c320c945d015c9b9 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 17:50:26 +0900
Subject: [PATCH 11/12] perf(ui): start pagination prefetch earlier

---
 packages/ui/src/hooks/use-search-page.ts       | 2 +-
 packages/ui/src/hooks/use-source-media-page.ts | 2 +-
 packages/ui/src/source-media-grid.tsx          | 6 +++++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/hooks/use-search-page.ts b/packages/ui/src/hooks/use-search-page.ts
index 7af6431f..b8609617 100644
--- a/packages/ui/src/hooks/use-search-page.ts
+++ b/packages/ui/src/hooks/use-search-page.ts
@@ -302,7 +302,7 @@ export function useSearchPage(
 					searchResultQuery.fetchNextPage();
 				}
 			},
-			{ threshold: 0.5, rootMargin: "1000px" },
+			{ threshold: 0.5, rootMargin: "2400px" },
 		);
 		observer.observe(el);
 		onCleanup(() => observer.disconnect());
diff --git a/packages/ui/src/hooks/use-source-media-page.ts b/packages/ui/src/hooks/use-source-media-page.ts
index e4662323..e331e5e9 100644
--- a/packages/ui/src/hooks/use-source-media-page.ts
+++ b/packages/ui/src/hooks/use-source-media-page.ts
@@ -367,7 +367,7 @@ export function useSourceMediaPage(
 						mediaQuery.fetchNextPage();
 					}
 				},
-				{ threshold: 0.5, rootMargin: "1000px" },
+				{ threshold: 0.5, rootMargin: "2400px" },
 			);
 
 			observer.observe(el);
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index 90ab2969..a889fa9e 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -39,6 +39,10 @@ const GRID_GAP_PX = 12;
 const WINDOW_VIRTUAL_ROWS_OVERSCAN = 4;
 const ELEMENT_PREFETCH_ROWS = 3;
 const ELEMENT_RETAIN_ROWS = 4;
+// Start the next page before the user reaches the last prefetched rows. The
+// request itself is independent of image loading, so this does not increase
+// the number of mounted grid items.
+const LOAD_MORE_ROWS_AHEAD = 12;
 const INITIAL_PRIORITY_ROWS = 2;
 const INITIAL_HIGH_PRIORITY_MEDIA = 2;
 const INITIAL_SKELETON_ROWS = 3;
@@ -340,7 +344,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		const handleScroll = () => {
 			if (!props.hasNextPage || props.isFetchingNextPage) return;
 			const lastItem = mediaRowVirtualizer().getVirtualItems().at(-1);
-			if (lastItem && lastItem.index >= totalRows - 2) {
+			if (lastItem && lastItem.index >= totalRows - LOAD_MORE_ROWS_AHEAD) {
 				props.onLoadMore?.();
 			}
 		};

From e928f2a3a60dfb42756c6d1dde483ca3a13a585b Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 18:04:43 +0900
Subject: [PATCH 12/12] fix(review): address thumbnail and event review
 findings

---
 apps/server/drizzle/0022_sleepy_turbo.sql     |   17 +
 apps/server/drizzle/meta/0022_snapshot.json   | 3341 +++++++++++++++++
 apps/server/drizzle/meta/_journal.json        |    9 +-
 .../services/job-dispatch-service.ts          |   31 +-
 .../src/hooks/use-media-source-events.ts      |    5 +-
 apps/server/src/infrastructure/bootstrap.ts   |   15 +-
 ...urces.$mediaSourceId.thumbnail.$mediaId.ts |   14 +-
 .../services/job-dispatch-service.test.ts     |    7 +-
 .../src/repositories/job-repository.test.ts   |   10 +-
 .../db/src/repositories/job-repository.ts     |   24 +-
 packages/db/src/schema.ts                     |   11 +
 packages/ui/src/screens/v2-manager-screen.tsx |    7 +-
 packages/ui/src/source-media-grid.tsx         |    2 +-
 packages/ui/src/thumbnail-image.tsx           |   48 +-
 14 files changed, 3482 insertions(+), 59 deletions(-)
 create mode 100644 apps/server/drizzle/0022_sleepy_turbo.sql
 create mode 100644 apps/server/drizzle/meta/0022_snapshot.json

diff --git a/apps/server/drizzle/0022_sleepy_turbo.sql b/apps/server/drizzle/0022_sleepy_turbo.sql
new file mode 100644
index 00000000..03a2ca6a
--- /dev/null
+++ b/apps/server/drizzle/0022_sleepy_turbo.sql
@@ -0,0 +1,17 @@
+DO $$
+BEGIN
+	DELETE FROM "jobs" AS duplicate
+	USING "jobs" AS retained
+	WHERE duplicate."type" = 'generate_thumbnail'
+		AND duplicate."status" IN ('pending', 'in_progress')
+		AND retained."type" = duplicate."type"
+		AND retained."status" IN ('pending', 'in_progress')
+		AND retained."source_id" = duplicate."source_id"
+		AND retained."payload"->>'mediaId' = duplicate."payload"->>'mediaId'
+		AND retained."payload"->>'size' = duplicate."payload"->>'size'
+		AND (retained."created_at", retained."id") < (duplicate."created_at", duplicate."id");
+
+	CREATE UNIQUE INDEX "uq_jobs_active_thumbnail" ON "jobs" USING btree ("source_id",("payload"->>'mediaId'),("payload"->>'size')) WHERE "jobs"."type" = 'generate_thumbnail'
+					AND "jobs"."status" IN ('pending', 'in_progress')
+					AND "jobs"."source_id" IS NOT NULL;
+END $$;
diff --git a/apps/server/drizzle/meta/0022_snapshot.json b/apps/server/drizzle/meta/0022_snapshot.json
new file mode 100644
index 00000000..97a2984e
--- /dev/null
+++ b/apps/server/drizzle/meta/0022_snapshot.json
@@ -0,0 +1,3341 @@
+{
+  "id": "afa14b85-ff46-4c86-a56e-d20372ad79ce",
+  "prevId": "19ee548d-c82e-4887-a8a8-06f7f3f58cf5",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.author_accounts": {
+      "name": "author_accounts",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "author_id": {
+          "name": "author_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "platform": {
+          "name": "platform",
+          "type": "author_platform",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "profile_url": {
+          "name": "profile_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "idx_author_accounts_author_id": {
+          "name": "idx_author_accounts_author_id",
+          "columns": [
+            {
+              "expression": "author_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_author_accounts_platform_account_unique": {
+          "name": "idx_author_accounts_platform_account_unique",
+          "columns": [
+            {
+              "expression": "platform",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "account_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "author_accounts_author_id_authors_id_fk": {
+          "name": "author_accounts_author_id_authors_id_fk",
+          "tableFrom": "author_accounts",
+          "tableTo": "authors",
+          "columnsFrom": [
+            "author_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.authors": {
+      "name": "authors",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "idx_authors_account_id": {
+          "name": "idx_authors_account_id",
+          "columns": [
+            {
+              "expression": "account_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_authors_name": {
+          "name": "idx_authors_name",
+          "columns": [
+            {
+              "expression": "name",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.categories": {
+      "name": "categories",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "''"
+        },
+        "color": {
+          "name": "color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'#808080'"
+        },
+        "parent_id": {
+          "name": "parent_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "source": {
+          "name": "source",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'manual'"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "categories_parent_id_categories_id_fk": {
+          "name": "categories_parent_id_categories_id_fk",
+          "tableFrom": "categories",
+          "tableTo": "categories",
+          "columnsFrom": [
+            "parent_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "categories_name_unique": {
+          "name": "categories_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.ccip_embeddings": {
+      "name": "ccip_embeddings",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "region_id": {
+          "name": "region_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "embedding": {
+          "name": "embedding",
+          "type": "vector(768)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "model": {
+          "name": "model",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "embedding_version": {
+          "name": "embedding_version",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "media_modified_at": {
+          "name": "media_modified_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "extracted_at": {
+          "name": "extracted_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "idx_ccip_embeddings_region_id": {
+          "name": "idx_ccip_embeddings_region_id",
+          "columns": [
+            {
+              "expression": "region_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_ccip_embeddings_embedding_cosine": {
+          "name": "idx_ccip_embeddings_embedding_cosine",
+          "columns": [
+            {
+              "expression": "embedding",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last",
+              "opclass": "vector_cosine_ops"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "hnsw",
+          "with": {
+            "m": 16,
+            "ef_construction": 64
+          }
+        }
+      },
+      "foreignKeys": {
+        "ccip_embeddings_region_id_media_regions_id_fk": {
+          "name": "ccip_embeddings_region_id_media_regions_id_fk",
+          "tableFrom": "ccip_embeddings",
+          "tableTo": "media_regions",
+          "columnsFrom": [
+            "region_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "uq_ccip_embeddings_region_model_version": {
+          "name": "uq_ccip_embeddings_region_model_version",
+          "nullsNotDistinct": false,
+          "columns": [
+            "region_id",
+            "model",
+            "embedding_version"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.character_ips": {
+      "name": "character_ips",
+      "schema": "",
+      "columns": {
+        "character_id": {
+          "name": "character_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "ip_id": {
+          "name": "ip_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "source": {
+          "name": "source",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'manual'"
+        }
+      },
+      "indexes": {
+        "idx_character_ips_ip_id_character_id": {
+          "name": "idx_character_ips_ip_id_character_id",
+          "columns": [
+            {
+              "expression": "ip_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "character_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "character_ips_character_id_characters_id_fk": {
+          "name": "character_ips_character_id_characters_id_fk",
+          "tableFrom": "character_ips",
+          "tableTo": "characters",
+          "columnsFrom": [
+            "character_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "character_ips_ip_id_ips_id_fk": {
+          "name": "character_ips_ip_id_ips_id_fk",
+          "tableFrom": "character_ips",
+          "tableTo": "ips",
+          "columnsFrom": [
+            "ip_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_ips_character_id_ip_id_pk": {
+          "name": "character_ips_character_id_ip_id_pk",
+          "columns": [
+            "character_id",
+            "ip_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.characters": {
+      "name": "characters",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "''"
+        },
+        "source": {
+          "name": "source",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'manual'"
+        },
+        "aliases": {
+          "name": "aliases",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "characters_name_unique": {
+          "name": "characters_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.collections": {
+      "name": "collections",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "''"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "collections_user_id_users_id_fk": {
+          "name": "collections_user_id_users_id_fk",
+          "tableFrom": "collections",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.ips": {
+      "name": "ips",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "''"
+        },
+        "source": {
+          "name": "source",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'manual'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "ips_name_unique": {
+          "name": "ips_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.jobs": {
+      "name": "jobs",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "source_id": {
+          "name": "source_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "status": {
+          "name": "status",
+          "type": "job_status",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'pending'"
+        },
+        "payload": {
+          "name": "payload",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "result": {
+          "name": "result",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "error": {
+          "name": "error",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "parent_id": {
+          "name": "parent_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "idx_jobs_pending_import_request": {
+          "name": "idx_jobs_pending_import_request",
+          "columns": [
+            {
+              "expression": "id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "where": "\"jobs\".\"status\" = 'pending' AND \"jobs\".\"type\" = 'import_request'",
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_jobs_pending_created": {
+          "name": "idx_jobs_pending_created",
+          "columns": [
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "where": "\"jobs\".\"status\" = 'pending' AND \"jobs\".\"type\" <> 'import_request'",
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_jobs_pending_type_created": {
+          "name": "idx_jobs_pending_type_created",
+          "columns": [
+            {
+              "expression": "type",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "where": "\"jobs\".\"status\" = 'pending' AND \"jobs\".\"type\" <> 'import_request'",
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_jobs_pending_lancedb_source": {
+          "name": "idx_jobs_pending_lancedb_source",
+          "columns": [
+            {
+              "expression": "source_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "where": "\"jobs\".\"status\" = 'pending'\n\t\t\t\t\tAND \"jobs\".\"type\" IN ('sync_lancedb', 'sync_lancedb_full', 'sync_lancedb_delta')\n\t\t\t\t\tAND \"jobs\".\"source_id\" IS NOT NULL",
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_jobs_active_lancedb_source": {
+          "name": "idx_jobs_active_lancedb_source",
+          "columns": [
+            {
+              "expression": "source_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "where": "\"jobs\".\"status\" = 'in_progress'\n\t\t\t\t\tAND \"jobs\".\"type\" IN ('sync_lancedb', 'sync_lancedb_full', 'sync_lancedb_delta')\n\t\t\t\t\tAND \"jobs\".\"source_id\" IS NOT NULL",
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "uq_jobs_active_thumbnail": {
+          "name": "uq_jobs_active_thumbnail",
+          "columns": [
+            {
+              "expression": "source_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "(\"payload\"->>'mediaId')",
+              "asc": true,
+              "isExpression": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "(\"payload\"->>'size')",
+              "asc": true,
+              "isExpression": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "where": "\"jobs\".\"type\" = 'generate_thumbnail'\n\t\t\t\t\tAND \"jobs\".\"status\" IN ('pending', 'in_progress')\n\t\t\t\t\tAND \"jobs\".\"source_id\" IS NOT NULL",
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "jobs_source_id_media_sources_id_fk": {
+          "name": "jobs_source_id_media_sources_id_fk",
+          "tableFrom": "jobs",
+          "tableTo": "media_sources",
+          "columnsFrom": [
+            "source_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "jobs_parent_id_jobs_id_fk": {
+          "name": "jobs_parent_id_jobs_id_fk",
+          "tableFrom": "jobs",
+          "tableTo": "jobs",
+          "columnsFrom": [
+            "parent_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.lancedb_sync_dirty": {
+      "name": "lancedb_sync_dirty",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "source_id": {
+          "name": "source_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "operation": {
+          "name": "operation",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'upsert'"
+        },
+        "attempts": {
+          "name": "attempts",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "default": 0
+        },
+        "last_error": {
+          "name": "last_error",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "idx_lancedb_sync_dirty_source_updated": {
+          "name": "idx_lancedb_sync_dirty_source_updated",
+          "columns": [
+            {
+              "expression": "source_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "updated_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "lancedb_sync_dirty_source_id_media_sources_id_fk": {
+          "name": "lancedb_sync_dirty_source_id_media_sources_id_fk",
+          "tableFrom": "lancedb_sync_dirty",
+          "tableTo": "media_sources",
+          "columnsFrom": [
+            "source_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "lancedb_sync_dirty_source_media_unique": {
+          "name": "lancedb_sync_dirty_source_media_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "source_id",
+            "media_id"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_authors": {
+      "name": "media_authors",
+      "schema": "",
+      "columns": {
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "author_id": {
+          "name": "author_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "idx_media_authors_author_id_media_id": {
+          "name": "idx_media_authors_author_id_media_id",
+          "columns": [
+            {
+              "expression": "author_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_authors_media_id_media_id_fk": {
+          "name": "media_authors_media_id_media_id_fk",
+          "tableFrom": "media_authors",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "media_authors_author_id_authors_id_fk": {
+          "name": "media_authors_author_id_authors_id_fk",
+          "tableFrom": "media_authors",
+          "tableTo": "authors",
+          "columnsFrom": [
+            "author_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "media_authors_media_id_author_id_pk": {
+          "name": "media_authors_media_id_author_id_pk",
+          "columns": [
+            "media_id",
+            "author_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_categories": {
+      "name": "media_categories",
+      "schema": "",
+      "columns": {
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "category_id": {
+          "name": "category_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "idx_media_categories_category_id_media_id": {
+          "name": "idx_media_categories_category_id_media_id",
+          "columns": [
+            {
+              "expression": "category_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_categories_media_id_media_id_fk": {
+          "name": "media_categories_media_id_media_id_fk",
+          "tableFrom": "media_categories",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "media_categories_category_id_categories_id_fk": {
+          "name": "media_categories_category_id_categories_id_fk",
+          "tableFrom": "media_categories",
+          "tableTo": "categories",
+          "columnsFrom": [
+            "category_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "media_categories_media_id_category_id_pk": {
+          "name": "media_categories_media_id_category_id_pk",
+          "columns": [
+            "media_id",
+            "category_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_characters": {
+      "name": "media_characters",
+      "schema": "",
+      "columns": {
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "character_id": {
+          "name": "character_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "confidence": {
+          "name": "confidence",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "source": {
+          "name": "source",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'manual'"
+        }
+      },
+      "indexes": {
+        "idx_media_characters_character_id_media_id": {
+          "name": "idx_media_characters_character_id_media_id",
+          "columns": [
+            {
+              "expression": "character_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_characters_media_id_media_id_fk": {
+          "name": "media_characters_media_id_media_id_fk",
+          "tableFrom": "media_characters",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "media_characters_character_id_characters_id_fk": {
+          "name": "media_characters_character_id_characters_id_fk",
+          "tableFrom": "media_characters",
+          "tableTo": "characters",
+          "columnsFrom": [
+            "character_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "media_characters_media_id_character_id_pk": {
+          "name": "media_characters_media_id_character_id_pk",
+          "columns": [
+            "media_id",
+            "character_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_collections": {
+      "name": "media_collections",
+      "schema": "",
+      "columns": {
+        "collection_id": {
+          "name": "collection_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "display_order": {
+          "name": "display_order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "idx_media_collections_media_id": {
+          "name": "idx_media_collections_media_id",
+          "columns": [
+            {
+              "expression": "media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_collections_collection_id_collections_id_fk": {
+          "name": "media_collections_collection_id_collections_id_fk",
+          "tableFrom": "media_collections",
+          "tableTo": "collections",
+          "columnsFrom": [
+            "collection_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "media_collections_media_id_media_id_fk": {
+          "name": "media_collections_media_id_media_id_fk",
+          "tableFrom": "media_collections",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "media_collections_collection_id_media_id_pk": {
+          "name": "media_collections_collection_id_media_id_pk",
+          "columns": [
+            "collection_id",
+            "media_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_details": {
+      "name": "media_details",
+      "schema": "",
+      "columns": {
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "rating": {
+          "name": "rating",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        },
+        "favorite": {
+          "name": "favorite",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "view_count": {
+          "name": "view_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        },
+        "last_viewed_at": {
+          "name": "last_viewed_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'1970-01-01 00:00:00'"
+        }
+      },
+      "indexes": {
+        "idx_media_details_rating": {
+          "name": "idx_media_details_rating",
+          "columns": [
+            {
+              "expression": "rating",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_media_details_favorite": {
+          "name": "idx_media_details_favorite",
+          "columns": [
+            {
+              "expression": "favorite",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_media_details_view_count": {
+          "name": "idx_media_details_view_count",
+          "columns": [
+            {
+              "expression": "view_count",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_details_media_id_media_id_fk": {
+          "name": "media_details_media_id_media_id_fk",
+          "tableFrom": "media_details",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_generation_info": {
+      "name": "media_generation_info",
+      "schema": "",
+      "columns": {
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "metadata": {
+          "name": "metadata",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "prompt": {
+          "name": "prompt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "negative_prompt": {
+          "name": "negative_prompt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "workflow": {
+          "name": "workflow",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "loras": {
+          "name": "loras",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "vae": {
+          "name": "vae",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "hypernetworks": {
+          "name": "hypernetworks",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "embeddings": {
+          "name": "embeddings",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "ai_generated": {
+          "name": "ai_generated",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "model_name": {
+          "name": "model_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "''"
+        },
+        "seed": {
+          "name": "seed",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false,
+          "default": -1
+        },
+        "cfg_scale": {
+          "name": "cfg_scale",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        },
+        "steps": {
+          "name": "steps",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        }
+      },
+      "indexes": {
+        "idx_media_generation_info_metadata": {
+          "name": "idx_media_generation_info_metadata",
+          "columns": [
+            {
+              "expression": "metadata",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_media_generation_info_ai_generated": {
+          "name": "idx_media_generation_info_ai_generated",
+          "columns": [
+            {
+              "expression": "ai_generated",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_media_generation_info_model_name": {
+          "name": "idx_media_generation_info_model_name",
+          "columns": [
+            {
+              "expression": "model_name",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_generation_info_media_id_media_id_fk": {
+          "name": "media_generation_info_media_id_media_id_fk",
+          "tableFrom": "media_generation_info",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_ips": {
+      "name": "media_ips",
+      "schema": "",
+      "columns": {
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "ip_id": {
+          "name": "ip_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "confidence": {
+          "name": "confidence",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "source": {
+          "name": "source",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'manual'"
+        }
+      },
+      "indexes": {
+        "idx_media_ips_ip_id_media_id": {
+          "name": "idx_media_ips_ip_id_media_id",
+          "columns": [
+            {
+              "expression": "ip_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_ips_media_id_media_id_fk": {
+          "name": "media_ips_media_id_media_id_fk",
+          "tableFrom": "media_ips",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "media_ips_ip_id_ips_id_fk": {
+          "name": "media_ips_ip_id_ips_id_fk",
+          "tableFrom": "media_ips",
+          "tableTo": "ips",
+          "columnsFrom": [
+            "ip_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "media_ips_media_id_ip_id_pk": {
+          "name": "media_ips_media_id_ip_id_pk",
+          "columns": [
+            "media_id",
+            "ip_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_projects": {
+      "name": "media_projects",
+      "schema": "",
+      "columns": {
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {
+        "idx_media_projects_project_id_media_id": {
+          "name": "idx_media_projects_project_id_media_id",
+          "columns": [
+            {
+              "expression": "project_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_projects_media_id_media_id_fk": {
+          "name": "media_projects_media_id_media_id_fk",
+          "tableFrom": "media_projects",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "media_projects_project_id_projects_id_fk": {
+          "name": "media_projects_project_id_projects_id_fk",
+          "tableFrom": "media_projects",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "media_projects_media_id_project_id_pk": {
+          "name": "media_projects_media_id_project_id_pk",
+          "columns": [
+            "media_id",
+            "project_id"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_regions": {
+      "name": "media_regions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "kind": {
+          "name": "kind",
+          "type": "media_region_kind",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "x": {
+          "name": "x",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "y": {
+          "name": "y",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "width": {
+          "name": "width",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "height": {
+          "name": "height",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "source_modified_at": {
+          "name": "source_modified_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "detector": {
+          "name": "detector",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "detector_version": {
+          "name": "detector_version",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "score": {
+          "name": "score",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "idx_media_regions_media_id": {
+          "name": "idx_media_regions_media_id",
+          "columns": [
+            {
+              "expression": "media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "uq_media_regions_full_media_id": {
+          "name": "uq_media_regions_full_media_id",
+          "columns": [
+            {
+              "expression": "media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "where": "\"media_regions\".\"kind\" = 'full'",
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_regions_media_id_media_id_fk": {
+          "name": "media_regions_media_id_media_id_fk",
+          "tableFrom": "media_regions",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {
+        "media_regions_bbox_by_kind": {
+          "name": "media_regions_bbox_by_kind",
+          "value": "(\n\t\t\t\t(\"media_regions\".\"kind\" = 'full' AND \"media_regions\".\"x\" IS NULL AND \"media_regions\".\"y\" IS NULL AND \"media_regions\".\"width\" IS NULL AND \"media_regions\".\"height\" IS NULL)\n\t\t\t\tOR\n\t\t\t\t(\"media_regions\".\"kind\" <> 'full' AND \"media_regions\".\"x\" IS NOT NULL AND \"media_regions\".\"y\" IS NOT NULL AND \"media_regions\".\"width\" IS NOT NULL AND \"media_regions\".\"height\" IS NOT NULL\n\t\t\t\t\tAND \"media_regions\".\"x\" >= 0 AND \"media_regions\".\"y\" >= 0 AND \"media_regions\".\"width\" > 0 AND \"media_regions\".\"height\" > 0\n\t\t\t\t\tAND \"media_regions\".\"x\" + \"media_regions\".\"width\" <= 1 AND \"media_regions\".\"y\" + \"media_regions\".\"height\" <= 1)\n\t\t\t)"
+        },
+        "media_regions_score_range": {
+          "name": "media_regions_score_range",
+          "value": "\"media_regions\".\"score\" IS NULL OR (\"media_regions\".\"score\" >= 0 AND \"media_regions\".\"score\" <= 1)"
+        }
+      },
+      "isRLSEnabled": false
+    },
+    "public.media_relations": {
+      "name": "media_relations",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "parent_media_id": {
+          "name": "parent_media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "child_media_id": {
+          "name": "child_media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "relation_type": {
+          "name": "relation_type",
+          "type": "media_relation_type",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "order_index": {
+          "name": "order_index",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "metadata": {
+          "name": "metadata",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "idx_media_relations_child": {
+          "name": "idx_media_relations_child",
+          "columns": [
+            {
+              "expression": "child_media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_media_relations_type": {
+          "name": "idx_media_relations_type",
+          "columns": [
+            {
+              "expression": "relation_type",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_relations_parent_media_id_media_id_fk": {
+          "name": "media_relations_parent_media_id_media_id_fk",
+          "tableFrom": "media_relations",
+          "tableTo": "media",
+          "columnsFrom": [
+            "parent_media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "media_relations_child_media_id_media_id_fk": {
+          "name": "media_relations_child_media_id_media_id_fk",
+          "tableFrom": "media_relations",
+          "tableTo": "media",
+          "columnsFrom": [
+            "child_media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "parent_child_type_unique": {
+          "name": "parent_child_type_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "parent_media_id",
+            "child_media_id",
+            "relation_type"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_sources": {
+      "name": "media_sources",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "type": {
+          "name": "type",
+          "type": "media_source_type",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "connection_info": {
+          "name": "connection_info",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_sync": {
+      "name": "media_sync",
+      "schema": "",
+      "columns": {
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "sync_status": {
+          "name": "sync_status",
+          "type": "media_sync_status",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'synced'"
+        },
+        "backup_urls": {
+          "name": "backup_urls",
+          "type": "text[]",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'{}'"
+        },
+        "last_synced_at": {
+          "name": "last_synced_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "sync_attempts": {
+          "name": "sync_attempts",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        },
+        "last_error": {
+          "name": "last_error",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "media_sync_media_id_media_id_fk": {
+          "name": "media_sync_media_id_media_id_fk",
+          "tableFrom": "media_sync",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_tags": {
+      "name": "media_tags",
+      "schema": "",
+      "columns": {
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "tag_id": {
+          "name": "tag_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "tag_type": {
+          "name": "tag_type",
+          "type": "tag_type",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'positive'"
+        },
+        "confidence": {
+          "name": "confidence",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "source": {
+          "name": "source",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'manual'"
+        }
+      },
+      "indexes": {
+        "idx_media_tags_tag_id_tag_type_media_id": {
+          "name": "idx_media_tags_tag_id_tag_type_media_id",
+          "columns": [
+            {
+              "expression": "tag_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "tag_type",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_tags_media_id_media_id_fk": {
+          "name": "media_tags_media_id_media_id_fk",
+          "tableFrom": "media_tags",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "media_tags_tag_id_tags_id_fk": {
+          "name": "media_tags_tag_id_tags_id_fk",
+          "tableFrom": "media_tags",
+          "tableTo": "tags",
+          "columnsFrom": [
+            "tag_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "media_tags_media_id_tag_id_tag_type_pk": {
+          "name": "media_tags_media_id_tag_id_tag_type_pk",
+          "columns": [
+            "media_id",
+            "tag_id",
+            "tag_type"
+          ]
+        }
+      },
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_technical_info": {
+      "name": "media_technical_info",
+      "schema": "",
+      "columns": {
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "color_profile": {
+          "name": "color_profile",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "''"
+        },
+        "exif_data": {
+          "name": "exif_data",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'{}'"
+        },
+        "hash_md5": {
+          "name": "hash_md5",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "''"
+        },
+        "hash_perceptual": {
+          "name": "hash_perceptual",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "''"
+        },
+        "duration_seconds": {
+          "name": "duration_seconds",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "frame_rate": {
+          "name": "frame_rate",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "bitrate_kbps": {
+          "name": "bitrate_kbps",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "video_codec": {
+          "name": "video_codec",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "audio_codec": {
+          "name": "audio_codec",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "idx_media_technical_info_hash_md5": {
+          "name": "idx_media_technical_info_hash_md5",
+          "columns": [
+            {
+              "expression": "hash_md5",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_technical_info_media_id_media_id_fk": {
+          "name": "media_technical_info_media_id_media_id_fk",
+          "tableFrom": "media_technical_info",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media_urls": {
+      "name": "media_urls",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "idx_media_urls_media_id": {
+          "name": "idx_media_urls_media_id",
+          "columns": [
+            {
+              "expression": "media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_media_urls_url": {
+          "name": "idx_media_urls_url",
+          "columns": [
+            {
+              "expression": "url",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_media_urls_media_id_url_unique": {
+          "name": "idx_media_urls_media_id_url_unique",
+          "columns": [
+            {
+              "expression": "media_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            },
+            {
+              "expression": "url",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": true,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_urls_media_id_media_id_fk": {
+          "name": "media_urls_media_id_media_id_fk",
+          "tableFrom": "media_urls",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.media": {
+      "name": "media",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "source_id": {
+          "name": "source_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "file_path": {
+          "name": "file_path",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "file_name": {
+          "name": "file_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "media_type": {
+          "name": "media_type",
+          "type": "media_type",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "file_size": {
+          "name": "file_size",
+          "type": "bigint",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "modified_at": {
+          "name": "modified_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "indexed_at": {
+          "name": "indexed_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "status": {
+          "name": "status",
+          "type": "media_organization_status",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'active'"
+        }
+      },
+      "indexes": {
+        "idx_media_source_id": {
+          "name": "idx_media_source_id",
+          "columns": [
+            {
+              "expression": "source_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_media_file_size": {
+          "name": "idx_media_file_size",
+          "columns": [
+            {
+              "expression": "file_size",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_media_file_name": {
+          "name": "idx_media_file_name",
+          "columns": [
+            {
+              "expression": "file_name",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_media_created_at": {
+          "name": "idx_media_created_at",
+          "columns": [
+            {
+              "expression": "created_at",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        },
+        "idx_media_description": {
+          "name": "idx_media_description",
+          "columns": [
+            {
+              "expression": "description",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "media_source_id_media_sources_id_fk": {
+          "name": "media_source_id_media_sources_id_fk",
+          "tableFrom": "media",
+          "tableTo": "media_sources",
+          "columnsFrom": [
+            "source_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "source_id_file_path_unique": {
+          "name": "source_id_file_path_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "source_id",
+            "file_path"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.presets": {
+      "name": "presets",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "serial",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "sort": {
+          "name": "sort",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "order": {
+          "name": "order",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "mode": {
+          "name": "mode",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "presets_name_unique": {
+          "name": "presets_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.projects": {
+      "name": "projects",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "''"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "archived_at": {
+          "name": "archived_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {
+        "idx_projects_name": {
+          "name": "idx_projects_name",
+          "columns": [
+            {
+              "expression": "name",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "projects_name_unique": {
+          "name": "projects_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.similar_media": {
+      "name": "similar_media",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "media1_id": {
+          "name": "media1_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "media2_id": {
+          "name": "media2_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "similarity_score": {
+          "name": "similarity_score",
+          "type": "real",
+          "primaryKey": false,
+          "notNull": false,
+          "default": 0
+        },
+        "algorithm": {
+          "name": "algorithm",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "'perceptual'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "idx_similar_media_score": {
+          "name": "idx_similar_media_score",
+          "columns": [
+            {
+              "expression": "similarity_score",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "similar_media_media1_id_media_id_fk": {
+          "name": "similar_media_media1_id_media_id_fk",
+          "tableFrom": "similar_media",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media1_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "similar_media_media2_id_media_id_fk": {
+          "name": "similar_media_media2_id_media_id_fk",
+          "tableFrom": "similar_media",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media2_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "media1Id_media2Id_algorithm_unique": {
+          "name": "media1Id_media2Id_algorithm_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "media1_id",
+            "media2_id",
+            "algorithm"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.tags": {
+      "name": "tags",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "attribute": {
+          "name": "attribute",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "color": {
+          "name": "color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "source": {
+          "name": "source",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'manual'"
+        },
+        "author_id": {
+          "name": "author_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {
+        "idx_tags_author_id": {
+          "name": "idx_tags_author_id",
+          "columns": [
+            {
+              "expression": "author_id",
+              "isExpression": false,
+              "asc": true,
+              "nulls": "last"
+            }
+          ],
+          "isUnique": false,
+          "concurrently": false,
+          "method": "btree",
+          "with": {}
+        }
+      },
+      "foreignKeys": {
+        "tags_author_id_authors_id_fk": {
+          "name": "tags_author_id_authors_id_fk",
+          "tableFrom": "tags",
+          "tableTo": "authors",
+          "columnsFrom": [
+            "author_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "tags_name_unique": {
+          "name": "tags_name_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "name"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.users": {
+      "name": "users",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    },
+    "public.view_history": {
+      "name": "view_history",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "media_id": {
+          "name": "media_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "viewed_at": {
+          "name": "viewed_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "now()"
+        },
+        "ip_address": {
+          "name": "ip_address",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "default": "''"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "view_history_media_id_media_id_fk": {
+          "name": "view_history_media_id_media_id_fk",
+          "tableFrom": "view_history",
+          "tableTo": "media",
+          "columnsFrom": [
+            "media_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": false
+    }
+  },
+  "enums": {
+    "public.author_platform": {
+      "name": "author_platform",
+      "schema": "public",
+      "values": [
+        "twitter",
+        "pixiv-fanbox",
+        "danbooru"
+      ]
+    },
+    "public.job_status": {
+      "name": "job_status",
+      "schema": "public",
+      "values": [
+        "pending",
+        "in_progress",
+        "completed",
+        "failed"
+      ]
+    },
+    "public.media_organization_status": {
+      "name": "media_organization_status",
+      "schema": "public",
+      "values": [
+        "active",
+        "archived",
+        "deleted"
+      ]
+    },
+    "public.media_region_kind": {
+      "name": "media_region_kind",
+      "schema": "public",
+      "values": [
+        "full",
+        "person",
+        "manual"
+      ]
+    },
+    "public.media_relation_type": {
+      "name": "media_relation_type",
+      "schema": "public",
+      "values": [
+        "variant",
+        "version",
+        "page",
+        "derivative",
+        "edit",
+        "source"
+      ]
+    },
+    "public.media_source_type": {
+      "name": "media_source_type",
+      "schema": "public",
+      "values": [
+        "local",
+        "sftp",
+        "s3"
+      ]
+    },
+    "public.media_sync_status": {
+      "name": "media_sync_status",
+      "schema": "public",
+      "values": [
+        "synced",
+        "pending",
+        "failed"
+      ]
+    },
+    "public.media_type": {
+      "name": "media_type",
+      "schema": "public",
+      "values": [
+        "image",
+        "video",
+        "audio"
+      ]
+    },
+    "public.tag_type": {
+      "name": "tag_type",
+      "schema": "public",
+      "values": [
+        "positive",
+        "negative"
+      ]
+    }
+  },
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/apps/server/drizzle/meta/_journal.json b/apps/server/drizzle/meta/_journal.json
index 0bb5c78b..d7eeb7ea 100644
--- a/apps/server/drizzle/meta/_journal.json
+++ b/apps/server/drizzle/meta/_journal.json
@@ -155,6 +155,13 @@
       "when": 1785608829741,
       "tag": "0021_clear_lancedb_delta_jobs",
       "breakpoints": true
+    },
+    {
+      "idx": 22,
+      "version": "7",
+      "when": 1785661239287,
+      "tag": "0022_sleepy_turbo",
+      "breakpoints": true
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/server/src/application/services/job-dispatch-service.ts b/apps/server/src/application/services/job-dispatch-service.ts
index b5daaccc..7a5be13a 100644
--- a/apps/server/src/application/services/job-dispatch-service.ts
+++ b/apps/server/src/application/services/job-dispatch-service.ts
@@ -1,19 +1,35 @@
 import type { DeferredActions } from "@solid-imager/application/ports/media-service";
+import type { Job } from "@solid-imager/core/domain/repositories/job-repository";
 import { services } from "~/application/registry";
-import type { Job as DbJob } from "~/infrastructure/db/schema";
 import { RealtimeEventBus } from "~/infrastructure/events/realtime-event-bus";
 import {
 	processAutoTaggingJob,
 	processBulkTaggingDispatchJob,
 } from "~/infrastructure/jobs/tagging-jobs";
-import {
-	deleteThumbnail,
-	processThumbnailGenerationJob,
-} from "~/infrastructure/jobs/thumbnails";
 import { logger } from "~/infrastructure/logger";
 
+export type ThumbnailJobHandlers = {
+	deleteThumbnail: (mediaSourceId: string, mediaId: string) => Promise<void>;
+	processThumbnailGenerationJob: (job: Job) => Promise<void>;
+};
+
+let thumbnailJobHandlers: ThumbnailJobHandlers | undefined;
+
+export function configureThumbnailJobHandlers(
+	handlers: ThumbnailJobHandlers,
+): void {
+	thumbnailJobHandlers = handlers;
+}
+
+function getThumbnailJobHandlers(): ThumbnailJobHandlers {
+	if (!thumbnailJobHandlers) {
+		throw new Error("Thumbnail job handlers have not been configured.");
+	}
+	return thumbnailJobHandlers;
+}
+
 // Helper for unified job processing (Called by JobWorker)
-export async function processJob(job: DbJob) {
+export async function processJob(job: Job) {
 	const mediaSourceId = job.mediaSourceId;
 	if (
 		!mediaSourceId &&
@@ -48,7 +64,7 @@ export async function processJob(job: DbJob) {
 		);
 		await processBatchCcipDispatchJob(job);
 	} else if (job.type === "generate_thumbnail") {
-		await processThumbnailGenerationJob(job);
+		await getThumbnailJobHandlers().processThumbnailGenerationJob(job);
 	} else if (job.type === "sync_lancedb" || job.type === "sync_lancedb_full") {
 		if (!mediaSourceId) {
 			throw new Error(`Job ${job.id} missing mediaSourceId`);
@@ -162,6 +178,7 @@ export async function executeDeferredActions(actions: DeferredActions) {
 		}
 	}
 	if (actions.thumbnailsToDelete && actions.thumbnailsToDelete.length > 0) {
+		const { deleteThumbnail } = getThumbnailJobHandlers();
 		for (const thumb of actions.thumbnailsToDelete) {
 			try {
 				await deleteThumbnail(thumb.mediaSourceId, thumb.mediaId);
diff --git a/apps/server/src/hooks/use-media-source-events.ts b/apps/server/src/hooks/use-media-source-events.ts
index a5b37e83..aaa3c551 100644
--- a/apps/server/src/hooks/use-media-source-events.ts
+++ b/apps/server/src/hooks/use-media-source-events.ts
@@ -79,8 +79,11 @@ export function createServerTransport(
 		if (!id) {
 			return false;
 		}
+		if (pathname === "/search" || pathname === "/v2/search") {
+			return true;
+		}
 		if (id === "*") {
-			return pathname === "/search" || pathname === "/v2/search";
+			return false;
 		}
 		return (
 			pathname === `/sources/${id}` ||
diff --git a/apps/server/src/infrastructure/bootstrap.ts b/apps/server/src/infrastructure/bootstrap.ts
index f0c2a759..352b8056 100644
--- a/apps/server/src/infrastructure/bootstrap.ts
+++ b/apps/server/src/infrastructure/bootstrap.ts
@@ -1,7 +1,10 @@
 import { services } from "~/application/registry";
 import { configureCcipVectorService } from "~/application/services/ccip-vector-service";
 import { CharacterServiceImpl } from "~/application/services/character-service";
-import { processJob } from "~/application/services/job-dispatch-service";
+import {
+	configureThumbnailJobHandlers,
+	processJob,
+} from "~/application/services/job-dispatch-service";
 import { MaintenanceService } from "~/application/services/maintenance-service";
 import { MediaProcessingServiceImpl } from "~/application/services/media-processing-service";
 import { ServerConfigService } from "~/application/services/server-config-service";
@@ -11,7 +14,11 @@ import { RealtimeEventBus } from "~/infrastructure/events/realtime-event-bus";
 import { NodeFileSystem } from "~/infrastructure/file-system/node-file-system";
 import { updateDownloadRateLimitConfig } from "~/infrastructure/jobs/download-rate-limiter";
 import { JobWorker } from "~/infrastructure/jobs/job-worker";
-import { generateThumbnail } from "~/infrastructure/jobs/thumbnails";
+import {
+	deleteThumbnail,
+	generateThumbnail,
+	processThumbnailGenerationJob,
+} from "~/infrastructure/jobs/thumbnails";
 import { logger, updateLogLevel } from "~/infrastructure/logger";
 import { ImageProcessor } from "~/infrastructure/processing/image-processor";
 import { AuthorRepository } from "~/infrastructure/repositories/author-repository";
@@ -65,6 +72,10 @@ export function initServices() {
 
 	const jobRepo = JobRepository;
 	services.registerJobRepository(jobRepo);
+	configureThumbnailJobHandlers({
+		deleteThumbnail,
+		processThumbnailGenerationJob,
+	});
 
 	// Register Services
 	services.registerMediaStorage(ServerMediaStorage);
diff --git a/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts b/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts
index 5e15a937..0f07e9d6 100644
--- a/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts
+++ b/apps/server/src/routes/api/sources.$mediaSourceId.thumbnail.$mediaId.ts
@@ -34,14 +34,14 @@ export const Route = createFileRoute(
 				const file = Bun.file(thumbnailPath);
 
 				if (!(await file.exists())) {
+					void queueThumbnailGeneration(mediaSourceId, mediaId, size).catch(
+						(error) =>
+							logger.error(
+								{ err: error, mediaId, mediaSourceId, size },
+								"Failed to queue on-demand thumbnail generation",
+							),
+					);
 					if (size === THUMBNAIL_SIZE_SMALL) {
-						void queueThumbnailGeneration(mediaSourceId, mediaId, size).catch(
-							(error) =>
-								logger.error(
-									{ err: error, mediaId, mediaSourceId, size },
-									"Failed to queue on-demand thumbnail generation",
-								),
-						);
 						const fallback = Bun.file(
 							getThumbnailPath(mediaSourceId, mediaId, THUMBNAIL_SIZE_LARGE),
 						);
diff --git a/apps/server/src/tests/unit/application/services/job-dispatch-service.test.ts b/apps/server/src/tests/unit/application/services/job-dispatch-service.test.ts
index 1b659b4d..ce04443d 100644
--- a/apps/server/src/tests/unit/application/services/job-dispatch-service.test.ts
+++ b/apps/server/src/tests/unit/application/services/job-dispatch-service.test.ts
@@ -19,10 +19,15 @@ vi.doMock("~/infrastructure/jobs/thumbnails", () => ({
 	processThumbnailGenerationJob,
 }));
 
-const { processJob } = await import(
+const { configureThumbnailJobHandlers, processJob } = await import(
 	"~/application/services/job-dispatch-service"
 );
 
+configureThumbnailJobHandlers({
+	deleteThumbnail: vi.fn(),
+	processThumbnailGenerationJob,
+});
+
 function createJob(
 	type: DbJob["type"],
 	mediaSourceId: string | null,
diff --git a/packages/db/src/repositories/job-repository.test.ts b/packages/db/src/repositories/job-repository.test.ts
index 5957c367..6888a014 100644
--- a/packages/db/src/repositories/job-repository.test.ts
+++ b/packages/db/src/repositories/job-repository.test.ts
@@ -30,6 +30,9 @@ describe("JobRepository", () => {
 			limit: vi.fn().mockResolvedValue([]),
 			set: vi.fn().mockReturnThis(),
 			where: vi.fn().mockReturnThis(),
+			insert: vi.fn().mockReturnThis(),
+			values: vi.fn().mockReturnThis(),
+			onConflictDoNothing: vi.fn().mockReturnThis(),
 			returning: vi
 				.fn()
 				.mockResolvedValue([{ id: "11111111-1111-4111-8111-111111111111" }]),
@@ -103,9 +106,7 @@ describe("JobRepository", () => {
 	});
 
 	it("deduplicates active thumbnail jobs by source, media and size", async () => {
-		mockExecutor.limit.mockResolvedValueOnce([
-			{ id: "11111111-1111-4111-8111-111111111111" },
-		]);
+		mockExecutor.returning.mockResolvedValueOnce([]);
 
 		const created = await repository.createIfUnique({
 			type: "generate_thumbnail",
@@ -117,7 +118,8 @@ describe("JobRepository", () => {
 		});
 
 		expect(created).toBeNull();
-		expect(mockExecutor.select).toHaveBeenCalledOnce();
+		expect(mockExecutor.insert).toHaveBeenCalledOnce();
+		expect(mockExecutor.onConflictDoNothing).toHaveBeenCalledOnce();
 	});
 
 	it("clears stale result and error markers when requeueing", async () => {
diff --git a/packages/db/src/repositories/job-repository.ts b/packages/db/src/repositories/job-repository.ts
index f9b0f529..87aff7ef 100644
--- a/packages/db/src/repositories/job-repository.ts
+++ b/packages/db/src/repositories/job-repository.ts
@@ -70,23 +70,13 @@ export function createJobRepository(
 
 		async createIfUnique(job: NewJob): Promise<Job | null> {
 			if (job.type === "generate_thumbnail" && job.mediaSourceId) {
-				const payload = generateThumbnailJobPayloadSchema.parse(job.payload);
-				const [existing] = await db()
-					.select({ id: jobs.id })
-					.from(jobs)
-					.where(
-						and(
-							eq(jobs.type, job.type),
-							eq(jobs.mediaSourceId, job.mediaSourceId),
-							inArray(jobs.status, ["pending", "in_progress"]),
-							sql`${jobs.payload}->>'mediaId' = ${payload.mediaId}`,
-							sql`${jobs.payload}->>'size' = ${String(payload.size)}`,
-						),
-					)
-					.limit(1);
-				if (existing) {
-					return null;
-				}
+				generateThumbnailJobPayloadSchema.parse(job.payload);
+				const [created] = await db()
+					.insert(jobs)
+					.values(job)
+					.onConflictDoNothing()
+					.returning();
+				return created ? mapJob(created) : null;
 			}
 
 			if (job.type === "sync_lancedb_delta" && job.mediaSourceId) {
diff --git a/packages/db/src/schema.ts b/packages/db/src/schema.ts
index 23b1d7c5..ea45a6b2 100644
--- a/packages/db/src/schema.ts
+++ b/packages/db/src/schema.ts
@@ -1073,6 +1073,17 @@ export const jobs = pgTable(
 					AND ${table.type} IN ('sync_lancedb', 'sync_lancedb_full', 'sync_lancedb_delta')
 					AND ${table.mediaSourceId} IS NOT NULL`,
 			),
+		activeThumbnailUniqueIndex: uniqueIndex("uq_jobs_active_thumbnail")
+			.on(
+				table.mediaSourceId,
+				sql`(${table.payload}->>'mediaId')`,
+				sql`(${table.payload}->>'size')`,
+			)
+			.where(
+				sql`${table.type} = 'generate_thumbnail'
+					AND ${table.status} IN ('pending', 'in_progress')
+					AND ${table.mediaSourceId} IS NOT NULL`,
+			),
 	}),
 );
 
diff --git a/packages/ui/src/screens/v2-manager-screen.tsx b/packages/ui/src/screens/v2-manager-screen.tsx
index c9c13999..ce7f3e83 100644
--- a/packages/ui/src/screens/v2-manager-screen.tsx
+++ b/packages/ui/src/screens/v2-manager-screen.tsx
@@ -589,8 +589,10 @@ function EntityTablePanel(props: {
 function SourceSelect(props: {
 	manager: UseManagerPageResult;
 	onChange: (id: string | undefined) => void;
+	placeholder?: string;
 	value: string | undefined;
 }) {
+	const placeholder = () => props.placeholder ?? "All sources";
 	return (
 		<Select
 			itemComponent={(selectProps) => (
@@ -602,7 +604,7 @@ function SourceSelect(props: {
 			options={props.manager.sources()}
 			optionTextValue="name"
 			optionValue="id"
-			placeholder="All sources"
+			placeholder={placeholder()}
 			value={
 				props.value
 					? props.manager.sources().find((source) => source.id === props.value)
@@ -617,7 +619,7 @@ function SourceSelect(props: {
 							typeof selected === "object" &&
 							"name" in selected
 							? (selected as { name: string }).name
-							: "All sources";
+							: placeholder();
 					}}
 				</SelectValue>
 			</SelectTrigger>
@@ -799,6 +801,7 @@ function ThumbnailWarmupPanel(props: { manager: UseManagerPageResult }) {
 					<SourceSelect
 						manager={props.manager}
 						onChange={props.manager.setSelectedSourceId}
+						placeholder="Select source"
 						value={props.manager.selectedSourceId()}
 					/>
 					<p class="text-xs text-[var(--v2-text-muted)]">
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index a889fa9e..b96ace1c 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -401,7 +401,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 																? "high"
 																: undefined,
 														loading:
-															index() < INITIAL_HIGH_PRIORITY_MEDIA
+															index() < initialPriorityMediaCount()
 																? "eager"
 																: "lazy",
 													}
diff --git a/packages/ui/src/thumbnail-image.tsx b/packages/ui/src/thumbnail-image.tsx
index d4122a52..ca1bc2f1 100644
--- a/packages/ui/src/thumbnail-image.tsx
+++ b/packages/ui/src/thumbnail-image.tsx
@@ -26,9 +26,11 @@ export function ThumbnailImage(props: ThumbnailImageProps) {
 	const [srcSet, setSrcSet] = createSignal<string | undefined>();
 	const [error, setError] = createSignal(false);
 	let previousSource: ThumbnailSource | undefined;
+	let loadGeneration = 0;
 
 	createEffect(() => {
 		const source = props.source;
+		++loadGeneration;
 		if (source !== previousSource) {
 			previousSource = source;
 			setUrl(null);
@@ -40,45 +42,52 @@ export function ThumbnailImage(props: ThumbnailImageProps) {
 		}
 		setError(false);
 		let cancelled = false;
+		const isCurrent = (generation: number) =>
+			!cancelled && generation === loadGeneration;
 
-		const applyResolvedUrl = (resolved: string) => {
-			if (!cancelled) {
+		const applyResolvedUrl = (resolved: string, generation: number) => {
+			if (isCurrent(generation)) {
 				setUrl(resolved);
 			}
 		};
 
 		const load = () => {
+			if (cancelled) return;
+			const generation = ++loadGeneration;
 			try {
 				const resolved = source.getUrl();
 				if (typeof resolved === "string") {
-					applyResolvedUrl(resolved);
+					applyResolvedUrl(resolved, generation);
 					return;
 				}
-				void resolved.then(applyResolvedUrl).catch(() => {
-					if (!cancelled) {
-						setError(true);
-						source.onError?.();
-					}
-				});
+				void resolved
+					.then((value) => applyResolvedUrl(value, generation))
+					.catch(() => {
+						if (isCurrent(generation)) {
+							setError(true);
+							source.onError?.();
+						}
+					});
 			} catch {
-				if (!cancelled) {
+				if (isCurrent(generation)) {
 					setError(true);
 					source.onError?.();
 				}
 			}
 		};
 		const loadSrcSet = () => {
+			const generation = loadGeneration;
 			try {
 				const resolved = source.getSrcSet?.();
 				if (typeof resolved === "string" || resolved === undefined) {
-					if (!cancelled) setSrcSet(resolved);
+					if (isCurrent(generation)) setSrcSet(resolved);
 					return;
 				}
 				void resolved.then((value) => {
-					if (!cancelled) setSrcSet(value);
+					if (isCurrent(generation)) setSrcSet(value);
 				});
 			} catch {
-				if (!cancelled) setSrcSet(undefined);
+				if (isCurrent(generation)) setSrcSet(undefined);
 			}
 		};
 
@@ -86,6 +95,7 @@ export function ThumbnailImage(props: ThumbnailImageProps) {
 		loadSrcSet();
 
 		const unsubscribe = source.subscribe?.(() => {
+			if (cancelled) return;
 			setError(false);
 			load();
 			loadSrcSet();
@@ -102,13 +112,19 @@ export function ThumbnailImage(props: ThumbnailImageProps) {
 	};
 
 	const handleError = () => {
+		const source = props.source;
+		const generation = ++loadGeneration;
 		setError(true);
-		props.source.onError?.();
+		source.onError?.();
 		const currentUrl = url();
 		void (async () => {
 			try {
-				const resolved = await props.source.getUrl();
-				if (resolved === currentUrl) {
+				const resolved = await source.getUrl();
+				if (
+					generation !== loadGeneration ||
+					source !== props.source ||
+					resolved === currentUrl
+				) {
 					return;
 				}
 				setUrl(resolved);