@graph8/sdk 0.362.0 → 0.373.0

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

@@ -35,6 +35,8 @@ export interface RecordFormProps {
   /** Create only: a contact with the same identity exists; receives its id. */
   onDuplicate?: (existingId: number | undefined) => void;
   onCancel?: () => void;
+  /** Create only: prefill base fields, for example `{ company_domain: "acme.com" }`. */
+  defaults?: Record<string, string>;
   /** Show the inline "Add custom field" control. Default true. */
   allowNewFields?: boolean;
   className?: string;
@@ -94,13 +96,13 @@ export function RecordForm(props: RecordFormProps) {
   const [newType, setNewType] = useState("text");
   const [validation, setValidation] = useState<string | null>(null);
 
-  const initial = initialValues(base, record, custom.fields);
+  const initial = { ...initialValues(base, record, custom.fields), ...(record ? {} : props.defaults ?? {}) };
   const value = (key: string) => edits[key] ?? initial[key] ?? "";
   const set = (key: string, v: string) => setEdits((e) => ({ ...e, [key]: v }));
 
   const addField = useG8Mutation(
     (title: string) => g8Post("/fields", { title, data_type: newType, entity: plural, list_id: listId ?? null }),
-    { onSuccess: () => { setNewTitle(""); void custom.refetch(); } },
+    { invalidates: ["fields"], onSuccess: () => { setNewTitle(""); void custom.refetch(); } },
   );
 
   const save = useG8Mutation(async () => {
@@ -126,7 +128,7 @@ export function RecordForm(props: RecordFormProps) {
       await g8Patch("/fields/values/batch", { entity: plural, rows: [{ record_id: id, fields: toWrite.map((f) => ({ column_id: f.id, value: value(`cf:${f.name}`) || null })) }] });
     }
     return { id: id as number, merged };
-  }, { onSuccess: (r) => props.onSaved?.(r) });
+  }, { invalidates: [plural], onSuccess: (r) => props.onSaved?.(r) });
 
   const submit = (event: FormEvent) => {
     event.preventDefault();
@@ -176,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>

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

@@ -51,14 +51,14 @@ export function TaskList({ entity, entityId, includeCompleted = false, onChanged
   const [showDone, setShowDone] = useState(includeCompleted);
   const [deleting, setDeleting] = useState<TaskItem | null>(null);
 
-  const tasks = useG8Query((signal) => g8Get<TaskItem[]>(base, { status: showDone ? undefined : "open" }, { signal }), [base, showDone]);
+  const tasks = useG8Query((signal) => g8Get<TaskItem[]>(base, { status: showDone ? undefined : "open" }, { signal }), [base, showDone], { key: ["tasks", "record", entity, entityId, { showDone }] });
   const done = () => { void tasks.refetch(); onChanged?.(); };
   const add = useG8Mutation(
     () => g8Post(base, { title: title.trim(), priority, ...(due ? { due_date: due } : {}) }),
-    { onSuccess: () => { setTitle(""); setDue(""); done(); } },
+    { invalidates: [["tasks"]], onSuccess: () => { setTitle(""); setDue(""); done(); } },
   );
-  const toggle = useG8Mutation((t: TaskItem) => g8Patch(`/tasks/${t.id}`, { status: t.status === "completed" ? "open" : "completed" }), { onSuccess: done });
-  const remove = useG8Mutation((id: string) => g8Delete(`/tasks/${id}`), { onSuccess: () => { setDeleting(null); done(); } });
+  const toggle = useG8Mutation((t: TaskItem) => g8Patch(`/tasks/${t.id}`, { status: t.status === "completed" ? "open" : "completed" }), { invalidates: [["tasks"]], onSuccess: done });
+  const remove = useG8Mutation((id: string) => g8Delete(`/tasks/${id}`), { invalidates: [["tasks"]], onSuccess: () => { setDeleting(null); done(); } });
 
   const items = (tasks.data?.data ?? []) as TaskItem[];
   return (

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

@@ -0,0 +1,399 @@
+"use client";
+
+/**
+ * TasksScreen: every task in the workspace in one place, the work queue behind the per-record TaskList.
+ * No props are required.
+ *
+ * Composes: ScreenLayout (with Open / Completed / All tabs), StatStrip, Toolbar, SplitView, DetailPanel, FormSheet
+ * (screen kit). It is the only crm screen that lists tasks across records.
+ *
+ * Flows: switch Open / Completed / All - search by title - filter by priority, type and linked record type - page through
+ * results - tick a task to complete or reopen it - open a task (deep link ?id=, full page with &view=full) to read, edit or delete it - create a task
+ * (standalone, or linked to a record with `defaultRecord`) - complete or delete many at once ("N of M" report, 404 =
+ * already gone) - jump to the linked contact or company through `onOpenRecord`.
+ *
+ * SDK operations: none of its own. listAllTasks and getTask are `read`; createGlobalTask and updateTask are `write`;
+ * deleteTask (detail and bulk) is `destructive` and goes through ConfirmSpendDialog. Priority: 1 high, 2 medium, 3 low, 0 none.
+ * Due dates are sent as YYYY-MM-DD and shown in UTC so a date never shifts a day.
+ */
+
+import { useEffect, useState } from "react";
+import type { FormEvent, ReactNode } from "react";
+import { Button, Input, Label, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea } from "@graph8/sdk/ui";
+import { CheckCheck, CheckSquare, Plus, Trash2 } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+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 { MoreFilters, TextFilter } from "@/g8/components/screen/filter-controls";
+import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { usePageQuery } from "../hooks/use-page-query";
+import { errorStatus } from "../lib/crm-types";
+import { Pager, formatDay, useBulkDelete, useRowSelection } from "../lib/screen-parts";
+import type { TaskItem } from "./task-list";
+
+/** The fields TasksScreen reads from a task; the API may send more. */
+export interface WorkspaceTask extends TaskItem {
+  task_type?: string | null;
+  entity_type?: string | null;
+  entity_id?: string | null;
+  entity_label?: string | null;
+  created_at?: string | null;
+}
+
+export interface TasksScreenProps {
+  /** The signed-in person's user id. With it the toolbar gets a "My tasks" toggle (assignee filter); without it the toggle is hidden. */
+  currentUserId?: string;
+  pageSize?: number;
+  /** Which tab opens first. Default "open". */
+  initialStatus?: "open" | "completed" | "all";
+  /** New tasks are linked to this record (for example when the screen sits on a contact page). */
+  defaultRecord?: { entity_type: "contact" | "company" | "deal"; entity_id: string };
+  /** Called to open the linked record of a task ("Open contact"). Without it the link is plain text. */
+  onOpenRecord?: (record: { entity_type: string; entity_id: string }) => void;
+  renderRowActions?: (task: WorkspaceTask) => ReactNode;
+  renderDetailActions?: (task: WorkspaceTask) => ReactNode;
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+const PRIORITY: Record<number, string> = { 1: "High", 2: "Medium", 3: "Low", 4: "Low" };
+const TASK_TYPES = ["call", "email", "meeting", "todo"];
+const ENTITY_TYPES = ["contact", "company", "deal"];
+type Tab = "open" | "completed" | "all";
+
+function ymd(date = new Date()): string {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+const isOverdue = (t: WorkspaceTask): boolean => t.status !== "completed" && Boolean(t.due_date) && t.due_date!.slice(0, 10) < ymd();
+/** `pagination.total` of a list answer (the typed envelope only declares the cursor fields). */
+const totalOf = (res?: { pagination?: unknown }): number | undefined => (res?.pagination as { total?: number } | undefined)?.total;
+const label = (s: string): string => s.charAt(0).toUpperCase() + s.slice(1);
+
+function PriorityPill({ priority }: { priority?: number | null }) {
+  if (!priority) return <span className="text-muted-foreground">-</span>;
+  return <StatusPill tone={priority === 1 ? "negative" : priority === 2 ? "warning" : "neutral"}>{PRIORITY[priority] ?? "Low"}</StatusPill>;
+}
+
+/** Every filter the tasks API takes besides the status tab: search, priority, type, linked record type, assignee, creator, source meeting; `mine` = assigned to the signed-in person. */
+const FILTER_KEYS = ["search", "priority", "task_type", "entity_type", "assignee_id", "created_by", "source_meeting_id", "mine"] as const;
+type FilterKey = (typeof FILTER_KEYS)[number];
+
+export function TasksScreen(props: TasksScreenProps) {
+  const { pageSize = 25 } = props;
+  const [idParam, setIdParamRaw] = useUrlState("id");
+  const [view, setView] = useUrlState("view");
+  const full = view === "full" && idParam != null && idParam !== "";
+  /** Changing or clearing the open record also leaves the full-page view. */
+  const setIdParam = (v: string | null): void => { if (v == null) setView(null); setIdParamRaw(v); };
+  const openId = idParam || null;
+  const [tab, setTab] = useState<Tab>(props.initialStatus ?? "open");
+  // Filters live in the URL (`t_priority=1`, `t_mine=1`), so a filtered view survives reload, Back and sharing.
+  const urlFilters = useUrlFilters(FILTER_KEYS, { prefix: "t_" });
+  const { draft, filters } = urlFilters;
+  const search = draft.search;
+  const priority = draft.priority;
+  const taskType = draft.task_type;
+  const entityType = props.defaultRecord?.entity_type ?? draft.entity_type;
+  const q = filters.search;
+  // "My tasks" needs the signed-in person's user id: the app passes it as `currentUserId` (the pickers block's
+  // useCurrentMember gives it), so this screen holds no team-members scope of its own.
+  const assigneeId = draft.mine && props.currentUserId ? props.currentUserId : filters.assignee_id || undefined;
+  const [sheet, setSheet] = useState<"new" | "edit" | null>(null);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [note, setNote] = useState<string | null>(null);
+
+  const scope = { status: tab === "all" ? undefined : tab, search: q || undefined, priority: filters.priority || undefined, task_type: filters.task_type || undefined, entity_type: (props.defaultRecord?.entity_type ?? filters.entity_type) || undefined, assignee_id: assigneeId, created_by: filters.created_by || undefined, source_meeting_id: filters.source_meeting_id || undefined, entity_id: props.defaultRecord?.entity_id };
+  const list = usePageQuery<WorkspaceTask>(
+    (page, signal) => g8Get<WorkspaceTask[]>("/tasks", { limit: pageSize, offset: (page - 1) * pageSize, ...scope }, { signal }),
+    [scope.status, scope.search, scope.priority, scope.task_type, scope.entity_type, scope.entity_id, scope.assignee_id, scope.created_by, scope.source_meeting_id],
+    pageSize,
+    ["tasks", "list", "screen"],
+    urlFilters.ready,
+  );
+  const recordScope = { entity_type: props.defaultRecord?.entity_type, entity_id: props.defaultRecord?.entity_id };
+  const openCount = useG8Query((signal) => g8Get<WorkspaceTask[]>("/tasks", { status: "open", limit: 1, ...recordScope }, { signal }), [recordScope.entity_type, recordScope.entity_id], { key: ["tasks", "count", "open", recordScope] });
+  const doneCount = useG8Query((signal) => g8Get<WorkspaceTask[]>("/tasks", { status: "completed", limit: 1, ...recordScope }, { signal }), [recordScope.entity_type, recordScope.entity_id], { key: ["tasks", "count", "completed", recordScope] });
+  const selection = useRowSelection<WorkspaceTask>(JSON.stringify(scope));
+  const reload = () => { void list.refetch(); void openCount.refetch(); void doneCount.refetch(); };
+  const hasFilters = Boolean(search || priority || taskType || draft.entity_type || draft.assignee_id || draft.created_by || draft.source_meeting_id || draft.mine);
+  const overdue = list.rows.filter(isOverdue).length;
+
+  const toggle = useG8Mutation((t: WorkspaceTask) => g8Patch(`/tasks/${t.id}`, { status: t.status === "completed" ? "open" : "completed" }), { invalidates: ["tasks"], onSuccess: reload });
+  const completeMany = useG8Mutation(async (ids: string[]) => {
+    const results = await Promise.allSettled(ids.map((id) => g8Patch(`/tasks/${id}`, { status: "completed" })));
+    return { done: ids.filter((_, i) => results[i].status === "fulfilled"), total: ids.length };
+  }, { invalidates: ["tasks"], onSuccess: ({ done, total }) => { selection.drop(done); setNote(done.length < total ? `Completed ${done.length} of ${total}. ${total - done.length} could not be updated; they are still selected.` : null); reload(); } });
+  const bulk = useBulkDelete<string>("/tasks", (gone, total) => {
+    selection.drop(gone);
+    setConfirmDelete(false);
+    setNote(gone.length < total ? `Deleted ${gone.length} of ${total}. ${total - gone.length} could not be deleted; they are still selected.` : null);
+    if (openId && gone.includes(openId)) setIdParam(null);
+    reload();
+  });
+  useEffect(() => { setNote(null); }, [tab, filters]);
+  const allOnPage = list.rows.length > 0 && list.rows.every((r) => selection.selected.has(r.id));
+
+  return (
+    <ScreenLayout
+      className={props.className}
+      title="Tasks"
+      description="Follow-ups across every contact and company, so nothing slips."
+      icon={<CheckSquare className="size-5" aria-hidden />}
+      actions={<>{props.toolbarActions}<Button size="sm" onClick={() => setSheet("new")}><Plus className="size-4" aria-hidden />New task</Button></>}
+      tabs={[
+        { id: "open", label: "Open", count: totalOf(openCount.data) },
+        { id: "completed", label: "Completed", count: totalOf(doneCount.data) },
+        { id: "all", label: "All" },
+      ]}
+      activeTab={tab}
+      onTabChange={(id) => setTab(id as Tab)}
+      stats={[
+        { label: "Open", value: totalOf(openCount.data) ?? "-" },
+        { label: "Completed", value: totalOf(doneCount.data) ?? "-" },
+        { label: "Overdue on this page", value: overdue, tone: overdue ? "negative" : "neutral", hint: "Open tasks past their due date" },
+      ]}
+    >
+      <SplitView
+        detailOpen={openId != null}
+        expanded={full}
+        onExpandedChange={(e) => setView(e ? "full" : null)}
+        onCloseDetail={() => setIdParam(null)}
+        detailWidth="md"
+        list={
+          <div className="flex flex-col gap-3">
+            <Toolbar
+              search={{ value: search, onChange: (v) => urlFilters.set("search", v), debounceMs: 0, placeholder: "Search tasks by title" }}
+              filters={
+                <>
+                  <select aria-label="Filter by priority" className="h-9 rounded-md border bg-background px-2 text-sm" value={priority} onChange={(e) => urlFilters.set("priority", e.target.value)}>
+                    <option value="">Any priority</option><option value="1">High</option><option value="2">Medium</option><option value="3">Low</option>
+                  </select>
+                  <select aria-label="Filter by type" className="h-9 rounded-md border bg-background px-2 text-sm" value={taskType} onChange={(e) => urlFilters.set("task_type", e.target.value)}>
+                    <option value="">Any type</option>{TASK_TYPES.map((t) => <option key={t} value={t}>{label(t)}</option>)}
+                  </select>
+                  {props.defaultRecord ? null : (
+                    <select aria-label="Filter by linked record" className="h-9 rounded-md border bg-background px-2 text-sm" value={entityType} onChange={(e) => urlFilters.set("entity_type", e.target.value)}>
+                      <option value="">Any record</option>{ENTITY_TYPES.map((t) => <option key={t} value={t}>{label(t)}</option>)}
+                    </select>
+                  )}
+                  {props.currentUserId ? <Button variant={draft.mine ? "default" : "outline"} size="sm" aria-pressed={Boolean(draft.mine)} onClick={() => urlFilters.set("mine", draft.mine ? "" : "1")}>My tasks</Button> : null}
+                  <MoreFilters activeCount={["assignee_id", "created_by", "source_meeting_id"].filter((k) => draft[k as FilterKey]).length}>
+                    <TextFilter label="assignee ID" placeholder="Assignee user ID" value={draft.assignee_id} onChange={(v) => urlFilters.set("assignee_id", v)} className="w-48" />
+                    <TextFilter label="creator ID" placeholder="Created by user ID" value={draft.created_by} onChange={(v) => urlFilters.set("created_by", v)} className="w-48" />
+                    <TextFilter label="meeting ID" placeholder="Source meeting ID" value={draft.source_meeting_id} onChange={(v) => urlFilters.set("source_meeting_id", v)} className="w-48" />
+                  </MoreFilters>
+                  {hasFilters ? <Button variant="ghost" size="sm" onClick={urlFilters.clear}>Clear filters</Button> : null}
+                </>
+              }
+            />
+            {selection.ids.length > 0 ? (
+              <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>
+                <Button variant="outline" size="sm" loading={completeMany.loading} onClick={() => void completeMany.mutate(selection.ids)}><CheckCheck className="size-4" aria-hidden />Complete {selection.ids.length}</Button>
+                <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>
+            ) : null}
+            {list.error ? <ApiError error={list.error} title="Could not load tasks" onRetry={() => void list.refetch()} /> : null}
+            {toggle.error ? <ApiError error={toggle.error} title="Could not update the task" /> : null}
+            {note ? <p role="alert" className="text-sm text-destructive">{note}</p> : null}
+
+            <div className="overflow-hidden rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-8"><input type="checkbox" aria-label="Select page" checked={allOnPage} onChange={() => selection.togglePage(list.rows)} /></TableHead>
+                    <TableHead className="w-8"><span className="sr-only">Done</span></TableHead>
+                    <TableHead>Task</TableHead>
+                    <TableHead>Linked to</TableHead>
+                    <TableHead>Due</TableHead>
+                    <TableHead>Priority</TableHead>
+                    <TableHead>Assignee</TableHead>
+                    {props.renderRowActions ? <TableHead className="w-8"><span className="sr-only">Actions</span></TableHead> : null}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {list.loading && list.rows.length === 0
+                    ? Array.from({ length: 6 }, (_, i) => <TableRow key={`sk${i}`}><TableCell colSpan={7 + (props.renderRowActions ? 1 : 0)}><Skeleton className="h-6 w-full" /></TableCell></TableRow>)
+                    : list.rows.map((t) => {
+                        const done = t.status === "completed";
+                        return (
+                          <TableRow key={t.id} data-testid={`task-row-${t.id}`} data-state={t.id === openId ? "selected" : undefined} className="cursor-pointer" {...rowActivationProps(() => setIdParam(t.id))}>
+                            <TableCell onClick={(e) => e.stopPropagation()}><input type="checkbox" aria-label={`Select ${t.title}`} checked={selection.selected.has(t.id)} onChange={() => selection.toggle(t)} /></TableCell>
+                            <TableCell onClick={(e) => e.stopPropagation()}><input type="checkbox" aria-label={`${done ? "Reopen" : "Complete"} ${t.title}`} checked={done} onChange={() => void toggle.mutate(t)} /></TableCell>
+                            <TableCell className={done ? "text-muted-foreground line-through" : "font-medium"}><RecordLink param="id" id={t.id} onOpen={() => setIdParam(t.id)}>{t.title}</RecordLink></TableCell>
+                            <TableCell>{t.entity_label ? <span>{t.entity_label}{t.entity_type ? <span className="ml-1 text-xs text-muted-foreground">{label(t.entity_type)}</span> : null}</span> : <span className="text-muted-foreground">-</span>}</TableCell>
+                            <TableCell className="whitespace-nowrap">{t.due_date ? <span className={isOverdue(t) ? "text-destructive" : undefined}>{formatDay(t.due_date)}{isOverdue(t) ? " (overdue)" : ""}</span> : <span className="text-muted-foreground">-</span>}</TableCell>
+                            <TableCell><PriorityPill priority={t.priority} /></TableCell>
+                            <TableCell>{t.assignee_name || <span className="text-muted-foreground">-</span>}</TableCell>
+                            {props.renderRowActions ? <TableCell onClick={(e) => e.stopPropagation()}>{props.renderRowActions(t)}</TableCell> : null}
+                          </TableRow>
+                        );
+                      })}
+                </TableBody>
+              </Table>
+              {!list.loading && !list.error && list.rows.length === 0 ? (
+                <EmptyState
+                  title={hasFilters ? "No tasks match these filters" : tab === "completed" ? "Nothing completed yet" : "No tasks yet"}
+                  description={hasFilters ? "Try fewer filters." : "Add a follow-up so nothing slips."}
+                  action={hasFilters ? undefined : <Button onClick={() => setSheet("new")}>New task</Button>}
+                />
+              ) : null}
+              <Pager page={list.page} pageCount={list.pageCount} total={list.total} noun="tasks" hasNext={list.hasNext} loading={list.loading} onPage={list.setPage} />
+            </div>
+          </div>
+        }
+        detail={openId ? (
+          <TaskPanel key={openId} full={full} setFull={(v) => setView(v ? "full" : null)} taskId={openId} onClose={() => setIdParam(null)} onChanged={reload} onDeleted={() => { setIdParam(null); reload(); }}
+            onEdit={() => setSheet("edit")} sheetEditing={sheet === "edit"} onCloseEdit={() => setSheet(null)}
+            onOpenRecord={props.onOpenRecord} renderActions={props.renderDetailActions} />
+        ) : null}
+      />
+
+      <FormSheet open={sheet === "new"} onOpenChange={(o) => setSheet(o ? "new" : null)} title="New task" description={props.defaultRecord ? `Linked to this ${props.defaultRecord.entity_type}.` : "A standalone follow-up."}>
+        <TaskForm record={props.defaultRecord} onCancel={() => setSheet(null)} onSaved={(t) => { setSheet(null); reload(); if (t?.id) setIdParam(t.id); }} />
+      </FormSheet>
+
+      <ConfirmSpendDialog open={confirmDelete} tier="destructive" title={`Delete ${plural(selection.ids.length, "task")}`} description="They are removed for everyone." affected={selection.ids.length}
+        confirming={bulk.loading} onConfirm={() => void bulk.mutate(selection.ids)} onCancel={() => setConfirmDelete(false)} />
+    </ScreenLayout>
+  );
+}
+
+interface TaskPanelProps {
+  full: boolean;
+  setFull: (full: boolean) => void;
+  taskId: string;
+  onClose: () => void;
+  onChanged: () => void;
+  onDeleted: () => void;
+  onEdit: () => void;
+  sheetEditing: boolean;
+  onCloseEdit: () => void;
+  onOpenRecord?: TasksScreenProps["onOpenRecord"];
+  renderActions?: TasksScreenProps["renderDetailActions"];
+}
+
+function TaskPanel({ full, setFull, taskId, onClose, onChanged, onDeleted, onEdit, sheetEditing, onCloseEdit, onOpenRecord, renderActions }: TaskPanelProps) {
+  const [confirm, setConfirm] = useState(false);
+  const query = useG8Query((signal) => g8Get<WorkspaceTask>(`/tasks/${taskId}`, {}, { signal }), [taskId], { key: ["tasks", "detail", taskId] });
+  const toggle = useG8Mutation((t: WorkspaceTask) => g8Patch(`/tasks/${t.id}`, { status: t.status === "completed" ? "open" : "completed" }), { invalidates: ["tasks"], onSuccess: () => { void query.refetch(); onChanged(); } });
+  const remove = useG8Mutation(async () => {
+    try { await g8Delete(`/tasks/${taskId}`); } catch (e) { if (errorStatus(e) !== 404) throw e; }
+  }, { invalidates: [["tasks", "list"], ["tasks", "count"], ["tasks", "record"]], onSuccess: () => { setConfirm(false); onDeleted(); } });
+
+  if (query.loading && !query.data) return <div className="flex flex-col gap-3 p-4"><Skeleton className="h-14 w-full" /><Skeleton className="h-32 w-full" /></div>;
+  if (query.error && !query.data) return <div className="p-4"><ApiError error={query.error} title="Could not load this task" onRetry={() => void query.refetch()} /></div>;
+  const task = query.data!.data;
+  const done = task.status === "completed";
+  const dash = <span className="text-muted-foreground">-</span>;
+
+  return (
+    <>
+      <DetailPanel
+        title={task.title}
+        subtitle={task.entity_label ? `${task.entity_type ? label(task.entity_type) + ": " : ""}${task.entity_label}` : "Standalone task"}
+        badges={<StatusPill tone={done ? "positive" : isOverdue(task) ? "negative" : "info"} dot>{done ? "Completed" : isOverdue(task) ? "Overdue" : "Open"}</StatusPill>}
+        onClose={onClose}
+        onExpand={full ? undefined : () => setFull(true)}
+        onCollapse={full ? () => setFull(false) : undefined}
+        actions={
+          <>
+            {renderActions?.(task)}
+            {task.entity_type && task.entity_id && onOpenRecord ? <Button variant="outline" size="sm" onClick={() => onOpenRecord({ entity_type: task.entity_type!, entity_id: task.entity_id! })}>Open {task.entity_type}</Button> : null}
+            <Button variant="outline" size="sm" loading={toggle.loading} onClick={() => void toggle.mutate(task)}>{done ? "Reopen" : "Mark complete"}</Button>
+            <Button variant="outline" size="sm" onClick={onEdit}>Edit</Button>
+            <Button variant="destructive" size="sm" onClick={() => setConfirm(true)}>Delete</Button>
+          </>
+        }
+      >
+        <div className="flex flex-col gap-4 p-4">
+          {toggle.error ? <ApiError error={toggle.error} title="Could not update the task" /> : null}
+          {remove.error ? <ApiError error={remove.error} title="Could not delete the task" /> : null}
+          <KeyValueList columns={2} items={[
+            { label: "Due", value: task.due_date ? formatDay(task.due_date) : dash },
+            { label: "Priority", value: <PriorityPill priority={task.priority} /> },
+            { label: "Type", value: task.task_type ? label(task.task_type) : dash },
+            { label: "Assignee", value: task.assignee_name || dash },
+            { label: "Created", value: task.created_at ? formatDay(task.created_at) : dash },
+            ...(task.description ? [{ label: "Description", value: task.description }] : []),
+          ]} />
+        </div>
+      </DetailPanel>
+      <FormSheet open={sheetEditing} onOpenChange={(o) => { if (!o) onCloseEdit(); }} title="Edit task">
+        <TaskForm task={task} onCancel={onCloseEdit} onSaved={() => { onCloseEdit(); void query.refetch(); onChanged(); }} />
+      </FormSheet>
+      <ConfirmSpendDialog open={confirm} tier="destructive" title="Delete this task" description={task.title} affected={1}
+        confirming={remove.loading} onConfirm={() => void remove.mutate(undefined)} onCancel={() => setConfirm(false)} />
+    </>
+  );
+}
+
+interface TaskFormProps {
+  task?: WorkspaceTask;
+  record?: TasksScreenProps["defaultRecord"];
+  onSaved: (task?: WorkspaceTask) => void;
+  onCancel: () => void;
+}
+
+function TaskForm({ task, record, onSaved, onCancel }: TaskFormProps) {
+  const [title, setTitle] = useState(task?.title ?? "");
+  const [description, setDescription] = useState(task?.description ?? "");
+  const [due, setDue] = useState(task?.due_date ? task.due_date.slice(0, 10) : "");
+  const [priority, setPriority] = useState(String(task ? task.priority ?? 0 : 2));
+  const [taskType, setTaskType] = useState(task?.task_type ?? "");
+  const [error, setError] = useState<string | null>(null);
+  const save = useG8Mutation(async () => {
+    const body = { title: title.trim(), description: description.trim() || null, due_date: due || null, priority: Number(priority), task_type: taskType || null };
+    if (task) {
+      // An untouched priority is not sent, so editing a task without one never invents a priority.
+      const { priority: _skip, ...rest } = body;
+      const patch = Number(priority) === (task.priority ?? 0) ? rest : body;
+      return (await g8Patch<WorkspaceTask>(`/tasks/${task.id}`, patch)).data;
+    }
+    return (await g8Post<WorkspaceTask>("/tasks", { ...body, ...(record ? { entity_type: record.entity_type, entity_id: record.entity_id } : {}) })).data;
+  }, { invalidates: ["tasks"], onSuccess: (t) => onSaved(t) });
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) return setError("Give the task a title.");
+    setError(null);
+    void save.mutate(undefined);
+  };
+  return (
+    <form noValidate onSubmit={submit} className="flex flex-col gap-3" aria-label={task ? "Edit task" : "New task"}>
+      <div className="flex flex-col gap-1"><Label htmlFor="task-title">Title</Label><Input id="task-title" value={title} onChange={(e) => setTitle(e.target.value)} /></div>
+      <div className="flex flex-col gap-1"><Label htmlFor="task-desc">Description</Label><Textarea id="task-desc" rows={3} value={description} onChange={(e) => setDescription(e.target.value)} /></div>
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
+        <div className="flex flex-col gap-1"><Label htmlFor="task-due">Due date</Label><Input id="task-due" type="date" value={due} onChange={(e) => setDue(e.target.value)} /></div>
+        <div className="flex flex-col gap-1"><Label htmlFor="task-priority">Priority</Label>
+          <select id="task-priority" className="h-9 rounded-md border bg-background px-2 text-sm" value={priority} onChange={(e) => setPriority(e.target.value)}>
+            <option value="1">High</option><option value="2">Medium</option><option value="3">Low</option><option value="0">None</option>
+          </select></div>
+        <div className="flex flex-col gap-1"><Label htmlFor="task-type">Type</Label>
+          <select id="task-type" className="h-9 rounded-md border bg-background px-2 text-sm" value={taskType} onChange={(e) => setTaskType(e.target.value)}>
+            <option value="">None</option>{TASK_TYPES.map((t) => <option key={t} value={t}>{label(t)}</option>)}
+          </select></div>
+      </div>
+      {error ? <p role="alert" className="text-sm text-destructive">{error}</p> : null}
+      {save.error ? <ApiError error={save.error} title="Could not save the task" /> : null}
+      <div className="flex justify-end gap-2">
+        <Button type="button" variant="ghost" onClick={onCancel}>Cancel</Button>
+        <Button type="submit" loading={save.loading}>{task ? "Save changes" : "Create task"}</Button>
+      </div>
+    </form>
+  );
+}

package/blocks/crm/hooks/use-all-lists.ts

@@ -0,0 +1,18 @@
+"use client";
+
+/**
+ * useAllLists: every list of the workspace, for a screen that must look one up by id (its size, its name). The lists API
+ * pages (`page`, `limit`), so this reads page after page (100 each, up to 20 pages) instead of one capped `limit=200`
+ * call; `truncated` says the page cap was reached. To CHOOSE a list use ListSelect (searchable, paged).
+ *
+ * SDK operations: GET /lists?page&limit   (lists.listLists)   read - through lib/read-lists.ts
+ */
+import { useAllPages } from "@/g8/hooks/use-all-pages";
+import type { ListSelectOption } from "@/g8/components/list-select";
+import { readLists } from "../lib/read-lists";
+
+const PAGE = 100;
+
+export function useAllLists(deps: readonly unknown[] = [], enabled = true) {
+  return useAllPages<ListSelectOption>((page, signal) => readLists("", page, PAGE, signal), deps, { enabled });
+}

package/blocks/crm/hooks/use-custom-fields.ts

@@ -12,7 +12,12 @@ import type { CrmEntity, FieldDef } from "../lib/crm-types";
  */
 export function useCustomFields(entity: CrmEntity, listId?: number, enabled = true) {
   const path = entity === "contacts" ? "/fields" : "/fields/companies";
-  const query = useG8Query((signal) => g8Get<FieldDef[]>(path, { list_id: listId }, { signal }), [path, listId], { enabled });
+  const query = useG8Query((signal) => g8Get<FieldDef[]>(path, { list_id: listId }, { signal }), [path, listId], {
+    enabled,
+    // The schema rarely changes: share it between the table, the detail and the form, fresh for 30 s.
+    key: ["fields", entity, { listId }],
+    staleTime: 30_000,
+  });
   const all = (query.data?.data ?? []) as FieldDef[];
   return { fields: all.filter(isCustomField), all, loading: query.loading, error: query.error, refetch: query.refetch };
 }