Agent review UI

An agent-generated approval form that posts structured data back to the host page.

<script>
  let records = $state([
    { id: 'old', name: 'old.example.com', type: 'A', value: '192.0.2.1', selected: true },
    { id: 'test', name: 'test.example.com', type: 'CNAME', value: 'workers.dev', selected: true },
    { id: 'stage', name: 'staging.example.com', type: 'A', value: '192.0.2.2', selected: false }
  ]);
  let selected = $derived(records.filter((record) => record.selected));

  function submit() {
    parent.postMessage({
      type: 'svelte-edge:submit',
      value: { selectedRecords: selected.map((record) => record.id) }
    }, '*');
  }
</script>

<section>
  <h2>Review DNS cleanup</h2>
  <p>{selected.length} records selected</p>
  {#each records as record}
    <label class="row">
      <input type="checkbox" bind:checked={record.selected} />
      <span><strong>{record.name}</strong><small>{record.type} → {record.value}</small></span>
    </label>
  {/each}
  <button disabled={selected.length === 0} onclick={submit}>Continue with {selected.length} records</button>
</section>

<style>
  section{font:15px system-ui;max-width:560px;padding:24px;border-radius:24px;background:#fff;border:1px solid #e5e0d8}.row{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid #eee}small{display:block;color:#777}button{margin-top:18px;width:100%;border:0;border-radius:14px;padding:12px;background:#ff5a1f;color:white;font-weight:800}button:disabled{background:#ddd}
</style>