@graph8/sdk 0.370.0 → 0.373.0

package/blocks/deals/components/pipeline-board.tsx

@@ -19,7 +19,7 @@ import { DndContext, KeyboardSensor, PointerSensor, useDraggable, useDroppable,
 import { Button, Input, Label, Skeleton } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
-import { usePipelineDeals } from "../hooks/use-pipeline-deals";
+import { usePipelineDeals, type PipelineDealFilters } from "../hooks/use-pipeline-deals";
 import { usePipelines } from "../hooks/use-pipelines";
 import { closedStageMarker, formatDate, formatMoney, stageKind, sumAmounts, type Deal, type Stage } from "../lib/deals-types";
 
@@ -28,6 +28,8 @@ export interface PipelineBoardProps {
   pipelineId?: string;
   search?: string;
   ownerId?: string;
+  /** More list filters (stage, outcome, stale, close-date range ...); the same object the screen passes to usePipelineDeals. */
+  filters?: Omit<PipelineDealFilters, "search" | "ownerId">;
   onSelectDeal?: (deal: Deal) => void;
   /** Called after a stage move was saved, so a screen can refresh its totals. */
   onChanged?: () => void;
@@ -61,7 +63,7 @@ function Column({ stage, stages, deals, moving, onMove, onSelect }: { stage: Sta
   return (
     <section ref={setNodeRef} aria-label={stage.name} className={`flex w-72 shrink-0 flex-col gap-2 rounded-lg border bg-muted/40 p-2 ${isOver ? "ring-2 ring-primary" : ""}`}>
       <header className="flex items-center justify-between px-1">
-        <h3 className="text-sm font-semibold">{stage.name}{kind !== "open" ? ` (${kind})` : ""}</h3>
+        <h3 className="text-sm font-medium">{stage.name}{kind !== "open" ? ` (${kind})` : ""}</h3>
         <span className="text-xs text-muted-foreground">{deals.length} · {formatMoney(sumAmounts(deals), deals[0]?.currency)}</span>
       </header>
       <div className="flex min-h-16 flex-col gap-2">
@@ -85,7 +87,7 @@ function CloseDialog({ stage, deal, onConfirm, onCancel }: { stage: Stage; deal:
   return (
     <div role="dialog" aria-modal="true" aria-label={`Close deal as ${stageKind(stage)}`} className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
       <form className="w-full max-w-sm space-y-3 rounded-lg bg-background p-5 shadow-xl" onSubmit={(e) => { e.preventDefault(); if (valid) onConfirm({ close_date: date, amount: amount === "" ? undefined : Number(amount) }); }}>
-        <h2 className="text-base font-semibold">Move "{deal.name}" to {stage.name}</h2>
+        <h2 className="text-base font-medium">Move "{deal.name}" to {stage.name}</h2>
         <div className="space-y-1"><Label htmlFor="cd-date">Close date</Label><Input id="cd-date" type="date" value={date} onChange={(e) => setDate(e.target.value)} /></div>
         {won ? <div className="space-y-1"><Label htmlFor="cd-amount">Amount</Label><Input id="cd-amount" type="number" min={0} value={amount} onChange={(e) => setAmount(e.target.value)} /></div> : null}
         <div className="flex justify-end gap-2"><Button type="button" variant="outline" onClick={onCancel}>Cancel</Button><Button type="submit" disabled={!valid}>Move deal</Button></div>
@@ -94,10 +96,10 @@ function CloseDialog({ stage, deal, onConfirm, onCancel }: { stage: Stage; deal:
   );
 }
 
-export function PipelineBoard({ pipelineId, search, ownerId, onSelectDeal, onChanged, className }: PipelineBoardProps) {
+export function PipelineBoard({ pipelineId, search, ownerId, filters, onSelectDeal, onChanged, className }: PipelineBoardProps) {
   const pipelines = usePipelines();
   const pipeline = pipelines.pipelines.find((p) => p.id === pipelineId) ?? pipelines.defaultPipeline;
-  const { deals, loading, error, reload, moveDeal, movingIds } = usePipelineDeals(pipeline?.id, { search, ownerId });
+  const { deals, loading, error, reload, moveDeal, movingIds } = usePipelineDeals(pipeline?.id, { search, ownerId, ...filters });
   const [closing, setClosing] = useState<{ deal: Deal; stage: Stage } | null>(null);
   const [moveError, setMoveError] = useState<unknown>(null);
   const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(KeyboardSensor));
@@ -127,7 +129,7 @@ export function PipelineBoard({ pipelineId, search, ownerId, onSelectDeal, onCha
   if (pipelines.loading || !pipeline) return pipelines.loading ? <Skeleton className="h-64 w-full" aria-label="Loading pipeline" /> : <EmptyState title="No pipeline yet" description="Create a pipeline with stages, then your deals appear here." />;
   return (
     <div className={`space-y-3 ${className ?? ""}`}>
-      <h2 className="text-base font-semibold">{pipeline.name}</h2>
+      <h2 className="text-base font-medium">{pipeline.name}</h2>
       {error ? <ApiError error={error} title="Could not load deals" onRetry={() => void reload()} /> : null}
       {moveError ? <ApiError error={moveError} title="That move was not saved" /> : null}
       {loading && deals.length === 0 ? <Skeleton className="h-48 w-full" aria-label="Loading deals" /> : (

package/blocks/deals/components/pipeline-editor.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+/**
+ * PipelineEditor: create, rename, set the default and delete whole pipelines, and keep the close reasons.
+ * Stages of one pipeline are edited by StageEditor, which the deals screen shows right below.
+ *
+ * SDK operations, in order:
+ *   1. GET    /deals/pipelines                   (deals.listPipelines)           read  - via usePipelines
+ *   2. POST   /pipelines { name, blank: true }   (cliPipelines.createPipeline)   write - a blank pipeline (add stages next)
+ *      PUT    /pipelines/{id} { name }           (cliPipelines.updatePipeline)   write - only the changed field is sent
+ *      PUT    /pipelines/{id} { set_default }    (cliPipelines.updatePipeline)   write
+ *   3. DELETE /pipelines/{id}                    (cliPipelines.deletePipeline)   DESTRUCTIVE -> ConfirmSpendDialog first
+ *   4. GET    /deals/close-reasons               (deals.listDealCloseReasons)    read
+ *      POST   /deals/close-reasons { kind, label } (deals.createDealCloseReason) write
+ *      DELETE /deals/close-reasons/{id}          (deals.archiveDealCloseReason)  DESTRUCTIVE -> ConfirmSpendDialog (hidden unless the API says you may)
+ * Pipelines live under the campaigns:* scopes; close reasons under deals:*. The API refuses to delete a pipeline that
+ * still has deals; its message is shown. Not covered by this API: suggesting a pipeline with AI is a billable call this
+ * editor leaves out.
+ */
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { Button, Input, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { g8Delete, g8Get, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { usePipelines } from "../hooks/use-pipelines";
+import type { Pipeline } from "../lib/deals-types";
+import { reasonsOf, type CloseReason } from "../lib/deal-extras";
+
+export interface PipelineEditorProps {
+  /** Called after a pipeline was created, renamed, made default or deleted. */
+  onChanged?: (event: { kind: "created" | "renamed" | "default" | "deleted"; pipelineId?: string }) => void;
+  className?: string;
+}
+
+function PipelineRow({ pipeline, busy, onRename, onDefault, onDelete }: { pipeline: Pipeline; busy: boolean; onRename: (name: string) => void; onDefault: () => void; onDelete: () => void }) {
+  const [name, setName] = useState(pipeline.name);
+  const changed = name.trim() !== pipeline.name && name.trim() !== "";
+  return (
+    <li className="flex flex-wrap items-center gap-2 rounded-md border p-2">
+      <Input aria-label={`Name of pipeline ${pipeline.name}`} className="w-56" value={name} onChange={(e) => setName(e.target.value)} />
+      <Button size="sm" variant="outline" loading={busy} disabled={!changed || busy} aria-label={`Rename ${pipeline.name}`} onClick={() => onRename(name.trim())}>Rename</Button>
+      {pipeline.is_default ? <span className="text-xs text-muted-foreground">Default</span> : <Button size="sm" variant="ghost" disabled={busy} aria-label={`Make ${pipeline.name} the default`} onClick={onDefault}>Make default</Button>}
+      <Button size="sm" variant="ghost" disabled={busy} aria-label={`Delete pipeline ${pipeline.name}`} onClick={onDelete}>Delete</Button>
+    </li>
+  );
+}
+
+function CloseReasons() {
+  const [kind, setKind] = useState<"won" | "lost">("lost");
+  const [label, setLabel] = useState("");
+  const [archiving, setArchiving] = useState<CloseReason | null>(null);
+  const list = useG8Query(async (signal) => reasonsOf(await g8Get("/deals/close-reasons", { kind }, { signal })), [kind], { key: ["deals", "close-reasons", kind] });
+  const add = useG8Mutation(() => g8Post("/deals/close-reasons", { kind, label: label.trim() }), { invalidates: [["deals", "close-reasons"]], onSuccess: () => setLabel("") });
+  const archive = useG8Mutation((r: CloseReason) => g8Delete(`/deals/close-reasons/${encodeURIComponent(r.id)}`), { invalidates: [["deals", "close-reasons"]], onSuccess: () => setArchiving(null), onError: () => setArchiving(null) });
+  const reasons = (list.data ?? []).filter((r) => !r.kind || r.kind === kind);
+  return (
+    <section aria-label="Close reasons" className="space-y-2">
+      <h3 className="text-base font-semibold">Close reasons</h3>
+      <p className="text-sm text-muted-foreground">The reasons offered when a deal is closed. Archiving one keeps it on past deals.</p>
+      <div className="flex gap-2">
+        <select aria-label="Reason type" className="h-9 rounded-md border bg-background px-2 text-sm" value={kind} onChange={(e) => setKind(e.target.value as "won" | "lost")}>
+          <option value="won">Won</option>
+          <option value="lost">Lost</option>
+        </select>
+        <Input aria-label="New close reason" placeholder={`Add a ${kind} reason`} value={label} onChange={(e) => setLabel(e.target.value)} />
+        <Button loading={add.loading} disabled={!label.trim()} onClick={() => void add.mutate(undefined)}>Add reason</Button>
+      </div>
+      {add.error ? <ApiError error={add.error} title="Could not add the reason" /> : null}
+      {archive.error ? <ApiError error={archive.error} title="Could not archive the reason" /> : null}
+      {list.error ? <ApiError error={list.error} title="Could not load close reasons" onRetry={() => void list.refetch()} /> : null}
+      {list.loading && !list.data ? <Skeleton className="h-10 w-full" aria-label="Loading close reasons" /> : null}
+      {!list.loading && !list.error && reasons.length === 0 ? <p className="text-sm text-muted-foreground">No {kind} reasons yet.</p> : null}
+      <ul className="divide-y rounded-md border empty:hidden" aria-label={`${kind} reasons`}>
+        {reasons.map((r) => (
+          <li key={r.id} className="flex items-center justify-between gap-2 p-2 text-sm">
+            <span>{r.label}</span>
+            {r.canArchive ? <Button size="sm" variant="ghost" aria-label={`Archive reason ${r.label}`} onClick={() => setArchiving(r)}>Archive</Button> : null}
+          </li>
+        ))}
+      </ul>
+      <ConfirmSpendDialog open={archiving != null} tier="destructive" title={`Archive the reason "${archiving?.label}"?`} description="It is no longer offered when closing deals." confirmLabel="Archive reason" affected={1} confirming={archive.loading} onConfirm={() => archiving && void archive.mutate(archiving)} onCancel={() => setArchiving(null)} />
+    </section>
+  );
+}
+
+export function PipelineEditor({ onChanged, className }: PipelineEditorProps) {
+  const { pipelines, loading, error, refetch } = usePipelines();
+  const [newName, setNewName] = useState("");
+  const [removing, setRemoving] = useState<Pipeline | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const inv = [["deals", "pipelines"]] as const;
+
+  const create = useG8Mutation(async () => g8Post("/pipelines", { name: newName.trim(), blank: true }), { invalidates: inv, onSuccess: () => { setNewName(""); onChanged?.({ kind: "created" }); } });
+  const rename = useG8Mutation(async (v: { id: string; name: string }) => {
+    setBusyId(v.id);
+    try { await g8Put(`/pipelines/${encodeURIComponent(v.id)}`, { name: v.name }); } finally { setBusyId(null); }
+  }, { invalidates: inv, onSuccess: (_r, v) => onChanged?.({ kind: "renamed", pipelineId: v.id }) });
+  const makeDefault = useG8Mutation(async (id: string) => {
+    setBusyId(id);
+    try { await g8Put(`/pipelines/${encodeURIComponent(id)}`, { set_default: true }); } finally { setBusyId(null); }
+  }, { invalidates: inv, onSuccess: (_r, id) => onChanged?.({ kind: "default", pipelineId: id }) });
+  const remove = useG8Mutation(async (p: Pipeline) => {
+    setBusyId(p.id);
+    try { await g8Delete(`/pipelines/${encodeURIComponent(p.id)}`); } finally { setBusyId(null); }
+  }, { invalidates: inv, onSuccess: (_r, p) => { setRemoving(null); onChanged?.({ kind: "deleted", pipelineId: p.id }); }, onError: () => setRemoving(null) });
+  const failure = create.error ?? rename.error ?? makeDefault.error ?? remove.error;
+
+  return (
+    <div className={`space-y-6 ${className ?? ""}`}>
+      <section aria-label="Pipelines" className="space-y-2">
+        <h3 className="text-base font-semibold">Pipelines</h3>
+        {error ? <ApiError error={error} title="Could not load pipelines" onRetry={() => void refetch()} /> : null}
+        {loading && pipelines.length === 0 ? <Skeleton className="h-16 w-full" aria-label="Loading pipelines" /> : null}
+        {failure ? <ApiError error={failure} title="That pipeline change failed" /> : null}
+        <ul className="space-y-2">
+          {pipelines.map((p) => (
+            <PipelineRow key={`${p.id}:${p.name}`} pipeline={p} busy={busyId === p.id} onRename={(name) => void rename.mutate({ id: p.id, name })} onDefault={() => void makeDefault.mutate(p.id)} onDelete={() => setRemoving(p)} />
+          ))}
+        </ul>
+        <form className="flex gap-2" onSubmit={(e) => { e.preventDefault(); if (newName.trim()) void create.mutate(undefined); }}>
+          <Input aria-label="New pipeline name" placeholder="New pipeline name" value={newName} onChange={(e) => setNewName(e.target.value)} />
+          <Button type="submit" loading={create.loading} disabled={!newName.trim()}><Plus className="size-4" aria-hidden />Create pipeline</Button>
+        </form>
+      </section>
+      <CloseReasons />
+      <ConfirmSpendDialog open={removing != null} tier="destructive" title={`Delete the "${removing?.name}" pipeline?`} description="Its stages are removed too. The API refuses while deals are still in it: move them to another pipeline first." confirmLabel="Delete pipeline" affected={1} confirming={remove.loading} onConfirm={() => removing && void remove.mutate(removing)} onCancel={() => setRemoving(null)} />
+    </div>
+  );
+}

package/blocks/deals/components/record-deals-tab.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+/**
+ * RecordDealsTab: the deals linked to one contact or company, each opening in the deals screen. Use it as an
+ * `extraDetailTabs` entry of ContactsScreen / CompaniesScreen:
+ *   { id: "deals", label: "Deals", render: (c) => <RecordDealsTab kind="contacts" id={c.id} onOpenDeal={(id) => router.push(`/deals?id=${id}`)} /> }
+ *
+ * SDK operations, in order:
+ *   1. getContactDeals  GET /contacts/{id}/deals   (read)   when kind="contacts"
+ *      getCompanyDeals  GET /companies/{id}/deals  (read)   when kind="companies"
+ * Nothing here is billable, external or destructive.
+ */
+
+import { Skeleton } from "@graph8/sdk/ui";
+import { Handshake } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { dataOf, formatMoney } from "../lib/deals-types";
+
+/** One row of GET /contacts/{id}/deals and GET /companies/{id}/deals (the API's ContactDealResponse). */
+interface LinkedDeal { deal_id?: string | null; name?: string | null; stage?: string | null; value?: number | null; currency?: string | null; role?: string | null }
+
+export interface RecordDealsTabProps {
+  kind: "contacts" | "companies";
+  id: number;
+  /** Route to the deal in your deals screen. Without it the rows link to `${dealsPath}?id=<deal id>`. */
+  onOpenDeal?: (dealId: string) => void;
+  /** Path of your deals screen for the plain links. Default "/deals". */
+  dealsPath?: string;
+}
+
+export function RecordDealsTab({ kind, id, onOpenDeal, dealsPath = "/deals" }: RecordDealsTabProps) {
+  const q = useG8Query(async (signal) => {
+    const inner = dataOf<{ items?: LinkedDeal[] } | LinkedDeal[]>(await g8Get(`/${kind}/${id}/deals`, undefined, { signal }));
+    return (Array.isArray(inner) ? inner : (inner.items ?? [])).filter((d) => d.deal_id);
+  }, [kind, id]);
+  if (q.error) return <ApiError error={q.error} title="Could not load deals" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-24 w-full" aria-label="Loading deals" />;
+  if (q.data.length === 0) return <EmptyState compact icon={<Handshake className="size-8" />} title="No deals yet" description="Deals linked to this record show up here." />;
+  return (
+    <ul className="divide-y rounded-md border" aria-label="Deals">
+      {q.data.map((d) => (
+        <li key={d.deal_id}>
+          <a
+            href={`${dealsPath}?id=${encodeURIComponent(d.deal_id as string)}`}
+            className="flex items-center justify-between gap-3 p-3 text-sm hover:bg-muted"
+            onClick={(e) => {
+              if (!onOpenDeal || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+              e.preventDefault();
+              onOpenDeal(d.deal_id as string);
+            }}
+          >
+            <span className="min-w-0 truncate font-medium">{d.name || "Untitled deal"}</span>
+            <span className="shrink-0 text-xs text-muted-foreground">{[d.stage, d.value != null ? formatMoney(d.value, d.currency) : null].filter(Boolean).join(" · ")}</span>
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/blocks/deals/components/stage-editor.tsx

@@ -69,7 +69,7 @@ export function StageEditor({ pipelineId, onChanged, className }: StageEditorPro
   if (pipeline.loading && !pipeline.data) return <Skeleton className="h-48 w-full" aria-label="Loading stages" />;
   return (
     <div className={`space-y-3 ${className ?? ""}`}>
-      <h2 className="text-base font-semibold">{pipeline.data?.name} stages</h2>
+      <h2 className="text-base font-medium">{pipeline.data?.name} stages</h2>
       {failure ? <ApiError error={failure} title="That stage change failed" /> : null}
       <ol className="space-y-2">
         {stages.map((s, i) => (

package/blocks/deals/hooks/use-pipeline-deals.ts

@@ -4,7 +4,7 @@
  * usePipelineDeals: the deals in one pipeline, all pages up to `maxDeals`, with an optimistic stage move.
  *
  * SDK operations:
- *   GET   /deals?pipeline_id=&search=&owner_id=&page=&limit=   (deals.listDeals)   read
+ *   GET   /deals?pipeline_id=&search=&owner_id=&stage_id=&outcome=&stale_before=&has_activity=&close_after=&close_before=&has_contact=&page=&limit=   (deals.listDeals)   read
  *   PATCH /deals/{deal_id}                                      (deals.updateDeal)  write - the stage move
  *
  * `moveDeal` updates the board immediately and, if the API refuses, refetches the list (the server is the truth)
@@ -22,6 +22,19 @@ import { dataOf } from "../lib/deals-types";
 export interface PipelineDealFilters {
   search?: string;
   ownerId?: string;
+  /** Only this stage (GET /deals stage_id). */
+  stageId?: string;
+  /** Exactly one of open, won or lost. */
+  outcome?: string;
+  /** Deals last touched before this timestamp OR never touched (GET /deals stale_before). */
+  staleBefore?: string;
+  hasActivity?: boolean;
+  /** Close date on or after this timestamp or YYYY-MM-DD (inclusive). */
+  closeAfter?: string;
+  /** Close date strictly before this timestamp or YYYY-MM-DD (exclusive). */
+  closeBefore?: string;
+  /** false returns the deals with no contact. */
+  hasContact?: boolean;
 }
 
 export interface MoveExtra {
@@ -36,14 +49,14 @@ export function usePipelineDeals(pipelineId: string | undefined, filters: Pipeli
     async (signal) => {
       const all: Deal[] = [];
       for (let page = 1; all.length < maxDeals; page++) {
-        const env = await g8Get<Deal[]>("/deals", { pipeline_id: pipelineId, search: filters.search || undefined, owner_id: filters.ownerId || undefined, page, limit: 100 }, { signal });
+        const env = await g8Get<Deal[]>("/deals", { pipeline_id: pipelineId, search: filters.search || undefined, owner_id: filters.ownerId || undefined, stage_id: filters.stageId, outcome: filters.outcome, stale_before: filters.staleBefore, has_activity: filters.hasActivity, close_after: filters.closeAfter, close_before: filters.closeBefore, has_contact: filters.hasContact, page, limit: 100 }, { signal });
         all.push(...(env.data ?? []));
         if (!env.pagination?.has_next) break;
       }
       return all.slice(0, maxDeals);
     },
-    [pipelineId, filters.search, filters.ownerId, maxDeals],
-    { enabled: Boolean(pipelineId), key: ["deals", "list", "board", { pipelineId, search: filters.search || undefined, ownerId: filters.ownerId || undefined, maxDeals }] },
+    [pipelineId, filters.search, filters.ownerId, filters.stageId, filters.outcome, filters.staleBefore, filters.hasActivity, filters.closeAfter, filters.closeBefore, filters.hasContact, maxDeals],
+    { enabled: Boolean(pipelineId), key: ["deals", "list", "board", { pipelineId, search: filters.search || undefined, ownerId: filters.ownerId || undefined, stageId: filters.stageId, outcome: filters.outcome, staleBefore: filters.staleBefore, hasActivity: filters.hasActivity, closeAfter: filters.closeAfter, closeBefore: filters.closeBefore, hasContact: filters.hasContact, maxDeals }] },
   );
   useEffect(() => { if (query.data) setDeals(query.data); }, [query.data]);
 

package/blocks/deals/lib/deal-extras.ts

@@ -0,0 +1,156 @@
+"use client";
+
+/**
+ * Shapes and pure helpers for the deal depth components: notes, tasks, contact roles, line items, close reasons
+ * and the list filters. Types only describe the fields the components read; the API may return more.
+ *
+ * Money: a deal's `amount` is in DOLLARS (major units); a LINE ITEM's `unit_amount` and `line_total` are in CENTS.
+ * Dates: date-only values are `YYYY-MM-DD` and are shifted with UTC arithmetic, never through a local Date.
+ */
+import { dataOf } from "./deals-types";
+
+/** Buying-committee roles the API accepts on a deal contact (any other value is a 422). */
+export const CONTACT_ROLES = ["champion", "decision_maker", "influencer", "blocker", "coach", "end_user"] as const;
+
+export function roleLabel(role: string | null | undefined): string {
+  if (!role) return "No role";
+  const text = role.replace(/_/g, " ");
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+export interface DealNote {
+  id: string;
+  content: string;
+  created_by_name?: string | null;
+  created_at?: string | null;
+  updated_at?: string | null;
+  read_only?: boolean;
+}
+
+export interface DealTask {
+  id: string;
+  title: string;
+  description?: string | null;
+  due_date?: string | null;
+  status?: string | null;
+  priority?: number | null;
+  assignee_name?: string | null;
+}
+
+export interface DealLineItem {
+  id?: string;
+  product_name: string;
+  description?: string | null;
+  quantity: number;
+  /** Cents. */
+  unit_amount: number;
+  discount_pct: number;
+  billing_frequency?: string | null;
+  sort_order?: number;
+  stripe_product_id?: string | null;
+  stripe_price_id?: string | null;
+  manual_product_id?: string | null;
+}
+
+export interface LineItemsPayload {
+  deal_id: string;
+  /** Dollars. */
+  amount?: number | null;
+  currency?: string | null;
+  line_items?: DealLineItem[];
+  amount_mismatch?: boolean;
+  /** Dollars. */
+  linked_quote_total?: number | null;
+}
+
+export interface CloseReason {
+  id: string;
+  label: string;
+  kind: string;
+  /** Whether this person may archive it (created it themselves, or may manage all). */
+  canArchive: boolean;
+}
+
+/** Rows of a list response that is either a bare array or `{ items | tasks | notes | reasons | contacts: [] }`. */
+export function rowsOf<T>(env: unknown): T[] {
+  const inner = dataOf<unknown>(env);
+  if (Array.isArray(inner)) return inner as T[];
+  const o = inner as Record<string, unknown> | null;
+  for (const key of ["items", "tasks", "notes", "reasons", "contacts"]) if (o && Array.isArray(o[key])) return o[key] as T[];
+  return [];
+}
+
+/** The close reasons of `GET /deals/close-reasons`: `{ can_manage, reasons: [{ id, label, kind, archived? }] }`. */
+export function reasonsOf(env: unknown): CloseReason[] {
+  const inner = dataOf<{ can_manage?: boolean | null; reasons?: Array<Record<string, unknown>> } | null>(env);
+  const manage = Boolean(inner?.can_manage);
+  return (inner?.reasons ?? [])
+    .filter((r) => !r.archived && !r.archived_at)
+    .map((r) => ({ id: String(r.id ?? ""), label: String(r.label ?? r.name ?? ""), kind: String(r.kind ?? ""), canArchive: manage || r.can_archive === true || r.can_delete === true }))
+    .filter((r) => r.id && r.label);
+}
+
+/** Whole cents from a dollars text input; null when it is not a non-negative number. */
+export function dollarsToCents(text: string): number | null {
+  const n = Number(text.trim());
+  return text.trim() !== "" && Number.isFinite(n) && n >= 0 ? Math.round(n * 100) : null;
+}
+
+export const centsToDollarsText = (cents: number): string => (cents / 100).toFixed(2);
+
+export function lineTotalCents(l: Pick<DealLineItem, "unit_amount" | "quantity" | "discount_pct">): number {
+  return Math.round(l.unit_amount * l.quantity * (1 - Math.min(100, Math.max(0, l.discount_pct)) / 100));
+}
+
+export function formatCents(cents: number | null | undefined, currency?: string | null): string {
+  if (cents == null) return "";
+  try {
+    return new Intl.NumberFormat(undefined, { style: "currency", currency: currency || "USD" }).format(cents / 100);
+  } catch {
+    return String(cents / 100);
+  }
+}
+
+/** `date` (YYYY-MM-DD) shifted by whole days, in UTC so the result is the same in every time zone. */
+export function addDaysUtc(date: string, days: number): string {
+  const d = new Date(`${date}T00:00:00Z`);
+  d.setUTCDate(d.getUTCDate() + days);
+  return d.toISOString().slice(0, 10);
+}
+
+/** Midnight UTC `days` before today, as an ISO timestamp. Stable all day, so it can sit in a query key. */
+export function staleCutoff(days: number, now = new Date()): string {
+  return new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - days)).toISOString();
+}
+
+export interface DealFilterState {
+  ownerId: string;
+  stageId: string;
+  outcome: "" | "open" | "won" | "lost";
+  /** Only deals untouched for this many days (or never touched). "" = off. */
+  staleDays: "" | "7" | "14" | "30" | "60" | "90";
+  activity: "" | "yes" | "no";
+  /** Inclusive date range of the close date. */
+  closeFrom: string;
+  closeTo: string;
+  /** Only deals with no contact at all. */
+  orphaned: boolean;
+}
+
+export const NO_FILTERS: DealFilterState = { ownerId: "", stageId: "", outcome: "", staleDays: "", activity: "", closeFrom: "", closeTo: "", orphaned: false };
+
+export const filtersActive = (f: DealFilterState): boolean => (Object.keys(NO_FILTERS) as Array<keyof DealFilterState>).some((k) => f[k] !== NO_FILTERS[k]);
+
+/** The `GET /deals` query for a filter state. `close_before` is exclusive, so the inclusive "to" date becomes the next day. */
+export function filterQuery(f: DealFilterState, now = new Date()) {
+  return {
+    ownerId: f.ownerId || undefined,
+    stageId: f.stageId || undefined,
+    outcome: f.outcome || undefined,
+    staleBefore: f.staleDays ? staleCutoff(Number(f.staleDays), now) : undefined,
+    hasActivity: f.activity === "" ? undefined : f.activity === "yes",
+    closeAfter: f.closeFrom || undefined,
+    closeBefore: f.closeTo ? addDaysUtc(f.closeTo, 1) : undefined,
+    hasContact: f.orphaned ? false : undefined,
+  };
+}

package/blocks/dialer/README.md

@@ -13,8 +13,10 @@ browser, record outcomes, and review transcripts. Copy `DialerWorkspace` for the
 
 - `DialerScreen` (`components/dialer-screen.tsx`): **Session** tab picks a list (ListPicker), creates a session (dials
   nobody), then runs the queue: every batch, voicemail drop, softphone credential and stop is confirmed; finished calls
-  open the outcome panel and transcript. **Sessions** tab lists every session; a row opens `DialerSessionDetail` (stats, details, calls, queue; pause, confirmed resume, confirmed stop; `?tab=sessions&session=<id>`). **History** tab lists the rep's calls. Props are optional: `userId` (needed to
-  enable the browser softphone), `userEmail`, `listId`, `sessionId`, `transport` (default: the Twilio adapter, loaded
+  open the outcome panel and transcript. **Sessions** tab lists every session; a row opens `DialerSessionDetail` (stats, details, calls, queue; pause, confirmed resume, confirmed stop; `?tab=sessions&session=<id>`). **History** tab lists the rep's calls. Props are optional: `userId` (overrides the rep; without it the
+  rep is the signed-in team member from `GET /team-members/me`, so the softphone works out of the box with a personal key,
+  and a `MemberPicker` switches rep where the API allows it; a personal key naming another rep gets a 403, which the form
+  explains; an organisation key is not a person, so the rep is chosen with the picker), `userEmail`, `listId`, `sessionId`, `transport` (default: the Twilio adapter, loaded
   on demand, needs `@twilio/voice-sdk`). Resume a session with `?session=<id>`. Add `&view=full` to any detail (session, call, and the same in the other screens) to open it as a full page.
 - `CallLogScreen` (`components/call-log-screen.tsx`): history of one rep, contact or session with outcome filter and search;
   open a call for recording, transcript and AI grade (`?id=<room_name>`), and **Call back** the number (`CallContactButton`). Needs a rep email (it asks) or a prop.
@@ -90,8 +92,10 @@ Softphone), `call_id` = `room_name` (live call -> disposition -> transcript -> r
 
 ## Stack nav pages
 
-`CallQueue` and `CallLog` render with no props (a stack uses them as pages): the start form asks for the rep's user id
-and the call log for a rep email. Pass `userId` / `userEmail` from your session to skip those fields.
+`CallQueue` and `CallLog` render with no props (a stack uses them as pages): the start form defaults the rep to the
+signed-in team member (a `MemberPicker` switches it; the raw user id is only a fallback under "Use a user id instead"),
+the list is a `ListPicker`, and the call log shows the signed-in rep's calls (a rep email can still be typed). Pass
+`userId` / `userEmail` from your session to override.
 
 ## Gotchas
 
@@ -135,7 +139,7 @@ and the call log for a rep email. Pass `userId` / `userEmail` from your session
 | `voice.getCallTranscript` | GET /voice/dialer/calls/{room}/transcript | read | TranscriptViewer |
 | `voice.getCallGrading` | GET /voice/dialer/calls/{room}/grading | read | TranscriptViewer |
 | `voice.downloadCallRecording` | GET /voice/calls/{id}/recording | read | TranscriptViewer |
-| `teamMembers.getMyTeamMember` | GET /team-members/me | read | CallContactButton (only without `userId`) |
+| `teamMembers.getMyTeamMember` | GET /team-members/me | read | CallContactButton, DialerScreen, SessionStartForm, CallLogScreen (only without `userId` / `userEmail`; via the pickers block `useCurrentMember`) |
 | `voice.listDialerSessions` | GET /voice/dialer/sessions | read | CallContactButton |
 | `dialer.manualDial` | POST /dialer/parallel-calls/manual-dial | external | CallContactButton |
 
@@ -144,3 +148,8 @@ and the call log for a rep email. Pass `userId` / `userEmail` from your session
 - `01-create-session-and-dial.ts`: draft, one confirmed batch, poll queue-stats.
 - `02-disposition-calls.ts`: record outcomes from the org's accepted list.
 - `03-review-a-call.ts`: transcript, AI grade, rep performance (`dialerAnalytics`).
+
+## Cross-block glue
+
+
+- `RecordCallsTab` (`components/record-calls-tab.tsx`): a contact's call history (`listCallsForContact`, 25 then "Show more" up to the API maximum of 100, then a notice) with a confirmed `CallContactButton`. `extraDetailTabs` entry for ContactsScreen.

package/blocks/dialer/block.json

@@ -11,7 +11,8 @@
     "call log, transcript, AI grading and recording per call"
   ],
   "dependsOn": [
-    "lists"
+    "lists",
+    "pickers"
   ],
   "operations": [
     "create_session_draft_dialer_sessions_draft_post",
@@ -26,6 +27,7 @@
     "list_calls_for_contact_voice_dialer_calls_get",
     "list_dialer_numbers_voice_dialer_numbers_get",
     "list_dialer_sessions_voice_dialer_sessions_get",
+    "list_team_members_team_members_get",
     "list_voice_dispositions_voice_dispositions_get",
     "manual_dial_dialer_parallel_calls_manual_dial_post",
     "mint_softphone_token_dialer_sessions_token_get",
@@ -64,7 +66,9 @@
       "purpose": "Create a draft session (dials nobody) for a list, caller ID and mode.",
       "operations": [
         "create_session_draft_dialer_sessions_draft_post",
-        "list_dialer_numbers_voice_dialer_numbers_get"
+        "get_my_team_member_team_members_me_get",
+        "list_dialer_numbers_voice_dialer_numbers_get",
+        "list_team_members_team_members_get"
       ],
       "tiers": [
         "read",
@@ -194,6 +198,17 @@
         "read",
         "external"
       ]
+    },
+    {
+      "name": "RecordCallsTab",
+      "file": "components/record-calls-tab.tsx",
+      "purpose": "One contact's call history with a confirmed Call button; an extraDetailTabs entry for ContactsScreen.",
+      "operations": [
+        "list_calls_for_contact_voice_dialer_calls_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     }
   ],
   "hooks": [

package/blocks/dialer/components/call-contact-button.tsx

@@ -24,14 +24,16 @@
  * The call is only offered once the softphone is ready, so the rep is never late to their own call (the response
  * is the first moment the conference name is known; a softphone that registers after it would join late).
  */
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Phone } from "lucide-react";
 import { Button } 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 { g8Get, g8Post } from "@/g8/lib/g8-client";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useCurrentMember } from "@/g8/pickers/hooks/use-current-member";
 import { useDialerNumbers } from "../hooks/use-dialer-numbers";
 import { dataOf } from "../lib/dialer-types";
 import type { SoftphoneTransport } from "../lib/softphone-transport";
@@ -100,6 +102,10 @@ function displayName(c: CallableContact): string {
   return c.full_name || c.name || [c.first_name, c.last_name].filter(Boolean).join(" ") || c.email || "this contact";
 }
 
+/** Dialer sessions per read and the most pages read per status; beyond that the picker says so. */
+const SESSION_PAGE = 25;
+const SESSION_PAGES = 8;
+
 export function CallContactButton(props: CallContactButtonProps) {
   const { contact, label = "Call", className } = props;
   const [open, setOpen] = useState(false);
@@ -116,15 +122,12 @@ export function CallContactButton(props: CallContactButtonProps) {
 
 function CallContactPanel(props: CallContactButtonProps & { onClose: () => void }) {
   const { contact, sessionId, fromPhone, transport, onCalled, onClose, className } = props;
-  const me = useG8Query(
-    async (signal) => dataOf<{ propelauth_user_id?: string | null; email?: string | null }>(await g8Get("/team-members/me", undefined, { signal })),
-    [],
-    { enabled: !props.userId },
-  );
-  const userId = props.userId ?? me.data?.propelauth_user_id ?? undefined;
+  // The shared resolver (foundation): the same one DialerScreen uses, so the two cannot drift apart.
+  const me = useCurrentMember({ enabled: !props.userId });
+  const userId = props.userId ?? me.userId;
   // user_id and user_email must describe the same person: a userEmail without a userId (e.g. a history filtered to
   // another rep) is ignored, and both come from /team-members/me.
-  const userEmail = props.userId ? props.userEmail : (me.data?.email ?? undefined);
+  const userEmail = props.userId ? props.userEmail : me.email;
   const phones = contactPhones(contact);
   const [phone, setPhone] = useState(phones[0]?.phone ?? "");
   const [session, setSession] = useState(sessionId ?? "");
@@ -134,11 +137,24 @@ function CallContactPanel(props: CallContactButtonProps & { onClose: () => void
   const [conference, setConference] = useState<string | null>(null);
   const audio = useLazyTransport(transport, true);
 
+  // Every page of each status is read (25 per page) up to SESSION_PAGES pages; `capped` says the cap cut a status short.
+  const capped = useRef(false);
   const sessions = useG8Query(
     async (signal) => {
+      let cut = false;
       const lists = await Promise.all(
-        CALLABLE.map(async (status) => dataOf<{ sessions?: SessionOption[] }>(await g8Get("/voice/dialer/sessions", { status, page: 1, page_size: 25, user_email: userEmail }, { signal })).sessions ?? []),
+        CALLABLE.map(async (status) => {
+          const rows: SessionOption[] = [];
+          for (let page = 1; page <= SESSION_PAGES; page++) {
+            const got = dataOf<{ sessions?: SessionOption[] }>(await g8Get("/voice/dialer/sessions", { status, page, page_size: SESSION_PAGE, user_email: userEmail }, { signal })).sessions ?? [];
+            rows.push(...got);
+            if (got.length < SESSION_PAGE) return rows;
+          }
+          cut = true;
+          return rows;
+        }),
       );
+      capped.current = cut;
       return lists.flat();
     },
     [userEmail],
@@ -207,6 +223,7 @@ function CallContactPanel(props: CallContactButtonProps & { onClose: () => void
           {(sessions.data ?? []).map((s) => <option key={s.session_id} value={s.session_id}>{s.name || s.session_id} ({(s.status ?? "").toLowerCase()})</option>)}
         </select>
       ) : null}
+      {!sessionId ? <FirstNotice force={capped.current} shown={(sessions.data ?? []).length} limit={0} noun="sessions" /> : null}
       {!sessionId && sessions.data?.length === 0 ? (
         <p className="text-muted-foreground">No paused or completed session yet. Start one on the Dialer screen and pause it; the call is logged under it.</p>
       ) : null}