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/26] 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 4c992f293..9f72ad770 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 f71d2ec66..0613b054a 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 bf29ca88a..3beb2717d 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 9dd068ac7..a6b642051 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 9d1ce748b..d2e9e0526 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 a7b9416e9..517cecc79 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 404f76e9c..9c71d05d4 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 702fdfcad..847c6c04f 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 268dd4305..df78e9313 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/26] 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 df78e9313..a24ac4e78 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/26] 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 3beb2717d..6fb68fe7b 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/26] 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 3d6e9357d..b8d49143a 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 17d9e8074..4b7b3bfb3 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 a24ac4e78..ee75b2e08 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/26] 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 d216a6ffc..a5b37e833 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 e5c1ca583..a9fe755fe 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 6fb68fe7b..84916c2fb 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 a6b642051..3dfe796f9 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 ee75b2e08..25181575e 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 51fae54aa..7b69a465e 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/26] 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 09a5a106b..5313e6951 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 95cef06cb..40ae28ac9 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/26] 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 5313e6951..3e2be7826 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 40ae28ac9..120818631 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 25181575e..52bc01228 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/26] 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 055685a12..ec1a9a928 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 da7d4c1cd..b5daaccc5 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 3f84e8392..02960db70 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 acfcf0cb9..e24a260d6 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 103d9dc1f..9e48406ef 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 0af893e25..a9ecda34a 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 1d7c26ee5..d599d7e24 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 2f6879cfd..accec26b8 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 96af4ceeb..ea8bc6e72 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 a9fe755fe..5e15a937f 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 a19e3c1ce..5649ccb7a 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 db7214c31..6ded5a469 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 a357e87aa..eb36b18f0 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 041a3ac13..b0c4ef214 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 000000000..59e8216c7
--- /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 2e188ebcf..5957c3675 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 9b145d3a0..f9b0f5294 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/26] 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 f6d8af912..1537a1362 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 9f72ad770..bda64668f 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 0613b054a..7bd79037d 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 978a5a84c..5df497ffa 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 84916c2fb..ad67e4206 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 efc6f1009..75c1edd62 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 5aacf53c2..52f3ad4a4 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 000000000..7e624e129
--- /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 dc6b68bd3..db5b6484f 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 b83ed67b7..c1043d511 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 d2e9e0526..82a9b738d 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 517cecc79..44faeb412 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 b16af3465..0c233f9ed 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 12c400d62..454f0a37f 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 596fce048..4b52c1c46 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 9c71d05d4..7b318256d 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 847c6c04f..f0c772ad2 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 5450337b1..c9c13999b 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 52bc01228..90ab29690 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 7b69a465e..d4122a522 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 000000000..d6a32a90a
--- /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 f8bc43927..3e5bf17ed 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/26] 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 3e2be7826..98fffe768 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 120818631..1896dc949 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 53a82caf8..1fa7c3412 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 975f4c468..1b659b4d0 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 5b0acc659..81e7a44ea 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/26] 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 7af6431f2..b86096171 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 e46623235..e331e5e91 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 90ab29690..a889fa9e2 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/26] 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 000000000..03a2ca6a7
--- /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 000000000..97a2984e0
--- /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 0bb5c78b2..d7eeb7ea9 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 b5daaccc5..7a5be13a1 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 a5b37e833..aaa3c551f 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 f0c2a7591..352b80565 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 5e15a937f..0f07e9d6f 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 1b659b4d0..ce04443d5 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 5957c3675..6888a0142 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 f9b0f5294..87aff7efb 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 23b1d7c5f..ea45a6b27 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 c9c13999b..ce7f3e83b 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 a889fa9e2..b96ace1c3 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 d4122a522..ca1bc2f1c 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);

From beb9530270cb34e733c863f7b16b19912d4d0fef Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 18:21:32 +0900
Subject: [PATCH 13/26] fix(db): preserve active thumbnail jobs during
 migration

---
 apps/server/drizzle/0022_sleepy_turbo.sql | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/server/drizzle/0022_sleepy_turbo.sql b/apps/server/drizzle/0022_sleepy_turbo.sql
index 03a2ca6a7..e63864f04 100644
--- a/apps/server/drizzle/0022_sleepy_turbo.sql
+++ b/apps/server/drizzle/0022_sleepy_turbo.sql
@@ -3,13 +3,16 @@ BEGIN
 	DELETE FROM "jobs" AS duplicate
 	USING "jobs" AS retained
 	WHERE duplicate."type" = 'generate_thumbnail'
-		AND duplicate."status" IN ('pending', 'in_progress')
+		AND duplicate."status" = 'pending'
 		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");
+		AND (
+			retained."status" = 'in_progress'
+			OR (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')

From 340d3b99ebb081790d96a89e442c222d422f4f4e Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 19:05:34 +0900
Subject: [PATCH 14/26] fix(ui): restore virtualized list scroll positions

---
 packages/ui/src/hooks/scroll-container.ts     | 210 ++++++++++++++++++
 packages/ui/src/hooks/use-search-page.ts      |  33 ++-
 .../ui/src/hooks/use-source-media-page.ts     |  59 +----
 3 files changed, 236 insertions(+), 66 deletions(-)

diff --git a/packages/ui/src/hooks/scroll-container.ts b/packages/ui/src/hooks/scroll-container.ts
index cb54bf299..c7841df0d 100644
--- a/packages/ui/src/hooks/scroll-container.ts
+++ b/packages/ui/src/hooks/scroll-container.ts
@@ -1,3 +1,7 @@
+import type { Accessor } from "solid-js";
+import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import { isServer } from "solid-js/web";
+
 export function resolveScrollContainer(
 	selector: string | undefined,
 ): HTMLElement | null {
@@ -26,3 +30,209 @@ export function currentScrollPosition(
 	if (selector) return resolveScrollContainer(selector)?.scrollTop ?? null;
 	return typeof window === "undefined" ? null : window.scrollY;
 }
+
+type ScrollMetrics = {
+	maximum: number;
+};
+
+function getScrollMetrics(selector: string | undefined): ScrollMetrics | null {
+	if (selector) {
+		const container = resolveScrollContainer(selector);
+		if (!container) return null;
+		return {
+			maximum: Math.max(0, container.scrollHeight - container.clientHeight),
+		};
+	}
+
+	if (typeof window === "undefined" || typeof document === "undefined") {
+		return null;
+	}
+
+	return {
+		maximum: Math.max(
+			0,
+			document.documentElement.scrollHeight - window.innerHeight,
+		),
+	};
+}
+
+export type ScrollRestorationOptions = {
+	/** Identifies the result set whose position is being restored. */
+	restoreKey: Accessor<string | undefined>;
+	getPosition: (key: string) => number;
+	setPosition: (key: string, position: number) => void;
+	/** The result grid and its scroll container are ready to measure. */
+	isReady: Accessor<boolean>;
+	hasNextPage: Accessor<boolean>;
+	isFetchingNextPage: Accessor<boolean>;
+	fetchNextPage: () => Promise<unknown> | unknown;
+	scrollContainerSelector?: string;
+};
+
+const MAX_RESTORE_PAGE_FETCHES = 100;
+const RESTORE_SETTLE_DELAY_MS = 100;
+
+/**
+ * Restores a list's scroll position after its initial pages have rendered.
+ *
+ * Virtualized grids only expose the height of the pages they have loaded. When
+ * the saved position is beyond that height, fetch another page and retry after
+ * the grid grows instead of letting the browser clamp the scroll position.
+ */
+export function useScrollRestoration(
+	options: ScrollRestorationOptions,
+): Accessor<boolean> {
+	const [isRestored, setIsRestored] = createSignal(false);
+	let activeKey: string | undefined;
+	let cancelled = false;
+	let fetchCount = 0;
+	let fetchInFlight = false;
+	let frameId: number | undefined;
+	let settleTimer: ReturnType<typeof setTimeout> | undefined;
+	let restoreGeneration = 0;
+
+	const requestRestore = () => {
+		if (frameId !== undefined || isServer) return;
+		frameId = requestAnimationFrame(() => {
+			frameId = undefined;
+			void attemptRestore();
+		});
+	};
+
+	const finishAt = (position: number, maximum: number) => {
+		const key = activeKey;
+		if (!key || cancelled) return;
+		const target = Math.min(Math.max(position, 0), maximum);
+		scrollToPosition(options.scrollContainerSelector, target);
+		if (target === 0) {
+			setIsRestored(true);
+			return;
+		}
+
+		if (settleTimer !== undefined) clearTimeout(settleTimer);
+		settleTimer = setTimeout(() => {
+			settleTimer = undefined;
+			if (cancelled || !activeKey) return;
+			const latestMetrics = getScrollMetrics(options.scrollContainerSelector);
+			if (!latestMetrics) {
+				requestRestore();
+				return;
+			}
+			scrollToPosition(
+				options.scrollContainerSelector,
+				Math.min(target, latestMetrics.maximum),
+			);
+			setIsRestored(true);
+		}, RESTORE_SETTLE_DELAY_MS);
+	};
+
+	const attemptRestore = async () => {
+		const key = activeKey;
+		const generation = restoreGeneration;
+		if (
+			!key ||
+			cancelled ||
+			isRestored() ||
+			settleTimer !== undefined ||
+			!options.isReady() ||
+			generation !== restoreGeneration
+		) {
+			return;
+		}
+
+		const metrics = getScrollMetrics(options.scrollContainerSelector);
+		if (!metrics) {
+			requestRestore();
+			return;
+		}
+
+		const target = Math.max(0, options.getPosition(key));
+		if (target <= metrics.maximum + 1) {
+			finishAt(target, metrics.maximum);
+			return;
+		}
+
+		if (!options.hasNextPage() || fetchCount >= MAX_RESTORE_PAGE_FETCHES) {
+			finishAt(target, metrics.maximum);
+			return;
+		}
+
+		if (options.isFetchingNextPage() || fetchInFlight) return;
+
+		fetchCount += 1;
+		fetchInFlight = true;
+		try {
+			await options.fetchNextPage();
+		} catch {
+			// A failed prefetch should not leave the route permanently blocked.
+			if (generation === restoreGeneration) {
+				const latestMetrics = getScrollMetrics(options.scrollContainerSelector);
+				if (latestMetrics) finishAt(target, latestMetrics.maximum);
+			}
+		} finally {
+			fetchInFlight = false;
+			if (!cancelled && !isRestored()) requestRestore();
+		}
+	};
+
+	const savePosition = () => {
+		if (isServer) return;
+		const key = activeKey;
+		if (!key) return;
+		const position = currentScrollPosition(options.scrollContainerSelector);
+		if (position !== null) options.setPosition(key, position);
+	};
+
+	createEffect(() => {
+		const key = options.restoreKey();
+		if (key !== activeKey) {
+			savePosition();
+			activeKey = key;
+			cancelled = false;
+			fetchCount = 0;
+			if (settleTimer !== undefined) {
+				clearTimeout(settleTimer);
+				settleTimer = undefined;
+			}
+			restoreGeneration += 1;
+			setIsRestored(false);
+		}
+
+		// Track pagination transitions so a completed fetch retries restoration.
+		options.hasNextPage();
+		options.isFetchingNextPage();
+		if (key && options.isReady() && !isRestored() && !cancelled) {
+			requestRestore();
+		}
+	});
+
+	onMount(() => {
+		if ("scrollRestoration" in history) {
+			history.scrollRestoration = "manual";
+		}
+
+		const cancelRestore = () => {
+			if (!isRestored()) cancelled = true;
+		};
+		window.addEventListener("pointerdown", cancelRestore, { passive: true });
+		window.addEventListener("wheel", cancelRestore, { passive: true });
+		window.addEventListener("touchstart", cancelRestore, { passive: true });
+		window.addEventListener("keydown", cancelRestore);
+		onCleanup(() => {
+			window.removeEventListener("pointerdown", cancelRestore);
+			window.removeEventListener("wheel", cancelRestore);
+			window.removeEventListener("touchstart", cancelRestore);
+			window.removeEventListener("keydown", cancelRestore);
+		});
+	});
+
+	onCleanup(() => {
+		cancelled = true;
+		restoreGeneration += 1;
+		if (frameId !== undefined) cancelAnimationFrame(frameId);
+		if (settleTimer !== undefined) clearTimeout(settleTimer);
+		savePosition();
+	});
+
+	return isRestored;
+}
diff --git a/packages/ui/src/hooks/use-search-page.ts b/packages/ui/src/hooks/use-search-page.ts
index b86096171..e99ca5be0 100644
--- a/packages/ui/src/hooks/use-search-page.ts
+++ b/packages/ui/src/hooks/use-search-page.ts
@@ -20,7 +20,7 @@ import {
 import { isServer } from "solid-js/web";
 import { buildSearchResultsQueryOptions } from "../query-options";
 import { type QueryUiState, toQueryUiState } from "../query-state";
-import { currentScrollPosition, scrollToPosition } from "./scroll-container";
+import { scrollToPosition, useScrollRestoration } from "./scroll-container";
 
 const DEFAULT_GC_TIME = 1000 * 60 * 5;
 const DEFAULT_REFRESH_DEBOUNCE_MS = 0;
@@ -247,27 +247,22 @@ export function useSearchPage(
 		);
 	};
 
-	const [isRestored, setIsRestored] = createSignal(false);
-	createEffect(() => {
-		if (
-			!(searchResultQuery.isLoading || isRestored()) &&
-			searchResultQuery.data &&
-			searchResultQuery.data.pages.length > 0
-		) {
-			if (scrollY() > 0) {
-				requestAnimationFrame(() => {
-					scrollToPosition(options.scrollContainerSelector, scrollY());
-				});
-			}
-			setIsRestored(true);
-		}
+	const isRestored = useScrollRestoration({
+		restoreKey: () => "search",
+		getPosition: () => scrollY(),
+		setPosition: (key, position) => {
+			void key;
+			setScrollY(position);
+		},
+		isReady: () =>
+			Boolean(searchResultQuery.data) && !searchResultQuery.isLoading,
+		hasNextPage: () => searchResultQuery.hasNextPage,
+		isFetchingNextPage: () => searchResultQuery.isFetchingNextPage,
+		fetchNextPage: () => searchResultQuery.fetchNextPage(),
+		scrollContainerSelector: options.scrollContainerSelector,
 	});
 
 	onCleanup(() => {
-		if (!isServer) {
-			const position = currentScrollPosition(options.scrollContainerSelector);
-			if (position !== null) setScrollY(position);
-		}
 		const timer = refreshTimer();
 		if (timer) {
 			clearTimeout(timer);
diff --git a/packages/ui/src/hooks/use-source-media-page.ts b/packages/ui/src/hooks/use-source-media-page.ts
index e331e5e91..c8d096955 100644
--- a/packages/ui/src/hooks/use-source-media-page.ts
+++ b/packages/ui/src/hooks/use-source-media-page.ts
@@ -36,12 +36,11 @@ import { type QueryUiState, toQueryUiState } from "../query-state";
 import type { PresetManagerClient } from "../search-control-panel";
 import { toast } from "../toast";
 import { getRestoreImportStrategies } from "./restore-import";
-import { currentScrollPosition, scrollToPosition } from "./scroll-container";
+import { scrollToPosition, useScrollRestoration } from "./scroll-container";
 import type { MediaSourceEventTransport } from "./use-media-source-events";
 import { useMediaSourceEvents } from "./use-media-source-events";
 
 export const SOURCE_MEDIA_ITEMS_PER_PAGE = 200;
-const SCROLL_RESTORE_DELAY = 100;
 const DEBOUNCE_DELAY_MS = 1000;
 const MEDIA_REFRESH_DEBOUNCE_MS = 300;
 
@@ -295,55 +294,21 @@ export function useSourceMediaPage(
 
 	// --- Search handler ---
 	const handleSearch = () => {
+		const sourceId = id();
+		if (sourceId) setScrollPosition(sourceId, 0);
 		scrollToPosition(options.scrollContainerSelector, 0);
 	};
 
 	// --- Scroll restoration ---
-	const [isScrollRestored, setIsScrollRestored] = createSignal(false);
-
-	onMount(() => {
-		if ("scrollRestoration" in history) {
-			history.scrollRestoration = "manual";
-		}
-	});
-
-	createEffect(() => {
-		if (isServer) {
-			return;
-		}
-		if (isScrollRestored()) {
-			return;
-		}
-
-		const sourceId = id();
-		if (!sourceId) {
-			return;
-		}
-
-		if (mediaQuery.data && !mediaQuery.isLoading) {
-			const targetScrollY = getScrollPosition(sourceId);
-			if (targetScrollY > 0) {
-				setTimeout(() => {
-					requestAnimationFrame(() => {
-						scrollToPosition(options.scrollContainerSelector, targetScrollY);
-						setIsScrollRestored(true);
-					});
-				}, SCROLL_RESTORE_DELAY);
-			} else {
-				setIsScrollRestored(true);
-			}
-		}
-	});
-
-	onCleanup(() => {
-		if (isServer) {
-			return;
-		}
-		const sourceId = id();
-		if (sourceId) {
-			const position = currentScrollPosition(options.scrollContainerSelector);
-			if (position !== null) setScrollPosition(sourceId, position);
-		}
+	useScrollRestoration({
+		restoreKey: id,
+		getPosition: (sourceId) => getScrollPosition(sourceId),
+		setPosition: (sourceId, position) => setScrollPosition(sourceId, position),
+		isReady: () => Boolean(mediaQuery.data) && !mediaQuery.isLoading,
+		hasNextPage: () => mediaQuery.hasNextPage,
+		isFetchingNextPage: () => mediaQuery.isFetchingNextPage,
+		fetchNextPage: () => mediaQuery.fetchNextPage(),
+		scrollContainerSelector: options.scrollContainerSelector,
 	});
 
 	// --- Infinite scroll ---

From e5d9cd5ca72fb883226de85153d0b0c1eb1ff12c Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 20:30:44 +0900
Subject: [PATCH 15/26] fix(ui): avoid overwriting pending scroll restoration

---
 packages/ui/src/hooks/scroll-container.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ui/src/hooks/scroll-container.ts b/packages/ui/src/hooks/scroll-container.ts
index c7841df0d..f83c73cdf 100644
--- a/packages/ui/src/hooks/scroll-container.ts
+++ b/packages/ui/src/hooks/scroll-container.ts
@@ -177,6 +177,7 @@ export function useScrollRestoration(
 
 	const savePosition = () => {
 		if (isServer) return;
+		if (!isRestored()) return;
 		const key = activeKey;
 		if (!key) return;
 		const position = currentScrollPosition(options.scrollContainerSelector);

From 1fc06044ab1e8dc1bc4e9b23bba9cfee2adf6d93 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 21:47:59 +0900
Subject: [PATCH 16/26] fix(ui): preserve search scroll and recover grid images

---
 .../hooks/use-current-search-persistence.test.ts    | 13 +++++++++++++
 .../ui/src/hooks/use-current-search-persistence.ts  |  5 ++++-
 packages/ui/src/source-media-grid.tsx               |  5 ++++-
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/hooks/use-current-search-persistence.test.ts b/packages/ui/src/hooks/use-current-search-persistence.test.ts
index 2db333f31..427c4290e 100644
--- a/packages/ui/src/hooks/use-current-search-persistence.test.ts
+++ b/packages/ui/src/hooks/use-current-search-persistence.test.ts
@@ -185,6 +185,19 @@ describe("useCurrentSearchPersistence", () => {
 		expect(searchState.selectedSource).toBe("saved-source");
 	});
 
+	it("preserves the current scroll position while restoring search state", async () => {
+		setSearchState("scrollY", 1840);
+		sessionStorage.setItem(
+			"current-all",
+			JSON.stringify(createPersistedSimpleState("saved query")),
+		);
+
+		mountPersistence("all");
+		await flushMicrotasks();
+
+		expect(searchState.scrollY).toBe(1840);
+	});
+
 	it("does not inherit a source for legacy vector sessions", async () => {
 		setSearchState("selectedSource", "stale-source");
 		sessionStorage.setItem(
diff --git a/packages/ui/src/hooks/use-current-search-persistence.ts b/packages/ui/src/hooks/use-current-search-persistence.ts
index a8fed356e..99eeb6633 100644
--- a/packages/ui/src/hooks/use-current-search-persistence.ts
+++ b/packages/ui/src/hooks/use-current-search-persistence.ts
@@ -47,9 +47,10 @@ function applyPreset(
 	if (!shouldApply()) {
 		return;
 	}
+	const preservedScrollY = searchState.scrollY;
 	resetSearchState();
 	loadPreset(preset);
-	setSearchState("selectedSource", selectedSource);
+	setSearchState({ selectedSource, scrollY: preservedScrollY });
 	if (clearActivePreset) {
 		setSearchState("activePresetId", null);
 	}
@@ -102,6 +103,7 @@ function restoreCurrentSearchState(
 		if (!shouldApply()) {
 			return;
 		}
+		const preservedScrollY = searchState.scrollY;
 		const selectedSource =
 			typeof current.selectedSource === "string" ? current.selectedSource : "";
 		resetSearchState();
@@ -116,6 +118,7 @@ function restoreCurrentSearchState(
 				current.similarityTopK === 20 || current.similarityTopK === 100
 					? current.similarityTopK
 					: 50,
+			scrollY: preservedScrollY,
 		});
 		return;
 	}
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index b96ace1c3..a5ba3e8b4 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -248,7 +248,10 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 	): MediaGridImageLoadPolicy => {
 		const state = elementLoadState();
 		if (!state) {
-			return { enabled: false };
+			// A virtualizer can briefly have no measured range while its scroll
+			// container is being restored. Keep mounted rows loadable so a
+			// transient range reset does not blank the entire viewport.
+			return { enabled: true, loading: "lazy" };
 		}
 
 		const isVisible =

From 74980409905a3bfce04e91ac99af25e7c4cca491 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Sun, 2 Aug 2026 22:30:00 +0900
Subject: [PATCH 17/26] fix(ui): keep restored virtual grids populated

Keep mounted virtual rows loadable while navigation restoration settles and persist user-owned scroll positions when restoration is cancelled. Add a paginated deep-scroll regression fixture covering post-restore scrolling.
---
 .../tests/e2e/ui-components.gallery.spec.ts   | 18 ++++++++
 apps/server/src/tests/e2e/ui-gallery/src.tsx  | 43 +++++++++++++++++--
 packages/ui/src/hooks/scroll-container.ts     |  8 +++-
 packages/ui/src/source-media-grid.tsx         |  9 +++-
 4 files changed, 71 insertions(+), 7 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 98fffe768..69f9901a5 100644
--- a/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
+++ b/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
@@ -258,6 +258,24 @@ test("virtual media grid stays populated and DOM-bounded during fast scrolling",
 	expect(transferSummary.retransferredUrls).toEqual([]);
 });
 
+test("virtual media grid stays populated after restoring a deep scroll position", async ({
+	page,
+}) => {
+	await page.setViewportSize({ width: 1_280, height: 720 });
+	await page.goto(`${getGalleryUrl()}/?virtual-grid=1&restore-grid=1`);
+
+	const scroller = page.getByTestId("virtual-grid-scroller");
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollTop))
+		.toBeGreaterThan(1_000);
+	await expectVisibleImagesLoaded(scroller);
+
+	await scroller.evaluate((element) => {
+		element.scrollTop += element.clientHeight * 2;
+	});
+	await expectVisibleImagesLoaded(scroller);
+});
+
 test.describe("high-density virtual media grid", () => {
 	test.use({ deviceScaleFactor: 2 });
 
diff --git a/apps/server/src/tests/e2e/ui-gallery/src.tsx b/apps/server/src/tests/e2e/ui-gallery/src.tsx
index 1896dc949..f9ceef65a 100644
--- a/apps/server/src/tests/e2e/ui-gallery/src.tsx
+++ b/apps/server/src/tests/e2e/ui-gallery/src.tsx
@@ -62,6 +62,7 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@solid-imager/ui/dialog";
+import { useScrollRestoration } from "@solid-imager/ui/hooks/scroll-container";
 import { Input } from "@solid-imager/ui/input";
 import {
 	Popover,
@@ -132,6 +133,38 @@ const VIRTUAL_GRID_MEDIA = Array.from(
 );
 
 function VirtualGridGallery() {
+	const restoreGrid = new URLSearchParams(window.location.search).has(
+		"restore-grid",
+	);
+	const [loadedCount, setLoadedCount] = createSignal(
+		restoreGrid ? 200 : VIRTUAL_GRID_ITEM_COUNT,
+	);
+	const [isFetchingNextPage, setIsFetchingNextPage] = createSignal(false);
+	const mediaResults = () => VIRTUAL_GRID_MEDIA.slice(0, loadedCount());
+	const fetchNextPage = async () => {
+		if (
+			!restoreGrid ||
+			isFetchingNextPage() ||
+			loadedCount() >= VIRTUAL_GRID_ITEM_COUNT
+		) {
+			return;
+		}
+		setIsFetchingNextPage(true);
+		await new Promise((resolve) => setTimeout(resolve, 10));
+		setLoadedCount((count) => Math.min(count + 200, VIRTUAL_GRID_ITEM_COUNT));
+		setIsFetchingNextPage(false);
+	};
+	useScrollRestoration({
+		restoreKey: () => "virtual-grid",
+		getPosition: () => (restoreGrid ? 20_000 : 0),
+		setPosition: () => undefined,
+		isReady: () => mediaResults().length > 0,
+		hasNextPage: () => loadedCount() < VIRTUAL_GRID_ITEM_COUNT,
+		isFetchingNextPage,
+		fetchNextPage,
+		scrollContainerSelector: "[data-media-scroll]",
+	});
+
 	return (
 		<main class="h-dvh bg-background p-4 text-foreground">
 			<h1 class="sr-only">Virtual media grid performance fixture</h1>
@@ -143,10 +176,12 @@ function VirtualGridGallery() {
 				<SourceMediaGrid
 					disableContextMenu
 					enableVirtualization
-					isFetchingNextPage={false}
+					isFetchingNextPage={isFetchingNextPage()}
 					itemAspectRatio={4 / 3}
-					mediaResults={() => VIRTUAL_GRID_MEDIA}
-					mediaSourceId={() => VIRTUAL_GRID_MEDIA[0]?.mediaSourceId}
+					hasNextPage={loadedCount() < VIRTUAL_GRID_ITEM_COUNT}
+					mediaResults={mediaResults}
+					mediaSourceId={() => mediaResults()[0]?.mediaSourceId}
+					onLoadMore={fetchNextPage}
 					renderItem={(media, options) => (
 						// The immutable, uniquely-addressed URLs exercise the browser's real
 						// memory cache when a virtual row is unmounted and revisited.
@@ -177,7 +212,7 @@ function VirtualGridGallery() {
 					setLoadMoreRef={() => undefined}
 					showResultCount={false}
 					state={() => ({
-						data: VIRTUAL_GRID_MEDIA,
+						data: mediaResults(),
 						error: undefined,
 						fetchState: "idle",
 						phase: "data",
diff --git a/packages/ui/src/hooks/scroll-container.ts b/packages/ui/src/hooks/scroll-container.ts
index f83c73cdf..1565ed8fa 100644
--- a/packages/ui/src/hooks/scroll-container.ts
+++ b/packages/ui/src/hooks/scroll-container.ts
@@ -213,7 +213,13 @@ export function useScrollRestoration(
 		}
 
 		const cancelRestore = () => {
-			if (!isRestored()) cancelled = true;
+			if (!isRestored()) {
+				cancelled = true;
+				// User input takes ownership of the scroll position. Mark the
+				// restoration complete so cleanup persists the position they chose
+				// instead of treating it as an unfinished restore.
+				setIsRestored(true);
+			}
 		};
 		window.addEventListener("pointerdown", cancelRestore, { passive: true });
 		window.addEventListener("wheel", cancelRestore, { passive: true });
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index a5ba3e8b4..6fc8e6d0d 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -267,14 +267,19 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		const isPrefetch = isForwardPrefetch || isBackwardPrefetch;
 
 		return {
-			enabled: isVisible || isPrefetch,
+			// The element virtualizer already bounds the DOM to the visible range
+			// plus a small directional buffer. Keep every mounted row loadable:
+			// during navigation restoration the virtualizer can report the previous
+			// range for one frame, and disabling those rows leaves the viewport blank
+			// when the user scrolls again.
+			enabled: true,
 			fetchpriority:
 				isVisible && mediaIndex < INITIAL_HIGH_PRIORITY_MEDIA
 					? "high"
 					: isPrefetch
 						? "low"
 						: undefined,
-			loading: isVisible || isPrefetch ? "eager" : "lazy",
+			loading: "eager",
 		};
 	};
 	const createElementImageLoadPolicy = (

From a965cd3faa5eb004529e4c6b0c6ea652a4eccff8 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Mon, 3 Aug 2026 00:11:18 +0900
Subject: [PATCH 18/26] fix(ui): initialize virtual grid after scroll
 restoration

Re-measure the nested virtualizer when its scroll container and content offset become available, and eagerly load mounted rows while the initial range is settling.
---
 packages/ui/src/source-media-grid.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index 6fc8e6d0d..ef7c3781a 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -251,7 +251,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 			// A virtualizer can briefly have no measured range while its scroll
 			// container is being restored. Keep mounted rows loadable so a
 			// transient range reset does not blank the entire viewport.
-			return { enabled: true, loading: "lazy" };
+			return { enabled: true, loading: "eager" };
 		}
 
 		const isVisible =
@@ -342,6 +342,12 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		rowCount();
 		mediaItemHeight();
 		columnCount();
+		// The element virtualizer is created before the grid's mount callback
+		// discovers its nested scroller. Re-measure when that scroller or the
+		// content offset becomes available so the initial range is populated
+		// without requiring a user scroll event.
+		scrollElement();
+		scrollMargin();
 		mediaRowVirtualizer().measure();
 	});
 

From dc3925f22c3a661118c4ceeda7bce7a11ee1074a Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Mon, 3 Aug 2026 01:11:07 +0900
Subject: [PATCH 19/26] fix(ui): stabilize v2 search scroll updates

---
 apps/server/src/routes/v2/search.tsx          |  2 +-
 packages/ui/src/screens/v2-search-screen.tsx  | 43 ++++++++++---------
 .../ui/src/screens/v2-source-media-screen.tsx | 43 ++++++++++---------
 packages/ui/src/source-media-page.tsx         |  4 +-
 4 files changed, 50 insertions(+), 42 deletions(-)

diff --git a/apps/server/src/routes/v2/search.tsx b/apps/server/src/routes/v2/search.tsx
index ad67e4206..e2b158511 100644
--- a/apps/server/src/routes/v2/search.tsx
+++ b/apps/server/src/routes/v2/search.tsx
@@ -69,7 +69,7 @@ function V2SearchRoute() {
 		similarityTopK: () => searchState.similarityTopK,
 		refreshDebounceMs: SEARCH_RESULTS_REFRESH_DEBOUNCE_MS,
 		isSearchStateRestored,
-		scrollContainerSelector: "[data-media-scroll]",
+		scrollContainerSelector: '[data-media-scroll="v2-search"]',
 	});
 
 	useMediaSourceEvents(() => searchState.selectedSource || "*", {
diff --git a/packages/ui/src/screens/v2-search-screen.tsx b/packages/ui/src/screens/v2-search-screen.tsx
index 5b1367488..a2ae6075c 100644
--- a/packages/ui/src/screens/v2-search-screen.tsx
+++ b/packages/ui/src/screens/v2-search-screen.tsx
@@ -45,32 +45,35 @@ export function V2SearchScreen(props: SearchScreenProps) {
 				sourceName={sourceName()}
 				sources={props.sources}
 			/>
+			<div class="shrink-0 px-3 pt-3 sm:px-4">
+				<Show
+					when={filterStates().some(
+						(state) => state.phase === "error" || state.phase === "offline",
+					)}
+				>
+					<FilterErrorBanner
+						class="mb-2"
+						message="一部の検索フィルターを取得できませんでした。検索結果は引き続き利用できます。"
+						onRetry={page().retryFilters}
+					/>
+				</Show>
+				<div class="h-8">
+					<QueryStatus
+						fetchState={page().contentState().fetchState}
+						hasData={page().contentState().data !== undefined}
+						hideWhenIdle
+						offlineLabel="オフラインのため保存済みの検索結果を表示しています"
+						updatingLabel="検索結果を更新中..."
+					/>
+				</div>
+			</div>
 
 			<div
 				class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3 sm:px-4 [scrollbar-gutter:stable]"
-				data-media-scroll
+				data-media-scroll="v2-search"
 			>
 				<div class="2xl:grid 2xl:grid-cols-[minmax(0,1fr)_clamp(20rem,26vw,26rem)] 2xl:items-start 2xl:gap-4">
 					<div class="min-w-0">
-						<Show
-							when={filterStates().some(
-								(state) => state.phase === "error" || state.phase === "offline",
-							)}
-						>
-							<FilterErrorBanner
-								class="mb-3"
-								message="一部の検索フィルターを取得できませんでした。検索結果は引き続き利用できます。"
-								onRetry={page().retryFilters}
-							/>
-						</Show>
-						<QueryStatus
-							class="mb-2"
-							fetchState={page().contentState().fetchState}
-							hasData={page().contentState().data !== undefined}
-							hideWhenIdle
-							offlineLabel="オフラインのため保存済みの検索結果を表示しています"
-							updatingLabel="検索結果を更新中..."
-						/>
 						<Show
 							fallback={
 								<LoadingRegion label="検索結果を読み込んでいます...">
diff --git a/packages/ui/src/screens/v2-source-media-screen.tsx b/packages/ui/src/screens/v2-source-media-screen.tsx
index 08c28ebc3..31f4c970d 100644
--- a/packages/ui/src/screens/v2-source-media-screen.tsx
+++ b/packages/ui/src/screens/v2-source-media-screen.tsx
@@ -81,32 +81,35 @@ export function V2SourceMediaScreen(props: SourceMediaScreenProps) {
 			<Show when={props.renderJobProgress && page().jobProgress()}>
 				{props.renderJobProgress?.({ jobProgress: page().jobProgress })}
 			</Show>
+			<div class="shrink-0 px-3 pt-3 sm:px-4">
+				<Show
+					when={filterStates().some(
+						(state) => state.phase === "error" || state.phase === "offline",
+					)}
+				>
+					<FilterErrorBanner
+						class="mb-2"
+						message="一部の検索フィルターを取得できませんでした。メディア一覧は引き続き利用できます。"
+						onRetry={props.onRetryFilters}
+					/>
+				</Show>
+				<div class="h-8">
+					<QueryStatus
+						fetchState={page().contentState().fetchState}
+						hasData={page().contentState().data !== undefined}
+						hideWhenIdle
+						offlineLabel="オフラインのため保存済みデータを表示しています"
+						updatingLabel="メディア一覧を更新中..."
+					/>
+				</div>
+			</div>
 
 			<div
 				class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3 sm:px-4 [scrollbar-gutter:stable]"
-				data-media-scroll
+				data-media-scroll={page().mediaSourceId() ?? "v2-source"}
 			>
 				<div class="2xl:grid 2xl:grid-cols-[minmax(0,1fr)_clamp(20rem,26vw,26rem)] 2xl:items-start 2xl:gap-4">
 					<div class="min-w-0">
-						<Show
-							when={filterStates().some(
-								(state) => state.phase === "error" || state.phase === "offline",
-							)}
-						>
-							<FilterErrorBanner
-								class="mb-3"
-								message="一部の検索フィルターを取得できませんでした。メディア一覧は引き続き利用できます。"
-								onRetry={props.onRetryFilters}
-							/>
-						</Show>
-						<QueryStatus
-							class="mb-2"
-							fetchState={page().contentState().fetchState}
-							hasData={page().contentState().data !== undefined}
-							hideWhenIdle
-							offlineLabel="オフラインのため保存済みデータを表示しています"
-							updatingLabel="メディア一覧を更新中..."
-						/>
 						<Show
 							fallback={
 								<LoadingRegion label="メディア一覧を読み込んでいます...">
diff --git a/packages/ui/src/source-media-page.tsx b/packages/ui/src/source-media-page.tsx
index c2c2bcad6..9e6f30e29 100644
--- a/packages/ui/src/source-media-page.tsx
+++ b/packages/ui/src/source-media-page.tsx
@@ -123,7 +123,9 @@ export function SourceMediaPage(props: SourceMediaPageProps): JSX.Element {
 		onThumbnailReady: props.onThumbnailReady,
 		isSearchStateRestored,
 		scrollContainerSelector:
-			props.variant === "v2" ? "[data-media-scroll]" : undefined,
+			props.variant === "v2"
+				? `[data-media-scroll="${props.mediaSourceId()}"]`
+				: undefined,
 	});
 
 	const renderActions: SourceMediaScreenProps["renderActions"] = (actions) => (

From d02df0710fce96be99cd9da88bf16e2a7614e71c Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Mon, 3 Aug 2026 22:33:46 +0900
Subject: [PATCH 20/26] fix(ui): resync virtual grid after cancelled
 restoration

---
 packages/ui/src/hooks/scroll-container.ts | 49 +++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/packages/ui/src/hooks/scroll-container.ts b/packages/ui/src/hooks/scroll-container.ts
index 1565ed8fa..7d6b16752 100644
--- a/packages/ui/src/hooks/scroll-container.ts
+++ b/packages/ui/src/hooks/scroll-container.ts
@@ -90,6 +90,8 @@ export function useScrollRestoration(
 	let frameId: number | undefined;
 	let settleTimer: ReturnType<typeof setTimeout> | undefined;
 	let restoreGeneration = 0;
+	let reconcileFrameId: number | undefined;
+	let secondReconcileFrameId: number | undefined;
 
 	const requestRestore = () => {
 		if (frameId !== undefined || isServer) return;
@@ -212,13 +214,56 @@ export function useScrollRestoration(
 			history.scrollRestoration = "manual";
 		}
 
+		const notifyScrollPosition = () => {
+			if (options.scrollContainerSelector) {
+				resolveScrollContainer(options.scrollContainerSelector)?.dispatchEvent(
+					new Event("scroll"),
+				);
+				return;
+			}
+			window.dispatchEvent(new Event("scroll"));
+		};
+
+		const reconcileVirtualizerPosition = () => {
+			notifyScrollPosition();
+			if (reconcileFrameId !== undefined) {
+				cancelAnimationFrame(reconcileFrameId);
+			}
+			if (secondReconcileFrameId !== undefined) {
+				cancelAnimationFrame(secondReconcileFrameId);
+			}
+			reconcileFrameId = requestAnimationFrame(() => {
+				reconcileFrameId = undefined;
+				notifyScrollPosition();
+				secondReconcileFrameId = requestAnimationFrame(() => {
+					secondReconcileFrameId = undefined;
+					notifyScrollPosition();
+				});
+			});
+		};
+
 		const cancelRestore = () => {
 			if (!isRestored()) {
 				cancelled = true;
+				restoreGeneration += 1;
+				if (frameId !== undefined) {
+					cancelAnimationFrame(frameId);
+					frameId = undefined;
+				}
+				if (settleTimer !== undefined) {
+					clearTimeout(settleTimer);
+					settleTimer = undefined;
+				}
 				// User input takes ownership of the scroll position. Mark the
 				// restoration complete so cleanup persists the position they chose
 				// instead of treating it as an unfinished restore.
 				setIsRestored(true);
+				// The virtualizer listens to native scroll events. A user event can
+				// cancel restoration before the browser changes scrollTop, leaving
+				// its previous (restored) range mounted at the top of the container.
+				// Re-notify it now and for the next two frames so it reconciles with
+				// the actual scroll position after pending layout work settles.
+				reconcileVirtualizerPosition();
 			}
 		};
 		window.addEventListener("pointerdown", cancelRestore, { passive: true });
@@ -238,6 +283,10 @@ export function useScrollRestoration(
 		restoreGeneration += 1;
 		if (frameId !== undefined) cancelAnimationFrame(frameId);
 		if (settleTimer !== undefined) clearTimeout(settleTimer);
+		if (reconcileFrameId !== undefined) cancelAnimationFrame(reconcileFrameId);
+		if (secondReconcileFrameId !== undefined) {
+			cancelAnimationFrame(secondReconcileFrameId);
+		}
 		savePosition();
 	});
 

From de9418d15863531f8c0d3bd5e5face005532f5de Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Mon, 3 Aug 2026 22:47:33 +0900
Subject: [PATCH 21/26] fix(ui): resync virtual grid after result updates

---
 packages/ui/src/source-media-grid.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index ef7c3781a..30da2bf2d 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -348,7 +348,21 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		// without requiring a user scroll event.
 		scrollElement();
 		scrollMargin();
-		mediaRowVirtualizer().measure();
+		const virtualizer = mediaRowVirtualizer();
+		virtualizer.measure();
+		const element = scrollElement();
+		if (
+			props.scrollMode === "element" &&
+			element &&
+			virtualizer.scrollOffset !== null &&
+			virtualizer.scrollOffset !== element.scrollTop
+		) {
+			// Query updates can clamp the real scroll position while the
+			// virtualizer still holds the previous offset. Reconcile from the
+			// element before rendering the next range instead of leaving rows
+			// mounted outside the viewport until another user scroll event.
+			virtualizer.scrollToOffset(element.scrollTop);
+		}
 	});
 
 	// Virtual scroll-based load more: trigger when user scrolls near the end

From 4050e4bebd5c0d4231b83e3cd1a049db1025c382 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Mon, 3 Aug 2026 22:56:19 +0900
Subject: [PATCH 22/26] fix(ui): notify element virtualizer after grid updates

---
 packages/ui/src/source-media-grid.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index 30da2bf2d..de2d3e7b3 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -363,6 +363,13 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 			// mounted outside the viewport until another user scroll event.
 			virtualizer.scrollToOffset(element.scrollTop);
 		}
+		if (props.scrollMode === "element" && element) {
+			// Element scroll containers do not consistently emit a native scroll
+			// event when their content is replaced or clamped. Window scrolling in
+			// the v1 screen gets that notification from the browser automatically;
+			// keep the v2 virtualizer in the same state after every grid update.
+			element.dispatchEvent(new Event("scroll"));
+		}
 	});
 
 	// Virtual scroll-based load more: trigger when user scrolls near the end

From 53c720470c939b8ead92d08b3cf5f62a33c83e88 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Mon, 3 Aug 2026 23:44:08 +0900
Subject: [PATCH 23/26] fix(ui): prevent virtual grid scroll reset

---
 .../tests/e2e/ui-components.gallery.spec.ts   |  52 ++++++
 apps/server/src/tests/e2e/ui-gallery/src.tsx  | 168 +++++++++++-------
 packages/ui/src/source-media-grid.tsx         |  17 +-
 3 files changed, 161 insertions(+), 76 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 69f9901a5..88ccb61cf 100644
--- a/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
+++ b/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
@@ -276,6 +276,58 @@ test("virtual media grid stays populated after restoring a deep scroll position"
 	await expectVisibleImagesLoaded(scroller);
 });
 
+test("virtual media grid preserves offset after a route-style remount and page update", async ({
+	page,
+}) => {
+	await page.setViewportSize({ width: 1_280, height: 720 });
+	await page.goto(`${getGalleryUrl()}/?virtual-grid=1&remount-grid=1`);
+
+	const scroller = page.getByTestId("virtual-grid-scroller");
+	await expect(scroller.locator("[data-media-id]").first()).toBeVisible();
+	await scroller.evaluate(async (element) => {
+		element.scrollTop = 1_500;
+		await new Promise<void>((resolve) =>
+			requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+		);
+	});
+	const beforeRemount = await scroller.evaluate((element) => element.scrollTop);
+	expect(beforeRemount).toBeGreaterThan(500);
+
+	await page.getByTestId("remount-virtual-grid").click();
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollTop))
+		.toBeGreaterThan(beforeRemount - 2);
+	await page.evaluate(() =>
+		window.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 })),
+	);
+	const restoredTop = await scroller.evaluate((element) => element.scrollTop);
+	const heightBeforeAppend = await scroller.evaluate(
+		(element) => element.scrollHeight,
+	);
+	const nextTop = restoredTop + 1_800;
+
+	await page.evaluate((targetTop) => {
+		const element = document.querySelector<HTMLElement>(
+			"[data-testid=virtual-grid-scroller]",
+		);
+		if (!element) throw new Error("Virtual grid scroller was not found");
+		element.scrollTop = 0;
+		document
+			.querySelector<HTMLElement>("[data-testid=append-virtual-grid-page]")
+			?.click();
+		requestAnimationFrame(() => {
+			element.scrollTop = targetTop;
+		});
+	}, nextTop);
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollHeight))
+		.toBeGreaterThan(heightBeforeAppend);
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollTop))
+		.toBeGreaterThan(restoredTop + 100);
+	await expectVisibleImagesLoaded(scroller);
+});
+
 test.describe("high-density virtual media grid", () => {
 	test.use({ deviceScaleFactor: 2 });
 
diff --git a/apps/server/src/tests/e2e/ui-gallery/src.tsx b/apps/server/src/tests/e2e/ui-gallery/src.tsx
index f9ceef65a..526404b59 100644
--- a/apps/server/src/tests/e2e/ui-gallery/src.tsx
+++ b/apps/server/src/tests/e2e/ui-gallery/src.tsx
@@ -101,7 +101,7 @@ import {
 } 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 { createSignal, Show } from "solid-js";
 import { render } from "solid-js/web";
 import "../../../app.css";
 
@@ -133,17 +133,20 @@ const VIRTUAL_GRID_MEDIA = Array.from(
 );
 
 function VirtualGridGallery() {
-	const restoreGrid = new URLSearchParams(window.location.search).has(
-		"restore-grid",
-	);
+	const params = new URLSearchParams(window.location.search);
+	const restoreGrid = params.has("restore-grid");
+	const remountGrid = params.has("remount-grid");
+	const pagedGrid = restoreGrid || remountGrid;
 	const [loadedCount, setLoadedCount] = createSignal(
-		restoreGrid ? 200 : VIRTUAL_GRID_ITEM_COUNT,
+		pagedGrid ? 200 : VIRTUAL_GRID_ITEM_COUNT,
 	);
 	const [isFetchingNextPage, setIsFetchingNextPage] = createSignal(false);
+	const [savedScrollTop, setSavedScrollTop] = createSignal(0);
+	const [showGrid, setShowGrid] = createSignal(true);
 	const mediaResults = () => VIRTUAL_GRID_MEDIA.slice(0, loadedCount());
 	const fetchNextPage = async () => {
 		if (
-			!restoreGrid ||
+			!pagedGrid ||
 			isFetchingNextPage() ||
 			loadedCount() >= VIRTUAL_GRID_ITEM_COUNT
 		) {
@@ -154,71 +157,112 @@ function VirtualGridGallery() {
 		setLoadedCount((count) => Math.min(count + 200, VIRTUAL_GRID_ITEM_COUNT));
 		setIsFetchingNextPage(false);
 	};
-	useScrollRestoration({
-		restoreKey: () => "virtual-grid",
-		getPosition: () => (restoreGrid ? 20_000 : 0),
-		setPosition: () => undefined,
-		isReady: () => mediaResults().length > 0,
-		hasNextPage: () => loadedCount() < VIRTUAL_GRID_ITEM_COUNT,
-		isFetchingNextPage,
-		fetchNextPage,
-		scrollContainerSelector: "[data-media-scroll]",
-	});
+	const saveScrollPosition = () => {
+		const scroller = document.querySelector<HTMLElement>(
+			"[data-testid=virtual-grid-scroller]",
+		);
+		if (scroller) setSavedScrollTop(scroller.scrollTop);
+	};
+	const remount = () => {
+		saveScrollPosition();
+		setShowGrid(false);
+		setTimeout(() => setShowGrid(true), 25);
+	};
+	const VirtualGridContent = () => {
+		useScrollRestoration({
+			restoreKey: () => "virtual-grid",
+			getPosition: () => savedScrollTop() || (restoreGrid ? 20_000 : 0),
+			setPosition: (_key, position) => setSavedScrollTop(position),
+			isReady: () => mediaResults().length > 0,
+			hasNextPage: () => loadedCount() < VIRTUAL_GRID_ITEM_COUNT,
+			isFetchingNextPage,
+			fetchNextPage,
+			scrollContainerSelector: "[data-media-scroll]",
+		});
+
+		return (
+			<SourceMediaGrid
+				disableContextMenu
+				enableVirtualization
+				isFetchingNextPage={isFetchingNextPage()}
+				itemAspectRatio={4 / 3}
+				hasNextPage={loadedCount() < VIRTUAL_GRID_ITEM_COUNT}
+				mediaResults={mediaResults}
+				mediaSourceId={() => mediaResults()[0]?.mediaSourceId}
+				onLoadMore={fetchNextPage}
+				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}
+					>
+						<ThumbnailImage
+							alt={media.fileName}
+							class="h-full w-full object-cover"
+							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>
+				)}
+				scrollMode="element"
+				setLoadMoreRef={() => undefined}
+				showResultCount={false}
+				state={() => ({
+					data: mediaResults(),
+					error: undefined,
+					fetchState: "idle",
+					phase: "data",
+				})}
+				totalCount={VIRTUAL_GRID_ITEM_COUNT}
+			/>
+		);
+	};
 
 	return (
 		<main class="h-dvh bg-background p-4 text-foreground">
 			<h1 class="sr-only">Virtual media grid performance fixture</h1>
+			<Show when={remountGrid}>
+				<div class="fixed top-2 left-2 z-10 flex gap-2">
+					<button
+						data-testid="remount-virtual-grid"
+						onClick={remount}
+						type="button"
+					>
+						Remount virtual grid
+					</button>
+					<button
+						data-testid="append-virtual-grid-page"
+						onClick={() =>
+							setLoadedCount((count) =>
+								Math.min(count + 200, VIRTUAL_GRID_ITEM_COUNT),
+							)
+						}
+						type="button"
+					>
+						Append virtual grid page
+					</button>
+				</div>
+			</Show>
 			<div
 				class="h-full min-h-0 overflow-y-auto overscroll-contain"
 				data-media-scroll
 				data-testid="virtual-grid-scroller"
 			>
-				<SourceMediaGrid
-					disableContextMenu
-					enableVirtualization
-					isFetchingNextPage={isFetchingNextPage()}
-					itemAspectRatio={4 / 3}
-					hasNextPage={loadedCount() < VIRTUAL_GRID_ITEM_COUNT}
-					mediaResults={mediaResults}
-					mediaSourceId={() => mediaResults()[0]?.mediaSourceId}
-					onLoadMore={fetchNextPage}
-					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}
-						>
-							<ThumbnailImage
-								alt={media.fileName}
-								class="h-full w-full object-cover"
-								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>
-					)}
-					scrollMode="element"
-					setLoadMoreRef={() => undefined}
-					showResultCount={false}
-					state={() => ({
-						data: mediaResults(),
-						error: undefined,
-						fetchState: "idle",
-						phase: "data",
-					})}
-					totalCount={VIRTUAL_GRID_ITEM_COUNT}
-				/>
+				<Show when={showGrid()}>
+					<VirtualGridContent />
+				</Show>
 			</div>
 		</main>
 	);
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index de2d3e7b3..431a59631 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -351,23 +351,12 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		const virtualizer = mediaRowVirtualizer();
 		virtualizer.measure();
 		const element = scrollElement();
-		if (
-			props.scrollMode === "element" &&
-			element &&
-			virtualizer.scrollOffset !== null &&
-			virtualizer.scrollOffset !== element.scrollTop
-		) {
-			// Query updates can clamp the real scroll position while the
-			// virtualizer still holds the previous offset. Reconcile from the
-			// element before rendering the next range instead of leaving rows
-			// mounted outside the viewport until another user scroll event.
-			virtualizer.scrollToOffset(element.scrollTop);
-		}
 		if (props.scrollMode === "element" && element) {
 			// Element scroll containers do not consistently emit a native scroll
 			// event when their content is replaced or clamped. Window scrolling in
-			// the v1 screen gets that notification from the browser automatically;
-			// keep the v2 virtualizer in the same state after every grid update.
+			// the v1 screen gets that notification from the browser automatically.
+			// Dispatching lets the virtualizer read the element's current offset
+			// without imperatively writing a possibly stale offset back to it.
 			element.dispatchEvent(new Event("scroll"));
 		}
 	});

From 7d8b8ab73b547ed251fa82f4e73dd39bb685dbe9 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Tue, 4 Aug 2026 01:08:02 +0900
Subject: [PATCH 24/26] fix(ui): avoid suspense reset during paginated scroll

---
 .../tests/e2e/ui-components.gallery.spec.ts   | 35 ++++++++++++++
 apps/server/src/tests/e2e/ui-gallery/src.tsx  | 46 +++++++++++++++----
 packages/ui/src/hooks/use-search-page.ts      | 41 ++++++++++++++---
 .../ui/src/hooks/use-source-media-page.ts     | 32 +++++++++++--
 packages/ui/src/screens/search-screen.tsx     |  2 +-
 .../ui/src/screens/source-media-screen.tsx    | 10 ++--
 packages/ui/src/screens/v2-search-screen.tsx  |  4 +-
 .../ui/src/screens/v2-source-media-screen.tsx |  8 ++--
 8 files changed, 145 insertions(+), 33 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 88ccb61cf..a87b545b2 100644
--- a/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
+++ b/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
@@ -328,6 +328,41 @@ test("virtual media grid preserves offset after a route-style remount and page u
 	await expectVisibleImagesLoaded(scroller);
 });
 
+test("virtual media grid preserves offset while fast scrolling starts a page fetch", async ({
+	page,
+}) => {
+	await page.setViewportSize({ width: 1_280, height: 720 });
+	await page.goto(`${getGalleryUrl()}/?virtual-grid=1&remount-grid=1`);
+
+	const scroller = page.getByTestId("virtual-grid-scroller");
+	await expect(scroller.locator("[data-media-id]").first()).toBeVisible();
+	await scroller.evaluate(async (element) => {
+		element.scrollTop = 1_500;
+		await new Promise<void>((resolve) =>
+			requestAnimationFrame(() => requestAnimationFrame(() => resolve())),
+		);
+	});
+
+	await page.getByTestId("remount-virtual-grid").click();
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollTop))
+		.toBeGreaterThan(1_000);
+	await page.evaluate(() =>
+		window.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 })),
+	);
+
+	const restoredTop = await scroller.evaluate((element) => element.scrollTop);
+	await scroller.evaluate((element) => {
+		element.scrollTop = element.scrollHeight - element.clientHeight - 1;
+	});
+
+	await expect(page.getByText("読み込み中...", { exact: true })).toBeVisible();
+	await expect(page.getByText("読み込み中...", { exact: true })).toHaveCount(0);
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollTop))
+		.toBeGreaterThan(restoredTop + 100);
+});
+
 test.describe("high-density virtual media grid", () => {
 	test.use({ deviceScaleFactor: 2 });
 
diff --git a/apps/server/src/tests/e2e/ui-gallery/src.tsx b/apps/server/src/tests/e2e/ui-gallery/src.tsx
index 526404b59..31cc0a04a 100644
--- a/apps/server/src/tests/e2e/ui-gallery/src.tsx
+++ b/apps/server/src/tests/e2e/ui-gallery/src.tsx
@@ -10,6 +10,7 @@ import {
 	AlertDialogTitle,
 	AlertDialogTrigger,
 } from "@solid-imager/ui/alert-dialog";
+import { QueryStatus } from "@solid-imager/ui/async-state";
 import { Badge } from "@solid-imager/ui/badge";
 import { Button, buttonVariants } from "@solid-imager/ui/button";
 import {
@@ -101,7 +102,7 @@ import {
 } from "@solid-imager/ui/text-field";
 import { ThumbnailImage } from "@solid-imager/ui/thumbnail-image";
 import { Toaster, toast } from "@solid-imager/ui/toast";
-import { createSignal, Show } from "solid-js";
+import { createEffect, createSignal, onCleanup, Show } from "solid-js";
 import { render } from "solid-js/web";
 import "../../../app.css";
 
@@ -137,12 +138,14 @@ function VirtualGridGallery() {
 	const restoreGrid = params.has("restore-grid");
 	const remountGrid = params.has("remount-grid");
 	const pagedGrid = restoreGrid || remountGrid;
+	const fetchDelayMs = remountGrid ? 100 : 10;
 	const [loadedCount, setLoadedCount] = createSignal(
 		pagedGrid ? 200 : VIRTUAL_GRID_ITEM_COUNT,
 	);
 	const [isFetchingNextPage, setIsFetchingNextPage] = createSignal(false);
 	const [savedScrollTop, setSavedScrollTop] = createSignal(0);
 	const [showGrid, setShowGrid] = createSignal(true);
+	const [loadMoreRef, setLoadMoreRef] = createSignal<HTMLDivElement>();
 	const mediaResults = () => VIRTUAL_GRID_MEDIA.slice(0, loadedCount());
 	const fetchNextPage = async () => {
 		if (
@@ -153,10 +156,23 @@ function VirtualGridGallery() {
 			return;
 		}
 		setIsFetchingNextPage(true);
-		await new Promise((resolve) => setTimeout(resolve, 10));
+		await new Promise((resolve) => setTimeout(resolve, fetchDelayMs));
 		setLoadedCount((count) => Math.min(count + 200, VIRTUAL_GRID_ITEM_COUNT));
 		setIsFetchingNextPage(false);
 	};
+	createEffect(() => {
+		const element = loadMoreRef();
+		const hasNextPage = loadedCount() < VIRTUAL_GRID_ITEM_COUNT;
+		if (!element || !hasNextPage) return;
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (entries[0]?.isIntersecting) void fetchNextPage();
+			},
+			{ threshold: 0.5, rootMargin: "2400px" },
+		);
+		observer.observe(element);
+		onCleanup(() => observer.disconnect());
+	});
 	const saveScrollPosition = () => {
 		const scroller = document.querySelector<HTMLElement>(
 			"[data-testid=virtual-grid-scroller]",
@@ -217,7 +233,7 @@ function VirtualGridGallery() {
 					</a>
 				)}
 				scrollMode="element"
-				setLoadMoreRef={() => undefined}
+				setLoadMoreRef={setLoadMoreRef}
 				showResultCount={false}
 				state={() => ({
 					data: mediaResults(),
@@ -231,7 +247,7 @@ function VirtualGridGallery() {
 	};
 
 	return (
-		<main class="h-dvh bg-background p-4 text-foreground">
+		<main class="flex h-dvh min-h-0 min-w-0 flex-col bg-background p-4 text-foreground">
 			<h1 class="sr-only">Virtual media grid performance fixture</h1>
 			<Show when={remountGrid}>
 				<div class="fixed top-2 left-2 z-10 flex gap-2">
@@ -255,14 +271,28 @@ function VirtualGridGallery() {
 					</button>
 				</div>
 			</Show>
+			<div class="shrink-0 h-24" />
+			<div class="shrink-0 h-8">
+				<QueryStatus
+					fetchState={isFetchingNextPage() ? "background-fetching" : "idle"}
+					hasData
+					hideWhenIdle
+					offlineLabel="オフライン"
+					updatingLabel="検索結果を更新中..."
+				/>
+			</div>
 			<div
-				class="h-full min-h-0 overflow-y-auto overscroll-contain"
+				class="min-h-0 flex-1 overflow-y-auto overscroll-contain"
 				data-media-scroll
 				data-testid="virtual-grid-scroller"
 			>
-				<Show when={showGrid()}>
-					<VirtualGridContent />
-				</Show>
+				<div class="2xl:grid 2xl:grid-cols-[minmax(0,1fr)_clamp(20rem,26vw,26rem)] 2xl:items-start 2xl:gap-4">
+					<div class="min-w-0">
+						<Show when={showGrid()}>
+							<VirtualGridContent />
+						</Show>
+					</div>
+				</div>
 			</div>
 		</main>
 	);
diff --git a/packages/ui/src/hooks/use-search-page.ts b/packages/ui/src/hooks/use-search-page.ts
index e99ca5be0..2574be0ff 100644
--- a/packages/ui/src/hooks/use-search-page.ts
+++ b/packages/ui/src/hooks/use-search-page.ts
@@ -9,7 +9,12 @@ import type {
 import type { Project } from "@solid-imager/core/domain/projects/schemas";
 import type { SafeMediaSource } from "@solid-imager/core/domain/sources/schemas";
 import type { TagResponse } from "@solid-imager/core/domain/tags/schemas";
-import { createInfiniteQuery, createQuery } from "@tanstack/solid-query";
+import {
+	createInfiniteQuery,
+	createQuery,
+	type InfiniteData,
+	useQueryClient,
+} from "@tanstack/solid-query";
 import {
 	type Accessor,
 	createEffect,
@@ -85,6 +90,8 @@ export interface UseSearchPageResult {
 		typeof createInfiniteQuery<MediaSearchResponse>
 	>;
 	searchResults: () => MediaSearchResponse["media"];
+	hasData: () => boolean;
+	totalCount: () => number | undefined;
 	contentState: () => QueryUiState<MediaSearchResponse["media"]>;
 	filterStates: {
 		tags: () => QueryUiState<TagResponse[]>;
@@ -157,7 +164,7 @@ export function useSearchPage(
 		JSON.stringify(getSearchCondition() ?? null),
 	);
 
-	const searchResultQuery = createInfiniteQuery(() =>
+	const searchResultQueryOptions = createMemo(() =>
 		buildSearchResultsQueryOptions({
 			mode: mode(),
 			sourceId: selectedSource() || undefined,
@@ -174,10 +181,31 @@ export function useSearchPage(
 			gcTime,
 		}),
 	);
+	const searchResultQuery = createInfiniteQuery(searchResultQueryOptions);
+	const queryClient = useQueryClient();
+	const [searchResultData, setSearchResultData] = createSignal<
+		InfiniteData<MediaSearchResponse> | undefined
+	>();
+
+	createEffect(() => {
+		// Solid Query exposes `data` as a resource-backed accessor. During an
+		// infinite-page fetch it can suspend even when previous pages are cached;
+		// keep the rendered result in a regular signal so the collection DOM stays
+		// mounted while the next page is loading.
+		const queryKey = searchResultQueryOptions().queryKey;
+		searchResultQuery.dataUpdatedAt;
+		const cachedData =
+			queryClient.getQueryData<InfiniteData<MediaSearchResponse>>(queryKey);
+		if (cachedData !== undefined) {
+			setSearchResultData(cachedData);
+		} else if (!searchResultQuery.isPlaceholderData) {
+			setSearchResultData(undefined);
+		}
+	});
 
 	const searchResults = createMemo(() => {
 		const seen = new Set<string>();
-		return (searchResultQuery.data?.pages.flatMap((p) => p.media) || []).filter(
+		return (searchResultData()?.pages.flatMap((p) => p.media) || []).filter(
 			(m) => {
 				if (seen.has(m.id)) {
 					return false;
@@ -190,7 +218,7 @@ export function useSearchPage(
 	const contentState = () =>
 		toQueryUiState(
 			{
-				data: searchResultQuery.data ? searchResults() : undefined,
+				data: searchResultData() ? searchResults() : undefined,
 				error: searchResultQuery.error,
 				status: searchResultQuery.status,
 				fetchStatus: searchResultQuery.fetchStatus,
@@ -254,8 +282,7 @@ export function useSearchPage(
 			void key;
 			setScrollY(position);
 		},
-		isReady: () =>
-			Boolean(searchResultQuery.data) && !searchResultQuery.isLoading,
+		isReady: () => Boolean(searchResultData()) && !searchResultQuery.isLoading,
 		hasNextPage: () => searchResultQuery.hasNextPage,
 		isFetchingNextPage: () => searchResultQuery.isFetchingNextPage,
 		fetchNextPage: () => searchResultQuery.fetchNextPage(),
@@ -306,6 +333,8 @@ export function useSearchPage(
 	return {
 		searchResultQuery,
 		searchResults,
+		hasData: () => searchResultData() !== undefined,
+		totalCount: () => searchResultData()?.pages[0]?.total,
 		contentState,
 		filterStates: {
 			tags: () => arrayState(tags),
diff --git a/packages/ui/src/hooks/use-source-media-page.ts b/packages/ui/src/hooks/use-source-media-page.ts
index c8d096955..37f726006 100644
--- a/packages/ui/src/hooks/use-source-media-page.ts
+++ b/packages/ui/src/hooks/use-source-media-page.ts
@@ -177,6 +177,8 @@ export type UseSourceMediaPageResult = {
 	mediaSourceId: () => string | undefined;
 	mediaQuery: ReturnType<typeof createInfiniteQuery<MediaSearchResponse>>;
 	mediaResults: () => MediaSearchResponse["media"];
+	hasData: () => boolean;
+	totalCount: () => number | undefined;
 	contentState: () => QueryUiState<MediaSearchResponse["media"]>;
 	filterData: () => SourceMediaPageFilterData;
 	filterStates: () => SourceMediaPageQueryStates;
@@ -255,7 +257,7 @@ export function useSourceMediaPage(
 		JSON.stringify(getSearchCondition() ?? null),
 	);
 
-	const mediaQuery = createInfiniteQuery(() =>
+	const mediaQueryOptions = createMemo(() =>
 		buildSourceMediaResultsQueryOptions({
 			sourceId: id(),
 			condition: getSearchCondition(),
@@ -267,11 +269,29 @@ export function useSourceMediaPage(
 			enabled: !isServer && isSearchStateRestored() && !!id(),
 		}),
 	);
+	const mediaQuery = createInfiniteQuery(mediaQueryOptions);
+	const [mediaQueryData, setMediaQueryData] = createSignal<
+		InfiniteData<MediaSearchResponse> | undefined
+	>();
+
+	createEffect(() => {
+		// Keep paginated results outside Solid Query's resource-backed `data`
+		// accessor. A page fetch must not suspend and remount the media grid.
+		const queryKey = mediaQueryOptions().queryKey;
+		mediaQuery.dataUpdatedAt;
+		const cachedData =
+			queryClient.getQueryData<InfiniteData<MediaSearchResponse>>(queryKey);
+		if (cachedData !== undefined) {
+			setMediaQueryData(cachedData);
+		} else if (!mediaQuery.isPlaceholderData) {
+			setMediaQueryData(undefined);
+		}
+	});
 
 	// --- Deduplicated results ---
 	const mediaResults = createMemo(() => {
 		const seen = new Set<string>();
-		return (mediaQuery.data?.pages.flatMap((page) => page.media) || []).filter(
+		return (mediaQueryData()?.pages.flatMap((page) => page.media) || []).filter(
 			(media) => {
 				if (seen.has(media.id)) {
 					return false;
@@ -284,7 +304,7 @@ export function useSourceMediaPage(
 	const contentState = () =>
 		toQueryUiState(
 			{
-				data: mediaQuery.data ? mediaResults() : undefined,
+				data: mediaQueryData() ? mediaResults() : undefined,
 				error: mediaQuery.error,
 				status: mediaQuery.status,
 				fetchStatus: mediaQuery.fetchStatus,
@@ -304,7 +324,7 @@ export function useSourceMediaPage(
 		restoreKey: id,
 		getPosition: (sourceId) => getScrollPosition(sourceId),
 		setPosition: (sourceId, position) => setScrollPosition(sourceId, position),
-		isReady: () => Boolean(mediaQuery.data) && !mediaQuery.isLoading,
+		isReady: () => Boolean(mediaQueryData()) && !mediaQuery.isLoading,
 		hasNextPage: () => mediaQuery.hasNextPage,
 		isFetchingNextPage: () => mediaQuery.isFetchingNextPage,
 		fetchNextPage: () => mediaQuery.fetchNextPage(),
@@ -908,7 +928,7 @@ export function useSourceMediaPage(
 	};
 
 	const handleSyncLoadedMedia = async () => {
-		const allPages = mediaQuery.data?.pages;
+		const allPages = mediaQueryData()?.pages;
 		if (!allPages || isSyncingMedia()) {
 			return;
 		}
@@ -946,6 +966,8 @@ export function useSourceMediaPage(
 		mediaSourceId: id,
 		mediaQuery,
 		mediaResults,
+		hasData: () => mediaQueryData() !== undefined,
+		totalCount: () => mediaQueryData()?.pages[0]?.total,
 		contentState,
 		filterData,
 		filterStates: queryStates,
diff --git a/packages/ui/src/screens/search-screen.tsx b/packages/ui/src/screens/search-screen.tsx
index 7b318256d..4216b99d9 100644
--- a/packages/ui/src/screens/search-screen.tsx
+++ b/packages/ui/src/screens/search-screen.tsx
@@ -161,7 +161,7 @@ export function SearchScreen(props: SearchScreenProps) {
 							showEmptyState
 							showResultCount
 							state={page().contentState}
-							totalCount={page().searchResultQuery.data?.pages[0]?.total}
+							totalCount={page().totalCount()}
 						/>
 					</Show>
 				</div>
diff --git a/packages/ui/src/screens/source-media-screen.tsx b/packages/ui/src/screens/source-media-screen.tsx
index f0c772ad2..a8e58a501 100644
--- a/packages/ui/src/screens/source-media-screen.tsx
+++ b/packages/ui/src/screens/source-media-screen.tsx
@@ -126,9 +126,9 @@ export function SourceMediaScreen(props: SourceMediaScreenProps) {
 					<h1 class="min-w-0 break-words font-bold text-xl sm:text-2xl">
 						{props.mediaSourceName?.() ?? "メディア一覧"}
 					</h1>
-					<Show when={page().mediaQuery.data?.pages[0]?.total !== undefined}>
+					<Show when={page().totalCount() !== undefined}>
 						<p class="shrink-0 text-gray-600 text-sm">
-							{page().mediaQuery.data?.pages[0]?.total} 件の結果
+							{page().totalCount()} 件の結果
 						</p>
 					</Show>
 				</div>
@@ -144,9 +144,7 @@ export function SourceMediaScreen(props: SourceMediaScreenProps) {
 					</Show>
 					<Button
 						class="w-full sm:w-auto"
-						disabled={
-							page().isSyncingMedia() || !page().mediaQuery.data?.pages.length
-						}
+						disabled={page().isSyncingMedia() || !page().hasData()}
 						onClick={page().handleSyncLoadedMedia}
 						variant="outline"
 					>
@@ -226,7 +224,7 @@ export function SourceMediaScreen(props: SourceMediaScreenProps) {
 							showOpenInNewTab={props.showOpenInNewTab}
 							showResultCount={false}
 							state={page().contentState}
-							totalCount={page().mediaQuery.data?.pages[0]?.total}
+							totalCount={page().totalCount()}
 						/>
 					</Show>
 				</div>
diff --git a/packages/ui/src/screens/v2-search-screen.tsx b/packages/ui/src/screens/v2-search-screen.tsx
index a2ae6075c..ab457375d 100644
--- a/packages/ui/src/screens/v2-search-screen.tsx
+++ b/packages/ui/src/screens/v2-search-screen.tsx
@@ -37,7 +37,7 @@ export function V2SearchScreen(props: SearchScreenProps) {
 			<V2SearchToolbar
 				context="global"
 				filterData={props.filterData}
-				itemCount={page().searchResultQuery.data?.pages[0]?.total}
+				itemCount={page().totalCount()}
 				onSearch={page().handleSearch}
 				onSelectSource={props.onSelectSource}
 				presetClient={props.presetClient}
@@ -106,7 +106,7 @@ export function V2SearchScreen(props: SearchScreenProps) {
 								showResultCount={false}
 								scrollMode="element"
 								state={page().contentState}
-								totalCount={page().searchResultQuery.data?.pages[0]?.total}
+								totalCount={page().totalCount()}
 							/>
 						</Show>
 					</div>
diff --git a/packages/ui/src/screens/v2-source-media-screen.tsx b/packages/ui/src/screens/v2-source-media-screen.tsx
index 31f4c970d..ba9a8e624 100644
--- a/packages/ui/src/screens/v2-source-media-screen.tsx
+++ b/packages/ui/src/screens/v2-source-media-screen.tsx
@@ -51,9 +51,7 @@ export function V2SourceMediaScreen(props: SourceMediaScreenProps) {
 						</Show>
 						<Button
 							class="min-h-11 sm:min-h-9"
-							disabled={
-								page().isSyncingMedia() || !page().mediaQuery.data?.pages.length
-							}
+							disabled={page().isSyncingMedia() || !page().hasData()}
 							onClick={page().handleSyncLoadedMedia}
 							size="sm"
 							variant="outline"
@@ -72,7 +70,7 @@ export function V2SourceMediaScreen(props: SourceMediaScreenProps) {
 				}
 				context="source"
 				filterData={page().filterData()}
-				itemCount={page().mediaQuery.data?.pages[0]?.total}
+				itemCount={page().totalCount()}
 				onSearch={page().handleSearch}
 				presetClient={page().presetClient}
 				sourceName={props.mediaSourceName?.() ?? "メディア一覧"}
@@ -149,7 +147,7 @@ export function V2SourceMediaScreen(props: SourceMediaScreenProps) {
 								showResultCount={false}
 								scrollMode="element"
 								state={page().contentState}
-								totalCount={page().mediaQuery.data?.pages[0]?.total}
+								totalCount={page().totalCount()}
 							/>
 						</Show>
 					</div>

From 56a5b848990c5f426d036373085671a699d5d5a8 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Thu, 6 Aug 2026 01:24:22 +0900
Subject: [PATCH 25/26] fix(ui): stabilize v2 media scroll restoration

---
 apps/server/nitro.config.ts                   |  31 ++-
 apps/server/scripts/isolated-runtime.ts       |  61 ++++-
 .../imports/pending-downloads-indicator.tsx   |  50 +++-
 .../server/src/components/v2/v2-app-shell.tsx |  13 +-
 .../src/hooks/use-media-source-events.ts      |   4 +-
 .../sources/$mediaSourceId/$mediaId/index.tsx |   2 +-
 .../tests/e2e/v2-scroll-restoration.spec.ts   | 237 ++++++++++++++++++
 .../use-current-search-persistence.test.ts    |   7 +
 .../hooks/use-current-search-persistence.ts   |  44 ++--
 packages/ui/src/hooks/use-search-page.ts      | 124 ++++++---
 packages/ui/src/screens/search-screen.tsx     |   2 +-
 packages/ui/src/screens/v2-search-screen.tsx  |   2 +-
 packages/ui/src/source-media-grid.tsx         |  17 +-
 packages/ui/src/v2/search-toolbar.tsx         |   1 -
 14 files changed, 514 insertions(+), 81 deletions(-)
 create mode 100644 apps/server/src/tests/e2e/v2-scroll-restoration.spec.ts

diff --git a/apps/server/nitro.config.ts b/apps/server/nitro.config.ts
index e32fe49c4..3f77da017 100644
--- a/apps/server/nitro.config.ts
+++ b/apps/server/nitro.config.ts
@@ -28,21 +28,38 @@ export default defineNitroConfig({
         fs.existsSync(pgliteLocalPath) ? pgliteLocalPath : pgliteRootPath,
       );
       const pgliteDistPath = path.join(pglitePkgPath, "dist");
+      const pgvectorLocalPath = path.resolve(
+        __dirname,
+        "node_modules/@electric-sql/pglite-pgvector/package.json",
+      );
+      const pgvectorRootPath = path.resolve(
+        __dirname,
+        "../../node_modules/@electric-sql/pglite-pgvector/package.json",
+      );
+      const pgvectorPkgPath = path.dirname(
+        fs.existsSync(pgvectorLocalPath) ? pgvectorLocalPath : pgvectorRootPath,
+      );
 
-      const assetsToCopy = ["pglite.data", "pglite.wasm"];
+      const assetsToCopy = [
+        { name: "pglite.data", source: path.join(pgliteDistPath, "pglite.data") },
+        { name: "pglite.wasm", source: path.join(pgliteDistPath, "pglite.wasm") },
+        {
+          name: "vector.tar.gz",
+          source: path.join(pgvectorPkgPath, "dist/vector.tar.gz"),
+        },
+      ];
 
       for (const asset of assetsToCopy) {
-        const source = path.join(pgliteDistPath, asset);
-        const destination = path.join(libsDir, asset);
+        const destination = path.join(libsDir, asset.name);
 
-        if (fs.existsSync(source)) {
+        if (fs.existsSync(asset.source)) {
           if (!fs.existsSync(libsDir)) {
             fs.mkdirSync(libsDir, { recursive: true });
           }
-          fs.copyFileSync(source, destination);
-          console.log(`[Nitro] Successfully copied ${asset} to ${destination}`);
+          fs.copyFileSync(asset.source, destination);
+          console.log(`[Nitro] Successfully copied ${asset.name} to ${destination}`);
         } else {
-          console.warn(`[Nitro] Warning: ${asset} not found at ${source}`);
+          console.warn(`[Nitro] Warning: ${asset.name} not found at ${asset.source}`);
         }
       }
 
diff --git a/apps/server/scripts/isolated-runtime.ts b/apps/server/scripts/isolated-runtime.ts
index d023d6a23..9775a0c36 100644
--- a/apps/server/scripts/isolated-runtime.ts
+++ b/apps/server/scripts/isolated-runtime.ts
@@ -1,4 +1,5 @@
-import { mkdir, rm, stat, writeFile } from "node:fs/promises";
+import { randomUUID } from "node:crypto";
+import { copyFile, mkdir, rm, stat, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { defaultAppConfig } from "@solid-imager/core/domain/config/config-schema";
 import { mediaGenerationInfo, medias, mediaSources } from "@solid-imager/db/schema";
@@ -16,6 +17,7 @@ import {
 } from "../src/tests/e2e/support/fixture";
 
 const appRoot = path.resolve(import.meta.dir, "..");
+const E2E_PAGINATED_MEDIA_COUNT = 600;
 
 export type IsolatedRuntime = {
   routeTreePath: string;
@@ -42,8 +44,10 @@ function createImageSvg(accentColor: string, backgroundColor: string): Buffer {
 async function seedMediaFixtures(runtimeDir: string): Promise<void> {
   const mediaDir = path.join(runtimeDir, "media");
   const thumbnailDir = path.join(runtimeDir, "thumbnails", E2E_SOURCE_ID);
+  const smallThumbnailDir = path.join(thumbnailDir, "256");
   await mkdir(mediaDir, { recursive: true });
   await mkdir(thumbnailDir, { recursive: true });
+  await mkdir(smallThumbnailDir, { recursive: true });
 
   const primaryPath = path.join(mediaDir, E2E_PRIMARY_FILE_NAME);
   const similarPath = path.join(mediaDir, E2E_SIMILAR_FILE_NAME);
@@ -64,6 +68,39 @@ async function seedMediaFixtures(runtimeDir: string): Promise<void> {
   ]);
 
   const [primaryStats, similarStats] = await Promise.all([stat(primaryPath), stat(similarPath)]);
+  const paginatedMedia = Array.from({ length: E2E_PAGINATED_MEDIA_COUNT }, (_, index) => ({
+    id: randomUUID(),
+    fileName: `e2e-scroll-${String(index + 1).padStart(4, "0")}.png`,
+  }));
+  const primaryThumbnailPath = path.join(
+    thumbnailDir,
+    `${E2E_PRIMARY_MEDIA_ID}.webp`,
+  );
+  const similarThumbnailPath = path.join(
+    thumbnailDir,
+    `${E2E_SIMILAR_MEDIA_ID}.webp`,
+  );
+  await Promise.all(
+    [
+      copyFile(
+        primaryThumbnailPath,
+        path.join(smallThumbnailDir, `${E2E_PRIMARY_MEDIA_ID}.webp`),
+      ),
+      copyFile(
+        similarThumbnailPath,
+        path.join(smallThumbnailDir, `${E2E_SIMILAR_MEDIA_ID}.webp`),
+      ),
+      ...paginatedMedia.flatMap(({ id, fileName }) => [
+        copyFile(primaryPath, path.join(mediaDir, fileName)),
+        copyFile(primaryThumbnailPath, path.join(thumbnailDir, `${id}.webp`)),
+        copyFile(
+          primaryThumbnailPath,
+          path.join(smallThumbnailDir, `${id}.webp`),
+        ),
+      ]),
+    ],
+  );
+
   const pgliteDir = path.join(runtimeDir, "pglite");
   const client = createPglite(pgliteDir);
   const db = drizzle(client);
@@ -111,6 +148,24 @@ async function seedMediaFixtures(runtimeDir: string): Promise<void> {
         indexedAt: seededAt,
         status: "active",
       },
+      ...paginatedMedia.map(({ id, fileName }, index) => {
+        const createdAt = new Date(seededAt.getTime() - (index + 2) * 1000);
+        return {
+          id,
+          mediaSourceId: E2E_SOURCE_ID,
+          filePath: fileName,
+          fileName,
+          mediaType: "image" as const,
+          width: 256,
+          height: 256,
+          fileSize: primaryStats.size,
+          description: "Paginated browser scroll fixture media",
+          createdAt,
+          modifiedAt: createdAt,
+          indexedAt: seededAt,
+          status: "active" as const,
+        };
+      }),
     ]);
     await db.insert(mediaGenerationInfo).values([
       {
@@ -121,6 +176,10 @@ async function seedMediaFixtures(runtimeDir: string): Promise<void> {
         mediaId: E2E_SIMILAR_MEDIA_ID,
         metadata: { fixture: "e2e-similar" },
       },
+      ...paginatedMedia.map(({ id }) => ({
+        mediaId: id,
+        metadata: { fixture: "e2e-scroll" },
+      })),
     ]);
   } finally {
     await client.close();
diff --git a/apps/server/src/components/imports/pending-downloads-indicator.tsx b/apps/server/src/components/imports/pending-downloads-indicator.tsx
index de84a1ef5..8fa28a2f3 100644
--- a/apps/server/src/components/imports/pending-downloads-indicator.tsx
+++ b/apps/server/src/components/imports/pending-downloads-indicator.tsx
@@ -1,11 +1,54 @@
 import { subscribeToEventStream } from "@solid-imager/ui/event-stream";
 import {
+	type ImportEventConnectedHandler,
+	type ImportEventHandler,
 	type PendingDownloadsIndicatorProps,
 	PendingDownloadsIndicator as SharedPendingDownloadsIndicator,
 } from "@solid-imager/ui/pending-downloads-indicator";
 import { orpc } from "~/infrastructure/api-clients/orpc-client";
 import { fetchMediaSources } from "~/infrastructure/api-clients/sources-api";
 
+type ImportSubscriber = {
+	handler: ImportEventHandler;
+	onConnected?: ImportEventConnectedHandler;
+};
+
+const importSubscribers = new Set<ImportSubscriber>();
+let cleanupImportStream: (() => void) | undefined;
+
+function subscribeSharedImportEvents(
+	handler: ImportEventHandler,
+	onConnected?: ImportEventConnectedHandler,
+): () => void {
+	const subscriber = { handler, onConnected };
+	importSubscribers.add(subscriber);
+
+	if (!cleanupImportStream) {
+		cleanupImportStream = subscribeToEventStream(
+			(signal) => orpc.imports.events(undefined, { signal }),
+			(event) => {
+				for (const current of importSubscribers) {
+					void current.handler(event);
+				}
+			},
+			undefined,
+			async () => {
+				for (const current of importSubscribers) {
+					await current.onConnected?.();
+				}
+			},
+		);
+	}
+
+	return () => {
+		importSubscribers.delete(subscriber);
+		if (importSubscribers.size === 0) {
+			cleanupImportStream?.();
+			cleanupImportStream = undefined;
+		}
+	};
+}
+
 export function PendingDownloadsIndicator(
 	displayProps: { compact?: boolean; variant?: "default" | "v2" } = {},
 ) {
@@ -37,12 +80,7 @@ export function PendingDownloadsIndicator(
 			return { success: result.success };
 		},
 		subscribeImportEvents: (handler, onConnected) => {
-			return subscribeToEventStream(
-				(signal) => orpc.imports.events(undefined, { signal }),
-				handler,
-				undefined,
-				onConnected,
-			);
+			return subscribeSharedImportEvents(handler, onConnected);
 		},
 	};
 
diff --git a/apps/server/src/components/v2/v2-app-shell.tsx b/apps/server/src/components/v2/v2-app-shell.tsx
index 8d86e20ed..cfc49814c 100644
--- a/apps/server/src/components/v2/v2-app-shell.tsx
+++ b/apps/server/src/components/v2/v2-app-shell.tsx
@@ -16,7 +16,6 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@solid-imager/ui/dialog";
-import { subscribeToEventStream } from "@solid-imager/ui/event-stream";
 import type { RawEventHandler } from "@solid-imager/ui/hooks/use-sources-events";
 import { useSourcesPage } from "@solid-imager/ui/hooks/use-sources-page";
 import {
@@ -49,7 +48,7 @@ import { Link, useLocation } from "@tanstack/solid-router";
 import type { JSX, ParentProps } from "solid-js";
 import { createSignal, For, Show } from "solid-js";
 import { PendingDownloadsIndicator } from "~/components/imports/pending-downloads-indicator";
-import { orpc } from "~/infrastructure/api-clients/orpc-client";
+import { createServerTransport } from "~/hooks/use-media-source-events";
 import { mediaSourcesQueryOptions } from "~/infrastructure/api-clients/queries";
 import {
 	createMediaSource,
@@ -80,13 +79,6 @@ const V2_NAVIGATION_ITEMS = [
 	{ icon: Settings, label: "Settings", to: "/v2/config" },
 ] as const;
 
-function registerSourceEvents(handler: RawEventHandler): () => void {
-	return subscribeToEventStream(
-		(signal) => orpc.sources.events({ id: "*" }, { signal }),
-		handler,
-	);
-}
-
 function sourceTypeLabel(source: SafeMediaSource): string {
 	return source.type === "local" ? "Local" : source.type.toUpperCase();
 }
@@ -357,6 +349,9 @@ function V2Sidebar(props: V2SidebarProps) {
 export function V2AppShell(props: V2AppShellProps) {
 	const queryClient = useQueryClient();
 	const mediaSources = createQuery(mediaSourcesQueryOptions);
+	const sourceEventTransport = createServerTransport(() => "*");
+	const registerSourceEvents = (handler: RawEventHandler) =>
+		sourceEventTransport.listen(handler);
 	const [sidebarExpanded, setSidebarExpanded] = createSignal(true);
 	const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);
 	const sourceData = () => mediaSources.data ?? [];
diff --git a/apps/server/src/hooks/use-media-source-events.ts b/apps/server/src/hooks/use-media-source-events.ts
index aaa3c551f..2534a0f5b 100644
--- a/apps/server/src/hooks/use-media-source-events.ts
+++ b/apps/server/src/hooks/use-media-source-events.ts
@@ -32,7 +32,7 @@ type SharedSourceTransport = {
 	idleSince: number | null;
 };
 
-const SOURCE_TRANSPORT_IDLE_TIMEOUT_MS = 30_000;
+const SOURCE_TRANSPORT_IDLE_TIMEOUT_MS = 0;
 const MAX_IDLE_SOURCE_TRANSPORTS = 2;
 
 type SourceTransportGlobal = typeof globalThis & {
@@ -79,7 +79,7 @@ export function createServerTransport(
 		if (!id) {
 			return false;
 		}
-		if (pathname === "/search" || pathname === "/v2/search") {
+		if (id === "*" && (pathname === "/search" || pathname.startsWith("/v2/"))) {
 			return true;
 		}
 		if (id === "*") {
diff --git a/apps/server/src/routes/v2/sources/$mediaSourceId/$mediaId/index.tsx b/apps/server/src/routes/v2/sources/$mediaSourceId/$mediaId/index.tsx
index c23a3419a..937b38b91 100644
--- a/apps/server/src/routes/v2/sources/$mediaSourceId/$mediaId/index.tsx
+++ b/apps/server/src/routes/v2/sources/$mediaSourceId/$mediaId/index.tsx
@@ -55,7 +55,7 @@ function MediaDetailHeader(props: {
 				returnPath.startsWith("/v2/sources/"))
 		) {
 			sessionStorage.removeItem("v2:media-return");
-			void navigate({ to: returnPath });
+			window.history.back();
 			return;
 		}
 		void navigate({
diff --git a/apps/server/src/tests/e2e/v2-scroll-restoration.spec.ts b/apps/server/src/tests/e2e/v2-scroll-restoration.spec.ts
new file mode 100644
index 000000000..ccb3f8473
--- /dev/null
+++ b/apps/server/src/tests/e2e/v2-scroll-restoration.spec.ts
@@ -0,0 +1,237 @@
+import type { Page } from "@playwright/test";
+import { E2E_SOURCE_ID, E2E_SOURCE_NAME } from "./support/fixture";
+import { expect, test, waitForAppHydration } from "./support/test";
+
+const searchEndpoint = "**/api/rpc/media/search**";
+
+async function verifyRestoredScrollerDuringFastPageFetch(
+	page: Page,
+	entryPath: string,
+	heading: string,
+	scrollerSelector: string,
+	returnMethod: "browser" | "ui",
+): Promise<void> {
+	await page.setViewportSize({ width: 1280, height: 633 });
+
+	let delaySearchRequests = false;
+	let delayedNextPageRequestCount = 0;
+	await page.addInitScript(() => {
+		sessionStorage.removeItem("current-all");
+		sessionStorage.removeItem("solid-imager-scroll-positions");
+		sessionStorage.removeItem("v2:media-return");
+	});
+	await page.route(searchEndpoint, async (route) => {
+		if (delaySearchRequests && route.request().method() === "POST") {
+			if ((route.request().postData() ?? "").includes('"offset":200')) {
+				delayedNextPageRequestCount += 1;
+			}
+			await new Promise((resolve) => setTimeout(resolve, 1000));
+		}
+		await route.continue();
+	});
+
+	await page.goto(entryPath);
+	await waitForAppHydration(page);
+	await expect(page.getByText(heading, { exact: true }).last()).toBeVisible();
+
+	const scroller = page.locator(scrollerSelector);
+	await expect(scroller.locator("[data-media-id]").first()).toBeVisible();
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollHeight))
+		.toBeGreaterThan(2000);
+	await scroller.hover();
+	await page.mouse.wheel(0, 1500);
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollTop))
+		.toBeGreaterThan(1000);
+	await page.waitForTimeout(300);
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollTop))
+		.toBeGreaterThan(1000);
+
+	const mediaId = await scroller.evaluate((element) => {
+		const bounds = element.getBoundingClientRect();
+		return [...element.querySelectorAll<HTMLElement>("[data-media-id]")].find(
+			(item) => {
+				const itemBounds = item.getBoundingClientRect();
+				return itemBounds.bottom > bounds.top && itemBounds.top < bounds.bottom;
+			},
+		)?.dataset.mediaId;
+	});
+	expect(mediaId).toBeDefined();
+	if (!mediaId) throw new Error("A visible media item was not found");
+	const mediaFileName = await page
+		.locator(`[data-media-id="${mediaId}"] img`)
+		.getAttribute("alt");
+	expect(mediaFileName).toBeTruthy();
+	if (!mediaFileName)
+		throw new Error("The visible media item has no file name");
+
+	await page.locator(`[data-media-id="${mediaId}"]`).click();
+	await expect(page).toHaveURL(/\/v2\/sources\/[^/]+\/[^/]+$/);
+	await expect(
+		page.getByRole("heading", { name: mediaFileName, exact: true }),
+	).toBeVisible();
+
+	if (returnMethod === "browser") {
+		await page.goBack();
+	} else {
+		await page.getByRole("button", { name: "一覧に戻る", exact: true }).click();
+	}
+	await expect.poll(() => new URL(page.url()).pathname).toBe(entryPath);
+	await waitForAppHydration(page);
+	await expect(scroller.locator("[data-media-id]").first()).toBeVisible();
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollTop))
+		.toBeGreaterThan(1000);
+	await page.evaluate(
+		() =>
+			new Promise<void>((resolve) => {
+				requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+			}),
+	);
+
+	await page.evaluate((selector) => {
+		const main = document.querySelector("#v2-main-content");
+		const initialScroller = document.querySelector<HTMLElement>(selector);
+		if (!main || !initialScroller) {
+			throw new Error("v2 media scroll containers were not found");
+		}
+
+		const probe = {
+			initialMain: main,
+			initialScroller,
+			removedSections: 0,
+			scrollTops: [] as number[],
+		};
+		const observer = new MutationObserver((records) => {
+			for (const record of records) {
+				if (record.target !== main) continue;
+				probe.removedSections += [...record.removedNodes].filter(
+					(node) => node instanceof HTMLElement && node.tagName === "SECTION",
+				).length;
+			}
+		});
+		observer.observe(main, { childList: true });
+		window.addEventListener(
+			"scroll",
+			(event) => {
+				if (event.target instanceof HTMLElement) {
+					probe.scrollTops.push(event.target.scrollTop);
+				}
+			},
+			true,
+		);
+		Object.assign(window, { __v2ScrollProbe: probe });
+	}, scrollerSelector);
+
+	const heightBeforeFetch = await scroller.evaluate(
+		(element) => element.scrollHeight,
+	);
+	const nextPageResponsePromise = page.waitForResponse(
+		(response) =>
+			response.url().includes("/api/rpc/media/search") &&
+			(response.request().postData() ?? "").includes('"offset":200'),
+		{ timeout: 10_000 },
+	);
+	delaySearchRequests = true;
+	await scroller.hover();
+	await page.mouse.wheel(0, 1800);
+	await expect.poll(() => delayedNextPageRequestCount).toBeGreaterThan(0);
+	await page.waitForTimeout(100);
+
+	const probeDuringFetch = await page.evaluate((selector) => {
+		const probe = (
+			window as Window & {
+				__v2ScrollProbe?: {
+					initialMain: Element;
+					initialScroller: Element;
+					removedSections: number;
+					scrollTops: number[];
+				};
+			}
+		).__v2ScrollProbe;
+		const currentScroller = document.querySelector(selector);
+		return {
+			scrollEventCount: probe?.scrollTops.length ?? 0,
+			removedSections: probe?.removedSections ?? -1,
+			mainWasReplaced:
+				probe?.initialMain !== document.querySelector("#v2-main-content"),
+			scrollerWasReplaced: probe?.initialScroller !== currentScroller,
+			minObservedScrollTop: probe?.scrollTops.length
+				? Math.min(...probe.scrollTops)
+				: -1,
+			finalScrollTop:
+				currentScroller instanceof HTMLElement ? currentScroller.scrollTop : -1,
+		};
+	}, scrollerSelector);
+
+	expect(probeDuringFetch.removedSections).toBe(0);
+	expect(probeDuringFetch.scrollEventCount).toBeGreaterThan(0);
+	expect(probeDuringFetch.mainWasReplaced).toBe(false);
+	expect(probeDuringFetch.scrollerWasReplaced).toBe(false);
+	expect(probeDuringFetch.minObservedScrollTop).toBeGreaterThan(0);
+	expect(probeDuringFetch.finalScrollTop).toBeGreaterThan(1000);
+
+	const nextPageResponse = await nextPageResponsePromise;
+	expect(nextPageResponse.status()).toBe(200);
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollHeight), {
+			timeout: 10_000,
+		})
+		.toBeGreaterThan(heightBeforeFetch);
+	const probeAfterFetch = await page.evaluate((selector) => {
+		const probe = (
+			window as Window & {
+				__v2ScrollProbe?: {
+					initialMain: Element;
+					initialScroller: Element;
+					removedSections: number;
+				};
+			}
+		).__v2ScrollProbe;
+		const currentScroller = document.querySelector(selector);
+		return {
+			removedSections: probe?.removedSections ?? -1,
+			mainWasReplaced:
+				probe?.initialMain !== document.querySelector("#v2-main-content"),
+			scrollerWasReplaced: probe?.initialScroller !== currentScroller,
+			finalScrollTop:
+				currentScroller instanceof HTMLElement ? currentScroller.scrollTop : -1,
+		};
+	}, scrollerSelector);
+	expect(probeAfterFetch.removedSections).toBe(0);
+	expect(probeAfterFetch.mainWasReplaced).toBe(false);
+	expect(probeAfterFetch.scrollerWasReplaced).toBe(false);
+	expect(probeAfterFetch.finalScrollTop).toBeGreaterThan(1000);
+}
+
+const restorationCases = [
+	{
+		name: "v2 search",
+		entryPath: "/v2/search",
+		heading: "すべてのメディア",
+		scrollerSelector: '[data-media-scroll="v2-search"]',
+	},
+	{
+		name: "v2 source media",
+		entryPath: `/v2/sources/${E2E_SOURCE_ID}`,
+		heading: E2E_SOURCE_NAME,
+		scrollerSelector: `[data-media-scroll="${E2E_SOURCE_ID}"]`,
+	},
+] as const;
+for (const restorationCase of restorationCases) {
+	for (const returnMethod of ["browser", "ui"] as const) {
+		test(`${restorationCase.name} keeps its restored scroller mounted during a fast page fetch via ${returnMethod} back`, async ({
+			page,
+		}) => {
+			await verifyRestoredScrollerDuringFastPageFetch(
+				page,
+				restorationCase.entryPath,
+				restorationCase.heading,
+				restorationCase.scrollerSelector,
+				returnMethod,
+			);
+		});
+	}
+}
diff --git a/packages/ui/src/hooks/use-current-search-persistence.test.ts b/packages/ui/src/hooks/use-current-search-persistence.test.ts
index 427c4290e..00107d949 100644
--- a/packages/ui/src/hooks/use-current-search-persistence.test.ts
+++ b/packages/ui/src/hooks/use-current-search-persistence.test.ts
@@ -130,6 +130,13 @@ describe("useCurrentSearchPersistence", () => {
 		expect(searchState.selectedSource).toBe("source-1");
 	});
 
+	it("persists the initial state before the debounce expires", async () => {
+		mountPersistence("all");
+		await flushMicrotasks();
+
+		expect(sessionStorage.getItem("current-all")).toContain('"mode":"simple"');
+	});
+
 	it("restores the latest source when the source accessor changes", async () => {
 		const [sourceId, setSourceId] = createSignal("source-a");
 		sessionStorage.setItem(
diff --git a/packages/ui/src/hooks/use-current-search-persistence.ts b/packages/ui/src/hooks/use-current-search-persistence.ts
index 99eeb6633..400fee444 100644
--- a/packages/ui/src/hooks/use-current-search-persistence.ts
+++ b/packages/ui/src/hooks/use-current-search-persistence.ts
@@ -152,6 +152,7 @@ export function useCurrentSearchPersistence(
 	const [isRestored, setIsRestored] = createSignal(false);
 	let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 	let restoreVersion = 0;
+	let lastPersistedPresetName: string | null = null;
 
 	const getSourceId = () =>
 		typeof sourceId === "function" ? sourceId() : sourceId;
@@ -209,28 +210,37 @@ export function useCurrentSearchPersistence(
 			return;
 		}
 
-		const condition = getSearchCondition() || {
-			type: "group" as const,
-			operator: "and" as const,
-			children: [],
-		};
-		const presetData = {
-			value: condition,
-			selectedSource: searchState.selectedSource,
-			sort: searchState.sortBy,
-			order: searchState.sortOrder,
-			mode: searchState.mode,
-			similarityAnchorMediaId: searchState.similarityAnchorMediaId,
-			similarityTopK: searchState.similarityTopK,
-		};
-
-		debounceTimer = setTimeout(() => {
+		const persistCurrentState = () => {
+			const condition = getSearchCondition() || {
+				type: "group" as const,
+				operator: "and" as const,
+				children: [],
+			};
+			const presetData = {
+				value: condition,
+				selectedSource: searchState.selectedSource,
+				sort: searchState.sortBy,
+				order: searchState.sortOrder,
+				mode: searchState.mode,
+				similarityAnchorMediaId: searchState.similarityAnchorMediaId,
+				similarityTopK: searchState.similarityTopK,
+			};
 			try {
 				sessionStorage.setItem(presetName, JSON.stringify(presetData));
+				lastPersistedPresetName = presetName;
 			} catch {
 				// Persistence errors must not disrupt the UI.
 			}
-		}, DEBOUNCE_MS);
+		};
+
+		// Persist the initial state synchronously so navigating to a media detail
+		// before the debounce expires cannot reset the list on return.
+		if (lastPersistedPresetName !== presetName) {
+			persistCurrentState();
+			return;
+		}
+
+		debounceTimer = setTimeout(persistCurrentState, DEBOUNCE_MS);
 	});
 
 	onCleanup(() => {
diff --git a/packages/ui/src/hooks/use-search-page.ts b/packages/ui/src/hooks/use-search-page.ts
index 2574be0ff..cc7a1c2ea 100644
--- a/packages/ui/src/hooks/use-search-page.ts
+++ b/packages/ui/src/hooks/use-search-page.ts
@@ -92,6 +92,7 @@ export interface UseSearchPageResult {
 	searchResults: () => MediaSearchResponse["media"];
 	hasData: () => boolean;
 	totalCount: () => number | undefined;
+	fetchNextPage: () => Promise<unknown>;
 	contentState: () => QueryUiState<MediaSearchResponse["media"]>;
 	filterStates: {
 		tags: () => QueryUiState<TagResponse[]>;
@@ -134,6 +135,13 @@ export function useSearchPage(
 		refreshDebounceMs = DEFAULT_REFRESH_DEBOUNCE_MS,
 		isSearchStateRestored = () => true,
 	} = options;
+	const queryClient = useQueryClient();
+	const tagsQueryKey = queries.tags().queryKey;
+	const sourcesQueryKey = queries.sources().queryKey;
+	const projectsQueryKey = queries.projects().queryKey;
+	const ipsQueryKey = queries.ips().queryKey;
+	const charactersQueryKey = queries.characters().queryKey;
+	const authorsQueryKey = queries.authors().queryKey;
 
 	const tags = createQuery<TagResponse[]>(() => ({
 		...queries.tags(),
@@ -159,13 +167,52 @@ export function useSearchPage(
 		...queries.authors(),
 		enabled: !isServer,
 	}));
+	const [tagsData, setTagsData] = createSignal<TagResponse[] | undefined>();
+	const [sourcesData, setSourcesData] = createSignal<
+		SafeMediaSource[] | undefined
+	>();
+	const [projectsData, setProjectsData] = createSignal<Project[] | undefined>();
+	const [ipsData, setIpsData] = createSignal<Ip[] | undefined>();
+	const [charactersData, setCharactersData] = createSignal<
+		Character[] | undefined
+	>();
+	const [authorsData, setAuthorsData] = createSignal<Author[] | undefined>();
+
+	createEffect(() => {
+		tags.dataUpdatedAt;
+		setTagsData(queryClient.getQueryData<TagResponse[]>(tagsQueryKey));
+	});
+	createEffect(() => {
+		sources.dataUpdatedAt;
+		setSourcesData(
+			queryClient.getQueryData<SafeMediaSource[]>(sourcesQueryKey),
+		);
+	});
+	createEffect(() => {
+		allProjects.dataUpdatedAt;
+		setProjectsData(queryClient.getQueryData<Project[]>(projectsQueryKey));
+	});
+	createEffect(() => {
+		allIps.dataUpdatedAt;
+		setIpsData(queryClient.getQueryData<Ip[]>(ipsQueryKey));
+	});
+	createEffect(() => {
+		allCharacters.dataUpdatedAt;
+		setCharactersData(
+			queryClient.getQueryData<Character[]>(charactersQueryKey),
+		);
+	});
+	createEffect(() => {
+		allAuthors.dataUpdatedAt;
+		setAuthorsData(queryClient.getQueryData<Author[]>(authorsQueryKey));
+	});
 
 	const conditionKey = createMemo(() =>
 		JSON.stringify(getSearchCondition() ?? null),
 	);
 
-	const searchResultQueryOptions = createMemo(() =>
-		buildSearchResultsQueryOptions({
+	const searchResultQueryOptions = createMemo(() => {
+		return buildSearchResultsQueryOptions({
 			mode: mode(),
 			sourceId: selectedSource() || undefined,
 			condition: getSearchCondition(),
@@ -179,10 +226,13 @@ export function useSearchPage(
 			searchSimilar: options.searchSimilar,
 			enabled: !isServer && isSearchStateRestored(),
 			gcTime,
-		}),
-	);
+		});
+	});
 	const searchResultQuery = createInfiniteQuery(searchResultQueryOptions);
-	const queryClient = useQueryClient();
+	const fetchNextPage = () =>
+		isSearchStateRestored()
+			? searchResultQuery.fetchNextPage()
+			: Promise.resolve();
 	const [searchResultData, setSearchResultData] = createSignal<
 		InfiniteData<MediaSearchResponse> | undefined
 	>();
@@ -225,12 +275,24 @@ export function useSearchPage(
 			},
 			{ isEmpty: (data) => data.length === 0 },
 		);
-	const arrayState = <T>(query: {
-		data: T[] | undefined;
-		error: unknown;
-		status: "pending" | "error" | "success";
-		fetchStatus: "idle" | "fetching" | "paused";
-	}) => toQueryUiState(query, { isEmpty: (data) => data.length === 0 });
+	const arrayState = <T>(
+		query: {
+			data: T[] | undefined;
+			error: unknown;
+			status: "pending" | "error" | "success";
+			fetchStatus: "idle" | "fetching" | "paused";
+		},
+		data: () => T[] | undefined,
+	) =>
+		toQueryUiState(
+			{
+				data: data(),
+				error: query.error,
+				status: query.status,
+				fetchStatus: query.fetchStatus,
+			},
+			{ isEmpty: (items) => items.length === 0 },
+		);
 	const retryFilters = async () => {
 		await Promise.all([
 			tags.refetch(),
@@ -243,7 +305,7 @@ export function useSearchPage(
 	};
 
 	const getSourceRootPath = (mediaSourceId: string) => {
-		const source = sources.data?.find((item) => item.id === mediaSourceId);
+		const source = sourcesData()?.find((item) => item.id === mediaSourceId);
 		if (source?.type !== "local") {
 			return undefined;
 		}
@@ -282,10 +344,13 @@ export function useSearchPage(
 			void key;
 			setScrollY(position);
 		},
-		isReady: () => Boolean(searchResultData()) && !searchResultQuery.isLoading,
+		isReady: () =>
+			isSearchStateRestored() &&
+			Boolean(searchResultData()) &&
+			!searchResultQuery.isLoading,
 		hasNextPage: () => searchResultQuery.hasNextPage,
 		isFetchingNextPage: () => searchResultQuery.isFetchingNextPage,
-		fetchNextPage: () => searchResultQuery.fetchNextPage(),
+		fetchNextPage,
 		scrollContainerSelector: options.scrollContainerSelector,
 	});
 
@@ -314,14 +379,14 @@ export function useSearchPage(
 		const hasNextPage = searchResultQuery.hasNextPage;
 		const isFetching = searchResultQuery.isFetching;
 
-		if (!hasNextPage || isFetching) {
+		if (!isSearchStateRestored() || !hasNextPage || isFetching) {
 			return;
 		}
 
 		const observer = new IntersectionObserver(
 			(entries) => {
-				if (entries[0].isIntersecting) {
-					searchResultQuery.fetchNextPage();
+				if (entries[0].isIntersecting && isSearchStateRestored()) {
+					fetchNextPage();
 				}
 			},
 			{ threshold: 0.5, rootMargin: "2400px" },
@@ -335,33 +400,34 @@ export function useSearchPage(
 		searchResults,
 		hasData: () => searchResultData() !== undefined,
 		totalCount: () => searchResultData()?.pages[0]?.total,
+		fetchNextPage,
 		contentState,
 		filterStates: {
-			tags: () => arrayState(tags),
-			sources: () => arrayState(sources),
-			projects: () => arrayState(allProjects),
-			ips: () => arrayState(allIps),
-			characters: () => arrayState(allCharacters),
-			authors: () => arrayState(allAuthors),
+			tags: () => arrayState(tags, tagsData),
+			sources: () => arrayState(sources, sourcesData),
+			projects: () => arrayState(allProjects, projectsData),
+			ips: () => arrayState(allIps, ipsData),
+			characters: () => arrayState(allCharacters, charactersData),
+			authors: () => arrayState(allAuthors, authorsData),
 		},
 		filterData: {
 			get tags() {
-				return tags.data;
+				return tagsData();
 			},
 			get projects() {
-				return allProjects.data;
+				return projectsData();
 			},
 			get ips() {
-				return allIps.data;
+				return ipsData();
 			},
 			get characters() {
-				return allCharacters.data;
+				return charactersData();
 			},
 			get authors() {
-				return allAuthors.data;
+				return authorsData();
 			},
 		},
-		sources: () => sources.data,
+		sources: sourcesData,
 		getSourceRootPath,
 		isRestored,
 		handleSearch,
diff --git a/packages/ui/src/screens/search-screen.tsx b/packages/ui/src/screens/search-screen.tsx
index 4216b99d9..41ae45a6e 100644
--- a/packages/ui/src/screens/search-screen.tsx
+++ b/packages/ui/src/screens/search-screen.tsx
@@ -149,7 +149,7 @@ export function SearchScreen(props: SearchScreenProps) {
 							isFetchingNextPage={page().searchResultQuery.isFetchingNextPage}
 							mediaResults={page().searchResults}
 							mediaSourceId={() => undefined}
-							onLoadMore={() => page().searchResultQuery.fetchNextPage()}
+							onLoadMore={page().fetchNextPage}
 							onRetry={async () => {
 								await page().searchResultQuery.refetch();
 							}}
diff --git a/packages/ui/src/screens/v2-search-screen.tsx b/packages/ui/src/screens/v2-search-screen.tsx
index ab457375d..f661a6e8c 100644
--- a/packages/ui/src/screens/v2-search-screen.tsx
+++ b/packages/ui/src/screens/v2-search-screen.tsx
@@ -92,7 +92,7 @@ export function V2SearchScreen(props: SearchScreenProps) {
 								itemAspectRatio={4 / 3}
 								mediaResults={page().searchResults}
 								mediaSourceId={() => undefined}
-								onLoadMore={() => page().searchResultQuery.fetchNextPage()}
+								onLoadMore={page().fetchNextPage}
 								onRetry={async () => {
 									await page().searchResultQuery.refetch();
 								}}
diff --git a/packages/ui/src/source-media-grid.tsx b/packages/ui/src/source-media-grid.tsx
index 431a59631..ad038c418 100644
--- a/packages/ui/src/source-media-grid.tsx
+++ b/packages/ui/src/source-media-grid.tsx
@@ -297,10 +297,19 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 		},
 	});
 
+	const resolveScrollElement = () =>
+		props.scrollMode === "element"
+			? (mediaGridRef?.closest("[data-media-scroll]") as HTMLElement | null)
+			: null;
+
 	const updateMediaGridMetrics = () => {
 		if (!mediaGridRef) return;
 		setMediaGridWidth(mediaGridRef.getBoundingClientRect().width);
-		const scroller = scrollElement();
+		const resolvedScrollElement = resolveScrollElement();
+		if (resolvedScrollElement !== scrollElement()) {
+			setScrollElement(resolvedScrollElement);
+		}
+		const scroller = resolvedScrollElement;
 		setScrollMargin(
 			props.scrollMode === "element" && scroller
 				? mediaGridRef.getBoundingClientRect().top -
@@ -312,11 +321,7 @@ export function SourceMediaGrid(props: SourceMediaGridProps) {
 
 	onMount(() => {
 		setWindowWidth(window.innerWidth);
-		setScrollElement(
-			props.scrollMode === "element"
-				? (mediaGridRef?.closest("[data-media-scroll]") as HTMLElement | null)
-				: null,
-		);
+		setScrollElement(resolveScrollElement());
 		updateMediaGridMetrics();
 
 		const handleResize = () => {
diff --git a/packages/ui/src/v2/search-toolbar.tsx b/packages/ui/src/v2/search-toolbar.tsx
index ae9b4451b..fa647d134 100644
--- a/packages/ui/src/v2/search-toolbar.tsx
+++ b/packages/ui/src/v2/search-toolbar.tsx
@@ -369,7 +369,6 @@ export function V2SearchToolbar(props: V2SearchToolbarProps) {
 				/>
 
 				<Popover
-					forceMount
 					onOpenChange={setFilterOpen}
 					open={filterOpen()}
 					placement="bottom-end"

From 7211441f09dde9ba532eee0913e2c6c382bb4923 Mon Sep 17 00:00:00 2001
From: hmjn <hmjn023@gmail.com>
Date: Thu, 6 Aug 2026 21:57:17 +0900
Subject: [PATCH 26/26] test: strengthen media grid scroll assertions

---
 .../src/tests/e2e/ui-components.gallery.spec.ts   | 15 +++++++++++----
 packages/ui/src/hooks/use-source-media-page.ts    |  2 +-
 packages/ui/src/source-media-page.tsx             |  2 +-
 3 files changed, 13 insertions(+), 6 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 a87b545b2..7d7acf1b2 100644
--- a/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
+++ b/apps/server/src/tests/e2e/ui-components.gallery.spec.ts
@@ -265,9 +265,16 @@ test("virtual media grid stays populated after restoring a deep scroll position"
 	await page.goto(`${getGalleryUrl()}/?virtual-grid=1&restore-grid=1`);
 
 	const scroller = page.getByTestId("virtual-grid-scroller");
+	await expect(scroller.locator("[data-media-id]").first()).toBeVisible();
 	await expect
-		.poll(() => scroller.evaluate((element) => element.scrollTop))
+		.poll(() => scroller.evaluate((element) => element.scrollHeight))
 		.toBeGreaterThan(1_000);
+	const maxScrollTop = await scroller.evaluate(
+		(element) => element.scrollHeight - element.clientHeight,
+	);
+	await expect
+		.poll(() => scroller.evaluate((element) => element.scrollTop))
+		.toBeGreaterThan(maxScrollTop * 0.9);
 	await expectVisibleImagesLoaded(scroller);
 
 	await scroller.evaluate((element) => {
@@ -324,7 +331,7 @@ test("virtual media grid preserves offset after a route-style remount and page u
 		.toBeGreaterThan(heightBeforeAppend);
 	await expect
 		.poll(() => scroller.evaluate((element) => element.scrollTop))
-		.toBeGreaterThan(restoredTop + 100);
+		.toBeGreaterThan(restoredTop + 1_700);
 	await expectVisibleImagesLoaded(scroller);
 });
 
@@ -346,7 +353,7 @@ test("virtual media grid preserves offset while fast scrolling starts a page fet
 	await page.getByTestId("remount-virtual-grid").click();
 	await expect
 		.poll(() => scroller.evaluate((element) => element.scrollTop))
-		.toBeGreaterThan(1_000);
+		.toBeGreaterThan(1_400);
 	await page.evaluate(() =>
 		window.dispatchEvent(new WheelEvent("wheel", { deltaY: 1 })),
 	);
@@ -360,7 +367,7 @@ test("virtual media grid preserves offset while fast scrolling starts a page fet
 	await expect(page.getByText("読み込み中...", { exact: true })).toHaveCount(0);
 	await expect
 		.poll(() => scroller.evaluate((element) => element.scrollTop))
-		.toBeGreaterThan(restoredTop + 100);
+		.toBeGreaterThan(restoredTop + 1_000);
 });
 
 test.describe("high-density virtual media grid", () => {
diff --git a/packages/ui/src/hooks/use-source-media-page.ts b/packages/ui/src/hooks/use-source-media-page.ts
index 37f726006..6987ac881 100644
--- a/packages/ui/src/hooks/use-source-media-page.ts
+++ b/packages/ui/src/hooks/use-source-media-page.ts
@@ -278,7 +278,7 @@ export function useSourceMediaPage(
 		// Keep paginated results outside Solid Query's resource-backed `data`
 		// accessor. A page fetch must not suspend and remount the media grid.
 		const queryKey = mediaQueryOptions().queryKey;
-		mediaQuery.dataUpdatedAt;
+		void mediaQuery.dataUpdatedAt;
 		const cachedData =
 			queryClient.getQueryData<InfiniteData<MediaSearchResponse>>(queryKey);
 		if (cachedData !== undefined) {
diff --git a/packages/ui/src/source-media-page.tsx b/packages/ui/src/source-media-page.tsx
index 9e6f30e29..cea80e2ef 100644
--- a/packages/ui/src/source-media-page.tsx
+++ b/packages/ui/src/source-media-page.tsx
@@ -124,7 +124,7 @@ export function SourceMediaPage(props: SourceMediaPageProps): JSX.Element {
 		isSearchStateRestored,
 		scrollContainerSelector:
 			props.variant === "v2"
-				? `[data-media-scroll="${props.mediaSourceId()}"]`
+				? `[data-media-scroll="${props.mediaSourceId() ?? "v2-source"}"]`
 				: undefined,
 	});