@graph8/sdk 0.362.0 → 0.373.0

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

@@ -0,0 +1,148 @@
+"use client";
+
+/**
+ * DomainDetail: one sending domain, complete. Every field, the mailboxes on it, and every action: connect it
+ * to mailbox provisioning, check DNS propagation, buy mailboxes on it.
+ *
+ * SDK operations, in order:
+ *   1. listProviderDomains   GET  /provider-domains                        (read; the row for this domain)
+ *   2. listMailboxes         GET  /mailboxes                               (read; mailboxes whose address ends with the domain)
+ *   3. connectProvider       POST /provider-domains/{domain_id}/connect-provider    (billable tier: confirmed)
+ *   4. checkDomainPropagation POST /provider-domains/{domain_id}/check-propagation  (billable tier: confirmed)
+ *   Buying mailboxes is the ConnectMailbox "Buy" tab, opened by `onBuyMailboxes` (confirmed with a credit estimate there).
+ *
+ * Tiers: 3 and 4 are billable in the contract (no credit estimate is known), so each opens ConfirmSpendDialog.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { FirstNotice } from "@/g8/components/paging-notices";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { fieldItems, listOf, objectOf } from "../lib/mailboxes-utils";
+import { useProviderDomains } from "../lib/use-provider-domains";
+import type { DomainRow, MailboxRow } from "../lib/mailboxes-utils";
+
+export interface DomainDetailProps {
+  domainId: string | number;
+  onClose?: () => void;
+  /** Full-page mode: show an "Open full page" (onExpand) or "Back to split view" (onCollapse) button. */
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  /** Called after a connect so a list can refresh. */
+  onChanged?: () => void;
+  /** Open the Buy tab of ConnectMailbox for this domain (a screen shows it in a sheet). */
+  onBuyMailboxes?: (domain: DomainRow) => void;
+  onOpenMailbox?: (mailbox: MailboxRow) => void;
+  renderActions?: (domain: DomainRow) => ReactNode;
+  className?: string;
+}
+
+type Pending = "connect" | "propagation";
+
+/** The mailboxes API has no paging: a full read is announced where the mailboxes are listed. */
+const MAILBOX_LIMIT = 200;
+
+export function DomainDetail({ domainId, onClose, onExpand, onCollapse, onChanged, onBuyMailboxes, onOpenMailbox, renderActions, className }: DomainDetailProps) {
+  const [pending, setPending] = useState<Pending | null>(null);
+  const [note, setNote] = useState<string | null>(null);
+  const domains = useProviderDomains([domainId]);
+  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: MAILBOX_LIMIT }, { signal }), [domainId]);
+
+  const row = domains.items.find((d) => String(d.id) === String(domainId));
+  const run = useG8Mutation(async (p: Pending) => {
+    if (p === "connect") {
+      await g8Post(`/provider-domains/${domainId}/connect-provider`, {});
+      setNote(`${row?.domain ?? "The domain"} is connecting. Check propagation in a few minutes.`);
+      await domains.refetch();
+      onChanged?.();
+    } else {
+      const status = objectOf(await g8Post(`/provider-domains/${domainId}/check-propagation`, {}));
+      setNote(status.propagated ? `${row?.domain} has propagated.` : `${row?.domain} has not propagated yet.`);
+    }
+    setPending(null);
+  }, { onError: () => setPending(null) });
+
+  if (domains.error) return <ApiError error={domains.error} title="Could not load the domain" onRetry={() => void domains.refetch()} className={className} />;
+  if (domains.loading && !domains.loaded) return <Skeleton className={`h-48 w-full ${className ?? ""}`} />;
+  if (!row) return <p className={`p-4 text-sm ${className ?? ""}`}>This domain no longer exists.</p>;
+
+  const onDomain = listOf<MailboxRow>(mailboxes.data).filter((m) => (m.email ?? "").toLowerCase().endsWith(`@${row.domain.toLowerCase()}`));
+  return (
+    <DetailPanel
+      className={className}
+      title={row.domain}
+      subtitle={row.source ?? undefined}
+      badges={
+        <>
+          <StatusPill tone={row.provider_connected ? "positive" : "warning"} dot>{row.provider_connected ? "Connected" : "Not connected"}</StatusPill>
+          {row.status ? <StatusPill tone="neutral">{row.status}</StatusPill> : null}
+        </>
+      }
+      actions={
+        <>
+          {!row.provider_connected ? <Button size="sm" variant="outline" onClick={() => setPending("connect")}>Connect domain</Button> : null}
+          <Button size="sm" variant="outline" onClick={() => setPending("propagation")}>Check DNS</Button>
+          <Button size="sm" disabled={!row.provider_connected || !onBuyMailboxes} onClick={() => onBuyMailboxes?.(row)}>Buy mailboxes</Button>
+          {renderActions?.(row)}
+          <ConfirmSpendDialog
+            open={pending !== null}
+            tier="billable"
+            title={pending === "connect" ? `Connect ${row.domain}` : `Check DNS propagation for ${row.domain}`}
+            description={pending === "connect" ? "Connects the domain to mailbox provisioning. Required before buying mailboxes on it." : "Asks the provider whether the nameservers have propagated."}
+            confirmLabel={pending === "connect" ? "Connect domain" : "Check propagation"}
+            confirming={run.loading}
+            onCancel={() => setPending(null)}
+            onConfirm={() => pending && void run.mutate(pending)}
+          />
+        </>
+      }
+      summary={note ? <p role="status" className="text-sm">{note}</p> : undefined}
+      onClose={onClose}
+      onExpand={onExpand}
+      onCollapse={onCollapse}
+      tabs={[
+        {
+          id: "details",
+          label: "Details",
+          content: (
+            <div className="space-y-4">
+              {run.error ? <ApiError error={run.error} onRetry={run.reset} /> : null}
+              <KeyValueList columns={2} items={fieldItems(row as unknown as Record<string, unknown>)} />
+            </div>
+          ),
+        },
+        {
+          id: "mailboxes",
+          label: "Mailboxes",
+          count: onDomain.length,
+          content: (
+            <SectionCard title="Mailboxes on this domain" description="Open one for warmup and health.">
+              {onDomain.length === 0 ? (
+                <p className="text-sm text-muted-foreground">{row.provider_connected ? "No mailboxes yet. Buy some with the button above." : "Connect the domain first, then buy mailboxes on it."}</p>
+              ) : (
+                <ul className="divide-y">
+                  {onDomain.map((m) => (
+                    <li key={m.id} className="flex items-center justify-between py-2 text-sm">
+                      <Button variant="ghost" size="sm" onClick={() => onOpenMailbox?.(m)}>{m.email}</Button>
+                      <StatusPill tone={m.connection_status === "active" ? "positive" : "warning"} dot>{m.connection_status ?? "unknown"}</StatusPill>
+                    </li>
+                  ))}
+                </ul>
+              )}
+              <FirstNotice shown={listOf<MailboxRow>(mailboxes.data).length} limit={MAILBOX_LIMIT} noun="mailboxes" />
+            </SectionCard>
+          ),
+        },
+      ]}
+    />
+  );
+}

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

@@ -24,10 +24,14 @@ 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 { FirstNotice } from "@/g8/components/paging-notices";
 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 { useProviderDomains } from "../lib/use-provider-domains";
 import type { DomainRow } from "../lib/mailboxes-utils";
+import { plural } from "@/g8/lib/plural";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface DomainPurchaseProps {
   /** Called after a purchase was accepted (provisioning continues in the background). */
@@ -54,6 +58,7 @@ function suggestionsOf(envelope: unknown): string[] {
 }
 
 export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps) {
+  const brand = useBrand();
   const [keyword, setKeyword] = useState("");
   const [names, setNames] = useState<string[]>([]);
   const [selected, setSelected] = useState<string[]>([]);
@@ -63,7 +68,7 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
   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 domains = useProviderDomains([]);
   const suggest = useG8Mutation(async () => {
     setNames(suggestionsOf(await g8Post("/provider-domains/generate-domains", { keyword: keyword.trim(), count: 10 })));
     setSelected([]);
@@ -103,13 +108,13 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
   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 rows = domains.items;
 
   const dialog = (() => {
     if (!pending) return null;
     if (pending.kind === "check")
       return {
-        title: `Check ${pending.domains.length} domain${pending.domains.length === 1 ? "" : "s"}`,
+        title: `Check ${plural(pending.domains.length, "domain")}`,
         description: "Looks up availability and price. The API documents no charge for this check.",
         credits: 0,
         label: "Check availability",
@@ -138,8 +143,8 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
 
   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>
+      <section className="space-y-2 rounded border border-border p-3">
+        <h3 className="text-sm font-medium">Find a domain</h3>
         <form
           className="flex gap-2"
           onSubmit={(e) => {
@@ -162,7 +167,7 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
                   {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"}`}
+                      className={`rounded px-1.5 text-xs ${avail[d].available ? "bg-positive text-positive-foreground" : "bg-error text-error-foreground"}`}
                     >
                       {avail[d].available
                         ? `available${avail[d].price != null ? ` ${avail[d].price}` : ""}`
@@ -186,8 +191,8 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
         </Button>
       </section>
 
-      <section className="space-y-2 rounded border border-gray-200 p-3">
-        <h3 className="text-sm font-semibold">Registrant</h3>
+      <section className="space-y-2 rounded border border-border p-3">
+        <h3 className="text-sm font-medium">Registrant</h3>
         <div className="grid gap-2 sm:grid-cols-3">
           <Input
             aria-label="First name"
@@ -209,12 +214,12 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
           />
         </div>
         <Button disabled={buyable.length === 0 || !contactOk} onClick={() => setPending({ kind: "buy", domains: buyable })}>
-          Buy {buyable.length} domain{buyable.length === 1 ? "" : "s"}
+          Buy {plural(buyable.length, "domain")}
         </Button>
       </section>
 
       {note ? (
-        <p role="status" className="text-sm text-gray-700">
+        <p role="status" className="text-sm text-foreground">
           {note}
         </p>
       ) : null}
@@ -223,18 +228,18 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
       <section aria-label="Your domains">
         {domains.error ? (
           <ApiError error={domains.error} onRetry={() => void domains.refetch()} />
-        ) : domains.loading && !domains.data ? (
+        ) : domains.loading && !domains.loaded ? (
           <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." />
+          <EmptyState title="No sending domains yet" description={`Buy one above, or add a domain you already own in the ${brand.linkLabel} app.`} />
         ) : (
-          <ul className="divide-y rounded border border-gray-200">
+          <ul className="divide-y rounded border border-border">
             {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 className="text-xs text-muted-foreground">{d.mailbox_count ?? 0} mailboxes</span>
                 </span>
                 <span className="flex gap-1">
                   {!d.provider_connected && !d.is_external ? (
@@ -251,6 +256,7 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
             ))}
           </ul>
         )}
+        <FirstNotice shown={rows.length} limit={rows.length} force={domains.truncated} noun="domains" />
       </section>
 
       {pending && dialog ? (

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

@@ -0,0 +1,157 @@
+"use client";
+
+/**
+ * MailboxDetail: one mailbox, complete. Every field the API returns, the domain it sits on, its warmup and
+ * deliverability, and every action: test the connection, archive or restore, delete.
+ *
+ * SDK operations, in order:
+ *   1. getMailbox             GET    /mailboxes/{mailbox_id}                (read; all fields)
+ *   2. listProviderDomains    GET    /provider-domains                      (read; finds the domain this address sits on)
+ *   3. testMailboxConnection  POST   /mailboxes/{mailbox_id}/test-connection (write; SMTP and IMAP, no spend)
+ *   4. archiveMailbox         POST   /mailboxes/{mailbox_id}/archive        (destructive: confirmed; `is_archived: false` restores)
+ *   5. deleteMailbox          DELETE /mailboxes/{mailbox_id}                (destructive: confirmed)
+ *   Warmup tab: WarmupHealth (analytics, start/stop warmup, confirmed placement test).
+ *
+ * Tiers: 4 and 5 are destructive, so each opens ConfirmSpendDialog. Credentials are write-only and never shown.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { fieldItems, listOf, objectOf } from "../lib/mailboxes-utils";
+import { useProviderDomains } from "../lib/use-provider-domains";
+import type { DomainRow, MailboxRow } from "../lib/mailboxes-utils";
+import { WarmupHealth } from "./warmup-health";
+import { useBrand } from "@/g8/hooks/use-brand";
+
+export interface MailboxDetailProps {
+  mailboxId: string | number;
+  /** Controlled tab ("details" | "warmup" | an extra tab id) and its change handler, for deep links. */
+  tab?: string;
+  onTabChange?: (tab: string) => void;
+  onClose?: () => void;
+  /** Full-page mode: show an "Open full page" (onExpand) or "Back to split view" (onCollapse) button. */
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  /** Called after archive, restore or delete so a list can refresh. */
+  onChanged?: () => void;
+  /** Open the domain this mailbox sits on. */
+  onOpenDomain?: (domain: DomainRow) => void;
+  renderActions?: (mailbox: MailboxRow) => ReactNode;
+  extraTabs?: { id: string; label: string; render: (mailbox: MailboxRow) => ReactNode }[];
+  className?: string;
+}
+
+type Pending = "archive" | "restore" | "delete";
+interface TestResult { success?: boolean; smtp?: { success?: boolean; error?: string }; imap?: { success?: boolean; error?: string } }
+
+export function MailboxDetail({ mailboxId, tab, onTabChange, onClose, onExpand, onCollapse, onChanged, onOpenDomain, renderActions, extraTabs, className }: MailboxDetailProps) {
+  const brand = useBrand();
+  const [pending, setPending] = useState<Pending | null>(null);
+  const [testNote, setTestNote] = useState<string | null>(null);
+  const q = useG8Query((signal) => g8Get(`/mailboxes/${mailboxId}`, undefined, { signal }), [mailboxId]);
+  const domains = useProviderDomains([]);
+
+  const test = useG8Mutation(async () => {
+    const r = objectOf(await g8Post(`/mailboxes/${mailboxId}/test-connection`, {})) as TestResult;
+    setTestNote(
+      r.success
+        ? "SMTP and IMAP both work"
+        : [r.smtp?.success === false && `SMTP: ${r.smtp.error ?? "failed"}`, r.imap?.success === false && `IMAP: ${r.imap.error ?? "failed"}`].filter(Boolean).join("; ") || "Connection failed",
+    );
+    await q.refetch();
+  });
+  const act = useG8Mutation(async (p: Pending) => {
+    if (p === "delete") await g8Delete(`/mailboxes/${mailboxId}`);
+    else await g8Post(`/mailboxes/${mailboxId}/archive`, { is_archived: p === "archive" });
+    setPending(null);
+    if (p === "delete") onClose?.();
+    else await q.refetch();
+    onChanged?.();
+  }, { onError: () => setPending(null) });
+
+  if (q.error) return <ApiError error={q.error} title="Could not load the mailbox" onRetry={() => void q.refetch()} className={className} />;
+  if (q.loading && !q.data) return <Skeleton className={`h-48 w-full ${className ?? ""}`} />;
+  const raw = objectOf(q.data);
+  const m = { id: String(mailboxId), email: null, ...raw } as MailboxRow;
+  const domain = (m.email ?? "").split("@")[1]?.toLowerCase();
+  const domainRow = domains.items.find((d) => d.domain?.toLowerCase() === domain);
+  const status = m.connection_status ?? "unknown";
+  const name = m.email ?? `Mailbox ${mailboxId}`;
+
+  return (
+    <DetailPanel
+      className={className}
+      title={name}
+      subtitle={[m.display_name, m.provider].filter(Boolean).join(" - ") || undefined}
+      avatar={<EntityAvatar name={m.display_name || name} size="lg" />}
+      badges={
+        <>
+          <StatusPill tone={status === "active" ? "positive" : status === "unknown" ? "neutral" : "warning"} dot>{status}</StatusPill>
+          {m.is_archived ? <StatusPill tone="neutral">archived</StatusPill> : null}
+        </>
+      }
+      actions={
+        <>
+          <Button size="sm" variant="outline" loading={test.loading} onClick={() => void test.mutate(undefined)}>Test connection</Button>
+          <Button size="sm" variant="outline" onClick={() => setPending(m.is_archived ? "restore" : "archive")}>{m.is_archived ? "Restore mailbox" : "Archive mailbox"}</Button>
+          <Button size="sm" variant="outline" onClick={() => setPending("delete")}>Delete mailbox</Button>
+          {renderActions?.(m)}
+          <ConfirmSpendDialog
+            open={pending !== null}
+            tier="destructive"
+            title={`${pending === "delete" ? "Delete" : pending === "restore" ? "Restore" : "Archive"} ${name}`}
+            description={
+              pending === "delete" ? "Sequences that send from it can no longer send. This cannot be undone."
+                : pending === "restore" ? "It comes back into pickers. Nothing is deleted."
+                  : "It disappears from pickers. History is kept and you can restore it."
+            }
+            confirmLabel={pending === "delete" ? "Delete mailbox" : pending === "restore" ? "Restore mailbox" : "Archive mailbox"}
+            affected={1}
+            confirming={act.loading}
+            onCancel={() => setPending(null)}
+            onConfirm={() => pending && void act.mutate(pending)}
+          />
+        </>
+      }
+      summary={testNote ? <p role="status" className="px-5 py-2 text-sm">{testNote}</p> : undefined}
+      onClose={onClose}
+      onExpand={onExpand}
+      onCollapse={onCollapse}
+      activeTab={tab}
+      onTabChange={onTabChange}
+      tabs={[
+        {
+          id: "details",
+          label: "Details",
+          content: (
+            <div className="space-y-4">
+              {test.error ? <ApiError error={test.error} onRetry={test.reset} /> : null}
+              {act.error ? <ApiError error={act.error} onRetry={act.reset} /> : null}
+              <KeyValueList columns={2} items={fieldItems(raw)} />
+              <SectionCard title="Domain" description="The sending domain this address belongs to.">
+                {domainRow ? (
+                  <Button size="sm" variant="outline" disabled={!onOpenDomain} onClick={() => onOpenDomain?.(domainRow)}>{domainRow.domain}</Button>
+                ) : (
+                  <p className="text-sm text-muted-foreground">{domain ? `${domain} is not a domain bought or connected through ${brand.linkLabel}.` : "No domain."}</p>
+                )}
+              </SectionCard>
+            </div>
+          ),
+        },
+        { id: "warmup", label: "Warmup and health", content: <WarmupHealth mailboxId={mailboxId} showFleet={false} /> },
+        ...(extraTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(m) })),
+      ]}
+    />
+  );
+}

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

@@ -22,9 +22,13 @@ 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 { FirstNotice } from "@/g8/components/paging-notices";
 import { listOf, objectOf, statusClass } from "../lib/mailboxes-utils";
 import type { MailboxRow } from "../lib/mailboxes-utils";
 
+/** The read cap. The mailboxes API has no paging, so a full read is announced ("Showing the first 200"). */
+const MAILBOX_LIMIT = 200;
+
 export interface MailboxListProps {
   includeArchived?: boolean;
   /** Called when a row is opened (for example to show WarmupHealth for it). */
@@ -47,7 +51,7 @@ export function MailboxList({ includeArchived = false, onSelect, emptyAction, cl
   const [tests, setTests] = useState<Record<string, string>>({});
   const [testing, setTesting] = useState<ReadonlySet<string>>(new Set());
   const list = useG8Query(
-    (signal) => g8Get("/mailboxes", { limit: 200, include_archived: includeArchived }, { signal }),
+    (signal) => g8Get("/mailboxes", { limit: MAILBOX_LIMIT, include_archived: includeArchived }, { signal }),
     [includeArchived],
   );
 
@@ -114,13 +118,13 @@ export function MailboxList({ includeArchived = false, onSelect, emptyAction, cl
                 <button type="button" className="text-left font-medium hover:underline" onClick={() => onSelect?.(m)}>
                   {m.email ?? `Mailbox ${m.id}`}
                 </button>
-                <div className="text-xs text-gray-500">
+                <div className="text-xs text-muted-foreground">
                   {m.display_name ?? ""}
                   {m.provider ? ` - ${m.provider}` : ""}
                   {m.is_archived ? " - archived" : ""}
                 </div>
                 {tests[m.id] ? (
-                  <div role="status" className="text-xs text-gray-700">
+                  <div role="status" className="text-xs text-foreground">
                     {tests[m.id]}
                   </div>
                 ) : null}
@@ -163,6 +167,7 @@ export function MailboxList({ includeArchived = false, onSelect, emptyAction, cl
           ))}
         </TableBody>
       </Table>
+      <FirstNotice shown={rows.length} limit={MAILBOX_LIMIT} noun="mailboxes" />
       {pending ? (
         <ConfirmSpendDialog
           open