fix(svelte) fix svelte

src/lib/components/IndexingProgress.svelte

@@ -1,39 +1,41 @@
 <script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
 	import type { IndexingJob } from '$lib/types';
 
 	let { jobId }: { jobId: string } = $props();
 
 	let job = $state<IndexingJob | null>(null);
-	let interval: ReturnType<typeof setInterval> | undefined;
 
-	async function pollJob() {
-		try {
-			const res = await fetch(`/api/v1/jobs/${jobId}`);
-			if (res.ok) {
-				const data = await res.json();
-				job = data.job;
-				if (job?.status === 'done' || job?.status === 'failed') {
-					if (interval !== undefined) {
-						clearInterval(interval);
-						interval = undefined;
-					}
+	$effect(() => {
+		// Reset and restart polling whenever jobId changes.
+		job = null;
+		let stopped = false;
+
+		async function poll() {
+			if (stopped) return;
+			try {
+				const res = await fetch(`/api/v1/jobs/${jobId}`);
+				if (res.ok) {
+					const data = await res.json();
+					job = data.job;
 				}
+			} catch {
+				// ignore transient errors
 			}
-		} catch {
-			// ignore polling errors
 		}
-	}
 
-	onMount(() => {
-		pollJob();
-		interval = setInterval(pollJob, 2000);
-	});
+		poll();
+		const interval = setInterval(() => {
+			if (job?.status === 'done' || job?.status === 'failed') {
+				clearInterval(interval);
+				return;
+			}
+			poll();
+		}, 2000);
 
-	onDestroy(() => {
-		if (interval !== undefined) {
+		return () => {
+			stopped = true;
 			clearInterval(interval);
-		}
+		};
 	});
 
 	const progress = $derived(job?.progress ?? 0);
@@ -44,7 +46,7 @@
 {#if job}
 	<div class="mt-2">
 		<div class="flex justify-between text-xs text-gray-500">
-			<span>{processedFiles} / {totalFiles} files</span>
+			<span>{processedFiles.toLocaleString()} / {totalFiles.toLocaleString()} files</span>
 			<span>{progress}%</span>
 		</div>
 		<div class="mt-1 h-1.5 w-full rounded-full bg-gray-200">