@graph8/sdk 0.370.0 → 0.374.0

package/blocks/lists/components/suppression-manager.tsx

@@ -11,6 +11,8 @@
  *   4. reinstateSuppressions   POST /contacts/suppressions/reinstate  { contact_ids, reason }   (write, but it lets
  *                              sequences and campaigns contact people again, so it goes through ConfirmSpendDialog as "external")
  *
+ * No ids to type: contacts to suppress and the contact to check are chosen with a ContactPicker (search by name or work
+ * email; GET /contacts, read). Pasting numeric ids still works under "Paste ids instead" / "Check by id instead".
  * The ledger holds ids, not names or emails (no personal data): resolve a name with ContactDetail.
  * Suppressing only ever REDUCES outreach, so it runs without a confirmation.
  */
@@ -20,6 +22,8 @@ import { Button, Input, Label, Skeleton, Table, TableBody, TableCell, TableHead,
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { EmptyState } from "@/g8/components/empty-state";
+import { ContactPicker } from "@/g8/pickers/components/contact-picker";
+import type { ContactOption } from "@/g8/pickers/components/contact-picker";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { g8Get, g8Post } from "@/g8/lib/g8-client";
@@ -59,6 +63,8 @@ export function SuppressionManager({ pageSize = 50, onOpenContact, className }:
   const [category, setCategory] = useState("");
   const [offset, setOffset] = useState(0);
   const [idsText, setIdsText] = useState("");
+  const [chosen, setChosen] = useState<ContactOption[]>([]);
+  const [checkChosen, setCheckChosen] = useState<ContactOption | null>(null);
   const [addChannel, setAddChannel] = useState("all");
   const [reason, setReason] = useState("");
   const [picked, setPicked] = useState<Set<number>>(new Set());
@@ -68,7 +74,7 @@ export function SuppressionManager({ pageSize = 50, onOpenContact, className }:
 
   const ledger = useG8Query((signal) => g8Get<SuppressionRecord[]>("/contacts/suppressions", { channel: channel || undefined, category: category || undefined, limit: pageSize, offset }, { signal }), [channel, category, offset, pageSize]);
   const add = useG8Mutation((ids: number[]) => g8Post<BulkAdd>("/contacts/suppressions/bulk-add", { contact_ids: ids, channel: addChannel, reason: reason.trim() || undefined }), {
-    onSuccess: () => { setIdsText(""); setReason(""); void ledger.refetch(); },
+    onSuccess: () => { setIdsText(""); setChosen([]); setReason(""); void ledger.refetch(); },
   });
   const reinstate = useG8Mutation((ids: number[]) => g8Post<Reinstate>("/contacts/suppressions/reinstate", { contact_ids: ids, reason: reinstateReason.trim() || undefined }), {
     onSuccess: () => { setConfirmReinstate(false); setReinstateReason(""); setPicked(new Set()); void ledger.refetch(); },
@@ -76,15 +82,23 @@ export function SuppressionManager({ pageSize = 50, onOpenContact, className }:
   const check = useG8Mutation((id: number) => g8Get<ContactStatus>(`/contacts/${id}/suppression`));
 
   const rows = (ledger.data?.data ?? []) as SuppressionRecord[];
-  const ids = parseIds(idsText);
+  const ids = [...new Set([...chosen.map((c) => c.id), ...parseIds(idsText)])];
+  const checkTarget = checkChosen?.id ?? Number(checkId);
   const selectedContacts = [...picked];
   const togglePick = (contactId: number) => setPicked((p) => { const n = new Set(p); if (!n.delete(contactId)) n.add(contactId); return n; });
 
   return (
     <div className={`flex flex-col gap-5 ${className ?? ""}`}>
       <section className="flex flex-col gap-2" aria-label="Suppress contacts">
-        <Label htmlFor="suppress-ids">Suppress contacts by id</Label>
-        <Textarea id="suppress-ids" rows={2} placeholder="101, 102, 103" value={idsText} onChange={(e) => setIdsText(e.target.value)} />
+        <span className="text-sm font-medium leading-none">Who to suppress</span>
+        <ContactPicker multiple label="Contacts to suppress" selected={chosen} onSelectedChange={setChosen} />
+        <details className="text-sm">
+          <summary className="cursor-pointer text-muted-foreground">Paste ids instead</summary>
+          <div className="mt-1 flex flex-col gap-1">
+            <Label htmlFor="suppress-ids">Suppress contacts by id</Label>
+            <Textarea id="suppress-ids" rows={2} placeholder="101, 102, 103" value={idsText} onChange={(e) => setIdsText(e.target.value)} />
+          </div>
+        </details>
         <div className="flex flex-wrap items-center gap-2">
           <select aria-label="Channel to suppress" className="h-9 rounded-md border bg-background px-2 text-sm" value={addChannel} onChange={(e) => setAddChannel(e.target.value)}>
             <option value="all">All channels</option><option value="email">Email</option><option value="phone">Phone</option><option value="linkedin">LinkedIn</option>
@@ -97,8 +111,15 @@ export function SuppressionManager({ pageSize = 50, onOpenContact, className }:
       </section>
 
       <section className="flex items-end gap-2" aria-label="Check a contact">
-        <div className="flex flex-col gap-1"><Label htmlFor="check-id">Check one contact</Label><Input id="check-id" inputMode="numeric" placeholder="Contact id" className="w-40" value={checkId} onChange={(e) => setCheckId(e.target.value)} /></div>
-        <Button variant="outline" size="sm" loading={check.loading} disabled={!Number(checkId)} onClick={() => void check.mutate(Number(checkId))}>Check</Button>
+        <div className="flex flex-col gap-1">
+          <span className="text-sm font-medium leading-none">Check one contact</span>
+          <ContactPicker label="Contact to check" value={checkChosen} onChange={(c) => { setCheckChosen(c); setCheckId(""); }} />
+          <details className="text-sm">
+            <summary className="cursor-pointer text-muted-foreground">Check by id instead</summary>
+            <div className="mt-1 flex flex-col gap-1"><Label htmlFor="check-id">Check one contact</Label><Input id="check-id" inputMode="numeric" placeholder="Contact id" className="w-40" value={checkId} onChange={(e) => { setCheckId(e.target.value); setCheckChosen(null); }} /></div>
+          </details>
+        </div>
+        <Button variant="outline" size="sm" loading={check.loading} disabled={!checkTarget} onClick={() => void check.mutate(checkTarget)}>Check</Button>
         {check.data ? <p role="status" className="text-sm">{check.data.data.is_suppressed ? `Suppressed on: ${check.data.data.active_channels.join(", ")}` : "Not suppressed"}</p> : null}
         {check.error ? <ApiError error={check.error} title="Could not check that contact" /> : null}
       </section>

package/blocks/lists/components/suppressions-screen.tsx

@@ -9,9 +9,10 @@
  *
  * User flows:
  *   - filter the ledger by channel and reason, page through it, see how many are suppressed on each channel
- *   - Suppress contacts: paste ids, or pick contacts from the CRM, choose the channel (default all) and a reason
+ *   - Suppress contacts: search and tick people (ContactPicker), or pick them from the CRM table, or paste ids under
+ *     "Paste ids instead"; choose the channel (default all) and a reason
  *   - open a ledger row: the contact's record plus its live suppression status (read-only check)
- *   - check any contact id without opening it
+ *   - check any contact without opening it (pick them by name; no ids to type)
  *   - tick rows and Reinstate (confirmed: it lets sequences, campaigns and newsletters contact them again)
  *
  * SDK operations, in order:
@@ -24,7 +25,7 @@
 
 import { useEffect, useState } from "react";
 import type { ReactNode } from "react";
-import { BadgeCheck, Ban, Search, ShieldOff, Undo2 } from "lucide-react";
+import { BadgeCheck, Ban, ShieldOff, Undo2 } from "lucide-react";
 import { Button, Input, Label, Skeleton, Textarea } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
@@ -37,6 +38,8 @@ import { SectionCard } from "@/g8/components/screen/section-card";
 import { SplitView } from "@/g8/components/screen/split-view";
 import { StatusPill } from "@/g8/components/screen/status-pill";
 import { Toolbar } from "@/g8/components/screen/toolbar";
+import { ContactPicker } from "@/g8/pickers/components/contact-picker";
+import type { ContactOption } from "@/g8/pickers/components/contact-picker";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { useUrlState } from "@/g8/hooks/use-url-state";
@@ -85,6 +88,7 @@ export function SuppressionsScreen({ pageSize = 50, toolbarActions, renderRowAct
   const full = view === "full";
   const [adding, setAdding] = useState(false);
   const [idsText, setIdsText] = useState("");
+  const [pickedContacts, setPickedContacts] = useState<ContactOption[]>([]);
   const [addChannel, setAddChannel] = useState("all");
   const [reason, setReason] = useState("");
   const [picked, setPicked] = useState<Set<number>>(new Set());
@@ -92,8 +96,7 @@ export function SuppressionsScreen({ pageSize = 50, toolbarActions, renderRowAct
   /** Set when Reinstate is started from a row's panel: the confirm acts on that contact only and leaves the ticked rows alone. */
   const [panelTarget, setPanelTarget] = useState<number | null>(null);
   const [reinstateReason, setReinstateReason] = useState("");
-  const [checkId, setCheckId] = useState("");
-  const [checked, setChecked] = useState<number | null>(null);
+  const [checked, setChecked] = useState<ContactOption | null>(null);
 
   const ledger = useG8Query((signal) => g8Get<SuppressionRecord[]>("/contacts/suppressions", { channel: channel || undefined, category: category || undefined, limit: pageSize, offset }, { signal }), [channel, category, offset, pageSize]);
   const rows = (ledger.data?.data ?? []) as SuppressionRecord[];
@@ -101,13 +104,13 @@ export function SuppressionsScreen({ pageSize = 50, toolbarActions, renderRowAct
   useEffect(() => { setPicked((p) => new Set([...p].filter((id) => rows.some((r) => r.contact_id === id)))); }, [ledger.data]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const add = useG8Mutation((v: { ids: number[] }) => g8Post<BulkAdd>("/contacts/suppressions/bulk-add", { contact_ids: v.ids, channel: addChannel, reason: reason.trim() || undefined }), {
-    onSuccess: () => { setIdsText(""); setReason(""); void ledger.refetch(); },
+    onSuccess: () => { setIdsText(""); setPickedContacts([]); setReason(""); void ledger.refetch(); },
   });
   const reinstate = useG8Mutation((ids: number[]) => g8Post<Reinstate>("/contacts/suppressions/reinstate", { contact_ids: ids, reason: reinstateReason.trim() || undefined }), {
     onSuccess: () => { setConfirmReinstate(false); setReinstateReason(""); if (panelTarget != null) { const done = panelTarget; setPicked((p) => { const n = new Set(p); n.delete(done); return n; }); } else setPicked(new Set()); setPanelTarget(null); void ledger.refetch(); },
   });
 
-  const ids = parseIds(idsText);
+  const ids = [...new Set([...pickedContacts.map((c) => c.id), ...parseIds(idsText)])];
   const chosen = panelTarget != null ? [panelTarget] : [...picked];
   const togglePick = (id: number) => setPicked((p) => { const n = new Set(p); if (!n.delete(id)) n.add(id); return n; });
   const byChannel = (c: string) => rows.filter((r) => r.channel === c).length;
@@ -205,9 +208,8 @@ export function SuppressionsScreen({ pageSize = 50, toolbarActions, renderRowAct
             <select aria-label="Filter by reason" className={SELECT} value={category} onChange={(e) => { setCategory(e.target.value); resetPage(); }}>
               <option value="">Any reason</option><option value="contact_initiated">Contact asked</option><option value="org_initiated">Our team</option><option value="system">System</option>
             </select>
-            <Input aria-label="Check a contact id" inputMode="numeric" placeholder="Check contact id" className="w-40" value={checkId} onChange={(e) => setCheckId(e.target.value)} />
-            <Button variant="outline" size="sm" disabled={!Number(checkId)} onClick={() => setChecked(Number(checkId))}><Search className="mr-1 size-4" aria-hidden />Check</Button>
-            {checked ? <span className="flex items-center gap-1"><ContactStatusPanel key={checked} contactId={checked} /><span className="text-xs text-muted-foreground">#{checked}</span></span> : null}
+            <ContactPicker label="Contact to check" placeholder="Check a contact" value={checked} onChange={setChecked} />
+            {checked ? <span className="flex items-center gap-1"><ContactStatusPanel key={checked.id} contactId={checked.id} /><span className="text-xs text-muted-foreground">{checked.name}</span></span> : null}
           </>)}
           actions={<Button variant="outline" size="sm" disabled={chosen.length === 0} onClick={() => { setPanelTarget(null); setConfirmReinstate(true); }}><BadgeCheck className="mr-1 size-4" aria-hidden />Reinstate {chosen.length || ""}</Button>}
         />
@@ -224,8 +226,15 @@ export function SuppressionsScreen({ pageSize = 50, toolbarActions, renderRowAct
             <div className="flex min-w-40 flex-1 flex-col gap-1"><Label htmlFor="suppress-reason">Reason (optional)</Label><Input id="suppress-reason" value={reason} onChange={(e) => setReason(e.target.value)} /></div>
           </div>
           <div className="flex flex-col gap-2">
-            <Label htmlFor="suppress-ids">Contact ids</Label>
-            <Textarea id="suppress-ids" rows={3} placeholder="101, 102, 103" value={idsText} onChange={(e) => setIdsText(e.target.value)} />
+            <span className="text-sm font-medium leading-none">Search and add people</span>
+            <ContactPicker multiple label="Contacts to suppress" selected={pickedContacts} onSelectedChange={setPickedContacts} />
+            <details className="text-sm">
+              <summary className="cursor-pointer text-muted-foreground">Paste ids instead</summary>
+              <div className="mt-1 flex flex-col gap-1">
+                <Label htmlFor="suppress-ids">Contact ids</Label>
+                <Textarea id="suppress-ids" rows={3} placeholder="101, 102, 103" value={idsText} onChange={(e) => setIdsText(e.target.value)} />
+              </div>
+            </details>
             <Button size="sm" loading={add.loading} disabled={ids.length === 0} onClick={() => void add.mutate({ ids })}>{ids.length ? `Suppress ${plural(ids.length, "contact")}` : "Suppress contacts"}</Button>
           </div>
           <div className="flex flex-col gap-2">

package/blocks/mailboxes/block.json

@@ -157,6 +157,10 @@
     {
       "file": "lib/mailboxes-utils.ts",
       "purpose": "Mailbox and domain row types, credit estimate constants, status colors and idempotency-key helper."
+    },
+    {
+      "file": "lib/use-provider-domains.ts",
+      "purpose": "Every sending domain, read page after page (the domains API pages) instead of one capped call."
     }
   ],
   "recipes": [

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

@@ -25,6 +25,7 @@ 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_PATH, listOf, newIdempotencyKey, objectOf } from "../lib/mailboxes-utils";
+import { useProviderDomains } from "../lib/use-provider-domains";
 import type { DomainRow } from "../lib/mailboxes-utils";
 import { plural, pluralWord } from "@/g8/lib/plural";
 import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
@@ -135,7 +136,7 @@ function ImapForm({ onConnected }: { onConnected?: (id: number | string) => void
       </Button>
       {connect.error ? <ApiError error={connect.error} onRetry={connect.reset} /> : null}
       {result ? (
-        <p role="status" className="text-sm text-gray-700">
+        <p role="status" className="text-sm text-foreground">
           {result}
         </p>
       ) : null}
@@ -145,7 +146,7 @@ function ImapForm({ onConnected }: { onConnected?: (id: number | string) => void
 
 function BuyForm({ onPurchased, domainId: initialDomainId }: { onPurchased?: (id: number | string) => void; domainId?: number | string }) {
   const brand = useBrand();
-  const domains = useG8Query((signal) => g8Get("/provider-domains", { page: 1, limit: 100 }, { signal }), []);
+  const domains = useProviderDomains([]);
   const pricing = useG8Query((signal) => g8Get("/provider-domains/pricing", undefined, { signal }), []);
   const [domainId, setDomainId] = useState(initialDomainId != null ? String(initialDomainId) : "");
   const [usernames, setUsernames] = useState("");
@@ -170,19 +171,19 @@ function BuyForm({ onPurchased, domainId: initialDomainId }: { onPurchased?: (id
     setDone(`Accepted ${plural(Number(res.count ?? names.length), "mailbox", "mailboxes")}; provisioning continues in the background.`);
     onPurchased?.(domainId);
   });
-  const connected = listOf<DomainRow>(domains.data).filter((d) => d.provider_connected);
+  const connected = domains.items.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>
+        <p className="text-sm text-muted-foreground">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"
+            className="h-9 rounded-md border border-input px-2 text-sm"
             value={domainId}
             onChange={(e) => setDomainId(e.target.value)}
           >
@@ -195,7 +196,7 @@ function BuyForm({ onPurchased, domainId: initialDomainId }: { onPurchased?: (id
           </select>
           <select
             aria-label="Platform"
-            className="h-9 rounded-md border border-gray-300 px-2 text-sm"
+            className="h-9 rounded-md border border-input px-2 text-sm"
             value={platform}
             onChange={(e) => setPlatform(e.target.value as "GOOGLE" | "MICROSOFT")}
           >
@@ -231,7 +232,7 @@ function BuyForm({ onPurchased, domainId: initialDomainId }: { onPurchased?: (id
       </Button>
       {buy.error ? <ApiError error={buy.error} onRetry={buy.reset} /> : null}
       {done ? (
-        <p role="status" className="text-sm text-green-700">
+        <p role="status" className="text-sm text-positive-foreground">
           {done}
         </p>
       ) : null}
@@ -276,7 +277,7 @@ export function ConnectMailbox({ appUrl: appUrlProp, onConnected, onPurchased, i
       </div>
       {mode === "imap" ? <ImapForm onConnected={onConnected} /> : null}
       {mode === "oauth" ? (
-        <div className="space-y-2 rounded border border-gray-200 p-3 text-sm">
+        <div className="space-y-2 rounded border border-border p-3 text-sm">
           <p>
             Google and Microsoft mailboxes connect through a sign-in screen that only runs inside the {brand.linkLabel} app. Connect it there, then
             come back: it appears in your mailbox list.

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

@@ -18,6 +18,7 @@ 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";
@@ -27,6 +28,7 @@ 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 {
@@ -46,13 +48,16 @@ export interface DomainDetailProps {
 
 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 = useG8Query((signal) => g8Get("/provider-domains", { page: 1, limit: 100 }, { signal }), [domainId]);
-  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: 200 }, { signal }), [domainId]);
+  const domains = useProviderDomains([domainId]);
+  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: MAILBOX_LIMIT }, { signal }), [domainId]);
 
-  const row = listOf<DomainRow>(domains.data).find((d) => String(d.id) === String(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`, {});
@@ -67,7 +72,7 @@ export function DomainDetail({ domainId, onClose, onExpand, onCollapse, onChange
   }, { 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.data) return <Skeleton className={`h-48 w-full ${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()}`));
@@ -133,6 +138,7 @@ export function DomainDetail({ domainId, onClose, onExpand, onCollapse, onChange
                   ))}
                 </ul>
               )}
+              <FirstNotice shown={listOf<MailboxRow>(mailboxes.data).length} limit={MAILBOX_LIMIT} noun="mailboxes" />
             </SectionCard>
           ),
         },

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

@@ -24,9 +24,11 @@ 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";
@@ -66,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([]);
@@ -106,7 +108,7 @@ 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;
@@ -141,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) => {
@@ -165,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}` : ""}`
@@ -189,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"
@@ -217,7 +219,7 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
       </section>
 
       {note ? (
-        <p role="status" className="text-sm text-gray-700">
+        <p role="status" className="text-sm text-foreground">
           {note}
         </p>
       ) : null}
@@ -226,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 ${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 ? (
@@ -254,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

@@ -29,6 +29,7 @@ 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";
@@ -59,7 +60,7 @@ export function MailboxDetail({ mailboxId, tab, onTabChange, onClose, onExpand,
   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 = useG8Query((signal) => g8Get("/provider-domains", { page: 1, limit: 100 }, { signal }), []);
+  const domains = useProviderDomains([]);
 
   const test = useG8Mutation(async () => {
     const r = objectOf(await g8Post(`/mailboxes/${mailboxId}/test-connection`, {})) as TestResult;
@@ -84,7 +85,7 @@ export function MailboxDetail({ mailboxId, tab, onTabChange, onClose, onExpand,
   const raw = objectOf(q.data);
   const m = { id: String(mailboxId), email: null, ...raw } as MailboxRow;
   const domain = (m.email ?? "").split("@")[1]?.toLowerCase();
-  const domainRow = listOf<DomainRow>(domains.data).find((d) => d.domain?.toLowerCase() === domain);
+  const domainRow = domains.items.find((d) => d.domain?.toLowerCase() === domain);
   const status = m.connection_status ?? "unknown";
   const name = m.email ?? `Mailbox ${mailboxId}`;
 

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

package/blocks/mailboxes/components/mailboxes-screen.tsx

@@ -38,7 +38,9 @@ import { useUrlState } from "@/g8/hooks/use-url-state";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { g8Get } from "@/g8/lib/g8-client";
 import { listOf, objectOf } from "../lib/mailboxes-utils";
+import { useProviderDomains } from "../lib/use-provider-domains";
 import type { DomainRow, MailboxRow } from "../lib/mailboxes-utils";
+import { FirstNotice } from "@/g8/components/paging-notices";
 import { ConnectMailbox } from "./connect-mailbox";
 import { DomainPurchase } from "./domain-purchase";
 import { DomainDetail } from "./domain-detail";
@@ -83,11 +85,12 @@ export function fleetStats(summary: Record<string, unknown>): StatItem[] {
 }
 
 function DomainList({ version, selectedId, onOpen }: { version: number; selectedId: string; onOpen: (d: DomainRow) => void }) {
-  const q = useG8Query((signal) => g8Get("/provider-domains", { page: 1, limit: 100 }, { signal }), [version]);
-  const rows = listOf<DomainRow>(q.data);
-  if (q.loading && !q.data) return <Skeleton className="h-24 w-full" />;
+  const q = useProviderDomains([version]);
+  const rows = q.items;
+  if (q.loading && !q.loaded) return <Skeleton className="h-24 w-full" />;
   if (rows.length === 0) return null;
   return (
+    <>
     <ul aria-label="Your domains" className="divide-y rounded-md border">
       {rows.map((d) => (
         <li key={d.id} className={`flex items-center justify-between px-3 py-2 text-sm ${String(d.id) === selectedId ? "bg-muted" : ""}`}>
@@ -99,6 +102,8 @@ function DomainList({ version, selectedId, onOpen }: { version: number; selected
         </li>
       ))}
     </ul>
+    <FirstNotice shown={rows.length} limit={rows.length} force={q.truncated} noun="domains" />
+    </>
   );
 }