@acms-subir/core 0.2.0 → 0.3.0

package/src/components/EmailSettings.tsx

@@ -0,0 +1,521 @@
+import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
+import type { Credentials, EmailConfig, PublicEmailSettings } from '../lib/email/types';
+import '../styles/email-settings.css';
+
+// Settings → Email: Setup, Notifications, Templates, Activity over /api/email/settings.
+// Secrets are write-only: inputs start empty, blank keeps the saved value, and a
+// successful save wipes password and secret fields. Nothing goes to browser
+// storage, nothing polls, and no email is sent unless the owner types an address.
+
+type Choice = EmailConfig['provider'];
+type Job = PublicEmailSettings['activity'][number];
+type Tab = 'setup' | 'notifications' | 'templates' | 'activity';
+type Busy = 'save' | 'notify' | 'test' | 'refresh' | 'retry';
+interface Msg { ok: string; err: string }
+const NO_MSG: Msg = { ok: '', err: '' };
+const ENDPOINT = '/api/email/settings';
+
+const TABS: { id: Tab; label: string }[] = [
+  { id: 'setup', label: 'Setup' }, { id: 'notifications', label: 'Notifications' },
+  { id: 'templates', label: 'Templates' }, { id: 'activity', label: 'Activity' },
+];
+const PROVIDERS: { id: Choice; name: string; note: string }[] = [
+  { id: 'resend', name: 'Resend', note: 'API key and a verified sending domain' },
+  { id: 'mailgun', name: 'Mailgun', note: 'Domain-scoped key, US or EU region' },
+  { id: 'ses', name: 'Amazon SES', note: 'AWS keys, region and a verified identity' },
+  { id: 'cloudflare', name: 'Cloudflare', note: 'The Workers EMAIL binding' },
+  { id: 'auto', name: 'Automatic', note: 'EMAIL binding if present, else RESEND_API_KEY' },
+  { id: 'none', name: 'Off', note: 'Send no email' },
+];
+const NAME = Object.fromEntries(PROVIDERS.map((p) => [p.id, p.name])) as Record<Choice, string>;
+const CREDS: Record<Choice, { key: keyof Credentials; label: string; optional?: boolean }[]> = {
+  resend: [{ key: 'apiKey', label: 'API key' }, { key: 'webhookSecret', label: 'Webhook signing secret', optional: true }],
+  mailgun: [{ key: 'apiKey', label: 'Sending API key' }, { key: 'webhookSecret', label: 'Webhook signing key', optional: true }],
+  ses: [
+    { key: 'accessKeyId', label: 'AWS access key ID' }, { key: 'secretAccessKey', label: 'AWS secret access key' },
+    { key: 'sessionToken', label: 'Session token', optional: true },
+  ],
+  cloudflare: [], auto: [], none: [],
+};
+const ENV: Record<Choice, string[]> = {
+  resend: ['RESEND_API_KEY', 'RESEND_WEBHOOK_SECRET (optional)'],
+  mailgun: ['MAILGUN_API_KEY', 'MAILGUN_DOMAIN', 'MAILGUN_REGION (us or eu)', 'MAILGUN_WEBHOOK_SIGNING_KEY (optional)'],
+  ses: ['AWS_ACCESS_KEY_ID', 'AWS_SECRET_ACCESS_KEY', 'AWS_REGION', 'AWS_SESSION_TOKEN (optional)', 'SES_CONFIGURATION_SET (optional)', 'SES_SNS_TOPIC_ARN (optional)'],
+  cloudflare: ['EMAIL send_email binding in your Wrangler config'],
+  auto: ['EMAIL binding, or RESEND_API_KEY'],
+  none: [],
+};
+const VERIFY: Partial<Record<Choice, string>> = {
+  resend: 'Add and verify the sending domain under Resend → Domains, using the SPF and DKIM records Resend gives you.',
+  mailgun: 'Verify the sending domain in Mailgun → Sending → Domains, and pick the region that domain lives in.',
+  ses: 'Verify the sender identity in the SES console for this region, and request production access to leave the sandbox.',
+  cloudflare: 'Onboard the From domain for Cloudflare Email Sending (Workers Paid; outbound sending is in beta).',
+  auto: 'Verify the sender domain with whichever provider ends up sending.',
+};
+const STATE_NOTE: Record<string, string> = {
+  queued: 'Waiting for the runner', sending: 'Being handed to the provider',
+  retrying: 'Temporary failure; retries automatically', accepted: 'Accepted by the provider; delivery not confirmed',
+  delivered: 'Provider reported delivery', failed: 'Stopped retrying; safe to retry by hand',
+  unknown: 'Outcome unknown. Check the provider dashboard before sending again',
+  bounced: 'The recipient’s server rejected it', complained: 'The recipient marked it as spam',
+  suppressed: 'Address is suppressed; not sent', cancelled: 'Cancelled before sending',
+};
+const TONE: Record<string, string> = {
+  delivered: 'ok', accepted: 'info', sending: 'info', retrying: 'warn', unknown: 'warn',
+  failed: 'bad', bounced: 'bad', complained: 'bad',
+};
+
+async function api<T>(body?: unknown, signal?: AbortSignal): Promise<T> {
+  const res = await fetch(ENDPOINT, {
+    method: body === undefined ? 'GET' : 'POST', credentials: 'same-origin', signal, cache: 'no-store',
+    headers: body === undefined ? undefined : { 'content-type': 'application/json' },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+  const data = await res.json().catch(() => null);
+  if (!res.ok) throw new Error(data?.error || `${res.status} ${res.statusText || 'Request failed'}`);
+  if (!data) throw new Error('The server sent an empty response.');
+  return data as T;
+}
+const errText = (e: unknown) => (e instanceof Error ? e.message : String(e));
+const validAddress = (s: string) => s.length <= 254 && /^[^\s<>@,;]+@[^\s<>@,;]+\.[^\s<>@,;]+$/.test(s);
+// mirrors the server's parseFrom: `address` or `Name <address>`
+function validSender(raw: string) {
+  if (/[\r\n]/.test(raw)) return false;
+  const m = /^\s*(?:"?([^"<>]*?)"?\s*)?<([^<>]+)>\s*$/.exec(raw);
+  return validAddress((m ? m[2] : raw).trim());
+}
+const fmt = new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+const when = (ms: number | null) => (ms ? fmt.format(new Date(ms)) : '—');
+function ago(ms: number) {
+  const m = Math.round((Date.now() - ms) / 60000);
+  return m < 1 ? 'just now' : m < 60 ? `${m} min ago` : m < 1440 ? `${Math.round(m / 60)} h ago` : `${Math.round(m / 1440)} d ago`;
+}
+const kind = (k: string) => k.replace(/[._-]+/g, ' ');
+
+export default function EmailSettings() {
+  const uid = useId();
+  const id = (s: string) => `${uid}-${s}`;
+  const [data, setData] = useState<PublicEmailSettings | null>(null);
+  const [loadErr, setLoadErr] = useState('');
+  const [tab, setTab] = useState<Tab>('setup');
+  const [form, setForm] = useState<EmailConfig | null>(null);
+  const [creds, setCreds] = useState<Credentials>({});
+  const [setupPw, setSetupPw] = useState('');
+  const [notify, setNotify] = useState({ reminders: true, staff: true, pw: '' });
+  const [testTo, setTestTo] = useState('');
+  const [tested, setTested] = useState(false);
+  const [tpl, setTpl] = useState<keyof typeof SAMPLES>('invite');
+  const [plain, setPlain] = useState(false);
+  const [busy, setBusy] = useState<Busy | null>(null);
+  const busyRef = useRef<Busy | null>(null);
+  // one controller per mount; aborted on unmount so late responses are dropped
+  const ctl = useRef<AbortController | null>(null);
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const [setupMsg, setSetupMsg] = useState(NO_MSG);
+  const [notifyMsg, setNotifyMsg] = useState(NO_MSG);
+  const [testMsg, setTestMsg] = useState(NO_MSG);
+  const [actMsg, setActMsg] = useState(NO_MSG);
+
+  const live = (c = ctl.current) => !!c && !c.signal.aborted;
+
+  function adopt(s: PublicEmailSettings, part: 'all' | 'notify' = 'all') {
+    setData(s);
+    setNotify({ reminders: s.config.reminders, staff: s.config.staffNotifications, pw: '' });
+    if (part === 'all') { setForm({ ...s.config }); setCreds({}); setSetupPw(''); }
+    else setForm((f) => f && { ...f, reminders: s.config.reminders, staffNotifications: s.config.staffNotifications });
+  }
+
+  async function load() {
+    const c = ctl.current;
+    setLoadErr('');
+    try { const s = await api<PublicEmailSettings>(undefined, c?.signal); if (live(c)) adopt(s); }
+    catch (e) { if (live(c)) setLoadErr(errText(e)); }
+  }
+
+  useEffect(() => {
+    const c = new AbortController();
+    ctl.current = c;
+    void load();
+    return () => c.abort();
+  }, []);
+
+  async function run(k: Busy, fn: () => Promise<void>) {
+    if (busyRef.current) return;
+    busyRef.current = k; setBusy(k);
+    try { await fn(); } finally { busyRef.current = null; if (live()) setBusy(null); }
+  }
+
+  // re-read status and activity without touching unsaved form edits
+  async function refresh(setMsg: (m: Msg) => void) {
+    const c = ctl.current;
+    try { const s = await api<PublicEmailSettings>(undefined, c?.signal); if (live(c)) setData(s); }
+    catch (e) { if (live(c)) setMsg({ ok: '', err: `Couldn’t refresh: ${errText(e)}` }); }
+  }
+
+  if (!data || !form) {
+    return (
+      <div className="ems">
+        {loadErr ? (
+          <div className="flash error" role="alert">
+            Couldn’t load email settings: {loadErr}{' '}
+            <button type="button" className="btn sm" onClick={() => void load()}>Retry</button>
+          </div>
+        ) : (
+          <div className="ems-skel" role="status"><span className="sr-only">Loading email settings…</span><i /><i /><i /></div>
+        )}
+      </div>
+    );
+  }
+
+  const locked = data.environmentLocked;
+  const p = form.provider;
+  const takesCreds = p === 'resend' || p === 'mailgun' || p === 'ses';
+  const usesEnv = !takesCreds || form.source === 'env';
+  const saved = (k: string) => p === data.config.provider && data.credentialFields.includes(k);
+  const hbStale = !data.heartbeat || Date.now() - data.heartbeat > 15 * 60000;
+  const set = <K extends keyof EmailConfig>(k: K, v: EmailConfig[K]) => setForm((f) => f && { ...f, [k]: v });
+  const savedOff = data.config.provider === 'none' || !data.config.enabled;
+
+  function pickProvider(next: Choice) {
+    setCreds({});
+    setForm((f) => {
+      if (!f) return f;
+      const region = next === 'mailgun' ? (['us', 'eu'].includes(f.region) ? f.region : 'us')
+        : next === 'ses' && ['us', 'eu', ''].includes(f.region) ? 'us-east-1' : f.region;
+      return { ...f, provider: next, region, source: ['auto','none','cloudflare'].includes(next) ? 'env' : f.source };
+    });
+  }
+
+  async function saveSetup() {
+    setSetupMsg(NO_MSG);
+    const f = { ...form!, from: form!.from.trim(), replyTo: form!.replyTo.trim(), domain: form!.domain.trim(), region: form!.region.trim() };
+    const fail = (err: string) => setSetupMsg({ ok: '', err });
+    if (f.provider !== 'none' && !usesEnv && !f.from) return fail('Enter the sender address.');
+    if (f.from && !validSender(f.from)) return fail('Sender must be an address or Name <address>.');
+    if (f.replyTo && !validSender(f.replyTo)) return fail('Reply-to must be an address or Name <address>.');
+    if (f.provider === 'mailgun' && !usesEnv && !/^[a-z0-9.-]+$/i.test(f.domain)) return fail('Enter the Mailgun sending domain, like mg.example.com.');
+    if (!setupPw) return fail('Enter your current password to save.');
+    const credentials: Credentials = {};
+    if (!usesEnv) for (const c of CREDS[f.provider]) { const v = creds[c.key]?.trim(); if (v) credentials[c.key] = v; }
+    await run('save', async () => {
+      try {
+        const next = await api<PublicEmailSettings>({ action: 'save', config: f, credentials, reauthPassword: setupPw });
+        if (!live()) return;
+        adopt(next); setTested(false);
+        setSetupMsg({
+          ok: next.configured ? 'Saved. The configuration is valid; send a test to check the connection.' : `Saved, but email isn’t ready yet: ${next.error || 'no provider is configured.'}`,
+          err: '',
+        });
+      } catch (e) { if (live()) { setSetupPw(''); fail(errText(e)); } }
+    });
+  }
+
+  async function saveNotify() {
+    setNotifyMsg(NO_MSG);
+    if (!notify.pw) return setNotifyMsg({ ok: '', err: 'Enter your current password to save.' });
+    const config = { ...data!.config, reminders: notify.reminders, staffNotifications: notify.staff };
+    await run('notify', async () => {
+      try {
+        const next = await api<PublicEmailSettings>({ action: 'save', config, credentials: {}, reauthPassword: notify.pw });
+        if (live()) { adopt(next, 'notify'); setNotifyMsg({ ok: 'Notification settings saved.', err: '' }); }
+      } catch (e) { if (live()) { setNotify((n) => ({ ...n, pw: '' })); setNotifyMsg({ ok: '', err: errText(e) }); } }
+    });
+  }
+
+  async function sendTest() {
+    setTestMsg(NO_MSG);
+    const to = testTo.trim();
+    if (!validAddress(to)) return setTestMsg({ ok: '', err: 'Enter the address to send the test to.' });
+    await run('test', async () => {
+      try {
+        const r = await api<{ message: string }>({ action: 'test', to });
+        if (!live()) return;
+        setTested(true); setTestMsg({ ok: r.message, err: '' });
+        await refresh(setTestMsg);
+      } catch (e) { if (live()) setTestMsg({ ok: '', err: errText(e) }); }
+    });
+  }
+
+  async function retry(job: Job) {
+    if (job.state !== 'failed' || !confirm(`Retry the ${kind(job.kind)} email to ${job.recipient}?`)) return;
+    setActMsg(NO_MSG);
+    await run('retry', async () => {
+      try {
+        await api({ action: 'retry', id: job.id });
+        if (!live()) return;
+        setActMsg({ ok: `Queued the ${kind(job.kind)} email to ${job.recipient} for another attempt.`, err: '' });
+        await refresh(setActMsg);
+      } catch (e) { if (live()) setActMsg({ ok: '', err: errText(e) }); }
+    });
+  }
+
+  function onTabKey(e: KeyboardEvent, i: number) {
+    const n = TABS.length;
+    const j = e.key === 'ArrowRight' ? (i + 1) % n : e.key === 'ArrowLeft' ? (i - 1 + n) % n : e.key === 'Home' ? 0 : e.key === 'End' ? n - 1 : -1;
+    if (j < 0) return;
+    e.preventDefault(); setTab(TABS[j].id); tabRefs.current[j]?.focus();
+  }
+
+  const status = (m: Msg) => (
+    <>
+      <div className="ems-status" aria-live="polite">{m.ok && <p className="flash">{m.ok}</p>}</div>
+      <div className="ems-status" role="alert">{m.err && <p className="flash error">{m.err}</p>}</div>
+    </>
+  );
+  const pwField = (value: string, onChange: (v: string) => void, key: string) => (
+    <label className="field ems-pw">
+      <span>Your current password</span>
+      <input type="password" autoComplete="current-password" value={value} onChange={(e) => onChange(e.target.value)} aria-describedby={id(key)} />
+      <small className="hint" id={id(key)}>Owners confirm their password for every email settings change.</small>
+    </label>
+  );
+  const heartbeat = (
+    <p className={`ems-hb ${hbStale ? 'stale' : ''}`}>
+      {data.heartbeat ? <>Delivery runner last ran {ago(data.heartbeat)} ({when(data.heartbeat)}).</> : <>No delivery runner has checked in yet.</>}
+      {hbStale && ' Queued email waits until the scheduled runner (cron or Node runner) runs.'}
+    </p>
+  );
+
+  return (
+    <div className="ems">
+      <div className="seg ems-tabs" role="tablist" aria-label="Email settings">
+        {TABS.map((t, i) => (
+          <button key={t.id} ref={(el) => { tabRefs.current[i] = el; }} type="button" role="tab" id={id(`tab-${t.id}`)}
+            aria-selected={tab === t.id} aria-controls={id(`panel-${t.id}`)} tabIndex={tab === t.id ? 0 : -1}
+            onClick={() => setTab(t.id)} onKeyDown={(e) => onTabKey(e, i)}>{t.label}</button>
+        ))}
+      </div>
+
+      <section role="tabpanel" id={id('panel-setup')} aria-labelledby={id('tab-setup')} hidden={tab !== 'setup'} className="ems-panel">
+        <div className="ems-card">
+          <header className="ems-head">
+            <div><h2>Connection</h2><p>Where site email is sent from. Each part below is checked separately.</p></div>
+            <span className={`pill ${data.configured ? 'published' : savedOff ? 'archived' : 'draft'}`}>
+              {data.configured ? 'Configured' : savedOff ? 'Off' : 'Needs setup'}
+            </span>
+          </header>
+          <ul className="ems-check" aria-label="Setup status">
+            <li data-s={data.provider === 'none' ? 'todo' : 'ok'}><b>Provider</b><span>{data.provider === 'none' ? 'None active' : NAME[data.provider]}{data.config.provider === 'auto' && data.provider !== 'none' && ' (chosen automatically)'}</span></li>
+            <li data-s={data.configured ? 'ok' : 'bad'}><b>Configuration</b><span>{data.configured ? 'Complete' : data.error || 'Incomplete'}</span></li>
+            <li data-s="manual"><b>Sender verification</b><span>Done in the provider dashboard. ACMS can’t see it, so a valid configuration doesn’t mean the domain is verified.</span></li>
+            <li data-s={tested ? 'ok' : 'todo'}><b>Test email</b><span>{tested ? 'Accepted by the provider. Check the inbox to confirm delivery.' : 'Not sent in this session'}</span></li>
+          </ul>
+          {heartbeat}
+        </div>
+
+        <form className="ems-card" onSubmit={(e) => { e.preventDefault(); void saveSetup(); }} noValidate>
+          {locked && (
+            <div className="notice warn" role="note">
+              <b>Locked by the deployment.</b> EMAIL_PROVIDER is set, so the provider and credentials come from environment variables. Change or remove it there to manage them here.
+            </div>
+          )}
+          <label className="ems-toggle">
+            <input type="checkbox" checked={form.enabled} onChange={(e) => set('enabled', e.target.checked)} />
+            <span>Send email from this site</span>
+          </label>
+          <fieldset className="ems-grid" disabled={locked}>
+            <legend>Provider</legend>
+            {PROVIDERS.map((o) => (
+              <label key={o.id} className={`ems-opt ${p === o.id ? 'on' : ''}`}>
+                <input type="radio" name={id('provider')} checked={p === o.id} onChange={() => pickProvider(o.id)} />
+                <span><b>{o.name}</b><small>{o.note}</small></span>
+              </label>
+            ))}
+          </fieldset>
+
+          {takesCreds && (
+            <fieldset className="ems-grid two" disabled={locked}>
+              <legend>Credentials live in</legend>
+              <label className={`ems-opt ${form.source === 'env' ? 'on' : ''}`}>
+                <input type="radio" name={id('source')} checked={form.source === 'env'} onChange={() => set('source', 'env')} />
+                <span><b>Deployment environment</b><small>Set secrets in your host; ACMS never asks for them.</small></span>
+              </label>
+              <label className={`ems-opt ${form.source === 'encrypted' ? 'on' : ''}`}>
+                <input type="radio" name={id('source')} checked={form.source === 'encrypted'} disabled={!data.encryptionAvailable} onChange={() => set('source', 'encrypted')} />
+                <span><b>Encrypted in ACMS</b><small>{data.encryptionAvailable ? 'Enter keys here; they’re encrypted and never shown again.' : 'Needs a deployment EMAIL_ENCRYPTION_KEY (32-byte base64) first.'}</small></span>
+              </label>
+            </fieldset>
+          )}
+
+          {p !== 'none' && (
+            <div className="field-row">
+              <label className="field"><span>Sender</span>
+                <input type="text" value={form.from} onChange={(e) => set('from', e.target.value)} placeholder="Example Studio <hello@example.com>" autoComplete="off" spellCheck={false} aria-describedby={id('from-h')} />
+                <small className="hint" id={id('from-h')}>An address or Name &lt;address&gt; on a verified domain.{usesEnv && ' EMAIL_FROM overrides this.'}</small>
+              </label>
+              <label className="field"><span>Reply-to <em className="ems-opt-l">optional</em></span>
+                <input type="text" value={form.replyTo} onChange={(e) => set('replyTo', e.target.value)} placeholder="Front desk <desk@example.com>" autoComplete="off" spellCheck={false} />
+              </label>
+            </div>
+          )}
+          {p === 'mailgun' && (
+            <div className="field-row">
+              <label className="field"><span>Sending domain</span>
+                <input type="text" value={form.domain} onChange={(e) => set('domain', e.target.value)} placeholder="mg.example.com" spellCheck={false} />
+              </label>
+              <label className="field"><span>Region</span>
+                <select value={form.region} onChange={(e) => set('region', e.target.value)} disabled={locked}>
+                  <option value="us">US (api.mailgun.net)</option><option value="eu">EU (api.eu.mailgun.net)</option>
+                </select>
+              </label>
+            </div>
+          )}
+          {p === 'ses' && (
+            <div className="field-row three">
+              <label className="field"><span>AWS region</span>
+                <input type="text" value={form.region} onChange={(e) => set('region', e.target.value)} placeholder="us-east-1" spellCheck={false} />
+              </label>
+              <label className="field"><span>Configuration set <em className="ems-opt-l">optional</em></span>
+                <input type="text" value={form.configurationSet} onChange={(e) => set('configurationSet', e.target.value)} spellCheck={false} />
+              </label>
+              <label className="field"><span>SNS topic ARN <em className="ems-opt-l">optional</em></span>
+                <input type="text" value={form.snsTopicArn} onChange={(e) => set('snsTopicArn', e.target.value)} placeholder="arn:aws:sns:…" spellCheck={false} />
+              </label>
+            </div>
+          )}
+
+          {p !== 'none' && (usesEnv ? (
+            ENV[p].length > 0 && (
+              <div className="ems-env">
+                <p>Set these in your deployment, then redeploy:</p>
+                <ul>{['EMAIL_FROM', 'EMAIL_REPLY_TO (optional)', ...ENV[p]].map((v) => <li key={v}><code>{v}</code></li>)}</ul>
+              </div>
+            )
+          ) : (
+            <div className="field-row">
+              {CREDS[p].map((c) => (
+                <label key={c.key} className="field"><span>{c.label}{c.optional && <em className="ems-opt-l"> optional</em>}{saved(c.key) && <em className="ems-saved"> saved</em>}</span>
+                  <input type="password" autoComplete="new-password" spellCheck={false} data-1p-ignore data-lpignore="true" value={creds[c.key] || ''}
+                    placeholder={saved(c.key) ? 'Leave blank to keep the saved value' : c.optional ? 'Optional' : 'Required'}
+                    onChange={(e) => setCreds((x) => ({ ...x, [c.key]: e.target.value }))} disabled={locked} />
+                </label>
+              ))}
+            </div>
+          ))}
+          {VERIFY[p] && <p className="ems-note"><b>Before sending:</b> {VERIFY[p]}</p>}
+          {p === 'resend' && <p className="hint">Turn off click and open tracking for this sending domain in Resend, so account links stay direct.</p>}
+          {['resend','mailgun','ses'].includes(p) && <p className="ems-note"><b>Delivery events:</b> Register your site’s <code>{`/api/email/webhooks/${p}`}</code> endpoint with the provider. Resend and Mailgun require the webhook signing secret above; SES requires the configuration set and SNS topic ARN. Subscribe to delivered, permanent bounce and complaint events.</p>}
+
+          {pwField(setupPw, setSetupPw, 'pw-setup')}
+          <div className="ems-actions">
+            <button type="submit" className="btn primary" disabled={busy !== null}>{busy === 'save' ? 'Saving…' : 'Save settings'}</button>
+          </div>
+          {status(setupMsg)}
+        </form>
+
+        <form className="ems-card" onSubmit={(e) => { e.preventDefault(); void sendTest(); }} noValidate>
+          <header className="ems-head"><div><h2>Send a test</h2><p>Uses the saved settings. Save first to test changes. Only sent to the address you type.</p></div></header>
+          <div className="ems-row">
+            <label className="field ems-grow"><span>Send to</span>
+              <input type="email" value={testTo} onChange={(e) => setTestTo(e.target.value)} placeholder="you@example.com" autoComplete="email" />
+            </label>
+            <button type="submit" className="btn" disabled={busy !== null || !data.configured}>{busy === 'test' ? 'Sending…' : 'Send test email'}</button>
+          </div>
+          {!data.configured && <p className="hint">Finish the configuration before sending a test.</p>}
+          {testMsg.ok && <p className="hint">Accepted means the provider took the message, not that it arrived. Check the inbox and the Activity tab.</p>}
+          {status(testMsg)}
+        </form>
+      </section>
+
+      <section role="tabpanel" id={id('panel-notifications')} aria-labelledby={id('tab-notifications')} hidden={tab !== 'notifications'} className="ems-panel">
+        <form className="ems-card" onSubmit={(e) => { e.preventDefault(); void saveNotify(); }} noValidate>
+          <header className="ems-head"><div><h2>Always sent</h2><p>Essential messages go out whenever email is on and a provider is configured, unless the address is suppressed after a bounce or complaint.</p></div></header>
+          <ul className="ems-list">
+            <li>Account invitations, password resets and password-changed notices</li>
+            <li>Booking received, confirmed, declined, cancelled and rescheduled</li>
+          </ul>
+          <h3 className="ems-sub">Optional</h3>
+          <label className="ems-toggle">
+            <input type="checkbox" checked={notify.reminders} onChange={(e) => setNotify((n) => ({ ...n, reminders: e.target.checked }))} />
+            <span>Reminders<small>24-hour reminders for bookings and event RSVPs</small></span>
+          </label>
+          <label className="ems-toggle">
+            <input type="checkbox" checked={notify.staff} onChange={(e) => setNotify((n) => ({ ...n, staff: e.target.checked }))} />
+            <span>Staff notifications<small>Tell site staff about new booking requests</small></span>
+          </label>
+          {pwField(notify.pw, (v) => setNotify((n) => ({ ...n, pw: v })), 'pw-notify')}
+          <div className="ems-actions">
+            <button type="submit" className="btn primary" disabled={busy !== null}>{busy === 'notify' ? 'Saving…' : 'Save notifications'}</button>
+          </div>
+          {status(notifyMsg)}
+        </form>
+      </section>
+
+      <section role="tabpanel" id={id('panel-templates')} aria-labelledby={id('tab-templates')} hidden={tab !== 'templates'} className="ems-panel">
+        <div className="ems-card">
+          <header className="ems-head"><div><h2>Built-in templates</h2><p>Every message has HTML and plain-text versions. The logo, name and colors come from your site settings. This sample uses made-up example.com data; real account links are never previewed.</p></div></header>
+          <div className="ems-row">
+            <div className="seg" role="group" aria-label="Sample message">
+              {(Object.keys(SAMPLES) as (keyof typeof SAMPLES)[]).map((k) => (
+                <button key={k} type="button" aria-pressed={tpl === k} onClick={() => setTpl(k)}>{SAMPLES[k].label}</button>
+              ))}
+            </div>
+            <div className="seg" role="group" aria-label="Format">
+              <button type="button" aria-pressed={!plain} onClick={() => setPlain(false)}>HTML</button>
+              <button type="button" aria-pressed={plain} onClick={() => setPlain(true)}>Plain text</button>
+            </div>
+          </div>
+          <Preview s={SAMPLES[tpl]} plain={plain} />
+        </div>
+      </section>
+
+      <section role="tabpanel" id={id('panel-activity')} aria-labelledby={id('tab-activity')} hidden={tab !== 'activity'} className="ems-panel">
+        <div className="ems-card">
+          <header className="ems-head">
+            <div><h2>Recent email</h2><p>The latest 100 messages. Accepted means the provider took it; delivery is confirmed only when the provider reports it.</p></div>
+            <button type="button" className="btn sm" onClick={() => { setActMsg(NO_MSG); void run('refresh', () => refresh(setActMsg)); }} disabled={busy !== null}>{busy === 'refresh' ? 'Refreshing…' : 'Refresh'}</button>
+          </header>
+          {heartbeat}
+          {status(actMsg)}
+          {data.activity.length === 0 ? <p className="ems-empty">No email yet.</p> : (
+            <div className="ems-scroll">
+              <table className="list ems-table">
+                <thead><tr><th scope="col">Recipient</th><th scope="col">Message</th><th scope="col">Status</th><th scope="col">Attempts</th><th scope="col">Created</th><th scope="col"><span className="sr-only">Actions</span></th></tr></thead>
+                <tbody>
+                  {data.activity.slice(0, 100).map((j) => (
+                    <tr key={j.id}>
+                      <td data-l="Recipient" className="ems-rcpt">{j.recipient}</td>
+                      <td data-l="Message">{kind(j.kind)}{j.provider && <div className="t-sub">{j.provider}{j.providerId && <> · <code>{j.providerId}</code></>}</div>}</td>
+                      <td data-l="Status"><span className="ems-state" data-tone={TONE[j.state] || 'muted'}>{j.state}</span>
+                        <div className="t-sub">{STATE_NOTE[j.state] || ''}</div>
+                        {j.error && <div className="ems-err">{j.error}</div>}</td>
+                      <td data-l="Attempts" className="num">{j.attempts}{j.acceptedAt ? <div className="t-sub">accepted {when(j.acceptedAt)}</div> : null}</td>
+                      <td data-l="Created">{when(j.createdAt)}{j.state === 'retrying' && <div className="t-sub">next {when(j.nextAt)}</div>}</td>
+                      <td className="ems-act">{j.state === 'failed' && <button type="button" className="btn sm" disabled={busy !== null} onClick={() => void retry(j)}>Retry</button>}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+interface Sample { label: string; subject: string; heading: string; body: string[]; action: string; ics?: boolean; foot: string }
+const SAMPLES = {
+  invite: { label: 'Invitation', subject: 'You’re invited to Example Studio', heading: 'Join Example Studio', body: ['Riley Example invited you to help edit example.com as an editor.', 'This invitation expires in 7 days.'], action: 'Accept invitation', foot: 'Didn’t expect this? You can ignore it; nothing happens until you accept.' },
+  reset: { label: 'Password reset', subject: 'Reset your Example Studio password', heading: 'Reset your password', body: ['Someone asked to reset the password for sam@example.com.', 'The link works once and expires in 30 minutes.'], action: 'Choose a new password', foot: 'If this wasn’t you, ignore this email; your password stays the same.' },
+  booking: { label: 'Booking confirmed', subject: 'Confirmed: Studio tour, Tue 14 Oct', heading: 'Your booking is confirmed', body: ['Studio tour with Example Studio', 'Tuesday 14 October 2026, 10:00–10:45 (America/New_York)', '123 Example Street, Springfield'], action: 'Manage booking', ics: true, foot: 'Need to change it? Use the link above or reply to this email.' },
+} satisfies Record<string, Sample>;
+
+function Preview({ s, plain }: { s: Sample; plain: boolean }) {
+  const text = [s.heading, '', ...s.body, '', `${s.action}: [link omitted in preview]`, '', s.foot, '', '— Example Studio'].join('\n');
+  return (
+    <figure className="ems-mail" aria-label={`Sample ${s.label} email`}>
+      <figcaption><b>Subject:</b> {s.subject}<br /><b>From:</b> Example Studio &lt;hello@example.com&gt;{s.ics && <span className="ems-ics">event.ics attached</span>}</figcaption>
+      {plain ? <pre className="ems-text">{text}</pre> : (
+        <div className="ems-html">
+          <p className="ems-brand">Example Studio</p>
+          <h3>{s.heading}</h3>
+          {s.body.map((l) => <p key={l}>{l}</p>)}
+          <span className="ems-cta" aria-disabled="true">{s.action}</span>
+          <p className="ems-small">Links are placeholders in previews.</p>
+          <p className="ems-small">{s.foot}</p>
+        </div>
+      )}
+    </figure>
+  );
+}