@graph8/sdk 0.308.1 → 0.358.0

package/blocks/mailboxes/components/connect-mailbox.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+/**
+ * ConnectMailbox: add a sending mailbox three ways: connect one you own over IMAP/SMTP, connect Google or
+ * Microsoft (done in the graph8 app), or buy new mailboxes on a domain you hold.
+ *
+ * SDK operations, in order:
+ *   IMAP/SMTP:  1. createMailbox          POST /mailboxes                       (write; credentials are write-only)
+ *               2. testMailboxConnection  POST /mailboxes/{mailbox_id}/test-connection (write; proves SMTP and IMAP)
+ *   Google/Microsoft: no API call. OAuth consent only runs in the graph8 app: a link button sends the person there.
+ *   Buy:        1. listProviderDomains    GET  /provider-domains                (read; connected domains only)
+ *               2. getSendingPricing      GET  /provider-domains/pricing        (read; credits per mailbox and warmup month)
+ *               3. checkoutPurchaseMailboxes POST /provider-domains/{domain_id}/checkout-mailboxes
+ *                                         (billable: SPENDS REAL CREDITS, confirmed with an estimate, sent with an Idempotency-Key)
+ *
+ * The `id` that createMailbox returns feeds testMailboxConnection. A domain's `id` from listProviderDomains
+ * feeds the purchase. The domain must be connected first (DomainPurchase does that).
+ */
+
+import { useRef, useState } from "react";
+import { Button, Input } from "@graph8/sdk/ui";
+import { g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { DEFAULT_MAILBOX_CREDITS, GRAPH8_APP_MAILBOXES_URL, listOf, newIdempotencyKey, objectOf } from "../lib/mailboxes-utils";
+import type { DomainRow } from "../lib/mailboxes-utils";
+
+export interface ConnectMailboxProps {
+  /** Where the person connects Google or Microsoft. Default: graph8 Settings > Purchase > Mailboxes. */
+  appUrl?: string;
+  /** Called with the new mailbox id once an IMAP/SMTP mailbox is saved AND its connection test passes. */
+  onConnected?: (mailboxId: number | string) => void;
+  /** Called with the domain id after mailboxes were bought on it. */
+  onPurchased?: (domainId: number | string) => void;
+  className?: string;
+}
+
+type Mode = "imap" | "oauth" | "buy";
+
+const EMPTY = {
+  email: "",
+  display_name: "",
+  smtp_address: "",
+  smtp_port: "465",
+  smtp_username: "",
+  smtp_password: "",
+  imap_address: "",
+  imap_port: "993",
+  imap_username: "",
+  imap_password: "",
+  daily_limit: "40",
+};
+
+function ImapForm({ onConnected }: { onConnected?: (id: number | string) => void }) {
+  const [form, setForm] = useState(EMPTY);
+  const [result, setResult] = useState<string | null>(null);
+  // Step 1 (create) must not repeat when step 2 (test) fails, even if the person then fixes a password.
+  // The created mailbox is remembered by its email address; changed credentials are PATCHed onto it.
+  const created = useRef<{ email: string; id: number; sig: string } | null>(null);
+  const connect = useG8Mutation(async () => {
+    const body = {
+      ...form,
+      smtp_port: Number(form.smtp_port),
+      imap_port: Number(form.imap_port),
+      daily_limit: Number(form.daily_limit),
+      smtp_username: form.smtp_username || form.email,
+      imap_username: form.imap_username || form.email,
+      display_name: form.display_name || undefined,
+    };
+    const sig = JSON.stringify(body);
+    const known = created.current?.email === form.email.trim().toLowerCase() ? created.current : null;
+    if (!known) {
+      const res = await g8Post<{ id: number }>("/mailboxes", body);
+      if (res.data?.id == null) throw new Error("graph8 did not return the new mailbox id");
+      created.current = { email: form.email.trim().toLowerCase(), id: res.data.id, sig };
+    } else if (known.sig !== sig) {
+      const { email: _email, ...changes } = body;
+      await g8Patch(`/mailboxes/${known.id}`, changes);
+      created.current = { ...known, sig };
+    }
+    const id = created.current!.id;
+    const test = objectOf(await g8Post(`/mailboxes/${id}/test-connection`, {})) as { success?: boolean };
+    setResult(
+      test.success ? "Connected: SMTP and IMAP both work." : "Saved, but the connection test failed. Check the host, port and password.",
+    );
+    // Only report a mailbox that actually connects; a saved-but-failing one is not yet usable.
+    if (id != null && test.success) onConnected?.(id);
+  });
+  const set = (key: keyof typeof EMPTY) => (e: React.ChangeEvent<HTMLInputElement>) => setForm({ ...form, [key]: e.target.value });
+  const ready = form.email && form.smtp_address && form.smtp_password && form.imap_address && form.imap_password;
+  return (
+    <form
+      className="space-y-3"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (ready) void connect.mutate(undefined);
+      }}
+    >
+      <div className="grid gap-2 sm:grid-cols-2">
+        <Input aria-label="Email address" placeholder="you@yourdomain.com" value={form.email} onChange={set("email")} />
+        <Input aria-label="Display name" placeholder="Display name (optional)" value={form.display_name} onChange={set("display_name")} />
+        <Input aria-label="SMTP host" placeholder="smtp.yourhost.com" value={form.smtp_address} onChange={set("smtp_address")} />
+        <Input aria-label="SMTP port" value={form.smtp_port} onChange={set("smtp_port")} />
+        <Input aria-label="SMTP username" placeholder="Defaults to the email" value={form.smtp_username} onChange={set("smtp_username")} />
+        <Input
+          aria-label="SMTP password"
+          type="password"
+          autoComplete="new-password"
+          value={form.smtp_password}
+          onChange={set("smtp_password")}
+        />
+        <Input aria-label="IMAP host" placeholder="imap.yourhost.com" value={form.imap_address} onChange={set("imap_address")} />
+        <Input aria-label="IMAP port" value={form.imap_port} onChange={set("imap_port")} />
+        <Input aria-label="IMAP username" placeholder="Defaults to the email" value={form.imap_username} onChange={set("imap_username")} />
+        <Input
+          aria-label="IMAP password"
+          type="password"
+          autoComplete="new-password"
+          value={form.imap_password}
+          onChange={set("imap_password")}
+        />
+        <Input aria-label="Daily send limit" value={form.daily_limit} onChange={set("daily_limit")} />
+      </div>
+      <Button type="submit" disabled={!ready || connect.loading}>
+        {connect.loading ? "Connecting..." : "Connect mailbox"}
+      </Button>
+      {connect.error ? <ApiError error={connect.error} onRetry={connect.reset} /> : null}
+      {result ? (
+        <p role="status" className="text-sm text-gray-700">
+          {result}
+        </p>
+      ) : null}
+    </form>
+  );
+}
+
+function BuyForm({ onPurchased }: { onPurchased?: (id: number | string) => void }) {
+  const domains = useG8Query((signal) => g8Get("/provider-domains", { page: 1, limit: 100 }, { signal }), []);
+  const pricing = useG8Query((signal) => g8Get("/provider-domains/pricing", undefined, { signal }), []);
+  const [domainId, setDomainId] = useState("");
+  const [usernames, setUsernames] = useState("");
+  const [person, setPerson] = useState({ first_name: "", last_name: "" });
+  const [platform, setPlatform] = useState<"GOOGLE" | "MICROSOFT">("GOOGLE");
+  const [warmup, setWarmup] = useState(true);
+  const [confirming, setConfirming] = useState(false);
+  const key = useRef<{ sig: string; value: string } | null>(null);
+  const [done, setDone] = useState<string | null>(null);
+
+  const names = usernames
+    .split(/[\s,]+/)
+    .map((n) => n.trim())
+    .filter(Boolean);
+  const perMailbox = Number(objectOf(pricing.data).credits_per_mailbox) || DEFAULT_MAILBOX_CREDITS;
+  const buy = useG8Mutation(async () => {
+    const body = { mailboxes: names.map((username) => ({ username, ...person })), enable_warmup: warmup, provider: "managed", platform };
+    // Same purchase retried (a timeout, a double click) reuses its key so it cannot be bought twice.
+    const sig = `${domainId}:${JSON.stringify(body)}`;
+    if (key.current?.sig !== sig) key.current = { sig, value: newIdempotencyKey() };
+    const res = objectOf(await g8Post(`/provider-domains/${domainId}/checkout-mailboxes`, body, { idempotencyKey: key.current.value }));
+    setDone(`Accepted ${res.count ?? names.length} mailbox${names.length === 1 ? "" : "es"}; provisioning continues in the background.`);
+    onPurchased?.(domainId);
+  });
+  const connected = listOf<DomainRow>(domains.data).filter((d) => d.provider_connected);
+  const ready = domainId && names.length > 0 && person.first_name.trim() && person.last_name.trim();
+
+  return (
+    <div className="space-y-3">
+      {domains.error ? <ApiError error={domains.error} onRetry={() => void domains.refetch()} /> : null}
+      {!domains.loading && connected.length === 0 ? (
+        <p className="text-sm text-gray-600">No connected domain yet. Buy and connect one with DomainPurchase first.</p>
+      ) : (
+        <div className="grid gap-2 sm:grid-cols-2">
+          <select
+            aria-label="Domain"
+            className="h-9 rounded-md border border-gray-300 px-2 text-sm"
+            value={domainId}
+            onChange={(e) => setDomainId(e.target.value)}
+          >
+            <option value="">Choose a domain</option>
+            {connected.map((d) => (
+              <option key={d.id} value={d.id}>
+                {d.domain}
+              </option>
+            ))}
+          </select>
+          <select
+            aria-label="Platform"
+            className="h-9 rounded-md border border-gray-300 px-2 text-sm"
+            value={platform}
+            onChange={(e) => setPlatform(e.target.value as "GOOGLE" | "MICROSOFT")}
+          >
+            <option value="GOOGLE">Google</option>
+            <option value="MICROSOFT">Microsoft</option>
+          </select>
+          <Input
+            aria-label="Mailbox usernames"
+            placeholder="sales, hello (the part before @)"
+            value={usernames}
+            onChange={(e) => setUsernames(e.target.value)}
+          />
+          <label className="flex items-center gap-2 text-sm">
+            <input type="checkbox" checked={warmup} onChange={(e) => setWarmup(e.target.checked)} />
+            Start warmup
+          </label>
+          <Input
+            aria-label="Sender first name"
+            placeholder="First name"
+            value={person.first_name}
+            onChange={(e) => setPerson({ ...person, first_name: e.target.value })}
+          />
+          <Input
+            aria-label="Sender last name"
+            placeholder="Last name"
+            value={person.last_name}
+            onChange={(e) => setPerson({ ...person, last_name: e.target.value })}
+          />
+        </div>
+      )}
+      <Button disabled={!ready} onClick={() => setConfirming(true)}>
+        Buy {names.length || ""} mailbox{names.length === 1 ? "" : "es"}
+      </Button>
+      {buy.error ? <ApiError error={buy.error} onRetry={buy.reset} /> : null}
+      {done ? (
+        <p role="status" className="text-sm text-green-700">
+          {done}
+        </p>
+      ) : null}
+      {confirming ? (
+        <ConfirmSpendDialog
+          open
+          tier="billable"
+          title={`Buy ${names.length} mailbox${names.length === 1 ? "" : "es"}: ${names.join(", ")}`}
+          description="Mailboxes are billed monthly while they exist, plus warmup if enabled. This is an estimate: graph8 has no balance read."
+          estimatedCredits={names.length * perMailbox}
+          confirmLabel="Buy mailboxes"
+          confirming={buy.loading}
+          onCancel={() => setConfirming(false)}
+          onConfirm={() => void buy.mutate(undefined).then(() => setConfirming(false))}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export function ConnectMailbox({ appUrl = GRAPH8_APP_MAILBOXES_URL, onConnected, onPurchased, className }: ConnectMailboxProps) {
+  const [mode, setMode] = useState<Mode>("imap");
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      <div className="inline-flex gap-1" role="group" aria-label="How to add a mailbox">
+        <Button size="sm" variant={mode === "imap" ? "default" : "outline"} aria-pressed={mode === "imap"} onClick={() => setMode("imap")}>
+          IMAP / SMTP
+        </Button>
+        <Button
+          size="sm"
+          variant={mode === "oauth" ? "default" : "outline"}
+          aria-pressed={mode === "oauth"}
+          onClick={() => setMode("oauth")}
+        >
+          Google / Microsoft
+        </Button>
+        <Button size="sm" variant={mode === "buy" ? "default" : "outline"} aria-pressed={mode === "buy"} onClick={() => setMode("buy")}>
+          Buy new
+        </Button>
+      </div>
+      {mode === "imap" ? <ImapForm onConnected={onConnected} /> : null}
+      {mode === "oauth" ? (
+        <div className="space-y-2 rounded border border-gray-200 p-3 text-sm">
+          <p>
+            Google and Microsoft mailboxes connect through a sign-in screen that only runs inside the graph8 app. Connect it there, then
+            come back: it appears in your mailbox list.
+          </p>
+          <Button asChild>
+            <a href={appUrl} target="_blank" rel="noreferrer">
+              Open graph8 to connect
+            </a>
+          </Button>
+        </div>
+      ) : null}
+      {mode === "buy" ? <BuyForm onPurchased={onPurchased} /> : null}
+    </div>
+  );
+}

package/blocks/mailboxes/components/domain-purchase.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+/**
+ * DomainPurchase: find, check and buy sending domains, then connect them so mailboxes can be bought on them.
+ *
+ * SDK operations, in order:
+ *   1. generateDomainNames     POST /provider-domains/generate-domains   (read; ideas around a keyword)
+ *   2. checkDomainAvailability POST /provider-domains/check-availability (billable tier but documented to
+ *                              spend NO credits; still confirmed once per batch, the dialog says 0 credits)
+ *   3. checkoutPurchaseDomains POST /provider-domains/checkout-purchase  (billable: SPENDS REAL CREDITS,
+ *                              confirmed with the estimate; sent with an Idempotency-Key)
+ *   4. listProviderDomains     GET  /provider-domains                    (read; status, mailbox_count, connected)
+ *   5. connectProvider         POST /provider-domains/{domain_id}/connect-provider    (billable: confirmed)
+ *      checkDomainPropagation  POST /provider-domains/{domain_id}/check-propagation   (billable: confirmed)
+ *
+ * Ids passed between steps: names from 1 feed 2; the available ones feed 3; the `id` of a row from 4 feeds 5.
+ * There is no credit-balance read: the dialog shows an ESTIMATE (2,500 credits held per domain). A 402
+ * means the hold could not clear; a 422 means the plan cannot fund purchases.
+ */
+
+import { useRef, useState } from "react";
+import { Button, Input, Skeleton } from "@graph8/sdk/ui";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DEFAULT_DOMAIN_CREDITS, listOf, newIdempotencyKey, objectOf, statusClass } from "../lib/mailboxes-utils";
+import type { DomainRow } from "../lib/mailboxes-utils";
+
+export interface DomainPurchaseProps {
+  /** Called after a purchase was accepted (provisioning continues in the background). */
+  onPurchased?: (domains: string[]) => void;
+  className?: string;
+}
+
+interface Availability {
+  domain: string;
+  available?: boolean;
+  price?: number | null;
+  banned?: boolean;
+}
+
+type Pending =
+  { kind: "check"; domains: string[] } | { kind: "buy"; domains: string[] } | { kind: "connect" | "propagation"; domain: DomainRow };
+
+function suggestionsOf(envelope: unknown): string[] {
+  const data = (envelope as { data?: unknown } | null)?.data;
+  const raw = Array.isArray(data)
+    ? data
+    : ((data as Record<string, unknown> | null)?.domains ?? (data as Record<string, unknown> | null)?.suggestions ?? []);
+  return (raw as unknown[]).map((x) => (typeof x === "string" ? x : String((x as { domain?: string }).domain ?? ""))).filter(Boolean);
+}
+
+export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps) {
+  const [keyword, setKeyword] = useState("");
+  const [names, setNames] = useState<string[]>([]);
+  const [selected, setSelected] = useState<string[]>([]);
+  const [avail, setAvail] = useState<Record<string, Availability>>({});
+  const [contact, setContact] = useState({ first_name: "", last_name: "", email: "" });
+  const [pending, setPending] = useState<Pending | null>(null);
+  const [note, setNote] = useState<string | null>(null);
+  const idemKey = useRef<{ sig: string; key: string } | null>(null);
+
+  const domains = useG8Query((signal) => g8Get("/provider-domains", { page: 1, limit: 50 }, { signal }), []);
+  const suggest = useG8Mutation(async () => {
+    setNames(suggestionsOf(await g8Post("/provider-domains/generate-domains", { keyword: keyword.trim(), count: 10 })));
+    setSelected([]);
+    setAvail({});
+  });
+  const run = useG8Mutation(async (p: Pending) => {
+    if (p.kind === "check") {
+      const results = await Promise.allSettled(
+        p.domains.map((domain) => g8Post("/provider-domains/check-availability", { domain, provider: "registrar" })),
+      );
+      const found: Record<string, Availability> = {};
+      results.forEach((r, i) => {
+        if (r.status === "fulfilled") found[p.domains[i]] = { domain: p.domains[i], ...(objectOf(r.value) as Partial<Availability>) };
+      });
+      setAvail((a) => ({ ...a, ...found }));
+      const failed = results.length - Object.keys(found).length;
+      setNote(failed ? `Checked ${Object.keys(found).length} of ${results.length} domains; ${failed} failed. Check those again.` : null);
+    } else if (p.kind === "buy") {
+      const body = { domains: p.domains, period: 1, contact_info: contact, provider: "registrar" };
+      const sig = JSON.stringify(body);
+      if (idemKey.current?.sig !== sig) idemKey.current = { sig, key: newIdempotencyKey() };
+      await g8Post("/provider-domains/checkout-purchase", body, { idempotencyKey: idemKey.current.key });
+      setNote(`Purchase accepted for ${p.domains.join(", ")}. Provisioning continues in the background.`);
+      setSelected([]);
+      onPurchased?.(p.domains);
+      await domains.refetch();
+    } else if (p.kind === "connect") {
+      await g8Post(`/provider-domains/${p.domain.id}/connect-provider`, {});
+      setNote(`${p.domain.domain} is connecting. Check propagation in a few minutes.`);
+      await domains.refetch();
+    } else {
+      const status = objectOf(await g8Post(`/provider-domains/${p.domain.id}/check-propagation`, {}));
+      setNote(status.propagated ? `${p.domain.domain} has propagated.` : `${p.domain.domain} has not propagated yet.`);
+    }
+  });
+
+  const toggle = (d: string) => setSelected((s) => (s.includes(d) ? s.filter((x) => x !== d) : [...s, d]));
+  const buyable = selected.filter((d) => avail[d]?.available);
+  const contactOk = contact.first_name.trim() && contact.last_name.trim() && /\S+@\S+/.test(contact.email);
+  const rows = listOf<DomainRow>(domains.data);
+
+  const dialog = (() => {
+    if (!pending) return null;
+    if (pending.kind === "check")
+      return {
+        title: `Check ${pending.domains.length} domain${pending.domains.length === 1 ? "" : "s"}`,
+        description: "Looks up availability and price. The API documents no charge for this check.",
+        credits: 0,
+        label: "Check availability",
+      };
+    if (pending.kind === "buy")
+      return {
+        title: `Buy ${pending.domains.join(", ")}`,
+        description: "Registers the domains for 1 year and holds credits now.",
+        credits: pending.domains.length * DEFAULT_DOMAIN_CREDITS,
+        label: "Buy domains",
+      };
+    if (pending.kind === "connect")
+      return {
+        title: `Connect ${pending.domain.domain}`,
+        description: "Connects the domain to mailbox provisioning. Required before buying mailboxes on it.",
+        credits: undefined,
+        label: "Connect domain",
+      };
+    return {
+      title: `Check DNS propagation for ${pending.domain.domain}`,
+      description: "Asks the provider whether the nameservers have propagated.",
+      credits: undefined,
+      label: "Check propagation",
+    };
+  })();
+
+  return (
+    <div className={`space-y-5 ${className ?? ""}`}>
+      <section className="space-y-2 rounded border border-gray-200 p-3">
+        <h3 className="text-sm font-semibold">Find a domain</h3>
+        <form
+          className="flex gap-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (keyword.trim()) void suggest.mutate(undefined);
+          }}
+        >
+          <Input aria-label="Brand keyword" placeholder="acme" value={keyword} onChange={(e) => setKeyword(e.target.value)} />
+          <Button type="submit" variant="outline" disabled={suggest.loading}>
+            Suggest names
+          </Button>
+        </form>
+        {suggest.error ? <ApiError error={suggest.error} onRetry={suggest.reset} /> : null}
+        {names.length > 0 ? (
+          <ul className="grid gap-1 sm:grid-cols-2">
+            {names.map((d) => (
+              <li key={d}>
+                <label className="flex items-center gap-2 text-sm">
+                  <input type="checkbox" checked={selected.includes(d)} onChange={() => toggle(d)} />
+                  {d}
+                  {avail[d] ? (
+                    <span
+                      className={`rounded px-1.5 text-xs ${avail[d].available ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`}
+                    >
+                      {avail[d].available
+                        ? `available${avail[d].price != null ? ` ${avail[d].price}` : ""}`
+                        : avail[d].banned
+                          ? "blocked"
+                          : "taken"}
+                    </span>
+                  ) : null}
+                </label>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={selected.length === 0}
+          onClick={() => setPending({ kind: "check", domains: selected })}
+        >
+          Check availability ({selected.length})
+        </Button>
+      </section>
+
+      <section className="space-y-2 rounded border border-gray-200 p-3">
+        <h3 className="text-sm font-semibold">Registrant</h3>
+        <div className="grid gap-2 sm:grid-cols-3">
+          <Input
+            aria-label="First name"
+            placeholder="First name"
+            value={contact.first_name}
+            onChange={(e) => setContact({ ...contact, first_name: e.target.value })}
+          />
+          <Input
+            aria-label="Last name"
+            placeholder="Last name"
+            value={contact.last_name}
+            onChange={(e) => setContact({ ...contact, last_name: e.target.value })}
+          />
+          <Input
+            aria-label="Registrant email"
+            placeholder="Email"
+            value={contact.email}
+            onChange={(e) => setContact({ ...contact, email: e.target.value })}
+          />
+        </div>
+        <Button disabled={buyable.length === 0 || !contactOk} onClick={() => setPending({ kind: "buy", domains: buyable })}>
+          Buy {buyable.length} domain{buyable.length === 1 ? "" : "s"}
+        </Button>
+      </section>
+
+      {note ? (
+        <p role="status" className="text-sm text-gray-700">
+          {note}
+        </p>
+      ) : null}
+      {run.error ? <ApiError error={run.error} onRetry={run.reset} /> : null}
+
+      <section aria-label="Your domains">
+        {domains.error ? (
+          <ApiError error={domains.error} onRetry={() => void domains.refetch()} />
+        ) : domains.loading && !domains.data ? (
+          <Skeleton className="h-16 w-full" />
+        ) : rows.length === 0 ? (
+          <EmptyState title="No sending domains yet" description="Buy one above, or add a domain you already own in the graph8 app." />
+        ) : (
+          <ul className="divide-y rounded border border-gray-200">
+            {rows.map((d) => (
+              <li key={d.id} className="flex flex-wrap items-center justify-between gap-2 px-3 py-2 text-sm">
+                <span>
+                  <span className="font-medium">{d.domain}</span>{" "}
+                  <span className={`rounded px-1.5 text-xs ${statusClass(d.status)}`}>{d.status ?? "unknown"}</span>{" "}
+                  <span className="text-xs text-gray-500">{d.mailbox_count ?? 0} mailboxes</span>
+                </span>
+                <span className="flex gap-1">
+                  {!d.provider_connected && !d.is_external ? (
+                    <Button size="sm" variant="outline" onClick={() => setPending({ kind: "connect", domain: d })}>
+                      Connect
+                    </Button>
+                  ) : (
+                    <Button size="sm" variant="ghost" onClick={() => setPending({ kind: "propagation", domain: d })}>
+                      Check DNS
+                    </Button>
+                  )}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      {pending && dialog ? (
+        <ConfirmSpendDialog
+          open
+          tier="billable"
+          title={dialog.title}
+          description={dialog.description}
+          estimatedCredits={dialog.credits}
+          confirmLabel={dialog.label}
+          confirming={run.loading}
+          onCancel={() => setPending(null)}
+          onConfirm={() => void run.mutate(pending).then(() => setPending(null))}
+        />
+      ) : null}
+    </div>
+  );
+}