mevebu 2.1.0 → 2.3.0

package/mevebu/libs/js/tools/rsa-key-pair.js

@@ -0,0 +1,137 @@
+// An RSA key pair made in the tab with Web Crypto. The keys exist only in the
+// page until it closes, and both come out as PEM, the form most tools expect.
+import {
+  el, toast, download, bench, stack, panel, selectInput, button, actions,
+  toolcard, blank, notice, copyButton, output, checkbox,
+} from "../core.js";
+
+const SIZES = [
+  { value: "2048", label: "2048 bits" },
+  { value: "3072", label: "3072 bits" },
+  { value: "4096", label: "4096 bits" },
+];
+
+function wrap(base64) {
+  return base64.match(/.{1,64}/g).join("\n");
+}
+
+function toPem(label, der) {
+  const base64 = btoa(String.fromCharCode(...new Uint8Array(der)));
+  return `-----BEGIN ${label}-----\n${wrap(base64)}\n-----END ${label}-----\n`;
+}
+
+export function mount(slot) {
+  let pair = null;
+  let busy = false;
+  let token = 0;
+
+  const size = selectInput(SIZES, { value: "2048", "aria-label": "Key size" });
+  const showPrivate = checkbox("Show the private key", { checked: false });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const publicOut = output({ rows: 8 });
+  const privateOut = output({ rows: 10 });
+  const empty = blank("key-round", "Generate a pair to see the keys.");
+  const publicBox = el("div", { class: "grid gap-1.5" },
+    el("span", { class: "text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase" }, "Public key"), publicOut);
+  const privateBox = el("div", { class: "grid gap-1.5" },
+    el("span", { class: "text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase" }, "Private key"), privateOut);
+
+  const generateButton = button("Generate pair", { icon: "refresh-cw", kind: "fill", onclick: generate });
+  const copyPublic = copyButton(() => pair?.publicPem ?? "", "Copy public");
+  const copyPrivate = copyButton(() => pair?.privatePem ?? "", "Copy private");
+  const downloadPublic = button("Download public", {
+    icon: "download",
+    onclick: () => { if (pair) download("public.pem", pair.publicPem, "application/x-pem-file"); },
+  });
+  const downloadPrivate = button("Download private", {
+    icon: "download",
+    onclick: () => { if (pair) download("private.pem", pair.privatePem, "application/x-pem-file"); },
+  });
+
+  function sync() {
+    const hasKeys = Boolean(pair);
+    publicBox.hidden = !hasKeys;
+    privateBox.hidden = !hasKeys || !showPrivate.input.checked;
+    empty.hidden = hasKeys;
+    privateOut.hidden = privateBox.hidden;
+    copyPrivate.disabled = !hasKeys;
+    copyPublic.disabled = !hasKeys;
+    downloadPrivate.disabled = !hasKeys;
+    downloadPublic.disabled = !hasKeys;
+  }
+
+  async function generate() {
+    if (busy) return;
+    busy = true;
+    const current = ++token;
+    generateButton.disabled = true;
+    summary.textContent = "Generating. Larger keys take a few seconds.";
+    error.write("");
+    try {
+      const keys = await crypto.subtle.generateKey(
+        {
+          name: "RSASSA-PKCS1-v1_5",
+          modulusLength: Number(size.value),
+          publicExponent: new Uint8Array([1, 0, 1]),
+          hash: "SHA-256",
+        },
+        true,
+        ["sign", "verify"]
+      );
+      const spki = await crypto.subtle.exportKey("spki", keys.publicKey);
+      const pkcs8 = await crypto.subtle.exportKey("pkcs8", keys.privateKey);
+      if (current !== token) return;
+      pair = {
+        bits: Number(size.value),
+        publicPem: toPem("PUBLIC KEY", spki),
+        privatePem: toPem("PRIVATE KEY", pkcs8),
+      };
+      publicOut.write(pair.publicPem);
+      privateOut.write(pair.privatePem);
+      summary.textContent = `${pair.bits}-bit RSA · SHA-256 · exponent 65537 · PKCS#8 private, SPKI public`;
+      sync();
+      toast("Key pair ready");
+    } catch (caught) {
+      if (current !== token) return;
+      error.write(caught?.message || "The browser could not generate this key.");
+    } finally {
+      busy = false;
+      generateButton.disabled = false;
+    }
+  }
+
+  size.addEventListener("change", () => {
+    if (pair) {
+      pair = null;
+      publicOut.write("");
+      privateOut.write("");
+      summary.textContent = "";
+      sync();
+    }
+  });
+  showPrivate.input.addEventListener("change", sync);
+
+  sync();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Key size", size, "2048 is the common floor. 4096 is slower and rarely needed."),
+        showPrivate,
+        error,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "Generated with the browser's RSA implementation. The keys exist only in this page; closing it discards them. For production, generate keys on a machine you control.")
+      ),
+      stack(summary, empty, publicBox, privateBox)
+    ),
+    foot: actions(downloadPublic, downloadPrivate, copyPublic, copyPrivate, generateButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/secret-scanner.js

@@ -0,0 +1,168 @@
+// Finds API keys, tokens and private keys in a block of text before it is
+// pasted somewhere. It matches known shapes, so a clean result is a hint, not a
+// guarantee. Every value is masked unless you ask for it.
+import {
+  el, toast, bench, stack, panel, checkbox, button, actions, toolcard, blank,
+  notice, output, copyButton,
+} from "../core.js";
+import { dropzone, formatBytes } from "../files.js";
+
+const RULES = [
+  { id: "aws", label: "AWS access key", re: /\b((?:AKIA|ASIA)[0-9A-Z]{16})\b/g, group: 1 },
+  { id: "github", label: "GitHub token", re: /\b((?:gh[pousr]_[A-Za-z0-9]{20,}|github_pat_[A-Za-z0-9_]{22,}))\b/g, group: 1 },
+  { id: "slack", label: "Slack token", re: /\b(xox[baprs]-[A-Za-z0-9-]{10,})\b/g, group: 1 },
+  { id: "stripe", label: "Stripe key", re: /\b((?:sk|pk|rk)_(?:live|test)_[A-Za-z0-9]{16,})\b/g, group: 1 },
+  { id: "google", label: "Google API key", re: /\b(AIza[0-9A-Za-z_\-]{35})\b/g, group: 1 },
+  { id: "jwt", label: "JSON Web Token", re: /\b(eyJ[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{8,}\.[A-Za-z0-9_-]{4,})\b/g, group: 1 },
+  { id: "pem", label: "Private key block", re: /(-----BEGIN (?:RSA |EC |DSA |OPENSSH |PGP )?PRIVATE KEY(?: BLOCK)?-----)/g, group: 1 },
+  { id: "basic", label: "Basic auth in a URL", re: /\b([a-z][a-z0-9+.-]*:\/\/[^\s/@:]+:[^\s/@]+@)/gi, group: 1 },
+  { id: "sql", label: "Database password in a string", re: /\b(?:password|passwd|pwd)\s*=\s*['"]([^'"]{6,})['"]/gi, group: 1 },
+];
+
+function mask(value) {
+  if (value.length <= 8) return `${value.slice(0, 2)}${"*".repeat(Math.max(2, value.length - 2))}`;
+  return `${value.slice(0, 4)}${"*".repeat(Math.min(12, value.length - 8))}${value.slice(-4)}`;
+}
+
+function lineAt(text, index) {
+  let line = 1;
+  for (let i = 0; i < index; i++) if (text[i] === "\n") line++;
+  return line;
+}
+
+export function mount(slot) {
+  let findings = [];
+
+  const reveal = checkbox("Show the matched values", { checked: false });
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const list = el("div", { class: "grid gap-2" });
+  const empty = blank("shield-alert", "Paste text or drop a file to scan it.");
+  const scanned = output({ rows: 8 });
+
+  const text = el("textarea", {
+    class: "w-full min-w-0 min-h-32 resize-y rounded-r1 border border-orbit bg-deck px-3 py-2.5 font-mono text-sm leading-normal focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft",
+    placeholder: "Paste a config, an env list, or a diff",
+    rows: "8",
+    spellcheck: "false",
+    autocomplete: "off",
+    "aria-label": "Text to scan",
+  });
+
+  function render() {
+    const showValues = reveal.input.checked;
+    list.replaceChildren(
+      ...findings.map((finding, index) =>
+        el("div", { class: "grid gap-1 rounded-r1 border border-orbit bg-deck-2 p-2.5" },
+          el("div", { class: "flex flex-wrap items-center gap-2" },
+            el("span", { class: "rounded-full bg-danger/15 px-2 py-0.5 text-2xs font-bold text-danger" }, finding.label),
+            el("span", { class: "text-2xs text-ink-3" }, `line ${finding.line}`),
+            el("span", { class: "ms-auto font-mono text-2xs text-ink-2" }, showValues ? finding.value : mask(finding.value)),
+            copyButton(() => finding.value, "Copy")),
+          el("p", { class: "m-0 wrap-anywhere font-mono text-2xs text-ink-3" },
+            `${truncate(finding.value, showValues ? 120 : 48)}${showValues ? "" : " masked"}`)))
+    );
+  }
+
+  function truncate(value, max) {
+    return value.length <= max ? value : `${value.slice(0, max)}...`;
+  }
+
+  function scan() {
+    const source = text.value;
+    findings = [];
+    if (!source.trim()) {
+      summary.textContent = "";
+      list.replaceChildren();
+      empty.hidden = false;
+      scanned.hidden = true;
+      error.write("");
+      return;
+    }
+    for (const rule of RULES) {
+      rule.re.lastIndex = 0;
+      let match;
+      while ((match = rule.re.exec(source)) !== null) {
+        findings.push({ id: rule.id, label: rule.label, value: match[rule.group], line: lineAt(source, match.index) });
+        if (rule.re.lastIndex === match.index) rule.re.lastIndex++;
+      }
+    }
+    findings.sort((a, b) => a.line - b.line);
+    summary.textContent = findings.length
+      ? `${findings.length} possible secret${findings.length === 1 ? "" : "s"} in ${source.split("\n").length} lines`
+      : `No known secret shape in ${source.split("\n").length} lines`;
+    if (!findings.length) error.write("No known secret shape found. This is a hint, not a guarantee: an unfamiliar secret will pass.");
+    else error.write("Treat anything below as compromised and rotate it. The values stay in this page.");
+    list.hidden = findings.length === 0;
+    empty.hidden = findings.length > 0;
+    render();
+  }
+
+  text.addEventListener("input", scan);
+  reveal.input.addEventListener("change", render);
+
+  const drop = dropzone({ label: "Drop a file to scan it", accept: "", iconName: "shield-alert" });
+  drop.onFiles(async (files) => {
+    const picked = Array.from(files)[0];
+    if (!picked) return;
+    try {
+      text.value = await picked.text();
+      summary.textContent = `Read ${picked.name} · ${formatBytes(picked.size)}`;
+      scan();
+    } catch (caught) {
+      error.write(caught?.message || "That file could not be read.");
+    }
+  });
+
+  const copyReport = button("Copy report", {
+    icon: "copy",
+    onclick: async () => {
+      const text_ = findings.length
+        ? findings.map((f) => `line ${f.line}\t${f.label}\t${f.value}`).join("\n")
+        : "No known secret shape found.";
+      try {
+        await navigator.clipboard.writeText(text_);
+        toast("Report copied");
+      } catch {
+        error.write("The clipboard is blocked here.");
+      }
+    },
+  });
+
+  const clear = button("Clear", {
+    icon: "trash",
+    kind: "quiet",
+    onclick: () => {
+      text.value = "";
+      findings = [];
+      summary.textContent = "";
+      error.write("");
+      list.replaceChildren();
+      empty.hidden = false;
+      scanned.hidden = true;
+    },
+  });
+
+  scan();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        text,
+        drop,
+        reveal,
+        error,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "Matches known shapes for AWS, GitHub, Slack, Stripe, Google, JWTs, private keys, and credentials in URLs. Nothing is sent anywhere.")
+      ),
+      stack(summary, empty, list, scanned)
+    ),
+    foot: actions(clear, copyReport),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/ssh-fingerprint.js

@@ -0,0 +1,210 @@
+// The fingerprint of an SSH public key, in the SHA256 form that a server prints.
+// Comparing it with the host you are about to trust is the step people skip
+// because the command is awkward.
+import {
+  el, toast, bench, stack, panel, textArea, button, actions, toolcard, blank,
+  notice, output, copyButton, chipRow,
+} from "../core.js";
+
+const BASE64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+
+function decodeBase64(text) {
+  const clean = text.replace(/\s+/g, "");
+  if (!clean) throw new Error("The key is empty.");
+  const bits = [];
+  for (const char of clean) {
+    if (char === "=") break;
+    const index = BASE64.indexOf(char);
+    if (index < 0) throw new Error(`"${char}" is not a Base64 character.`);
+    for (let bit = 5; bit >= 0; bit--) bits.push((index >> bit) & 1);
+  }
+  const bytes = [];
+  for (let i = 0; i + 8 <= bits.length; i += 8) {
+    let byte = 0;
+    for (let j = 0; j < 8; j++) byte = (byte << 1) | bits[i + j];
+    bytes.push(byte);
+  }
+  return new Uint8Array(bytes);
+}
+
+/** The SSH wire format: a length prefixed string for each part. */
+function sshString(bytes) {
+  const out = new Uint8Array(4 + bytes.length);
+  new DataView(out.buffer).setUint32(0, bytes.length);
+  out.set(bytes, 4);
+  return out;
+}
+
+async function sha256(bytes) {
+  return new Uint8Array(await crypto.subtle.digest("SHA-256", bytes));
+}
+
+function md5(bytes) {
+  // A small MD5, only used for the legacy colon form.
+  const s = [7, 12, 17, 22, 7, 12, 17, 22, 7, 12, 17, 22, 7, 12, 17, 22,
+    5, 9, 14, 20, 5, 9, 14, 20, 5, 9, 14, 20, 5, 9, 14, 20,
+    4, 11, 16, 23, 4, 11, 16, 23, 4, 11, 16, 23, 4, 11, 16, 23,
+    6, 10, 15, 21, 6, 10, 15, 21, 6, 10, 15, 21, 6, 10, 15, 21];
+  const K = Array.from({ length: 64 }, (_, i) => Math.floor(Math.abs(Math.sin(i + 1)) * 2 ** 32));
+  const a0 = [0x67452301, 0xefcdab89, 0x98badcfe, 0x10325476];
+  let [A, B, C, D] = a0;
+  const padded = new Uint8Array((((bytes.length + 8) >> 6) + 1) * 64);
+  padded.set(bytes);
+  padded[bytes.length] = 0x80;
+  const view = new DataView(padded.buffer);
+  view.setUint32(padded.length - 8, (bytes.length << 3) >>> 0, true);
+  view.setUint32(padded.length - 4, Math.floor(bytes.length / 2 ** 32), true);
+  for (let chunk = 0; chunk < padded.length; chunk += 64) {
+    const X = [];
+    for (let i = 0; i < 16; i++) X[i] = view.getUint32(chunk + i * 4, true);
+    let [a, b, c, d] = [A, B, C, D];
+    for (let i = 0; i < 64; i++) {
+      let f;
+      let g;
+      if (i < 16) { f = (b & c) | (~b & d); g = i; }
+      else if (i < 32) { f = (d & b) | (~d & c); g = (5 * i + 1) % 16; }
+      else if (i < 48) { f = b ^ c ^ d; g = (3 * i + 5) % 16; }
+      else { f = c ^ (b | ~d); g = (7 * i) % 16; }
+      const tmp = d;
+      d = c;
+      c = b;
+      const sum = (a + f + K[i] + X[g]) | 0;
+      b = (b + ((sum << s[i]) | (sum >>> (32 - s[i])))) | 0;
+      a = tmp;
+    }
+    A = (A + a) | 0;
+    B = (B + b) | 0;
+    C = (C + c) | 0;
+    D = (D + d) | 0;
+  }
+  const out = new Uint8Array(16);
+  const outView = new DataView(out.buffer);
+  outView.setUint32(0, A, true);
+  outView.setUint32(4, B, true);
+  outView.setUint32(8, C, true);
+  outView.setUint32(12, D, true);
+  return out;
+}
+
+function toBase64(bytes) {
+  let out = "";
+  for (let i = 0; i < bytes.length; i += 3) {
+    const chunk = (bytes[i] << 16) | ((bytes[i + 1] ?? 0) << 8) | (bytes[i + 2] ?? 0);
+    out += BASE64[(chunk >> 18) & 63] + BASE64[(chunk >> 12) & 63];
+    out += i + 1 < bytes.length ? BASE64[(chunk >> 6) & 63] : "=";
+    out += i + 2 < bytes.length ? BASE64[chunk & 63] : "=";
+  }
+  return out;
+}
+
+export function mount(slot) {
+  let format = "sha256";
+
+  const key = textArea({
+    rows: 5,
+    placeholder: "ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAA... user@host",
+    "aria-label": "Public key",
+    class: "w-full min-w-0 min-h-28 resize-y rounded-r1 border border-orbit bg-deck px-3 py-2.5 font-mono text-sm leading-normal focus:border-jade focus:outline-none focus:ring-3 focus:ring-jade-soft",
+    spellcheck: "false",
+    autocomplete: "off",
+  });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const result = output({ rows: 3 });
+  const empty = blank("fingerprint", "Paste a public key to see its fingerprint.");
+
+  const mode = chipRow(
+    [
+      { value: "sha256", label: "SHA-256" },
+      { value: "md5", label: "MD5" },
+    ],
+    {
+      value: "sha256",
+      label: "Hash",
+      onChange: (value) => {
+        format = value;
+        run();
+      },
+    }
+  );
+
+  async function run() {
+    const source = key.value.trim();
+    if (!source) {
+      summary.textContent = "";
+      result.write("");
+      empty.hidden = false;
+      result.hidden = true;
+      error.write("");
+      return;
+    }
+    const parts = source.split(/\s+/);
+    if (parts.length < 2) {
+      error.write("A public key line needs a type and a Base64 body.");
+      summary.textContent = "";
+      result.write("");
+      empty.hidden = false;
+      result.hidden = true;
+      return;
+    }
+    const [type, body] = parts;
+    if (!/^(ssh-|ecdsa-|sk-ssh-|sk-ecdsa-)/.test(type)) {
+      error.write(`"${type}" is not a known public key type.`);
+      return;
+    }
+    try {
+      const blob = decodeBase64(body);
+      const hash = format === "md5" ? md5(blob) : await sha256(blob);
+      const shown = format === "md5"
+        ? [...hash].map((byte) => byte.toString(16).padStart(2, "0")).join(":")
+        : toBase64(hash).replace(/=+$/, "");
+      result.write(format === "md5" ? `MD5:${shown}` : `SHA256:${shown}`);
+      result.hidden = false;
+      empty.hidden = true;
+      summary.textContent = `${type} · ${parts.slice(2).join(" ") || "no comment"} · ${blob.length} bytes`;
+      error.write("");
+    } catch (caught) {
+      error.write(caught?.message || "That key could not be read.");
+      result.write("");
+      result.hidden = true;
+      empty.hidden = false;
+      summary.textContent = "";
+    }
+  }
+
+  key.addEventListener("input", run);
+
+  const copy = copyButton(() => result.textContent, "Copy fingerprint");
+  const clear = button("Clear", {
+    icon: "trash",
+    kind: "quiet",
+    onclick: () => {
+      key.value = "";
+      run();
+      key.focus();
+    },
+  });
+
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Public key", key, "The one line that starts with ssh-ed25519 or ecdsa-sha2."),
+        el("div", { class: "grid gap-1.5" }, el("span", { class: "text-sm font-semibold text-ink-2" }, "Hash"), mode),
+        error,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "This reads a public key only. Paste a private key and it will be treated as an unreadable line: never paste one here.")
+      ),
+      stack(summary, empty, result)
+    ),
+    foot: actions(clear, copy),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/totp-generator.js

@@ -0,0 +1,178 @@
+// The code an authenticator app would show, from a secret you paste. The HMAC
+// runs here, so a real secret never has to be typed into a website.
+import {
+  el, icon, toast, bench, stack, panel, textInput, selectInput, numberInput,
+  button, actions, toolcard, notice, copyButton, checkbox,
+} from "../core.js";
+import { base32Decode, parseOtpUri, totp, stepProgress, formatSecret, randomSecret } from "../totp.js";
+
+export function mount(slot) {
+  let secretBytes = null;
+  let timer = null;
+  let current = "";
+
+  const secret = textInput({
+    placeholder: "JBSWY3DPEHPK3PXP or otpauth://totp/...",
+    "aria-label": "Secret",
+    class: "font-mono",
+    autocomplete: "off",
+    spellcheck: "false",
+  });
+  const digits = selectInput(
+    [
+      { value: "6", label: "6 digits" },
+      { value: "8", label: "8 digits" },
+    ],
+    { value: "6", "aria-label": "Digits" }
+  );
+  const period = numberInput({ min: "5", max: "300", step: "1", value: "30", "aria-label": "Period in seconds" });
+  const algorithm = selectInput(
+    [
+      { value: "SHA1", label: "SHA-1" },
+      { value: "SHA256", label: "SHA-256" },
+      { value: "SHA512", label: "SHA-512" },
+    ],
+    { value: "SHA1", "aria-label": "Algorithm" }
+  );
+  const showSecret = checkbox("Show the secret", { checked: false });
+
+  const error = notice("warn");
+  const code = el("p", {
+    class: "m-0 font-mono text-[clamp(38px,9vw,62px)] font-bold leading-none tracking-[0.14em] text-ink tabular-nums",
+    "aria-live": "polite",
+  }, "------");
+  const meta = el("p", { class: "m-0 text-sm text-ink-2" }, "Paste a secret to start.");
+  const ring = el("div", { class: "h-1.5 overflow-hidden rounded-full bg-deck-2" },
+    el("div", { class: "h-full w-full rounded-full bg-jade transition-[width] duration-1000 ease-linear" }));
+  const panelBody = el("div", { class: "grid gap-3 rounded-r2 border border-orbit bg-deck-2 p-4" }, code, meta, ring);
+
+  function stop() {
+    clearInterval(timer);
+    timer = null;
+  }
+
+  function readSecret() {
+    const raw = secret.value.trim();
+    if (!raw) return null;
+    const uri = parseOtpUri(raw);
+    if (uri) {
+      if (uri.type !== "totp") throw new Error("That URI is for a different kind of token, not TOTP.");
+      if (!uri.secret) throw new Error("That otpauth URI has no secret in it.");
+      if (uri.digits) digits.value = String(uri.digits === 8 ? 8 : 6);
+      if (uri.period) period.value = String(uri.period);
+      if (uri.algorithm) algorithm.value = ["SHA1", "SHA256", "SHA512"].includes(uri.algorithm) ? uri.algorithm : "SHA1";
+      return { bytes: base32Decode(uri.secret), label: uri.issuer || uri.label };
+    }
+    return { bytes: base32Decode(raw), label: "" };
+  }
+
+  async function tick() {
+    if (!secretBytes) return;
+    const options = {
+      digits: Number(digits.value) || 6,
+      period: Math.max(5, Number(period.value) || 30),
+      algorithm: algorithm.value,
+    };
+    try {
+      const next = await totp(secretBytes, options);
+      const { left, ratio } = stepProgress(options.period);
+      if (next !== current) {
+        current = next;
+        code.textContent = next.replace(/(.{3})(?=.)/g, "$1 ");
+      }
+      meta.textContent = `${Math.ceil(left)} s left · ${options.period} s period · ${options.digits} digits · ${options.algorithm}`;
+      ring.firstElementChild.style.width = `${Math.round(ratio * 100)}%`;
+      error.write("");
+    } catch (caught) {
+      error.write(caught?.message || "Could not compute the code.");
+    }
+  }
+
+  function restart() {
+    stop();
+    current = "";
+    try {
+      const parsed = readSecret();
+      if (!parsed) {
+        secretBytes = null;
+        code.textContent = "------";
+        meta.textContent = "Paste a secret to start.";
+        ring.firstElementChild.style.width = "100%";
+        error.write("");
+        return;
+      }
+      secretBytes = parsed.bytes;
+      meta.textContent = parsed.label ? `${parsed.label} · reading` : "Reading the secret";
+      tick();
+      timer = setInterval(tick, 500);
+    } catch (caught) {
+      secretBytes = null;
+      code.textContent = "------";
+      meta.textContent = "";
+      error.write(caught?.message || "That secret could not be read.");
+    }
+  }
+
+  secret.addEventListener("input", restart);
+  digits.addEventListener("change", restart);
+  period.addEventListener("change", restart);
+  algorithm.addEventListener("change", restart);
+
+  showSecret.input.addEventListener("change", () => {
+    secret.type = showSecret.input.checked ? "text" : "password";
+    secret.classList.toggle("font-mono", true);
+  });
+  secret.type = "password";
+
+  const copyCode = copyButton(() => code.textContent.replace(/\s+/g, ""), "Copy code");
+  const newSecret = button("New secret", {
+    icon: "refresh-cw",
+    onclick: () => {
+      secret.type = "text";
+      showSecret.input.checked = true;
+      secret.value = randomSecret(20);
+      restart();
+      toast("New secret generated");
+    },
+  });
+  const copySecret = button("Copy secret", {
+    icon: "key-round",
+    onclick: async () => {
+      if (!secret.value.trim()) return;
+      const value = formatSecret(secret.value.trim().startsWith("otpauth") ? parseOtpUri(secret.value).secret : secret.value);
+      try {
+        await navigator.clipboard.writeText(value);
+        toast("Secret copied");
+      } catch {
+        error.write("The clipboard is blocked here.");
+      }
+    },
+  });
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Secret", secret, "Base32, or a full otpauth:// URI."),
+        el("div", { class: "grid grid-cols-2 gap-3" }, panel("Digits", digits), panel("Period", period)),
+        panel("Algorithm", algorithm),
+        showSecret,
+        error
+      ),
+      stack(panelBody,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "The code is computed in this tab with Web Crypto. Nothing is sent anywhere, and the secret is not stored."))
+    ),
+    foot: actions(newSecret, copySecret, copyCode),
+  });
+
+  slot.append(shell.node);
+  restart();
+
+  return {
+    unmount() {
+      stop();
+    },
+  };
+}
+
+export default { mount };