Run Contract <mv-run-contract>

node scripts/add.mjs run-contract --out ./src/marvelous

<mv-run-contract eta="25-40" budget="12">
  <p slot="objective">Compare 20 product sheets on price, shipping and reviews.</p>
  <ul slot="done"><li>A comparison table across 18 criteria</li></ul>
  <ul slot="allow"><li>Browse public websites</li></ul>
  <ul slot="deny"><li>Send emails</li></ul>
</mv-run-contract>

<div id="rc-demo" style="width:min(100%,42rem);margin-inline:auto">
  <style>
    #rc-demo .rc-bar { display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; margin-top:.875rem }
    #rc-demo .rc-hint { margin:0; color:var(--mv-fg-muted); font-size:.75rem }
  </style>

  <mv-run-contract id="rc-watch" eta="25-40" budget="12" budget-max="30" extend="5" speed="60">
    <p slot="objective">Competitive watch: 20 product sheets compared on price, shipping and customer reviews.</p>
    <ul slot="done">
      <li>20 product sheets collected from dated public sources</li>
      <li>Comparison table across 18 criteria, prices normalized with tax</li>
      <li>One-page summary with the 3 biggest gaps</li>
    </ul>
    <ul slot="allow">
      <li>Read your files in the “Market watch” folder</li>
      <li>Browse public websites</li>
      <li>Create a results spreadsheet</li>
    </ul>
    <ul slot="deny">
      <li>Send emails</li>
      <li>Create accounts or pay for access</li>
    </ul>
    <p slot="question" data-name="market" data-options="United States, International" data-answer="United States">Which market should we compare?</p>
    <p slot="question" data-name="shipping" data-options="Yes (delivered price), No (list price)">Should prices include shipping?</p>
  </mv-run-contract>

  <div class="rc-bar">
    <p class="rc-hint">Hold <kbd class="mv-kbd">Space</kbd> or the button to sign · accelerated demo: 1 s = 1 min</p>
    <button class="mv-button" data-variant="outline" data-size="sm" type="button" id="rc-replay">Replay demo</button>
  </div>

  <script type="module">
    const rc = document.getElementById("rc-watch");
    await customElements.whenDefined("mv-run-contract");

    // Scripted research agent: breadcrumbs are decisions, not logs.
    const PLAN = [
      { at: 4, label: "Scope set", summary: "20 products kept out of 26 candidates, 6 out-of-range dropped", detail: "Exclusion rule: discontinued products and quote-only listings." },
      { at: 11, label: "Sources vetted", summary: "14 sources kept, 3 dropped (paywalled)", detail: "Subscription comparison sites are outside the delegation: no paid access was created." },
      { at: 20, label: "Sheets extracted", summary: "20 sheets collected, 2 incomplete ones retried", detail: "Two sheets missing shipping costs were completed from the retailers’ terms of sale." },
      { at: 29, label: "Prices normalized", summary: "All prices converted to delivered price with tax, 18 criteria aligned", detail: "Assumption: standard ground shipping within the contiguous United States." },
      { at: 38, label: "Summary drafted", summary: "3 major gaps found, table ready for review", detail: "The draft summary is in “Market watch / 2026-09”." },
    ];
    const END = 43;
    const cost = (m) => (m <= 33 ? m * 0.366 : 12.08 + (m - 33) * 0.2);
    let timer = 0;
    let next = 0;
    let offset = 0; // minutes replayed after a "resume from"
    let extra = 0;  // money already spent before that point

    const tick = () => {
      if (rc.state !== "running") return;
      const m = rc.elapsed;
      const work = m - offset;
      while (next < PLAN.length && work >= PLAN[next].at) rc.checkpoint({ ...PLAN[next++], at: m });
      const done = Math.min(20, Math.floor((work / END) * 20));
      rc.progress({ spent: extra + cost(work), percent: Math.min(0.99, work / END), note: `${done} of 20 sheet${done === 1 ? "" : "s"} compared` });
      if (work >= END) {
        clearInterval(timer);
        rc.complete({ summary: "20 sheets compared across 18 criteria. Report ready: 3 major price gaps, 2 stock-outs to watch." });
      }
    };
    const run = () => { clearInterval(timer); timer = setInterval(tick, 200); };

    rc.addEventListener("mv-start", () => { next = offset = extra = 0; run(); });
    rc.addEventListener("mv-resume-from", (e) => {
      // The agent restarts from the chosen checkpoint: later breadcrumbs are redone from now on.
      const cp = e.detail.checkpoint;
      const i = PLAN.findIndex((p) => p.label === cp.label);
      const workAt = i >= 0 ? PLAN[i].at : 0;
      next = i + 1;
      offset = rc.elapsed - workAt;
      extra = rc.spent - cost(workAt);
      run();
    });
    rc.addEventListener("mv-budget", (e) => console.info("mv-budget", e.detail.type, e.detail.spent.toFixed(2), "/", e.detail.cap));
    document.getElementById("rc-replay").addEventListener("click", () => {
      clearInterval(timer);
      rc.reset();
    });
  </script>
</div>