@firedrill-tools/resend 0.1.1

package/firedrill/tools/resend/app/site/view-audience.js

@@ -0,0 +1,160 @@
+// Audience: Contacts (search, segment filter, add, open panel) and Segments (list, create, delete).
+import { refresh } from "./app.js";
+import { openContact } from "./contact-panel.js";
+import { icon } from "./icons.js";
+import { Cursor, debounce, pagerBar, table } from "./list.js";
+import { badge, button, call, confirmDialog, describe, el, emptyState, errorState, field, guard, modal, mutate, skeletonRows, timeCell, toast } from "./ui.js";
+
+const contacts = { query: "", segmentId: "", cursor: new Cursor(), token: 0 };
+const segCursor = new Cursor();
+
+export async function allSegments() {
+  const out = [];
+  let after;
+  for (let page = 0; page < 50; page += 1) {
+    const list = await call("segments.list", { limit: 100, ...(after ? { after } : {}) });
+    out.push(...list.data);
+    if (!list.has_more || list.data.length === 0) break;
+    after = list.data[list.data.length - 1].id;
+  }
+  return out;
+}
+
+function tabs(active) {
+  const t = (label, href) => el("a", { text: label, attrs: { href, role: "tab", "aria-selected": String(label === active), class: "tab-link" } });
+  return el("div", { class: "tabs", attrs: { role: "tablist" } }, [t("Contacts", "#/audience/contacts"), t("Segments", "#/audience/segments"), el("button", { text: "Topics", attrs: { type: "button", "data-soon": "Topics" } }), el("button", { text: "Properties", attrs: { type: "button", "data-soon": "Properties" } })]);
+}
+
+export async function renderContacts(_m, view, { refresh: again = false } = {}) {
+  document.title = "Contacts · Resend (synthetic)";
+  if (!again || !view.querySelector("#contacts-table")) {
+    const search = el("input", { class: "input", attrs: { type: "search", placeholder: "Search by email or name...", "aria-label": "Search contacts" } });
+    search.value = contacts.query;
+    search.addEventListener("input", debounce(() => { contacts.query = search.value.trim(); contacts.cursor.reset(); void loadContacts(); }));
+    const segment = el("select", { class: "select", attrs: { id: "contact-segment", "aria-label": "Filter by segment" } }, [el("option", { text: "All contacts", attrs: { value: "" } })]);
+    segment.addEventListener("change", () => { contacts.segmentId = segment.value; contacts.cursor.reset(); void loadContacts(); });
+    view.replaceChildren(
+      el("div", { class: "page-head" }, [el("h1", { text: "Audience" }), el("div", { class: "head-actions" }, [button("Export", { iconName: "download", attrs: { "data-soon": "Export" } }), button("Add contacts", { variant: "primary", iconName: "plus", onClick: () => void addContact() })])]),
+      tabs("Contacts"),
+      el("div", { class: "toolbar" }, [el("div", { class: "search" }, [icon("search", 14), search]), segment]),
+      el("div", { attrs: { id: "contacts-status" } }),
+      el("div", { attrs: { id: "contacts-table" } }, [table(["Email", "Name", "Status", "Added"], skeletonRows(4, 8), "Contacts")]),
+      el("div", { attrs: { id: "contacts-pager" } }),
+    );
+  }
+  try {
+    const segs = await allSegments();
+    const select = view.querySelector("#contact-segment");
+    select.replaceChildren(el("option", { text: "All contacts", attrs: { value: "" } }), ...segs.map((s) => el("option", { text: s.name, attrs: { value: s.id } })));
+    if (!segs.some((s) => s.id === contacts.segmentId)) contacts.segmentId = "";
+    select.value = contacts.segmentId;
+  } catch { /* the contact list reports its own error */ }
+  await loadContacts();
+}
+
+async function loadContacts() {
+  const token = ++contacts.token;
+  const args = { limit: 20, ...contacts.cursor.args() };
+  if (contacts.query) args.query = contacts.query;
+  if (contacts.segmentId) args.segmentId = contacts.segmentId;
+  const status = document.querySelector("#contacts-status");
+  const holder = document.querySelector("#contacts-table");
+  const pager = document.querySelector("#contacts-pager");
+  if (!holder) return;
+  let list;
+  try { list = await call("contacts.list", args); } catch (error) {
+    if (token !== contacts.token) return;
+    status.replaceChildren(errorState(error, () => void loadContacts()));
+    holder.replaceChildren();
+    pager.replaceChildren();
+    return;
+  }
+  if (token !== contacts.token) return;
+  status.replaceChildren();
+  if (list.data.length === 0 && contacts.cursor.page === 1) {
+    holder.replaceChildren(contacts.query || contacts.segmentId ? emptyState("No contacts found", "No contacts match this search or segment.") : emptyState("No contacts yet", "Add contacts to build your audience.", button("Add contacts", { variant: "primary", iconName: "plus", onClick: () => void addContact() })));
+    pager.replaceChildren();
+    return;
+  }
+  const body = el("tbody", {}, list.data.map((c) => {
+    const name = [c.first_name, c.last_name].filter(Boolean).join(" ");
+    const row = el("tr", { class: "row", attrs: { tabindex: "0", "aria-label": `Contact ${c.email}` } }, [
+      el("td", {}, [el("div", { class: "cell-main" }, [el("span", { class: "tile avatar", text: (name || c.email).charAt(0).toUpperCase() }), el("span", { text: c.email })])]),
+      el("td", { class: "muted", text: name || "—" }),
+      el("td", {}, [badge(c.unsubscribed ? "unsubscribed" : "subscribed")]),
+      el("td", { class: "muted" }, [timeCell(c.created_at)]),
+    ]);
+    const open = () => void openContact(c.id).then((changed) => { if (changed) void refresh(); });
+    row.addEventListener("click", open);
+    row.addEventListener("keydown", (e) => { if (e.key === "Enter") open(); });
+    return row;
+  }));
+  holder.replaceChildren(table(["Email", "Name", "Status", "Added"], body, "Contacts"));
+  pager.replaceChildren(pagerBar(contacts.cursor, list, () => void loadContacts(), "contacts"));
+}
+
+async function addContact() {
+  let segs = [];
+  try { segs = await allSegments(); } catch { segs = []; }
+  const done = await modal("Add contact", (close) => {
+    const email = el("input", { class: "input", attrs: { id: "contact-email", type: "email", placeholder: "steve.wozniak@example.com", autocomplete: "off" } });
+    const first = el("input", { class: "input", attrs: { id: "contact-first", autocomplete: "off" } });
+    const last = el("input", { class: "input", attrs: { id: "contact-last", autocomplete: "off" } });
+    const boxes = segs.map((s) => el("label", { class: "check" }, [el("input", { attrs: { type: "checkbox", value: s.id } }), el("span", { text: s.name })]));
+    const error = el("p", { class: "form-error", attrs: { role: "alert" } });
+    const submit = button("Add", { variant: "primary" });
+    submit.type = "submit";
+    const form = el("form", {}, [field("Email", email), el("div", { class: "two" }, [field("First name", first), field("Last name", last)]), segs.length ? el("fieldset", { class: "field checks" }, [el("legend", { text: "Segments" }), ...boxes]) : null, error, el("div", { class: "dialog-actions" }, [button("Cancel", { onClick: () => close() }), submit])]);
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      submit.disabled = true;
+      error.textContent = "";
+      const args = { email: email.value.trim() };
+      if (first.value.trim()) args.firstName = first.value.trim();
+      if (last.value.trim()) args.lastName = last.value.trim();
+      const segmentIds = boxes.map((b) => b.querySelector("input")).filter((i) => i.checked).map((i) => i.value);
+      if (segmentIds.length) args.segmentIds = segmentIds;
+      try { await guard(() => mutate("contacts.create", args)); close(true); } catch (e) { error.textContent = describe(e); submit.disabled = false; }
+    });
+    return form;
+  });
+  if (done) { toast("Contact added"); await refresh(); }
+}
+
+export async function renderSegments(_m, view) {
+  document.title = "Segments · Resend (synthetic)";
+  const head = el("div", { class: "page-head" }, [el("h1", { text: "Audience" }), el("div", { class: "head-actions" }, [button("Create segment", { variant: "primary", iconName: "plus", onClick: () => void createSegment() })])]);
+  if (!view.querySelector("#segments-marker")) view.replaceChildren(head, tabs("Segments"), el("div", { attrs: { id: "segments-marker" } }, [table(["Name", "Created", ""], skeletonRows(3, 3), "Segments")]));
+  const holder = view.querySelector("#segments-marker");
+  let list;
+  try { list = await call("segments.list", { limit: 20, ...segCursor.args() }); } catch (error) { holder.replaceChildren(errorState(error, () => void renderSegments(_m, view))); return; }
+  if (list.data.length === 0 && segCursor.page === 1) { holder.replaceChildren(emptyState("No segments yet", "Group contacts into segments to target broadcasts.")); return; }
+  const body = el("tbody", {}, list.data.map((s) => el("tr", {}, [
+    el("td", {}, [el("div", { class: "cell-main" }, [el("span", { class: "tile" }, [icon("users", 15)]), el("button", { class: "link-btn", text: s.name, attrs: { type: "button", "aria-label": `Show contacts in ${s.name}` }, on: { click: () => { contacts.segmentId = s.id; contacts.cursor.reset(); location.hash = "#/audience/contacts"; } } })])]),
+    el("td", { class: "muted" }, [timeCell(s.created_at)]),
+    el("td", { class: "actions" }, [el("button", { class: "icon-btn", attrs: { type: "button", "aria-label": `Delete segment ${s.name}`, title: "Delete segment" }, on: { click: () => void removeSegment(s) } }, [icon("trash", 15)])]),
+  ])));
+  holder.replaceChildren(table(["Name", "Created", ""], body, "Segments"), pagerBar(segCursor, list, () => void renderSegments(_m, view), "segments"));
+}
+
+async function createSegment() {
+  const done = await modal("Create segment", (close) => {
+    const name = el("input", { class: "input", attrs: { id: "segment-name", maxlength: "100", autocomplete: "off", placeholder: "Beta testers" } });
+    const error = el("p", { class: "form-error", attrs: { role: "alert" } });
+    const submit = button("Create", { variant: "primary" });
+    submit.type = "submit";
+    const form = el("form", {}, [field("Name", name), error, el("div", { class: "dialog-actions" }, [button("Cancel", { onClick: () => close() }), submit])]);
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      submit.disabled = true;
+      try { await guard(() => mutate("segments.create", { name: name.value.trim() })); close(true); } catch (e) { error.textContent = describe(e); submit.disabled = false; }
+    });
+    return form;
+  });
+  if (done) { toast("Segment created"); await refresh(); }
+}
+
+async function removeSegment(s) {
+  if (!(await confirmDialog("Delete segment", `Delete "${s.name}"? Contacts stay in your audience; only the segment is removed.`, "Delete segment"))) return;
+  try { await guard(() => mutate("segments.remove", { id: s.id })); toast("Segment deleted"); await refresh(); } catch (e) { toast(describe(e), { error: true }); }
+}

package/firedrill/tools/resend/app/site/view-domains.js

@@ -0,0 +1,106 @@
+// Domains: list with Add domain, and the domain page with DNS records, Verify and Delete.
+import { refresh } from "./app.js";
+import { icon } from "./icons.js";
+import { Cursor, linkRow, pagerBar, table } from "./list.js";
+import { badge, button, call, confirmDialog, copyButton, describe, el, emptyState, errorState, field, formatDate, guard, modal, mutate, skeletonRows, timeCell, toast } from "./ui.js";
+
+const REGIONS = [["us-east-1", "North Virginia (us-east-1)"], ["eu-west-1", "Ireland (eu-west-1)"], ["sa-east-1", "São Paulo (sa-east-1)"], ["ap-northeast-1", "Tokyo (ap-northeast-1)"]];
+const regionName = (id) => (REGIONS.find(([v]) => v === id)?.[1] ?? id);
+const cursor = new Cursor();
+
+export async function renderDomains(_m, view) {
+  document.title = "Domains · Resend (synthetic)";
+  const head = el("div", { class: "page-head" }, [el("h1", { text: "Domains" }), el("div", { class: "head-actions" }, [button("Add domain", { variant: "primary", iconName: "plus", onClick: () => void addDomain() })])]);
+  const holder = el("div", {}, [table(["Domain", "Status", "Region", "Created"], skeletonRows(4, 4), "Domains")]);
+  if (!view.querySelector(".page-head")) view.replaceChildren(head, holder); else view.replaceChildren(head, view.children[1] ?? holder);
+  let list;
+  try {
+    list = await call("domains.list", { limit: 20, ...cursor.args() });
+  } catch (error) {
+    view.replaceChildren(head, errorState(error, () => void renderDomains(_m, view)));
+    return;
+  }
+  if (list.data.length === 0 && cursor.page === 1) {
+    view.replaceChildren(head, emptyState("No domains yet", "Add a domain to start sending emails from your own address.", button("Add domain", { variant: "primary", iconName: "plus", onClick: () => void addDomain() })));
+    return;
+  }
+  const body = el("tbody", {}, list.data.map((d) => linkRow([
+    el("td", {}, [el("div", { class: "cell-main" }, [el("span", { class: "tile" }, [icon("globe", 15)]), el("span", { text: d.name })])]),
+    el("td", {}, [badge(d.status)]),
+    el("td", { class: "muted", text: regionName(d.region) }),
+    el("td", { class: "muted" }, [timeCell(d.created_at)]),
+  ], `#/domains/${encodeURIComponent(d.id)}`, `Domain ${d.name}, ${d.status}`)));
+  view.replaceChildren(head, table(["Domain", "Status", "Region", "Created"], body, "Domains"), pagerBar(cursor, list, () => void renderDomains(_m, view), "domains"));
+}
+
+async function addDomain() {
+  const created = await modal("Add domain", (close) => {
+    const name = el("input", { class: "input", attrs: { id: "domain-name", placeholder: "updates.example.com", autocomplete: "off" } });
+    const region = el("select", { class: "select", attrs: { id: "domain-region" } }, REGIONS.map(([v, t]) => el("option", { text: t, attrs: { value: v } })));
+    region.style.width = "100%";
+    const error = el("p", { class: "form-error", attrs: { role: "alert" } });
+    const submit = button("Add", { variant: "primary" });
+    const form = el("form", {}, [field("Name", name, "Use a subdomain like updates.example.com to separate sending reputation."), field("Region", region), error, el("div", { class: "dialog-actions" }, [button("Cancel", { onClick: () => close() }), submit])]);
+    submit.type = "submit";
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      submit.disabled = true;
+      error.textContent = "";
+      try {
+        close(await guard(() => mutate("domains.create", { name: name.value.trim(), region: region.value })));
+      } catch (e) {
+        error.textContent = describe(e);
+        submit.disabled = false;
+      }
+    });
+    return form;
+  }, { description: "Send emails from your own domain once its DNS records are verified." });
+  if (created) {
+    toast(`Domain ${created.name} added`);
+    location.hash = `#/domains/${encodeURIComponent(created.id)}`;
+  }
+}
+
+export async function renderDomainDetail(id, view) {
+  document.title = "Domain · Resend (synthetic)";
+  let domain;
+  try {
+    domain = await call("domains.get", { id });
+  } catch (error) {
+    view.replaceChildren(backLink(), errorState(error, () => void renderDomainDetail(id, view)));
+    return;
+  }
+  const verify = button("Verify DNS Records", { iconName: "refresh", onClick: async () => {
+    verify.disabled = true;
+    try { await guard(() => mutate("domains.verify", { id })); toast("Verification started"); await refresh(); } catch (e) { toast(describe(e), { error: true }); verify.disabled = false; }
+  } });
+  const remove = button("Delete", { variant: "ghost", iconName: "trash", onClick: async () => {
+    if (!(await confirmDialog("Delete domain", `Are you sure you want to delete ${domain.name}? Emails can no longer be sent from this domain.`, "Delete domain"))) return;
+    try { await guard(() => mutate("domains.remove", { id })); toast(`Domain ${domain.name} deleted`); location.hash = "#/domains"; } catch (e) { toast(describe(e), { error: true }); }
+  } });
+  const meta = el("div", { class: "meta-grid" }, [
+    metaItem("Created", el("span", { text: formatDate(domain.created_at) })),
+    metaItem("Status", badge(domain.status)),
+    metaItem("Region", el("span", { text: regionName(domain.region) })),
+    metaItem("Sending", badge(domain.capabilities?.sending === "enabled" ? "delivered" : "canceled", domain.capabilities?.sending === "enabled" ? "Enabled" : "Disabled")),
+  ]);
+  const banner = domain.status === "failed" ? el("div", { class: "callout callout-error", attrs: { role: "alert" } }, [icon("alert", 16), el("div", {}, [el("strong", { text: "DNS verification failed" }), el("p", { text: "We couldn't find the records below at your DNS provider. Check the values and verify again." })])])
+    : domain.status === "not_started" ? el("div", { class: "callout callout-info" }, [icon("clock", 16), el("div", {}, [el("strong", { text: "Add these DNS records" }), el("p", { text: "Add the records to your DNS provider, then click Verify DNS Records." })])]) : null;
+  const rows = el("tbody", {}, (domain.records ?? []).map((r) => el("tr", {}, [
+    el("td", { text: r.type }),
+    el("td", {}, [el("span", { class: "cell-main" }, [el("span", { class: "mono", text: r.name }), copyButton(r.name, `Copy ${r.record} name`)])]),
+    el("td", {}, [el("span", { class: "cell-main" }, [el("span", { class: "mono", text: r.value }), copyButton(r.value, `Copy ${r.record} value`)])]),
+    el("td", { class: "muted", text: r.ttl }),
+    el("td", { class: "muted", text: r.priority ?? "" }),
+    el("td", {}, [badge(r.status)]),
+  ])));
+  const groups = el("section", { class: "section" }, [el("h2", { text: "DNS Records" }), table(["Type", "Name", "Content", "TTL", "Priority", "Status"], rows, "DNS records")]);
+  view.replaceChildren(backLink(), el("div", { class: "detail-head" }, [el("span", { class: "tile lg" }, [icon("globe", 26)]), el("div", { class: "detail-title" }, [el("p", { class: "eyebrow", text: "Domain" }), el("h1", { text: domain.name })]), el("div", { class: "head-actions" }, [remove, verify])]), ...[meta, banner, groups].filter(Boolean));
+}
+
+export function metaItem(label, value) {
+  return el("div", { class: "meta-item" }, [el("p", { class: "eyebrow", text: label }), el("div", {}, [value])]);
+}
+function backLink() {
+  return el("a", { class: "back", attrs: { href: "#/domains" } }, [icon("chevronLeft", 14), el("span", { text: "Domains" })]);
+}

package/firedrill/tools/resend/app/site/view-email-detail.js

@@ -0,0 +1,126 @@
+// Email detail: header, meta, event timeline, Preview / Plain Text / HTML tabs, cancel and reschedule for scheduled emails.
+import { refresh } from "./app.js";
+import { icon } from "./icons.js";
+import { metaItem } from "./view-domains.js";
+import { badge, button, call, clock, confirmDialog, copyButton, describe, el, errorState, field, formatDate, guard, labelFor, modal, mutate, toast } from "./ui.js";
+
+const ALLOWED = new Set(["P", "BR", "A", "STRONG", "B", "EM", "I", "U", "H1", "H2", "H3", "H4", "UL", "OL", "LI", "TABLE", "TBODY", "THEAD", "TR", "TD", "TH", "DIV", "SPAN", "SMALL", "HR", "BLOCKQUOTE", "CODE", "PRE"]);
+
+/** Rebuilds an allowlisted, attribute-free DOM from the email HTML; links keep their text and never navigate. */
+function previewHtml(html) {
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  const walk = (source, target, depth) => {
+    if (depth > 64) return;
+    for (const node of source.childNodes) {
+      if (node.nodeType === Node.TEXT_NODE) target.append(document.createTextNode(node.textContent));
+      else if (node.nodeType === Node.ELEMENT_NODE) {
+        if (!ALLOWED.has(node.tagName)) { if (!["SCRIPT", "STYLE", "HEAD", "TITLE"].includes(node.tagName)) walk(node, target, depth + 1); continue; }
+        const copy = document.createElement(node.tagName === "A" ? "span" : node.tagName.toLowerCase());
+        if (node.tagName === "A") { copy.className = "fake-link"; copy.title = node.getAttribute("href") ?? ""; }
+        walk(node, copy, depth + 1);
+        target.append(copy);
+      }
+    }
+  };
+  const root = el("div", { class: "email-preview" });
+  walk(doc.body, root, 0);
+  return root;
+}
+
+function timeline(email) {
+  const steps = [{ name: "Sent", at: email.created_at, tone: "sent" }];
+  if (email.scheduled_at) steps.unshift({ name: "Scheduled", at: email.created_at, tone: "scheduled" }), (steps[1].at = email.scheduled_at);
+  const last = email.last_event;
+  if (last === "scheduled") steps.pop();
+  else if (last === "canceled") steps[steps.length - 1] = { name: "Canceled", at: null, tone: "canceled" };
+  else if (last !== "sent" && last !== "queued") steps.push({ name: labelFor(last), at: steps[steps.length - 1].at, tone: last });
+  const list = el("ol", { class: "timeline" });
+  steps.forEach((s, i) => {
+    list.append(el("li", {}, [
+      el("span", { class: `dot tone-${s.tone === "delivered" ? "green" : s.tone === "bounced" ? "red" : s.tone === "scheduled" ? "blue" : "gray"}` }, [icon(s.tone === "bounced" ? "alert" : s.tone === "scheduled" ? "clock" : s.tone === "canceled" ? "ban" : s.tone === "delivered" ? "check" : "send", 13)]),
+      el("div", {}, [el("strong", { text: s.name }), el("p", { class: "muted", text: s.at ? formatDate(s.at) : "—" })]),
+    ]));
+    if (i < steps.length - 1) list.append(el("li", { class: "line", attrs: { "aria-hidden": "true" } }));
+  });
+  return list;
+}
+
+export async function renderEmailDetail(id, view) {
+  document.title = "Email · Resend (synthetic)";
+  const back = el("a", { class: "back", attrs: { href: "#/emails" } }, [icon("chevronLeft", 14), el("span", { text: "Emails" })]);
+  let email;
+  try {
+    email = await call("emails.get", { id });
+  } catch (error) {
+    view.replaceChildren(back, errorState(error, () => void renderEmailDetail(id, view)));
+    return;
+  }
+  const actions = el("div", { class: "head-actions" });
+  if (email.last_event === "scheduled") {
+    actions.append(
+      button("Cancel", { iconName: "ban", onClick: async () => {
+        if (!(await confirmDialog("Cancel scheduled email", "This email will not be sent. You can't undo this action.", "Cancel email"))) return;
+        try { await guard(() => mutate("emails.cancel", { id })); toast("Email canceled"); await refresh(); } catch (e) { toast(describe(e), { error: true }); }
+      } }),
+      button("Reschedule", { iconName: "calendar", variant: "primary", onClick: () => void reschedule(email) }),
+    );
+  }
+  const list = (values) => (values && values.length ? values.join(", ") : "—");
+  const meta = el("div", { class: "meta-grid" }, [
+    metaItem("From", el("span", { text: email.from })),
+    metaItem("Subject", el("span", { text: email.subject })),
+    metaItem("To", el("span", { text: list(email.to) })),
+    metaItem("ID", el("span", { class: "cell-main" }, [el("span", { class: "mono", text: email.id }), copyButton(email.id, "Copy email ID")])),
+  ]);
+  const extra = [];
+  if (email.cc?.length) extra.push(metaItem("Cc", el("span", { text: list(email.cc) })));
+  if (email.bcc?.length) extra.push(metaItem("Bcc", el("span", { text: list(email.bcc) })));
+  if (email.reply_to?.length) extra.push(metaItem("Reply-To", el("span", { text: list(email.reply_to) })));
+  if (email.tags?.length) extra.push(metaItem("Tags", el("span", { class: "tags" }, email.tags.map((t) => badge("queued", `${t.name}: ${t.value}`)))));
+  const panels = {
+    preview: () => (email.html ? previewHtml(email.html) : el("pre", { class: "plain", text: email.text ?? "" })),
+    text: () => el("pre", { class: "plain", text: email.text ?? "This email has no plain text version." }),
+    html: () => el("pre", { class: "plain mono", text: email.html ?? "This email has no HTML version." }),
+  };
+  const body = el("div", { class: "content-panel" });
+  const tabs = el("div", { class: "tabs", attrs: { role: "tablist", "aria-label": "Email content" } });
+  const select = (name) => {
+    for (const b of tabs.children) b.setAttribute("aria-selected", String(b.dataset.tab === name));
+    body.replaceChildren(panels[name]());
+  };
+  for (const [name, label] of [["preview", "Preview"], ["text", "Plain Text"], ["html", "HTML"]]) {
+    tabs.append(el("button", { text: label, attrs: { type: "button", role: "tab", "data-tab": name }, on: { click: () => select(name) } }));
+  }
+  tabs.append(el("button", { text: "Insights", attrs: { type: "button", role: "tab", "aria-selected": "false", "data-soon": "Insights" } }));
+  select("preview");
+  view.replaceChildren(...[
+    back,
+    el("div", { class: "detail-head" }, [el("span", { class: "tile lg" }, [icon("mail", 26)]), el("div", { class: "detail-title" }, [el("p", { class: "eyebrow", text: "Email" }), el("h1", { text: email.to[0] ?? "—" })]), actions]),
+    meta,
+    extra.length ? el("div", { class: "meta-grid" }, extra) : null,
+    el("section", { class: "section" }, [el("h2", { text: "Email Events" }), timeline(email)]),
+    el("section", { class: "section" }, [tabs, body]),
+  ].filter(Boolean));
+}
+
+async function reschedule(email) {
+  const base = new Date(Math.max(clock.nowMs, Date.parse((email.scheduled_at ?? "").replace(" ", "T").replace(/\+00$/, "Z")) || 0));
+  const done = await modal("Reschedule email", (close) => {
+    const input = el("input", { class: "input", attrs: { id: "reschedule-at", type: "datetime-local", step: "60" } });
+    input.value = base.toISOString().slice(0, 16);
+    const error = el("p", { class: "form-error", attrs: { role: "alert" } });
+    const submit = button("Reschedule", { variant: "primary" });
+    submit.type = "submit";
+    const form = el("form", {}, [field("Send at (UTC)", input, "Up to 30 days in the future."), error, el("div", { class: "dialog-actions" }, [button("Cancel", { onClick: () => close() }), submit])]);
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      submit.disabled = true;
+      try {
+        await guard(() => mutate("emails.update", { id: email.id, scheduledAt: `${input.value}:00Z` }));
+        close(true);
+      } catch (e) { error.textContent = describe(e); submit.disabled = false; }
+    });
+    return form;
+  });
+  if (done) { toast("Email rescheduled"); await refresh(); }
+}

package/firedrill/tools/resend/app/site/view-emails.js

@@ -0,0 +1,83 @@
+// Emails: Sending list (search, status filter, cursor pages) and the email detail page.
+import { icon } from "./icons.js";
+import { Cursor, debounce, linkRow, pagerBar, table } from "./list.js";
+import { badge, button, call, el, emptyState, errorState, notSimulated, skeletonRows, timeCell } from "./ui.js";
+
+const STATUSES = [["", "All statuses"], ["delivered", "Delivered"], ["bounced", "Bounced"], ["scheduled", "Scheduled"], ["canceled", "Canceled"], ["sent", "Sent"]];
+const state = { query: "", status: "", cursor: new Cursor(), token: 0 };
+const HEAD = ["To", "Status", "Subject", "Sent"];
+
+export async function renderEmails(_m, view, { refresh = false } = {}) {
+  document.title = "Emails · Resend (synthetic)";
+  if (!refresh || !view.querySelector("#emails-body")) view.replaceChildren(buildFrame());
+  await loadList();
+}
+
+function buildFrame() {
+  const search = el("input", { class: "input", attrs: { id: "email-search", type: "search", placeholder: "Search...", "aria-label": "Search emails by recipient or subject", value: state.query } });
+  search.value = state.query;
+  search.addEventListener("input", debounce(() => { state.query = search.value.trim(); state.cursor.reset(); void loadList(); }));
+  const status = el("select", { class: "select", attrs: { id: "email-status", "aria-label": "Filter by status" } }, STATUSES.map(([v, t]) => el("option", { text: t, attrs: { value: v } })));
+  status.value = state.status;
+  status.addEventListener("change", () => { state.status = status.value; state.cursor.reset(); void loadList(); });
+  const range = button("Last 15 days", { iconName: "calendar", attrs: { class: "btn btn-secondary fake-select", "data-soon": "Date range filter" } });
+  const keys = button("All API Keys", { attrs: { class: "btn btn-secondary fake-select", "data-soon": "API key filter" } });
+  const exportBtn = el("button", { class: "icon-btn", attrs: { type: "button", "aria-label": "Export", title: "Export", "data-soon": "Export" } }, [icon("download", 16)]);
+  const tabs = el("div", { class: "tabs", attrs: { role: "tablist" } }, [
+    el("button", { text: "Sending", attrs: { type: "button", role: "tab", "aria-selected": "true" } }),
+    el("button", { text: "Receiving", attrs: { type: "button", role: "tab", "aria-selected": "false", "data-soon": "Receiving" } }),
+  ]);
+  return el("div", {}, [
+    el("div", { class: "page-head" }, [el("h1", { text: "Emails" }), el("div", { class: "head-actions" }, [button("Docs", { iconName: "book", variant: "ghost", attrs: { "data-soon": "Docs" } })])]),
+    tabs,
+    el("div", { class: "toolbar" }, [el("div", { class: "search" }, [icon("search", 14), search]), range, status, keys, exportBtn]),
+    el("div", { attrs: { id: "emails-status" } }),
+    table(HEAD, skeletonRows(4, 8), "Emails"),
+    el("div", { attrs: { id: "emails-pager" } }),
+  ]);
+}
+
+async function loadList() {
+  const token = ++state.token;
+  const tableEl = document.querySelector(".table");
+  if (!tableEl) return;
+  const args = { limit: 20, ...state.cursor.args() };
+  if (state.query) args.query = state.query;
+  if (state.status) args.status = state.status;
+  let list;
+  try {
+    list = await call("emails.list", args);
+  } catch (error) {
+    if (token !== state.token) return;
+    document.querySelector("#emails-status").replaceChildren(errorState(error, () => void loadList()));
+    tableEl.tBodies[0].replaceWith(el("tbody", {}, [el("tr", {}, [el("td", { class: "muted", text: "No emails could be loaded.", attrs: { colspan: "4" } })])]));
+    document.querySelector("#emails-pager").replaceChildren();
+    return;
+  }
+  if (token !== state.token) return;
+  document.querySelector("#emails-status").replaceChildren();
+  if (list.data.length === 0 && state.cursor.page === 1) {
+    const filtered = state.query || state.status;
+    tableEl.closest(".table-wrap").hidden = true;
+    document.querySelector("#emails-pager").replaceChildren(filtered
+      ? emptyState("No emails found", "No emails match the current filters. Try a different search or status.")
+      : emptyState("No emails yet", "Emails you send through the API will show up here.", button("Send your first email", { variant: "primary", attrs: { "data-soon": "Onboarding" } })));
+    return;
+  }
+  tableEl.closest(".table-wrap").hidden = false;
+  const body = el("tbody");
+  for (const email of list.data) {
+    const to = email.to.length > 1 ? `${email.to[0]} +${email.to.length - 1}` : email.to[0] ?? "—";
+    body.append(linkRow([
+      el("td", {}, [el("div", { class: "cell-main" }, [el("span", { class: "tile" }, [icon("mail", 15)]), el("span", { text: to })])]),
+      el("td", {}, [badge(email.last_event)]),
+      el("td", { class: "muted", text: email.subject }),
+      el("td", { class: "muted" }, [timeCell(email.scheduled_at && email.last_event === "scheduled" ? email.scheduled_at : email.created_at)]),
+    ], `#/emails/${encodeURIComponent(email.id)}`, `Email to ${to}: ${email.subject}`));
+  }
+  tableEl.tBodies[0].replaceWith(body);
+  document.querySelector("#emails-pager").replaceChildren(pagerBar(state.cursor, list, () => void loadList(), "emails"));
+}
+
+export { renderEmailDetail } from "./view-email-detail.js";
+export { notSimulated };

package/firedrill/tools/resend/app/site/view-keys.js

@@ -0,0 +1,91 @@
+// API Keys: list, create (token shown once), delete.
+import { refresh, workspace } from "./app.js";
+import { icon } from "./icons.js";
+import { Cursor, pagerBar, table } from "./list.js";
+import { badge, button, call, confirmDialog, copyButton, describe, el, emptyState, errorState, field, guard, modal, mutate, skeletonRows, timeCell, toast } from "./ui.js";
+
+const cursor = new Cursor();
+const HEAD = ["Name", "Token", "Permission", "Last used", "Created", ""];
+
+export async function renderApiKeys(_m, view) {
+  document.title = "API Keys · Resend (synthetic)";
+  const head = el("div", { class: "page-head" }, [el("h1", { text: "API Keys" }), el("div", { class: "head-actions" }, [button("Docs", { iconName: "book", variant: "ghost", attrs: { "data-soon": "Docs" } }), button("Create API Key", { variant: "primary", iconName: "plus", onClick: () => void createKey() })])]);
+  if (!view.querySelector(".table-wrap")) view.replaceChildren(head, table(HEAD, skeletonRows(6, 3), "API keys"));
+  let list;
+  try {
+    list = await call("api_keys.list", { limit: 20, ...cursor.args() });
+  } catch (error) {
+    view.replaceChildren(head, errorState(error, () => void renderApiKeys(_m, view)));
+    return;
+  }
+  if (list.data.length === 0 && cursor.page === 1) {
+    view.replaceChildren(head, emptyState("No API keys yet", "Create an API key to authenticate requests to the API.", button("Create API Key", { variant: "primary", iconName: "plus", onClick: () => void createKey() })));
+    return;
+  }
+  const own = workspace.value?.apiKey;
+  const body = el("tbody", {}, list.data.map((key) => {
+    const more = el("button", { class: "icon-btn", attrs: { type: "button", "aria-label": `Delete API key ${key.name}`, title: "Delete API key" } }, [icon("trash", 15)]);
+    more.addEventListener("click", () => void removeKey(key));
+    const permission = own && own.id === key.id ? own.permission : null;
+    return el("tr", {}, [
+      el("td", {}, [el("div", { class: "cell-main" }, [el("span", { class: "tile" }, [icon("key", 15)]), el("span", { text: key.name })])]),
+      el("td", { class: "muted mono", text: "re_••••••••••••" }),
+      el("td", {}, [permission ? badge(permission, permission === "full_access" ? "Full access" : "Sending access") : el("span", { class: "muted", text: "—", attrs: { title: "Permission is not part of the list response" } })]),
+      el("td", { class: "muted" }, [key.last_used_at ? timeCell(key.last_used_at) : el("span", { text: "Never" })]),
+      el("td", { class: "muted" }, [timeCell(key.created_at)]),
+      el("td", { class: "actions" }, [more]),
+    ]);
+  }));
+  view.replaceChildren(head, table(HEAD, body, "API keys"), pagerBar(cursor, list, () => void renderApiKeys(_m, view), "API keys"));
+}
+
+async function domainOptions() {
+  const options = [];
+  let after;
+  for (let page = 0; page < 50; page += 1) {
+    const list = await call("domains.list", { limit: 100, ...(after ? { after } : {}) });
+    options.push(...list.data);
+    if (!list.has_more || list.data.length === 0) break;
+    after = list.data[list.data.length - 1].id;
+  }
+  return options;
+}
+
+async function createKey() {
+  let domains = [];
+  try { domains = await domainOptions(); } catch { domains = []; }
+  const created = await modal("Add API Key", (close) => {
+    const name = el("input", { class: "input", attrs: { id: "key-name", placeholder: "Your API Key name", maxlength: "50", autocomplete: "off" } });
+    const permission = el("select", { class: "select", attrs: { id: "key-permission" } }, [el("option", { text: "Full access", attrs: { value: "full_access" } }), el("option", { text: "Sending access", attrs: { value: "sending_access" } })]);
+    const domain = el("select", { class: "select", attrs: { id: "key-domain" } }, [el("option", { text: "All Domains", attrs: { value: "" } }), ...domains.map((d) => el("option", { text: d.name, attrs: { value: d.id } }))]);
+    permission.style.width = domain.style.width = "100%";
+    const domainField = field("Domain", domain);
+    domainField.hidden = true;
+    permission.addEventListener("change", () => { domainField.hidden = permission.value !== "sending_access"; });
+    const error = el("p", { class: "form-error", attrs: { role: "alert" } });
+    const submit = button("Add", { variant: "primary" });
+    submit.type = "submit";
+    const form = el("form", {}, [field("Name", name), field("Permission", permission), domainField, error, el("div", { class: "dialog-actions" }, [button("Cancel", { onClick: () => close() }), submit])]);
+    form.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      submit.disabled = true;
+      error.textContent = "";
+      const args = { name: name.value.trim(), permission: permission.value };
+      if (permission.value === "sending_access" && domain.value) args.domainId = domain.value;
+      try { close({ ...(await guard(() => mutate("api_keys.create", args))), name: args.name }); } catch (e) { error.textContent = describe(e); submit.disabled = false; }
+    });
+    return form;
+  });
+  if (!created) return;
+  await refresh();
+  await modal("View API Key", (close) => [
+    el("p", { class: "dialog-text", text: "You can only see this key once. Store it safely." }),
+    el("div", { class: "token-box" }, [el("span", { class: "mono", text: created.token }), copyButton(created.token, "Copy API key")]),
+    el("div", { class: "dialog-actions" }, [button("Done", { variant: "primary", onClick: () => close() })]),
+  ]);
+}
+
+async function removeKey(key) {
+  if (!(await confirmDialog("Delete API Key", `Are you sure you want to delete "${key.name}"? Any requests using this key will stop working.`, "Delete API Key"))) return;
+  try { await guard(() => mutate("api_keys.remove", { id: key.id })); toast("API key deleted"); await refresh(); } catch (e) { toast(describe(e), { error: true }); }
+}