Approval before agent action

HTML

<section class="card"><span class="eyebrow">APPROVAL REQUIRED</span><h2>Update 24 customer records?</h2><p>The agent matched duplicate organisation names and proposes merging their contact details.</p><dl><div><dt>Scope</dt><dd>24 records · 3 organisations</dd></div><div><dt>Reversible</dt><dd class="yes">Yes, for 30 days</dd></div><div><dt>Evidence</dt><dd>24 exact registration matches</dd></div></dl><div class="actions"><button id="reject">Keep unchanged</button><button class="primary" id="approve">Approve update</button></div><p id="status" role="status"></p></section>

CSS

*{box-sizing:border-box}body{margin:0;background:#fff;color:#151515;font:15px/1.45 Inter,system-ui,sans-serif}.card{width:calc(100% - 40px);max-width:680px;margin:20px auto;padding:24px;border:1px solid #deddd8;border-radius:16px;background:#fff}.eyebrow{font:600 11px ui-monospace,monospace;letter-spacing:.12em;color:#666}h2{font-size:21px;margin:6px 0 8px}p{color:#626262}button{border:1px solid #c9c8c3;background:#fff;border-radius:9px;padding:9px 13px;font-weight:650;cursor:pointer}.primary{background:#151515;color:#fff;border-color:#151515}dl{margin:20px 0;border:1px solid #e2e1dc;border-radius:12px;overflow:hidden}dl div{display:flex;justify-content:space-between;padding:11px 13px;border-bottom:1px solid #eee}dl div:last-child{border:0}dt{color:#777}dd{margin:0;font-weight:650}.yes{color:#128a4d}.actions{display:flex;justify-content:flex-end;gap:9px}#status{min-height:22px;color:#128a4d;font-weight:650}

JavaScript

approve.onclick=()=>{status.textContent="Approved. Update queued with an audit record."};reject.onclick=()=>{status.textContent="No changes made. The proposal was dismissed."}