perf(studio): virtualize the furniture table and throttle batch progress

- Render the table view through a virtualizer too, using a shared grid
  template so the sticky header and rows keep perfect column alignment
- Keep semantic table/row/cell elements while virtualizing
- Cap the batch item-details list to the latest 60 rows (newest first)
- Coalesce per-item progress events server-side (120ms throttle) in both
  the exact-import and clone SSE batch runners

src/app/api/admin/import/furni/batch/route.ts

@@ -117,6 +117,11 @@ export const POST = withAdmin(
 						});
 
 						try {
+							// Coalesce micro-step progress events to at most one per
+							// ~120ms per item so large imports don't flood the client
+							// (terminal states are always emitted by importSingleFurni
+							// and sent below).
+							let lastProgressSent = 0;
 							const result: ImportSingleResult = await importSingleFurni({
 								id: item.id ?? 0,
 								classname: item.classname,
@@ -131,6 +136,9 @@ export const POST = withAdmin(
 								nitroBaseUrl: source?.nitroBaseUrl,
 								iconBaseUrl: source?.iconBaseUrl,
 								onProgress: (status: string) => {
+									const now = Date.now();
+									if (now - lastProgressSent < 120) return;
+									lastProgressSent = now;
 									send({
 										type: "item_progress",
 										classname: item.classname,

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

@@ -73,7 +73,13 @@ export const BatchProgress = memo(function BatchProgress({
 		return () => clearInterval(id);
 	}, [done]);
 
-	const entries = useMemo(() => [...progress.values()], [progress]);
+	// Relevance-first list: newest activity on top, capped so high-volume
+	// imports don't render hundreds of DOM rows on every progress event.
+	const VISIBLE_ITEMS = 60;
+	const entries = useMemo(
+		() => [...progress.values()].slice().reverse(),
+		[progress],
+	);
 	const completed = useMemo(
 		() =>
 			entries.filter((i) => i.status === "done" || i.status === "failed")
@@ -239,7 +245,12 @@ export const BatchProgress = memo(function BatchProgress({
 					View item details ({total})
 				</summary>
 				<div className="mt-2 max-h-44 space-y-2 overflow-auto">
-					{entries.map((item) => (
+					{entries.length > VISIBLE_ITEMS && (
+						<p className="px-1 text-[0.65rem] text-[var(--admin-text-muted)]">
+							Showing {VISIBLE_ITEMS} of {entries.length} items
+						</p>
+					)}
+					{entries.slice(0, VISIBLE_ITEMS).map((item) => (
 						<div
 							key={item.classname}
 							className="flex items-start gap-2 rounded-md bg-[var(--admin-canvas)] p-2 text-xs"

src/components/admin/studio/studio-client.tsx

@@ -107,6 +107,12 @@ const GRID_CARD_W = 150;
 const GRID_GAP = 12;
 const GRID_ROW_H = 176;
 
+// Table layout: a shared grid template keeps the sticky header and each
+// virtualized row in perfect column alignment.
+const TABLE_COLS =
+	"36px 48px minmax(0,1.4fr) minmax(0,1fr) minmax(0,0.6fr) minmax(0,0.7fr) minmax(0,1fr) 112px";
+const TABLE_ROW_H = 40;
+
 export function StudioClient({
 	source,
 	initialTree,
@@ -304,6 +310,12 @@ export function StudioClient({
 		estimateSize: () => GRID_ROW_H,
 		overscan: 5,
 	});
+	const tableVirtualizer = useVirtualizer({
+		count: viewMode === "list" ? filteredItems.length : 0,
+		getScrollElement: () => listRef.current,
+		estimateSize: () => TABLE_ROW_H,
+		overscan: 8,
+	});
 
 	// Infinite scroll: auto-load the next page when the sentinel enters view.
 	const sentinelRef = useRef<HTMLDivElement | null>(null);
@@ -1771,9 +1783,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">
+																				<p className="truncate text-[0.6rem] text-[var(--admin-text-muted)]/80">
-																						{item.category || "—"}
+																					{item.category || "—"}
-																					</p>
+																				</p>
 																			</div>
 																		</div>
 																		<div className="flex items-center gap-1 px-2 pb-1.5">
@@ -1855,212 +1867,246 @@ export function StudioClient({
 										})}
 									</div>
 								) : (
-									<div className="overflow-x-auto rounded-lg border border-[var(--admin-border)]">
+									<table
-										<table className="w-full min-w-[660px] text-sm">
+										aria-label="Furniture results"
-											<thead className="sticky top-0 z-10 bg-[var(--admin-surface)]">
+										className="w-full text-sm"
-												<tr>
+										style={{ borderCollapse: "separate" }}
-													<th className="w-9 px-2 py-2 text-left">
+									>
-														<Checkbox
+										<thead>
-															style={{
+											<tr
-																display: "inline-flex",
+												className="sticky top-0 z-10 grid w-full min-w-[660px] border-b border-[var(--admin-border)] bg-[var(--admin-surface)]"
-																width: 18,
+												style={{ gridTemplateColumns: TABLE_COLS }}
-																height: 18,
+											>
-															}}
+												<th scope="col" className="px-2 py-2 text-left">
-															className="border-[var(--admin-border)] bg-[var(--admin-surface)] data-checked:border-[var(--admin-accent)] data-checked:bg-[var(--admin-accent)] data-checked:text-[var(--admin-accent-foreground)]"
+													<Checkbox
-															checked={allSelected}
+														style={{
-															onCheckedChange={toggleAll}
+															display: "inline-flex",
-															aria-label="Select all"
+															width: 18,
-														/>
+															height: 18,
-													</th>
+														}}
-													<th className="w-12 px-1 py-2" />
+														className="border-[var(--admin-border)] bg-[var(--admin-surface)] data-checked:border-[var(--admin-accent)] data-checked:bg-[var(--admin-accent)] data-checked:text-[var(--admin-accent-foreground)]"
-													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
+														checked={allSelected}
-														Name
+														onCheckedChange={toggleAll}
-													</th>
+														aria-label="Select all"
-													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
+													/>
-														Classname
+												</th>
-													</th>
+												<th scope="col" className="px-1 py-2" />
-													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
+												<th
-														Type
+													scope="col"
-													</th>
+													className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
-													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
+												>
-														Category
+													Name
-													</th>
+												</th>
-													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
+												<th
-														Status
+													scope="col"
-													</th>
+													className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
-													<th className="w-28 px-2 py-2 text-right font-semibold text-[var(--admin-text-muted)]">
+												>
-														Actions
+													Classname
-													</th>
+												</th>
-												</tr>
+												<th
-											</thead>
+													scope="col"
-											<tbody>
+													className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
-												{filteredItems.map((item) => {
+												>
-													const isSel = selected.has(item.classname);
+													Type
-													return (
+												</th>
-														<tr
+												<th
-															key={item.classname}
+													scope="col"
-															aria-selected={isSel}
+													className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
-															className={cn(
+												>
-																"border-t border-[var(--admin-border)] transition-colors hover:bg-[var(--admin-accent)]/5",
+													Category
-																isSel && "bg-[var(--admin-accent)]/10",
+												</th>
-															)}
+												<th
-														>
+													scope="col"
-															<td className="px-2 py-1.5">
+													className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
-																<Checkbox
+												>
-																	style={{
+													Status
-																		display: "inline-flex",
+												</th>
-																		width: 18,
+												<th
-																		height: 18,
+													scope="col"
-																	}}
+													className="px-2 py-2 text-right font-semibold text-[var(--admin-text-muted)]"
-																	className="border-[var(--admin-border)] bg-[var(--admin-surface)] data-checked:border-[var(--admin-accent)] data-checked:bg-[var(--admin-accent)] data-checked:text-[var(--admin-accent-foreground)]"
+												>
-																	checked={isSel}
+													Actions
-																	onCheckedChange={() =>
+												</th>
-																		toggleSelect(item.classname)
+											</tr>
-																	}
+										</thead>
-																	aria-label={`Select ${item.classname}`}
+										<tbody
+											className="relative w-full"
+											style={{
+												display: "block",
+												height: `${tableVirtualizer.getTotalSize()}px`,
+											}}
+										>
+											{tableVirtualizer.getVirtualItems().map((vi) => {
+												const item = filteredItems[vi.index];
+												const isSel = selected.has(item.classname);
+												return (
+													<tr
+														key={vi.key}
+														data-index={vi.index}
+														ref={tableVirtualizer.measureElement}
+														aria-selected={isSel}
+														className={cn(
+															"absolute left-0 top-0 grid w-full min-w-[660px] text-sm transition-colors hover:bg-[var(--admin-accent)]/5",
+															isSel && "bg-[var(--admin-accent)]/10",
+														)}
+														style={{
+															display: "grid",
+															transform: `translateY(${vi.start}px)`,
+															gridTemplateColumns: TABLE_COLS,
+														}}
+													>
+														<td className="border-t border-[var(--admin-border)] px-2 py-1.5">
+															<Checkbox
+																style={{
+																	display: "inline-flex",
+																	width: 18,
+																	height: 18,
+																}}
+																className="border-[var(--admin-border)] bg-[var(--admin-surface)] data-checked:border-[var(--admin-accent)] data-checked:bg-[var(--admin-accent)] data-checked:text-[var(--admin-accent-foreground)]"
+																checked={isSel}
+																onCheckedChange={() =>
+																	toggleSelect(item.classname)
+																}
+																aria-label={`Select ${item.classname}`}
+															/>
+														</td>
+														<td className="border-t border-[var(--admin-border)] px-1 py-1.5">
+															<button
+																type="button"
+																onClick={() => openDetail(item)}
+																className="rounded outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]"
+																aria-label={`View ${item.name}`}
+															>
+																<img
+																	src={getFurniImageUrl(item)}
+																	alt=""
+																	className="h-8 w-8 object-contain"
+																	style={{ imageRendering: "pixelated" }}
+																	loading="lazy"
+																	onError={(e) => handleImgError(e, item)}
 																/>
-															</td>
+															</button>
-															<td className="px-1 py-1.5">
+														</td>
-																<button
+														<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 font-medium text-[var(--admin-text)]">
-																	type="button"
+															{item.name}
-																	onClick={() => openDetail(item)}
+														</td>
-																	className="rounded outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]"
+														<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 font-mono text-[0.7rem] text-[var(--admin-text-muted)]">
-																	aria-label={`View ${item.name}`}
+															{item.classname}
-																>
+														</td>
-																	<img
+														<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 text-[var(--admin-text-muted)]">
-																		src={getFurniImageUrl(item)}
+															{TYPE_LABELS[item.type] ?? item.type}
-																		alt=""
+														</td>
-																		className="h-8 w-8 object-contain"
+														<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 text-[var(--admin-text-muted)]">
-																		style={{ imageRendering: "pixelated" }}
+															{item.category || "—"}
-																		loading="lazy"
+														</td>
-																		onError={(e) => handleImgError(e, item)}
+														<td className="border-t border-[var(--admin-border)] px-2 py-1.5">
-																	/>
+															{item.alreadyImported ? (
-																</button>
+																<div className="flex flex-wrap gap-0.5">
-															</td>
+																	{!item.nitroExists && (
-															<td className="max-w-[220px] truncate px-2 py-1.5 font-medium text-[var(--admin-text)]">
+																		<Badge
-																{item.name}
+																			variant="secondary"
-															</td>
+																			className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
-															<td className="max-w-[180px] truncate px-2 py-1.5 font-mono text-[0.7rem] text-[var(--admin-text-muted)]">
-																{item.classname}
-															</td>
-															<td className="px-2 py-1.5 text-[var(--admin-text-muted)]">
-																{TYPE_LABELS[item.type] ?? item.type}
-															</td>
-															<td className="max-w-[140px] truncate px-2 py-1.5 text-[var(--admin-text-muted)]">
-																{item.category || "—"}
-															</td>
-															<td className="px-2 py-1.5">
-																{item.alreadyImported ? (
-																	<div className="flex flex-wrap gap-0.5">
-																		{!item.nitroExists && (
-																			<Badge
-																				variant="secondary"
-																				className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
-																			>
-																				No nitro
-																			</Badge>
-																		)}
-																		{item.hasFurnidata === false && (
-																			<Badge
-																				variant="secondary"
-																				className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
-																			>
-																				No furnidata
-																			</Badge>
-																		)}
-																		{item.hasCatalogEntry === false && (
-																			<Badge
-																				variant="secondary"
-																				className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
-																			>
-																				No catalog
-																			</Badge>
-																		)}
-																		{item.nitroExists &&
-																			item.hasFurnidata !== false &&
-																			item.hasCatalogEntry !== false && (
-																				<Badge
-																					variant="secondary"
-																					className="h-4 text-[0.6rem] text-[var(--admin-success)] border-[var(--admin-success)]/40"
-																				>
-																					Imported
-																				</Badge>
-																			)}
-																	</div>
-																) : (
-																	<Badge className="h-4 bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]">
-																		New
-																	</Badge>
-																)}
-															</td>
-															<td className="px-2 py-1.5">
-																<div className="flex items-center justify-end gap-1">
-																	{!item.alreadyImported && (
-																		<button
-																			type="button"
-																			onClick={() =>
-																				setReview({
-																					items: [item],
-																					single: true,
-																				})
-																			}
-																			disabled={importingId !== null}
-																			aria-label={`Import ${item.classname}`}
-																			className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)] disabled:opacity-50"
 																		>
-																			{importingId === item.classname ? (
+																			No nitro
-																				<Loader2
+																		</Badge>
-																					size={12}
-																					className="animate-spin"
-																				/>
-																			) : (
-																				<CloudDownload size={12} />
-																			)}
-																		</button>
 																	)}
-																	{item.alreadyImported && item.nitroExists && (
+																	{item.hasFurnidata === false && (
-																		<button
+																		<Badge
-																			type="button"
+																			variant="secondary"
-																			onClick={() =>
+																			className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
-																				setEditingClassname(item.classname)
-																			}
-																			aria-label={`Edit nitro ${item.classname}`}
-																			className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
 																		>
-																			<Pencil size={12} />
+																			No furnidata
-																		</button>
+																		</Badge>
 																	)}
-																	{item.alreadyImported &&
+																	{item.hasCatalogEntry === false && (
-																		!item.nitroExists && (
+																		<Badge
-																			<button
+																			variant="secondary"
-																				type="button"
+																			className="h-4 text-[0.6rem] text-[var(--admin-warning)] border-[var(--admin-warning)]/40"
-																				onClick={() => regenNitro(item)}
+																		>
-																				disabled={regeneratingNitro.has(
+																			No catalog
-																					item.classname,
+																		</Badge>
-																				)}
+																	)}
-																				aria-label={`Regenerate nitro ${item.classname}`}
+																	{item.nitroExists &&
-																				className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-warning)] transition-colors hover:bg-[var(--admin-warning)]/10 disabled:opacity-50"
+																		item.hasFurnidata !== false &&
+																		item.hasCatalogEntry !== false && (
+																			<Badge
+																				variant="secondary"
+																				className="h-4 text-[0.6rem] text-[var(--admin-success)] border-[var(--admin-success)]/40"
 																			>
-																				{regeneratingNitro.has(
+																				Imported
-																					item.classname,
+																			</Badge>
-																				) ? (
-																					<Loader2
-																						size={12}
-																						className="animate-spin"
-																					/>
-																				) : (
-																					<RefreshCw size={12} />
-																				)}
-																			</button>
 																		)}
 																</div>
-															</td>
+															) : (
-														</tr>
+																<Badge className="h-4 bg-[var(--admin-accent)] text-[var(--admin-accent-foreground)]">
-													);
+																	New
-												})}
+																</Badge>
-											</tbody>
+															)}
-										</table>
+														</td>
-									</div>
+														<td className="border-t border-[var(--admin-border)] px-2 py-1.5">
+															<div className="flex items-center justify-end gap-1">
+																{!item.alreadyImported && (
+																	<button
+																		type="button"
+																		onClick={() =>
+																			setReview({
+																				items: [item],
+																				single: true,
+																			})
+																		}
+																		disabled={importingId !== null}
+																		aria-label={`Import ${item.classname}`}
+																		className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)] disabled:opacity-50"
+																	>
+																		{importingId === item.classname ? (
+																			<Loader2
+																				size={12}
+																				className="animate-spin"
+																			/>
+																		) : (
+																			<CloudDownload size={12} />
+																		)}
+																	</button>
+																)}
+																{item.alreadyImported && item.nitroExists && (
+																	<button
+																		type="button"
+																		onClick={() =>
+																			setEditingClassname(item.classname)
+																		}
+																		aria-label={`Edit nitro ${item.classname}`}
+																		className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-text-muted)] transition-colors hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
+																	>
+																		<Pencil size={12} />
+																	</button>
+																)}
+																{item.alreadyImported && !item.nitroExists && (
+																	<button
+																		type="button"
+																		onClick={() => regenNitro(item)}
+																		disabled={regeneratingNitro.has(
+																			item.classname,
+																		)}
+																		aria-label={`Regenerate nitro ${item.classname}`}
+																		className="grid h-9 w-9 place-items-center rounded-md text-[var(--admin-warning)] transition-colors hover:bg-[var(--admin-warning)]/10 disabled:opacity-50"
+																	>
+																		{regeneratingNitro.has(item.classname) ? (
+																			<Loader2
+																				size={12}
+																				className="animate-spin"
+																			/>
+																		) : (
+																			<RefreshCw size={12} />
+																		)}
+																	</button>
+																)}
+															</div>
+														</td>
+													</tr>
+												);
+											})}
+										</tbody>
+									</table>
 								)}
 
 								<div

src/lib/services/import/core/sse-batch.ts

@@ -79,9 +79,22 @@ export function runSseBatch<T>(opts: RunSseBatchOptions<T>): Response {
 							index,
 						});
 						try {
-							const result = await worker(item, index, (status) =>
+							// Coalesce micro-step progress ('downloading', 'converting',
-								send({ type: "item_progress", classname, status, index }),
+							// ...) to at most one per 120ms per item so large imports
-							);
+							// don't flood the client. Terminal states are emitted
+							// separately below.
+							let lastReportSent = 0;
+							const result = await worker(item, index, (status) => {
+								const now = Date.now();
+								if (now - lastReportSent < 120) return;
+								lastReportSent = now;
+								send({
+									type: "item_progress",
+									classname,
+									status,
+									index,
+								});
+							});
 							if (ac.signal.aborted) return;
 							if (result.ok) {
 								succeeded++;