perf(studio): cache furni imports and virtualize the furniture grid

- Add TTL-based caching for local index lookup, furnidata classnames, catalog id set, nitro file presence and import stats - Invalidate caches after furnace single/batch/clone imports - Rewrite batch progress with elapsed time, rate and verification chips - Virtualize the grid with @tanstack/react-virtual and replace the Load more button with infinite scroll via an IntersectionObserver
2026-09-13 11:40:55 +02:00
1 parent 2920669362
commit d02aaa0d87
@@ -21,6 +21,7 @@ import {
 	syncAssetsToGamedataBundle,
 	verifyAndFixInteractionModesCount,
 } from "@/lib/services/furni-import";
+import { clearFurniImportCache } from "@/lib/services/furni-import-cache";
 import { runSseBatch } from "@/lib/services/import/core/sse-batch";
 import { rcon } from "@/lib/services/rcon";

@@ -179,6 +180,9 @@ export const POST = withAdmin(
 				} catch {
 					/* best effort — post-import consolidation is non-fatal */
 				}
+
+				// New items + files landed — drop caches so the Studio refresh is fresh.
+				clearFurniImportCache();
 			},
 		});
 	},
@@ -19,6 +19,7 @@ import {
 	syncAssetsToGamedataBundle,
 	verifyAndFixInteractionModesCount,
 } from "@/lib/services/furni-import";
+import { clearFurniImportCache } from "@/lib/services/furni-import-cache";
 import { rcon } from "@/lib/services/rcon";
 import type { ImportSingleResult } from "@/types/furni";

@@ -195,6 +196,11 @@ export const POST = withAdmin(
 					await new Promise((r) => setImmediate(r));
 				}

+				if (succeeded > 0) {
+					// New items + files landed — drop caches so the Studio refresh is fresh.
+					clearFurniImportCache();
+				}
+
 				if (aborted) {
 					send({
 						type: "batch_complete",
@@ -5,10 +5,7 @@ import { apiError, apiOk } from "@/lib/api";
 import { withAdmin } from "@/lib/api-handler";
 import { db, ItemsBase } from "@/lib/db";
 import { normalizeClassname } from "@/lib/furni/classname";
-import {
-	indexLocalFurniture,
-	localFurnitureStatus,
-} from "@/lib/furni/local-presence";
+import { localFurnitureStatus } from "@/lib/furni/local-presence";
 import { PERMS } from "@/lib/permissions";
 import { logAudit } from "@/lib/services/audit";
 import { getCloneList } from "@/lib/services/clone-import";
@@ -16,7 +13,6 @@ import { getSource } from "@/lib/services/clone-sources";
 import { getFurniAssetDirs } from "@/lib/services/furni-asset-dirs";
 import {
 	appendFurniEntriesBulk,
-	readFurniData,
 	rebuildCatalogOfferIds,
 	reconcileFurniDataWithItemsBase,
 	verifyAndFixSpriteIds,
@@ -37,6 +33,14 @@ import {
 	syncAssetsToGamedataBundle,
 	verifyAndFixInteractionModesCount,
 } from "@/lib/services/furni-import";
+import {
+	clearFurniImportCache,
+	getCatalogIdSet,
+	getFurniDataClassnames,
+	getFurniImportStats,
+	getLocalCatalogSnapshot,
+	nitroExistsCached,
+} from "@/lib/services/furni-import-cache";
 import { getOfficialHabboFurnidata } from "@/lib/services/habbo-furnidata-cache";
 import { listFurniture } from "@/lib/services/habbofurni";
 import { streamImportResponse } from "@/lib/services/import/core/single-response";
@@ -111,6 +115,8 @@ export const DELETE = withAdmin(
 					},
 				});

+				clearFurniImportCache();
+
 				return apiOk({
 					classname,
 					deletedFiles,
@@ -145,68 +151,7 @@ export const GET = withAdmin(
 		// Stats endpoint
 		const action = request.nextUrl.searchParams.get("action");
 		if (action === "stats") {
-			const [totalResult, catalogResult, allIdsResult, referencedResult] =
-				await Promise.all([
-					db.execute(sql`SELECT COUNT(*) as cnt FROM items_base`),
-					db.execute(
-						sql`SELECT COUNT(DISTINCT item_ids) as cnt FROM catalog_items`,
-					),
-					db.execute(sql`SELECT id FROM items_base`),
-					db.execute(sql`SELECT item_ids FROM catalog_items`),
-				]);
-
-			const totalInDb = Number(
-				(totalResult as unknown as [[{ cnt: bigint }], unknown])[0][0].cnt,
-			);
-			const inCatalog = Number(
-				(catalogResult as unknown as [[{ cnt: bigint }], unknown])[0][0].cnt,
-			);
-
-			// An item is "in the catalog" when its items_base id is referenced by
-			// any catalog_items.item_ids (the canonical link — catalog_name can be
-			// a translated display name, so matching on it is unreliable).
-			const allIds = (
-				allIdsResult as unknown as [Array<{ id: number }>, unknown]
-			)[0].map((r) => Number(r.id));
-			const referenced = new Set<number>();
-			for (const row of (
-				referencedResult as unknown as [
-					Array<{ item_ids: string | null }>,
-					unknown,
-				]
-			)[0]) {
-				for (const part of String(row.item_ids ?? "").split(/[;,]/)) {
-					const n = Number(part.trim());
-					if (Number.isFinite(n) && n > 0) referenced.add(n);
-				}
-			}
-			const notInCatalog = allIds.filter((id) => !referenced.has(id)).length;
-
-			// Count missing .nitro files by checking filesystem
-			const [importedItems] = (await db.execute(sql`
-        SELECT ib.item_name FROM items_base ib
-        WHERE EXISTS (
-          SELECT 1 FROM catalog_items ci
-          WHERE FIND_IN_SET(ib.id, REPLACE(ci.item_ids, ';', ',')) > 0
-        )
-        LIMIT 10000
-      `)) as unknown as [Array<{ item_name: string }>, unknown];
-
-			let missingNitro = 0;
-			for (const item of importedItems) {
-				const starIdx = item.item_name.indexOf("*");
-				const base =
-					starIdx !== -1
-						? item.item_name.substring(0, starIdx)
-						: item.item_name;
-				const nitroPath = path.join(
-					/*turbopackIgnore: true*/ nitroDir,
-					`${base}.nitro`,
-				);
-				if (!existsSync(/*turbopackIgnore: true*/ nitroPath)) missingNitro++;
-			}
-
-			return apiOk({ totalInDb, inCatalog, notInCatalog, missingNitro });
+			return apiOk(await getFurniImportStats(nitroDir));
 		}

 		// Live furnidata reconcile (without hotel RCON reload)
@@ -255,18 +200,14 @@ export const GET = withAdmin(
 				unknown,
 			];

-			// Filter to only those missing .nitro on filesystem
+			// Filter to only those missing .nitro on filesystem (memoized — fast)
 			const missing = importedItems.filter((item) => {
 				const starIdx = item.item_name.indexOf("*");
 				const base =
 					starIdx !== -1
 						? item.item_name.substring(0, starIdx)
 						: item.item_name;
-				const p = path.join(
-					/*turbopackIgnore: true*/ nitroDir,
-					`${base}.nitro`,
-				);
-				return !existsSync(/*turbopackIgnore: true*/ p);
+				return !nitroExistsCached(nitroDir, base);
 			});

 			const total = missing.length;
@@ -304,11 +245,9 @@ export const GET = withAdmin(
 		const page = parseInt(request.nextUrl.searchParams.get("page") || "1", 10);

 		// ── Browse a custom clone source (retro hotel furnidata) ────────
-		const localRows = await db
-			.select({ id: ItemsBase.id, itemName: ItemsBase.itemName })
-			.from(ItemsBase);
-		const localIndex = indexLocalFurniture(localRows);
-		const importedSet = new Set(localIndex.keys());
+		const { localIndex, importedSet } = await getLocalCatalogSnapshot();
+		const furniDataSet = await getFurniDataClassnames();
+		const catalogIdSet = await getCatalogIdSet();
 		const sourceId = request.nextUrl.searchParams.get("source");
 		if (sourceId) {
 			const source = await getSource(sourceId);
@@ -324,37 +263,6 @@ export const GET = withAdmin(

 			const sourceIconBase = source.iconBaseUrl?.trim().replace(/\/+$/, "");

-			// Bulk-load FurnitureData and catalog references for status checks
-			const furniDataSet = new Set<string>();
-			const catalogIdSet = new Set<number>();
-			try {
-				const fd = (await readFurniData()) as {
-					roomitemtypes?: { furnitype?: Array<{ classname?: string }> };
-					wallitemtypes?: { furnitype?: Array<{ classname?: string }> };
-				};
-				for (const e of [
-					...(fd.roomitemtypes?.furnitype ?? []),
-					...(fd.wallitemtypes?.furnitype ?? []),
-				]) {
-					if (e.classname) furniDataSet.add(normalizeClassname(e.classname));
-				}
-			} catch {
-				/* best effort */
-			}
-			try {
-				const rows = await db.execute(sql`SELECT item_ids FROM catalog_items`);
-				for (const row of (
-					rows as unknown as [Array<{ item_ids: string | null }>, unknown]
-				)[0]) {
-					for (const part of String(row.item_ids ?? "").split(/[;,]/)) {
-						const n = Number(part.trim());
-						if (Number.isFinite(n) && n > 0) catalogIdSet.add(n);
-					}
-				}
-			} catch {
-				/* best effort */
-			}
-
 			const enriched = items.map((item) => {
 				const presence = localFurnitureStatus(
 					item.classname,
@@ -370,20 +278,10 @@ export const GET = withAdmin(
 						starIdx !== -1
 							? item.classname.substring(0, starIdx)
 							: item.classname;
-					const p = path.join(
-						/*turbopackIgnore: true*/ nitroDir,
-						`${base}.nitro`,
-					);
 					nitroExists =
-						existsSync(/*turbopackIgnore: true*/ p) ||
+						nitroExistsCached(nitroDir, base) ||
 						(localIndex.get(normalizeClassname(item.classname)) ?? []).some(
-							(row) =>
-								existsSync(
-									path.join(
-										/*turbopackIgnore: true*/ nitroDir,
-										`${row.itemName.split("*")[0]}.nitro`,
-									),
-								),
+							(row) => nitroExistsCached(nitroDir, row.itemName.split("*")[0]),
 						);
 				}
 				return {
@@ -415,37 +313,6 @@ export const GET = withAdmin(
 			});
 		}

-		// Bulk-load FurnitureData and catalog references for status checks
-		const furniDataSet = new Set<string>();
-		const catalogIdSet = new Set<number>();
-		try {
-			const fd = (await readFurniData()) as {
-				roomitemtypes?: { furnitype?: Array<{ classname?: string }> };
-				wallitemtypes?: { furnitype?: Array<{ classname?: string }> };
-			};
-			for (const e of [
-				...(fd.roomitemtypes?.furnitype ?? []),
-				...(fd.wallitemtypes?.furnitype ?? []),
-			]) {
-				if (e.classname) furniDataSet.add(normalizeClassname(e.classname));
-			}
-		} catch {
-			/* best effort */
-		}
-		try {
-			const rows = await db.execute(sql`SELECT item_ids FROM catalog_items`);
-			for (const row of (
-				rows as unknown as [Array<{ item_ids: string | null }>, unknown]
-			)[0]) {
-				for (const part of String(row.item_ids ?? "").split(/[;,]/)) {
-					const n = Number(part.trim());
-					if (Number.isFinite(n) && n > 0) catalogIdSet.add(n);
-				}
-			}
-		} catch {
-			/* best effort */
-		}
-
 		const result = await listFurniture({
 			search: search || undefined,
 			page,
@@ -468,20 +335,10 @@ export const GET = withAdmin(
 					starIdx !== -1
 						? item.classname.substring(0, starIdx)
 						: item.classname;
-				const p = path.join(
-					/*turbopackIgnore: true*/ nitroDir,
-					`${base}.nitro`,
-				);
 				nitroExists =
-					existsSync(/*turbopackIgnore: true*/ p) ||
+					nitroExistsCached(nitroDir, base) ||
 					(localIndex.get(normalizeClassname(item.classname)) ?? []).some(
-						(row) =>
-							existsSync(
-								path.join(
-									/*turbopackIgnore: true*/ nitroDir,
-									`${row.itemName.split("*")[0]}.nitro`,
-								),
-							),
+						(row) => nitroExistsCached(nitroDir, row.itemName.split("*")[0]),
 					);
 			}
 			return {
@@ -658,6 +515,9 @@ export const POST = withAdmin(
 			const succeeded = results.filter((r) => r.ok).length;
 			const failed = results.filter((r) => !r.ok).length;

+			// New items + files landed — drop caches so the next Studio load is fresh.
+			clearFurniImportCache();
+
 			return apiOk({
 				batch: true,
 				succeeded,
@@ -799,6 +659,8 @@ export const POST = withAdmin(
 				},
 			});

+			clearFurniImportCache();
+
 			return apiOk({
 				id: result.itemId,
 				catalogItemId: result.catalogItemId,
@@ -990,6 +852,9 @@ export const PATCH = withAdmin(
 		const succeeded = results.filter((r) => r.ok).length;
 		const failed = results.filter((r) => !r.ok).length;

+		// New .nitro files were written — drop the presence cache.
+		clearFurniImportCache();
+
 		return apiOk({ succeeded, failed, results });
 	},
 );
@@ -1,8 +1,17 @@
 "use client";

-import { Ban, Check, Circle, Loader2, RefreshCw, X } from "lucide-react";
-import { memo } from "react";
+import {
+	Ban,
+	Check,
+	Circle,
+	CircleAlert,
+	Loader2,
+	RefreshCw,
+	X,
+} from "lucide-react";
+import { memo, useEffect, useMemo, useState } from "react";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import type { BatchItemStatus, VerificationSummary } from "./studio-types";

 const statusLabels: Record<BatchItemStatus["status"], string> = {
@@ -15,6 +24,22 @@ const statusLabels: Record<BatchItemStatus["status"], string> = {
 	failed: "Failed",
 };

+function formatDuration(ms: number): string {
+	if (!Number.isFinite(ms) || ms < 0) return "0s";
+	const s = Math.floor(ms / 1000);
+	if (s < 60) return `${s}s`;
+	const m = Math.floor(s / 60);
+	const rest = s % 60;
+	return rest > 0 ? `${m}m ${rest}s` : `${m}m`;
+}
+
+function formatRate(completed: number, ms: number): string {
+	if (ms < 1500) return "";
+	const perMinute = completed / (ms / 60000);
+	if (perMinute < 1) return `${(completed / (ms / 1000)).toFixed(1)}/s`;
+	return `${Math.round(perMinute)}/min`;
+}
+
 export const BatchProgress = memo(function BatchProgress({
 	progress,
 	done,
@@ -23,6 +48,7 @@ export const BatchProgress = memo(function BatchProgress({
 	cancelling,
 	verification,
 	failedClassnames,
+	startTime,
 	onCancel,
 	onDismiss,
 	onRetry,
@@ -39,10 +65,21 @@ export const BatchProgress = memo(function BatchProgress({
 	onDismiss?: () => void;
 	onRetry?: (classnames: string[]) => void;
 }) {
-	const entries = [...progress.values()];
-	const completed = entries.filter(
-		(item) => item.status === "done" || item.status === "failed",
-	).length;
+	const [now, setNow] = useState(() => Date.now());
+
+	useEffect(() => {
+		if (done) return;
+		const id = setInterval(() => setNow(Date.now()), 500);
+		return () => clearInterval(id);
+	}, [done]);
+
+	const entries = useMemo(() => [...progress.values()], [progress]);
+	const completed = useMemo(
+		() =>
+			entries.filter((i) => i.status === "done" || i.status === "failed")
+				.length,
+		[entries],
+	);
 	const total = entries.length;
 	const percent = total ? Math.round((completed / total) * 100) : 0;
 	const imported = done
@@ -52,6 +89,8 @@ export const BatchProgress = memo(function BatchProgress({
 		? failed
 		: entries.filter((item) => item.status === "failed").length;
 	const unfinished = Math.max(0, total - completed);
+	const elapsed = startTime ? now - startTime : 0;
+	const rate = formatRate(completed, elapsed);
 	const heading = !done
 		? cancelling
 			? "Stopping import…"
@@ -64,6 +103,7 @@ export const BatchProgress = memo(function BatchProgress({
 	const issues = verification
 		? verification.furniDataMissing + verification.furniDataConflicts
 		: 0;
+
 	return (
 		<section
 			aria-label="Import progress"
@@ -77,10 +117,44 @@ export const BatchProgress = memo(function BatchProgress({
 					>
 						{heading}
 					</h2>
-					<p className="mt-1 text-xs text-[var(--admin-text-muted)]">
-						{imported} imported · {errors} failed
-						{unfinished > 0 &&
-							` · ${unfinished} ${done ? "not completed" : "remaining"}`}
+					<p className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-[var(--admin-text-muted)]">
+						<span>
+							<span className="font-semibold text-[var(--admin-success)]">
+								{imported}
+							</span>{" "}
+							imported
+						</span>
+						<span className="text-[var(--admin-border)]">·</span>
+						<span>
+							<span
+								className={cn(
+									"font-semibold",
+									errors > 0 && "text-[var(--admin-error)]",
+								)}
+							>
+								{errors}
+							</span>{" "}
+							failed
+						</span>
+						{unfinished > 0 && (
+							<>
+								<span className="text-[var(--admin-border)]">·</span>
+								<span>
+									{unfinished} {done ? "not completed" : "remaining"}
+								</span>
+							</>
+						)}
+						{!done && startTime ? (
+							<>
+								<span className="text-[var(--admin-border)]">·</span>
+								<span className="tabular-nums">{formatDuration(elapsed)}</span>
+								{rate && (
+									<span className="tabular-nums text-[var(--admin-accent)]">
+										{rate}
+									</span>
+								)}
+							</>
+						) : null}
 					</p>
 				</div>
 				<div className="flex flex-wrap gap-2">
@@ -127,16 +201,38 @@ export const BatchProgress = memo(function BatchProgress({
 				className="my-3 h-2 overflow-hidden rounded-full bg-[var(--admin-accent)]/10"
 			>
 				<div
-					className="h-full rounded-full bg-[var(--admin-accent)] transition-all"
+					className="h-full rounded-full bg-gradient-to-r from-[var(--admin-accent)] to-[var(--admin-accent)]/70 transition-all"
 					style={{ width: `${percent}%` }}
 				/>
 			</div>
 			{done && verification && (
-				<p className="mb-2 text-sm text-[var(--admin-text-muted)]">
+				<div className="mb-3 flex flex-wrap items-center gap-1.5">
+					<p className="mr-1 text-sm text-[var(--admin-text-muted)]">
 						{issues
 							? `${issues} catalog data issue(s) still need attention. Open Catalog audit to review them.`
 							: "Catalog data verification completed."}
 					</p>
+					<NodeChip
+						count={verification.furniDataFixedIds}
+						label="furnidata ids fixed"
+					/>
+					<NodeChip
+						count={verification.offerIdsFixed}
+						label="offer ids reconciled"
+					/>
+					<NodeChip
+						count={verification.ownershipFixed.length}
+						label="ownerships fixed"
+					/>
+					<NodeChip
+						count={verification.nitrosSynced.length}
+						label="nitros synced"
+					/>
+					<NodeChip
+						count={verification.iconsSynced.length}
+						label="icons synced"
+					/>
+				</div>
 			)}
 			<details>
 				<summary className="cursor-pointer text-xs font-medium">
@@ -146,19 +242,29 @@ export const BatchProgress = memo(function BatchProgress({
 					{entries.map((item) => (
 						<div
 							key={item.classname}
-							className="rounded-md bg-[var(--admin-canvas)] p-2 text-xs"
+							className="flex items-start gap-2 rounded-md bg-[var(--admin-canvas)] p-2 text-xs"
 						>
-							<div className="flex items-center gap-2">
 							{item.status === "done" ? (
-									<Check size={14} className="text-[var(--admin-success)]" />
+								<Check
+									size={14}
+									className="mt-0.5 shrink-0 text-[var(--admin-success)]"
+								/>
 							) : item.status === "failed" ? (
-									<X size={14} className="text-[var(--admin-warning)]" />
+								<X
+									size={14}
+									className="mt-0.5 shrink-0 text-[var(--admin-error)]"
+								/>
 							) : done || item.status === "pending" ? (
-									<Circle size={12} />
+								<Circle
+									size={12}
+									className="mt-0.5 shrink-0 text-[var(--admin-text-muted)]"
+								/>
 							) : (
-									<Loader2 size={14} className="animate-spin" />
+								<Loader2 size={14} className="mt-0.5 shrink-0 animate-spin" />
 							)}
-								<span className="min-w-0 flex-1 break-all font-medium">
+							<span className="min-w-0 flex-1">
+								<span className="flex flex-wrap items-baseline justify-between gap-1">
+									<span className="break-all font-medium">
 										{item.classname}
 									</span>
 									<span className="shrink-0 text-[var(--admin-text-muted)]">
@@ -166,20 +272,22 @@ export const BatchProgress = memo(function BatchProgress({
 											? "Not completed"
 											: statusLabels[item.status]}
 									</span>
-							</div>
+								</span>
 								{item.message && (
-								<p className="mt-1 break-words text-[var(--admin-text-muted)]">
+									<span className="mt-0.5 block break-words text-[var(--admin-text-muted)]">
 										{item.message}
-								</p>
+									</span>
 								)}
 								{[...new Set(item.warnings ?? [])].map((warning) => (
-								<p
+									<span
 										key={warning}
-									className="mt-1 break-words text-[var(--admin-warning)]"
+										className="mt-0.5 flex items-center gap-1 break-words text-[var(--admin-warning)]"
 									>
+										<CircleAlert size={11} className="shrink-0" />
 										{warning}
-								</p>
+									</span>
 								))}
+							</span>
 						</div>
 					))}
 				</div>
@@ -187,3 +295,13 @@ export const BatchProgress = memo(function BatchProgress({
 		</section>
 	);
 });
+
+function NodeChip({ count, label }: { count: number; label: string }) {
+	if (!count) return null;
+	return (
+		<span className="inline-flex items-center gap-1 rounded-full border border-[var(--admin-success)]/30 bg-[var(--admin-success)]/10 px-2 py-0.5 text-[0.65rem] text-[var(--admin-success)]">
+			<Check size={10} />
+			{count} {label}
+		</span>
+	);
+}
@@ -1,11 +1,12 @@
 "use client";

+import { useVirtualizer } from "@tanstack/react-virtual";
 import {
+	ArrowDown,
 	ArrowUpDown,
 	Check,
 	CircleAlert,
 	CloudDownload,
-	Download,
 	Globe,
 	Languages,
 	Layers,
@@ -101,6 +102,11 @@ const ImportReview = lazy(() =>
 	})),
 );

+// Grid virtualization geometry (px) — matches the grid-card markup below.
+const GRID_CARD_W = 150;
+const GRID_GAP = 12;
+const GRID_ROW_H = 176;
+
 export function StudioClient({
 	source,
 	initialTree,
@@ -269,6 +275,39 @@ export function StudioClient({
 		[filteredItems, selected],
 	);

+	const hasMorePages = meta ? meta.currentPage < meta.lastPage : false;
+
+	// ── Grid virtualization ─────────────────────────────────────────
+	const [gridCols, setGridCols] = useState(1);
+	useEffect(() => {
+		const el = listRef.current;
+		if (viewMode !== "grid" || !el) return;
+		const update = () => {
+			const width = Math.max(el.clientWidth - 24, 100);
+			const cols = Math.max(
+				1,
+				Math.floor((width + GRID_GAP) / (GRID_CARD_W + GRID_GAP)),
+			);
+			setGridCols((previous) => (previous === cols ? previous : cols));
+		};
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [viewMode]);
+
+	const gridRowCount =
+		viewMode === "grid" ? Math.ceil(filteredItems.length / gridCols) : 0;
+	const gridVirtualizer = useVirtualizer({
+		count: gridRowCount,
+		getScrollElement: () => listRef.current,
+		estimateSize: () => GRID_ROW_H,
+		overscan: 5,
+	});
+
+	// Infinite scroll: auto-load the next page when the sentinel enters view.
+	const sentinelRef = useRef<HTMLDivElement | null>(null);
+
 	const fetchStats = useCallback(async () => {
 		try {
 			const res = await adminFetch("/api/admin/import/furni?action=stats");
@@ -335,6 +374,39 @@ export function StudioClient({
 		[],
 	);

+	// Infinite scroll: auto-load the next page when the sentinel enters view.
+	useEffect(() => {
+		const el = sentinelRef.current;
+		if (!el || !hasMorePages) return;
+		let cancelled = false;
+		const observer = new IntersectionObserver(
+			(entries) => {
+				if (cancelled) return;
+				if (
+					entries.some((e) => e.isIntersecting) &&
+					!loading &&
+					!batchProgress
+				) {
+					fetchItems(activeSearch, (meta?.currentPage ?? 1) + 1, activeSource);
+				}
+			},
+			{ root: listRef.current, rootMargin: "700px 0px" },
+		);
+		observer.observe(el);
+		return () => {
+			cancelled = true;
+			observer.disconnect();
+		};
+	}, [
+		hasMorePages,
+		meta?.currentPage,
+		loading,
+		batchProgress,
+		activeSearch,
+		activeSource,
+		fetchItems,
+	]);
+
 	const changeSource = (sourceId: string) => {
 		sourceGeneration.current += 1;
 		setConfirmDelete(false);
@@ -1631,18 +1703,44 @@ export function StudioClient({
 						) : (
 							<>
 								{viewMode === "grid" ? (
-									<div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-3">
-										{filteredItems.map((item) => {
+									<div
+										className="relative w-full"
+										style={{ height: `${gridVirtualizer.getTotalSize()}px` }}
+									>
+										{gridVirtualizer.getVirtualItems().map((vi) => {
+											const start = vi.index * gridCols;
+											const rowItems = filteredItems.slice(
+												start,
+												start + gridCols,
+											);
+											return (
+												<div
+													key={vi.key}
+													data-index={vi.index}
+													ref={gridVirtualizer.measureElement}
+													className="absolute left-0 top-0 w-full will-change-transform"
+													style={{ transform: `translateY(${vi.start}px)` }}
+												>
+													<div
+														className="grid gap-3"
+														style={{
+															gridTemplateColumns: `repeat(${gridCols}, minmax(0, 1fr))`,
+														}}
+													>
+														{rowItems.map((item) => {
 															const isSel = selected.has(item.classname);
 															return (
-												<div key={item.classname} className="group relative">
+																<div
+																	key={item.classname}
+																	className="group relative"
+																>
 																	<button
 																		type="button"
 																		onClick={() => openDetail(item)}
 																		className={cn(
 																			"flex w-full flex-col overflow-hidden rounded-xl border text-left transition-all outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]",
 																			isSel
-																? "border-[var(--admin-accent)] bg-[var(--admin-accent)]/10"
+																				? "border-[var(--admin-accent)] bg-[var(--admin-accent)]/10 ring-2 ring-[var(--admin-accent)]/20"
 																				: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:-translate-y-0.5 hover:border-[var(--admin-accent)]/60 hover:shadow-lg hover:shadow-[var(--admin-accent)]/10",
 																		)}
 																	>
@@ -1654,12 +1752,14 @@ export function StudioClient({
 																				backgroundSize: "14px 14px",
 																			}}
 																		>
+																			<div className="pointer-events-none absolute inset-x-0 top-0 h-10 bg-gradient-to-b from-[var(--admin-text)]/5 to-transparent" />
 																			<img
 																				src={getFurniImageUrl(item)}
 																				alt={item.name}
-																className="h-14 w-14 object-contain transition-transform group-hover:scale-110"
+																				className="h-14 w-14 object-contain drop-shadow-[0_2px_4px_rgba(0,0,0,0.25)] transition-transform duration-200 group-hover:scale-110"
 																				style={{ imageRendering: "pixelated" }}
 																				loading="lazy"
+																				decoding="async"
 																				onError={(e) => handleImgError(e, item)}
 																			/>
 																		</div>
@@ -1671,6 +1771,9 @@ export function StudioClient({
 																				<p className="truncate font-mono text-[0.6rem] text-[var(--admin-text-muted)]">
 																					{item.classname}
 																				</p>
+<p className="truncate text-[0.6rem] text-[var(--admin-text-muted)]/80">
+																						{item.category || "—"}
+																					</p>
 																			</div>
 																		</div>
 																		<div className="flex items-center gap-1 px-2 pb-1.5">
@@ -1728,10 +1831,10 @@ export function StudioClient({
 																			toggleSelect(item.classname);
 																		}}
 																		className={cn(
-															"absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-md border transition-colors",
+																			"absolute right-2 top-2 grid h-8 w-8 place-items-center rounded-md border transition-all",
 																			isSel
-																? "border-[var(--admin-accent)] bg-[var(--admin-accent)]"
-																: "border-[var(--admin-border)] bg-[var(--admin-surface)] hover:border-[var(--admin-accent)]/60",
+																				? "scale-105 border-[var(--admin-accent)] bg-[var(--admin-accent)] shadow-md shadow-[var(--admin-accent)]/30"
+																				: "border-[var(--admin-border)] bg-[var(--admin-surface)] opacity-70 hover:border-[var(--admin-accent)]/60 hover:opacity-100",
 																		)}
 																		aria-label={`${isSel ? "Deselect" : "Select"} ${item.name}`}
 																		aria-pressed={isSel}
@@ -1747,6 +1850,10 @@ export function StudioClient({
 															);
 														})}
 													</div>
+												</div>
+											);
+										})}
+									</div>
 								) : (
 									<div className="overflow-x-auto rounded-lg border border-[var(--admin-border)]">
 										<table className="w-full min-w-[660px] text-sm">
@@ -1956,29 +2063,33 @@ export function StudioClient({
 									</div>
 								)}

-								{meta && meta.currentPage < meta.lastPage && (
-									<div className="mt-4 flex justify-center">
-										<Button
-											variant="secondary"
-											onClick={() =>
-												fetchItems(
-													activeSearch,
-													meta.currentPage + 1,
-													activeSource,
-												)
-											}
-											disabled={loading}
+								<div
+									ref={sentinelRef}
+									className="mt-4 flex flex-col items-center justify-center gap-2 py-2 text-xs text-[var(--admin-text-muted)]"
 								>
-											{loading ? (
-												<Loader2 size={14} className="animate-spin" />
+									{hasMorePages ? (
+										loading ? (
+											<span className="flex items-center gap-2">
+												<Loader2
+													size={14}
+													className="animate-spin text-[var(--admin-accent)]"
+												/>
+												Loading more…
+											</span>
 										) : (
-												<Download size={14} />
+											<span className="flex items-center gap-2">
+												<ArrowDown size={12} />
+												Scroll for more
+											</span>
+										)
+									) : (
+										<span className="flex items-center gap-2">
+											<span className="h-px w-8 bg-[var(--admin-border)]" />
+											End of results
+											<span className="h-px w-8 bg-[var(--admin-border)]" />
+										</span>
 									)}
-											Load more ({meta.total - meta.currentPage * meta.perPage}{" "}
-											left)
-										</Button>
 								</div>
-								)}
 							</>
 						)}
 					</div>
@@ -0,0 +1,223 @@
+/**
+ * In-memory caches for the Studio furni listings.
+ *
+ * The Studio GET route recomputes three heavy database snapshots plus
+ * per-item filesystem checks on every single request:
+ *   1. `items_base` → local import index (full table scan)
+ *   2. `FurnitureData.json` → normalized classname set (full file parse)
+ *   3. `catalog_items.item_ids` → referenced id set (full table scan)
+ *   4. one `existsSync` per imported item for .nitro presence
+ *
+ * All of those are cached here with a short TTL. Mutations (import/delete/
+ * regen/sync) clear everything via `clearFurniImportCache()`.
+ */
+
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { sql } from "drizzle-orm";
+import { db, ItemsBase } from "@/lib/db";
+import { normalizeClassname } from "@/lib/furni/classname";
+import { indexLocalFurniture } from "@/lib/furni/local-presence";
+import { readFurniData } from "./furni-data";
+
+const CACHE_TTL = 30_000; // 30 seconds
+
+type LocalSnapshot = {
+	localIndex: Map<string, Array<{ id: number; itemName: string }>>;
+	importedSet: Set<string>;
+	timestamp: number;
+};
+
+let localSnapshot: LocalSnapshot | null = null;
+
+/** Items already present in `items_base`, indexed + flattened to a set. */
+export async function getLocalCatalogSnapshot(): Promise<LocalSnapshot> {
+	const now = Date.now();
+	if (localSnapshot && now - localSnapshot.timestamp < CACHE_TTL) {
+		return localSnapshot;
+	}
+	const rows = await db
+		.select({ id: ItemsBase.id, itemName: ItemsBase.itemName })
+		.from(ItemsBase);
+	const localIndex = indexLocalFurniture(rows);
+	const snapshot: LocalSnapshot = {
+		localIndex,
+		importedSet: new Set(localIndex.keys()),
+		timestamp: now,
+	};
+	localSnapshot = snapshot;
+	return snapshot;
+}
+
+let furniDataSetSnapshot: { set: Set<string>; timestamp: number } | null = null;
+
+/** Normalized classnames present in the local FurnitureData.json. */
+export async function getFurniDataClassnames(): Promise<Set<string>> {
+	const now = Date.now();
+	if (
+		furniDataSetSnapshot &&
+		now - furniDataSetSnapshot.timestamp < CACHE_TTL
+	) {
+		return furniDataSetSnapshot.set;
+	}
+	const set = new Set<string>();
+	try {
+		const fd = (await readFurniData()) as {
+			roomitemtypes?: { furnitype?: Array<{ classname?: string }> };
+			wallitemtypes?: { furnitype?: Array<{ classname?: string }> };
+		};
+		for (const e of [
+			...(fd.roomitemtypes?.furnitype ?? []),
+			...(fd.wallitemtypes?.furnitype ?? []),
+		]) {
+			if (e.classname) set.add(normalizeClassname(e.classname));
+		}
+	} catch {
+		/* best effort — empty set means every item shows "no furnidata" */
+	}
+	furniDataSetSnapshot = { set, timestamp: now };
+	return set;
+}
+
+let catalogIdsSnapshot: { set: Set<number>; timestamp: number } | null = null;
+
+/** IDs referenced by any `catalog_items.item_ids`. */
+export async function getCatalogIdSet(): Promise<Set<number>> {
+	const now = Date.now();
+	if (catalogIdsSnapshot && now - catalogIdsSnapshot.timestamp < CACHE_TTL) {
+		return catalogIdsSnapshot.set;
+	}
+	const set = new Set<number>();
+	try {
+		const rows = await db.execute(sql`SELECT item_ids FROM catalog_items`);
+		for (const row of (
+			rows as unknown as [Array<{ item_ids: string | null }>, unknown]
+		)[0]) {
+			for (const part of String(row.item_ids ?? "").split(/[;,]/)) {
+				const n = Number(part.trim());
+				if (Number.isFinite(n) && n > 0) set.add(n);
+			}
+		}
+	} catch {
+		/* best effort — empty set means every item shows "no catalog entry" */
+	}
+	catalogIdsSnapshot = { set, timestamp: now };
+	return set;
+}
+
+const nitroPresenceCache = new Map<string, boolean>();
+
+/** `existsSync` memoized per (dir + base) — nitro files change rarely. */
+export function nitroExistsCached(dir: string, base: string): boolean {
+	const key = `${dir}/${base}`;
+	const cached = nitroPresenceCache.get(key);
+	if (cached !== undefined) return cached;
+	const present = existsSync(path.join(dir, `${base}.nitro`));
+	nitroPresenceCache.set(key, present);
+	return present;
+}
+
+type FurniStats = {
+	totalInDb: number;
+	inCatalog: number;
+	notInCatalog: number;
+	missingNitro: number;
+};
+
+let statsSnapshot: { stats: FurniStats; timestamp: number } | null = null;
+
+/**
+ * Studio header stats. Falls back to a previously cached result if the
+ * expensive scan (all of items_base + a 10k filesystem probe) fails.
+ */
+export async function getFurniImportStats(
+	nitroDir: string,
+): Promise<FurniStats> {
+	const now = Date.now();
+	if (statsSnapshot && now - statsSnapshot.timestamp < CACHE_TTL) {
+		return statsSnapshot.stats;
+	}
+	try {
+		const [totalResult, catalogResult, allIdsResult, referencedResult] =
+			await Promise.all([
+				db.execute(sql`SELECT COUNT(*) as cnt FROM items_base`),
+				db.execute(
+					sql`SELECT COUNT(DISTINCT item_ids) as cnt FROM catalog_items`,
+				),
+				db.execute(sql`SELECT id FROM items_base`),
+				db.execute(sql`SELECT item_ids FROM catalog_items`),
+			]);
+
+		const totalInDb = Number(
+			(totalResult as unknown as [[{ cnt: bigint }], unknown])[0][0].cnt,
+		);
+		const inCatalog = Number(
+			(catalogResult as unknown as [[{ cnt: bigint }], unknown])[0][0].cnt,
+		);
+
+		const allIds = (
+			allIdsResult as unknown as [Array<{ id: number }>, unknown]
+		)[0].map((r) => Number(r.id));
+		const referenced = new Set<number>();
+		for (const row of (
+			referencedResult as unknown as [
+				Array<{ item_ids: string | null }>,
+				unknown,
+			]
+		)[0]) {
+			for (const part of String(row.item_ids ?? "").split(/[;,]/)) {
+				const n = Number(part.trim());
+				if (Number.isFinite(n) && n > 0) referenced.add(n);
+			}
+		}
+		const notInCatalog = allIds.filter((id) => !referenced.has(id)).length;
+
+		const [importedItems] = (await db.execute(sql`
+        SELECT ib.item_name FROM items_base ib
+        WHERE EXISTS (
+          SELECT 1 FROM catalog_items ci
+          WHERE FIND_IN_SET(ib.id, REPLACE(ci.item_ids, ';', ',')) > 0
+        )
+        LIMIT 10000
+      `)) as unknown as [Array<{ item_name: string }>, unknown];
+
+		let missingNitro = 0;
+		for (const item of importedItems) {
+			const starIdx = item.item_name.indexOf("*");
+			const base =
+				starIdx !== -1 ? item.item_name.substring(0, starIdx) : item.item_name;
+			if (!nitroExistsCached(nitroDir, base)) missingNitro++;
+		}
+
+		const stats: FurniStats = {
+			totalInDb,
+			inCatalog,
+			notInCatalog,
+			missingNitro,
+		};
+		statsSnapshot = { stats, timestamp: now };
+		return stats;
+	} catch (err) {
+		console.warn(
+			"[furni-import-cache] Stats scan failed:",
+			(err as Error).message,
+		);
+		return (
+			statsSnapshot?.stats ?? {
+				totalInDb: 0,
+				inCatalog: 0,
+				notInCatalog: 0,
+				missingNitro: 0,
+			}
+		);
+	}
+}
+
+/** Drop every cache after a mutation so the next Studio request is fresh. */
+export function clearFurniImportCache(): void {
+	localSnapshot = null;
+	furniDataSetSnapshot = null;
+	catalogIdsSnapshot = null;
+	nitroPresenceCache.clear();
+	statsSnapshot = null;
+}