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/pets/import-pets-client.tsx

@@ -11,13 +11,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 { readSseStream } from "@/lib/sse-client";
+import { runSseImport } from "@/lib/sse-client";
 import { cn } from "@/lib/utils";
 
 interface PetItem {
@@ -51,6 +51,7 @@ export function ImportPetsClient() {
 		total: number;
 	} | null>(null);
 	const [busyLib, setBusyLib] = useState<string | null>(null);
+	const batchAbortRef = useRef<AbortController | null>(null);
 
 	const fetchPets = useCallback(async (search: string) => {
 		setLoading(true);
@@ -99,37 +100,41 @@ export function ImportPetsClient() {
 	}
 
 	async function importViaSse(items: PetItem[]) {
+		batchAbortRef.current?.abort();
+		const abort = new AbortController();
+		batchAbortRef.current = abort;
 		setBatchProgress({ done: 0, total: items.length });
-		const res = await adminFetch("/api/admin/import/pets/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;
-		}
 		let done = 0;
-		let succeeded = 0;
-		let failed = 0;
-		await readSseStream(res.body, (evt) => {
-			if (evt.type === "item_progress" && evt.status === "done") {
-				done++;
-				markDone(String(evt.classname ?? ""));
-				setBatchProgress({ done, total: items.length });
-			} else if (evt.type === "item_progress" && evt.status === "failed") {
-				done++;
-				setBatchProgress({ done, total: items.length });
-			} else if (evt.type === "batch_complete") {
-				succeeded = Number(evt.succeeded ?? 0);
-				failed = Number(evt.failed ?? 0);
+		try {
+			await runSseImport(
+				"/api/admin/import/pets/batch",
+				{ items, concurrency: 3 },
+				(lib) => {
+					done++;
+					markDone(lib);
+					setBatchProgress({ done, total: items.length });
+				},
+				(succeeded, failed) => {
+					setSelected(new Set());
+					if (succeeded > 0) toast.success(`${succeeded} pet(s) imported`);
+					if (failed > 0) toast.error(`${failed} failed`);
+				},
+				abort.signal,
+				() => {
+					done++;
+					setBatchProgress({ done, total: items.length });
+				},
+			);
+		} catch (err) {
+			if ((err as Error)?.name === "AbortError") {
+				toast.info("Import cancelled");
+			} else {
+				throw err;
 			}
-		});
-		setBatchProgress(null);
-		setSelected(new Set());
-		if (succeeded > 0) toast.success(`${succeeded} pet(s) imported`);
-		if (failed > 0) toast.error(`${failed} failed`);
+		} finally {
+			if (batchAbortRef.current === abort) batchAbortRef.current = null;
+			setBatchProgress(null);
+		}
 	}
 
 	async function importOne(p: PetItem) {
@@ -271,9 +276,19 @@ export function ImportPetsClient() {
 						</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>
 			)}