Trust Ladder <mv-trust-ladder>

node scripts/add.mjs trust-ladder --out ./src/marvelous

<mv-trust-ladder label="Support assistant">
  <script type="application/json">{ "capabilities": [{ "id": "refunds", "label": "Refund customers", "level": "approve", "since": "-12d",
    "evidence": [{ "at": "-2h", "title": "Refund $42 · Order 4821", "outcome": "approved" }, { "at": "-1d", "title": "Refund $18 · Order 4790", "outcome": "reverted" }] }] }</script>
</mv-trust-ladder>

<div id="tl-demo" style="width:min(100%,62rem);margin-inline:auto">
  <style>
    #tl-demo { display:grid; gap:1.25rem; align-content:start }
    #tl-demo .tl-top { display:flex; align-items:flex-end; justify-content:space-between; gap:.5rem 1rem; flex-wrap:wrap }
    #tl-demo .tl-kicker { margin:0; color:var(--mv-fg-subtle); font-size:.6875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase }
    #tl-demo .tl-top h3 { margin:.125rem 0 0; font-size:1.125rem; letter-spacing:-.01em }
    #tl-demo .tl-top p.tl-sub { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #tl-demo .tl-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.25rem; align-items:start }
    #tl-demo .tl-panel { display:grid; gap:.875rem; padding:1rem 1.125rem 1.125rem; border:1px dashed var(--mv-border-strong); border-radius:var(--mv-radius-xl) }
    #tl-demo .tl-panel h4 { margin:0; font-size:.8125rem; font-weight:600 }
    #tl-demo .tl-row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap }
    #tl-demo .tl-row > span { color:var(--mv-fg-muted); font-size:.75rem; margin-inline-end:.25rem }
    #tl-demo .tl-panel .mv-choice { font-size:.8125rem }
    #tl-demo .tl-log { margin:0; min-height:2.5em; color:var(--mv-fg-subtle); font:.75rem/1.4 var(--mv-font-mono) }
    #tl-demo .tl-side { display:grid; gap:.5rem }
    #tl-demo .tl-side p { margin:0; color:var(--mv-fg-muted); font-size:.75rem }
    @media (max-width:48rem) { #tl-demo .tl-grid { grid-template-columns:minmax(0,1fr) } }
  </style>

  <div class="tl-top">
    <div>
      <p class="tl-kicker">Helpdesk · Automation settings</p>
      <h3>What the support assistant may do on its own</h3>
      <p class="tl-sub">Autonomy is earned per capability from its track record. Your app applies the level.</p>
    </div>
  </div>

  <!-- Main: an AI support assistant, four capabilities, refunds expanded -->
  <mv-trust-ladder id="tl-main" label="Support assistant" user="Priya Nair" require-owner evidence-limit="5"></mv-trust-ladder>

  <div class="tl-grid">
    <section class="tl-panel" aria-label="Demo controls">
      <h4>Try it on “Refund customers”</h4>
      <div class="tl-row">
        <span>Next refund:</span>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="tl-approve">Approved</button>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="tl-edit">Edited</button>
        <button type="button" class="mv-button" data-variant="outline" data-size="sm" id="tl-revert">Reverted</button>
      </div>
      <div class="tl-row">
        <button type="button" class="mv-button" data-variant="secondary" data-size="sm" id="tl-week">Skip ahead a week</button>
        <button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="tl-reset">Reset demo</button>
      </div>
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="tl-owner" checked> Viewing as the owner, Priya Nair</label>
      <label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="tl-fail"> Server rejects the next change</label>
      <p class="tl-log" id="tl-log" aria-live="polite">Add a few approved refunds, then promote.</p>
    </section>

    <!-- Compact: a new team member's approval rights, same mechanic -->
    <div class="tl-side">
      <mv-trust-ladder id="tl-compact" compact label="Elena Petrova · Junior approver" user="Tomás Rivera" require-owner>
        <script type="application/json">{
          "levels": [
            { "id": "shadow", "label": "Shadow review", "description": "Reviews alongside a senior approver. Decides nothing." },
            { "id": "co", "label": "Co-approve", "description": "Approves together with a second approver.", "criteria": { "actions": 10, "maxReverted": 0 } },
            { "id": "solo", "label": "Approve up to $1,000", "description": "Approves alone up to $1,000.", "criteria": { "streak": 15, "days": 30, "maxReverted": 0 } },
            { "id": "senior", "label": "Approve up to $10,000", "description": "Approves alone up to $10,000.", "criteria": { "streak": 40, "days": 90, "approvalRate": 0.97, "maxReverted": 0 } }
          ],
          "capabilities": [
            { "id": "expenses", "label": "Expense reports", "owner": "Tomás Rivera", "level": "co", "since": "-41d",
              "evidence": [
                { "at": "-4h", "title": "Expense report · Lisbon offsite · $812.40", "outcome": "approved", "by": "Tomás Rivera" },
                { "at": "-1d", "title": "Expense report · Client dinner · $236.00", "outcome": "approved", "by": "Tomás Rivera" },
                { "at": "-3d", "title": "Expense report · Conference pass · $699.00", "outcome": "approved", "by": "Grace Liu" },
                { "at": "-5d", "title": "Expense report · Taxi receipts · $84.10", "outcome": "approved", "by": "Grace Liu" },
                { "at": "-7d", "title": "Expense report · Laptop stand · $59.99", "outcome": "approved", "by": "Tomás Rivera" },
                { "at": "-9d", "title": "Expense report · Team lunch · $148.25", "outcome": "approved", "by": "Grace Liu" },
                { "at": "-12d", "title": "Expense report · Train to Lyon · $118.00", "outcome": "approved", "by": "Tomás Rivera" },
                { "at": "-14d", "title": "Expense report · Coworking day pass · $35.00", "outcome": "approved", "by": "Grace Liu" },
                { "at": "-17d", "title": "Expense report · Hotel, Berlin · $412.80", "outcome": "approved", "by": "Tomás Rivera" },
                { "at": "-19d", "title": "Expense report · Software license · $240.00", "outcome": "approved", "by": "Grace Liu" },
                { "at": "-22d", "title": "Expense report · Parking · $27.50", "outcome": "approved", "by": "Tomás Rivera" },
                { "at": "-25d", "title": "Expense report · Flight to Toronto · $684.20", "outcome": "approved", "by": "Tomás Rivera" },
                { "at": "-28d", "title": "Expense report · Printer ink · $46.99", "outcome": "approved", "by": "Grace Liu" },
                { "at": "-31d", "title": "Expense report · Client gift · $75.00", "outcome": "approved", "by": "Tomás Rivera" },
                { "at": "-34d", "title": "Expense report · Mileage · $92.40", "outcome": "approved", "by": "Grace Liu" },
                { "at": "-38d", "title": "Expense report · Headset · $129.00", "outcome": "approved", "by": "Tomás Rivera" }
              ] },
            { "id": "invoices", "label": "Vendor invoices", "owner": "Tomás Rivera", "level": "co", "since": "-12d",
              "evidence": [
                { "at": "-1d", "title": "Invoice INV-7731 · Cloud hosting · $940.00", "outcome": "approved", "by": "Grace Liu" },
                { "at": "-3d", "title": "Invoice INV-7702 · Cleaning services · $610.00", "outcome": "edited", "by": "Tomás Rivera", "note": "Wrong cost center" },
                { "at": "-6d", "title": "Invoice INV-7688 · Office supplies · $182.35", "outcome": "approved", "by": "Grace Liu" },
                { "at": "-9d", "title": "Invoice INV-7654 · Translation · $420.00", "outcome": "approved", "by": "Tomás Rivera" }
              ] },
            { "id": "travel", "label": "Travel requests", "owner": "Tomás Rivera", "level": "shadow", "since": "-6d",
              "evidence": [
                { "at": "-2d", "title": "Travel · Madrid, 3 nights", "outcome": "approved", "by": "Grace Liu" }
              ] }
          ]
        }</script>
      </mv-trust-ladder>
      <p>Compact view: the same ladder for a new team member’s approval rights. Open a row for details.</p>
    </div>
  </div>

  <script type="module">
    const el = document.getElementById("tl-main");
    const $ = (id) => document.getElementById(id);
    const log = $("tl-log");
    const H = 36e5, D = 864e5;
    const reviewers = ["Daniel Kim", "Sofia Rossi", "Kenji Watanabe", "Lucas Moreau"];
    const reasons = ["damaged in transit", "late delivery", "wrong size", "duplicate charge", "missing item", "not as described"];
    let order = 48213;
    const amount = (i) => ((i * 37) % 180 + 12 + ((i * 13) % 100) / 100).toFixed(2);
    const refund = (i, at, outcome, extra = {}) => ({
      at, outcome, by: reviewers[i % reviewers.length],
      title: `Refund $${amount(i)} · Order #${order - i * 7} · ${reasons[i % reasons.length]}`, ...extra,
    });
    const kept = (label, i, at, extra = {}) => ({ at, outcome: "kept", title: label(i), ...extra });

    const replyLevels = [
      { id: "suggest", label: "Suggest only", description: "Drafts a reply for an agent to send." },
      { id: "approve", label: "Act with approval", description: "Sends once an agent approves each reply.", criteria: { streak: 10, maxReverted: 0 } },
      { id: "report", label: "Act and report", description: "Sends on its own and logs every reply for review.", criteria: { streak: 20, days: 14, maxReverted: 0 } },
      { id: "silent", label: "Act silently", description: "Sends on its own. Weekly spot checks.", criteria: { streak: 50, days: 30, maxReverted: 0 } },
    ];

    const initial = () => {
      const now = Date.now();
      // Refunds: 14 approved in a row since an edit, 9 days at "Act with approval".
      const refunds = [];
      for (let i = 0; i < 14; i++) refunds.push(refund(i, now - (3 + i * 14) * H, "approved"));
      refunds.push(refund(14, now - 8 * D, "edited", { note: "Amount lowered to $32.00: shipping isn’t refundable" }));
      refunds.push(refund(15, now - 8.6 * D, "approved"));
      for (let i = 16; i < 26; i++) refunds.push(refund(i, now - (10 + (i - 16)) * D, "approved"));
      const replies = [];
      const ticket = (i) => `Reply to ticket #${91540 - i * 3} · ${["order status", "return label", "password reset", "invoice copy", "delivery window"][i % 5]}`;
      for (let i = 0; i < 52; i++) replies.push(kept(ticket, i, now - (2 + i * 13) * H));
      const routes = [];
      const route = (i) => `Tag and route ticket #${91602 - i * 2} → ${["Billing", "Shipping", "Returns", "Accounts"][i % 4]}`;
      for (let i = 0; i < 24; i++) routes.push(kept(route, i, now - (1 + i * 6) * H));
      const credits = [];
      const credit = (i) => `Store credit $${(15 + (i * 11) % 60).toFixed(2)} · Account #${20931 + i * 17}`;
      credits.push({ at: now - 20 * H, outcome: "reverted", title: "Store credit $120.00 · Account #20931", by: "Lucas Moreau", note: "Duplicate: the customer was already credited by phone" });
      for (let i = 1; i < 10; i++) credits.push(kept(credit, i, now - (1 + i) * D));
      return [
        {
          id: "refunds", label: "Refund customers", owner: "Priya Nair", level: "approve", since: now - 9 * D, open: true, evidence: refunds,
          levels: [
            { id: "suggest", label: "Suggest only", description: "Drafts the refund. An agent issues it." },
            { id: "approve", label: "Act with approval", description: "Issues a refund once an agent approves it.", criteria: { streak: 10, maxReverted: 0 } },
            { id: "report", label: "Act and report", description: "Issues refunds under $200 and posts each one for review.", criteria: { streak: 20, days: 14, maxReverted: 0 } },
            { id: "silent", label: "Act silently under $50", description: "Issues small refunds without a report. Weekly spot checks.", criteria: { streak: 50, days: 30, approvalRate: 0.98, maxReverted: 0 } },
          ],
        },
        { id: "replies", label: "Reply to customers", owner: "Priya Nair", level: "report", since: now - 32 * D, levels: replyLevels, evidence: replies },
        { id: "routing", label: "Tag and route tickets", owner: "Amara Okafor", level: "silent", since: now - 61 * D, levels: replyLevels, evidence: routes },
        { id: "credit", label: "Issue store credit", owner: "Priya Nair", level: "report", since: now - 12 * D, levels: replyLevels, evidence: credits },
      ];
    };

    let n = 30;
    const reset = () => { n = 30; el.capabilities = initial(); log.textContent = "Add a few approved refunds, then promote."; };
    await customElements.whenDefined("mv-trust-ladder");
    reset();

    $("tl-approve").addEventListener("click", () => el.record("refunds", refund(n++, Date.now(), "approved")));
    $("tl-edit").addEventListener("click", () => el.record("refunds", refund(n++, Date.now(), "edited", { note: "Agent changed the amount before approving" })));
    $("tl-revert").addEventListener("click", () => el.record("refunds", refund(n++, Date.now(), "reverted", { note: "The card issuer had already refunded the customer" })));
    $("tl-week").addEventListener("click", () => {
      const caps = el.capabilities;
      for (const c of caps) {
        if (c.since) c.since -= 7 * D;
        if (c.resetAt) c.resetAt -= 7 * D;
        for (const e of c.evidence) e.at -= 7 * D;
      }
      el.capabilities = caps;
      log.textContent = "A week went by: every “days at this level” count moved forward.";
    });
    $("tl-reset").addEventListener("click", reset);
    $("tl-owner").addEventListener("change", (e) => { el.user = e.target.checked ? "Priya Nair" : "Daniel Kim"; });

    const save = (e, verb) => {
      const fail = $("tl-fail").checked;
      // Your server applies the new level here; a rejection changes nothing.
      e.detail.waitUntil(new Promise((ok, ko) => setTimeout(() => (fail ? ko(new Error("403")) : ok()), 650)));
      log.textContent = `mv-${verb} · ${e.detail.label}: ${e.detail.fromLabel} → ${e.detail.toLabel} · reason: ${e.detail.reason}${e.detail.early ? " · early" : ""}${fail ? " · server rejects…" : ""}`;
      if (fail) $("tl-fail").checked = false;
    };
    el.addEventListener("mv-promote", (e) => save(e, "promote"));
    el.addEventListener("mv-demote", (e) => save(e, "demote"));
    el.addEventListener("mv-demote-dismiss", (e) => { log.textContent = `mv-demote-dismiss · ${e.detail.capability}: level kept, count restarted`; });
    el.addEventListener("mv-trust-evidence", (e) => {
      const { entry, status, progress } = e.detail;
      const streak = progress.criteria.find((c) => c.key === "streak");
      log.textContent = `mv-trust-evidence · ${entry.outcome} · status: ${status}${streak ? ` · streak ${streak.value}/${streak.target}` : ""}`;
    });
    el.addEventListener("mv-trust-error", () => { log.textContent = "mv-trust-error · the server refused: nothing changed."; });
  </script>
</div>