@firedrill-tools/resend 0.1.1

package/firedrill/tools/resend/app/site/icons.js

@@ -0,0 +1,70 @@
+// Monochrome 16px line icons in the dashboard's thin-stroke style (1.5px strokes, round joins). Built with DOM APIs only.
+const NS = "http://www.w3.org/2000/svg";
+const P = {
+  mail: ["M3 5.5h18v13H3z", "m3.5 6 8.5 7 8.5-7"],
+  broadcast: ["M4 10v4", "M7.5 8.5v7", "M11 6v12", "M14.5 8.5v7", "M18 10v4"],
+  template: ["M4 4h16v16H4z", "M4 9h16", "M9 9v11"],
+  audience: ["M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z", "M2.5 20c.6-3.4 3.2-5.5 6.5-5.5s5.9 2.1 6.5 5.5", "M16 4.3a3.5 3.5 0 0 1 0 6.4", "M18 14.8c2 .7 3.2 2.5 3.5 5.2"],
+  metrics: ["M4 20V10", "M10 20V4", "M16 20v-7", "M22 20H2"],
+  globe: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z", "M3 12h18", "M12 3c2.5 2.6 3.7 5.6 3.7 9s-1.2 6.4-3.7 9c-2.5-2.6-3.7-5.6-3.7-9S9.5 5.6 12 3Z"],
+  logs: ["M8 6h13", "M8 12h13", "M8 18h13", "M3.5 6h.01", "M3.5 12h.01", "M3.5 18h.01"],
+  key: ["M14.5 9.5a2 2 0 1 0 0-.01", "M15 15a6 6 0 1 0-5.6-3.9L3 17.5V21h3.5v-2h2v-2h2l1.9-1.9A6 6 0 0 0 15 15Z"],
+  webhook: ["M9 7.5a3.5 3.5 0 1 1 5.3 3L17 15", "M6.5 13a3.5 3.5 0 1 0 3.5 4h7", "M17.5 20.5a3.5 3.5 0 1 0-1.5-6.7L12 7"],
+  settings: ["M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z", "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z"],
+  search: ["M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14Z", "m20 20-3.5-3.5"],
+  chevronDown: ["m6 9 6 6 6-6"],
+  chevronRight: ["m9 6 6 6-6 6"],
+  chevronLeft: ["m15 6-6 6 6 6"],
+  chevronsUpDown: ["m7 15 5 5 5-5", "m7 9 5-5 5 5"],
+  plus: ["M12 5v14", "M5 12h14"],
+  copy: ["M9 9h11v11H9z", "M5 15H4V4h11v1"],
+  check: ["m5 12.5 4.5 4.5L19 7"],
+  x: ["M6 6l12 12", "M18 6 6 18"],
+  more: ["M5 12h.01", "M12 12h.01", "M19 12h.01"],
+  trash: ["M4 7h16", "M10 11v6", "M14 11v6", "M6 7l1 13h10l1-13", "M9 7V4h6v3"],
+  book: ["M4 19.5V5a2 2 0 0 1 2-2h14v16H6a2 2 0 0 0-2 2Z", "M4 19.5A2 2 0 0 0 6 21h14"],
+  help: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z", "M9.5 9a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6", "M12 17h.01"],
+  calendar: ["M4 5h16v16H4z", "M4 10h16", "M8 3v4", "M16 3v4"],
+  download: ["M12 4v11", "m7 10 5 5 5-5", "M4 20h16"],
+  refresh: ["M20 11a8 8 0 0 0-14.8-4L4 8.5", "M4 4v4.5h4.5", "M4 13a8 8 0 0 0 14.8 4l1.2-1.5", "M20 20v-4.5h-4.5"],
+  clock: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z", "M12 7v5l3 2"],
+  ban: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z", "m5.7 5.7 12.6 12.6"],
+  alert: ["M12 3 2 20h20L12 3Z", "M12 10v4", "M12 17h.01"],
+  lock: ["M5 11h14v10H5z", "M8 11V7a4 4 0 1 1 8 0v4"],
+  users: ["M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z", "M2.5 20c.6-3.4 3.2-5.5 6.5-5.5s5.9 2.1 6.5 5.5"],
+  filter: ["M4 5h16", "M7 12h10", "M10 19h4"],
+  send: ["m4 12 16-8-6 16-2.5-6.5L4 12Z"],
+  logout: ["M15 4h4v16h-4", "M10 16l4-4-4-4", "M14 12H4"],
+  menu: ["M4 7h16", "M4 12h16", "M4 17h16"],
+  inbox: ["M3 13h5l1.5 3h5l1.5-3h5", "M5.5 5h13L21 13v6H3v-6l2.5-8Z"],
+  tag: ["M3 12V4h8l10 10-8 8L3 12Z", "M7.5 8h.01"],
+  topic: ["M4 6h16", "M4 12h10", "M4 18h6"],
+  property: ["M5 4h14v16H5z", "M9 9h6", "M9 13h6", "M9 17h3"],
+};
+
+export function icon(name, size = 16) {
+  const svg = document.createElementNS(NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", String(size));
+  svg.setAttribute("height", String(size));
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "1.6");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  svg.setAttribute("aria-hidden", "true");
+  svg.classList.add("i");
+  for (const d of P[name] ?? P.more) {
+    const path = document.createElementNS(NS, "path");
+    path.setAttribute("d", d);
+    svg.append(path);
+  }
+  return svg;
+}
+
+export function hydrateIcons(root = document) {
+  for (const node of root.querySelectorAll("[data-icon]")) {
+    if (node.firstChild) continue;
+    node.append(icon(node.dataset.icon, Number(node.dataset.size ?? 16)));
+  }
+}

package/firedrill/tools/resend/app/site/index.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Emails · Resend (synthetic)</title>
+    <link rel="icon" type="image/svg+xml" href="./assets/resend-icon-white.svg" />
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="./views.css" />
+    <script type="module" src="./app.js"></script>
+  </head>
+  <body>
+    <div class="shell">
+      <aside class="sidebar" id="sidebar" aria-label="Dashboard navigation">
+        <div class="sidebar-top">
+          <a class="brand" href="#/emails" aria-label="Resend home"><img src="./assets/resend-wordmark-white.svg" alt="" width="72" height="16" /></a>
+          <button type="button" class="team" id="team-switcher" aria-label="Switch team" title="Switch team">
+            <span class="team-avatar" id="team-avatar" aria-hidden="true">N</span>
+            <span class="team-name" id="team-name">Loading…</span>
+            <span data-icon="chevronsUpDown" data-size="14" class="team-chevron"></span>
+          </button>
+        </div>
+        <nav class="nav" id="nav">
+          <a href="#/emails" data-route="emails"><span data-icon="mail"></span><span>Emails</span></a>
+          <button type="button" data-soon="Broadcasts"><span data-icon="broadcast"></span><span>Broadcasts</span></button>
+          <button type="button" data-soon="Templates"><span data-icon="template"></span><span>Templates</span></button>
+          <a href="#/audience/contacts" data-route="audience"><span data-icon="audience"></span><span>Audience</span></a>
+          <div class="nav-sub" id="audience-sub">
+            <a href="#/audience/contacts" data-route="contacts"><span>Contacts</span></a>
+            <a href="#/audience/segments" data-route="segments"><span>Segments</span></a>
+            <button type="button" data-soon="Topics"><span>Topics</span></button>
+            <button type="button" data-soon="Properties"><span>Properties</span></button>
+          </div>
+          <button type="button" data-soon="Metrics"><span data-icon="metrics"></span><span>Metrics</span></button>
+          <a href="#/domains" data-route="domains"><span data-icon="globe"></span><span>Domains</span></a>
+          <button type="button" data-soon="Logs"><span data-icon="logs"></span><span>Logs</span></button>
+          <a href="#/api-keys" data-route="api-keys"><span data-icon="key"></span><span>API Keys</span></a>
+          <button type="button" data-soon="Webhooks"><span data-icon="webhook"></span><span>Webhooks</span></button>
+          <button type="button" data-soon="Settings"><span data-icon="settings"></span><span>Settings</span></button>
+        </nav>
+        <div class="sidebar-foot">
+          <div class="usage" id="usage" aria-live="polite"></div>
+          <button type="button" class="foot-link" data-soon="Docs"><span data-icon="book"></span><span>Docs</span></button>
+          <button type="button" class="foot-link" data-soon="Help"><span data-icon="help"></span><span>Help</span></button>
+          <button type="button" class="user" id="user-menu" data-soon="Account"><span class="user-avatar" id="user-avatar" aria-hidden="true">P</span><span class="user-name" id="user-name">Production</span><span data-icon="more" data-size="14"></span></button>
+        </div>
+      </aside>
+      <main class="main" id="main" tabindex="-1">
+        <button type="button" class="icon-btn mobile-menu" id="mobile-menu" aria-label="Open navigation" title="Open navigation"><span data-icon="menu"></span></button>
+        <div id="view"></div>
+      </main>
+    </div>
+    <div id="dialogs"></div>
+    <div class="toasts" id="toasts" aria-live="polite"></div>
+  </body>
+</html>

package/firedrill/tools/resend/app/site/list.js

@@ -0,0 +1,41 @@
+// Cursor paging shared by every list screen: forward with `after` = last id, back through a stack of earlier cursors.
+import { button, el } from "./ui.js";
+
+export class Cursor {
+  constructor() { this.reset(); }
+  reset() { this.stack = []; this.after = undefined; }
+  get page() { return this.stack.length + 1; }
+  args() { return this.after === undefined ? {} : { after: this.after }; }
+  next(lastId) { this.stack.push(this.after); this.after = lastId; }
+  prev() { this.after = this.stack.pop(); }
+}
+
+/** Renders "Page N" with Previous / Next controls; `onChange` re-reads the list. */
+export function pagerBar(cursor, list, onChange, noun = "items") {
+  const prev = button("Previous", { size: "sm", iconName: "chevronLeft", attrs: { disabled: cursor.page === 1, "aria-label": `Previous page of ${noun}` }, onClick: () => { cursor.prev(); onChange(); } });
+  const next = button("Next", { size: "sm", attrs: { disabled: !list.has_more, "aria-label": `Next page of ${noun}` }, onClick: () => { cursor.next(list.data[list.data.length - 1].id); onChange(); } });
+  const count = list.data.length;
+  return el("div", { class: "pager" }, [
+    el("span", { text: count === 0 ? `Page ${cursor.page}` : `Page ${cursor.page} · ${count} ${noun}` }),
+    el("div", { class: "btns" }, [prev, next]),
+  ]);
+}
+
+/** A table with a header row; `body` is a tbody. */
+export function table(headers, body, label) {
+  const head = el("thead", {}, [el("tr", {}, headers.map((h) => el("th", { text: h, attrs: { scope: "col" } })))]);
+  return el("div", { class: "table-wrap" }, [el("table", { class: "table", attrs: { "aria-label": label } }, [head, body])]);
+}
+
+/** Makes a clickable row keyboard accessible. */
+export function linkRow(cells, href, label) {
+  const row = el("tr", { class: "row", attrs: { tabindex: "0", "aria-label": label } }, cells);
+  row.addEventListener("click", (event) => { if (!event.target.closest("button, a, input")) location.hash = href; });
+  row.addEventListener("keydown", (event) => { if (event.key === "Enter" && event.target === row) location.hash = href; });
+  return row;
+}
+
+export function debounce(fn, ms = 250) {
+  let timer;
+  return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), ms); };
+}

package/firedrill/tools/resend/app/site/styles.css

@@ -0,0 +1,67 @@
+@font-face { font-family: "Inter"; src: url("./assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
+@font-face { font-family: "JetBrains Mono"; src: url("./assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
+
+:root {
+  --bg: #000000;
+  --panel: #0a0a0a;
+  --elev: #111113;
+  --hover: rgba(255, 255, 255, 0.05);
+  --active: rgba(255, 255, 255, 0.08);
+  --border: rgba(255, 255, 255, 0.08);
+  --border-strong: rgba(255, 255, 255, 0.14);
+  --text: #eeeef0;
+  --muted: #a1a1aa;
+  --faint: #6e6e76;
+  --green: #3dd68c; --green-bg: rgba(61, 214, 140, 0.1);
+  --red: #ff6369; --red-bg: rgba(255, 99, 105, 0.1);
+  --amber: #ffca16; --amber-bg: rgba(255, 202, 22, 0.1);
+  --blue: #70b8ff; --blue-bg: rgba(112, 184, 255, 0.1);
+  --gray-bg: rgba(255, 255, 255, 0.07);
+  --radius: 8px;
+  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  color-scheme: dark;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
+body { font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
+a { color: inherit; text-decoration: none; }
+button, input, select, textarea { font: inherit; color: inherit; }
+.i { flex: none; display: block; }
+[hidden] { display: none !important; }
+:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 1px; }
+.mono { font-family: var(--mono); font-size: 12.5px; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+.shell { display: grid; grid-template-columns: 240px 1fr; height: 100vh; }
+.sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--bg); padding: 14px 10px 10px; min-height: 0; }
+.sidebar-top { display: flex; flex-direction: column; gap: 14px; padding: 4px 6px 12px; }
+.brand { display: inline-flex; align-items: center; height: 24px; padding-left: 2px; }
+.brand img { height: 18px; width: auto; }
+.team { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; margin-left: -2px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; text-align: left; }
+.team:hover { background: var(--hover); }
+.team-avatar, .user-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #3a3a40, #1c1c20); border: 1px solid var(--border-strong); font-size: 11px; font-weight: 600; flex: none; }
+.user-avatar { border-radius: 999px; }
+.team-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.team-plan { font-size: 11px; color: var(--muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 6px; line-height: 17px; }
+.team-chevron { margin-left: auto; color: var(--muted); }
+
+.nav { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
+.nav > a, .nav > button, .nav-sub > a, .nav-sub > button, .foot-link { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; text-align: left; width: 100%; }
+.nav > a:hover, .nav > button:hover, .nav-sub > a:hover, .nav-sub > button:hover, .foot-link:hover { background: var(--hover); color: var(--text); }
+.nav a.active { background: var(--active); color: var(--text); }
+.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 2px 18px; padding-left: 9px; border-left: 1px solid var(--border); }
+.nav-sub > a, .nav-sub > button { height: 30px; font-size: 13.5px; }
+.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 1px; padding-top: 10px; }
+.usage { margin: 0 4px 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; color: var(--muted); }
+.usage:empty { display: none; }
+.usage strong { color: var(--text); font-weight: 500; }
+.meter { height: 4px; border-radius: 99px; background: var(--gray-bg); margin-top: 8px; overflow: hidden; }
+.meter span { display: block; height: 100%; background: var(--text); border-radius: 99px; }
+.user { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px; margin-top: 6px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; cursor: pointer; color: var(--muted); }
+.user:hover { color: var(--text); }
+.user-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.main { overflow-y: auto; min-width: 0; position: relative; }
+.icon-btn.mobile-menu { display: none; }
+#view { max-width: 1200px; margin: 0 auto; padding: 36px 40px 64px; }
+.usage-plan { color: var(--text); font-weight: 500; margin-bottom: 4px; }

package/firedrill/tools/resend/app/site/ui.js

@@ -0,0 +1,259 @@
+// Shared helpers: safe DOM building, operation calls, dialogs, toasts, virtual-time formatting and revision watching.
+import { getContext, invoke } from "/_firedrill/client.js";
+import { icon } from "./icons.js";
+
+export const $ = (selector, root = document) => root.querySelector(selector);
+
+/** el("div", { class, text, attrs, on }, children) — record text only ever goes through textContent. */
+export function el(tag, options = {}, children = []) {
+  const node = document.createElement(tag);
+  if (options.class) node.className = options.class;
+  if (options.text !== undefined && options.text !== null) node.textContent = String(options.text);
+  for (const [name, value] of Object.entries(options.attrs ?? {})) {
+    if (value === false || value === undefined || value === null) continue;
+    node.setAttribute(name, value === true ? "" : String(value));
+  }
+  for (const [type, listener] of Object.entries(options.on ?? {})) node.addEventListener(type, listener);
+  for (const child of [].concat(children)) {
+    if (child === null || child === undefined || child === false) continue;
+    node.append(typeof child === "string" ? document.createTextNode(child) : child);
+  }
+  return node;
+}
+
+export function button(label, { variant = "secondary", iconName, onClick, attrs = {}, size = "" } = {}) {
+  const node = el("button", { class: `btn btn-${variant} ${size}`.trim(), attrs: { type: "button", ...attrs }, on: onClick ? { click: onClick } : {} });
+  if (iconName) node.append(icon(iconName, 14));
+  if (label) node.append(el("span", { text: label }));
+  return node;
+}
+
+export class ToolError extends Error {
+  constructor(status, code, message) {
+    super(message);
+    this.status = status;
+    this.code = String(code ?? "").replace(/^tool\./, "");
+  }
+  get denied() { return this.status === "denied" || this.status === "permission_denied" || this.code === "PERMISSION_DENIED"; }
+}
+
+export async function call(operationId, args = {}, idempotencyKey) {
+  const result = await invoke(operationId, args, idempotencyKey ? { idempotencyKey } : {});
+  const outcome = result?.outcome ?? {};
+  if (outcome.status !== "ok") {
+    const error = outcome.error ?? {};
+    throw new ToolError(outcome.status, error.code ?? outcome.status, error.message ?? `The request was ${outcome.status}.`);
+  }
+  return outcome.value;
+}
+
+/** A mutation: fresh idempotency key per user action; callers reuse `run.key` only to retry the same action. */
+export function mutate(operationId, args = {}) {
+  const idempotencyKey = crypto.randomUUID();
+  return call(operationId, { ...args, idempotencyKey }, idempotencyKey);
+}
+
+export function describe(error) {
+  if (error instanceof ToolError) {
+    if (error.denied) return "You don't have permission to perform this action with the current actor.";
+    if (error.code === "RATE_LIMIT_EXCEEDED") return "Too many requests. Please slow down and try again in a second.";
+    if (error.code === "RESTRICTED_API_KEY") return "This API key is restricted to only send emails.";
+    if (error.code === "INVALID_API_KEY") return "API key is invalid.";
+    if (error.code === "APPLICATION_ERROR") return "An unexpected error occurred. Please try again.";
+    return error.message;
+  }
+  return error?.message ?? "Something went wrong.";
+}
+
+// ---- toasts --------------------------------------------------------------------------------
+export function toast(text, { error = false } = {}) {
+  const host = $("#toasts");
+  const node = el("div", { class: `toast${error ? " toast-error" : ""}`, attrs: { role: error ? "alert" : "status" } }, [icon(error ? "alert" : "check", 14), el("span", { text })]);
+  host.append(node);
+  setTimeout(() => node.remove(), 5000);
+}
+
+export async function copyText(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    toast("Copied to clipboard");
+  } catch {
+    toast("Copy is not available in this browser", { error: true });
+  }
+}
+
+export function copyButton(text, label = "Copy") {
+  const node = el("button", { class: "icon-btn copy", attrs: { type: "button", "aria-label": label, title: label }, on: { click: (event) => { event.stopPropagation(); void copyText(text); } } });
+  node.append(icon("copy", 14));
+  return node;
+}
+
+// ---- dialogs -------------------------------------------------------------------------------
+/** Opens a modal. `build(close)` returns the body nodes; resolves with the value passed to close(). */
+export function modal(title, build, { description, wide = false } = {}) {
+  return new Promise((resolve) => {
+    const previous = document.activeElement;
+    const titleId = `dlg-${crypto.randomUUID()}`;
+    const overlay = el("div", { class: "overlay" });
+    const box = el("div", { class: `dialog${wide ? " dialog-wide" : ""}`, attrs: { role: "dialog", "aria-modal": "true", "aria-labelledby": titleId } });
+    const close = (value) => {
+      overlay.remove();
+      document.removeEventListener("keydown", onKey, true);
+      previous?.focus?.();
+      resolve(value);
+    };
+    const onKey = (event) => { if (event.key === "Escape") { event.preventDefault(); close(undefined); } };
+    const head = el("div", { class: "dialog-head" }, [el("h2", { text: title, attrs: { id: titleId } })]);
+    const x = el("button", { class: "icon-btn", attrs: { type: "button", "aria-label": "Close", title: "Close" }, on: { click: () => close(undefined) } });
+    x.append(icon("x", 16));
+    head.append(x);
+    box.append(head);
+    if (description) box.append(el("p", { class: "dialog-desc", text: description }));
+    box.append(...[].concat(build(close)));
+    overlay.append(box);
+    overlay.addEventListener("mousedown", (event) => { if (event.target === overlay) close(undefined); });
+    document.addEventListener("keydown", onKey, true);
+    $("#dialogs").append(overlay);
+    (box.querySelector("input, select, textarea, .btn-primary, .btn-danger") ?? x).focus();
+  });
+}
+
+export function confirmDialog(title, text, okLabel, { danger = true } = {}) {
+  return modal(title, (close) => [
+    el("p", { class: "dialog-text", text }),
+    el("div", { class: "dialog-actions" }, [
+      button("Cancel", { onClick: () => close(false) }),
+      button(okLabel, { variant: danger ? "danger" : "primary", onClick: () => close(true) }),
+    ]),
+  ]);
+}
+
+export function field(labelText, control, hint) {
+  const id = control.id || `f-${crypto.randomUUID()}`;
+  control.id = id;
+  return el("div", { class: "field" }, [el("label", { text: labelText, attrs: { for: id } }), control, hint ? el("p", { class: "hint", text: hint }) : null]);
+}
+
+// ---- virtual time (never the browser clock) -------------------------------------------------
+export const clock = { nowMs: 0, set(iso) { const ms = Date.parse(iso); if (Number.isFinite(ms)) this.nowMs = ms; } };
+const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+function parse(value) {
+  if (typeof value !== "string" || value.length === 0) return NaN;
+  // Resend timestamps carry an offset ("+00"); zone-less text is treated as UTC.
+  const text = /(Z|[+-]\d\d(:?\d\d)?)$/.test(value) ? value.replace(/([+-]\d\d)$/, "$1:00") : `${value}Z`;
+  return Date.parse(text.replace(" ", "T"));
+}
+
+export function relative(value) {
+  const ms = parse(value);
+  if (!Number.isFinite(ms)) return "—";
+  const diff = clock.nowMs - ms;
+  const future = diff < 0;
+  const s = Math.abs(diff) / 1000;
+  let text;
+  if (s < 45) text = "less than a minute";
+  else if (s < 90) text = "1 minute";
+  else if (s < 2700) text = `${Math.round(s / 60)} minutes`;
+  else if (s < 5400) text = "about 1 hour";
+  else if (s < 86400) text = `about ${Math.round(s / 3600)} hours`;
+  else if (s < 172800) text = "1 day";
+  else if (s < 2592000) text = `${Math.round(s / 86400)} days`;
+  else if (s < 5184000) text = "about 1 month";
+  else if (s < 31536000) text = `${Math.round(s / 2592000)} months`;
+  else text = `about ${Math.round(s / 31536000)} years`;
+  return future ? `in ${text}` : `${text} ago`;
+}
+
+export function formatDate(value, { time = true } = {}) {
+  const ms = parse(value);
+  if (!Number.isFinite(ms)) return "—";
+  const d = new Date(ms);
+  const day = `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}${d.getUTCFullYear() !== new Date(clock.nowMs).getUTCFullYear() ? `, ${d.getUTCFullYear()}` : ""}`;
+  if (!time) return day;
+  const h = d.getUTCHours();
+  const m = String(d.getUTCMinutes()).padStart(2, "0");
+  return `${day}, ${((h + 11) % 12) + 1}:${m} ${h < 12 ? "AM" : "PM"} UTC`;
+}
+
+export function timeCell(value) {
+  return el("time", { text: relative(value), attrs: { datetime: value ?? "", title: formatDate(value) } });
+}
+
+// ---- badges ----------------------------------------------------------------------------------
+const TONES = {
+  delivered: "green", verified: "green", subscribed: "green", full_access: "gray", sending_access: "gray",
+  bounced: "red", failed: "red", complained: "red", temporary_failure: "amber", suppressed: "red",
+  scheduled: "blue", queued: "gray", sent: "gray", canceled: "gray", not_started: "gray", pending: "amber",
+  temporary_failure_domain: "amber", unsubscribed: "gray", opened: "green", clicked: "green", delivery_delayed: "amber",
+};
+export const labelFor = (value) => {
+  const text = String(value ?? "unknown").replace(/_/g, " ");
+  return text.charAt(0).toUpperCase() + text.slice(1);
+};
+export function badge(value, text) {
+  return el("span", { class: `badge tone-${TONES[value] ?? "gray"}`, text: text ?? labelFor(value) });
+}
+
+// ---- states ----------------------------------------------------------------------------------
+export function emptyState(title, text, action) {
+  return el("div", { class: "empty" }, [el("h3", { text: title }), text ? el("p", { text }) : null, action ?? null]);
+}
+
+export function errorState(error, retry) {
+  const denied = error instanceof ToolError && (error.denied || error.code === "RESTRICTED_API_KEY" || error.code === "INVALID_API_KEY");
+  const box = el("div", { class: `callout ${denied ? "callout-warn" : "callout-error"}`, attrs: { role: "alert" } }, [
+    icon(denied ? "lock" : "alert", 16),
+    el("div", {}, [el("strong", { text: denied ? "Access denied" : "Something went wrong" }), el("p", { text: describe(error) })]),
+  ]);
+  if (retry) box.append(button("Try again", { size: "sm", iconName: "refresh", onClick: retry }));
+  return box;
+}
+
+export function skeletonRows(columns, rows = 8) {
+  const body = el("tbody", { attrs: { "aria-busy": "true" } });
+  for (let r = 0; r < rows; r += 1) {
+    body.append(el("tr", { class: "skeleton" }, Array.from({ length: columns }, () => el("td", {}, [el("span", { class: "sk" })]))));
+  }
+  return body;
+}
+
+export function notSimulated(name, detail) {
+  return modal(name, (close) => [
+    el("p", { class: "dialog-text", text: detail ?? `${name} is part of the dashboard but is not simulated by this Tool. Nothing here reads or changes the synthetic team.` }),
+    el("div", { class: "dialog-actions" }, [button("Close", { variant: "primary", onClick: () => close() })]),
+  ]);
+}
+
+// ---- world revision --------------------------------------------------------------------------
+let busy = 0;
+export async function guard(task) {
+  busy += 1;
+  try { return await task(); } finally { busy -= 1; }
+}
+
+/** Polls getContext(); calls refresh() when the revision moves and no action or open dialog would be disturbed. */
+export function watchWorld(refresh) {
+  let stamp;
+  let checking = false;
+  const check = async () => {
+    if (checking || busy > 0 || document.visibilityState !== "visible") return;
+    checking = true;
+    try {
+      const context = await getContext();
+      const next = JSON.stringify(context.revision);
+      if (stamp !== next) {
+        const first = stamp === undefined;
+        stamp = next;
+        if (!first && !$("#dialogs").hasChildNodes()) await refresh();
+      }
+    } catch {
+      // The local environment went away; the next successful poll resumes.
+    } finally {
+      checking = false;
+    }
+  };
+  const timer = setInterval(() => void check(), 2000);
+  window.addEventListener("pagehide", () => clearInterval(timer), { once: true });
+  void check();
+}