Deliberation — <mv-deliberation>

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

<div id="dl-demo" style="display:grid;gap:1.75rem;width:min(100%,68rem);margin-inline:auto">
  <style>
    #dl-demo .dl-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1.5rem }
    #dl-demo .dl-bar h3 { margin:0; font-size:1rem; letter-spacing:-.01em }
    #dl-demo .dl-bar p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #dl-demo .dl-controls { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem }
    #dl-demo .dl-controls .mv-choice { font-size:.8125rem }
    #dl-demo .dl-hint { margin:-.75rem 0 0; color:var(--mv-fg-muted); font-size:.75rem; text-align:center }
    #dl-demo .dl-sep { height:1px; background:var(--mv-border) }
  </style>

  <div class="dl-bar">
    <div>
      <h3>Sprint 42 planning</h3>
      <p>You are facilitating. Round 1 was far apart; round 2 is under way.</p>
    </div>
    <div class="dl-controls">
      <label class="mv-choice">
        <input type="checkbox" role="switch" class="mv-switch" data-size="sm" id="dl-anon">
        <span class="mv-choice-text"><span class="mv-choice-title">Anonymous</span></span>
      </label>
      <label class="mv-choice">
        <input type="checkbox" role="switch" class="mv-switch" data-size="sm" id="dl-timer">
        <span class="mv-choice-text"><span class="mv-choice-title">60 s timer</span></span>
      </label>
      <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="dl-restart">Restart</button>
    </div>
  </div>

  <mv-deliberation id="dl-estimate" scale="fibonacci" unit="pts" rule="supermajority" me="priya" facilitator
    question="Offline sync for the mobile app (MOB-412): how many points?"></mv-deliberation>
  <p class="dl-hint">Pick your card, then Reveal votes: every card flips at once · Start the next round and watch the convergence chart narrow</p>

  <div class="dl-sep"></div>

  <div class="dl-bar">
    <div>
      <h3>Release go/no-go</h3>
      <p>Read-only room display · anonymous votes · unanimity required</p>
    </div>
  </div>
  <mv-deliberation id="dl-go" scale="go" rule="unanimous"
    question="Roll Checkout v3 out to 100% of traffic on Thursday?"></mv-deliberation>

  <script type="module">
    const est = document.getElementById("dl-estimate");
    const go = document.getElementById("dl-go");
    const $ = (id) => document.getElementById(id);

    const team = [
      { id: "priya", name: "Priya Nair" },
      { id: "aiko", name: "Aiko Tanaka" },
      { id: "mateo", name: "Mateo Rossi" },
      { id: "lars", name: "Lars Eriksen" },
      { id: "amara", name: "Amara Okafor" },
      { id: "diego", name: "Diego Fernández" },
    ];
    const hour = 36e5;
    const start = Date.now() - hour / 2;
    const seed = () => [
      { votes: { priya: 5, aiko: 13, mateo: 1, lars: 5, amara: 8, diego: 3 }, revealed: true, startedAt: start, revealedAt: start + 4 * 6e4 },
      { votes: { aiko: 8, lars: 5, amara: 8, diego: 5 }, startedAt: Date.now() - 45e3 },
    ];
    // Teammates' next votes, round by round (the viewer votes for themself).
    const plans = {
      2: { mateo: 5 },
      3: { aiko: 8, mateo: 5, lars: 5, amara: 5, diego: 5 },
    };
    const later = { aiko: 5, mateo: 5, lars: 5, amara: 5, diego: 8 };
    let timers = [];
    const schedule = (round) => {
      timers.forEach(clearTimeout);
      timers = [];
      const plan = plans[round] ?? later;
      Object.entries(plan).forEach(([id, value], i) => {
        timers.push(setTimeout(() => { if (est.isConnected && est.round === round) est.vote(id, value); }, 900 + i * 650 + Math.random() * 400));
      });
    };

    est.people = team;
    est.rounds = seed();
    await customElements.whenDefined("mv-deliberation");
    schedule(2);
    est.addEventListener("mv-round", (e) => schedule(e.detail.round));
    $("dl-anon").addEventListener("change", (e) => { est.anonymous = e.target.checked; });
    $("dl-timer").addEventListener("change", (e) => { est.timer = e.target.checked ? "60s" : null; });
    $("dl-restart").addEventListener("click", () => {
      est.decision = null;
      est.rounds = seed();
      schedule(2);
    });

    go.people = [
      { id: "noor", name: "Noor Haddad" },
      { id: "felix", name: "Felix Wagner" },
      { id: "sade", name: "Sade Adeyemi" },
      { id: "kenji", name: "Kenji Watanabe" },
      { id: "lucia", name: "Lucía Morales" },
      { id: "oren", name: "Oren Levi" },
    ];
    const day = Date.now() - 2 * hour;
    go.anonymous = true;
    go.rounds = [
      { votes: { noor: "go", felix: "no-go", sade: "conditional", kenji: "go", lucia: "go", oren: "conditional" }, revealed: true, anonymous: true, startedAt: day },
      { votes: { noor: "go", felix: "conditional", sade: "conditional", kenji: "go", lucia: "conditional", oren: "conditional" }, revealed: true, anonymous: true, startedAt: day + 9e5 },
      { votes: { noor: "conditional", felix: "conditional", sade: "conditional", kenji: "conditional", lucia: "conditional", oren: "conditional" }, revealed: true, anonymous: true, startedAt: day + 18e5 },
    ];
    go.decision = {
      value: "conditional",
      note: "Ship behind the checkout-v3 kill switch. Payments on-call confirms a rollback in under 5 minutes before the ramp goes past 25%.",
      rule: "unanimous",
      round: 3,
      agree: 6,
      counted: 6,
      at: day + 21e5,
    };
  </script>
</div>