@graph8/sdk 0.370.0 → 0.374.0

package/blocks/crm/components/contacts-screen.tsx

@@ -12,6 +12,11 @@
  * or many (confirm, "N of M" report, 404 = already gone) - import a CSV/Excel file - review and merge duplicates -
  * add notes and tasks - hand a contact to other blocks through the slot props.
  *
+ * Record actions: assign an owner to a whole list (only with renderOwnerPicker, never for a selection), tag chips on the open
+ * contact plus add/remove tags on a selection and a tag manager, edit one field on a selection, verify emails and unlock
+ * locked contacts (both billable, behind ConfirmSpendDialog with the count taken from the selection), AI documents and
+ * signals/next best step tabs on the open contact. Each action also works from the row's "..." button.
+ *
  * SDK operations: none of its own. listContacts, getContact, getActivityFeed, duplicateCounts are `read`;
  * the forms, notes and tasks are `write`; deleteContact (rows, detail and bulk) is `destructive` and always goes
  * through ConfirmSpendDialog. Nothing here sends a message to a person.
@@ -22,7 +27,7 @@
 import { useEffect, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 import { Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
-import { Building2, GitMerge, Lock, Plus, Trash2, Upload, Users } from "lucide-react";
+import { Building2, GitMerge, Lock, Plus, Tags, Trash2, Upload, Users } 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";
@@ -40,17 +45,30 @@ import { RecordLink } from "@/g8/components/screen/record-link";
 import { plural } from "@/g8/lib/plural";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { useUrlState } from "@/g8/hooks/use-url-state";
+import { useUrlFilters } from "@/g8/hooks/use-url-filters";
+import { ListSelect } from "./list-select";
+import { MoreFilters, TextFilter } from "@/g8/components/screen/filter-controls";
 import { g8Delete, g8Get } from "@/g8/lib/g8-client";
-import { useDebouncedValue } from "../hooks/use-debounced";
 import { usePageQuery } from "../hooks/use-page-query";
-import { contactName, errorStatus, isMasked, location } from "../lib/crm-types";
+import { contactName, contactSubtitle, errorStatus, isMasked, location } from "../lib/crm-types";
 import type { ContactRecord, ScreenActionContext } from "../lib/crm-types";
 import { Pager, SortHead, formatDay, sortRows, useBulkDelete, useRowSelection, useSort } from "../lib/screen-parts";
 import { ActivityTimeline } from "./activity-timeline";
 import { DedupeReview } from "./dedupe-review";
 import { ImportWizard } from "./import-wizard";
 import { NotesPanel } from "./notes-panel";
+import { OwnerAssignListButton } from "./owner-assign";
+import type { OwnerPickerProps } from "./owner-assign";
 import { RecordForm } from "./record-form";
+import { BulkUpdateButton } from "./bulk-update";
+import { ContactDocumentsTab } from "./contact-documents-tab";
+import { ContactInsightsTab } from "./contact-insights-tab";
+import { UnlockInfoButton } from "./unlock-info-button";
+import { VerifyEmailButton } from "./verify-email-button";
+import { ContactRowActions } from "./contact-row-actions";
+import { ContactTagChips } from "./contact-tag-chips";
+import { TagAssignButton } from "./tag-assign";
+import { TagManager } from "./tag-manager";
 import { TaskList } from "./task-list";
 
 export interface ContactsScreenProps {
@@ -67,13 +85,22 @@ export interface ContactsScreenProps {
   toolbarActions?: ReactNode;
   /** Extra bulk actions next to Delete (add to list, enrich, enroll...). */
   renderBulkActions?: (selection: { ids: number[]; rows: ContactRecord[]; clear: () => void }) => ReactNode;
+  /**
+   * Team-member picker for "Assign owner to all N in this list" (pass the pickers block's MemberPicker:
+   * `renderOwnerPicker={(p) => <MemberPicker label="New owner" {...p} />}`). Injected so crm does not depend on pickers.
+   * Without it the action is hidden. It is offered only when a list is in scope with no other filter, and never for a selection:
+   * the API assigns owners by filter, not by id.
+   */
+  renderOwnerPicker?: (props: OwnerPickerProps) => ReactNode;
   /** Called with a company id from the contact panel ("Open company"). Without it the button is hidden. */
   onOpenCompany?: (companyId: number) => void;
   className?: string;
 }
 
-interface Filters { name: string; job_title: string; seniority_level: string; country: string }
-const NO_FILTERS: Filters = { name: "", job_title: "", seniority_level: "", country: "" };
+/** Every filter the contacts API takes (name, email, job title, seniority, company name and id, country, state, city, department, industry), plus `list`. */
+const FILTER_KEYS = ["name", "job_title", "seniority_level", "country", "email", "company_name", "company_id", "state", "city", "job_department", "industry", "list"] as const;
+type FilterKey = (typeof FILTER_KEYS)[number];
+const MORE_KEYS: readonly FilterKey[] = ["email", "company_name", "company_id", "state", "city", "job_department", "industry", "list"];
 const SENIORITY = ["C-Suite", "VP", "Director", "Manager"];
 
 function sortValue(row: ContactRecord, key: string): string | null | undefined {
@@ -81,6 +108,7 @@ function sortValue(row: ContactRecord, key: string): string | null | undefined {
   if (key === "title") return row.job_title;
   if (key === "company") return row.company_name;
   if (key === "location") return location(row);
+  if (key === "owner") return row.owner_name;
   return null;
 }
 
@@ -101,23 +129,28 @@ export function ContactsScreen(props: ContactsScreenProps) {
   const parsedId = idParam ? Number(idParam) : null;
   /** A malformed deep link (`?id=abc`) opens nothing instead of fetching /contacts/NaN. */
   const openId = parsedId != null && Number.isFinite(parsedId) ? parsedId : null;
-  const [draft, setDraft] = useState<Filters>(NO_FILTERS);
-  const filters = useDebouncedValue(draft);
+  // The filters live in the URL (`c_email=...`), so a filtered view survives reload, Back and sharing.
+  const urlFilters = useUrlFilters(FILTER_KEYS, { prefix: "c_" });
+  const { draft, filters } = urlFilters;
+  const apiFilters = Object.fromEntries(Object.entries(filters).filter(([k, v]) => v && k !== "list"));
+  const effectiveListId = listId ?? (filters.list ? Number(filters.list) : undefined);
   const [sheet, setSheet] = useState<"new" | "import" | "dupes" | null>(null);
   const [confirmDelete, setConfirmDelete] = useState(false);
+  const [tagManager, setTagManager] = useState(false);
   const [note, setNote] = useState<string | null>(null);
   const { sort, toggle: toggleSort } = useSort();
 
   const list = usePageQuery<ContactRecord>(
-    (page, signal) => g8Get<ContactRecord[]>("/contacts", { page, limit: pageSize, list_id: listId, ...Object.fromEntries(Object.entries(filters).filter(([, v]) => v)) }, { signal }),
-    [listId, filters],
+    (page, signal) => g8Get<ContactRecord[]>("/contacts", { page, limit: pageSize, list_id: effectiveListId, ...apiFilters }, { signal }),
+    [effectiveListId, filters],
     pageSize,
     ["contacts", "list", "screen"],
+    urlFilters.ready,
   );
   const dupes = useG8Query((signal) => g8Get<{ pending?: number; count?: number }>("/duplicates/counts", { entity_type: "contact" }, { signal }), [], { key: ["duplicates", "counts", "contact"] });
   const selection = useRowSelection<ContactRecord>(`${listId}|${JSON.stringify(filters)}`);
   const rows = useMemo(() => sortRows(list.rows, sort, sortValue), [list.rows, sort]);
-  const hasFilters = Object.values(draft).some(Boolean);
+  const hasFilters = urlFilters.active;
   const pending = dupes.data?.data.pending ?? dupes.data?.data.count;
   const lockedOnPage = list.rows.filter((r) => isMasked(r.work_email)).length;
 
@@ -129,9 +162,11 @@ export function ContactsScreen(props: ContactsScreenProps) {
     void list.refetch();
     void dupes.refetch();
   });
+  /** The freshest copy of each selected row (a refetch after unlock or owner change replaces the stored one). */
+  const selectedRows = selection.ids.map((id) => list.rows.find((r) => r.id === id) ?? selection.selected.get(id)!).filter(Boolean);
   const allOnPage = rows.length > 0 && rows.every((r) => selection.selected.has(r.id));
   const reload = () => { void list.refetch(); void dupes.refetch(); };
-  const set = (key: keyof Filters, v: string) => setDraft((f) => ({ ...f, [key]: v }));
+  const set = (key: FilterKey, v: string) => urlFilters.set(key, v);
 
   useEffect(() => { setNote(null); }, [filters, listId]);
 
@@ -144,6 +179,8 @@ export function ContactsScreen(props: ContactsScreenProps) {
       actions={
         <>
           {props.toolbarActions}
+          {effectiveListId != null && Object.keys(apiFilters).length === 0 && props.renderOwnerPicker ? <OwnerAssignListButton renderPicker={props.renderOwnerPicker} listId={effectiveListId} total={list.loading ? null : list.total} onDone={reload} /> : null}
+          <Button variant="outline" size="sm" onClick={() => setTagManager(true)}><Tags className="size-4" aria-hidden />Manage tags</Button>
           <Button variant="outline" size="sm" onClick={() => setSheet("dupes")}><GitMerge className="size-4" aria-hidden />Duplicates{pending ? ` (${pending})` : ""}</Button>
           <Button variant="outline" size="sm" onClick={() => setSheet("import")}><Upload className="size-4" aria-hidden />Import</Button>
           <Button size="sm" onClick={() => setSheet("new")}><Plus className="size-4" aria-hidden />New contact</Button>
@@ -173,7 +210,17 @@ export function ContactsScreen(props: ContactsScreenProps) {
                     {SENIORITY.map((s) => <option key={s} value={s}>{s}</option>)}
                   </select>
                   <input aria-label="Filter by country" placeholder="Country" className="h-9 w-32 rounded-md border bg-background px-3 text-sm" value={draft.country} onChange={(e) => set("country", e.target.value)} />
-                  {hasFilters ? <Button variant="ghost" size="sm" onClick={() => setDraft(NO_FILTERS)}>Clear filters</Button> : null}
+                  <MoreFilters activeCount={MORE_KEYS.filter((k) => draft[k]).length}>
+                    <TextFilter label="email" type="email" value={draft.email} onChange={(v) => set("email", v)} className="w-44" />
+                    <TextFilter label="company name" placeholder="Company" value={draft.company_name} onChange={(v) => set("company_name", v)} />
+                    <TextFilter label="company ID" placeholder="Company ID" type="number" value={draft.company_id} onChange={(v) => set("company_id", v)} className="w-28" />
+                    <TextFilter label="industry" value={draft.industry} onChange={(v) => set("industry", v)} />
+                    <TextFilter label="department" placeholder="Department" value={draft.job_department} onChange={(v) => set("job_department", v)} />
+                    <TextFilter label="state" value={draft.state} onChange={(v) => set("state", v)} className="w-28" />
+                    <TextFilter label="city" value={draft.city} onChange={(v) => set("city", v)} className="w-32" />
+                    {listId == null ? <ListSelect label="Filter by list" emptyOption="Any list" value={draft.list} valueLabel={`List ${draft.list}`} pageSize={100} onChange={(l) => set("list", l ? String(l.id) : "")} /> : null}
+                  </MoreFilters>
+                  {hasFilters ? <Button variant="ghost" size="sm" onClick={urlFilters.clear}>Clear filters</Button> : null}
                 </>
               }
             />
@@ -182,6 +229,10 @@ export function ContactsScreen(props: ContactsScreenProps) {
               <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/40 px-3 py-2 text-sm" role="status">
                 <span className="tabular-nums">{selection.ids.length} selected</span>
                 {props.renderBulkActions?.({ ids: selection.ids, rows: selection.rows, clear: selection.clear })}
+                <TagAssignButton contactIds={selection.ids} onDone={reload} />
+                <BulkUpdateButton contactIds={selection.ids} onDone={reload} />
+                <VerifyEmailButton rows={selectedRows} onDone={reload} />
+                <UnlockInfoButton rows={selectedRows} onDone={reload} />
                 <Button variant="destructive" size="sm" onClick={() => setConfirmDelete(true)}><Trash2 className="size-4" aria-hidden />Delete {selection.ids.length}</Button>
                 <Button variant="ghost" size="sm" onClick={selection.clear}>Clear selection</Button>
               </div>
@@ -199,12 +250,13 @@ export function ContactsScreen(props: ContactsScreenProps) {
                     <SortHead label="Company" sortKey="company" sort={sort} onSort={toggleSort} />
                     <TableHead>Email</TableHead>
                     <SortHead label="Location" sortKey="location" sort={sort} onSort={toggleSort} />
-                    {props.renderRowActions ? <TableHead className="w-8"><span className="sr-only">Actions</span></TableHead> : null}
+                    <SortHead label="Owner" sortKey="owner" sort={sort} onSort={toggleSort} />
+                    <TableHead className="w-8"><span className="sr-only">Actions</span></TableHead>
                   </TableRow>
                 </TableHeader>
                 <TableBody>
                   {list.loading && rows.length === 0
-                    ? Array.from({ length: 6 }, (_, i) => <TableRow key={`sk${i}`}><TableCell colSpan={6 + (props.renderRowActions ? 1 : 0)}><Skeleton className="h-6 w-full" /></TableCell></TableRow>)
+                    ? Array.from({ length: 6 }, (_, i) => <TableRow key={`sk${i}`}><TableCell colSpan={8}><Skeleton className="h-6 w-full" /></TableCell></TableRow>)
                     : rows.map((row) => {
                         const name = contactName(row);
                         return (
@@ -219,7 +271,10 @@ export function ContactsScreen(props: ContactsScreenProps) {
                             <TableCell><Cell value={row.company_name} /></TableCell>
                             <TableCell><Cell value={row.work_email} /></TableCell>
                             <TableCell><Cell value={location(row)} /></TableCell>
-                            {props.renderRowActions ? <TableCell onClick={(e) => e.stopPropagation()}>{props.renderRowActions(row, { reload })}</TableCell> : null}
+                            <TableCell><Cell value={row.owner_name} /></TableCell>
+                            <TableCell onClick={(e) => e.stopPropagation()}>
+                              <span className="flex items-center gap-1">{props.renderRowActions?.(row, { reload })}<ContactRowActions row={row} onDone={reload} /></span>
+                            </TableCell>
                           </TableRow>
                         );
                       })}
@@ -229,7 +284,7 @@ export function ContactsScreen(props: ContactsScreenProps) {
                 <EmptyState
                   title={hasFilters ? "No contacts match these filters" : "No contacts yet"}
                   description={hasFilters ? "Try fewer filters." : "Add your first contact or import a file."}
-                  action={hasFilters ? <Button variant="outline" onClick={() => setDraft(NO_FILTERS)}>Clear filters</Button> : <Button onClick={() => setSheet("new")}>New contact</Button>}
+                  action={hasFilters ? <Button variant="outline" onClick={urlFilters.clear}>Clear filters</Button> : <Button onClick={() => setSheet("new")}>New contact</Button>}
                 />
               ) : null}
               <Pager page={list.page} pageCount={list.pageCount} total={list.total} noun="contacts" hasNext={list.hasNext} loading={list.loading} onPage={list.setPage} />
@@ -255,6 +310,7 @@ export function ContactsScreen(props: ContactsScreenProps) {
         <DedupeReview entity="contact" onChanged={reload} />
       </FormSheet>
 
+      <TagManager open={tagManager} onOpenChange={setTagManager} onChanged={reload} />
       <ConfirmSpendDialog
         open={confirmDelete}
         tier="destructive"
@@ -326,7 +382,7 @@ function ContactPanel({ full, setFull, contactId, seed, onClose, onChanged, onDe
     <>
       <DetailPanel
         title={name}
-        subtitle={[contact.job_title, contact.company?.name ?? contact.company_name].filter(Boolean).join(" at ") || "No title or company"}
+        subtitle={contactSubtitle(contact)}
         avatar={<EntityAvatar name={name} kind="person" size="lg" />}
         badges={isMasked(contact.work_email) ? <StatusPill tone="warning" dot>Locked email</StatusPill> : undefined}
         onClose={onClose}
@@ -334,6 +390,7 @@ function ContactPanel({ full, setFull, contactId, seed, onClose, onChanged, onDe
         onCollapse={full ? () => setFull(false) : undefined}
         actions={
           <>
+            {partial ? null : <><VerifyEmailButton rows={[contact]} onDone={() => { void query.refetch(); onChanged(); }} /><UnlockInfoButton rows={[contact]} onDone={() => { void query.refetch(); onChanged(); }} /></>}
             {partial ? null : renderActions?.(contact, { reload: () => { void query.refetch(); bump(); onChanged(); } })}
             {contact.company?.id && onOpenCompany ? <Button variant="outline" size="sm" onClick={() => onOpenCompany(contact.company!.id as number)}><Building2 className="size-4" aria-hidden />Open company</Button> : null}
             <Button variant="outline" size="sm" disabled={partial} title={partial ? "Loading the full record" : undefined} onClick={() => setEditing(true)}>Edit</Button>
@@ -341,10 +398,12 @@ function ContactPanel({ full, setFull, contactId, seed, onClose, onChanged, onDe
           </>
         }
         tabs={[
-          { id: "overview", label: "Overview", content: overview },
+          { id: "overview", label: "Overview", content: <div className="flex flex-col gap-4"><ContactTagChips contactId={contactId} onChanged={onChanged} />{overview}</div> },
           { id: "activity", label: "Activity", content: <ActivityTimeline entityType="contact" entityId={contactId} refreshKey={feedKey} /> },
           { id: "notes", label: "Notes", content: <NotesPanel entity="contact" entityId={contactId} onChanged={bump} /> },
           { id: "tasks", label: "Tasks", content: <TaskList entity="contact" entityId={contactId} onChanged={bump} /> },
+          { id: "documents", label: "AI documents", content: <ContactDocumentsTab contactId={contactId} contactName={name} /> },
+          { id: "insights", label: "Insights", content: <ContactInsightsTab contactId={contactId} /> },
           ...(partial ? [] : extraTabs).map((t) => ({ id: t.id, label: t.label, content: t.render(contact) })),
         ]}
       />

package/blocks/crm/components/dedupe-review.tsx

@@ -21,6 +21,7 @@
 import { useState } from "react";
 import { Button, Tabs, TabsContent, TabsList, TabsTrigger } 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 { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
@@ -53,6 +54,9 @@ function side(pair: Pair, s: "a" | "b", entity: "contact" | "company") {
   return { id: pair[`${s}_id`] as number, name: name || String([pair[`${s}_email`], pair[`${s}_domain`]].find((v) => v && !isMasked(v)) ?? `#${pair[`${s}_id`]}`), lines: lines.filter(Boolean).map((l) => (isMasked(l) ? "Locked" : String(l))) };
 }
 
+/** The recent-merges API has no paging: a full read is announced under the list. */
+const RECENT_LIMIT = 25;
+
 export function DedupeReview({ entity, onChanged, className }: DedupeReviewProps) {
   const brand = useBrand();
   const plural = entity === "contact" ? "contacts" : "companies";
@@ -67,7 +71,7 @@ export function DedupeReview({ entity, onChanged, className }: DedupeReviewProps
     const res = await g8Get<{ items: Pair[]; next_cursor?: string | null }>("/duplicates", { entity_type: entity, status: "pending", limit: 25, cursor }, { signal });
     return { data: res.data.items ?? [], pagination: { next_cursor: res.data.next_cursor ?? null } };
   }, [entity]);
-  const recent = useG8Query((signal) => g8Get<MergeRow[]>("/duplicates/recent-merges", { entity_type: entity, limit: 25 }, { signal }), [entity]);
+  const recent = useG8Query((signal) => g8Get<MergeRow[]>("/duplicates/recent-merges", { entity_type: entity, limit: RECENT_LIMIT }, { signal }), [entity]);
   const [busy, setBusy] = useState<string | null>(null);
   const dropPick = (id: string | undefined) => id && setPicked((p) => { const n = new Set(p); n.delete(id); return n; });
   const refreshAll = () => { void pairs.reload(); void counts.refetch(); void recent.refetch(); onChanged?.(); };
@@ -145,6 +149,7 @@ export function DedupeReview({ entity, onChanged, className }: DedupeReviewProps
               {m.can_undo ? <Button size="sm" variant="outline" loading={undo.loading && busy === m.id} onClick={() => void undo.mutate(m.id)}>Undo</Button> : null}
             </div>
           ))}
+          <FirstNotice shown={(recent.data?.data ?? []).length} limit={RECENT_LIMIT} noun="merges" />
         </TabsContent>
       </Tabs>
 

package/blocks/crm/components/import-wizard.tsx

@@ -20,6 +20,7 @@
 import { useEffect, useState } from "react";
 import { Button, Input, Label, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
+import { ListSelect } from "./list-select";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
@@ -38,7 +39,6 @@ export interface ImportWizardProps {
 export interface ImportResult { imported?: number | null; updated?: number | null; skipped?: number | null; failed?: number | null; list_id?: number | null }
 interface Upload { datafile_id: string; row_count?: number | null; columns: string[] }
 interface Preview { rows: Array<Record<string, unknown>>; total: number }
-interface ListOption { id: number; title: string; type?: string | null }
 
 export const IMPORT_TARGETS: Array<{ value: string; label: string }> = [
   { value: "CONTACT_FIRST_NAME", label: "First name" }, { value: "CONTACT_LAST_NAME", label: "Last name" },
@@ -80,7 +80,6 @@ export function ImportWizard({ listId, onImported, maxBytes = 5 * 1024 * 1024, c
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [result, setResult] = useState<ImportResult | null>(null);
 
-  const lists = useG8Query((signal) => g8Get<ListOption[]>("/lists", { limit: 200 }, { signal }), [], { enabled: upload != null && listId == null });
   const send = useG8Mutation((file: File) => { const body = new FormData(); body.append("file", file); return g8Post<Upload>("/imports", body); }, {
     onSuccess: (r) => { setUpload(r.data); setMapping(guessMapping(r.data.columns ?? [])); },
   });
@@ -107,7 +106,7 @@ export function ImportWizard({ listId, onImported, maxBytes = 5 * 1024 * 1024, c
   if (result) {
     return (
       <div className={`flex flex-col gap-3 ${className ?? ""}`} role="status">
-        <h3 className="text-base font-semibold">Import finished</h3>
+        <h3 className="text-base font-medium">Import finished</h3>
         <p className="text-sm">{result.imported ?? 0} new, {result.updated ?? 0} updated, {result.skipped ?? 0} skipped, {result.failed ?? 0} failed.</p>
         <Button variant="outline" onClick={() => { setResult(null); setUpload(null); setMapping({}); setDestination(listId); setNewListTitle(""); setPolicy("autofill"); setEnrich(false); run.reset(); preview.reset(); }}>Import another file</Button>
       </div>
@@ -161,10 +160,7 @@ export function ImportWizard({ listId, onImported, maxBytes = 5 * 1024 * 1024, c
             <h3 className="text-sm font-medium">3. Destination and rules</h3>
             {listId == null ? (
               <div className="flex flex-wrap items-center gap-2">
-                <select aria-label="Destination list" className="h-9 rounded-md border bg-background px-2 text-sm" value={destination ?? ""} onChange={(e) => setDestination(e.target.value ? Number(e.target.value) : undefined)}>
-                  <option value="">New list...</option>
-                  {(lists.data?.data ?? []).filter((l) => !l.type || l.type === "contacts").map((l) => <option key={l.id} value={l.id}>{l.title}</option>)}
-                </select>
+                <ListSelect label="Destination list" emptyOption="New list..." type="contacts" pageSize={200} value={destination} valueLabel={newListTitle.trim() || undefined} enabled={upload != null && listId == null} selectClassName="h-9 rounded-md border bg-background px-2 text-sm" onChange={(l) => setDestination(l ? l.id : undefined)} />
                 {destination == null ? <Input aria-label="New list name" placeholder="New list name" className="w-56" value={newListTitle} onChange={(e) => setNewListTitle(e.target.value)} /> : null}
               </div>
             ) : null}

package/blocks/crm/components/list-select.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+/**
+ * ListSelect: the audience-list dropdown with the list read wired in. A native select that is searchable (server
+ * search once there is more than one page) and paged ("Load more lists"), so the 201st list is reachable. It is the
+ * foundation's ListSelect plus `GET /lists` (the foundation holds no API scope); every block that picks a list
+ * (forms, lists, newsletter, nurture, sequencer, dialer) imports this one.
+ *
+ * SDK operations, in order:
+ *   1. GET /lists?search&page&limit   (lists.listLists)   read - through lib/read-lists.ts
+ */
+import { ListSelect as BaseListSelect } from "@/g8/components/list-select";
+import type { ListSelectProps } from "@/g8/components/list-select";
+import { readLists } from "../lib/read-lists";
+
+export type { ListSelectOption } from "@/g8/components/list-select";
+
+export function ListSelect(props: Omit<ListSelectProps, "read">) {
+  return <BaseListSelect {...props} read={readLists} />;
+}

package/blocks/crm/components/owner-assign.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+/**
+ * OwnerAssignListButton: "Assign owner to all N contacts in this list". The ONLY owner action, and deliberately not a
+ * selection action.
+ *
+ * Why not for a selection: `POST /contacts/assign-owner` takes a FILTER (`list_id` + `filterModel`), not ids, and resolves
+ * it server-side across EVERY matching contact; its docstring warns the count is unbounded. Addressing a selection through
+ * an id filter would reassign the whole list or org if the key were ever ignored or renamed, so selections, rows and the
+ * open contact do not get an owner action here. There is no id-addressed owner write in the contract (bulk-update and
+ * PATCH take no owner), so that is an API gap: assign-owner needs an `ids` field.
+ *
+ * SDK operations, in order:
+ *   1. listTeamMembers    GET /team-members                 via the injected picker (read, fetched when the picker opens)
+ *   2. assignContactOwner POST /contacts/assign-owner { owner_id, list_id, filterModel: {} }   (write)
+ *        Scope = the whole list, nothing else. N comes from the list's own count (the screen's total with no other filter
+ *        applied), is shown in the confirm, and the button is disabled until that count has loaded. `owner_id: null`
+ *        clears every owner in the list. Both paths go through ConfirmSpendDialog and name the list and N.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@graph8/sdk/ui";
+import { UserCog } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Post } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+
+/** A team member, as the injected picker reports it: the user id the API takes, and a name for the confirm. */
+export interface OwnerChoice { id: string; name: string }
+
+export interface OwnerPickerProps {
+  value: string | null;
+  onChange: (member: OwnerChoice) => void;
+}
+
+export interface OwnerAssignListButtonProps {
+  /**
+   * Renders the team-member picker (the pickers block's MemberPicker: `renderPicker={(p) => <MemberPicker label="New owner" {...p} />}`).
+   * It is injected so crm does not depend on pickers. Without it the button renders nothing: an owner is never typed as a raw id.
+   */
+  renderPicker?: (props: OwnerPickerProps) => ReactNode;
+  listId: number;
+  /** Shown in the confirm: "Q4 target accounts". Falls back to "list <id>". */
+  listName?: string | null;
+  /** The number of contacts in the list, from a real read. Null while it loads: the button stays disabled. */
+  total: number | null;
+  onDone?: (result: { updated: number | null; ownerId: string | null }) => void;
+  variant?: "default" | "outline" | "secondary" | "ghost";
+  size?: "default" | "sm";
+  className?: string;
+}
+
+/** `updated` from the answer: `{ updated }`, `{ data: { updated } }`; null when the API did not say. */
+export function updatedCount(data: unknown): number | null {
+  const o = data as { updated?: unknown; data?: { updated?: unknown } } | null | undefined;
+  const n = o?.updated ?? o?.data?.updated;
+  return typeof n === "number" ? n : null;
+}
+
+export function OwnerAssignListButton({ renderPicker, listId, listName, total, onDone, variant = "outline", size = "sm", className }: OwnerAssignListButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [member, setMember] = useState<OwnerChoice | null>(null);
+  const [pending, setPending] = useState<"assign" | "remove" | null>(null);
+  const [done, setDone] = useState<{ updated: number | null; total: number; removed: boolean } | null>(null);
+  const label = listName?.trim() || `list ${listId}`;
+  const n = total ?? 0;
+
+  const run = useG8Mutation(async (v: { ownerId: string | null; total: number }) => {
+    const res = await g8Post<unknown>("/contacts/assign-owner", { owner_id: v.ownerId, list_id: listId, filterModel: {} });
+    return { updated: updatedCount(res.data), ownerId: v.ownerId, total: v.total };
+  }, {
+    invalidates: [["contacts", "list"], ["contacts", "detail"], ["contacts", "record"]],
+    onSuccess: (r) => { setPending(null); setDone({ updated: r.updated, total: r.total, removed: r.ownerId == null }); onDone?.({ updated: r.updated, ownerId: r.ownerId }); },
+  });
+
+  const close = () => { setOpen(false); setMember(null); setDone(null); setPending(null); run.reset(); };
+  const short = done && done.updated != null && done.updated !== done.total;
+  const ready = total != null && total > 0;
+  if (!renderPicker) return null;
+
+  return (
+    <>
+      <Button className={className} variant={variant} size={size} disabled={!ready} title={total == null ? "Loading the list size" : total === 0 ? "This list has no contacts" : undefined} onClick={() => setOpen(true)}>
+        <UserCog className="size-4" aria-hidden />Assign owner to all{total != null ? ` ${total.toLocaleString()}` : ""}
+      </Button>
+      <Dialog open={open} onOpenChange={(o) => (o ? setOpen(true) : close())}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Assign an owner to the whole list</DialogTitle>
+            <DialogDescription>This changes every contact in {label}, {plural(n, "contact")}. It does not use your selection.</DialogDescription>
+          </DialogHeader>
+          {done ? (
+            <div role="status" className="text-sm">
+              <p className="font-medium">{done.updated == null ? "Done." : `${done.removed ? "Removed the owner from" : "Assigned the owner to"} ${plural(done.updated, "contact")}.`}</p>
+              {short ? <p className="mt-1 text-destructive">The list had {done.total.toLocaleString()} contacts, but the server updated {done.updated!.toLocaleString()}.</p> : null}
+            </div>
+          ) : (
+            <>
+              {renderPicker?.({ value: member?.id ?? null, onChange: (m) => { setMember({ id: m.id, name: m.name }); run.reset(); } })}
+              {run.error && !pending ? <ApiError error={run.error} title="Could not change the owner" /> : null}
+            </>
+          )}
+          <DialogFooter>
+            {done ? <Button onClick={close}>Done</Button> : (
+              <>
+                <Button variant="ghost" onClick={close}>Cancel</Button>
+                <Button variant="outline" disabled={run.loading} onClick={() => setPending("remove")}>Remove all owners</Button>
+                <Button disabled={!member || run.loading} onClick={() => setPending("assign")}>Assign owner</Button>
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <ConfirmSpendDialog
+        open={pending != null}
+        tier="destructive"
+        title={pending === "remove" ? `Remove the owner from all ${plural(n, "contact")} in ${label}` : `Make ${member?.name ?? "this person"} the owner of all ${plural(n, "contact")} in ${label}`}
+        description={pending === "remove"
+          ? "Every contact in the list will have no owner. The previous owners are not remembered, so this cannot be undone from here."
+          : "Every contact in the list gets this owner, replacing whoever owns it now. The previous owners are not remembered."}
+        affected={n}
+        confirmLabel={pending === "remove" ? "Remove owners" : "Assign owner"}
+        confirming={run.loading}
+        onConfirm={() => void run.mutate({ ownerId: pending === "remove" ? null : member?.id ?? null, total: n })}
+        onCancel={() => setPending(null)}
+      />
+    </>
+  );
+}

package/blocks/crm/components/record-engagement-tab.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+/**
+ * RecordEngagementTab: how much a contact or company has engaged: emails, calls, meetings, LinkedIn, website visits and
+ * downloads, the last touch, and the pages visited in the last 90 days. Use it as an `extraDetailTabs` entry of
+ * ContactsScreen / CompaniesScreen:
+ *   { id: "engagement", label: "Engagement", render: (c) => <RecordEngagementTab kind="contacts" id={c.id} /> }
+ *
+ * SDK operations, in order:
+ *   1. getContactEngagementSummary  GET /contacts/{id}/engagement-summary   (read) when kind="contacts"
+ *      getCompanyEngagementSummary  GET /companies/{id}/engagement-summary  (read) when kind="companies"
+ *   2. getContactSitesVisited       GET /contacts/{id}/sites-visited?days=90  (read) when kind="contacts"
+ *      getCompanySitesVisited       GET /companies/{id}/sites-visited?days=90 (read) when kind="companies"
+ * Nothing here is billable, external or destructive. The visits list is shown ten at a time with "Show more", so the
+ * count in the heading always matches what can be reached.
+ */
+
+import { useState } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { Activity } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+
+/** The counts both summaries share (the contact one adds LinkedIn and the last touch). */
+interface Summary { emails?: number | null; calls?: number | null; meetings?: number | null; linkedin?: number | null; website_visits?: number | null; downloads?: number | null; contact_count?: number | null; last_contact?: string | null; last_contact_checked?: boolean | null }
+interface Visit { url?: string | null; domain?: string | null; title?: string | null; event_date?: string | null; page_type?: string | null }
+interface Visits { visits?: Visit[] | null; total_visits?: number | null }
+
+const STEP = 10;
+const DAYS = 90;
+
+function dataOf<T>(env: unknown): T {
+  const d = (env as { data?: unknown } | null)?.data;
+  return (d && typeof d === "object" ? d : {}) as T;
+}
+
+function when(iso: string | null | undefined): string {
+  const d = iso ? new Date(iso) : null;
+  return d && !Number.isNaN(d.getTime()) ? d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }) : "";
+}
+
+const count = (n: number | null | undefined): string => (typeof n === "number" ? n.toLocaleString() : "-");
+
+export interface RecordEngagementTabProps {
+  kind: "contacts" | "companies";
+  id: number;
+}
+
+export function RecordEngagementTab({ kind, id }: RecordEngagementTabProps) {
+  const [shown, setShown] = useState(STEP);
+  const summary = useG8Query(async (signal) => dataOf<Summary>(await g8Get(`/${kind}/${id}/engagement-summary`, undefined, { signal })), [kind, id]);
+  const visits = useG8Query(async (signal) => dataOf<Visits>(await g8Get(`/${kind}/${id}/sites-visited`, { days: DAYS }, { signal })), [kind, id]);
+
+  if (summary.error) return <ApiError error={summary.error} title="Could not load engagement" onRetry={() => void summary.refetch()} />;
+  if (!summary.data) return <Skeleton className="h-32 w-full" aria-label="Loading engagement" />;
+  const s = summary.data;
+  const items = [
+    { label: "Emails", value: count(s.emails) },
+    { label: "Calls", value: count(s.calls) },
+    { label: "Meetings", value: count(s.meetings) },
+    ...(kind === "contacts" ? [{ label: "LinkedIn", value: count(s.linkedin) }] : [{ label: "People", value: count(s.contact_count) }]),
+    { label: "Website visits", value: count(s.website_visits) },
+    { label: "Downloads", value: count(s.downloads) },
+    ...(kind === "contacts" ? [{ label: "Last touch", value: when(s.last_contact) || (s.last_contact_checked === false ? "Not checked" : "No touch yet") }] : []),
+  ];
+  const rows = visits.data?.visits ?? [];
+  const total = rows.length;
+  const reported = visits.data?.total_visits ?? total;
+  return (
+    <div className="space-y-4">
+      <KeyValueList columns={2} items={items} />
+      <section aria-label="Pages visited" className="space-y-2">
+        <h3 className="text-sm font-medium">Pages visited, last {DAYS} days</h3>
+        {visits.error ? <ApiError error={visits.error} title="Could not load pages visited" onRetry={() => void visits.refetch()} /> : null}
+        {!visits.error && !visits.data ? <Skeleton className="h-16 w-full" aria-label="Loading pages visited" /> : null}
+        {visits.data && total === 0 ? <EmptyState compact icon={<Activity className="size-8" />} title="No pages visited" description={`No website visits in the last ${DAYS} days.`} /> : null}
+        {total > 0 ? (
+          <>
+            <ul className="divide-y rounded-md border">
+              {rows.slice(0, shown).map((v, i) => (
+                <li key={`${v.url}-${i}`} className="flex items-center justify-between gap-3 p-3 text-sm">
+                  <span className="min-w-0">
+                    <span className="block truncate font-medium">{v.title || v.url || "Page"}</span>
+                    <span className="block truncate text-xs text-muted-foreground">{[v.domain, v.page_type].filter(Boolean).join(" · ")}</span>
+                  </span>
+                  <span className="shrink-0 text-xs text-muted-foreground">{when(v.event_date)}</span>
+                </li>
+              ))}
+            </ul>
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span role="status">Showing {Math.min(shown, total).toLocaleString()} of {total.toLocaleString()} visits</span>
+              {shown < total ? <Button size="sm" variant="outline" onClick={() => setShown((n) => n + STEP)}>Show more</Button> : null}
+            </div>
+            {reported > total ? <p role="note" className="text-xs text-muted-foreground">The API returned {total.toLocaleString()} of {reported.toLocaleString()} visits in this window. Narrow it in the visitors screen to see the rest.</p> : null}
+          </>
+        ) : null}
+      </section>
+    </div>
+  );
+}

package/blocks/crm/components/record-form.tsx

@@ -178,7 +178,7 @@ export function RecordForm(props: RecordFormProps) {
 
       {validation ? <p role="alert" className="text-sm text-destructive">{validation}</p> : null}
       {duplicate ? (
-        <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">
           A contact with this email or LinkedIn URL already exists{existingId ? ` (id ${existingId})` : ""}.
           {props.onDuplicate ? <Button type="button" variant="link" size="sm" onClick={() => props.onDuplicate?.(existingId)}>Open the existing contact</Button> : null}
         </div>