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);
@@ -1855,11 +1867,17 @@ 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">
+									>
+										<thead>
+											<tr
+												className="sticky top-0 z-10 grid w-full min-w-[660px] border-b border-[var(--admin-border)] bg-[var(--admin-surface)]"
+												style={{ gridTemplateColumns: TABLE_COLS }}
+											>
+												<th scope="col" className="px-2 py-2 text-left">
 													<Checkbox
 														style={{
 															display: "inline-flex",
@@ -1872,40 +1890,72 @@ export function StudioClient({
 														aria-label="Select all"
 													/>
 												</th>
-													<th className="w-12 px-1 py-2" />
+												<th scope="col" className="px-1 py-2" />
-													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
+												<th
+													scope="col"
+													className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
+												>
 													Name
 												</th>
-													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
+												<th
+													scope="col"
+													className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
+												>
 													Classname
 												</th>
-													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
+												<th
+													scope="col"
+													className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
+												>
 													Type
 												</th>
-													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
+												<th
+													scope="col"
+													className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
+												>
 													Category
 												</th>
-													<th className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]">
+												<th
+													scope="col"
+													className="px-2 py-2 text-left font-semibold text-[var(--admin-text-muted)]"
+												>
 													Status
 												</th>
-													<th className="w-28 px-2 py-2 text-right font-semibold text-[var(--admin-text-muted)]">
+												<th
+													scope="col"
+													className="px-2 py-2 text-right font-semibold text-[var(--admin-text-muted)]"
+												>
 													Actions
 												</th>
 											</tr>
 										</thead>
-											<tbody>
+										<tbody
-												{filteredItems.map((item) => {
+											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={item.classname}
+														key={vi.key}
+														data-index={vi.index}
+														ref={tableVirtualizer.measureElement}
 														aria-selected={isSel}
 														className={cn(
-																"border-t border-[var(--admin-border)] transition-colors hover:bg-[var(--admin-accent)]/5",
+															"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="px-2 py-1.5">
+														<td className="border-t border-[var(--admin-border)] px-2 py-1.5">
 															<Checkbox
 																style={{
 																	display: "inline-flex",
@@ -1920,7 +1970,7 @@ export function StudioClient({
 																aria-label={`Select ${item.classname}`}
 															/>
 														</td>
-															<td className="px-1 py-1.5">
+														<td className="border-t border-[var(--admin-border)] px-1 py-1.5">
 															<button
 																type="button"
 																onClick={() => openDetail(item)}
@@ -1937,19 +1987,19 @@ export function StudioClient({
 																/>
 															</button>
 														</td>
-															<td className="max-w-[220px] truncate px-2 py-1.5 font-medium text-[var(--admin-text)]">
+														<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 font-medium text-[var(--admin-text)]">
 															{item.name}
 														</td>
-															<td className="max-w-[180px] truncate px-2 py-1.5 font-mono text-[0.7rem] text-[var(--admin-text-muted)]">
+														<td className="truncate border-t border-[var(--admin-border)] 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)]">
+														<td className="truncate border-t border-[var(--admin-border)] 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)]">
+														<td className="truncate border-t border-[var(--admin-border)] px-2 py-1.5 text-[var(--admin-text-muted)]">
 															{item.category || "—"}
 														</td>
-															<td className="px-2 py-1.5">
+														<td className="border-t border-[var(--admin-border)] px-2 py-1.5">
 															{item.alreadyImported ? (
 																<div className="flex flex-wrap gap-0.5">
 																	{!item.nitroExists && (
@@ -1993,7 +2043,7 @@ export function StudioClient({
 																</Badge>
 															)}
 														</td>
-															<td className="px-2 py-1.5">
+														<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
@@ -2030,8 +2080,7 @@ export function StudioClient({
 																		<Pencil size={12} />
 																	</button>
 																)}
-																	{item.alreadyImported &&
+																{item.alreadyImported && !item.nitroExists && (
-																		!item.nitroExists && (
 																	<button
 																		type="button"
 																		onClick={() => regenNitro(item)}
@@ -2041,9 +2090,7 @@ export function StudioClient({
 																		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(
+																		{regeneratingNitro.has(item.classname) ? (
-																					item.classname,
-																				) ? (
 																			<Loader2
 																				size={12}
 																				className="animate-spin"
@@ -2060,7 +2107,6 @@ export function StudioClient({
 											})}
 										</tbody>
 									</table>
-									</div>
 								)}
 
 								<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++;