Unsourced <mv-unsourced>

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

<mv-unsourced>
  <script type="application/json" data-sources>[{ "id": "returns", "title": "Returns policy" }]</script>
  <p><mark data-claim data-cites="returns">Damaged items are refunded within 30 days</mark>, and <mark data-claim>we'll waive the $12 restocking fee</mark>.</p>
</mv-unsourced>

<div id="us-demo" style="width:min(100%,50rem);margin-inline:auto">
  <style>
    #us-demo { display:grid; gap:2rem }
    #us-demo .us-card { display:grid; gap:1rem; padding:1.25rem 1.5rem 1.25rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs) }
    #us-demo .us-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap }
    #us-demo .us-head h3 { margin:0; font-size:1rem; letter-spacing:-.01em }
    #us-demo .us-head p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #us-demo .us-ask { margin:0; padding:.7rem .9rem; border-radius:var(--mv-radius-lg); background:var(--mv-bg-muted); color:var(--mv-fg); font-size:.875rem; line-height:1.5 }
    #us-demo .us-ask b { display:block; margin-bottom:.15rem; color:var(--mv-fg-muted); font-size:.75rem; font-weight:600 }
    #us-demo mv-unsourced { font-size:.975rem }
    #us-demo mv-unsourced p { margin:0 0 .75rem }
    #us-demo .us-foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding-top:1rem; border-top:1px solid var(--mv-border) }
    #us-demo .us-state { display:flex; align-items:center; gap:.5rem; color:var(--mv-fg-muted); font-size:.8125rem }
    #us-demo .us-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
    #us-demo .us-foot .mv-choice { font-size:.8125rem }
    #us-demo details { font-size:.8125rem; color:var(--mv-fg-muted) }
    #us-demo summary { cursor:pointer; width:max-content; border-radius:var(--mv-radius-sm) }
    #us-demo summary:focus-visible { outline:none; box-shadow:var(--mv-focus-ring) }
    #us-demo pre { margin:.5rem 0 0; padding:.75rem .9rem; border-radius:var(--mv-radius-md); background:var(--mv-bg-subtle); color:var(--mv-fg); font:.8125rem/1.55 var(--mv-font-sans); white-space:pre-wrap }
    #us-demo .us-hint { margin:-.75rem 0 0; color:var(--mv-fg-muted); font-size:.75rem; text-align:center }
    #us-demo kbd { padding:0 .3em; border:1px solid var(--mv-border); border-bottom-width:2px; border-radius:4px; font:600 .6875rem/1.4 var(--mv-font-mono); color:var(--mv-fg) }
  </style>

  <!-- 1 · AI-drafted support reply, annotated markup -->
  <section class="us-card" aria-labelledby="us-t1">
    <header class="us-head">
      <div>
        <h3 id="us-t1">Reply draft</h3>
        <p>Ticket #58214 · Ana Oliveira · Order NW-48213</p>
      </div>
      <span class="mv-badge" data-variant="secondary" data-shape="pill">AI draft</span>
    </header>
    <p class="us-ask"><b>Ana Oliveira · 9:12 AM</b>Hi, my Brewline French Press arrived with a cracked lid. Can I get a refund, and do I have to pay for return shipping?</p>

    <mv-unsourced id="us-reply" label="Reply grounding">
      <script type="application/json" data-sources>[
        { "id": "order", "title": "Order NW-48213", "publisher": "Order history", "date": "2026-09-18", "snippet": "Delivered Sep 18, 2026, 2:14 PM · FedEx Ground · signed by A. Oliveira." },
        { "id": "returns", "title": "Returns & refunds policy", "url": "https://help.example.com/returns", "publisher": "Help Center", "date": "2026-03-04" },
        { "id": "shipping", "title": "Return shipping FAQ", "url": "https://help.example.com/return-shipping", "publisher": "Help Center", "date": "2026-05-12" },
        { "id": "warranty", "title": "Warranty terms", "url": "https://help.example.com/warranty", "publisher": "Help Center", "date": "2025-11-20" }
      ]</script>
      <script type="application/json" data-claims>[
        { "id": "c2", "evidence": [{ "source": "returns", "quote": "Items that arrive damaged or defective can be refunded or replaced free of charge within 30 days of delivery." }] },
        { "id": "c3", "evidence": [
          { "source": "returns", "quote": "For damaged items, we cover return shipping and email a prepaid label within one business day." },
          { "source": "shipping", "quote": "Prepaid return labels are sent by email and work at any FedEx or UPS drop-off point." }
        ] },
        { "id": "c4", "evidence": [{ "source": "returns", "stance": "contradicts", "quote": "Refunds are issued to the original payment method 5 to 10 business days after the carrier scans the return." }] },
        { "id": "c7", "evidence": [{ "source": "warranty", "stance": "partial", "score": 0.35, "quote": "Brewline accessories are covered by our standard limited warranty." }] }
      ]</script>
      <p>Hi Ana, thanks for reaching out, and I'm sorry the lid arrived cracked.</p>
      <p><mark data-claim="c1" data-cites="order">Your order was delivered on September 18</mark>, and <mark data-claim="c2">damaged items can be refunded or replaced free of charge within 30 days of delivery</mark>, so you're well within the window. <mark data-claim="c3">Return shipping is on us: we'll email you a prepaid label</mark>.</p>
      <p><mark data-claim="c4">Once the carrier scans the package, your refund will post within 2 business days</mark>. <mark data-claim="c5">We'll also waive the $12 restocking fee as a courtesy</mark>.</p>
      <p>If you'd rather keep the press, <mark data-claim="c6">replacement lids ship within 24 hours</mark>, and <mark data-claim="c7">the glass carafe is covered by a 2-year warranty</mark>. <mark data-claim="c8" data-support="opinion">A replacement is probably the faster option for you</mark>.</p>
      <p>Best,<br>Jordan, Customer Care</p>
    </mv-unsourced>

    <details id="us-plain">
      <summary>Plain text that will be sent</summary>
      <pre id="us-plain-text"></pre>
    </details>

    <footer class="us-foot">
      <label class="mv-choice">
        <input type="checkbox" role="switch" class="mv-switch" id="us-chips" checked>
        <span class="mv-choice-text"><span class="mv-choice-title">Source numbers</span></span>
      </label>
      <div class="us-actions">
        <span class="us-state" id="us-state" aria-live="polite"></span>
        <button class="mv-button" type="button" data-size="sm" id="us-send">Send reply</button>
      </div>
    </footer>
  </section>

  <!-- 2 · Research summary from data: text + claim spans, references list -->
  <section class="us-card" aria-labelledby="us-t2">
    <header class="us-head">
      <div>
        <h3 id="us-t2">Churn analysis summary</h3>
        <p>Generated from five internal sources · rendered from text and claim spans</p>
      </div>
      <button class="mv-button" type="button" data-variant="outline" data-size="sm" id="us-recheck">Re-check sources</button>
    </header>
    <mv-unsourced id="us-brief" references attention="unsourced contradicted weak" filter-label="Show only claims to review" label="Summary grounding"></mv-unsourced>
  </section>

  <p class="us-hint">Hover or Tab to a claim to see its evidence · <kbd>[</kbd> <kbd>]</kbd> step through the claims that need a source</p>

  <script type="module">
    await customElements.whenDefined("mv-unsourced");
    const $ = (id) => document.getElementById(id);
    const wait = (ms) => new Promise((r) => setTimeout(r, ms));

    /* ── 1 · Reply draft ─────────────────────────────── */
    const reply = $("us-reply");
    const send = $("us-send");
    const state = $("us-state");
    const plain = $("us-plain-text");

    // What the app's retrieval finds (a real app would query its knowledge base here).
    const found = {
      c6: [{ source: { id: "parts", title: "Replacement parts inventory", publisher: "Inventory · live", date: "2026-09-24" }, quote: "Brewline French Press lids: 148 in stock, ship within 24 hours of order." }],
    };
    reply.addEventListener("mv-find-source", (e) => {
      e.detail.waitUntil(wait(1100).then(() => found[e.detail.id] ?? []));
    });

    const paint = () => {
      if (!reply.isConnected) return;
      const s = reply.stats;
      state.textContent = s.attention
        ? `${s.attention} claim${s.attention > 1 ? "s" : ""} to fix before sending`
        : "Every claim is sourced or marked as opinion";
      send.dataset.variant = s.attention ? "outline" : "";
      if (!s.attention) send.removeAttribute("data-variant");
      plain.textContent = reply.toText();
    };
    reply.addEventListener("mv-claim-change", () => queueMicrotask(paint));
    send.addEventListener("click", () => {
      const s = reply.stats;
      if (s.attention) { reply.next(); return; }
      send.textContent = "Sent";
      send.disabled = true;
    });
    $("us-chips").addEventListener("change", (e) => {
      if (e.target.checked) reply.removeAttribute("citations");
      else reply.setAttribute("citations", "hidden");
    });
    requestAnimationFrame(paint);

    /* ── 2 · Summary from data ───────────────────────── */
    const brief = $("us-brief");
    brief.sources = [
      { id: "dashboard", title: "Churn dashboard", url: "https://metrics.example.com/churn", publisher: "Metrics", date: "2026-09-01" },
      { id: "survey", title: "Cancellation exit survey, August", url: "https://wiki.example.com/research/exit-survey-aug", publisher: "Research ops", date: "2026-09-03" },
      { id: "interviews", title: "Customer interviews, round 3 (n=24)", publisher: "Research ops", date: "2026-08" },
      { id: "experiment", title: "Pricing experiment #14 readout", url: "https://wiki.example.com/growth/exp-14", publisher: "Growth team", date: "2026-08-27" },
      { id: "tickets", title: "Support tickets export", publisher: "Support", date: "2026-09-02" },
    ];
    const claims = [
      { id: "b1", match: "Monthly churn rose to 4.1% in August, up from 3.2% in June", evidence: [{ source: "dashboard", quote: "Monthly plan churn: Jun 3.2% · Jul 3.6% · Aug 4.1%." }] },
      { id: "b2", match: "most customers who left named price as the main reason", evidence: [{ source: "survey", quote: "Price was the top reason for cancelling: 58% of 212 responses in August." }] },
      { id: "b3", match: "the July price increase is the likely trigger", evidence: [{ source: "interviews", stance: "partial", score: 0.3, quote: "Several customers mentioned the new price, but half of them had downgraded before July." }] },
      { id: "b4", match: "Annual plans were largely unaffected", evidence: [{ source: "dashboard", quote: "Annual plan churn: Jun 0.9% · Aug 1.0%." }] },
      { id: "b5", match: "Two competitors now bundle onboarding for free" },
      { id: "b6", match: "the $29 tier lifted trial-to-paid conversion by 9%", evidence: [{ source: "experiment", stance: "contradicts", quote: "Trial-to-paid conversion for the $29 tier: +4.2% (not statistically significant)." }] },
      { id: "b7", match: "Billing tickets doubled over the same period", evidence: [{ source: "tickets", quote: "Billing tickets: 312 in June, 655 in August." }] },
      { id: "b8", match: "Reverting monthly pricing before Q4 would recover most of the lost revenue" },
    ];
    brief.text = "Monthly churn rose to 4.1% in August, up from 3.2% in June, and most customers who left named price as the main reason: the July price increase is the likely trigger. Annual plans were largely unaffected. Two competitors now bundle onboarding for free.\n\nIn the pricing experiment, the $29 tier lifted trial-to-paid conversion by 9%. Billing tickets doubled over the same period. Reverting monthly pricing before Q4 would recover most of the lost revenue.";
    brief.claims = claims;

    const teardown = [{ source: { id: "teardown", title: "Competitive teardown, Q3", publisher: "Product marketing", date: "2026-09-10" }, quote: "Two of our three main competitors now include guided onboarding in every paid plan at no extra cost." }];
    brief.addEventListener("mv-find-source", (e) => {
      e.detail.waitUntil(wait(1200).then(() => (e.detail.id === "b5" ? teardown : [])));
    });

    // Re-check: every claim goes back to “checking”, then resolves one by one.
    let run = 0;
    $("us-recheck").addEventListener("click", async () => {
      const id = ++run;
      brief.close();
      brief.claims = claims.map((c) => ({ ...c, support: "pending" }));
      await wait(700);
      for (const c of claims) {
        if (id !== run || !brief.isConnected) return;
        brief.updateClaim(c.id, { support: null });
        await wait(380);
      }
    });
  </script>
</div>