@graph8/sdk 0.362.0 → 0.373.0

package/blocks/lifecycle/components/account-related.tsx

@@ -13,6 +13,7 @@ import { useState } from "react";
 import { Radar } from "lucide-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 { EmptyState } from "@/g8/components/empty-state";
 import { SectionCard } from "@/g8/components/screen/section-card";
@@ -42,8 +43,11 @@ export function AccountBriefTab({ companyId, name }: { companyId: number; name?:
   );
 }
 
+/** The signals API has no paging: a full read is announced under the list. */
+const SIGNAL_LIMIT = 20;
+
 export function AccountSignalsTab({ companyId }: { companyId: number }) {
-  const q = useG8Query((signal) => g8Get(`/accounts/${companyId}/intent-signals`, { limit: 20 }, { signal }), [companyId]);
+  const q = useG8Query((signal) => g8Get(`/accounts/${companyId}/intent-signals`, { limit: SIGNAL_LIMIT }, { signal }), [companyId]);
   if (q.error) return <ApiError error={q.error} title="Could not load signals" onRetry={() => void q.refetch()} />;
   if (q.loading && !q.data) return <Skeleton className="h-24 w-full" aria-label="Loading signals" />;
   const payload = body(q.data);
@@ -51,6 +55,7 @@ export function AccountSignalsTab({ companyId }: { companyId: number }) {
   const signals = raw.map(asRec);
   if (signals.length === 0) return <EmptyState icon={<Radar className="size-8" />} title="Quiet" description="No recent buying or activity signals for this account." />;
   return (
+    <>
     <ul className="divide-y rounded-md border" aria-label="Signals">
       {signals.map((s, i) => {
         const when = text(s.detected_at ?? s.created_at ?? s.occurred_at);
@@ -62,5 +67,7 @@ export function AccountSignalsTab({ companyId }: { companyId: number }) {
         );
       })}
     </ul>
+      <FirstNotice shown={signals.length} limit={SIGNAL_LIMIT} noun="signals" />
+    </>
   );
 }

package/blocks/lifecycle/components/churn-list.tsx

@@ -35,15 +35,18 @@ export interface ChurnListProps {
 }
 
 /** Loaded on click: one call per row up front would be 25 calls for a page the person may only skim. */
+/** The signals API has no paging: a full read is shown as "20+ recent signals". */
+const SIGNAL_LIMIT = 20;
+
 function Intent({ companyId }: { companyId: number }) {
   const [asked, setAsked] = useState(false);
-  const q = useG8Query((signal) => g8Get(`/accounts/${companyId}/intent-signals`, { limit: 20 }, { signal }), [companyId], { enabled: asked });
+  const q = useG8Query((signal) => g8Get(`/accounts/${companyId}/intent-signals`, { limit: SIGNAL_LIMIT }, { signal }), [companyId], { enabled: asked });
   if (!asked) return <Button size="sm" variant="ghost" aria-label={`Check activity for ${companyId}`} onClick={() => setAsked(true)}>Check</Button>;
   if (q.loading) return <Skeleton className="h-4 w-16" />;
   if (q.error) return <span className="text-muted-foreground text-xs">n/a</span>;
   const payload = body(q.data);
   const signals = Array.isArray(payload) ? payload : Array.isArray(asRec(payload).signals) ? (asRec(payload).signals as unknown[]) : [];
-  return <span className="text-xs">{signals.length ? `${signals.length} recent signals` : "Quiet"}</span>;
+  return <span className="text-xs">{signals.length ? `${signals.length}${signals.length >= SIGNAL_LIMIT ? "+" : ""} recent signals` : "Quiet"}</span>;
 }
 
 export function ChurnList({ stageSlug = "churned", winBackSlug = "leads", onOpenCompany, pageSize = 25, className }: ChurnListProps) {

package/blocks/lifecycle/components/customer-table.tsx

@@ -41,7 +41,7 @@ function Summary() {
   return (
     <div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-4" data-testid="revenue-summary">
       {tiles.map(([key, value]) => (
-        <Card key={key}><CardContent className="p-4"><div className="text-2xl font-semibold">{value.toLocaleString()}</div><div className="text-muted-foreground text-xs capitalize">{key.replace(/_count$/, "").replace(/_/g, " ")}</div></CardContent></Card>
+        <Card key={key}><CardContent className="p-4"><div className="text-2xl font-medium">{value.toLocaleString()}</div><div className="text-muted-foreground text-xs capitalize">{key.replace(/_count$/, "").replace(/_/g, " ")}</div></CardContent></Card>
       ))}
     </div>
   );

package/blocks/lifecycle/components/lifecycle-board.tsx

@@ -25,6 +25,7 @@ import { useLifecycleStages } from "../hooks/use-lifecycle-stages";
 import { asRec, body, money } from "../lib/lifecycle";
 import type { CompanyRecord, LifecycleStage } from "../lib/lifecycle";
 import { StageMoveDialog } from "./stage-move-dialog";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface LifecycleBoardProps {
   /** Open a company in your detail route (CompanyDetail from the crm block, for example). */
@@ -77,13 +78,14 @@ function Column({ stage, count, pageSize, version, onOpenCompany, onMove }: Colu
 }
 
 export function LifecycleBoard({ onOpenCompany, pageSize = 25, className }: LifecycleBoardProps) {
+  const brand = useBrand();
   const { stages, countOf, loading, error, refetch } = useLifecycleStages();
   const [moving, setMoving] = useState<{ record: CompanyRecord; stage: LifecycleStage } | null>(null);
   const [version, setVersion] = useState(0);
 
   if (loading) return <div className={className} aria-busy="true"><Skeleton className="h-48 w-full" /></div>;
   if (error) return <ApiError error={error} onRetry={() => void refetch()} />;
-  if (stages.length === 0) return <EmptyState title="No lifecycle stages" description="Stages are configured in graph8 under Revenue settings." />;
+  if (stages.length === 0) return <EmptyState title="No lifecycle stages" description={`Stages are configured in ${brand.linkLabel} under Revenue settings.`} />;
 
   return (
     <div className={className}>

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

@@ -47,6 +47,7 @@ import { CustomerTable } from "./customer-table";
 import { LeadQueue } from "./lead-queue";
 import { LifecycleBoard } from "./lifecycle-board";
 import { StageMoveDialog } from "./stage-move-dialog";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface LifecycleScreenProps {
   /** Buttons next to "Move stage" in the record panel. */
@@ -78,6 +79,7 @@ function StageTab({ stage, version, onOpenCompany, onOpenContact }: { stage: Lif
 }
 
 export function LifecycleScreen({ renderDetailActions, extraDetailTabs, toolbarActions }: LifecycleScreenProps) {
+  const brand = useBrand();
   const { stages, countOf, loading, error, refetch } = useLifecycleStages();
   const [tabParam, setTab] = useUrlState("tab", "board");
   const [raw, setRaw] = useUrlState("rec");
@@ -123,7 +125,7 @@ export function LifecycleScreen({ renderDetailActions, extraDetailTabs, toolbarA
 
   let body: ReactNode;
   if (error) body = <ApiError error={error} title="Could not load lifecycle stages" onRetry={() => void refetch()} />;
-  else if (!loading && stages.length === 0) body = <EmptyState title="No lifecycle stages" description="Stages are configured in graph8 under Revenue settings." />;
+  else if (!loading && stages.length === 0) body = <EmptyState title="No lifecycle stages" description={`Stages are configured in ${brand.linkLabel} under Revenue settings.`} />;
   else if (activeStage) body = <StageTab stage={activeStage} version={version} onOpenCompany={openCompany} onOpenContact={openContact} />;
   else body = <LifecycleBoard key={version} onOpenCompany={openCompany} />;
 

package/blocks/lifecycle/lib/lifecycle.ts

@@ -85,7 +85,7 @@ export function money(cents: number | null | undefined, currency = "USD"): strin
 }
 
 export function contactName(c: ContactRecord): string {
-  return [c.first_name, c.last_name].filter(Boolean).join(" ") || "Unnamed contact";
+  return [c.first_name, c.last_name].filter(Boolean).join(" ") || (c.id != null ? `#${c.id}` : "-");
 }
 
 /** A masked field arrives as `"***"`; the real value needs an unlock (billable) or an enrichment. */

package/blocks/lists/README.md

@@ -6,6 +6,19 @@ It builds on the `crm` block (the members panel is a `ContactTable`).
 
 Install: `npx @graph8/sdk add lists` (installs `foundation` and `crm` first).
 
+## Screens
+
+Two finished pages. Mount one as a route with no props (`<ListsScreen />`); both take optional `toolbarActions`,
+`renderRowActions` and `renderDetailActions` slots for cross-block glue.
+
+| Screen | What it does |
+|---|---|
+| `ListsScreen` | Searchable, paged table of lists with member counts and build status; **New list** / Edit / Delete (confirmed) in a side sheet; open a list (`?id=`) for its Members tab (contacts, remove from list with confirmation), **Add contacts** from the CRM (conflicts shown, never auto-picked), **Refresh** for dynamic lists, **Check health**, and a Details tab. **Export** downloads a list as CSV or XLSX. `?view=full` opens a list or a suppressed contact full-page. Company lists show counts; the API has no read operation for company-list members, so they link out to the graph8 app. |
+| `SuppressionsScreen` | Do-not-contact ledger filtered by channel and reason; **Suppress contacts** by id or by ticking people from the CRM (default channel: all); check any contact id; open a row for the contact's record and live status; **Reinstate** (confirmed, lifts every suppression on the contact). |
+
+Prerequisites: `crm` installed (the CLI does it), proxy allowlist `lists` and `contacts`, key scopes `lists:read/write/delete`
+and `contacts:read/write`. The screens use the foundation screen kit (`components/screen/*`, `hooks/use-url-state`).
+
 ## What you get
 
 | Component | Use it for | Embed props |
@@ -26,7 +39,7 @@ Install: `npx @graph8/sdk add lists` (installs `foundation` and `crm` first).
    shows `ready_count / warned / blocked` and retries with `conflict_resolution: "skip_all" | "add_all"`.
 4. **Members**: `ContactTable listId={id}` (or `GET /contacts?list_id=`). Removing uses
    `DELETE /lists/{list_id}/contacts { contact_ids }`; contacts are never deleted by it.
-5. **Suppress**: `POST /contacts/suppressions/bulk-add { contact_ids, channel, reason }`; read back with
+5. **Suppress**: pick people by name with the `ContactPicker` (pickers block) (no ids to type; pasting ids stays under "Paste ids instead"), then `POST /contacts/suppressions/bulk-add { contact_ids, channel, reason }`; read back with
    `GET /contacts/suppressions`. The ledger has ids only (no names or emails): open the contact for details.
 6. **Reinstate**: `POST /contacts/suppressions/reinstate { contact_ids }`. Contacts who unsubscribed themselves
    can be refused; the answer lists them in `skipped`.
@@ -94,3 +107,9 @@ Ask the person: who may reinstate suppressed contacts (decide it in the proxy's
 | checkContactSuppression | GET /contacts/{contact_id}/suppression | read | SuppressionManager |
 | reinstateSuppressions | POST /contacts/suppressions/reinstate | write | SuppressionManager |
 | refreshDynamicList, checkListIntegrity | POST /lists/{id}/refresh, /lists/{id}/integrity-check | write, read | recipes |
+
+## Cross-block glue
+
+- `AddCompanyPeopleToListButton` (`components/add-company-people-to-list-button.tsx`): "Add people to list" for companies. Lists hold contacts, so it reads the people at the companies (`GET /contacts?company_id=`, up to 500) and opens `AddToListButton` for them. `AddToListButton` gains optional `defaultOpen`, `hideTrigger` and `onClosed`; `ListsScreen` gains optional `onOpenContact` so list members open in your contacts screen.
+
+- `RecordListsTab` (`components/record-lists-tab.tsx`): the lists one contact belongs to (`getContactLists`), with `AddToListButton` and a confirmed Remove (`removeContactsFromList`, destructive). `extraDetailTabs` entry for ContactsScreen: `{ id: "lists", label: "Lists", render: (c) => <RecordListsTab contactId={c.id} onOpenList={(id) => router.push(`/lists?id=${id}`)} /> }`.

package/blocks/lists/block.json

@@ -8,10 +8,12 @@
     "members panel built on the CRM ContactTable with remove-from-list",
     "ListPicker (search or create) and AddToListButton for any contact selection",
     "conflict review when contacts belong to other reps",
-    "suppression ledger by channel and reason, bulk suppress, check, reinstate"
+    "suppression ledger by channel and reason, bulk suppress, check, reinstate",
+    "finished ListsScreen and SuppressionsScreen pages"
   ],
   "dependsOn": [
-    "crm"
+    "crm",
+    "pickers"
   ],
   "operations": [
     "add_contacts_to_list_lists__list_id__contacts_post",
@@ -20,6 +22,8 @@
     "check_list_integrity_lists__list_id__integrity_check_post",
     "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",
@@ -84,12 +88,73 @@
         "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",
         "write"
       ]
+    },
+    {
+      "name": "ListsScreen",
+      "file": "components/lists-screen.tsx",
+      "purpose": "Finished Lists page: searchable table, create/edit/delete, member panel with add and remove, refresh and health check.",
+      "operations": [
+        "check_list_integrity_lists__list_id__integrity_check_post",
+        "create_list_lists_post",
+        "delete_list_lists__list_id__delete",
+        "download_list_lists__audience_id__download_get",
+        "list_lists_lists_get",
+        "refresh_dynamic_list_lists__audience_id__refresh_post",
+        "remove_contacts_from_list_lists__list_id__contacts_delete",
+        "update_list_lists__list_id__patch"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
+    },
+    {
+      "name": "SuppressionsScreen",
+      "file": "components/suppressions-screen.tsx",
+      "purpose": "Finished do-not-contact page: filtered ledger, suppress by id or from the CRM, contact detail, confirmed reinstate.",
+      "operations": [
+        "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",
+        "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": [],
@@ -161,6 +226,7 @@
     }
   ],
   "peerDependencies": {
+    "lucide-react": ">=0.400.0",
     "react": ">=18"
   }
 }

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

@@ -21,6 +21,7 @@ import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogH
 import { ApiError } from "@/g8/components/api-error";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { g8Post } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
 import { ListPicker } from "./list-picker";
 import type { ListSummary } from "./list-picker";
 
@@ -41,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 }
@@ -51,30 +58,34 @@ 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 ?? [] };
-  }, { onSuccess: (r) => { setResult(r); onAdded?.(r); } });
+    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>
-            <DialogTitle>Add {contactIds.length.toLocaleString()} contact{contactIds.length === 1 ? "" : "s"} to a list</DialogTitle>
+            <DialogTitle>Add {plural(contactIds.length, "contact")} to a list</DialogTitle>
             <DialogDescription>Contacts already in the list are skipped.</DialogDescription>
           </DialogHeader>
 
@@ -88,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 {
@@ -31,6 +33,9 @@ export interface ListSummary {
   contact_count?: number | null;
   company_count?: number | null;
   is_dynamic?: boolean;
+  source?: string | null;
+  created_by?: string | null;
+  tags?: string[];
   created_at?: string | null;
   updated_at?: string | null;
 }
@@ -56,16 +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]);
+  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)} />
@@ -82,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

@@ -27,9 +27,13 @@ import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
 import { ContactTable } from "@/g8/crm/components/contact-table";
 import { useDebouncedValue } from "@/g8/crm/hooks/use-debounced";
 import { usePageQuery } from "@/g8/crm/hooks/use-page-query";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { RecordLink } from "@/g8/components/screen/record-link";
 import type { ListSummary } from "./list-picker";
 
 export interface ListTableProps {
+  /** URL param the host screen reads for this record type. With it the name is a real link (Cmd-click opens it in a new tab); without it a plain button. */
+  linkParam?: string;
   pageSize?: number;
   /** Called when a list row is clicked. Without it, contact lists open the members panel. */
   onOpen?: (list: ListSummary) => void;
@@ -42,9 +46,9 @@ 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({ pageSize = 25, onOpen, allowCreate = true, refreshKey, className }: ListTableProps) {
+export function ListTable({ linkParam, pageSize = 25, onOpen, allowCreate = true, refreshKey, className }: ListTableProps) {
   const [search, setSearch] = useState("");
   const debouncedSearch = useDebouncedValue(search);
   const [editing, setEditing] = useState<{ id?: number; title: string; description: string; type: "contacts" | "companies" } | null>(null);
@@ -57,13 +61,15 @@ export function ListTable({ pageSize = 25, onOpen, allowCreate = true, refreshKe
     (page, signal) => g8Get<ListSummary[]>("/lists", { page, limit: pageSize, search: debouncedSearch.trim() || undefined }, { signal }),
     [debouncedSearch, refreshKey],
     pageSize,
+    ["lists", "list", "table"],
   );
   const save = useG8Mutation(
     (v: NonNullable<typeof editing>) => (v.id ? g8Patch(`/lists/${v.id}`, { title: v.title, description: v.description }) : g8Post("/lists", { title: v.title, type: v.type, description: v.description || undefined })),
-    { onSuccess: () => { setEditing(null); void lists.refetch(); } },
+    { invalidates: [["lists"]], onSuccess: () => { setEditing(null); void lists.refetch(); } },
   );
-  const remove = useG8Mutation((id: number) => g8Delete(`/lists/${id}`), { onSuccess: () => { setDeleting(null); void lists.refetch(); } });
+  const remove = useG8Mutation((id: number) => g8Delete(`/lists/${id}`), { invalidates: [["lists"]], onSuccess: () => { setDeleting(null); void lists.refetch(); } });
   const removeMembers = useG8Mutation((v: { listId: number; ids: number[] }) => g8Delete(`/lists/${v.listId}/contacts`, { body: { contact_ids: v.ids } }), {
+    invalidates: [["lists"], ["contacts", "list"]],
     onSuccess: () => { setRemoving(null); setMembersKey((k) => k + 1); void lists.refetch(); },
   });
 
@@ -87,8 +93,8 @@ export function ListTable({ pageSize = 25, onOpen, allowCreate = true, refreshKe
             {lists.loading && lists.rows.length === 0
               ? Array.from({ length: 4 }, (_, i) => <TableRow key={`sk${i}`}><TableCell colSpan={6}><Skeleton className="h-5 w-full" /></TableCell></TableRow>)
               : lists.rows.map((l) => (
-                  <TableRow key={l.id} data-testid={`list-row-${l.id}`} className="cursor-pointer" onClick={() => open(l)}>
-                    <TableCell className="font-medium">{l.title}{l.is_dynamic ? <span className="ml-2 text-xs text-muted-foreground">dynamic</span> : null}</TableCell>
+                  <TableRow key={l.id} data-testid={`list-row-${l.id}`} className="cursor-pointer" {...rowActivationProps(() => open(l))}>
+                    <TableCell className="font-medium">{onOpen || l.type !== "companies" ? <RecordLink param={linkParam} id={l.id} onOpen={() => open(l)}>{l.title}</RecordLink> : l.title}{l.is_dynamic ? <span className="ml-2 text-xs text-muted-foreground">dynamic</span> : null}</TableCell>
                     <TableCell className="capitalize">{l.type ?? "-"}</TableCell>
                     <TableCell className="text-right">{count(l).toLocaleString()}</TableCell>
                     <TableCell className={STATUS_STYLE[l.status ?? ""] ?? ""} title={l.status_detail ?? undefined}>{l.status_reason ? l.status_reason.replace(/_/g, " ") : l.status ?? "-"}</TableCell>