Certainty <mv-certainty>

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

<mv-certainty summary>
  <p><span data-confidence="0.93">Heat pumps work efficiently in most climates</span>, and <span data-confidence="0.34" data-reason="Based on 2023 contractor quotes.">a ducted system costs about $14,000 installed</span>.</p>
</mv-certainty>

<div id="ct-demo" style="width:min(100%,46rem);margin-inline:auto">
  <style>
    #ct-demo { display:grid; gap:2.25rem }
    #ct-demo .ct-card { display:grid; gap:1rem; padding:1.25rem 1.375rem 1.375rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface); box-shadow:var(--mv-shadow-xs) }
    #ct-demo .ct-ask { justify-self:end; max-width:85%; margin:0; padding:.55rem .9rem; border-radius:1rem 1rem .25rem 1rem; background:var(--mv-bg-muted); font-size:.9375rem; line-height:1.45 }
    #ct-demo .ct-who { display:flex; align-items:center; gap:.5rem; margin:0; color:var(--mv-fg-muted); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase }
    #ct-demo .ct-who::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--mv-accent) }
    #ct-demo mv-certainty { font-size:1rem }
    #ct-demo .ct-foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; padding-top:.25rem; color:var(--mv-fg-muted); font-size:.8125rem }
    #ct-demo .ct-foot .mv-choice { font-size:.8125rem }
    #ct-demo .ct-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 -.25rem }
    #ct-demo .ct-head h3 { margin:0; font-size:1rem; letter-spacing:-.01em }
    #ct-demo .ct-head span { color:var(--mv-fg-muted); font-size:.8125rem }
    #ct-demo .ct-flagged { font-variant-numeric:tabular-nums }
  </style>

  <!-- 1 · Annotated markup: summary strip + threshold -->
  <section class="ct-card" aria-label="Annotated answer">
    <p class="ct-ask">Is a heat pump worth it for my house built in 1975?</p>
    <p class="ct-who">Assistant</p>
    <mv-certainty id="ct-answer" summary filter mode="dim" label="Answer reliability">
      <p>For a house built in 1975, <span data-confidence="0.93" data-reason="Standard retrofit for forced-air homes of that era." data-sources="U.S. Department of Energy · Heat pump systems|https://www.energy.gov/energysaver/heat-pump-systems">an air-source heat pump can usually replace both the furnace and the central air conditioner</span>. <span data-confidence="0.66" data-reason="Inferred from the construction year; only an energy audit will confirm it.">Homes from that period often have thin wall insulation and leaky ductwork</span>.</p>
      <p><span data-confidence="0.95" data-reason="Well established, confirmed by two official sources." data-sources="U.S. Department of Energy · Heat pump systems|https://www.energy.gov/energysaver/heat-pump-systems;ENERGY STAR · Heat pumps|https://www.energystar.gov/">Modern heat pumps work efficiently in most climates, and cold-climate models keep heating well below freezing</span>. <span data-confidence="0.34" data-reason="Based on 2023 contractor quotes; current regional prices were not found.">A ducted whole-house system would cost about $14,000 to $20,000 installed</span>.</p>
      <p><span data-confidence="0.9" data-reason="Certification criteria are published and stable." data-sources="ENERGY STAR · Heat pumps|https://www.energystar.gov/">ENERGY STAR certified models use noticeably less electricity than standard ones</span>, and <span data-confidence="0.97" data-reason="Basic physics of heat transfer, explained by the DOE." data-sources="U.S. Department of Energy · Heat pump systems|https://www.energy.gov/energysaver/heat-pump-systems">they move heat rather than generate it, which is why they can deliver more energy than they consume</span>. <span data-confidence="0.58" data-reason="Depends on your utility and local program.">Many utilities offer rebates for qualifying installations</span>, <span data-confidence="0.18" data-reason="Federal credit rules changed recently; no current source confirms this.">and these would still stack with federal tax credits</span>.</p>
      <p><span data-confidence="0.72" data-reason="Common in many states, not everywhere." data-sources="DSIRE · Database of State Incentives|https://www.dsireusa.org/">Your state or city may add its own incentive</span>: <span data-confidence="0.41" data-reason="Generalized from a handful of programs only.">it often takes the form of a $500 to $1,500 rebate</span>. <span data-confidence="0.88" data-sources="U.S. Department of Energy · Home energy audits|https://www.energy.gov/energysaver/home-energy-audits">The best first step is a professional home energy audit</span>, which will confirm current prices and programs.</p>
    </mv-certainty>
    <div class="ct-foot">
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="ct-collapse"><span class="mv-choice-text"><span class="mv-choice-title">Collapse hidden passages</span></span></label>
      <span class="ct-flagged" id="ct-flagged" aria-live="polite">Hover or tab to a passage to see where it comes from.</span>
    </div>
  </section>

  <!-- 2 · Streaming: segments appended as they arrive -->
  <section class="ct-card" aria-label="Streamed answer">
    <div class="ct-head"><h3>Live stream</h3><span>segments added one by one with append()</span></div>
    <p class="ct-ask">When did the Musée d'Orsay open?</p>
    <mv-certainty id="ct-stream" summary label="Reliability of the answer in progress"></mv-certainty>
    <div class="ct-foot">
      <span id="ct-stream-state">Generating…</span>
      <button class="mv-button" data-variant="outline" data-size="sm" type="button" id="ct-regen">Regenerate</button>
    </div>
  </section>

  <script type="module">
    await customElements.whenDefined("mv-certainty");
    const answer = document.getElementById("ct-answer");
    const flagged = document.getElementById("ct-flagged");
    document.getElementById("ct-collapse").addEventListener("change", (e) => { answer.mode = e.target.checked ? "collapse" : "dim"; });
    answer.addEventListener("mv-flag", () => {
      const n = answer.stats.flagged;
      flagged.textContent = n ? `${n} passage${n > 1 ? "s" : ""} flagged for review` : "No passages flagged";
    });

    // Streaming: two alternative answers, each segment arrives on its own.
    const orsay = "Musée d'Orsay · Official website|https://www.musee-orsay.fr/en";
    const takes = [
      [
        { text: "The Musée d'Orsay opened its doors " },
        { text: "in December 1986", confidence: 0.94, reason: "Date given by the museum's official website.", sources: orsay },
        { text: ", inside the former Gare d'Orsay, " },
        { text: "a railway station built for the 1900 World's Fair", confidence: 0.9, reason: "Several sources agree.", sources: orsay },
        { text: ". " },
        { text: "Its interior was designed by Gae Aulenti", confidence: 0.74, reason: "She designed the interior alongside ACT Architecture, who led the conversion." },
        { text: ", and " },
        { text: "the museum reportedly welcomes nearly 4 million visitors a year", confidence: 0.38, reason: "Attendance varies from year to year; the figure is undated." },
        { text: "." },
      ],
      [
        { text: "Housed in a station " },
        { text: "designed by Victor Laloux", confidence: 0.87, reason: "Architect named by every source consulted.", sources: orsay },
        { text: ", the Musée d'Orsay " },
        { text: "was inaugurated in late 1986", confidence: 0.92, sources: orsay },
        { text: ".\n\n" },
        { text: "Its collection mostly spans 1848 to 1914", confidence: 0.69, reason: "Usual boundaries, sometimes presented differently." },
        { text: ", and " },
        { text: "attendance reportedly neared 3.9 million visitors in 2023", confidence: 0.46, reason: "Press figure, not checked against the annual report." },
        { text: "." },
      ],
    ];
    const stream = document.getElementById("ct-stream");
    const state = document.getElementById("ct-stream-state");
    let run = 0;
    let take = 0;
    async function play() {
      const id = ++run;
      stream.segments = [];
      stream.setAttribute("aria-busy", "true");
      state.textContent = "Generating…";
      for (const seg of takes[take]) {
        await new Promise((r) => setTimeout(r, seg.confidence === undefined ? 160 : 520));
        if (id !== run || !stream.isConnected) return;
        stream.append(seg);
      }
      stream.setAttribute("aria-busy", "false");
      state.textContent = `Done · ${stream.stats.count} annotated passages`;
    }
    document.getElementById("ct-regen").addEventListener("click", () => { take = (take + 1) % takes.length; play(); });
    play();
  </script>
</div>