fix(admin): harden clothing/pets/effects/clone imports

Align grids on data.items, only treat SSE done as success, hard-fail
clothing sets when libs fail, and add Cancel via AbortController.

Co-authored-by: Cursor <[email protected]>

src/app/admin/import/effects/import-effects-client.tsx

@@ -13,12 +13,13 @@ import {
 	Trash2,
 	X,
 } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { adminFetch } from "@/lib/admin-fetch";
+import { runSseImport } from "@/lib/sse-client";
 import { cn } from "@/lib/utils";
 
 interface EffectItem {
@@ -44,6 +45,7 @@ export function ImportEffectsClient() {
 		total: number;
 	} | null>(null);
 	const [busyLib, setBusyLib] = useState<string | null>(null);
+	const batchAbortRef = useRef<AbortController | null>(null);
 
 	const fetchEffects = useCallback(async (search: string) => {
 		setLoading(true);
@@ -101,51 +103,41 @@ export function ImportEffectsClient() {
 	}
 
 	async function importViaSse(items: EffectItem[]) {
+		batchAbortRef.current?.abort();
+		const abort = new AbortController();
+		batchAbortRef.current = abort;
 		setBatchProgress({ done: 0, total: items.length });
-		const res = await adminFetch("/api/admin/import/effects/batch", {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ items, concurrency: 3 }),
-		});
-		if (!res.body) {
-			toast.error("No response stream");
-			setBatchProgress(null);
-			return;
-		}
-		const reader = res.body.getReader();
-		const decoder = new TextDecoder();
-		let buf = "";
 		let done = 0;
-		let succeeded = 0;
-		let failed = 0;
-		while (true) {
-			const { value, done: streamDone } = await reader.read();
-			if (streamDone) break;
-			buf += decoder.decode(value, { stream: true });
-			const parts = buf.split("\n\n");
-			buf = parts.pop() ?? "";
-			for (const part of parts) {
-				if (!part.startsWith("data: ")) continue;
-				const evt = JSON.parse(part.slice(6));
-				if (evt.type === "item_progress" && evt.status === "done") {
+		try {
+			await runSseImport(
+				"/api/admin/import/effects/batch",
+				{ items, concurrency: 3 },
+				(lib) => {
 					done++;
-					succeeded++;
-					markDone(evt.classname);
+					markDone(lib);
 					setBatchProgress({ done, total: items.length });
-				} else if (evt.type === "item_progress" && evt.status === "failed") {
+				},
+				(succeeded, failed) => {
+					setSelected(new Set());
+					if (succeeded > 0) toast.success(`${succeeded} effect(s) imported`);
+					if (failed > 0) toast.error(`${failed} failed`);
+				},
+				abort.signal,
+				() => {
 					done++;
-					failed++;
 					setBatchProgress({ done, total: items.length });
-				} else if (evt.type === "batch_complete") {
-					succeeded = evt.succeeded;
-					failed = evt.failed;
-				}
+				},
+			);
+		} catch (err) {
+			if ((err as Error)?.name === "AbortError") {
+				toast.info("Import cancelled");
+			} else {
+				throw err;
 			}
+		} finally {
+			if (batchAbortRef.current === abort) batchAbortRef.current = null;
+			setBatchProgress(null);
 		}
-		setBatchProgress(null);
-		setSelected(new Set());
-		if (succeeded > 0) toast.success(`${succeeded} effect(s) imported`);
-		if (failed > 0) toast.error(`${failed} failed`);
 	}
 
 	async function importOne(e: EffectItem) {
@@ -304,9 +296,19 @@ export function ImportEffectsClient() {
 						</Button>
 					)}
 					{batchProgress && (
-						<span className="text-xs text-muted-foreground">
-							{batchProgress.done}/{batchProgress.total}
-						</span>
+						<>
+							<span className="text-xs text-muted-foreground">
+								{batchProgress.done}/{batchProgress.total}
+							</span>
+							<Button
+								size="sm"
+								variant="outline"
+								className="h-8"
+								onClick={() => batchAbortRef.current?.abort()}
+							>
+								Cancel
+							</Button>
+						</>
 					)}
 				</div>
 			)}