Lookalike <mv-lookalike>

node scripts/add.mjs lookalike --out ./src/marvelous

<mv-lookalike trusted="Acme Bank <acme-bank.com>">
  <p>Your card is locked. Unlock it at <a href="https://acme-bank-secure.com/login">acme-bank-secure.com</a>.</p>
</mv-lookalike>

<div id="lk-demo" style="width:min(100%,64rem);margin-inline:auto">
  <style>
    #lk-demo { display:grid; gap:1rem; align-content:start; font-size:.875rem }
    #lk-demo .lk-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:1rem; align-items:start }
    #lk-demo .lk-card { min-width:0; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-sm); overflow:hidden }
    #lk-demo .lk-bar { display:flex; align-items:center; gap:.5rem; height:2.75rem; padding:0 1rem; border-bottom:1px solid var(--mv-border); color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    #lk-demo .lk-bar strong { color:var(--mv-fg); font-size:.8125rem; font-weight:600 }
    #lk-demo .lk-bar .mv-badge { margin-inline-start:auto }
    #lk-demo .lk-mail-head { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.875rem; padding:1rem 1.125rem .875rem; border-bottom:1px solid var(--mv-border) }
    #lk-demo .lk-avatar { display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:50%; background:var(--mv-bg-emphasis); color:var(--mv-fg); font-size:.8125rem; font-weight:600 }
    #lk-demo .lk-subject { margin:0 0 .25rem; font-size:1rem; font-weight:650; letter-spacing:-.01em; line-height:1.3 }
    #lk-demo .lk-meta { margin:0; color:var(--mv-fg-muted); font-size:.8125rem; line-height:1.7 }
    #lk-demo .lk-meta b { color:var(--mv-fg-subtle); font-weight:500; display:inline-block; min-width:2.25rem }
    #lk-demo .lk-from { color:var(--mv-fg); font-weight:500 }
    #lk-demo .lk-body { padding:1rem 1.125rem 1.125rem; line-height:1.65; color:var(--mv-fg) }
    #lk-demo .lk-body > p { margin:0 0 .75rem }
    #lk-demo .lk-body > p:last-child { margin:0; color:var(--mv-fg-muted); font-size:.75rem }
    #lk-demo .lk-body a:not(.mv-button) { color:var(--mv-accent); text-decoration-color:color-mix(in oklab,var(--mv-accent) 40%,transparent); text-underline-offset:.2em }
    #lk-demo .lk-form { display:grid; gap:.875rem; padding:1rem 1.125rem 1.125rem }
    #lk-demo .lk-field { display:grid; gap:.375rem; min-width:0 }
    #lk-demo .lk-field > span:first-child { color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    #lk-demo .lk-row { display:flex; align-items:center; gap:.25rem; min-width:0 }
    #lk-demo .lk-row .mv-input { flex:1 1 auto; min-width:0 }
    #lk-demo .lk-mono { font-family:var(--mv-font-mono); font-size:.8125rem }
    #lk-demo .lk-chat { display:grid; gap:.625rem; padding:1rem 1.125rem 1.125rem; max-height:13rem; overflow:auto }
    #lk-demo .lk-msg { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.625rem; align-items:start }
    #lk-demo .lk-msg .lk-avatar { width:1.75rem; height:1.75rem; font-size:.6875rem }
    #lk-demo .lk-msg-who { margin:0; font-size:.75rem; font-weight:600 }
    #lk-demo .lk-msg-who span { color:var(--mv-fg-subtle); font-weight:400; margin-inline-start:.375rem }
    #lk-demo .lk-msg-text { margin:.125rem 0 0; line-height:1.55 }
    #lk-demo .lk-controls { display:flex; align-items:center; gap:.75rem 1.25rem; flex-wrap:wrap; padding:.875rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle) }
    #lk-demo .lk-controls .lk-sep { flex:1 1 0 }
    #lk-demo .lk-ctl { display:flex; align-items:center; gap:.5rem; color:var(--mv-fg-muted); font-size:.75rem; font-weight:500 }
    #lk-demo .lk-log { margin:0; min-height:1.25rem; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono); flex:1 1 100% }
    #lk-demo .mv-choice { font-size:.8125rem }
    @media (max-width:52rem) { #lk-demo .lk-grid { grid-template-columns:minmax(0,1fr) } }
  </style>

  <mv-lookalike id="lk-main" show-verified trusted="Acme Bank <acme-bank.com>, Quillpay <quillpay.com>, Harrowfield <harrowfield.io>, @harrowfield, Harrowfield payroll <DE89 3704 0044 0532 0130 00>, Treasury wallet <0x52908400098527886E0F7030069857D2E4169EE7>">
    <div class="lk-grid">
      <!-- An inbox message: sender, links and plain-text addresses are all checked -->
      <article class="lk-card" aria-label="Email message">
        <div class="lk-bar"><strong>Inbox</strong> · Finance shared mailbox <span class="mv-badge" data-variant="outline">Sep 24, 2026</span></div>
        <header class="lk-mail-head">
          <span class="lk-avatar" aria-hidden="true">AB</span>
          <div style="min-width:0">
            <h3 class="lk-subject">Unusual sign-in on your business account</h3>
            <p class="lk-meta"><b>From</b> <span class="lk-from" data-lookalike>Acme Bank Security &lt;[email protected]&gt;</span><br>
              <b>To</b> [email protected]</p>
          </div>
        </header>
        <div class="lk-body">
          <p>Hi Maya, we noticed a sign-in to your Acme Bank business account from São Paulo, Brazil on Sep 23, 2026 at 11:42 PM.</p>
          <p>If this wasn’t you, <a href="https://acmе-bank.com/secure/verify">confirm your identity</a> within 24 hours to avoid a hold on outgoing wires. You can also review recent activity at <a href="https://acme-bank.com.account-review.net/login">acme-bank.com/activity</a>.</p>
          <p>Card payments on your account are processed by quillpay.co. For anything else, our help center is at <a href="https://acme-bank.com/help">acme-bank.com/help</a>.</p>
          <p>Acme Bank · 400 Harbor Boulevard, Boston, MA 02210</p>
        </div>
      </article>

      <div style="display:grid;gap:1rem;min-width:0">
        <!-- A payment form: fields are checked as you type or paste -->
        <form class="lk-card" aria-label="Send a payment" onsubmit="return false">
          <div class="lk-bar"><strong>Send a payment</strong> · Payouts</div>
          <div class="lk-form">
            <label class="lk-field"><span>Payee email</span>
              <span class="lk-row"><input class="mv-input" type="email" value="[email protected]" autocomplete="off"></span></label>
            <label class="lk-field"><span>Payee IBAN</span>
              <span class="lk-row"><input class="mv-input lk-mono" data-lookalike value="DE89 3704 0044 0532 0180 00" autocomplete="off" spellcheck="false"></span></label>
            <label class="lk-field"><span>Treasury wallet (USDC)</span>
              <span class="lk-row"><input class="mv-input lk-mono" data-lookalike value="0x5290c1b7f04a9d3e6628fb05ac91d7e30b4a9EE7" autocomplete="off" spellcheck="false"></span></label>
            <label class="lk-field"><span>Try it: type or paste any link</span>
              <span class="lk-row"><input class="mv-input" type="url" value="https://www.quillpay-support.com/invoices" autocomplete="off" spellcheck="false"></span></label>
          </div>
        </form>

        <!-- A team chat: new messages are scanned as they arrive -->
        <section class="lk-card" aria-label="Team chat">
          <div class="lk-bar"><strong>#payouts</strong> · Team chat</div>
          <div class="lk-chat" id="lk-chat">
            <div class="lk-msg"><span class="lk-avatar" aria-hidden="true">JO</span><div><p class="lk-msg-who">Jonas Okafor<span>9:12 AM</span></p><p class="lk-msg-text">September payroll is approved, @harrowfield can release it.</p></div></div>
          </div>
        </section>
      </div>
    </div>
  </mv-lookalike>

  <div class="lk-controls">
    <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="lk-intercept" checked> Confirm before opening flagged links</label>
    <span class="lk-ctl"><span id="lk-th-label">Flag from</span>
      <mv-segmented id="lk-threshold" aria-labelledby="lk-th-label" name="threshold" value="lookalike">
        <button value="fine">Similar</button>
        <button value="lookalike">Look-alike</button>
        <button value="impersonation">Impersonation</button>
      </mv-segmented>
    </span>
    <span class="lk-sep"></span>
    <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="lk-incoming">Receive a chat message</button>
    <p class="lk-log" id="lk-log" aria-live="polite">Click a flag, or a flagged link, to see what doesn’t match.</p>
  </div>

  <script type="module">
    const lk = document.getElementById("lk-main");
    const log = document.getElementById("lk-log");
    const say = (text) => { log.textContent = text; };

    // Demo only: never actually open the fake addresses.
    lk.addEventListener("mv-lookalike-proceed", (e) => {
      e.preventDefault();
      lk.close();
      say(`mv-lookalike-proceed · would continue to ${e.detail.href ?? e.detail.value} (cancelled in this demo)`);
    });
    lk.addEventListener("mv-lookalike-report", (e) => say(`mv-lookalike-report · ${e.detail.verdict}: ${e.detail.value}`));
    lk.addEventListener("mv-lookalike-found", (e) => say(`mv-lookalike-found · ${e.detail.result.title}: ${e.detail.value}`));
    lk.addEventListener("click", (e) => {
      const real = e.target.closest?.(".mv-lookalike-real");
      if (real) { e.preventDefault(); say(`Would open the real site: ${real.href}`); }
    });

    document.getElementById("lk-intercept").addEventListener("change", (e) => { lk.intercept = e.target.checked ? "true" : "false"; });
    document.getElementById("lk-threshold").addEventListener("mv-change", (e) => { lk.threshold = e.detail.value; });

    const incoming = [
      ["HT", "Harrowfield Treasury", "@harr0wfield here: urgent, update the payout wallet before 5 PM using the form at quillpay.help/payouts"],
      ["PL", "Priya Lal", "Invoices for Q3 are on harrowfield.io/finance, and the vendor list is at quillpaay.com/vendors"],
      ["AK", "Ana Kovač", "Heads-up, I got a text from acme-bnak.com asking me to confirm a transfer. Ignored it."],
    ];
    let next = 0;
    document.getElementById("lk-incoming").addEventListener("click", () => {
      const [initials, who, text] = incoming[next++ % incoming.length];
      const chat = document.getElementById("lk-chat");
      const time = new Date().toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" });
      const msg = document.createElement("div");
      msg.className = "lk-msg";
      const avatar = Object.assign(document.createElement("span"), { className: "lk-avatar", textContent: initials });
      avatar.setAttribute("aria-hidden", "true");
      const body = document.createElement("div");
      const name = Object.assign(document.createElement("p"), { className: "lk-msg-who", textContent: who });
      name.append(Object.assign(document.createElement("span"), { textContent: time }));
      body.append(name, Object.assign(document.createElement("p"), { className: "lk-msg-text", textContent: text }));
      msg.append(avatar, body);
      chat.append(msg);
      chat.scrollTop = chat.scrollHeight;
    });
  </script>
</div>