fix: add progress bar and batch download to vectorize tool

The vectorize tool had a custom processing flow that bypassed the
standard useToolProcessor hook -- no progress indication, no server-side
batch, and the Download All ZIP relied on a client-side sequential loop.

Backend: extract core logic into vectorizeBuffer(), register via
registerToolProcessFn() so the /batch endpoint works with p-queue
concurrency and SSE progress events.

Frontend: replace custom fetch loop with useToolProcessor hook and
ProgressCard, giving upload progress, per-file batch status, and
automatic Download All ZIP via the existing tool-page infrastructure.

Also set image/svg+xml MIME type on SVG blobs during batch ZIP
extraction to ensure reliable rendering in <img> tags across browsers.

apps/api/src/routes/tools/vectorize.ts

@@ -8,9 +8,13 @@ import sharp from "sharp";
 import { z } from "zod";
 import { autoOrient } from "../../lib/auto-orient.js";
 import { formatZodErrors } from "../../lib/errors.js";
+import { validateImageBuffer } from "../../lib/file-validation.js";
 import { sanitizeFilename } from "../../lib/filename.js";
-import { ensureSharpCompat } from "../../lib/heic-converter.js";
+import { decodeToSharpCompat, needsCliDecode } from "../../lib/format-decoders.js";
+import { decodeHeic } from "../../lib/heic-converter.js";
+import { decompressSvgz, sanitizeSvg } from "../../lib/svg-sanitize.js";
 import { createWorkspace } from "../../lib/workspace.js";
+import { registerToolProcessFn } from "../tool-factory.js";
 
 const settingsSchema = z.object({
   colorMode: z.enum(["bw", "color"]).default("bw"),
@@ -48,6 +52,53 @@ const ALPHA_MAX_MAP: Record<string, number> = {
   spline: 1,
 };
 
+async function vectorizeBuffer(
+  inputBuffer: Buffer,
+  settings: z.infer<typeof settingsSchema>,
+  filename: string,
+): Promise<{ buffer: Buffer; filename: string; contentType: string }> {
+  let buf = inputBuffer;
+
+  if (settings.invert) {
+    buf = await sharp(buf).negate({ alpha: false }).toBuffer();
+  }
+
+  let svg: string;
+
+  if (settings.colorMode === "color") {
+    const pngBuffer = await sharp(buf).png().toBuffer();
+    svg = await vtrace(pngBuffer, {
+      colorMode: 0,
+      colorPrecision: settings.colorPrecision,
+      filterSpeckle: settings.filterSpeckle,
+      cornerThreshold: settings.cornerThreshold,
+      layerDifference: settings.layerDifference,
+      hierarchical: 0,
+      mode: (PATH_MODE_MAP[settings.pathMode] ?? 2) as 0 | 1 | 2,
+      lengthThreshold: 4,
+      maxIterations: 2,
+      spliceThreshold: 45,
+      pathPrecision: 5,
+    });
+  } else {
+    const pngBuffer = await sharp(buf).grayscale().png().toBuffer();
+    svg = await traceImage(pngBuffer, {
+      threshold: settings.threshold,
+      turdSize: settings.filterSpeckle,
+      alphamax: ALPHA_MAX_MAP[settings.pathMode] ?? 1,
+    });
+  }
+
+  const svgBuffer = Buffer.from(svg, "utf-8");
+  const baseName = filename.replace(/\.[^.]+$/, "");
+
+  return {
+    buffer: svgBuffer,
+    filename: `${baseName}.svg`,
+    contentType: "image/svg+xml",
+  };
+}
+
 export function registerVectorize(app: FastifyInstance) {
   app.post("/api/v1/tools/vectorize", async (request, reply) => {
     let fileBuffer: Buffer | null = null;
@@ -94,50 +145,59 @@ export function registerVectorize(app: FastifyInstance) {
     }
 
     try {
-      fileBuffer = await autoOrient(await ensureSharpCompat(fileBuffer));
-
-      if (settings.invert) {
-        fileBuffer = await sharp(fileBuffer).negate({ alpha: false }).toBuffer();
+      const validation = await validateImageBuffer(fileBuffer, filename);
+      if (!validation.valid) {
+        return reply.status(400).send({ error: `Invalid image: ${validation.reason}` });
       }
-
-      let svg: string;
-
-      if (settings.colorMode === "color") {
-        const pngBuffer = await sharp(fileBuffer).png().toBuffer();
-        svg = await vtrace(pngBuffer, {
-          colorMode: 0, // ColorMode.Color
-          colorPrecision: settings.colorPrecision,
-          filterSpeckle: settings.filterSpeckle,
-          cornerThreshold: settings.cornerThreshold,
-          layerDifference: settings.layerDifference,
-          hierarchical: 0, // Hierarchical.Stacked
-          mode: (PATH_MODE_MAP[settings.pathMode] ?? 2) as 0 | 1 | 2,
-          lengthThreshold: 4,
-          maxIterations: 2,
-          spliceThreshold: 45,
-          pathPrecision: 5,
-        });
-      } else {
-        const pngBuffer = await sharp(fileBuffer).grayscale().png().toBuffer();
-        svg = await traceImage(pngBuffer, {
-          threshold: settings.threshold,
-          turdSize: settings.filterSpeckle,
-          alphamax: ALPHA_MAX_MAP[settings.pathMode] ?? 1,
-        });
+      if (validation.format === "heif") {
+        try {
+          fileBuffer = await decodeHeic(fileBuffer);
+        } catch (err) {
+          return reply.status(422).send({
+            error: "Failed to decode HEIC file. Ensure libheif-examples is installed.",
+            details: err instanceof Error ? err.message : String(err),
+          });
+        }
       }
+      if (needsCliDecode(validation.format)) {
+        try {
+          const fileExt = filename.split(".").pop()?.toLowerCase();
+          fileBuffer = await decodeToSharpCompat(fileBuffer, validation.format, fileExt);
+        } catch {
+          try {
+            await sharp(fileBuffer).metadata();
+          } catch (err) {
+            return reply.status(422).send({
+              error: `Failed to decode ${validation.format.toUpperCase()} file`,
+              details: err instanceof Error ? err.message : String(err),
+            });
+          }
+        }
+      }
+      if (validation.format === "svg") {
+        try {
+          fileBuffer = decompressSvgz(fileBuffer);
+          fileBuffer = sanitizeSvg(fileBuffer);
+        } catch (err) {
+          return reply.status(400).send({
+            error: err instanceof Error ? err.message : "Invalid SVG",
+          });
+        }
+      }
+      fileBuffer = await autoOrient(fileBuffer);
+
+      const result = await vectorizeBuffer(fileBuffer, settings, filename);
 
-      const svgBuffer = Buffer.from(svg, "utf-8");
-      const outFilename = `${filename}.svg`;
       const jobId = randomUUID();
       const workspacePath = await createWorkspace(jobId);
-      const outputPath = join(workspacePath, "output", outFilename);
-      await writeFile(outputPath, svgBuffer);
+      const outputPath = join(workspacePath, "output", result.filename);
+      await writeFile(outputPath, result.buffer);
 
       return reply.send({
         jobId,
-        downloadUrl: `/api/v1/download/${jobId}/${encodeURIComponent(outFilename)}`,
+        downloadUrl: `/api/v1/download/${jobId}/${encodeURIComponent(result.filename)}`,
         originalSize: fileBuffer.length,
-        processedSize: svgBuffer.length,
+        processedSize: result.buffer.length,
       });
     } catch (err) {
       return reply.status(422).send({
@@ -146,4 +206,14 @@ export function registerVectorize(app: FastifyInstance) {
       });
     }
   });
+
+  registerToolProcessFn({
+    toolId: "vectorize",
+    settingsSchema: settingsSchema as z.ZodType<unknown, z.ZodTypeDef, unknown>,
+    process: vectorizeBuffer as (
+      inputBuffer: Buffer,
+      settings: unknown,
+      filename: string,
+    ) => Promise<{ buffer: Buffer; filename: string; contentType: string }>,
+  });
 }

apps/web/src/components/tools/vectorize-settings.tsx

@@ -1,6 +1,7 @@
-import { Download, Loader2 } from "lucide-react";
+import { Download } from "lucide-react";
 import { useState } from "react";
-import { formatHeaders } from "@/lib/api";
+import { ProgressCard } from "@/components/common/progress-card";
+import { useToolProcessor } from "@/hooks/use-tool-processor";
 import { useFileStore } from "@/stores/file-store";
 
 type ColorMode = "bw" | "color";
@@ -71,8 +72,17 @@ function speckleToDetail(speckle: number): Detail {
 }
 
 export function VectorizeSettings() {
-  const { files, processing, error, setProcessing, setError, setProcessedUrl, setSizes, setJobId } =
-    useFileStore();
+  const { files } = useFileStore();
+  const {
+    processFiles,
+    processAllFiles,
+    processing,
+    error,
+    downloadUrl,
+    originalSize,
+    processedSize,
+    progress,
+  } = useToolProcessor("vectorize");
 
   const [preset, setPreset] = useState<Preset>("logo");
   const [colorMode, setColorMode] = useState<ColorMode>("bw");
@@ -83,9 +93,6 @@ export function VectorizeSettings() {
   const [pathMode, setPathMode] = useState<PathMode>("spline");
   const [cornerThreshold, setCornerThreshold] = useState(60);
   const [invert, setInvert] = useState(false);
-  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
-  const [originalSize, setOriginalSize] = useState<number | null>(null);
-  const [processedSize, setProcessedSize] = useState<number | null>(null);
 
   const applyPreset = (p: Preset) => {
     setPreset(p);
@@ -108,14 +115,8 @@ export function VectorizeSettings() {
     };
   };
 
-  const handleProcess = async () => {
-    if (files.length === 0) return;
-
-    setProcessing(true);
-    setError(null);
-    setDownloadUrl(null);
-
-    const settingsJson = JSON.stringify({
+  const handleProcess = () => {
+    const settings = {
       colorMode,
       threshold,
       colorPrecision,
@@ -124,87 +125,11 @@ export function VectorizeSettings() {
       pathMode,
       cornerThreshold,
       invert,
-    });
-
-    try {
-      if (files.length === 1) {
-        const formData = new FormData();
-        formData.append("file", files[0]);
-        formData.append("settings", settingsJson);
-
-        const res = await fetch("/api/v1/tools/vectorize", {
-          method: "POST",
-          headers: formatHeaders(),
-          body: formData,
-        });
-
-        if (!res.ok) {
-          const body = await res.json().catch(() => ({}));
-          throw new Error(body.error || `Failed: ${res.status}`);
-        }
-
-        const result = await res.json();
-        setJobId(result.jobId);
-        setProcessedUrl(result.downloadUrl);
-        setDownloadUrl(result.downloadUrl);
-        setOriginalSize(result.originalSize);
-        setProcessedSize(result.processedSize);
-        setSizes(result.originalSize, result.processedSize);
-      } else {
-        const { updateEntry, setBatchZip } = useFileStore.getState();
-        const JSZip = (await import("jszip")).default;
-        const zip = new JSZip();
-        let totalOriginal = 0;
-        let totalProcessed = 0;
-
-        for (let i = 0; i < files.length; i++) {
-          const file = files[i];
-          const formData = new FormData();
-          formData.append("file", file);
-          formData.append("settings", settingsJson);
-
-          const res = await fetch("/api/v1/tools/vectorize", {
-            method: "POST",
-            headers: formatHeaders(),
-            body: formData,
-          });
-
-          if (!res.ok) {
-            const body = await res.json().catch(() => ({}));
-            updateEntry(i, {
-              status: "failed",
-              error: body.error || `Failed: ${res.status}`,
-            });
-            continue;
-          }
-
-          const result = await res.json();
-          totalOriginal += result.originalSize;
-          totalProcessed += result.processedSize;
-
-          const svgRes = await fetch(result.downloadUrl, { headers: formatHeaders() });
-          const svgBlob = await svgRes.blob();
-          const svgName = file.name.replace(/\.[^.]+$/, ".svg");
-          zip.file(svgName, svgBlob);
-
-          updateEntry(i, {
-            processedUrl: result.downloadUrl,
-            processedSize: result.processedSize,
-            status: "completed",
-            error: null,
-          });
-        }
-
-        const zipBlob = await zip.generateAsync({ type: "blob" });
-        setBatchZip(zipBlob, "vectorize-batch.zip");
-        setOriginalSize(totalOriginal);
-        setProcessedSize(totalProcessed);
-        setSizes(totalOriginal, totalProcessed);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Vectorization failed");
-    } finally {
-      setProcessing(false);
+    };
+    if (files.length > 1) {
+      processAllFiles(files, settings);
+    } else {
+      processFiles(files, settings);
     }
   };
 
@@ -424,16 +349,26 @@ export function VectorizeSettings() {
       )}
 
       {/* Submit */}
-      <button
-        type="button"
-        data-testid="vectorize-submit"
-        onClick={handleProcess}
-        disabled={!hasFile || processing}
-        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
-      >
-        {processing && <Loader2 className="h-4 w-4 animate-spin" />}
-        {processing ? "Vectorizing..." : "Vectorize"}
-      </button>
+      {processing ? (
+        <ProgressCard
+          active={processing}
+          phase={progress.phase === "idle" ? "uploading" : progress.phase}
+          label="Vectorizing"
+          stage={progress.stage}
+          percent={progress.percent}
+          elapsed={progress.elapsed}
+        />
+      ) : (
+        <button
+          type="button"
+          data-testid="vectorize-submit"
+          onClick={handleProcess}
+          disabled={!hasFile || processing}
+          className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+        >
+          {files.length > 1 ? `Vectorize (${files.length} files)` : "Vectorize"}
+        </button>
+      )}
 
       {/* Download */}
       {downloadUrl && (

apps/web/src/hooks/use-tool-processor.ts

@@ -392,7 +392,11 @@ export function useToolProcessor(toolId: string) {
         for (let i = 0; i < entries.length; i++) {
           const processedName = fileResults[String(i)];
           if (processedName && extracted[processedName]) {
-            const blob = new Blob([extracted[processedName] as BlobPart]);
+            const blobType = processedName.endsWith(".svg") ? "image/svg+xml" : undefined;
+            const blob = new Blob(
+              [extracted[processedName] as BlobPart],
+              blobType ? { type: blobType } : undefined,
+            );
             updateEntry(i, {
               processedUrl: URL.createObjectURL(blob),
               processedFilename: processedName,