dkimkit 0.6.1 → 0.7.0

package/web/dashboard.html

@@ -31,9 +31,15 @@
   header { background: var(--surface); border-bottom: 1px solid var(--border); }
   .bar { max-width: 960px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
   .mark { width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex: none; }
+  .hist { display: flex; gap: 4px; margin-right: 4px; }
+  .hist button { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; }
+  .hist button:hover:not(:disabled) { background: var(--surface-2); }
+  .hist button:disabled { opacity: .4; cursor: default; }
   .bar h1 { font-size: 15px; margin: 0; font-weight: 600; }
   .bar .who { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--muted); min-width: 0; }
   .bar .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .bar .who a { color: var(--muted); text-decoration: none; }
+  .bar .who a:hover { color: var(--text); }
   main { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 16px; }
   .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
   .card > h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 14px; font-weight: 600; }
@@ -78,6 +84,26 @@
   pre { margin: 0; font-family: var(--mono); font-size: 12.5px; background: var(--surface-2); border-radius: 8px; padding: 12px; overflow-x: auto; }
   .secret { display: flex; gap: 8px; align-items: center; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
   .secret code { flex: 1; overflow-wrap: anywhere; }
+  .badge.ok { background: var(--ok-soft); color: var(--ok); }
+  .badge.warn { background: var(--warn-soft); color: var(--warn); }
+  .check { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 500; }
+  .check input { width: auto; }
+  details.opt > summary { cursor: pointer; font-size: 14px; font-weight: 500; }
+  details.opt[open] > summary { margin-bottom: 12px; }
+  .group { display: grid; gap: 8px; }
+  .group h3 { margin: 6px 0 0; font-size: 14px; font-weight: 600; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
+  .dom { border: 1px solid var(--border); border-radius: 8px; }
+  .dom > summary { list-style: none; cursor: pointer; padding: 10px 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+  .dom > summary::-webkit-details-marker { display: none; }
+  .dom > summary b { font-weight: 600; overflow-wrap: anywhere; }
+  .dom > summary .muted { margin-left: auto; font-size: 13px; }
+  .dom .body { border-top: 1px solid var(--border); padding: 12px; display: grid; gap: 12px; }
+  .records { width: 100%; border-collapse: collapse; font-size: 13px; }
+  .records th { text-align: left; font-weight: 500; color: var(--muted); padding: 4px 8px 6px 0; }
+  .records td { padding: 6px 8px 6px 0; border-top: 1px solid var(--border); vertical-align: top; }
+  .records td.v { font-family: var(--mono); overflow-wrap: anywhere; }
+  .records button.copy { font: inherit; font-size: 12px; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; margin-left: 6px; }
+  @media (max-width: 720px) { .records .opt-col { display: none; } }
   .signin { max-width: 420px; margin: 8vh auto 0; }
   .signin h2 { font-size: 24px; margin: 0 0 4px; text-transform: none; letter-spacing: 0; color: var(--text); }
   [hidden] { display: none !important; }
@@ -86,12 +112,16 @@
 <body>
 <header>
   <div class="bar">
+    <div class="hist" id="hist" hidden>
+      <button type="button" id="histBack" aria-label="Back" title="Back"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></button>
+      <button type="button" id="histForward" aria-label="Forward" title="Forward"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg></button>
+    </div>
     <div class="mark" aria-hidden="true"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg></div>
     <a href="/" style="display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none"><h1>__APP_NAME__</h1></a>
-    <div class="who" id="who" hidden><span id="whoEmail"></span><button class="link" id="signOut" type="button">Sign out</button></div>
+    <div class="who" id="who" hidden><span id="whoEmail"></span><a href="/feedback" id="feedback" hidden>Feedback</a><button class="link" id="signOut" type="button">Sign out</button></div>
   </div>
 </header>
-<main id="app" aria-live="polite"></main>
+<main id="app" aria-live="polite" data-free-domains="__FREE_DOMAINS__"></main>
 
 <script nonce="__NONCE__">
 (() => {
@@ -99,6 +129,24 @@
   const params = new URLSearchParams(location.search);
   let me = null;
 
+  // Back and Forward, disabled where the browser says there's nowhere to go.
+  {
+    const back = document.getElementById('histBack');
+    const forward = document.getElementById('histForward');
+    back.addEventListener('click', () => history.back());
+    forward.addEventListener('click', () => history.forward());
+    const nav = window.navigation;
+    const update = () => {
+      if (!nav || !('canGoBack' in nav)) return;
+      back.disabled = !nav.canGoBack;
+      forward.disabled = !nav.canGoForward;
+    };
+    update();
+    if (nav) nav.addEventListener('currententrychange', update);
+    addEventListener('pageshow', update);
+    document.getElementById('hist').hidden = false;
+  }
+
   function h(tag, attrs, ...children) {
     const el = document.createElement(tag);
     for (const [k, v] of Object.entries(attrs || {})) {
@@ -147,8 +195,8 @@
   // ---- signed out ----
   function renderSignIn(sent) {
     document.getElementById('who').hidden = true;
-    const email = h('input', { type: 'email', id: 'email', autocomplete: 'email', required: true, placeholder: 'you@company.com' });
-    const name = h('input', { type: 'text', id: 'name', autocomplete: 'organization', placeholder: 'Acme Inc. (optional)' });
+    const email = h('input', { type: 'email', id: 'email', autocomplete: 'email', required: true, placeholder: 'you@example.com' });
+    const name = h('input', { type: 'text', id: 'name', autocomplete: 'organization', placeholder: 'Acme Inc. or your name (optional)' });
     const error = h('div', { class: 'banner bad', role: 'alert', hidden: true });
     const submit = h('button', { class: 'btn primary', type: 'submit' }, 'Continue with email');
     const form = h('form', { class: 'grid', onsubmit: async (e) => {
@@ -164,11 +212,16 @@
         }
       });
     } },
-      h('label', { class: 'field' }, 'Work email', email),
-      h('label', { class: 'field' }, h('span', {}, 'Company or project name ', h('span', { class: 'hint' }, '(for new accounts)')), name),
+      h('label', { class: 'field' }, 'Email', email),
+      h('label', { class: 'field' }, h('span', {}, 'Your name, company or project ', h('span', { class: 'hint' }, '(for new accounts)')), name),
       error, submit,
       h('p', { class: 'small muted' }, 'No password needed. We email you a sign-in link. New here? The same link creates your account.'));
 
+    // Set by the server from the plan; empty when there's no free-plan limit.
+    const free = Number(app.dataset.freeDomains) || 0;
+    const intro = free
+      ? `Authenticate up to ${free} sending domain${free === 1 ? '' : 's'} for free. No credit card required.`
+      : 'Authenticate your sending domains. No credit card required.';
     app.replaceChildren(h('div', { class: 'signin card grid' },
       params.get('link') === 'expired' ? h('div', { class: 'banner warn' }, 'That sign-in link expired or was already used. Request a new one below.') : null,
       sent
@@ -177,7 +230,7 @@
             h('p', { class: 'muted' }, `We sent a sign-in link to ${sent}. It works once and expires in 15 minutes.`),
             h('button', { class: 'link', type: 'button', onclick: () => renderSignIn() }, 'Use a different email'))
         : h('div', { class: 'grid' },
-            h('div', {}, h('h2', {}, 'Start free'), h('p', { class: 'muted', style: 'margin:0' }, 'Authenticate up to 3 sending domains for free. No credit card required.')),
+            h('div', {}, h('h2', {}, 'Start free'), h('p', { class: 'muted', style: 'margin:0' }, intro)),
             form)));
     if (!sent) email.focus();
   }
@@ -185,6 +238,18 @@
   // ---- signed in ----
   function planCard() {
     const b = me.billing;
+    if (!me.billing_enabled && me.free_plan) {
+      const limit = me.free_plan.free_domains;
+      const used = me.usage.current_domains;
+      const pct = Math.min(100, Math.round((used / limit) * 100));
+      return h('section', { class: 'card grid' },
+        h('div', { class: 'row', style: 'justify-content:space-between' }, h('h2', { style: 'margin:0' }, 'Plan'), h('span', { class: 'badge' }, 'Free')),
+        h('div', { class: 'row', style: 'justify-content:space-between' },
+          h('b', {}, `${used} of ${limit} free domains used`),
+          used >= limit ? h('span', { class: 'small', style: 'color:var(--warn)' }, 'Limit reached') : null),
+        h('div', { class: used >= limit ? 'meter full' : 'meter', role: 'progressbar', 'aria-valuemin': 0, 'aria-valuemax': limit, 'aria-valuenow': used }, h('div', { style: `width:${pct}%` })),
+        h('p', { class: 'small muted', style: 'margin:0' }, 'Paid plans with unlimited domains are coming soon. ', h('a', { href: '/pricing' }, 'See pricing')));
+    }
     if (!me.billing_enabled) {
       return h('section', { class: 'card grid' }, h('h2', {}, 'Plan'), h('p', { class: 'muted' }, 'Billing is not enabled on this server.'));
     }
@@ -316,6 +381,215 @@
   }
 
 
+  // ---- domains ----
+  const STATUS_LABELS = {
+    pending: ['Setting up', 'badge'], awaiting_dns: ['Waiting for DNS', 'badge warn'], verifying: ['Verifying', 'badge paid'],
+    verified: ['Verified', 'badge ok'], conflict: ['Conflict', 'badge bad'], failed: ['Failed', 'badge bad'],
+  };
+  const domainsBox = h('div', { class: 'grid' });
+  const openDomains = new Set();
+  let domains = null;
+  let refreshTimer = null;
+
+  /** The record name as most DNS hosts want it: relative to the domain, "@" for the domain itself. */
+  const hostPart = (name, domain) => (name === domain ? '@' : name.endsWith('.' + domain) ? name.slice(0, -domain.length - 1) : name);
+
+  function download(filename, text, type) {
+    const a = h('a', { href: URL.createObjectURL(new Blob([text], { type })), download: filename });
+    document.body.append(a);
+    a.click();
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+  }
+
+  /** BIND zone file lines with absolute names, which Cloudflare, GoDaddy and most DNS hosts can import. */
+  function zoneFile(list) {
+    const fqdn = (n) => (n.endsWith('.') ? n : n + '.');
+    const txt = (v) => (v.match(/.{1,255}/g) || ['']).map((c) => `"${c.replace(/(["\\])/g, '\\$1')}"`).join(' ');
+    const lines = [];
+    for (const d of list) {
+      lines.push(`; ${d.domain}`);
+      for (const r of d.records) {
+        const value = r.type === 'TXT' ? txt(r.value) : r.type === 'MX' ? `${r.priority ?? 10} ${fqdn(r.value)}` : fqdn(r.value);
+        lines.push(`${fqdn(r.name)}\t3600\tIN\t${r.type}\t${value}`);
+      }
+      lines.push('');
+    }
+    return lines.join('\n');
+  }
+
+  function csv(list) {
+    const cell = (v) => (/[",\n]/.test(String(v)) ? `"${String(v).replace(/"/g, '""')}"` : String(v));
+    const rows = [['domain', 'dns_host', 'type', 'host', 'name', 'value', 'priority', 'status']];
+    for (const d of list) {
+      for (const r of d.records) rows.push([d.domain, d.dns_host?.name || '', r.type, hostPart(r.name, d.domain), r.name, r.value, r.priority ?? '', r.status]);
+    }
+    return rows.map((r) => r.map(cell).join(',')).join('\n') + '\n';
+  }
+
+  const needsRecords = (d) => d.dns.provider === 'manual' && ['pending', 'awaiting_dns', 'conflict'].includes(d.status);
+
+  function domainRow(d) {
+    const [label, cls] = STATUS_LABELS[d.status] || [d.status, 'badge'];
+    const copy = (text) => h('button', { class: 'copy', type: 'button', onclick: async (e) => {
+      try { await navigator.clipboard.writeText(text); e.target.textContent = 'Copied'; } catch { e.target.textContent = 'Failed'; }
+      setTimeout(() => (e.target.textContent = 'Copy'), 1200);
+    } }, 'Copy');
+    const records = h('table', { class: 'records' },
+      h('thead', {}, h('tr', {}, h('th', {}, 'Type'), h('th', {}, 'Host'), h('th', {}, 'Value'), h('th', { class: 'opt-col' }, 'Priority'), h('th', { class: 'opt-col' }, 'Status'))),
+      h('tbody', {}, d.records.map((r) => h('tr', {},
+        h('td', {}, r.type),
+        h('td', { class: 'v', title: r.name }, hostPart(r.name, d.domain), copy(hostPart(r.name, d.domain))),
+        h('td', { class: 'v' }, r.value, copy(r.value)),
+        h('td', { class: 'opt-col' }, r.priority ?? ''),
+        h('td', { class: 'opt-col' }, r.status)))));
+
+    const check = h('button', { class: 'btn', type: 'button', onclick: () => busy(check, 'Checking…', async () => {
+      try { await api('POST', `/dashboard/api/domains/${d.id}/verify`); setTimeout(loadDomains, 4000); } catch (err) { alert(err.message); }
+    }) }, 'Check now');
+    const remove = h('button', { class: 'link', type: 'button', onclick: async () => {
+      if (!confirm(`Remove ${d.domain}? This also removes it${d.inbound ? ' and its inbound parse' : ''} from your email provider. Your DNS records are left as they are.`)) return;
+      try { await api('DELETE', `/dashboard/api/domains/${d.id}`); openDomains.delete(d.id); await loadDomains(); } catch (err) { alert(err.message); }
+    } }, 'Remove');
+
+    const notes = [];
+    if (d.status === 'verified') notes.push(h('div', { class: 'banner ok' }, `Sender authentication is verified${d.inbound ? ` and email to ${d.inbound.hostname} is forwarded to ${d.inbound.url}` : ''}.`));
+    else if (d.dns.provider !== 'manual') notes.push(h('p', { class: 'small muted', style: 'margin:0' }, `Records are written to ${d.dns_host?.name || d.dns.provider} for you. Nothing to do.`));
+    else if (needsRecords(d)) notes.push(h('p', { class: 'small muted', style: 'margin:0' }, `Add these records at ${d.dns_host?.name || 'your DNS host'}. We check automatically and verify the domain as soon as they're live.`));
+    if (d.inbound && d.status !== 'verified') notes.push(h('p', { class: 'small muted', style: 'margin:0' }, `Inbound parse for ${d.inbound.hostname} is set up once the domain is verified.`));
+    if (d.last_error) notes.push(h('div', { class: d.status === 'failed' || d.status === 'conflict' ? 'banner bad' : 'banner warn' }, d.last_error));
+    if (d.conflicts?.length) notes.push(h('div', { class: 'banner bad' }, d.conflicts.map((c) => h('div', {}, `${c.type} ${c.name} already exists with another value${c.reason ? `: ${c.reason}` : ''}. Replace it with the value above.`))));
+
+    const el = h('details', { class: 'dom', open: openDomains.has(d.id), ontoggle: () => (el.open ? openDomains.add(d.id) : openDomains.delete(d.id)) },
+      h('summary', {}, h('b', {}, d.domain), h('span', { class: cls }, label), d.inbound ? h('span', { class: 'badge' }, 'Inbound') : null, h('span', { class: 'muted' }, d.dns_host?.name || '')),
+      h('div', { class: 'body' }, ...notes, records,
+        h('div', { class: 'row' }, d.status === 'verified' ? null : check,
+          h('button', { class: 'btn', type: 'button', onclick: () => download(`${d.domain}.zone.txt`, zoneFile([d]), 'text/plain') }, 'Zone file'),
+          h('span', { style: 'margin-left:auto' }, remove))));
+    return el;
+  }
+
+  function addForm() {
+    const ready = me.account.email_credentials_set;
+    const text = h('textarea', { rows: 6, placeholder: 'example.com\nexample.net\nexample.org', spellcheck: 'false', 'aria-label': 'Domains, one per line' });
+    const count = h('span', { class: 'small muted' });
+    const countDomains = () => text.value.split(/[\s,;]+/).filter(Boolean).length;
+    const submit = h('button', { class: 'btn primary', type: 'submit', disabled: !ready }, 'Add domains');
+    text.addEventListener('input', () => {
+      const n = countDomains();
+      count.textContent = n ? `${n} domain${n === 1 ? '' : 's'}` : '';
+      submit.textContent = n ? `Add ${n} domain${n === 1 ? '' : 's'}` : 'Add domains';
+    });
+
+    const inboundOn = h('input', { type: 'checkbox' });
+    const inboundUrl = h('input', { type: 'url', placeholder: 'https://api.yourapp.com/inbound-email' });
+    const prefix = h('input', { type: 'text', placeholder: me.account.email_provider === 'mailgun' ? 'the domain itself' : 'parse', spellcheck: 'false' });
+    const inboundFields = h('div', { class: 'grid', hidden: true },
+      h('label', { class: 'field' }, h('span', {}, 'Webhook URL ', h('span', { class: 'hint' }, '(received email is posted here)')), inboundUrl),
+      h('label', { class: 'field' }, h('span', {}, 'Receiving subdomain ', h('span', { class: 'hint' }, '(gets the MX record, e.g. parse.example.com; leave blank for the default)')), prefix));
+    inboundOn.addEventListener('change', () => { inboundFields.hidden = !inboundOn.checked; if (inboundOn.checked) inboundUrl.focus(); });
+
+    const cf = h('input', { type: 'password', autocomplete: 'off', placeholder: 'Cloudflare API token (Zone → DNS → Edit)' });
+    const awsId = h('input', { type: 'text', autocomplete: 'off', spellcheck: 'false', placeholder: 'AWS access key ID' });
+    const awsSecret = h('input', { type: 'password', autocomplete: 'off', placeholder: 'AWS secret access key' });
+    const result = h('div', { class: 'grid' });
+
+    const form = h('form', { class: 'grid', onsubmit: async (e) => {
+      e.preventDefault();
+      result.replaceChildren();
+      const body = { domains: text.value };
+      if (inboundOn.checked) body.inbound = { url: inboundUrl.value.trim(), ...(prefix.value.trim() ? { hostname_prefix: prefix.value.trim() } : {}) };
+      if (cf.value.trim()) body.cloudflare_api_token = cf.value.trim();
+      if (awsId.value.trim() || awsSecret.value.trim()) Object.assign(body, { aws_access_key_id: awsId.value.trim(), aws_secret_access_key: awsSecret.value.trim() });
+      await busy(submit, `Adding ${countDomains()}…`, async () => {
+        try {
+          const { data } = await api('POST', '/dashboard/api/domains', body);
+          const ok = data.filter((r) => r.ok);
+          const failed = data.filter((r) => !r.ok);
+          const auto = ok.filter((r) => r.dns !== 'manual').length;
+          result.replaceChildren(
+            ok.length ? h('div', { class: 'banner ok' }, `Added ${ok.length} domain${ok.length === 1 ? '' : 's'}.`,
+              auto ? ` ${auto} will be set up automatically.` : '',
+              ok.length - auto ? ` ${ok.length - auto} need${ok.length - auto === 1 ? 's' : ''} DNS records added. They're listed below.` : '') : null,
+            failed.length ? h('div', { class: 'banner bad' }, h('b', {}, `${failed.length} couldn't be added:`),
+              h('ul', { style: 'margin:6px 0 0;padding-left:18px' }, failed.map((r) => h('li', {}, h('code', {}, r.domain), ` ${r.error.message}`)))) : null);
+          if (ok.length) {
+            text.value = failed.filter((r) => r.error.type !== 'conflict').map((r) => r.domain).join('\n');
+            text.dispatchEvent(new Event('input'));
+            ok.forEach((r) => r.dns === 'manual' && openDomains.add(r.id));
+          }
+          await loadDomains();
+        } catch (err) { result.replaceChildren(h('div', { class: 'banner bad' }, err.message)); }
+      });
+    } },
+      !ready ? h('div', { class: 'banner warn' }, 'Connect your email provider in Settings below before adding domains.') : null,
+      h('label', { class: 'field' }, h('span', {}, 'Domains ', h('span', { class: 'hint' }, '(one per line or comma separated, up to 100, from any registrar)')), text),
+      h('label', { class: 'check' }, inboundOn, 'Also receive email (inbound parse)'),
+      inboundFields,
+      h('details', { class: 'opt' }, h('summary', {}, 'Write DNS records automatically (optional)'),
+        h('div', { class: 'grid' },
+          h('p', { class: 'small muted', style: 'margin:0' }, 'For domains whose DNS is on Cloudflare or Amazon Route 53. They\'re stored encrypted, and used only to write these records. Domains on any other DNS host (GoDaddy, Namecheap, Hostinger…) get records to copy, or a zone file to import.'),
+          cf, h('div', { class: 'cols' }, awsId, awsSecret))),
+      h('div', { class: 'row' }, submit, count),
+      h('p', { class: 'small muted', style: 'margin:0' }, h('span', { class: 'badge' }, 'Coming soon'), ' Buy domains in bulk: register new sending domains here and have them authenticated automatically.'),
+      result);
+    return form;
+  }
+
+  function renderDomains() {
+    if (domains === null) return domainsBox.replaceChildren(h('p', { class: 'muted small', style: 'margin:0' }, 'Loading domains…'));
+    if (domains.length === 0) return domainsBox.replaceChildren(h('p', { class: 'muted small', style: 'margin:0' }, 'No domains yet. Paste your domains above to set up sender authentication and inbound email.'));
+
+    const parts = [];
+    const manual = domains.filter(needsRecords);
+    if (manual.length) {
+      const byHost = new Map();
+      for (const d of manual) {
+        const key = d.dns_host?.name || 'Unknown DNS host';
+        byHost.set(key, [...(byHost.get(key) || []), d]);
+      }
+      parts.push(h('div', { class: 'row', style: 'justify-content:space-between' },
+        h('b', {}, `${manual.length} domain${manual.length === 1 ? '' : 's'} need DNS records`),
+        h('div', { class: 'row' },
+          h('button', { class: 'btn', type: 'button', onclick: () => download('dns-records.csv', csv(manual), 'text/csv') }, 'CSV'),
+          h('button', { class: 'btn', type: 'button', onclick: () => download('dns-records.zone.txt', zoneFile(manual), 'text/plain') }, 'Zone file'))));
+      for (const [host, list] of byHost) {
+        parts.push(h('div', { class: 'group' },
+          h('h3', {}, host, h('span', { class: 'small muted', style: 'font-weight:400' }, `${list.length} domain${list.length === 1 ? '' : 's'}`),
+            h('button', { class: 'link', type: 'button', onclick: () => download(`${host.toLowerCase().replace(/\W+/g, '-')}-records.csv`, csv(list), 'text/csv') }, 'Download CSV')),
+          list.map(domainRow)));
+      }
+    }
+    const rest = domains.filter((d) => !needsRecords(d));
+    if (rest.length) {
+      const order = ['conflict', 'failed', 'pending', 'awaiting_dns', 'verifying', 'verified'];
+      rest.sort((a, b) => order.indexOf(a.status) - order.indexOf(b.status) || a.domain.localeCompare(b.domain));
+      const verified = rest.filter((d) => d.status === 'verified').length;
+      parts.push(h('div', { class: 'group' },
+        h('h3', {}, manual.length ? 'Other domains' : 'All domains', h('span', { class: 'small muted', style: 'font-weight:400' }, `${verified} of ${rest.length} verified`)),
+        rest.map(domainRow)));
+    }
+    domainsBox.replaceChildren(...parts);
+  }
+
+  async function loadDomains() {
+    clearTimeout(refreshTimer);
+    try {
+      domains = (await api('GET', '/dashboard/api/domains')).data;
+      renderDomains();
+    } catch (err) {
+      if (domains === null) domainsBox.replaceChildren(h('div', { class: 'banner bad' }, err.message));
+    }
+    // Keep statuses fresh while anything is still in progress.
+    if (domains?.some((d) => !['verified', 'failed'].includes(d.status))) {
+      refreshTimer = setTimeout(() => (document.hidden ? (refreshTimer = setTimeout(loadDomains, 5000)) : loadDomains()), 20000);
+    }
+  }
+
+  function domainsCard() {
+    return h('section', { class: 'card grid' }, h('h2', {}, 'Domains'), addForm(), domainsBox);
+  }
+
   function usageCard() {
     const u = me.usage;
     const stat = (n, label) => h('div', { class: 'stat' }, h('b', {}, String(n)), h('span', { class: 'small muted' }, label));
@@ -343,6 +617,7 @@
   function render(flags = {}) {
     document.getElementById('who').hidden = false;
     document.getElementById('whoEmail').textContent = me.email || me.account.name;
+    document.getElementById('feedback').hidden = !me.feedback_enabled;
     const banners = [];
     if (params.get('welcome')) banners.push(h('div', { class: 'banner ok' }, 'Your account is ready. Connect your email provider in Settings and create an API key to get started.'));
     if (params.get('billing') === 'return') {
@@ -355,7 +630,9 @@
     }
     if (params.get('billing') === 'canceled') banners.push(h('div', { class: 'banner warn' }, 'Checkout canceled. Nothing was charged.'));
     if (flags.saved) banners.push(h('div', { class: 'banner ok' }, 'Settings saved.'));
-    app.replaceChildren(...banners, planCard(), ...[pricingCard(), usageCard(), apiKeyCard(), settingsCard(), quickstartCard()].filter(Boolean));
+    app.replaceChildren(...banners, domainsCard(), planCard(), ...[pricingCard(), usageCard(), apiKeyCard(), settingsCard(), quickstartCard()].filter(Boolean));
+    renderDomains();
+    if (domains === null) loadDomains();
   }
 
   async function load() {
@@ -380,6 +657,8 @@
   document.getElementById('signOut').addEventListener('click', async () => {
     await api('POST', '/dashboard/api/logout').catch(() => {});
     me = null;
+    domains = null;
+    clearTimeout(refreshTimer);
     history.replaceState(null, '', '/dashboard');
     renderSignIn();
   });