@graph8/sdk 0.361.0 → 0.370.0

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

@@ -0,0 +1,66 @@
+"use client";
+
+/**
+ * Account views for the lifecycle record panel: the customer-success brief and recent intent signals.
+ *
+ * SDK operations, in order:
+ *   AccountBriefTab:   GET  /customer-success/companies/{id}/brief              (lifecycle.getBrief)         read, free
+ *                      POST /customer-success/companies/{id}/brief/synthesize   (lifecycle.synthesizeBrief)  BILLABLE -> ConfirmSpendDialog
+ *   AccountSignalsTab: GET  /accounts/{id}/intent-signals?limit                  (lifecycle.getAccountIntentSignals) read
+ * The company id is the account id on these revenue routes.
+ */
+import { useState } from "react";
+import { Radar } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { asRec, body, text } from "../lib/lifecycle";
+
+export function AccountBriefTab({ companyId, name }: { companyId: number; name?: string | null }) {
+  const base = `/customer-success/companies/${companyId}/brief`;
+  const brief = useG8Query((signal) => g8Get(base, undefined, { signal }), [companyId]);
+  const [confirm, setConfirm] = useState(false);
+  const write = useG8Mutation(() => g8Post(`${base}/synthesize`), { onSuccess: () => { setConfirm(false); void brief.refetch(); } });
+  const b = asRec(body(brief.data));
+  if (brief.error) return <ApiError error={brief.error} title="Could not load the brief" onRetry={() => void brief.refetch()} />;
+  if (brief.loading && !brief.data) return <Skeleton className="h-24 w-full" aria-label="Loading brief" />;
+  return (
+    <SectionCard title="Account brief" description="What the team knows about this customer, in one place." actions={<Button size="sm" variant="outline" onClick={() => setConfirm(true)}>{b.summary ? "Rewrite brief" : "Write brief"}</Button>}>
+      {b.summary ? <p className="whitespace-pre-wrap text-sm" data-testid="brief-summary">{text(b.summary)}</p> : <p className="text-sm text-muted-foreground">No brief written yet.</p>}
+      {b.synthesized_at ? <p className="mt-2 text-xs text-muted-foreground">Written <time dateTime={text(b.synthesized_at)}>{new Date(text(b.synthesized_at)).toLocaleDateString()}</time></p> : null}
+      {write.error ? <ApiError error={write.error} title="Could not write the brief" /> : null}
+      {confirm ? (
+        <ConfirmSpendDialog open tier="billable" title={`Write a brief for ${name ?? "this customer"}`} confirmLabel="Write brief" confirming={write.loading}
+          description="Reads everything known about the customer and writes a new brief with an AI model. This spends credits." onConfirm={() => void write.mutate(undefined)} onCancel={() => setConfirm(false)} />
+      ) : null}
+    </SectionCard>
+  );
+}
+
+export function AccountSignalsTab({ companyId }: { companyId: number }) {
+  const q = useG8Query((signal) => g8Get(`/accounts/${companyId}/intent-signals`, { limit: 20 }, { 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);
+  const raw = Array.isArray(payload) ? payload : Array.isArray(asRec(payload).signals) ? (asRec(payload).signals as unknown[]) : [];
+  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);
+        return (
+          <li key={text(s.id, String(i))} className="flex items-center justify-between gap-3 p-3 text-sm">
+            <span className="min-w-0 truncate">{text(s.title ?? s.signal ?? s.signal_type ?? s.type ?? s.name, "Signal")}</span>
+            {when ? <time className="shrink-0 text-xs text-muted-foreground" dateTime={when} title={new Date(when).toLocaleString()}>{new Date(when).toLocaleDateString()}</time> : null}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

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

@@ -0,0 +1,149 @@
+"use client";
+
+/**
+ * LifecycleScreen: the finished revenue-lifecycle product. One screen for Suspects, Leads, Trial, Customers and
+ * Churned (and any custom stage): the board, each stage's working list, and a record panel. No props are required.
+ *
+ * It composes: LifecycleBoard (columns with counts and Move), LeadQueue (contacts of a stage: search, billable
+ * unlock, move), CustomerTable (MRR, headline counts, AI account brief), ChurnList (last MRR, activity check,
+ * win-back), StageMoveDialog, and the crm block's CompanyDetail and ContactDetail for the open record.
+ *
+ * Flows:
+ *   - Headline numbers: how many companies sit in every stage.
+ *   - Board tab: move a company between stages (a dry run shows refusals first, for example Customers without an
+ *     active subscription). One tab per stage after it: Customers shows the book of business with an account brief
+ *     (rewriting it uses credits, confirmed); Churned shows lost revenue and a win-back to Leads; every other stage
+ *     is a contact queue where locked emails can be unlocked (credits, confirmed).
+ *   - Open a company or contact (deep link ?rec=company:<id> or ?rec=contact:<id>, full page with &view=full) -> the
+ *     full CRM record (activity, notes, tasks, edit) with a Move stage action; a company also gets Brief (rewrite
+ *     uses credits, confirmed) and Signals tabs. Leads are the contacts of a stage, customers and churned are companies.
+ *
+ * SDK operations (through the composed parts): listLifecycleStages, getLifecycleStageCounts,
+ * listLifecycleStageRecords, moveCompanyLifecycleStage (dry run first), moveContactLifecycleStage,
+ * listLifecycleContacts, unlockLifecycleContacts (billable), getRevenueSummary, getBrief, synthesizeBrief
+ * (billable), getAccountIntentSignals, plus the crm block's getCompany / getContact.
+ *
+ * Slots (all optional): renderDetailActions, extraDetailTabs, toolbarActions.
+ */
+import { useState, type ReactNode } from "react";
+import { GitBranch } from "lucide-react";
+import { Button } from "@graph8/sdk/ui";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { CompanyDetail } from "@/g8/crm/components/company-detail";
+import { ContactDetail } from "@/g8/crm/components/contact-detail";
+import type { CompanyRecord as CrmCompany, ContactRecord as CrmContact } from "@/g8/crm/lib/crm-types";
+import { useLifecycleStages } from "../hooks/use-lifecycle-stages";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import type { LifecycleStage } from "../lib/lifecycle";
+import { AccountBriefTab, AccountSignalsTab } from "./account-related";
+import { ChurnList } from "./churn-list";
+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. */
+  renderDetailActions?: (record: { kind: "company" | "contact"; id: number }) => ReactNode;
+  /** Extra tabs in the record panel (for example Deals or Quotes for a company). */
+  extraDetailTabs?: Array<{ id: string; label: string; render: (record: { kind: "company" | "contact"; id: number }) => ReactNode }>;
+  toolbarActions?: ReactNode;
+}
+
+type OpenRecord = { kind: "company" | "contact"; id: number };
+
+function parseRecord(raw: string | null | undefined): OpenRecord | null {
+  const [kind, id] = (raw ?? "").split(":");
+  const n = Number(id);
+  return (kind === "company" || kind === "contact") && Number.isInteger(n) && n > 0 ? { kind, id: n } : null;
+}
+
+/** The brief tab, named after the company so the billable confirm says which customer it writes for. */
+function CompanyBrief({ companyId }: { companyId: number }) {
+  const company = useG8Query((signal) => g8Get<CrmCompany>(`/companies/${companyId}`, undefined, { signal }), [companyId]);
+  const name = company.data?.data?.name ?? null;
+  return <AccountBriefTab companyId={companyId} name={name} />;
+}
+
+function StageTab({ stage, version, onOpenCompany, onOpenContact }: { stage: LifecycleStage; version: number; onOpenCompany: (id: number) => void; onOpenContact: (id: number) => void }) {
+  if (stage.slug === "customers") return <CustomerTable key={version} stageSlug={stage.slug} onOpenCompany={onOpenCompany} />;
+  if (stage.slug === "churned") return <ChurnList key={version} stageSlug={stage.slug} onOpenCompany={onOpenCompany} />;
+  return <LeadQueue key={`${stage.slug}-${version}`} stageSlug={stage.slug} onOpenContact={onOpenContact} />;
+}
+
+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");
+  const [mode, setMode] = useUrlState("view");
+  const [version, setVersion] = useState(0);
+  const [moving, setMoving] = useState<{ record: OpenRecord; name: string } | null>(null);
+  const record = parseRecord(raw);
+  const tab = tabParam === "board" || stages.some((s) => s.slug === tabParam) ? (tabParam as string) : "board";
+  const activeStage = stages.find((s) => s.slug === tab);
+  const close = () => { setRaw(null); setMode(null); };
+  const openCompany = (id: number) => setRaw(`company:${id}`);
+  const openContact = (id: number) => setRaw(`contact:${id}`);
+  const refresh = () => { setVersion((v) => v + 1); void refetch(); };
+
+  const moveButton = (name: string | null | undefined) => record ? (
+    <>
+      <Button variant="outline" size="sm" onClick={() => setMoving({ record, name: name || `${record.kind} ${record.id}` })}>Move stage</Button>
+      {renderDetailActions?.(record)}
+    </>
+  ) : null;
+
+  const detail = record ? (
+    <DetailPanel
+      title={record.kind === "company" ? "Company" : "Contact"}
+      onClose={close}
+      onExpand={mode === "full" ? undefined : () => setMode("full")}
+      onCollapse={mode === "full" ? () => setMode(null) : undefined}
+      tabs={[
+        {
+          id: "record",
+          label: "Record",
+          content: record.kind === "company"
+            ? <CompanyDetail key={record.id} companyId={record.id} onOpenContact={(c: CrmContact) => openContact(c.id)} renderActions={(c: CrmCompany) => moveButton(c.name)} extraTabs={(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, render: () => t.render(record) }))} />
+            : <ContactDetail key={record.id} contactId={record.id} onOpenCompany={openCompany} renderActions={(c: CrmContact) => moveButton(c.full_name || [c.first_name, c.last_name].filter(Boolean).join(" "))} extraTabs={(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, render: () => t.render(record) }))} />,
+        },
+        ...(record.kind === "company" ? [
+          { id: "brief", label: "Brief", content: <CompanyBrief key={record.id} companyId={record.id} /> },
+          { id: "signals", label: "Signals", content: <AccountSignalsTab key={record.id} companyId={record.id} /> },
+        ] : []),
+      ]}
+    />
+  ) : null;
+
+  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 ${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} />;
+
+  return (
+    <ScreenLayout
+      title="Lifecycle"
+      description="Follow every company from suspect to customer, and win back the ones that left."
+      icon={<GitBranch className="size-5" />}
+      actions={toolbarActions}
+      tabs={[{ id: "board", label: "Board" }, ...stages.map((s) => ({ id: s.slug, label: s.name }))]}
+      activeTab={tab}
+      onTabChange={(id) => { setTab(id); close(); }}
+      stats={stages.map((s) => ({ label: s.name, value: countOf(s) == null ? "-" : (countOf(s) as number).toLocaleString() }))}
+    >
+      <SplitView detailOpen={Boolean(record)} onCloseDetail={close} expanded={mode === "full" && Boolean(record)} onExpandedChange={(full) => setMode(full ? "full" : null)} detailWidth="xl" detail={detail} list={body} />
+      {moving ? (
+        <StageMoveDialog kind={moving.record.kind} recordId={moving.record.id} recordName={moving.name} stages={stages} onClose={() => setMoving(null)} onMoved={() => { setMoving(null); refresh(); }} />
+      ) : null}
+    </ScreenLayout>
+  );
+}

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 |

package/blocks/lists/block.json

@@ -8,7 +8,8 @@
     "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"
@@ -20,6 +21,7 @@
     "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_contact_fields_fields_get",
     "list_contacts_contacts_get",
     "list_lists_lists_get",
@@ -90,6 +92,41 @@
         "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"
+      ],
+      "tiers": [
+        "read",
+        "write"
+      ]
     }
   ],
   "hooks": [],
@@ -161,6 +198,7 @@
     }
   ],
   "peerDependencies": {
+    "lucide-react": ">=0.400.0",
     "react": ">=18"
   }
 }

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";
 
@@ -63,7 +64,7 @@ export function AddToListButton({ contactIds, listId, label = "Add to list", var
       ...(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); } });
+  }, { 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(); };
@@ -74,7 +75,7 @@ export function AddToListButton({ contactIds, listId, label = "Add to list", var
       <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>
 

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

@@ -31,6 +31,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;
 }
@@ -60,8 +63,9 @@ export function ListPicker({ value, onChange, type = "contacts", allowCreate = t
   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 = useG8Query((signal) => g8Get<ListSummary[]>("/lists", { search: q || undefined, limit: 50 }, { signal }), [q], { key: ["lists", "picker", { 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 }); },
   });
 

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;
@@ -44,7 +48,7 @@ function count(l: ListSummary): number {
 
 const STATUS_STYLE: Record<string, string> = { failed: "text-destructive", processing: "text-amber-600" };
 
-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>