@naviyra/cloud-panel 0.0.0-stage → 0.0.2

package/apps/panel/app/ui/cloudflare.jsx

@@ -0,0 +1,926 @@
+"use client";
+import { useEffect, useState } from "react";
+import {
+  Check,
+  Cloud,
+  Mail,
+  Pencil,
+  RefreshCw,
+  Search,
+  Trash2,
+} from "lucide-react";
+import { EmailSkeleton } from "./skeleton";
+
+async function api(url, options = {}) {
+  const response = await fetch(`/api/${url}`, {
+    ...options,
+    headers: { "Content-Type": "application/json", ...options.headers },
+  });
+  const body = await response.json();
+  if (response.status === 401) {
+    window.location.href = "/login";
+    throw Error("Session expired");
+  }
+  if (!response.ok) throw Error(body.error || "Request failed");
+  return body;
+}
+const ttlLabel = (ttl) => (ttl === 1 ? "Auto" : ttl ? `${ttl}s` : "—");
+function when(value) {
+  return value ? new Date(value).toLocaleString() : "—";
+}
+export function CloudflareConnect({ initial, onReady, canWrite }) {
+  const [progress, setProgress] = useState(initial?.login || { state: "idle" });
+  const [error, setError] = useState(initial?.error || "");
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    if (progress.state !== "running") return undefined;
+    const timer = setInterval(async () => {
+      try {
+        const [status, current] = await Promise.all([
+          api("cloudflare/status"),
+          api("cloudflare/login"),
+        ]);
+        setProgress(current);
+        if (status.registered) onReady(status);
+        else if (current.state === "error") setError(current.error);
+      } catch (e) {
+        setError(e.message);
+      }
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [progress.state, onReady]);
+  async function connect() {
+    setBusy(true);
+    setError("");
+    try {
+      const started = await api("cloudflare/login", { method: "POST" });
+      setProgress(started);
+      if (started.skipped || started.registered) {
+        onReady(await api("cloudflare/status"));
+        return;
+      }
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  const waiting = progress.state === "running";
+  const steps = [
+    { label: "Start cloudflared", done: waiting || progress.state === "done" },
+    {
+      label: "Approve the zone in your browser",
+      done: Boolean(progress.url) || progress.state === "done",
+    },
+    { label: "Open the dashboard", done: progress.state === "done" },
+  ];
+  return (
+    <section className="panel connect-panel">
+      <div className="section-heading">
+        <h2>
+          <Cloud size={18} />
+          Connect Cloudflare
+        </h2>
+      </div>
+      <div className="connect-body">
+        <p>
+          Sign in with <span className="mono">cloudflared tunnel login</span>.
+          If this host already has a certificate, the panel skips this step and
+          opens the dashboard.
+        </p>
+        <ol className="connect-steps">
+          {steps.map((step) => (
+            <li key={step.label} className={step.done ? "done" : ""}>
+              <Check size={14} />
+              {step.label}
+            </li>
+          ))}
+        </ol>
+        {error && <div className="error">{error}</div>}
+        {progress.log && <pre className="connect-log">{progress.log}</pre>}
+        {progress.url && (
+          <a className="primary connect-link" href={progress.url} target="_blank" rel="noreferrer">
+            Open Cloudflare login
+          </a>
+        )}
+        <button
+          className="primary"
+          onClick={connect}
+          disabled={!canWrite || busy || waiting}
+        >
+          <Cloud size={16} />
+          {waiting ? "Waiting for approval…" : "Connect with cloudflared"}
+        </button>
+        {!canWrite && (
+          <p>An administrator needs to connect this host to Cloudflare.</p>
+        )}
+      </div>
+    </section>
+  );
+}
+export function DnsScreen({ canWrite }) {
+  const [data, setData] = useState(null);
+  const [detail, setDetail] = useState(null);
+  const [draft, setDraft] = useState(null);
+  const [error, setError] = useState("");
+  const [notice, setNotice] = useState("");
+  const [query, setQuery] = useState("");
+  const [type, setType] = useState("all");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  async function load() {
+    setLoading(true);
+    setError("");
+    try {
+      setData(await api("cloudflare/dns"));
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+  useEffect(() => {
+    load();
+  }, []);
+  function beginEdit(record, event) {
+    event?.stopPropagation();
+    setDetail(record);
+    setDraft({
+      name: record.name,
+      content: record.content,
+      ttl: record.ttl || 1,
+      proxied: record.proxied,
+      priority: record.priority ?? 10,
+      comment: record.comment || "",
+    });
+    setNotice("");
+    setError("");
+  }
+  async function open(id) {
+    setDraft(null);
+    setError("");
+    try {
+      setDetail(await api(`cloudflare/dns/${id}`));
+    } catch (e) {
+      setError(e.message);
+    }
+  }
+  async function saveEdit(event) {
+    event.preventDefault();
+    if (!detail) return;
+    setSaving(true);
+    setError("");
+    try {
+      const saved = await api(`cloudflare/dns/${detail.id}`, {
+        method: "PUT",
+        body: JSON.stringify(draft),
+      });
+      setDetail(saved);
+      setDraft(null);
+      setData((current) =>
+        current
+          ? {
+              ...current,
+              records: current.records.map((record) =>
+                record.id === saved.id ? { ...record, ...saved } : record,
+              ),
+            }
+          : current,
+      );
+      setNotice("DNS record updated.");
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setSaving(false);
+    }
+  }
+  const records = (data?.records || []).filter((record) => {
+    const haystack = `${record.type} ${record.name} ${record.content}`.toLowerCase();
+    return (
+      (type === "all" || record.type === type) &&
+      haystack.includes(query.trim().toLowerCase())
+    );
+  });
+  const types = [...new Set((data?.records || []).map((record) => record.type))];
+  return (
+    <>
+      <div className="page-heading">
+        <div>
+          <h1>
+            DNS records<span className="title-dot">.</span>
+          </h1>
+          <p>{data?.zone?.name || "Records for the zone authorized at login."}</p>
+        </div>
+        <button className="secondary" onClick={load} disabled={loading}>
+          <RefreshCw size={15} />
+          Refresh
+        </button>
+      </div>
+      {error && <div className="error">{error}</div>}
+      {notice && <div className="notice">{notice}</div>}
+      <section className="panel">
+        {loading && data && (
+          <div
+            className="load-progress"
+            role="progressbar"
+            aria-label="Loading DNS records"
+          >
+            <i />
+          </div>
+        )}
+        {(data || !loading) && (
+          <div className="toolbar">
+            <div className="search">
+              <Search size={16} />
+              <input
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search name or content"
+                aria-label="Search DNS records"
+              />
+            </div>
+            <select
+              value={type}
+              onChange={(e) => setType(e.target.value)}
+              aria-label="DNS record type"
+            >
+              <option value="all">All types</option>
+              {types.map((item) => (
+                <option key={item}>{item}</option>
+              ))}
+            </select>
+            <span className="toolbar-count">{records.length} records</span>
+          </div>
+        )}
+        {!data && loading ? (
+          <div className="table-wrap dns-table-wrap">
+            <table className="dns-table" aria-busy="true" aria-label="Loading DNS records">
+              <thead>
+                <tr>
+                  <th>Type</th>
+                  <th>Name</th>
+                  <th>Content</th>
+                  <th>Proxy</th>
+                  <th>TTL</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {Array.from({ length: 6 }, (_, row) => (
+                  <tr key={row} className="skeleton-row">
+                    <td>
+                      <span className="skeleton" />
+                    </td>
+                    <td>
+                      <span className="skeleton" />
+                    </td>
+                    <td>
+                      <span className="skeleton" />
+                    </td>
+                    <td>
+                      <span className="skeleton" />
+                    </td>
+                    <td>
+                      <span className="skeleton" />
+                    </td>
+                    <td />
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : records.length ? (
+          <div className="table-wrap dns-table-wrap">
+            <table className="dns-table">
+              <thead>
+                <tr>
+                  <th>Type</th>
+                  <th>Name</th>
+                  <th>Content</th>
+                  <th>Proxy</th>
+                  <th>TTL</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {records.map((record) => (
+                  <tr
+                    key={record.id}
+                    onClick={() => open(record.id)}
+                    className={detail?.id === record.id ? "selected-row" : ""}
+                  >
+                    <td>{record.type}</td>
+                    <td className="mono" title={record.name}>
+                      {record.name}
+                    </td>
+                    <td className="mono" title={record.content}>
+                      {record.content}
+                    </td>
+                    <td>
+                      {record.proxiable
+                        ? record.proxied
+                          ? "Proxied"
+                          : "DNS only"
+                        : "—"}
+                    </td>
+                    <td>{ttlLabel(record.ttl)}</td>
+                    <td>
+                      {canWrite && (
+                        <button
+                          className="text-button"
+                          disabled={record.locked}
+                          title={record.locked ? "Locked by Cloudflare" : "Edit record"}
+                          onClick={(event) => beginEdit(record, event)}
+                        >
+                          <Pencil size={14} />
+                          Edit
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="empty">
+            <Cloud size={30} />
+            <h3>No matching records</h3>
+            <p>This zone has no DNS records for the current filter.</p>
+          </div>
+        )}
+      </section>
+      {detail && (
+        <section className="panel dns-detail">
+          <div className="section-heading">
+            <h2>{draft ? "Edit record" : "Record details"}</h2>
+            <span className="tiny-label">{detail.type}</span>
+          </div>
+          {draft ? (
+            <form className="dns-edit" onSubmit={saveEdit}>
+              <label>
+                Name
+                <input
+                  value={draft.name}
+                  onChange={(event) =>
+                    setDraft({ ...draft, name: event.target.value })
+                  }
+                  required
+                />
+              </label>
+              <label>
+                Content
+                <textarea
+                  value={draft.content}
+                  onChange={(event) =>
+                    setDraft({ ...draft, content: event.target.value })
+                  }
+                  required
+                />
+              </label>
+              <label>
+                TTL
+                <select
+                  value={draft.ttl}
+                  onChange={(event) =>
+                    setDraft({ ...draft, ttl: Number(event.target.value) })
+                  }
+                >
+                  <option value={1}>Auto</option>
+                  <option value={60}>1 minute</option>
+                  <option value={300}>5 minutes</option>
+                  <option value={3600}>1 hour</option>
+                  <option value={86400}>1 day</option>
+                </select>
+              </label>
+              {detail.proxiable && (
+                <label className="check-line">
+                  <input
+                    type="checkbox"
+                    checked={draft.proxied}
+                    onChange={(event) =>
+                      setDraft({ ...draft, proxied: event.target.checked })
+                    }
+                  />
+                  Proxied
+                </label>
+              )}
+              {["MX", "SRV", "URI"].includes(detail.type) && (
+                <label>
+                  Priority
+                  <input
+                    type="number"
+                    min="0"
+                    max="65535"
+                    value={draft.priority}
+                    onChange={(event) =>
+                      setDraft({
+                        ...draft,
+                        priority: Number(event.target.value),
+                      })
+                    }
+                  />
+                </label>
+              )}
+              <label>
+                Comment
+                <input
+                  value={draft.comment}
+                  maxLength={500}
+                  onChange={(event) =>
+                    setDraft({ ...draft, comment: event.target.value })
+                  }
+                />
+              </label>
+              <div className="modal-actions">
+                <button
+                  type="button"
+                  className="secondary"
+                  onClick={() => setDraft(null)}
+                  disabled={saving}
+                >
+                  Cancel
+                </button>
+                <button className="primary" disabled={saving}>
+                  {saving ? "Saving…" : "Save record"}
+                </button>
+              </div>
+            </form>
+          ) : (
+          <dl>
+            <dt>Name</dt>
+            <dd className="mono">{detail.name}</dd>
+            <dt>Content</dt>
+            <dd className="mono">{detail.content}</dd>
+            <dt>TTL</dt>
+            <dd>{ttlLabel(detail.ttl)}</dd>
+            <dt>Proxy</dt>
+            <dd>
+              {detail.proxiable
+                ? detail.proxied
+                  ? "Proxied"
+                  : "DNS only"
+                : "Not proxiable"}
+            </dd>
+            <dt>Priority</dt>
+            <dd>{detail.priority ?? "—"}</dd>
+            <dt>Comment</dt>
+            <dd>{detail.comment || "—"}</dd>
+            <dt>Tags</dt>
+            <dd>{detail.tags?.length ? detail.tags.join(", ") : "—"}</dd>
+            <dt>Locked</dt>
+            <dd>{detail.locked ? "Yes" : "No"}</dd>
+            <dt>Created</dt>
+            <dd>{when(detail.created_on)}</dd>
+            <dt>Modified</dt>
+            <dd>{when(detail.modified_on)}</dd>
+            <dt>Record ID</dt>
+            <dd className="mono">{detail.id}</dd>
+          </dl>
+          )}
+        </section>
+      )}
+    </>
+  );
+}
+export function EmailScreen({ canWrite }) {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState("");
+  const [notice, setNotice] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [authorized, setAuthorized] = useState(false);
+  const [apiProgress, setApiProgress] = useState({ state: "idle" });
+  const [matcher, setMatcher] = useState("literal");
+  async function load() {
+    setLoading(true);
+    setError("");
+    try {
+      setData(await api("cloudflare/email"));
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+  useEffect(() => {
+    let stop = false;
+    api("cloudflare/status")
+      .then((status) => {
+        if (stop) return;
+        setAuthorized(Boolean(status.api_authorized));
+        if (status.api_authorized) load();
+        else setLoading(false);
+      })
+      .catch((e) => {
+        if (!stop) {
+          setError(e.message);
+          setLoading(false);
+        }
+      });
+    return () => {
+      stop = true;
+    };
+  }, []);
+  useEffect(() => {
+    if (apiProgress.state !== "running") return undefined;
+    const timer = setInterval(async () => {
+      try {
+        const current = await api("cloudflare/api-login");
+        setApiProgress(current);
+        if (current.state === "done" || current.skipped) {
+          setAuthorized(true);
+          setNotice("Cloudflare API authorized.");
+          await load();
+        } else if (current.state === "error") setError(current.error);
+      } catch (e) {
+        setError(e.message);
+      }
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [apiProgress.state]);
+  async function authorize() {
+    setBusy(true);
+    setError("");
+    try {
+      const started = await api("cloudflare/api-login", { method: "POST" });
+      setApiProgress(started);
+      if (started.skipped || started.registered) {
+        setAuthorized(true);
+        setNotice("Cloudflare API authorized.");
+        await load();
+      }
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function run(action) {
+    setBusy(true);
+    setError("");
+    setNotice("");
+    try {
+      await action();
+      await load();
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function saveRule(event) {
+    event.preventDefault();
+    const form = event.currentTarget;
+    const values = Object.fromEntries(new FormData(form));
+    await run(async () => {
+      await api("cloudflare/email/rules", {
+        method: "POST",
+        body: JSON.stringify({
+          name: values.name,
+          matcher: values.matcher,
+          local: values.matcher === "all" ? "" : values.local,
+          domain: values.matcher === "all" ? "" : values.domain,
+          action: values.action,
+          destination: values.destination,
+          enabled: true,
+        }),
+      });
+      form.reset();
+      setMatcher("literal");
+      setNotice("Routing rule created.");
+    });
+  }
+  return (
+    <>
+      <div className="page-heading">
+        <div>
+          <h1>
+            Email routing<span className="title-dot">.</span>
+          </h1>
+          <p>
+            {data?.settings?.name
+              ? `Forward mail for ${data.settings.name}.`
+              : "Custom addresses, catch-all, and destination addresses."}
+          </p>
+        </div>
+        <button className="secondary" onClick={load} disabled={loading || busy}>
+          <RefreshCw size={15} />
+          Refresh
+        </button>
+      </div>
+      {error && <div className="error">{error}</div>}
+      {notice && <div className="notice">{notice}</div>}
+      {!authorized && (
+        <section className="panel connect-panel">
+          <div className="section-heading">
+            <h2>
+              <Cloud size={18} />
+              Authorize with Wrangler
+            </h2>
+          </div>
+          <div className="connect-body">
+            <p>
+              Email routing uses <span className="mono">wrangler login</span>.
+              The CLI opens a browser. You do not add CLOUDFLARE_API_TOKEN to
+              .env. DNS stays on the cloudflared certificate.
+            </p>
+            {apiProgress.log && (
+              <pre className="connect-log">{apiProgress.log}</pre>
+            )}
+            {apiProgress.url && (
+              <a
+                className="primary connect-link"
+                href={apiProgress.url}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Open Wrangler login
+              </a>
+            )}
+            <button
+              className="primary"
+              onClick={authorize}
+              disabled={!canWrite || busy || apiProgress.state === "running"}
+            >
+              <Cloud size={16} />
+              {apiProgress.state === "running"
+                ? "Waiting for approval…"
+                : "Authorize with Wrangler"}
+            </button>
+          </div>
+        </section>
+      )}
+      {loading && !data ? (
+        <EmailSkeleton />
+      ) : (
+        data && (
+          <div className="stack">
+            <section className="panel email-status">
+              <div>
+                <Mail size={18} />
+                <div>
+                  <strong>{data.settings.enabled ? "Enabled" : "Disabled"}</strong>
+                  <small>Status: {data.settings.status}</small>
+                </div>
+              </div>
+              <button
+                className={data.settings.enabled ? "secondary" : "primary"}
+                disabled={!canWrite || busy}
+                onClick={() =>
+                  run(async () => {
+                    await api("cloudflare/email/routing", {
+                      method: "POST",
+                      body: JSON.stringify({ enabled: !data.settings.enabled }),
+                    });
+                    setNotice(
+                      data.settings.enabled
+                        ? "Email routing disabled."
+                        : "Email routing enabled. Cloudflare adds the required MX and SPF records.",
+                    );
+                  })
+                }
+              >
+                {data.settings.enabled ? "Disable routing" : "Enable routing"}
+              </button>
+            </section>
+            <section className="panel">
+              <div className="section-heading">
+                <h2>Destination addresses</h2>
+              </div>
+              {data.address_error && <div className="error">{data.address_error}</div>}
+              {canWrite && (
+                <form
+                  className="inline-form address-form"
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    const form = event.currentTarget;
+                    const email = new FormData(form).get("email");
+                    run(async () => {
+                      await api("cloudflare/email/addresses", {
+                        method: "POST",
+                        body: JSON.stringify({ email }),
+                      });
+                      form.reset();
+                      setNotice("Verification email sent to that destination.");
+                    });
+                  }}
+                >
+                  <label>
+                    Add destination
+                    <input name="email" type="email" required placeholder="you@example.com" />
+                  </label>
+                  <button className="primary" disabled={busy}>
+                    Send verification
+                  </button>
+                </form>
+              )}
+              {data.addresses.length ? (
+                <div className="table-wrap">
+                  <table className="email-table">
+                    <thead>
+                      <tr>
+                        <th>Email</th>
+                        <th>Verified</th>
+                        <th></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.addresses.map((address) => (
+                        <tr key={address.id}>
+                          <td>{address.email}</td>
+                          <td>{address.verified ? when(address.verified) : "Pending"}</td>
+                          <td>
+                            {canWrite && (
+                              <button
+                                className="text-button danger-text"
+                                disabled={busy}
+                                onClick={() => {
+                                  if (window.confirm(`Remove ${address.email}?`))
+                                    run(() =>
+                                      api(`cloudflare/email/addresses/${address.id}`, {
+                                        method: "DELETE",
+                                      }),
+                                    );
+                                }}
+                              >
+                                <Trash2 size={14} />
+                                Remove
+                              </button>
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                <div className="empty">
+                  <Mail size={30} />
+                  <h3>No destinations yet</h3>
+                  <p>Add an inbox, then confirm the verification email before using it in a rule.</p>
+                </div>
+              )}
+            </section>
+            <section className="panel">
+              <div className="section-heading">
+                <h2>Routing rules</h2>
+              </div>
+              {canWrite && (
+                <form className="inline-form rules-form" onSubmit={saveRule}>
+                  <label>
+                    Rule name
+                    <input name="name" required maxLength={80} placeholder="Support inbox" />
+                  </label>
+                  <label>
+                    Match
+                    <select
+                      name="matcher"
+                      value={matcher}
+                      onChange={(event) => setMatcher(event.target.value)}
+                    >
+                      <option value="literal">Custom address</option>
+                      <option value="all">Catch-all</option>
+                    </select>
+                  </label>
+                  {matcher === "literal" && (
+                    <label>
+                      Mail address
+                      <span className="mail-address">
+                        <input
+                          name="local"
+                          required
+                          maxLength={64}
+                          placeholder="hello"
+                          autoComplete="off"
+                        />
+                        <span>@</span>
+                        {(data.domains || []).length > 1 ? (
+                          <select name="domain" defaultValue={data.domains[0]} aria-label="Domain">
+                            {data.domains.map((domain) => (
+                              <option key={domain} value={domain}>
+                                {domain}
+                              </option>
+                            ))}
+                          </select>
+                        ) : (
+                          <>
+                            <input
+                              type="hidden"
+                              name="domain"
+                              value={(data.domains || [])[0] || data.settings?.name || data.zone || ""}
+                            />
+                            <span className="domain-suffix">
+                              {(data.domains || [])[0] || data.settings?.name || data.zone}
+                            </span>
+                          </>
+                        )}
+                      </span>
+                    </label>
+                  )}
+                  <label>
+                    Action
+                    <select name="action" defaultValue="forward">
+                      <option value="forward">Forward</option>
+                      <option value="drop">Drop</option>
+                    </select>
+                  </label>
+                  <label>
+                    Destination
+                    <input name="destination" type="email" placeholder="you@example.com" />
+                  </label>
+                  <button className="primary" disabled={busy}>
+                    Add rule
+                  </button>
+                </form>
+              )}
+              {data.rules.length ? (
+                <div className="table-wrap">
+                  <table className="email-table">
+                    <thead>
+                      <tr>
+                        <th>Name</th>
+                        <th>Match</th>
+                        <th>Action</th>
+                        <th>Enabled</th>
+                        <th></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {data.rules.map((rule) => (
+                        <tr key={rule.id}>
+                          <td>{rule.name}</td>
+                          <td>
+                            {rule.matcher === "all"
+                              ? "Catch-all"
+                              : rule.custom_address || rule.matcher}
+                          </td>
+                          <td>
+                            {rule.action === "drop"
+                              ? "Drop"
+                              : `Forward to ${rule.destination}`}
+                          </td>
+                          <td>{rule.enabled ? "Yes" : "No"}</td>
+                          <td>
+                            {canWrite && (
+                              <span className="row-actions">
+                                <button
+                                  className="text-button"
+                                  disabled={busy}
+                                  onClick={() =>
+                                    run(async () => {
+                                      await api(`cloudflare/email/rules/${rule.id}`, {
+                                        method: "PUT",
+                                        body: JSON.stringify({
+                                          ...rule,
+                                          enabled: !rule.enabled,
+                                        }),
+                                      });
+                                      setNotice(
+                                        rule.enabled ? "Rule disabled." : "Rule enabled.",
+                                      );
+                                    })
+                                  }
+                                >
+                                  {rule.enabled ? "Disable" : "Enable"}
+                                </button>
+                                <button
+                                  className="text-button danger-text"
+                                  disabled={busy}
+                                  onClick={() => {
+                                    if (
+                                      window.confirm(`Delete “${rule.name}”?`)
+                                    )
+                                      run(() =>
+                                        api(
+                                          `cloudflare/email/rules/${rule.id}?domain=${encodeURIComponent((rule.custom_address || "").split("@").pop() || "")}`,
+                                          { method: "DELETE" },
+                                        ),
+                                      );
+                                  }}
+                                >
+                                  <Trash2 size={14} />
+                                  Delete
+                                </button>
+                              </span>
+                            )}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                <div className="empty">
+                  <Mail size={30} />
+                  <h3>No routing rules</h3>
+                  <p>Add a custom address or a catch-all forward.</p>
+                </div>
+              )}
+            </section>
+          </div>
+        )
+      )}
+    </>
+  );
+}