@graph8/sdk 0.370.0 → 0.374.0

package/blocks/crm/components/record-open-links.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+/**
+ * RecordOpenLinks: "Open contact" and "Open company" buttons for something that only knows ids (a call log entry, a
+ * website visitor). The ids are CHECKED against your CRM first, so a button is only shown for a record that exists
+ * and, when you pass `expectCompanyDomain`, for a company whose domain matches (event ids and CRM ids are not always
+ * the same id space). A record that cannot be loaded renders nothing, never a link to the wrong or a missing page.
+ *
+ * SDK operations, in order:
+ *   1. getContact  GET /contacts/{contact_id}   (read; only with a numeric `contactId`)
+ *   2. getCompany  GET /companies/{company_id}  (read; only with a `companyId` that the contact did not already give)
+ * Nothing here is billable, external or destructive.
+ */
+
+import { Button } from "@graph8/sdk/ui";
+import { Building2, UserRound } from "lucide-react";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import type { ContactRecord } from "../lib/crm-types";
+
+export interface RecordOpenLinksProps {
+  /** A CRM contact id (number or numeric string). Anything else is ignored. */
+  contactId?: number | string | null;
+  /** A CRM company id. Optional: a contact that has a company supplies it. */
+  companyId?: number | string | null;
+  /** When set, a company is linked only if its domain equals this (case-insensitive). */
+  expectCompanyDomain?: string | null;
+  /** When set, the contact is linked only if its name equals this (case-insensitive, extra spaces ignored). */
+  expectContactName?: string | null;
+  onOpenContact?: (contactId: number) => void;
+  onOpenCompany?: (companyId: number) => void;
+  size?: "default" | "sm";
+}
+
+const idOf = (v: number | string | null | undefined): number | null => {
+  const s = String(v ?? "").trim();
+  return /^\d+$/.test(s) ? Number(s) : null;
+};
+const nameKey = (n: string | null | undefined): string => (n ?? "").trim().toLowerCase().split(/\s+/).filter(Boolean).join(" ");
+const domainOf = (d: string | null | undefined): string => (d ?? "").trim().toLowerCase().replace(/^www\./, "");
+
+export function RecordOpenLinks({ contactId, companyId, expectCompanyDomain, expectContactName, onOpenContact, onOpenCompany, size = "sm" }: RecordOpenLinksProps) {
+  const cid = idOf(contactId);
+  const contact = useG8Query(
+    async (signal) => (await g8Get<ContactRecord>(`/contacts/${cid}`, undefined, { signal })).data ?? null,
+    [cid],
+    { enabled: cid != null && Boolean(onOpenContact || onOpenCompany), key: ["contacts", "open-links", cid] },
+  );
+  const c = contact.data;
+  // A contact whose name is not the expected one is some other person that happens to share the id: link nothing from it.
+  const contactOk = Boolean(c) && (!expectContactName || nameKey(expectContactName) === nameKey(c?.full_name || [c?.first_name, c?.last_name].filter(Boolean).join(" ")));
+  const fromContact = c && contactOk ? idOf(c.company_id ?? c.company?.id) : null;
+  const ownCompany = idOf(companyId);
+  const coId = fromContact ?? ownCompany;
+  // A company id that came from the caller (not from the contact) is verified by loading it.
+  const needsCheck = fromContact == null && ownCompany != null && Boolean(onOpenCompany);
+  const company = useG8Query(
+    async (signal) => (await g8Get<{ id?: number; domain?: string | null }>(`/companies/${ownCompany}`, undefined, { signal })).data ?? null,
+    [ownCompany],
+    { enabled: needsCheck && (cid == null || contact.data !== undefined || Boolean(contact.error)), key: ["companies", "open-links", ownCompany] },
+  );
+  const companyOk = fromContact != null || (needsCheck && company.data != null && (!expectCompanyDomain || domainOf(company.data.domain) === domainOf(expectCompanyDomain)));
+  return (
+    <>
+      {onOpenContact && contactOk && cid != null ? (
+        <Button size={size} variant="outline" onClick={() => onOpenContact(cid)}>
+          <UserRound className="mr-1 size-4" aria-hidden />
+          Open contact
+        </Button>
+      ) : null}
+      {onOpenCompany && coId != null && companyOk ? (
+        <Button size={size} variant="outline" onClick={() => onOpenCompany(coId)}>
+          <Building2 className="mr-1 size-4" aria-hidden />
+          Open company
+        </Button>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,112 @@
+"use client";
+
+/**
+ * TagAssignButton: add tags to, or remove tags from, a selection of contacts. A dialog lists the org's tags as checkboxes;
+ * the person picks the tags and whether to add or remove them.
+ *
+ * SDK operations, in order:
+ *   1. listContactTags     GET /contacts/tags                                         (read, via useContactTags, when opened)
+ *   2. assignContactTags   POST /contacts/tags/assign   { tag_ids, contact_ids }     (write, idempotent)
+ *   3. unassignContactTags POST /contacts/tags/unassign { tag_ids, contact_ids }     (write; tag definitions survive)
+ *
+ * One request for the whole selection (the API takes up to 200,000 contacts). The answer's `tagged` / `untagged` count is
+ * the number of contacts that changed; contacts that already had the tag are not counted, and the dialog says so.
+ */
+
+import { useState } from "react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@graph8/sdk/ui";
+import { Tags } from "lucide-react";
+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 { useContactTags } from "../hooks/use-contact-tags";
+import { TagChip } from "./contact-tag-chips";
+
+export interface TagAssignButtonProps {
+  contactIds: ReadonlyArray<number>;
+  onDone?: (result: { changed: number | null; mode: "add" | "remove" }) => void;
+  label?: string;
+  variant?: "default" | "outline" | "secondary" | "ghost";
+  size?: "default" | "sm";
+  className?: string;
+  defaultOpen?: boolean;
+  onClosed?: () => void;
+}
+
+type Mode = "add" | "remove";
+
+export function TagAssignButton({ contactIds, onDone, label = "Tags", variant = "outline", size = "sm", className, defaultOpen = false, onClosed }: TagAssignButtonProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  const [mode, setMode] = useState<Mode>("add");
+  const [picked, setPicked] = useState<ReadonlySet<string>>(new Set());
+  const [done, setDone] = useState<{ changed: number | null; mode: Mode; total: number } | null>(null);
+  const tags = useContactTags({ enabled: open });
+
+  const apply = useG8Mutation(async (v: { mode: Mode; tagIds: string[]; ids: number[] }) => {
+    const body = { tag_ids: v.tagIds, contact_ids: v.ids };
+    const res = v.mode === "add" ? await g8Post<Record<string, unknown>>("/contacts/tags/assign", body) : await g8Post<Record<string, unknown>>("/contacts/tags/unassign", body);
+    const n = res.data?.[v.mode === "add" ? "tagged" : "untagged"];
+    return { changed: typeof n === "number" ? n : null, mode: v.mode, total: v.ids.length };
+  }, {
+    invalidates: [["contact-tags"], ["contacts", "tags"], ["contacts", "list"]],
+    onSuccess: (r) => { setDone(r); onDone?.({ changed: r.changed, mode: r.mode }); },
+  });
+
+  const close = () => { setOpen(false); setPicked(new Set()); setDone(null); apply.reset(); onClosed?.(); };
+  const toggle = (id: string) => setPicked((s) => { const n = new Set(s); if (!n.delete(id)) n.add(id); return n; });
+  const count = contactIds.length;
+
+  return (
+    <>
+      {defaultOpen ? null : <Button className={className} variant={variant} size={size} disabled={count === 0} onClick={() => setOpen(true)}><Tags className="size-4" aria-hidden />{label}</Button>}
+      <Dialog open={open} onOpenChange={(o) => (o ? setOpen(true) : close())}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Tag {plural(count, "contact")}</DialogTitle>
+            <DialogDescription>Tags group contacts outside lists. Adding a tag a contact already has changes nothing.</DialogDescription>
+          </DialogHeader>
+          {done ? (
+            <p role="status" className="text-sm font-medium">
+              {done.changed == null ? "Done." : done.mode === "add" ? `Tagged ${plural(done.changed, "contact")}.` : `Removed the tags from ${plural(done.changed, "contact")}.`}
+              {done.changed != null && done.changed < done.total ? <span className="block font-normal text-muted-foreground">{(done.total - done.changed).toLocaleString()} already matched and did not change.</span> : null}
+            </p>
+          ) : (
+            <>
+              <div role="radiogroup" aria-label="Action" className="flex gap-2">
+                {(["add", "remove"] as const).map((m) => (
+                  <Button key={m} role="radio" aria-checked={mode === m} variant={mode === m ? "default" : "outline"} size="sm" onClick={() => { setMode(m); apply.reset(); }}>{m === "add" ? "Add tags" : "Remove tags"}</Button>
+                ))}
+              </div>
+              {tags.error ? <ApiError error={tags.error} title="Could not load tags" onRetry={() => void tags.refetch()} /> : null}
+              {tags.loading ? <p className="text-sm text-muted-foreground" role="status">Loading tags</p> : null}
+              {!tags.loading && !tags.error && tags.tags.length === 0 ? <p className="text-sm text-muted-foreground">No tags yet. Create one in Manage tags.</p> : null}
+              <ul className="flex max-h-64 flex-col gap-1 overflow-y-auto">
+                {tags.tags.map((t) => (
+                  <li key={t.id}>
+                    <label className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 hover:bg-muted">
+                      <input type="checkbox" checked={picked.has(t.id)} onChange={() => toggle(t.id)} aria-label={t.name} />
+                      <TagChip tag={t} />
+                      {t.contact_count != null ? <span className="ml-auto text-xs tabular-nums text-muted-foreground">{t.contact_count.toLocaleString()}</span> : null}
+                    </label>
+                  </li>
+                ))}
+              </ul>
+              {apply.error ? <ApiError error={apply.error} title="Could not change the tags" /> : null}
+            </>
+          )}
+          <DialogFooter>
+            {done ? <Button onClick={close}>Done</Button> : (
+              <>
+                <Button variant="ghost" onClick={close}>Cancel</Button>
+                <Button loading={apply.loading} disabled={picked.size === 0 || count === 0} onClick={() => void apply.mutate({ mode, tagIds: [...picked], ids: [...contactIds] })}>
+                  {mode === "add" ? `Add ${plural(picked.size, "tag")}` : `Remove ${plural(picked.size, "tag")}`}
+                </Button>
+              </>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/blocks/crm/components/tag-manager.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+/**
+ * TagManager: the org's contact tags in one sheet. Create, rename, recolour, archive and restore a tag, delete one
+ * (optionally moving its contacts to another tag first) and merge several tags into one.
+ *
+ * SDK operations, in order:
+ *   1. listContactTags   GET /contacts/tags?include_archived=true            (read; every tag at once, with contact counts)
+ *   2. createContactTag  POST /contacts/tags { name, color, description }    (write; a duplicate name is refused by the API)
+ *   3. updateContactTag  PATCH /contacts/tags/{tag_id} { name, color, description, archived }   (write; omitted fields stay)
+ *   4. deleteContactTag  DELETE /contacts/tags/{tag_id}?reassign_to=...      (destructive, ConfirmSpendDialog)
+ *        Without `reassign_to` the API drops the assignments together with the tag; the contacts themselves stay.
+ *   5. mergeContactTags  POST /contacts/tags/merge { source_tag_ids, target_tag_id }   (destructive: the sources are
+ *        removed and their contacts get the target, ConfirmSpendDialog)
+ *
+ * Edit sends only what changed. A tag's description cannot be cleared (the API leaves a null field untouched), so
+ * the description is not offered as an editable field here; only name, colour and archive state are.
+ */
+
+import { useMemo, useState } from "react";
+import { Button, cn } from "@graph8/sdk/ui";
+import { Archive, GitMerge, Pencil, Plus, Trash2 } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Delete, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+import { useContactTags } from "../hooks/use-contact-tags";
+import { HEX_COLOR, TAG_COLORS, isArchivedTag } from "../lib/record-actions";
+import type { ContactTag } from "../lib/record-actions";
+import { TagChip } from "./contact-tag-chips";
+
+export interface TagManagerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Called after any change that can alter what the contact list shows. */
+  onChanged?: () => void;
+}
+
+function Swatches({ value, onChange, label }: { value: string; onChange: (c: string) => void; label: string }) {
+  return (
+    <span className="flex gap-1" role="radiogroup" aria-label={label}>
+      {TAG_COLORS.map((c) => <button key={c} type="button" role="radio" aria-checked={value === c} aria-label={`Colour ${c}`} onClick={() => onChange(c)} className={cn("size-5 rounded-full border-2", value === c ? "border-foreground" : "border-transparent")} style={{ backgroundColor: c }} />)}
+    </span>
+  );
+}
+
+export function TagManager({ open, onOpenChange, onChanged }: TagManagerProps) {
+  const all = useContactTags({ enabled: open, includeArchived: true });
+  const [name, setName] = useState("");
+  const [color, setColor] = useState<string>(TAG_COLORS[0]);
+  const [editing, setEditing] = useState<{ id: string; name: string; color: string } | null>(null);
+  const [picked, setPicked] = useState<ReadonlySet<string>>(new Set());
+  const [mergeInto, setMergeInto] = useState("");
+  const [confirmMerge, setConfirmMerge] = useState(false);
+  const [deleting, setDeleting] = useState<ContactTag | null>(null);
+  const [moveTo, setMoveTo] = useState("");
+  const done = () => { void all.refetch(); onChanged?.(); };
+  const keys = [["contact-tags"], ["contacts", "tags"], ["contacts", "list"]] as const;
+
+  const create = useG8Mutation((v: { name: string; color: string }) => g8Post("/contacts/tags", v), { invalidates: keys, onSuccess: () => { setName(""); done(); } });
+  const update = useG8Mutation((v: { id: string; body: Record<string, unknown> }) => g8Patch(`/contacts/tags/${v.id}`, v.body), { invalidates: keys, onSuccess: () => { setEditing(null); done(); } });
+  const remove = useG8Mutation((v: { id: string; reassignTo: string }) => g8Delete(`/contacts/tags/${v.id}`, v.reassignTo ? { query: { reassign_to: v.reassignTo } } : {}), {
+    invalidates: keys,
+    onSuccess: (_r, v) => { setDeleting(null); setMoveTo(""); setPicked((s) => { const n = new Set(s); n.delete(v.id); return n; }); done(); },
+  });
+  const merge = useG8Mutation((v: { sources: string[]; target: string }) => g8Post("/contacts/tags/merge", { source_tag_ids: v.sources, target_tag_id: v.target }), {
+    invalidates: keys,
+    onSuccess: () => { setConfirmMerge(false); setPicked(new Set()); setMergeInto(""); done(); },
+  });
+
+  const byId = useMemo(() => new Map(all.tags.map((t) => [t.id, t])), [all.tags]);
+  const sources = [...picked].filter((id) => byId.has(id));
+  const targets = all.tags.filter((t) => !picked.has(t.id) && !isArchivedTag(t));
+  const sourceContacts = sources.reduce((n, id) => n + (byId.get(id)?.contact_count ?? 0), 0);
+  const togglePick = (id: string) => setPicked((s) => { const n = new Set(s); if (!n.delete(id)) n.add(id); return n; });
+  const saveEdit = (t: ContactTag) => {
+    if (!editing) return;
+    const body: Record<string, unknown> = {};
+    if (editing.name.trim() && editing.name.trim() !== t.name) body.name = editing.name.trim();
+    if (HEX_COLOR.test(editing.color) && editing.color !== t.color) body.color = editing.color;
+    if (Object.keys(body).length === 0) { setEditing(null); return; }
+    void update.mutate({ id: t.id, body });
+  };
+  const deleteTargets = all.tags.filter((t) => t.id !== deleting?.id && !isArchivedTag(t));
+  const allCountsKnown = sources.every((id) => byId.get(id)?.contact_count != null);
+  const targetName = byId.get(mergeInto)?.name ?? "";
+
+  return (
+    <FormSheet open={open} onOpenChange={onOpenChange} title="Manage tags" description="Tags group contacts outside lists." width="lg" footer={<Button variant="ghost" onClick={() => onOpenChange(false)}>Close</Button>}>
+      <form className="flex flex-wrap items-center gap-2 border-b pb-3" onSubmit={(e) => { e.preventDefault(); if (name.trim()) void create.mutate({ name: name.trim(), color }); }}>
+        <input aria-label="Tag name" maxLength={50} placeholder="New tag" value={name} onChange={(e) => setName(e.target.value)} className="h-9 w-44 rounded-md border bg-background px-3 text-sm" />
+        <Swatches value={color} onChange={setColor} label="Tag colour" />
+        <Button type="submit" size="sm" loading={create.loading} disabled={!name.trim()}><Plus className="size-4" aria-hidden />Create tag</Button>
+      </form>
+      {create.error ? <ApiError error={create.error} title="Could not create the tag" /> : null}
+      {update.error ? <ApiError error={update.error} title="Could not save the tag" /> : null}
+      {all.error ? <ApiError error={all.error} title="Could not load tags" onRetry={() => void all.refetch()} /> : null}
+      {all.loading ? <p className="text-sm text-muted-foreground" role="status">Loading tags</p> : null}
+      {!all.loading && !all.error && all.tags.length === 0 ? <p className="py-6 text-center text-sm text-muted-foreground">No tags yet. Create the first one above.</p> : null}
+
+      {sources.length > 0 ? (
+        <div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/40 p-2 text-sm" role="status">
+          <span>{plural(sources.length, "tag")} selected</span>
+          <select aria-label="Merge into" className="h-8 rounded-md border bg-background px-2" value={mergeInto} onChange={(e) => setMergeInto(e.target.value)}>
+            <option value="">Merge into...</option>
+            {targets.map((t) => <option key={t.id} value={t.id}>{t.name}</option>)}
+          </select>
+          <Button size="sm" variant="outline" disabled={!mergeInto} onClick={() => setConfirmMerge(true)}><GitMerge className="size-4" aria-hidden />Merge</Button>
+          <Button size="sm" variant="ghost" onClick={() => setPicked(new Set())}>Clear</Button>
+        </div>
+      ) : null}
+      {merge.error ? <ApiError error={merge.error} title="Could not merge the tags" /> : null}
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the tag" /> : null}
+
+      <ul className="flex flex-col divide-y">
+        {all.tags.map((t) => (
+          <li key={t.id} className="flex flex-wrap items-center gap-2 py-2">
+            <input type="checkbox" aria-label={`Select ${t.name}`} checked={picked.has(t.id)} onChange={() => togglePick(t.id)} />
+            {editing?.id === t.id ? (
+              <form className="flex flex-wrap items-center gap-2" onSubmit={(e) => { e.preventDefault(); saveEdit(t); }}>
+                <input aria-label="Rename tag" maxLength={50} value={editing.name} onChange={(e) => setEditing({ ...editing, name: e.target.value })} className="h-8 w-40 rounded-md border bg-background px-2 text-sm" />
+                <Swatches value={editing.color} onChange={(c) => setEditing({ ...editing, color: c })} label="Edit colour" />
+                <Button type="submit" size="sm" loading={update.loading} disabled={!editing.name.trim()}>Save</Button>
+                <Button type="button" size="sm" variant="ghost" onClick={() => setEditing(null)}>Cancel</Button>
+              </form>
+            ) : (
+              <>
+                <span className={cn(isArchivedTag(t) && "opacity-60")}><TagChip tag={t} /></span>
+                {isArchivedTag(t) ? <span className="text-xs text-muted-foreground">Archived</span> : null}
+                <span className="text-xs tabular-nums text-muted-foreground">{t.contact_count == null ? "-" : plural(t.contact_count, "contact")}</span>
+                <span className="ml-auto flex gap-1">
+                  <Button size="sm" variant="ghost" aria-label={`Edit ${t.name}`} onClick={() => setEditing({ id: t.id, name: t.name, color: t.color && HEX_COLOR.test(t.color) ? t.color : TAG_COLORS[0] })}><Pencil className="size-4" aria-hidden /></Button>
+                  <Button size="sm" variant="ghost" aria-label={`${isArchivedTag(t) ? "Restore" : "Archive"} ${t.name}`} onClick={() => void update.mutate({ id: t.id, body: { archived: !isArchivedTag(t) } })}><Archive className="size-4" aria-hidden /></Button>
+                  <Button size="sm" variant="ghost" aria-label={`Delete ${t.name}`} onClick={() => { setDeleting(t); setMoveTo(""); }}><Trash2 className="size-4" aria-hidden /></Button>
+                </span>
+              </>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      <ConfirmSpendDialog
+        open={confirmMerge}
+        tier="destructive"
+        title={`Merge ${plural(sources.length, "tag")} into ${targetName}`}
+        description={`${sources.map((id) => byId.get(id)?.name).filter(Boolean).join(", ")} will be removed. ${allCountsKnown ? `Their ${plural(sourceContacts, "contact")} get` : "Their contacts get"} ${targetName} instead; contacts that already have it keep one copy.`}
+        affected={allCountsKnown ? sourceContacts : undefined}
+        confirmLabel="Merge tags"
+        confirming={merge.loading}
+        onConfirm={() => void merge.mutate({ sources, target: mergeInto })}
+        onCancel={() => setConfirmMerge(false)}
+      />
+      <ConfirmSpendDialog
+        open={deleting != null}
+        tier="destructive"
+        title={`Delete the tag ${deleting?.name ?? ""}`}
+        description={
+          <div className="flex flex-col gap-2">
+            <p>{moveTo ? `${deleting?.contact_count == null ? "Its contacts" : `Its ${plural(deleting.contact_count, "contact")}`} get ${byId.get(moveTo)?.name ?? "the other tag"} first.` : `It is removed from ${deleting?.contact_count == null ? "its contacts" : plural(deleting.contact_count, "contact")}. The contacts themselves stay.`}</p>
+            <label className="flex items-center gap-2 text-sm">Move its contacts to
+              <select aria-label="Move contacts to" className="h-8 rounded-md border bg-background px-2" value={moveTo} onChange={(e) => setMoveTo(e.target.value)}>
+                <option value="">No other tag</option>
+                {deleteTargets.map((t) => <option key={t.id} value={t.id}>{t.name}</option>)}
+              </select>
+            </label>
+          </div>
+        }
+        affected={deleting?.contact_count ?? undefined}
+        confirmLabel="Delete tag"
+        confirming={remove.loading}
+        onConfirm={() => deleting && void remove.mutate({ id: deleting.id, reassignTo: moveTo })}
+        onCancel={() => setDeleting(null)}
+      />
+    </FormSheet>
+  );
+}

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

@@ -37,8 +37,9 @@ 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 { useDebouncedValue } from "../hooks/use-debounced";
 import { usePageQuery } from "../hooks/use-page-query";
 import { errorStatus } from "../lib/crm-types";
 import { Pager, formatDay, useBulkDelete, useRowSelection } from "../lib/screen-parts";
@@ -54,6 +55,8 @@ export interface WorkspaceTask extends TaskItem {
 }
 
 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";
@@ -85,6 +88,10 @@ function PriorityPill({ priority }: { priority?: number | null }) {
   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");
@@ -94,28 +101,35 @@ export function TasksScreen(props: TasksScreenProps) {
   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");
-  const [search, setSearch] = useState("");
-  const [priority, setPriority] = useState("");
-  const [taskType, setTaskType] = useState("");
-  const [entityType, setEntityType] = useState(props.defaultRecord?.entity_type ?? "");
-  const q = useDebouncedValue(search);
+  // 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: priority || undefined, task_type: taskType || undefined, entity_type: entityType || undefined, entity_id: props.defaultRecord?.entity_id };
+  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.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 || entityType);
+  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 });
@@ -130,7 +144,7 @@ export function TasksScreen(props: TasksScreenProps) {
     if (openId && gone.includes(openId)) setIdParam(null);
     reload();
   });
-  useEffect(() => { setNote(null); }, [tab, q, priority, taskType, entityType]);
+  useEffect(() => { setNote(null); }, [tab, filters]);
   const allOnPage = list.rows.length > 0 && list.rows.every((r) => selection.selected.has(r.id));
 
   return (
@@ -162,21 +176,27 @@ export function TasksScreen(props: TasksScreenProps) {
         list={
           <div className="flex flex-col gap-3">
             <Toolbar
-              search={{ value: search, onChange: setSearch, placeholder: "Search tasks by title" }}
+              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) => setPriority(e.target.value)}>
+                  <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) => setTaskType(e.target.value)}>
+                  <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) => setEntityType(e.target.value)}>
+                    <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>
                   )}
-                  {hasFilters ? <Button variant="ghost" size="sm" onClick={() => { setSearch(""); setPriority(""); setTaskType(""); setEntityType(props.defaultRecord?.entity_type ?? ""); }}>Clear filters</Button> : null}
+                  {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}
                 </>
               }
             />

package/blocks/crm/components/unlock-info-button.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+/**
+ * UnlockInfoButton: unlock the locked contacts of a selection. Counts what it will charge for, shows that count and
+ * cost in ConfirmSpendDialog, and sends exactly that set.
+ *
+ * SDK operations, behind ConfirmSpendDialog (billable, scope enrichment:run):
+ *   1. unlockContactInfo   POST /contacts/unlock-info { contact_ids }       1 credit per newly unlocked contact
+ *        Only locked contacts are counted and sent (a masked email or phone). The answer's `credits_charged` is shown.
+ *        At most 1000 per call, so a larger selection unlocks the first 1000 and says so before the confirm.
+ *
+ * The confirm is disabled while its request runs, and a failed call keeps the selection so the person can retry.
+ */
+
+import { useState } from "react";
+import { Button } from "@graph8/sdk/ui";
+import { Unlock } 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";
+import type { ContactRecord } from "../lib/crm-types";
+import { MAX_PAID_BATCH, UNLOCK_CREDITS_PER_CONTACT, isLockedContact, unlockTargets } from "../lib/record-actions";
+
+export interface PaidActionProps {
+  rows: ReadonlyArray<ContactRecord>;
+  onDone?: () => void;
+  variant?: "default" | "outline" | "secondary" | "ghost";
+  size?: "default" | "sm";
+  className?: string;
+  /** Start with the confirm open and render no trigger (the row actions dialog opens it). */
+  defaultOpen?: boolean;
+  onClosed?: () => void;
+}
+
+export function UnlockInfoButton({ rows, onDone, variant = "outline", size = "sm", className, defaultOpen = false, onClosed }: PaidActionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  const [charged, setCharged] = useState<number | null | undefined>(undefined);
+  const targets = unlockTargets(rows);
+  const lockedTotal = rows.filter(isLockedContact).length;
+  const already = rows.length - lockedTotal;
+
+  const unlock = useG8Mutation(async (ids: number[]) => {
+    const res = await g8Post<{ credits_charged?: number }>("/contacts/unlock-info", { contact_ids: ids });
+    return typeof res.data?.credits_charged === "number" ? res.data.credits_charged : null;
+  }, {
+    invalidates: [["contacts", "list"], ["contacts", "detail"], ["contacts", "record"]],
+    onSuccess: (n) => { setOpen(false); setCharged(n); onDone?.(); onClosed?.(); },
+  });
+
+  return (
+    <>
+      {defaultOpen ? null : (
+        <Button className={className} variant={variant} size={size} disabled={targets.length === 0} title={targets.length === 0 ? "None of the selected contacts is locked" : undefined} onClick={() => { setCharged(undefined); unlock.reset(); setOpen(true); }}>
+          <Unlock className="size-4" aria-hidden />Unlock info
+        </Button>
+      )}
+      {charged !== undefined ? <span role="status" className="text-xs text-muted-foreground">{charged == null ? "Unlocked." : `Unlocked. ${charged.toLocaleString()} ${charged === 1 ? "credit" : "credits"} charged.`}</span> : null}
+      {unlock.error && !open ? <ApiError compact error={unlock.error} title="Could not unlock the contacts" /> : null}
+      <ConfirmSpendDialog
+        open={open}
+        tier="billable"
+        title={`Unlock ${plural(targets.length, "contact")}`}
+        description={
+          <>
+            Reveals the withheld email and phone numbers. Each newly unlocked contact costs {UNLOCK_CREDITS_PER_CONTACT} credit; contacts that are already unlocked are not charged again.
+            {already > 0 ? ` ${plural(already, "selected contact")} ${already === 1 ? "is" : "are"} already unlocked and left out.` : ""}
+            {lockedTotal > MAX_PAID_BATCH ? ` Only the first ${MAX_PAID_BATCH.toLocaleString()} locked contacts are unlocked in one go.` : ""}
+            {unlock.error ? <span role="alert" className="mt-2 block text-destructive">The unlock failed. You can try again.</span> : null}
+          </>
+        }
+        estimatedCredits={targets.length * UNLOCK_CREDITS_PER_CONTACT}
+        affected={targets.length}
+        confirmLabel="Unlock"
+        confirming={unlock.loading}
+        onConfirm={() => void unlock.mutate(targets.map((t) => t.id))}
+        onCancel={() => { setOpen(false); onClosed?.(); }}
+      />
+    </>
+  );
+}