npm - @cap.js/widget - Versions diffs - 0.1.36 → 0.1.38 - Mend

@cap.js/widget 0.1.36 → 0.1.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/src/cap.js CHANGED Viewed

@@ -54,6 +54,104 @@
     return result.substring(0, length);
   }
+  async function runInstrumentationChallenge(instrBytes) {
+    const b64ToUint8 = (b64) => {
+      const bin = atob(b64);
+      const arr = new Uint8Array(bin.length);
+      for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
+      return arr;
+    };
+    var compressed = b64ToUint8(instrBytes);
+    const scriptText = await new Promise((resolve, reject) => {
+      try {
+        var ds = new DecompressionStream("deflate-raw");
+        var writer = ds.writable.getWriter();
+        var reader = ds.readable.getReader();
+        var chunks = [];
+        function pump(res) {
+          if (res.done) {
+            var len = 0,
+              off = 0;
+            for (var i = 0; i < chunks.length; i++) len += chunks[i].length;
+            var out = new Uint8Array(len);
+            for (var i = 0; i < chunks.length; i++) {
+              out.set(chunks[i], off);
+              off += chunks[i].length;
+            }
+            resolve(new TextDecoder().decode(out));
+          } else {
+            chunks.push(res.value);
+            reader.read().then(pump).catch(reject);
+          }
+        }
+        reader.read().then(pump).catch(reject);
+        writer
+          .write(compressed)
+          .then(() => {
+            writer.close();
+          })
+          .catch(reject);
+      } catch (e) {
+        reject(e);
+      }
+    });
+    return new Promise((resolve) => {
+      var timeout = setTimeout(() => {
+        cleanup();
+        resolve({ __timeout: true });
+      }, 20000);
+      var iframe = document.createElement("iframe");
+      iframe.setAttribute("sandbox", "allow-scripts");
+      iframe.setAttribute("aria-hidden", "true");
+      iframe.style.cssText =
+        "position:absolute;width:1px;height:1px;top:-9999px;left:-9999px;border:none;opacity:0;pointer-events:none;";
+      var resolved = false;
+      function cleanup() {
+        if (resolved) return;
+        resolved = true;
+        clearTimeout(timeout);
+        window.removeEventListener("message", handler);
+        if (iframe.parentNode) iframe.parentNode.removeChild(iframe);
+      }
+      function handler(ev) {
+        var d = ev.data;
+        if (!d || typeof d !== "object") return;
+        if (d.type === "cap:instr") {
+          cleanup();
+          if (d.blocked) {
+            resolve({
+              __blocked: true,
+              blockReason: d.blockReason || "automated_browser",
+            });
+          } else if (d.result) {
+            resolve(d.result);
+          } else {
+            resolve({ __timeout: true });
+          }
+        } else if (d.type === "cap:error") {
+          cleanup();
+          resolve({ __timeout: true });
+        }
+      }
+      window.addEventListener("message", handler);
+      iframe.srcdoc =
+        '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><script>' +
+        scriptText +
+        "\n</scr" +
+        "ipt></body></html>";
+      document.body.appendChild(iframe);
+    });
+  }
   let wasmModulePromise = null;
   const getWasmModule = () => {
@@ -84,8 +182,382 @@
   const prefersReducedMotion = () =>
     window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  const SPECULATIVE_DELAY_MS = 2500;
+  const SPECULATIVE_WORKERS = 1;
+  const SPECULATIVE_YIELD_MS = 120;
+  const speculative = {
+    state: "idle",
+    challengeResp: null,
+    challenges: null,
+    results: [],
+    completedCount: 0,
+    solvePromise: null,
+    promoteFn: null,
+    _listeners: [],
+    pendingPromotion: null,
+    token: null,
+    tokenExpires: null,
+    notify() {
+      for (const fn of this._listeners) fn();
+      this._listeners = [];
+    },
+    onSettled(fn) {
+      if (this.state === "done" || this.state === "error") {
+        fn();
+      } else {
+        this._listeners.push(fn);
+      }
+    },
+  };
+  function _resetSpeculativeState() {
+    speculative.state = "idle";
+    speculative.challengeResp = null;
+    speculative.challenges = null;
+    speculative.results = [];
+    speculative.completedCount = 0;
+    speculative.solvePromise = null;
+    speculative.promoteFn = null;
+    speculative.pendingPromotion = null;
+    speculative._listeners = [];
+    speculative.token = null;
+    speculative.tokenExpires = null;
+    _attachInteractionListeners();
+  }
+  let _speculativeTimer = null;
+  function _onFirstInteraction() {
+    if (speculative.state !== "idle") return;
+    speculative.state = "waiting";
+    _speculativeTimer = setTimeout(() => {
+      _beginSpeculativeSolve();
+    }, SPECULATIVE_DELAY_MS);
+  }
+  let _currentInteractionHandler = null;
+  function _detachInteractionListeners() {
+    if (_currentInteractionHandler) {
+      window.removeEventListener("mousemove", _currentInteractionHandler);
+      window.removeEventListener("touchstart", _currentInteractionHandler);
+      window.removeEventListener("keydown", _currentInteractionHandler);
+      _currentInteractionHandler = null;
+    }
+  }
+  function _attachInteractionListeners() {
+    _detachInteractionListeners();
+    const handler = () => {
+      _detachInteractionListeners();
+      _onFirstInteraction();
+    };
+    _currentInteractionHandler = handler;
+    window.addEventListener("mousemove", handler, { passive: true });
+    window.addEventListener("touchstart", handler, { passive: true });
+    window.addEventListener("keydown", handler, { passive: true });
+  }
+  _attachInteractionListeners();
+  async function _beginSpeculativeSolve() {
+    if (speculative.state !== "waiting") return;
+    speculative.state = "fetching";
+    const widget = document.querySelector("cap-widget");
+    if (!widget) {
+      speculative.state = "idle";
+      return;
+    }
+    let apiEndpoint = widget.getAttribute("data-cap-api-endpoint");
+    if (!apiEndpoint && window?.CAP_CUSTOM_FETCH) {
+      apiEndpoint = "/";
+    }
+    if (!apiEndpoint) {
+      speculative.state = "idle";
+      return;
+    }
+    if (!apiEndpoint.endsWith("/")) apiEndpoint += "/";
+    try {
+      const raw = await capFetch(`${apiEndpoint}challenge`, { method: "POST" });
+      let resp;
+      try {
+        resp = await raw.json();
+      } catch {
+        throw new Error("Failed to parse speculative challenge response");
+      }
+      if (resp.error) throw new Error(resp.error);
+      resp._apiEndpoint = apiEndpoint;
+      speculative.challengeResp = resp;
+      const { challenge, token } = resp;
+      let challenges = challenge;
+      if (!Array.isArray(challenges)) {
+        let i = 0;
+        challenges = Array.from({ length: challenge.c }, () => {
+          i++;
+          return [prng(`${token}${i}`, challenge.s), prng(`${token}${i}d`, challenge.d)];
+        });
+      }
+      speculative.challenges = challenges;
+      speculative.state = "solving";
+      speculative.solvePromise = _speculativeSolveAll(challenges);
+    } catch (e) {
+      console.warn("[cap] speculative challenge fetch failed:", e);
+      speculative.state = "error";
+      speculative.notify();
+    }
+  }
+  async function _speculativeSolveAll(challenges) {
+    _getSharedWorkerUrl();
+    let wasmModule = null;
+    try {
+      wasmModule = await getWasmModule();
+    } catch {}
+    _speculativePool.setWasm(wasmModule);
+    const total = challenges.length;
+    const results = new Array(total);
+    let concurrency = SPECULATIVE_WORKERS;
+    let promoted = false;
+    speculative.promoteFn = (fullCount) => {
+      if (promoted) return;
+      promoted = true;
+      concurrency = fullCount;
+      _speculativePool._size = fullCount;
+      _speculativePool._ensureSize(fullCount);
+    };
+    if (speculative.pendingPromotion !== null) {
+      speculative.promoteFn(speculative.pendingPromotion);
+      speculative.pendingPromotion = null;
+    }
+    let nextIndex = 0;
+    while (nextIndex < total) {
+      const batchSize = concurrency;
+      const batch = [];
+      const batchIndices = [];
+      for (let i = 0; i < batchSize && nextIndex < total; i++) {
+        batchIndices.push(nextIndex);
+        batch.push(challenges[nextIndex]);
+        nextIndex++;
+      }
+      _speculativePool._ensureSize(Math.max(concurrency, batchSize));
+      const batchResults = await Promise.all(
+        batch.map((challenge) =>
+          _speculativePool.run(challenge[0], challenge[1]).then((nonce) => {
+            speculative.completedCount++;
+            return nonce;
+          }),
+        ),
+      );
+      for (let i = 0; i < batchIndices.length; i++) {
+        results[batchIndices[i]] = batchResults[i];
+      }
+      if (!promoted && nextIndex < total) {
+        await new Promise((resolve) => setTimeout(resolve, SPECULATIVE_YIELD_MS));
+      }
+    }
+    speculative.results = results;
+    speculative.state = "redeeming";
+    _speculativeRedeem(results);
+    return results;
+  }
+  async function _speculativeRedeem(solutions) {
+    try {
+      const challengeResp = speculative.challengeResp;
+      const apiEndpoint = challengeResp._apiEndpoint;
+      if (!apiEndpoint) throw new Error("[cap] speculative redeem: missing apiEndpoint");
+      let instrOut = null;
+      if (challengeResp.instrumentation) {
+        instrOut = await runInstrumentationChallenge(challengeResp.instrumentation);
+        if (instrOut?.__timeout || instrOut?.__blocked) {
+          speculative.state = "done";
+          speculative.notify();
+          return;
+        }
+      }
+      const redeemRaw = await capFetch(`${apiEndpoint}redeem`, {
+        method: "POST",
+        body: JSON.stringify({
+          token: challengeResp.token,
+          solutions,
+          ...(instrOut && { instr: instrOut }),
+        }),
+        headers: { "Content-Type": "application/json" },
+      });
+      let resp;
+      try {
+        resp = await redeemRaw.json();
+      } catch {
+        throw new Error("Failed to parse speculative redeem response");
+      }
+      if (!resp.success) throw new Error(resp.error || "Speculative redeem failed");
+      speculative.token = resp.token;
+      speculative.tokenExpires = new Date(resp.expires).getTime();
+      speculative.state = "done";
+      speculative.notify();
+    } catch (e) {
+      console.warn("[cap] speculative redeem failed (will redo on click):", e);
+      speculative.state = "done";
+      speculative.notify();
+    }
+  }
+  let _sharedWorkerUrl = null;
+  function _getSharedWorkerUrl() {
+    if (_sharedWorkerUrl) return _sharedWorkerUrl;
+    _sharedWorkerUrl = URL.createObjectURL(
+      new Blob([`%%workerScript%%`], { type: "application/javascript" }),
+    );
+    return _sharedWorkerUrl;
+  }
+  class WorkerPool {
+    constructor(size) {
+      this._size = size;
+      this._workers = [];
+      this._idle = [];
+      this._queue = [];
+      this._wasmModule = null;
+      this._spawnFailures = 0;
+    }
+    setWasm(wasmModule) {
+      this._wasmModule = wasmModule;
+    }
+    _spawn() {
+      const url = _getSharedWorkerUrl();
+      const w = new Worker(url);
+      w._busy = false;
+      this._workers.push(w);
+      this._idle.push(w);
+      return w;
+    }
+    _replaceWorker(deadWorker) {
+      const idx = this._workers.indexOf(deadWorker);
+      if (idx !== -1) this._workers.splice(idx, 1);
+      const idleIdx = this._idle.indexOf(deadWorker);
+      if (idleIdx !== -1) this._idle.splice(idleIdx, 1);
+      try {
+        deadWorker.terminate();
+      } catch {}
+      this._spawnFailures++;
+      if (this._spawnFailures > 3) {
+        console.error("[cap] worker spawn failed repeatedly, not retrying");
+        return null;
+      }
+      return this._spawn();
+    }
+    _ensureSize(n) {
+      while (this._workers.length < n) this._spawn();
+    }
+    run(salt, target) {
+      return new Promise((resolve, reject) => {
+        this._queue.push({ salt, target, resolve, reject });
+        this._dispatch();
+      });
+    }
+    _dispatch() {
+      while (this._idle.length > 0 && this._queue.length > 0) {
+        const worker = this._idle.shift();
+        const { salt, target, resolve, reject } = this._queue.shift();
+        let settled = false;
+        const onMessage = ({ data }) => {
+          if (settled) return;
+          settled = true;
+          worker.removeEventListener("message", onMessage);
+          worker.removeEventListener("error", onError);
+          this._spawnFailures = 0;
+          this._idle.push(worker);
+          if (!data.found) {
+            reject(new Error(data.error || "worker failed"));
+          } else {
+            resolve(data.nonce);
+          }
+          this._dispatch();
+        };
+        const onError = (err) => {
+          if (settled) return;
+          settled = true;
+          worker.removeEventListener("message", onMessage);
+          worker.removeEventListener("error", onError);
+          const replacement = this._replaceWorker(worker);
+          reject(err);
+          if (replacement) {
+            this._dispatch();
+          }
+        };
+        worker.addEventListener("message", onMessage);
+        worker.addEventListener("error", onError);
+        if (this._wasmModule) {
+          worker.postMessage({ salt, target, wasmModule: this._wasmModule }, []);
+        } else {
+          worker.postMessage({ salt, target });
+        }
+      }
+    }
+    terminate() {
+      for (const w of this._workers) {
+        try {
+          w.terminate();
+        } catch {}
+      }
+      this._workers = [];
+      this._idle = [];
+      this._queue = [];
+    }
+  }
+  const _speculativePool = new WorkerPool(1);
+  _speculativePool._spawn();
   class CapWidget extends HTMLElement {
-    #workerUrl = "";
     #resetTimer = null;
     #workersCount = navigator.hardwareConcurrency || 8;
     token = null;
@@ -126,13 +598,7 @@
     }
     initialize() {
-      this.#workerUrl = URL.createObjectURL(
-        // this placeholder will be replaced with the actual worker by the build script
-        new Blob([`%%workerScript%%`], {
-          type: "application/javascript",
-        }),
-      );
+      _getSharedWorkerUrl();
     }
     attributeChangedCallback(name, _, value) {
@@ -182,6 +648,15 @@
       this.setWorkersCount(parsedWorkers || navigator.hardwareConcurrency || 8);
       const fieldName = this.getAttribute("data-cap-hidden-field-name") || "cap-token";
       this.#host.innerHTML = `<input type="hidden" name="${fieldName}">`;
+      if (speculative.state === "idle" || speculative.state === "waiting") {
+        if (_speculativeTimer) {
+          clearTimeout(_speculativeTimer);
+          _speculativeTimer = null;
+        }
+        speculative.state = "waiting";
+        _speculativeTimer = setTimeout(() => _beginSpeculativeSolve(), SPECULATIVE_DELAY_MS);
+      }
     }
     async solve() {
@@ -192,59 +667,209 @@
       try {
         this.#solving = true;
         this.updateUI("verifying", this.getI18nText("verifying-label", "Verifying..."), true);
         this.#div.setAttribute(
           "aria-label",
           this.getI18nText("verifying-aria-label", "Verifying you're a human, please wait"),
         );
         this.dispatchEvent("progress", { progress: 0 });
         try {
           let apiEndpoint = this.getAttribute("data-cap-api-endpoint");
           if (!apiEndpoint && window?.CAP_CUSTOM_FETCH) {
             apiEndpoint = "/";
-          } else if (!apiEndpoint)
+          } else if (!apiEndpoint) {
             throw new Error(
               "Missing API endpoint. Either custom fetch or an API endpoint must be provided.",
             );
+          }
+          if (!apiEndpoint.endsWith("/")) apiEndpoint += "/";
+          let solutions;
+          let challengeResp;
+          if (
+            speculative.state === "done" &&
+            speculative.token &&
+            speculative.tokenExpires &&
+            Date.now() < speculative.tokenExpires
+          ) {
+            this.dispatchEvent("progress", { progress: 100 });
+            const fieldName = this.getAttribute("data-cap-hidden-field-name") || "cap-token";
+            if (this.querySelector(`input[name='${fieldName}']`)) {
+              this.querySelector(`input[name='${fieldName}']`).value = speculative.token;
+            }
+            this.dispatchEvent("solve", { token: speculative.token });
+            this.token = speculative.token;
+            const expiresIn = speculative.tokenExpires - Date.now();
+            if (this.#resetTimer) clearTimeout(this.#resetTimer);
+            this.#resetTimer = setTimeout(() => this.reset(), expiresIn);
+            this.#div.setAttribute(
+              "aria-label",
+              this.getI18nText(
+                "verified-aria-label",
+                "We have verified you're a human, you may now continue",
+              ),
+            );
-          if (!apiEndpoint.endsWith("/")) {
-            apiEndpoint += "/";
+            _resetSpeculativeState();
+            this.#solving = false;
+            return;
           }
-          const { challenge, token } = await (
-            await capFetch(`${apiEndpoint}challenge`, {
+          if (speculative.state === "done") {
+            solutions = speculative.results;
+            challengeResp = speculative.challengeResp;
+            this.dispatchEvent("progress", { progress: 100 });
+          } else if (
+            speculative.state === "solving" ||
+            speculative.state === "redeeming" ||
+            speculative.state === "fetching" ||
+            speculative.state === "waiting"
+          ) {
+            if (speculative.state === "waiting") {
+              if (_speculativeTimer) {
+                clearTimeout(_speculativeTimer);
+                _speculativeTimer = null;
+              }
+              speculative.state = "waiting";
+              _beginSpeculativeSolve();
+            }
+            speculative.pendingPromotion = this.#workersCount;
+            if (speculative.promoteFn) {
+              speculative.promoteFn(this.#workersCount);
+            }
+            const progressInterval = setInterval(() => {
+              if (speculative.state !== "solving" && speculative.state !== "redeeming") {
+                clearInterval(progressInterval);
+                return;
+              }
+              const total = speculative.challenges ? speculative.challenges.length : 1;
+              const done = speculative.completedCount;
+              const visual =
+                speculative.state === "redeeming"
+                  ? 99
+                  : Math.min(98, Math.round((done / total) * 100));
+              this.dispatchEvent("progress", { progress: visual });
+            }, 150);
+            await new Promise((resolve) => speculative.onSettled(resolve));
+            clearInterval(progressInterval);
+            if (speculative.state !== "done") {
+              throw new Error("Speculative solve failed – please try again");
+            }
+            if (
+              speculative.token &&
+              speculative.tokenExpires &&
+              Date.now() < speculative.tokenExpires
+            ) {
+              this.dispatchEvent("progress", { progress: 100 });
+              const fieldName = this.getAttribute("data-cap-hidden-field-name") || "cap-token";
+              if (this.querySelector(`input[name='${fieldName}']`)) {
+                this.querySelector(`input[name='${fieldName}']`).value = speculative.token;
+              }
+              this.dispatchEvent("solve", { token: speculative.token });
+              this.token = speculative.token;
+              const expiresIn = speculative.tokenExpires - Date.now();
+              if (this.#resetTimer) clearTimeout(this.#resetTimer);
+              this.#resetTimer = setTimeout(() => this.reset(), expiresIn);
+              this.#div.setAttribute(
+                "aria-label",
+                this.getI18nText(
+                  "verified-aria-label",
+                  "We have verified you're a human, you may now continue",
+                ),
+              );
+              _resetSpeculativeState();
+              this.#solving = false;
+              return;
+            }
+            solutions = speculative.results;
+            challengeResp = speculative.challengeResp;
+            this.dispatchEvent("progress", { progress: 100 });
+          } else {
+            const challengeRaw = await capFetch(`${apiEndpoint}challenge`, {
               method: "POST",
-            })
-          ).json();
+            });
+            try {
+              challengeResp = await challengeRaw.json();
+            } catch {
+              throw new Error("Failed to parse challenge response from server");
+            }
+            if (challengeResp.error) throw new Error(challengeResp.error);
+            const { challenge, token } = challengeResp;
+            let challenges = challenge;
+            if (!Array.isArray(challenges)) {
+              let i = 0;
+              challenges = Array.from({ length: challenge.c }, () => {
+                i++;
+                return [prng(`${token}${i}`, challenge.s), prng(`${token}${i}d`, challenge.d)];
+              });
+            }
-          let challenges = challenge;
+            solutions = await this.solveChallenges(challenges);
+          }
-          if (!Array.isArray(challenges)) {
-            let i = 0;
+          const instrPromise = challengeResp.instrumentation
+            ? runInstrumentationChallenge(challengeResp.instrumentation)
+            : Promise.resolve(null);
-            challenges = Array.from({ length: challenge.c }, () => {
-              i = i + 1;
+          const instrOut = await instrPromise;
-              return [prng(`${token}${i}`, challenge.s), prng(`${token}${i}d`, challenge.d)];
+          if (instrOut?.__timeout || instrOut?.__blocked) {
+            this.updateUIBlocked(this.getI18nText("error-label", "Error"), instrOut?.__blocked);
+            this.#div.setAttribute(
+              "aria-label",
+              this.getI18nText("error-aria-label", "An error occurred, please try again"),
+            );
+            this.removeEventListener("error", this.boundHandleError);
+            const errEvent = new CustomEvent("error", {
+              bubbles: true,
+              composed: true,
+              detail: { isCap: true, message: "Instrumentation failed" },
             });
+            super.dispatchEvent(errEvent);
+            this.addEventListener("error", this.boundHandleError);
+            this.executeAttributeCode("onerror", errEvent);
+            console.error("[cap]", "Instrumentation failed");
+            this.#solving = false;
+            return;
           }
-          const solutions = await this.solveChallenges(challenges);
+          const { token } = challengeResp;
-          const resp = await (
-            await capFetch(`${apiEndpoint}redeem`, {
-              method: "POST",
-              body: JSON.stringify({ token, solutions }),
-              headers: { "Content-Type": "application/json" },
-            })
-          ).json();
+          const redeemResponse = await capFetch(`${apiEndpoint}redeem`, {
+            method: "POST",
+            body: JSON.stringify({
+              token,
+              solutions,
+              ...(instrOut && { instr: instrOut }),
+            }),
+            headers: { "Content-Type": "application/json" },
+          });
+          let resp;
+          try {
+            resp = await redeemResponse.json();
+          } catch {
+            throw new Error("Failed to parse server response");
+          }
           this.dispatchEvent("progress", { progress: 100 });
+          if (!resp.success) throw new Error(resp.error || "Invalid solution");
-          if (!resp.success) throw new Error("Invalid solution");
           const fieldName = this.getAttribute("data-cap-hidden-field-name") || "cap-token";
           if (this.querySelector(`input[name='${fieldName}']`)) {
             this.querySelector(`input[name='${fieldName}']`).value = resp.token;
@@ -253,6 +878,8 @@
           this.dispatchEvent("solve", { token: resp.token });
           this.token = resp.token;
+          _resetSpeculativeState();
           if (this.#resetTimer) clearTimeout(this.#resetTimer);
           const expiresIn = new Date(resp.expires).getTime() - Date.now();
           if (expiresIn > 0 && expiresIn < 24 * 60 * 60 * 1000) {
@@ -287,6 +914,9 @@
       const total = challenges.length;
       let completed = 0;
+      const speculativeHead = 0;
+      const remaining = total - speculativeHead;
       let wasmModule = null;
       const wasmSupported =
         typeof WebAssembly === "object" && typeof WebAssembly.instantiate === "function";
@@ -316,67 +946,31 @@
         }
       }
-      const workers = Array(this.#workersCount)
-        .fill(null)
-        .map(() => {
-          try {
-            return new Worker(this.#workerUrl);
-          } catch (error) {
-            console.error("[cap] Failed to create worker:", error);
-            throw new Error("Worker creation failed");
-          }
-        });
-      const solveSingleChallenge = ([salt, target], workerId) =>
-        new Promise((resolve, reject) => {
-          const worker = workers[workerId];
-          if (!worker) {
-            reject(new Error("Worker not available"));
-            return;
-          }
-          worker.onmessage = ({ data }) => {
-            if (!data.found) return;
-            completed++;
-            this.dispatchEvent("progress", {
-              progress: Math.round((completed / total) * 100),
-            });
-            resolve(data.nonce);
-          };
-          worker.onerror = (err) => {
-            this.error(`Error in worker: ${err.message || err}`);
-            reject(err);
-          };
-          if (wasmModule) {
-            worker.postMessage({ salt, target, wasmModule }, []);
-          } else {
-            worker.postMessage({ salt, target });
-          }
-        });
+      const pool = new WorkerPool(this.#workersCount);
+      pool.setWasm(wasmModule);
+      pool._ensureSize(this.#workersCount);
       const results = [];
       try {
         for (let i = 0; i < challenges.length; i += this.#workersCount) {
           const chunk = challenges.slice(i, Math.min(i + this.#workersCount, challenges.length));
           const chunkResults = await Promise.all(
-            chunk.map((c, idx) => solveSingleChallenge(c, idx)),
+            chunk.map(([salt, target]) =>
+              pool.run(salt, target).then((nonce) => {
+                completed++;
+                const visual = Math.min(
+                  99,
+                  Math.round(((speculativeHead + completed) / total) * 100),
+                );
+                this.dispatchEvent("progress", { progress: visual });
+                return nonce;
+              }),
+            ),
           );
           results.push(...chunkResults);
         }
       } finally {
-        workers.forEach((w) => {
-          if (w) {
-            try {
-              w.terminate();
-            } catch (error) {
-              console.error("[cap] error terminating worker:", error);
-            }
-          }
-        });
+        pool.terminate();
       }
       return results;
@@ -406,9 +1000,7 @@
         "Verify you're human",
       )}</span></p><a part="attribution" aria-label="Secured by Cap" href="https://capjs.js.org/" class="credits" target="_blank" rel="follow noopener" title="Secured by Cap: Self-hosted CAPTCHA for the modern web.">Cap</a>`;
-      const css = `%%capCSS%%`;
-      this.#shadow.innerHTML = `<style${window.CAP_CSS_NONCE ? ` nonce=${window.CAP_CSS_NONCE}` : ""}>${css}</style>`;
+      this.#shadow.innerHTML = `<style${window.CAP_CSS_NONCE ? ` nonce=${window.CAP_CSS_NONCE}` : ""}>%%capCSS%%</style>`;
       this.#shadow.appendChild(this.#div);
     }
@@ -471,7 +1063,9 @@
       if (current) {
         current.classList.remove("active");
         current.classList.add("exit");
-        current.addEventListener("transitionend", () => current.remove(), { once: true });
+        current.addEventListener("transitionend", () => current.remove(), {
+          once: true,
+        });
       }
     }
@@ -489,6 +1083,46 @@
       }
     }
+    updateUIBlocked(label, showTroubleshooting = false) {
+      if (!this.#div) return;
+      this.#div.setAttribute("data-state", "error");
+      this.#div.removeAttribute("disabled");
+      const wrapper = this.#div.querySelector(".label-wrapper");
+      if (!wrapper) return;
+      const troubleshootingUrl =
+        this.getAttribute("data-cap-troubleshooting-url") ||
+        "https://capjs.js.org/guide/troubleshooting/instrumentation.html";
+      const current = wrapper.querySelector(".label.active");
+      const next = document.createElement("span");
+      next.className = "label";
+      next.innerHTML = showTroubleshooting
+        ? `${label} · <a class="cap-troubleshoot-link" href="${troubleshootingUrl}" target="_blank" rel="noopener">${this.getI18nText("troubleshooting-label", "Troubleshoot")}</a>`
+        : label;
+      wrapper.appendChild(next);
+      void next.offsetWidth;
+      next.classList.add("active");
+      if (current) {
+        current.classList.remove("active");
+        current.classList.add("exit");
+        current.addEventListener("transitionend", () => current.remove(), {
+          once: true,
+        });
+      }
+      const link = next.querySelector(".cap-troubleshoot-link");
+      if (link) {
+        console.log("linkblud")
+        link.addEventListener("click", (e) => {
+          e.stopPropagation();
+        });
+      }
+    }
     handleProgress(event) {
       if (!this.#div) return;
@@ -532,6 +1166,10 @@
         return;
       }
+      console.error(
+        "[cap] using `onxxx='…'` is strongly discouraged and will be deprecated soon. please use `addEventListener` callbacks instead.",
+      );
       new Function("event", code).call(this, event);
     }
@@ -590,11 +1228,6 @@
         clearTimeout(this.#resetTimer);
         this.#resetTimer = null;
       }
-      if (this.#workerUrl) {
-        URL.revokeObjectURL(this.#workerUrl);
-        this.#workerUrl = "";
-      }
     }
   }