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

src/components/admin/studio/batch-progress.tsx

@@ -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)]">
-					{issues
-						? `${issues} catalog data issue(s) still need attention. Open Catalog audit to review them.`
-						: "Catalog data verification completed."}
-				</p>
+				<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,40 +242,52 @@ 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)]" />
-								) : item.status === "failed" ? (
-									<X size={14} className="text-[var(--admin-warning)]" />
-								) : done || item.status === "pending" ? (
-									<Circle size={12} />
-								) : (
-									<Loader2 size={14} className="animate-spin" />
-								)}
-								<span className="min-w-0 flex-1 break-all font-medium">
-									{item.classname}
-								</span>
-								<span className="shrink-0 text-[var(--admin-text-muted)]">
-									{done && item.status !== "done" && item.status !== "failed"
-										? "Not completed"
-										: statusLabels[item.status]}
-								</span>
-							</div>
-							{item.message && (
-								<p className="mt-1 break-words text-[var(--admin-text-muted)]">
-									{item.message}
-								</p>
+							{item.status === "done" ? (
+								<Check
+									size={14}
+									className="mt-0.5 shrink-0 text-[var(--admin-success)]"
+								/>
+							) : item.status === "failed" ? (
+								<X
+									size={14}
+									className="mt-0.5 shrink-0 text-[var(--admin-error)]"
+								/>
+							) : done || item.status === "pending" ? (
+								<Circle
+									size={12}
+									className="mt-0.5 shrink-0 text-[var(--admin-text-muted)]"
+								/>
+							) : (
+								<Loader2 size={14} className="mt-0.5 shrink-0 animate-spin" />
 							)}
-							{[...new Set(item.warnings ?? [])].map((warning) => (
-								<p
-									key={warning}
-									className="mt-1 break-words text-[var(--admin-warning)]"
-								>
-									{warning}
-								</p>
-							))}
+							<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)]">
+										{done && item.status !== "done" && item.status !== "failed"
+											? "Not completed"
+											: statusLabels[item.status]}
+									</span>
+								</span>
+								{item.message && (
+									<span className="mt-0.5 block break-words text-[var(--admin-text-muted)]">
+										{item.message}
+									</span>
+								)}
+								{[...new Set(item.warnings ?? [])].map((warning) => (
+									<span
+										key={warning}
+										className="mt-0.5 flex items-center gap-1 break-words text-[var(--admin-warning)]"
+									>
+										<CircleAlert size={11} className="shrink-0" />
+										{warning}
+									</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>
+	);
+}