Drift Check <mv-drift-check>

node scripts/add.mjs drift-check --out ./src/marvelous

<div id="dc-demo" style="width:min(100%,72rem);margin-inline:auto">
  <style>
    #dc-demo { display:grid; gap:1rem }
    #dc-demo .dc-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1.25rem }
    #dc-demo .dc-title { display:grid; gap:.125rem; min-width:0 }
    #dc-demo .dc-title small { color:var(--mv-fg-muted); font-size:.75rem }
    #dc-demo .dc-title strong { font-size:1rem; letter-spacing:-.01em }
    #dc-demo .dc-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.625rem 1.25rem }
    #dc-demo .dc-controls .mv-choice { font-size:.8125rem }
    #dc-demo .dc-log { display:flex; align-items:center; gap:.625rem; min-height:2.5rem; margin:0; padding:.5rem .875rem; border:1px dashed var(--mv-border); border-radius:var(--mv-radius-lg); color:var(--mv-fg-muted); font-size:.8125rem }
    #dc-demo .dc-log b { color:var(--mv-fg); font-weight:500 }
    #dc-demo .dc-log code { font-family:var(--mv-font-mono); font-size:.75rem; color:var(--mv-fg) }
  </style>

  <div class="dc-bar">
    <span class="dc-title">
      <small id="dc-kicker">Harborline Freight · Feature request FR-2291</small>
      <strong id="dc-heading">Bulk export for warehouse reports</strong>
    </span>
    <span class="dc-controls">
      <mv-segmented id="dc-scenario" aria-label="Scenario" value="request">
        <button value="request">Feature request</button>
        <button value="quote">Press quote</button>
      </mv-segmented>
      <label class="mv-choice">
        <input type="checkbox" role="switch" class="mv-switch" id="dc-review">
        <span class="mv-choice-text"><span class="mv-choice-title">Require reviewer to restore</span></span>
      </label>
    </span>
  </div>

  <mv-drift-check id="dc-check" terms="EU workspace, Rotterdam">
    <template data-version data-label="Customer email" data-by="Dana Whitfield" data-via="Head of Operations, Harborline" data-at="2026-09-02">
      We may need the export to handle up to 50,000 rows by the end of Q4. It should not email reports to all users, only to admins in the EU workspace. If the pilot in Rotterdam goes well, we would roll it out to the other 3 warehouses.
    </template>
    <template data-version data-label="Call notes" data-by="Marco Bellini" data-via="Paraphrased from a call" data-at="2026-09-04">
      Customer may need the export to handle 50,000 rows by the end of Q4. It should not email reports to all users, only admins in the EU workspace. If the Rotterdam pilot goes well, they would roll it out to the other 3 warehouses.
    </template>
    <template data-version data-label="Account summary" data-by="AI assistant" data-via="Summarized by AI" data-at="2026-09-05">
      The customer needs the export to handle 50,000 rows by the end of Q4. Reports should be emailed to all users, including admins in the EU workspace. After the Rotterdam pilot, they will roll it out to the other 3 warehouses.
    </template>
    <template data-version data-label="Product brief" data-by="Priya Nair" data-via="Edited for the roadmap" data-at="2026-09-08">
      The customer needs the export to handle 500,000 rows by the end of Q3. Reports should be emailed to all users, including admins in every workspace. After the Rotterdam pilot, we will roll it out to all 4 warehouses.
    </template>
    <template data-version data-label="Engineering ticket" data-by="Omar Haddad" data-via="Rewritten as a ticket" data-at="2026-09-10">
      Export must handle 500,000 rows by end of Q3. Email reports to all users, including admins in every workspace. After the Rotterdam pilot, we will roll it out to all 4 warehouses.
    </template>
  </mv-drift-check>

  <p class="dc-log" id="dc-log" aria-live="off"><span>Pick a hop, switch to <b>Side by side</b>, or restore a flagged span of the ticket.</span></p>

  <script type="module">
    const $ = (id) => document.getElementById(id);
    const check = $("dc-check");
    await customElements.whenDefined("mv-drift-check");

    const scenarios = {
      request: {
        kicker: "Harborline Freight · Feature request FR-2291",
        heading: "Bulk export for warehouse reports",
        terms: "EU workspace, Rotterdam",
        versions: null, // the <template> children
      },
      quote: {
        kicker: "Newsroom fact-check · Quote review",
        heading: "“Early results” quote, from interview to social post",
        terms: "",
        versions: [
          { label: "Interview transcript", by: "Dr. Amara Okafor", via: "Lead researcher, recorded interview", at: "2026-08-18",
            text: "In our trial, the treatment reduced symptoms in some patients, but we don't yet know whether the effect lasts beyond 12 weeks. We would not recommend it outside a study for now." },
          { label: "Press release", by: "University press office", via: "Edited for the press release", at: "2026-08-20",
            text: "In the trial, the treatment reduced symptoms in many patients, though it is not yet known whether the effect lasts beyond 12 weeks. The team would not recommend it outside a study for now." },
          { label: "News article", by: "Kenji Watanabe", via: "Quoted in an article", at: "2026-08-22",
            text: "The treatment reduced symptoms in most patients, and the effect lasts for 12 weeks. The team would recommend it outside a study." },
          { label: "Social post", by: "Health Daily", via: "Shortened for social", at: "2026-08-23",
            text: "New treatment cures symptoms in most patients for 3 months. Doctors will recommend it." },
        ],
      },
    };
    const original = check.versions;

    $("dc-scenario").addEventListener("mv-change", (e) => {
      const s = scenarios[e.detail.value];
      $("dc-kicker").textContent = s.kicker;
      $("dc-heading").textContent = s.heading;
      check.terms = s.terms || null;
      check.removeAttribute("from");
      check.removeAttribute("to");
      check.layout = e.detail.value === "quote" ? "split" : "inline";
      check.versions = s.versions ?? original;
      log(`Loaded ${check.versions.length} versions.`);
    });

    const log = (html) => {
      const p = $("dc-log");
      p.replaceChildren(...html.map ? html : [html]);
    };
    const el = (tag, text) => Object.assign(document.createElement(tag), { textContent: text });

    check.addEventListener("mv-hop-select", (e) => {
      const { from, to, comparison } = e.detail;
      log([el("code", "mv-hop-select"), el("span", ` ${from} → ${to} · drift ${comparison.score} · ${comparison.counts.high} high-risk`)]);
    });
    check.addEventListener("mv-restore", (e) => {
      if ($("dc-review").checked) {
        e.preventDefault();
        log([el("code", "mv-restore"), el("span", " declined: a reviewer must approve changes to the ticket.")]);
        return;
      }
      const c = e.detail.change;
      log([el("code", "mv-restore"), el("span", " "), el("b", c.removed ? `“${c.removed}”` : `removed “${c.added}”`), el("span", " is back in the ticket.")]);
    });
    check.addEventListener("mv-drift-found", (e) => {
      const { counts, breakHop } = e.detail;
      if (breakHop != null) log([el("code", "mv-drift-found"), el("span", ` ${counts.high} high-risk changes · meaning shifted most at hop ${breakHop}.`)]);
    });
  </script>
</div>