@graph8/sdk 0.370.0 → 0.373.0

package/blocks/lists/block.json

@@ -12,7 +12,8 @@
     "finished ListsScreen and SuppressionsScreen pages"
   ],
   "dependsOn": [
-    "crm"
+    "crm",
+    "pickers"
   ],
   "operations": [
     "add_contacts_to_list_lists__list_id__contacts_post",
@@ -22,6 +23,7 @@
     "create_list_lists_post",
     "delete_list_lists__list_id__delete",
     "download_list_lists__audience_id__download_get",
+    "get_contact_lists_contacts__contact_id__lists_get",
     "list_contact_fields_fields_get",
     "list_contacts_contacts_get",
     "list_lists_lists_get",
@@ -86,7 +88,8 @@
         "list_suppressions_contacts_suppressions_get",
         "bulk_add_suppressions_contacts_suppressions_bulk_add_post",
         "check_contact_suppression_contacts__contact_id__suppression_get",
-        "reinstate_suppressions_contacts_suppressions_reinstate_post"
+        "reinstate_suppressions_contacts_suppressions_reinstate_post",
+        "list_contacts_contacts_get"
       ],
       "tiers": [
         "read",
@@ -121,12 +124,37 @@
         "bulk_add_suppressions_contacts_suppressions_bulk_add_post",
         "check_contact_suppression_contacts__contact_id__suppression_get",
         "list_suppressions_contacts_suppressions_get",
-        "reinstate_suppressions_contacts_suppressions_reinstate_post"
+        "reinstate_suppressions_contacts_suppressions_reinstate_post",
+        "list_contacts_contacts_get"
       ],
       "tiers": [
         "read",
         "write"
       ]
+    },
+    {
+      "name": "AddCompanyPeopleToListButton",
+      "file": "components/add-company-people-to-list-button.tsx",
+      "purpose": "\"Add people to list\" for one or more companies: reads the people at them, then AddToListButton picks the list and adds them.",
+      "operations": [
+        "list_contacts_contacts_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "RecordListsTab",
+      "file": "components/record-lists-tab.tsx",
+      "purpose": "The lists one contact belongs to, with Add to list and a confirmed Remove per list; an extraDetailTabs entry for ContactsScreen.",
+      "operations": [
+        "get_contact_lists_contacts__contact_id__lists_get",
+        "remove_contacts_from_list_lists__list_id__contacts_delete"
+      ],
+      "tiers": [
+        "read",
+        "destructive"
+      ]
     }
   ],
   "hooks": [],

package/blocks/lists/components/add-company-people-to-list-button.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+/**
+ * AddCompanyPeopleToListButton: "Add people to list" for one or more companies. Lists hold contacts, so this
+ * reads the people at the companies and hands them to AddToListButton's dialog (list picker, conflict review).
+ *
+ * SDK operations, in order:
+ *   1. listContacts  GET /contacts?company_id=&page=&limit=100   (read; every page, capped at 500 people)
+ *   2. then AddToListButton: listLists / createList, addContactsToList   (write, chosen in the dialog)
+ *
+ * Reading people is free and adds nothing until the person picks a list and confirms in the dialog.
+ */
+
+import { useState } from "react";
+import { Button } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { g8Get } from "@/g8/lib/g8-client";
+import { AddToListButton } from "./add-to-list-button";
+import type { AddToListResult } from "./add-to-list-button";
+
+export interface AddCompanyPeopleToListButtonProps {
+  companyIds: number[];
+  label?: string;
+  variant?: "default" | "outline" | "secondary" | "ghost";
+  size?: "default" | "sm";
+  disabled?: boolean;
+  onAdded?: (result: AddToListResult) => void;
+  className?: string;
+}
+
+const PEOPLE_CAP = 500;
+
+interface PeopleEnvelope { data?: Array<{ id: number }>; pagination?: { has_next?: boolean } }
+
+/** Ids of the people at these companies, every page, capped. */
+async function peopleAt(companyIds: number[]): Promise<number[]> {
+  const ids = new Set<number>();
+  for (const companyId of companyIds) {
+    for (let page = 1; page <= 10 && ids.size < PEOPLE_CAP; page++) {
+      const env = (await g8Get<Array<{ id: number }>>("/contacts", { company_id: companyId, page, limit: 100 })) as PeopleEnvelope;
+      for (const c of env.data ?? []) ids.add(c.id);
+      if (!env.pagination?.has_next || (env.data ?? []).length === 0) break;
+    }
+  }
+  return [...ids].slice(0, PEOPLE_CAP);
+}
+
+export function AddCompanyPeopleToListButton({ companyIds, label = "Add people to list", variant = "outline", size = "sm", disabled, onAdded, className }: AddCompanyPeopleToListButtonProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<unknown>(null);
+  const [people, setPeople] = useState<number[] | null>(null);
+
+  const start = async (): Promise<void> => {
+    setLoading(true);
+    setError(null);
+    try {
+      setPeople(await peopleAt(companyIds));
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Button className={className} variant={variant} size={size} loading={loading} disabled={disabled || companyIds.length === 0} onClick={() => void start()}>{label}</Button>
+      {error ? <ApiError error={error} title="Could not read the people" onRetry={() => void start()} /> : null}
+      {people && people.length === 0 ? <p role="status" className="text-xs text-muted-foreground">No people found at {companyIds.length === 1 ? "this company" : "these companies"}.</p> : null}
+      {people && people.length > 0 ? <AddToListButton key={people.join(",")} contactIds={people} defaultOpen hideTrigger onAdded={onAdded} onClosed={() => setPeople(null)} /> : null}
+    </>
+  );
+}

package/blocks/lists/components/add-to-list-button.tsx

@@ -42,6 +42,12 @@ export interface AddToListButtonProps {
   disabled?: boolean;
   onAdded?: (result: AddToListResult) => void;
   className?: string;
+  /** Start with the dialog open (used when another control resolved the contact ids first). */
+  defaultOpen?: boolean;
+  /** Render the dialog without its trigger button; pair with `defaultOpen` and `onClosed`. */
+  hideTrigger?: boolean;
+  /** Runs after the dialog closed (cancel, done or Escape). */
+  onClosed?: () => void;
 }
 
 interface ConflictDetail { code?: string; ready_count?: number; warned?: unknown[]; blocked?: unknown[]; message?: string }
@@ -52,26 +58,30 @@ function conflictOf(error: unknown): ConflictDetail | null {
   return e?.status === 409 && e.detail && typeof e.detail === "object" && e.detail.code === "CONFLICT_REVIEW_REQUIRED" ? e.detail : null;
 }
 
-export function AddToListButton({ contactIds, listId, label = "Add to list", variant = "outline", size = "sm", disabled, onAdded, className }: AddToListButtonProps) {
-  const [open, setOpen] = useState(false);
+export function AddToListButton({ contactIds, listId, label = "Add to list", variant = "outline", size = "sm", disabled, onAdded, className, defaultOpen = false, hideTrigger = false, onClosed }: AddToListButtonProps) {
+  const [open, setOpen] = useState(defaultOpen);
   const [target, setTarget] = useState<ListSummary | null>(null);
   const [result, setResult] = useState<AddToListResult | null>(null);
   const destination = listId ?? target?.id;
 
   const add = useG8Mutation(async (resolution?: Resolution) => {
-    const res = await g8Post<{ added: number; already_member?: number[]; not_found?: number[] }>(`/lists/${destination}/contacts`, {
+    const res = await g8Post<{ added?: number; already_member?: number[]; not_found?: number[] }>(`/lists/${destination}/contacts`, {
       contact_ids: contactIds,
       ...(resolution ? { conflict_resolution: resolution } : {}),
     });
-    return { listId: destination as number, added: res.data.added, already_member: res.data.already_member ?? [], not_found: res.data.not_found ?? [] };
+    const already = res.data.already_member ?? [];
+    const missing = res.data.not_found ?? [];
+    // The response is an open dict: when it carries no count, derive it instead of rendering "undefined".
+    const added = typeof res.data.added === "number" ? res.data.added : Math.max(contactIds.length - already.length - missing.length, 0);
+    return { listId: destination as number, added, already_member: already, not_found: missing };
   }, { invalidates: [["lists"], ["contacts", "list"]], onSuccess: (r) => { setResult(r); onAdded?.(r); } });
 
   const conflict = conflictOf(add.error);
-  const close = () => { setOpen(false); setResult(null); setTarget(null); add.reset(); };
+  const close = () => { setOpen(false); setResult(null); setTarget(null); add.reset(); onClosed?.(); };
 
   return (
     <>
-      <Button className={className} variant={variant} size={size} disabled={disabled || contactIds.length === 0} onClick={() => setOpen(true)}>{label}</Button>
+      {hideTrigger ? null : <Button className={className} variant={variant} size={size} disabled={disabled || contactIds.length === 0} onClick={() => setOpen(true)}>{label}</Button>}
       <Dialog open={open} onOpenChange={(o) => (o ? setOpen(true) : close())}>
         <DialogContent>
           <DialogHeader>
@@ -89,7 +99,7 @@ export function AddToListButton({ contactIds, listId, label = "Add to list", var
             <>
               {listId == null ? <ListPicker value={target?.id} onChange={(l) => { setTarget(l); add.reset(); }} /> : null}
               {conflict ? (
-                <div role="alert" className="rounded-md border border-amber-300 bg-amber-50 p-3 text-sm">
+                <div role="alert" className="rounded-md border border-warning-foreground/30 bg-warning p-3 text-sm">
                   <p>{conflict.message ?? "Some contacts belong to other reps."}</p>
                   <p className="mt-1">{conflict.ready_count ?? 0} ready, {conflict.warned?.length ?? 0} flagged, {conflict.blocked?.length ?? 0} blocked (never added).</p>
                   <div className="mt-2 flex gap-2">

package/blocks/lists/components/list-picker.tsx

@@ -16,7 +16,9 @@ import { useEffect, useState } from "react";
 import { Button, Input } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
-import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useLoadMoreList } from "@/g8/hooks/use-load-more-list";
+import { byPage, hasNextOf } from "@/g8/lib/paging";
+import { LoadMore } from "@/g8/components/paging-notices";
 import { g8Get, g8Post } from "@/g8/lib/g8-client";
 
 export interface ListSummary {
@@ -59,17 +61,24 @@ function useDebounced<T>(value: T, ms = 250): T {
   return v;
 }
 
+/** Lists per read; "Load more" appends the next page (the picker used to stop silently at 50). */
+const LIST_PAGE = 50;
+
 export function ListPicker({ value, onChange, type = "contacts", allowCreate = true, suggestedName, className }: ListPickerProps) {
   const [search, setSearch] = useState("");
   const [newName, setNewName] = useState(suggestedName ?? "");
   const q = useDebounced(search.trim());
-  const lists = useG8Query((signal) => g8Get<ListSummary[]>("/lists", { search: q || undefined, limit: 50 }, { signal }), [q], { key: ["lists", "picker", { q }] });
+  const lists = useLoadMoreList(byPage<ListSummary>(LIST_PAGE, async (page, signal) => {
+    const env = await g8Get<ListSummary[]>("/lists", { search: q || undefined, page, limit: LIST_PAGE }, { signal });
+    const rows = (env.data ?? []) as ListSummary[];
+    return { rows, hasNext: hasNextOf(env, LIST_PAGE, rows.length) };
+  }), [q]);
   const create = useG8Mutation((title: string) => g8Post<ListSummary>("/lists", { title, type }), {
     invalidates: [["lists"]],
     onSuccess: (res) => { setNewName(""); void lists.refetch(); onChange({ type, ...res.data, title: res.data.title ?? newName }); },
   });
 
-  const rows = ((lists.data?.data ?? []) as ListSummary[]).filter((l) => !l.type || l.type === type);
+  const rows = (lists.data ?? []).filter((l) => !l.type || l.type === type);
   return (
     <div className={`flex flex-col gap-2 ${className ?? ""}`}>
       <Input aria-label="Search lists" placeholder="Search lists" value={search} onChange={(e) => setSearch(e.target.value)} />
@@ -86,6 +95,7 @@ export function ListPicker({ value, onChange, type = "contacts", allowCreate = t
           </li>
         ))}
       </ul>
+      <LoadMore shown={rows.length} noun="lists" hasMore={lists.hasMore} loading={lists.loadingMore} onLoadMore={lists.loadMore} />
       {allowCreate ? (
         <form className="flex items-center gap-2" onSubmit={(e) => { e.preventDefault(); if (newName.trim()) void create.mutate(newName.trim()); }}>
           <Input aria-label="New list name" placeholder="Or create a new list" value={newName} onChange={(e) => setNewName(e.target.value)} />

package/blocks/lists/components/list-table.tsx

@@ -46,7 +46,7 @@ function count(l: ListSummary): number {
   return l.contact_count ?? l.company_count ?? l.total ?? 0;
 }
 
-const STATUS_STYLE: Record<string, string> = { failed: "text-destructive", processing: "text-amber-600" };
+const STATUS_STYLE: Record<string, string> = { failed: "text-destructive", processing: "text-warning-foreground" };
 
 export function ListTable({ linkParam, pageSize = 25, onOpen, allowCreate = true, refreshKey, className }: ListTableProps) {
   const [search, setSearch] = useState("");

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

@@ -67,6 +67,8 @@ export interface ListsScreenProps {
   extraDetailTabs?: { id: string; label: string; render: (list: ListSummary) => ReactNode }[];
   /** Where company-list members are managed. Default: the graph8 app. */
   appUrl?: string;
+  /** Open a list member in your contacts screen; without it the member rows are not clickable. */
+  onOpenContact?: (contactId: number) => void;
   className?: string;
 }
 
@@ -99,7 +101,7 @@ function when(value?: string | null): string {
   return value ? new Date(value).toLocaleDateString() : "";
 }
 
-export function ListsScreen({ pageSize = 25, toolbarActions, renderRowActions, renderDetailActions, extraDetailTabs, appUrl: appUrlProp, className }: ListsScreenProps) {
+export function ListsScreen({ pageSize = 25, toolbarActions, renderRowActions, renderDetailActions, extraDetailTabs, appUrl: appUrlProp, onOpenContact, className }: ListsScreenProps) {
   const brand = useBrand();
   const appUrl = appUrlProp ?? brand.appUrl;
   const [search, setSearch] = useState("");
@@ -249,7 +251,7 @@ export function ListsScreen({ pageSize = 25, toolbarActions, renderRowActions, r
             : (
               <div className="flex flex-col gap-2">
                 {removeMembers.error ? <ApiError error={removeMembers.error} title="Could not remove them" /> : null}
-                <ContactTable listId={selected.id} selectable allowDelete={false} pageSize={10} refreshKey={membersKey}
+                <ContactTable listId={selected.id} selectable allowDelete={false} pageSize={10} refreshKey={membersKey} onOpen={onOpenContact ? (c) => onOpenContact(c.id) : undefined}
                   renderBulkActions={({ ids }) => <Button size="sm" variant="outline" onClick={() => setRemoving(ids)}>Remove from list</Button>} />
               </div>
             ),

package/blocks/lists/components/record-lists-tab.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+/**
+ * RecordListsTab: the lists one contact belongs to, with "Add to list" and a confirmed "Remove" per list. Use it as an
+ * `extraDetailTabs` entry of ContactsScreen:
+ *   { id: "lists", label: "Lists", render: (c) => <RecordListsTab contactId={c.id} onOpenList={(id) => router.push(`/lists?id=${id}`)} /> }
+ *
+ * SDK operations, in order:
+ *   1. getContactLists          GET    /contacts/{id}/lists         (read; the API answers every list the key can see, unpaged)
+ *   2. AddToListButton: listLists / createList, addContactsToList    (write, chosen in its dialog)
+ *   3. removeContactsFromList   DELETE /lists/{list_id}/contacts    (destructive: confirmed with ConfirmSpendDialog)
+ * Removing takes the contact out of that list only; the contact record and its other lists are untouched.
+ */
+
+import { useState } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ListChecks } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get } from "@/g8/lib/g8-client";
+import { AddToListButton } from "./add-to-list-button";
+
+/** One row of GET /contacts/{id}/lists. */
+interface MemberList { audience_id?: number | null; audience_title?: string | null }
+
+/** The rows of an API answer, whether it came as `{ items }` or a bare array. */
+function itemsOf<T>(env: unknown): T[] {
+  const data = (env as { data?: unknown } | null)?.data;
+  if (Array.isArray(data)) return data as T[];
+  const items = (data as { items?: unknown } | null)?.items;
+  return Array.isArray(items) ? (items as T[]) : [];
+}
+
+export interface RecordListsTabProps {
+  contactId: number;
+  /** Route to the list in your lists screen. Without it the rows link to `${listsPath}?id=<list id>`. */
+  onOpenList?: (listId: number) => void;
+  /** Path of your lists screen for the plain links. Default "/lists". */
+  listsPath?: string;
+}
+
+export function RecordListsTab({ contactId, onOpenList, listsPath = "/lists" }: RecordListsTabProps) {
+  const [removing, setRemoving] = useState<MemberList | null>(null);
+  const q = useG8Query(async (signal) => itemsOf<MemberList>(await g8Get(`/contacts/${contactId}/lists`, undefined, { signal })).filter((l) => l.audience_id != null), [contactId]);
+  const remove = useG8Mutation(async (list: MemberList) => {
+    await g8Delete(`/lists/${list.audience_id}/contacts`, { body: { contact_ids: [contactId] } });
+    setRemoving(null);
+    await q.refetch();
+  }, { invalidates: [["lists"], ["contacts", "list"]], onError: () => setRemoving(null) });
+
+  const add = <AddToListButton contactIds={[contactId]} onAdded={() => void q.refetch()} />;
+  if (q.error) return <ApiError error={q.error} title="Could not load lists" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-24 w-full" aria-label="Loading lists" />;
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-sm text-muted-foreground">{q.data.length === 1 ? "In 1 list" : `In ${q.data.length.toLocaleString()} lists`}</p>
+        {add}
+      </div>
+      {remove.error ? <ApiError error={remove.error} title="Could not remove from the list" /> : null}
+      {q.data.length === 0 ? (
+        <EmptyState compact icon={<ListChecks className="size-8" />} title="Not in any list" description="Add this contact to a list to sequence or sync it with others." />
+      ) : (
+        <ul className="divide-y rounded-md border" aria-label="Lists">
+          {q.data.map((l) => (
+            <li key={l.audience_id} className="flex items-center justify-between gap-3 p-3 text-sm">
+              <a
+                href={`${listsPath}?id=${encodeURIComponent(String(l.audience_id))}`}
+                className="min-w-0 truncate font-medium hover:underline"
+                onClick={(e) => {
+                  if (!onOpenList || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+                  e.preventDefault();
+                  onOpenList(l.audience_id as number);
+                }}
+              >
+                {l.audience_title || `List #${l.audience_id}`}
+              </a>
+              <Button size="sm" variant="ghost" loading={remove.loading && removing?.audience_id === l.audience_id} onClick={() => setRemoving(l)}>Remove</Button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <ConfirmSpendDialog
+        open={removing !== null}
+        tier="destructive"
+        title={`Remove from ${removing?.audience_title || "this list"}`}
+        description="The contact leaves this list only. The contact and its other lists are not changed."
+        affected={1}
+        confirmLabel="Remove"
+        confirming={remove.loading}
+        onConfirm={() => removing && void remove.mutate(removing)}
+        onCancel={() => setRemoving(null)}
+      />
+    </div>
+  );
+}

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": [