Report renderer progress and detect stalled jobs

components/ProcessingProgress.tsx

@@ -0,0 +1,42 @@
+"use client";
+import { useEffect, useState } from "react";
+import {
+  processingStage,
+  type ProcessingJob,
+} from "@/shared/processing-progress";
+
+export function ProcessingProgress({ job }: { job: ProcessingJob | null }) {
+  const [now, setNow] = useState<number | null>(null);
+  useEffect(() => {
+    setNow(Date.now());
+    const timer = setInterval(() => setNow(Date.now()), 5000);
+    return () => clearInterval(timer);
+  }, []);
+  if (!job || !["queued", "running"].includes(job.state)) return null;
+  const progress = Math.max(0, Math.min(100, job.progress));
+  const stopped =
+    now !== null &&
+    job.state === "running" &&
+    (!job.lease_until || Date.parse(job.lease_until) < now);
+  return (
+    <div className="processing-progress" role="status" aria-live="polite">
+      <p>
+        {job.state === "queued"
+          ? "Waiting for a processing worker"
+          : `${progress}% · ${processingStage(progress)}`}
+      </p>
+      <progress
+        max={100}
+        value={progress}
+        aria-label="Map processing progress"
+      />
+      <p className="muted">
+        {stopped
+          ? "The worker has stopped reporting. Check its terminal and restart it if necessary. Your uploaded export is saved."
+          : job.state === "running"
+            ? "Worker connected. Large exports can take a while; progress measures completed work."
+            : "Processing will start when a worker is available."}
+      </p>
+    </div>
+  );
+}