Same Again <mv-same-again>

node scripts/add.mjs same-again --out ./src/marvelous

<mv-same-again key="standup" cadence="weekdays">
  <form>
    <label>Working from <select name="location"><option>Office</option><option>Remote</option></select></label>
    <label>Blockers <input name="blockers"></label>
    <button>Submit</button>
  </form>
</mv-same-again>

<div id="sa-demo" style="width:min(100%,64rem);margin-inline:auto">
  <style>
    #sa-demo { display:grid; gap:1.25rem }
    #sa-demo .sa-layout { display:grid; grid-template-columns:minmax(0,1fr) 16.5rem; gap:1.25rem; align-items:start }
    #sa-demo .sa-card { min-width:0; 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-sm) }
    #sa-demo .sa-head { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin:0 0 1rem }
    #sa-demo .sa-head h3 { margin:0; font-size:1.0625rem; letter-spacing:-.01em }
    #sa-demo .sa-head p { margin:.1875rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #sa-demo .sa-radios { display:flex; gap:.5rem 1.25rem; flex-wrap:wrap; padding-top:.25rem }
    #sa-demo .sa-checks { display:grid; gap:.625rem; justify-items:start }
    #sa-demo .sa-foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--mv-border) }
    #sa-demo .sa-foot small { color:var(--mv-fg-muted); font-size:.75rem }
    #sa-demo .sa-side { display:grid; gap:1rem; position:sticky; top:1rem }
    #sa-demo .sa-panel { padding:1rem 1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-bg-subtle) }
    #sa-demo .sa-panel h4 { margin:0 0 .625rem; font-size:.8125rem }
    #sa-demo .sa-steps { margin:0 0 1rem; padding-inline-start:1.125rem; color:var(--mv-fg-muted); font-size:.8125rem; line-height:1.5; display:grid; gap:.375rem }
    #sa-demo .sa-steps b { color:var(--mv-fg); font-weight:600 }
    #sa-demo .sa-next { width:100% }
    #sa-demo .sa-panel .mv-choice { font-size:.8125rem; margin-top:.875rem }
    #sa-demo .sa-log { display:grid; gap:.375rem; margin:0; padding:0; list-style:none; font:.75rem/1.4 var(--mv-font-mono); color:var(--mv-fg-muted) }
    #sa-demo .sa-log li { overflow-wrap:anywhere }
    #sa-demo .sa-log b { color:var(--mv-fg); font-weight:600 }
    #sa-demo .sa-ho-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.25rem; align-items:start }
    #sa-demo .sa-ho-grid .sa-wide { grid-column:1 / -1 }
    @media (max-width:54rem) {
      #sa-demo .sa-layout { grid-template-columns:minmax(0,1fr) }
      #sa-demo .sa-side { position:static }
    }
    @media (max-width:36rem) { #sa-demo .sa-ho-grid { grid-template-columns:minmax(0,1fr) } }
  </style>

  <div class="sa-layout">
    <!-- Main: an async daily standup, weekdays cadence, history from the "server" -->
    <section class="sa-card" aria-labelledby="sa-title">
      <div class="sa-head">
        <div>
          <h3 id="sa-title">Daily check-in</h3>
          <p>Payments squad · async standup, due by 10:00 AM</p>
        </div>
        <span class="mv-badge" data-variant="secondary">Weekdays</span>
      </div>
      <mv-same-again id="sa-main" cadence="weekdays" storage="none">
        <form id="sa-form" novalidate>
          <div class="mv-field-group">
            <div class="mv-field-row">
              <div class="mv-field">
                <label class="mv-label" for="sa-date">Date</label>
                <input class="mv-input" type="date" id="sa-date" name="date">
              </div>
              <div class="mv-field">
                <label class="mv-label" for="sa-project">Main project</label>
                <select class="mv-select" id="sa-project" name="project">
                  <option value="">Choose a project…</option>
                  <option value="checkout">Checkout redesign</option>
                  <option value="retries">Payment retries</option>
                  <option value="fraud">Fraud rules v2</option>
                  <option value="tools">Internal tools</option>
                </select>
              </div>
            </div>
            <fieldset class="mv-field" style="border:0;margin:0;padding:0;min-width:0">
              <legend class="mv-label">Working from</legend>
              <div class="sa-radios">
                <label class="mv-choice"><input type="radio" class="mv-radio" name="location" value="remote"> Remote</label>
                <label class="mv-choice"><input type="radio" class="mv-radio" name="location" value="office"> Office</label>
                <label class="mv-choice"><input type="radio" class="mv-radio" name="location" value="client"> Client site</label>
              </div>
            </fieldset>
            <div class="mv-field">
              <label class="mv-label" for="sa-done">Since the last check-in</label>
              <textarea class="mv-textarea" id="sa-done" name="done" rows="2" placeholder="What you shipped, reviewed or learned"></textarea>
            </div>
            <div class="mv-field-row">
              <div class="mv-field">
                <label class="mv-label" for="sa-ticket">Focus ticket</label>
                <input class="mv-input" id="sa-ticket" name="ticket" placeholder="PAY-000 · Short title">
              </div>
              <div class="mv-field">
                <label class="mv-label" for="sa-blockers">Blockers</label>
                <input class="mv-input" id="sa-blockers" name="blockers" placeholder="Anything slowing you down?">
              </div>
            </div>
            <div class="sa-checks">
              <label class="mv-choice"><input type="checkbox" class="mv-switch" role="switch" name="pairing"> Open to pairing today</label>
              <label class="mv-choice" data-same-again="never"><input type="checkbox" class="mv-checkbox" name="resolved"> A blocker was resolved since the last check-in</label>
            </div>
          </div>
          <div class="sa-foot">
            <small>In an empty field, press <kbd class="mv-kbd" data-size="sm">→</kbd> to reuse the last answer.</small>
            <button type="submit" class="mv-button">Submit check-in</button>
          </div>
        </form>
      </mv-same-again>
    </section>

    <aside class="sa-side" aria-label="Try it">
      <div class="sa-panel">
        <h4>Try it</h4>
        <ol class="sa-steps">
          <li>Press <b>→</b> in an empty field, or click a suggestion under it.</li>
          <li><b>Same as yesterday</b> fills only the fields you haven’t touched, and marks them until you confirm or edit them.</li>
          <li>Submit, then <b>start tomorrow</b>: today’s answers become the next suggestions.</li>
        </ol>
        <button type="button" class="mv-button sa-next" data-variant="outline" id="sa-next" disabled>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
          Start tomorrow’s check-in
        </button>
        <label class="mv-choice"><input type="checkbox" class="mv-switch" role="switch" data-size="sm" id="sa-review"> Require review before submit</label>
      </div>
      <div class="sa-panel">
        <h4>Events</h4>
        <ul class="sa-log" id="sa-log" aria-live="polite"><li>“Since the last check-in” changed every day, so it gets no suggestion.</li></ul>
      </div>
    </aside>
  </div>

  <!-- Variant: shift handover, one loop per submission, carried at load, review required -->
  <section class="sa-card" aria-labelledby="sa-ho-title">
    <div class="sa-head">
      <div>
        <h3 id="sa-ho-title">Shift handover · Packaging line 3</h3>
        <p>Plant 2, Rotterdam · filled at the end of every shift</p>
      </div>
      <span class="mv-badge" data-variant="warning">Review required</span>
    </div>
    <mv-same-again id="sa-ho" cadence="none" storage="none" require-review>
      <form id="sa-ho-form" novalidate>
        <div class="sa-ho-grid">
          <div class="mv-field">
            <label class="mv-label" for="sa-ho-status">Line status</label>
            <select class="mv-select" id="sa-ho-status" name="status">
              <option value="">Choose…</option>
              <option value="running">Running normally</option>
              <option value="issues">Running with issues</option>
              <option value="stopped">Stopped</option>
            </select>
          </div>
          <div class="mv-field">
            <label class="mv-label" for="sa-ho-next">Handing over to</label>
            <input class="mv-input" id="sa-ho-next" name="next" placeholder="Name of the incoming lead">
          </div>
          <div class="mv-field sa-wide">
            <label class="mv-label" for="sa-ho-issues">Open issues</label>
            <textarea class="mv-textarea" id="sa-ho-issues" name="issues" rows="2"></textarea>
          </div>
          <div class="mv-field">
            <label class="mv-label" for="sa-ho-units">Cases packed this shift</label>
            <input class="mv-input" type="number" id="sa-ho-units" name="units" inputmode="numeric">
          </div>
          <div class="mv-field" style="align-self:end" data-same-again="never">
            <label class="mv-choice"><input type="checkbox" class="mv-checkbox" name="safety"> Safety walk done this shift</label>
          </div>
        </div>
        <div class="sa-foot">
          <small>Carried-over answers must be confirmed or edited before the handover can be sent.</small>
          <button type="submit" class="mv-button" id="sa-ho-submit">Submit handover</button>
        </div>
      </form>
    </mv-same-again>
  </section>

  <script type="module">
    await customElements.whenDefined("mv-same-again");
    const main = document.getElementById("sa-main");
    const form = document.getElementById("sa-form");
    const ho = document.getElementById("sa-ho");
    const log = document.getElementById("sa-log");
    const next = document.getElementById("sa-next");
    const review = document.getElementById("sa-review");

    const say = (html) => {
      const li = document.createElement("li");
      li.textContent = html;
      log.prepend(li);
      while (log.children.length > 5) log.lastElementChild.remove();
    };
    const at = (d, h, m) => { const x = new Date(d); x.setHours(h, m, 0, 0); return x.getTime(); };
    const prevWeekday = (t) => { const d = new Date(t); do d.setDate(d.getDate() - 1); while (d.getDay() === 0 || d.getDay() === 6); return d.getTime(); };
    const today = () => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`; };

    // Fourteen weekdays of history, as a server would return them (oldest first).
    const DONE = [
      "Kicked off the checkout copy review with Design.", "Fixed the currency rounding bug in receipts.", "Shipped the new address form to 5% of traffic.",
      "Paired with Amara on the tax line breakdown.", "Wrote the rollout note for the checkout redesign.", "Closed the last checkout copy tickets.",
      "Mapped every webhook the replay tool must cover.", "Built the replay queue and its dead-letter view.", "Reviewed PR #398 and added replay metrics.",
      "Shipped webhook replay to 10% of merchants.", "Handled two replay escalations from support.", "Wrote the retry backoff RFC and shared it.",
      "Paired with Kenji on idempotency keys; merged PR #409.", "Reviewed PR #412 and fixed the flaky refund test.",
    ];
    let t = at(prevWeekday(Date.now()), 9, 12);
    const loops = [];
    for (let i = 13; i >= 0; i--) {
      loops.unshift({ t, values: {
        project: i >= 6 ? "retries" : "checkout",
        location: i % 4 === 2 && i < 11 ? "office" : "remote",
        done: DONE[i],
        ticket: i >= 11 ? "PAY-231 · Retry backoff" : i >= 6 ? "PAY-219 · Webhook replay" : "PAY-188 · Checkout copy",
        blockers: i >= 12 ? "Waiting on sandbox credentials from the Risk team" : "None",
        pairing: i % 3 !== 0,
      } });
      t = at(prevWeekday(t), 9, [4, 9, 12, 7, 15, 2, 11][i % 7]);
    }
    main.previous = { count: 41, loops };

    // Today, before anyone clicked: the date is set, and two answers were already typed.
    document.getElementById("sa-date").value = today();
    const done = document.getElementById("sa-done");
    done.value = "Merged the retry backoff (PR #415) and updated the runbook.";
    done.dispatchEvent(new Event("input", { bubbles: true }));
    const office = form.querySelector('input[name="location"][value="office"]');
    office.checked = true;
    office.dispatchEvent(new Event("change", { bubbles: true }));

    main.addEventListener("mv-carry", (e) => say(`mv-carry · ${e.detail.source} · ${e.detail.fields.join(", ")}`));
    main.addEventListener("mv-loop-saved", (e) => {
      say(`mv-loop-saved · loop ${e.detail.loop} · ${e.detail.streak}-day streak`);
      next.disabled = false;
    });
    main.addEventListener("mv-review-required", (e) => say(`mv-review-required · ${e.detail.fields.join(", ")}`));
    form.addEventListener("submit", (e) => e.preventDefault()); // a fetch() would go here

    // Simulated tomorrow: every stored loop moves one weekday back, the form starts empty.
    next.addEventListener("click", () => {
      const p = main.previous;
      main.previous = { count: p.count, loops: p.loops.map((l) => ({ ...l, t: prevWeekday(l.t) })), dates: p.dates.map(prevWeekday) };
      form.reset();
      document.getElementById("sa-date").value = today();
      next.disabled = true;
      say(`New day · loop ${main.loop}`);
    });
    review.addEventListener("change", () => { main.requireReview = review.checked; });

    // Handover: one loop per shift, the unchanged answers carried as soon as the form opens.
    const shift = (daysAgo, h, m) => at(Date.now() - daysAgo * 864e5, h, m);
    ho.previous = { count: 212, loops: [
      { t: shift(1, 14, 3), values: { status: "issues", next: "Tomás Herrera", issues: "Label printer jams about every 2 hours. Spare rolls are in cabinet B.", units: "1840" } },
      { t: shift(1, 22, 1), values: { status: "issues", next: "Yuki Tanaka", issues: "Label printer jams about every 2 hours. Spare rolls are in cabinet B.", units: "1712" } },
      { t: shift(0, 6, 2), values: { status: "issues", next: "Ines Duarte", issues: "Label printer jams about every 2 hours. Spare rolls are in cabinet B. Maintenance booked for Thursday.", units: "1655" } },
    ] };
    ho.carry();
    document.getElementById("sa-ho-form").addEventListener("submit", (e) => e.preventDefault());
  </script>
</div>