@graph8/sdk 0.370.0 → 0.374.0

package/blocks/deals/components/close-deal-dialog.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+/**
+ * DealActions: the header actions of one deal: "Close deal" (won or lost, with a reason) and "Move to pipeline".
+ * CloseDealDialog is the dialog behind the first one and can be mounted on its own.
+ *
+ * SDK operations, in order:
+ *   1. GET  /deals/close-reasons?kind=won|lost           (deals.listDealCloseReasons)   read  - the reasons the org keeps
+ *      POST /deals/close-reasons { kind, label }         (deals.createDealCloseReason)  write - add a reason while closing
+ *   2. PATCH /deals/{id} { stage_id, close_date, amount?, expected_revision }  (deals.updateDeal)  write - the close itself
+ *   3. POST /deals/{id}/notes { content }                (notes.createDealNote)         write - records the reason on the deal
+ *   4. PUT  /deals/{id}/pipeline { target_pipeline_id }  (deals.moveDealToPipeline)     write
+ * API GAP: no deal operation accepts a close reason (`closed_lost_reason` is read-only on the deal), so the chosen
+ * reason is saved as a note, "Closed lost. Reason: Price", right after the stage moves. If the move succeeded but the
+ * note failed, the dialog says so and retries only the note (the deal is never closed twice).
+ * A won deal needs a close date and an amount; the API also needs an owner. Date-only values are sent as YYYY-MM-DD.
+ */
+import { useState } from "react";
+import { Button, Dialog, DialogContent, DialogDescription, DialogTitle, Input, Label } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { g8Get, g8Patch, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { closedStageMarker, stageKind, type Deal, type Pipeline, type Stage } from "../lib/deals-types";
+import { reasonsOf } from "../lib/deal-extras";
+import { localToday } from "./pipeline-board";
+
+export interface CloseDealDialogProps {
+  deal: Deal;
+  /** The stages of the deal's pipeline. */
+  stages: Stage[];
+  open: boolean;
+  onClose: () => void;
+  /** Called once the deal is closed (and the reason recorded). */
+  onClosed?: () => void;
+}
+
+type Outcome = "won" | "lost";
+
+export function CloseDealDialog({ deal, stages, open, onClose, onClosed }: CloseDealDialogProps) {
+  const [outcome, setOutcome] = useState<Outcome>("won");
+  const [stageId, setStageId] = useState("");
+  const [date, setDate] = useState(deal.close_date?.slice(0, 10) ?? localToday());
+  const [amount, setAmount] = useState(deal.amount != null ? String(deal.amount) : "");
+  const [reasonId, setReasonId] = useState("");
+  const [newReason, setNewReason] = useState("");
+  // Retry-safe: once the stage move succeeded, a retry only records the reason.
+  const [moved, setMoved] = useState(false);
+  const targets = stages.filter((s) => stageKind(s) === outcome);
+  const stage = targets.find((s) => s.id === stageId) ?? targets[0];
+  const reasons = useG8Query(async (signal) => reasonsOf(await g8Get("/deals/close-reasons", { kind: outcome }, { signal })), [outcome], { enabled: open, key: ["deals", "close-reasons", outcome] });
+  const options = (reasons.data ?? []).filter((r) => !r.kind || r.kind === outcome);
+  const reason = options.find((r) => r.id === reasonId);
+
+  const addReason = useG8Mutation(async () => {
+    await g8Post("/deals/close-reasons", { kind: outcome, label: newReason.trim() });
+    const label = newReason.trim();
+    setNewReason("");
+    return label;
+  }, { invalidates: [["deals", "close-reasons"]], onSuccess: (label) => { void reasons.refetch().then((r) => { const found = r?.find((x) => x.label === label); if (found) setReasonId(found.id); }); } });
+
+  const close = useG8Mutation(async () => {
+    if (!moved) {
+      const body: Record<string, unknown> = { stage_id: stage?.id, close_date: date, expected_revision: deal.revision ?? undefined };
+      // Won always carries the amount (the API requires it); lost sends it only when it was changed.
+      if (amount !== "" && (outcome === "won" || Number(amount) !== deal.amount)) body.amount = Number(amount);
+      await g8Patch(`/deals/${encodeURIComponent(deal.id)}`, body);
+      setMoved(true);
+    }
+    if (reason) await g8Post(`/deals/${encodeURIComponent(deal.id)}/notes`, { content: `Closed ${outcome}. Reason: ${reason.label}` });
+  }, { invalidates: [["deals"]], onSuccess: () => { onClosed?.(); onClose(); } });
+
+  const valid = Boolean(stage) && Boolean(date) && (outcome !== "won" || amount !== "");
+  const marker = closedStageMarker(close.error);
+  return (
+    <Dialog open={open} onOpenChange={(o) => { if (!o && !close.loading) onClose(); }}>
+      <DialogContent>
+        <DialogTitle>Close "{deal.name ?? "this deal"}"</DialogTitle>
+        <DialogDescription>Moves the deal to a closed stage. The close date is required, and the amount for a won deal.</DialogDescription>
+        <form className="space-y-3" onSubmit={(e) => { e.preventDefault(); if (valid) void close.mutate(undefined); }}>
+          <div className="space-y-1">
+            <Label htmlFor="close-outcome">Outcome</Label>
+            <select id="close-outcome" className="h-9 w-full rounded-md border bg-background px-2 text-sm" disabled={moved} value={outcome} onChange={(e) => { setOutcome(e.target.value as Outcome); setStageId(""); setReasonId(""); }}>
+              <option value="won">Won</option>
+              <option value="lost">Lost</option>
+            </select>
+          </div>
+          {targets.length === 0 ? <p className="text-sm text-muted-foreground">This pipeline has no {outcome} stage. Add one under Pipeline settings (stage type "Closed {outcome}").</p> : null}
+          {targets.length > 1 ? (
+            <div className="space-y-1">
+              <Label htmlFor="close-stage">Stage</Label>
+              <select id="close-stage" className="h-9 w-full rounded-md border bg-background px-2 text-sm" disabled={moved} value={stage?.id ?? ""} onChange={(e) => setStageId(e.target.value)}>
+                {targets.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+              </select>
+            </div>
+          ) : null}
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div className="space-y-1"><Label htmlFor="close-date">Close date</Label><Input id="close-date" type="date" disabled={moved} value={date} onChange={(e) => setDate(e.target.value)} /></div>
+            <div className="space-y-1"><Label htmlFor="close-amount">Amount{outcome === "won" ? "" : " (optional)"}</Label><Input id="close-amount" type="number" min={0} disabled={moved} value={amount} onChange={(e) => setAmount(e.target.value)} /></div>
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="close-reason">{outcome === "won" ? "Why did you win?" : "Why was it lost?"}</Label>
+            <select id="close-reason" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={reasonId} onChange={(e) => setReasonId(e.target.value)}>
+              <option value="">{reasons.loading ? "Loading reasons" : "No reason"}</option>
+              {options.map((r) => <option key={r.id} value={r.id}>{r.label}</option>)}
+            </select>
+            {reasons.error ? <ApiError error={reasons.error} compact title="Could not load reasons" onRetry={() => void reasons.refetch()} /> : null}
+            <div className="flex gap-2">
+              <Input aria-label="New reason" placeholder="Add a reason" value={newReason} onChange={(e) => setNewReason(e.target.value)} />
+              <Button type="button" variant="outline" loading={addReason.loading} disabled={!newReason.trim()} onClick={() => void addReason.mutate(undefined)}>Add reason</Button>
+            </div>
+            {addReason.error ? <ApiError error={addReason.error} title="Could not add the reason" /> : null}
+          </div>
+          {moved && close.error ? <p role="status" className="text-sm text-muted-foreground">The deal is closed, but the reason was not saved. Try again to save only the reason.</p> : null}
+          {close.error ? <ApiError error={marker ? new Error(`The API needs more before this deal can close (${marker.replace(/_/g, " ")}).`) : close.error} title={moved ? "Could not save the reason" : "Could not close the deal"} /> : null}
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" disabled={close.loading} onClick={onClose}>Cancel</Button>
+            <Button type="submit" loading={close.loading} disabled={!valid}>{moved ? "Save reason" : `Close as ${outcome}`}</Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export interface DealActionsProps {
+  deal: Deal;
+  pipelines: Pipeline[];
+  onChanged?: () => void;
+}
+
+export function DealActions({ deal, pipelines, onChanged }: DealActionsProps) {
+  const [closing, setClosing] = useState(false);
+  const [moving, setMoving] = useState(false);
+  const [target, setTarget] = useState("");
+  const current = pipelines.find((p) => p.id === deal.pipeline_id);
+  const stages = current?.stages ?? [];
+  const isOpen = stageKind(stages.find((s) => s.id === deal.stage_id)) === "open";
+  const others = pipelines.filter((p) => p.id !== deal.pipeline_id);
+  const move = useG8Mutation(() => g8Put(`/deals/${encodeURIComponent(deal.id)}/pipeline`, { target_pipeline_id: target }), {
+    invalidates: [["deals"]],
+    onSuccess: () => { setMoving(false); setTarget(""); onChanged?.(); },
+  });
+  return (
+    <>
+      {isOpen && stages.length > 0 ? <Button size="sm" onClick={() => setClosing(true)}>Close deal</Button> : null}
+      {others.length > 0 ? <Button size="sm" variant="outline" onClick={() => setMoving(true)}>Move to pipeline</Button> : null}
+      {closing ? <CloseDealDialog key={deal.id} deal={deal} stages={stages} open onClose={() => setClosing(false)} onClosed={onChanged} /> : null}
+      <Dialog open={moving} onOpenChange={(o) => { if (!o && !move.loading) setMoving(false); }}>
+        <DialogContent>
+          <DialogTitle>Move "{deal.name ?? "this deal"}" to another pipeline</DialogTitle>
+          <DialogDescription>The API places it in a stage of the pipeline you pick; check the board afterwards.</DialogDescription>
+          <div className="space-y-1">
+            <Label htmlFor="move-pipeline">Pipeline</Label>
+            <select id="move-pipeline" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={target} onChange={(e) => setTarget(e.target.value)}>
+              <option value="">Choose a pipeline</option>
+              {others.map((p) => <option key={p.id} value={p.id}>{p.name}</option>)}
+            </select>
+          </div>
+          {move.error ? <ApiError error={move.error} title="Could not move the deal" /> : null}
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="outline" disabled={move.loading} onClick={() => setMoving(false)}>Cancel</Button>
+            <Button type="button" loading={move.loading} disabled={!target} onClick={() => void move.mutate(undefined)}>Move deal</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/blocks/deals/components/create-deal-button.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+/**
+ * CreateDealButton: "Create deal" for one contact. Opens a sheet with the deal form already filled in from the
+ * contact and their company: the deal is linked to the contact (the API derives the company from its contacts),
+ * named "<company> - <contact>", and owned by the API key's person (or a member you pick). Use it in
+ * `ContactsScreen.renderDetailActions`:
+ *   <CreateDealButton contactId={c.id} onCreated={(dealId) => router.push(`/deals?id=${dealId}`)} />
+ *
+ * SDK operations, in order:
+ *   1. getContact          GET  /contacts/{contact_id}          (read)   the name and company shown and used as the default deal name
+ *   2. getMyTeamMember     GET  /team-members/me                (read)   the owner; listTeamMembers (read) when the key has no person
+ *   3. listPipelines       GET  /deals/pipelines                (read)   the stage picker
+ *   4. createDeal          POST /deals                          (write)  once, retry-safe (a second save edits the same deal)
+ * A company that already has a deal answers 409; the sheet then offers "Create another deal for this company".
+ * Nothing here is billable, external or destructive.
+ */
+
+import { useState } from "react";
+import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Skeleton } from "@graph8/sdk/ui";
+import { Handshake } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useDefaultOwner } from "../hooks/use-default-owner";
+import { dataOf } from "../lib/deals-types";
+import { DealDetail } from "./deal-detail";
+
+export interface CreateDealButtonProps {
+  /** The CRM contact the deal is for. */
+  contactId: number;
+  /** Called with the new deal's id after it was created (route to your deals screen). */
+  onCreated?: (dealId: string) => void;
+  label?: string;
+  variant?: "default" | "outline" | "secondary" | "ghost";
+  size?: "default" | "sm";
+}
+
+interface ContactBits {
+  first_name?: string | null;
+  last_name?: string | null;
+  full_name?: string | null;
+  work_email?: string | null;
+  company_name?: string | null;
+  company?: { name?: string | null; domain?: string | null } | null;
+}
+
+export const contactLabel = (c: ContactBits | undefined | null, id: number): string =>
+  c?.full_name?.trim() || [c?.first_name, c?.last_name].filter(Boolean).join(" ").trim() || c?.work_email || `Contact ${id}`;
+export const companyLabelOf = (c: ContactBits | undefined | null): string => (c?.company?.name || c?.company_name || "").trim();
+
+function Form({ contactId, onCreated }: { contactId: number; onCreated?: (dealId: string) => void }) {
+  const owner = useDefaultOwner();
+  const contact = useG8Query(async (signal) => dataOf<ContactBits>(await g8Get(`/contacts/${contactId}`, undefined, { signal })), [contactId], { key: ["contacts", "deal-prefill", contactId] });
+  const [ownerId, setOwnerId] = useState<string | null>(null);
+  const [another, setAnother] = useState(false);
+  if (owner.loading || (contact.loading && !contact.data)) return <Skeleton className="h-24 w-full" aria-label="Loading the deal form" />;
+  if (contact.error) return <ApiError error={contact.error} title="Could not load the contact" onRetry={() => void contact.refetch()} />;
+  const effective = ownerId ?? owner.defaultOwner?.id ?? "";
+  if (!effective) return <ApiError error={owner.error ?? new Error("No team member found to own this deal.")} title="A deal needs an owner" onRetry={() => void owner.reload()} />;
+  const company = companyLabelOf(contact.data);
+  const person = contactLabel(contact.data, contactId);
+  return (
+    <div className="space-y-3">
+      <dl className="grid grid-cols-[auto,1fr] gap-x-3 gap-y-1 rounded-md border bg-muted/40 p-3 text-sm">
+        <dt className="text-muted-foreground">Contact</dt>
+        <dd className="font-medium">{person}</dd>
+        <dt className="text-muted-foreground">Company</dt>
+        <dd className="font-medium">{company || "None on this contact"}</dd>
+      </dl>
+      {owner.source === "first-member" ? (
+        <div className="space-y-1">
+          <label htmlFor="create-deal-owner" className="text-sm font-medium">Owner</label>
+          <select id="create-deal-owner" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={effective} onChange={(e) => setOwnerId(e.target.value)}>
+            {owner.owners.map((o) => <option key={o.id} value={o.id}>{o.name}{o.email && o.email !== o.name ? ` (${o.email})` : ""}</option>)}
+          </select>
+          <p className="text-xs text-muted-foreground">This key has no person of its own, so choose who owns the deal.</p>
+        </div>
+      ) : null}
+      <label className="flex items-center gap-2 text-sm">
+        <input type="checkbox" checked={another} onChange={(e) => setAnother(e.target.checked)} />
+        Create another deal for this company
+      </label>
+      <p className="text-xs text-muted-foreground">Leave this off and a company that already has a deal is refused, so you never create a duplicate by accident.</p>
+      <DealDetail ownerId={effective} contactIds={[contactId]} allowDuplicate={another} defaultName={[company, person].filter(Boolean).join(" - ")} onSaved={(deal) => { if (deal.id) onCreated?.(deal.id); }} />
+    </div>
+  );
+}
+
+export function CreateDealButton({ contactId, onCreated, label = "Create deal", variant = "outline", size = "sm" }: CreateDealButtonProps) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button size={size} variant={variant} onClick={() => setOpen(true)}>
+        <Handshake className="mr-1 size-4" aria-hidden />
+        {label}
+      </Button>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>Create deal</SheetTitle>
+            <SheetDescription>The deal is linked to this contact and their company.</SheetDescription>
+          </SheetHeader>
+          <div className="p-4">{open ? <Form key={contactId} contactId={contactId} onCreated={onCreated} /> : null}</div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}

package/blocks/deals/components/deal-contacts-editor.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+/**
+ * DealContactsEditor: the buying committee of one deal. Add a contact (with an optional role), change a role, make
+ * a contact the primary one, and remove a contact. The list itself is DealContactsTab; open a row for the full CRM record.
+ *
+ * SDK operations, in order:
+ *   1. GET    /deals/{id}                              (deals.getDeal)               read  - the contacts, roles and primary (via DealContactsTab)
+ *   2. GET    /contacts?name=                          (crm contacts.listContacts)   read  - find a contact to add
+ *   3. POST   /deals/{id}/contacts { person_id, role } (deals.addDealContact)        write - the contact must work at the deal's company
+ *   4. PUT    /deals/{id}/contacts/{contact_id} { role } (deals.setDealContactRole)  write - null clears the role
+ *   5. PUT    /deals/{id}/contacts/{person_id}/primary (deals.setPrimaryDealContact) write
+ *   6. DELETE /deals/{id}/contacts/{person_id}         (deals.removeDealContact)     DESTRUCTIVE -> ConfirmSpendDialog first
+ * Roles are champion, decision_maker, influencer, blocker, coach and end_user. A deal keeps at least one contact:
+ * the API refuses to remove the last one and the message is shown.
+ */
+import { useState } from "react";
+import { Search } from "lucide-react";
+import { Button, Input } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
+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 { useDebouncedValue } from "@/g8/crm/hooks/use-debounced";
+import { contactName, type ContactRecord } from "@/g8/crm/lib/crm-types";
+import { dataOf, type Deal, type DealContact } from "../lib/deals-types";
+import { CONTACT_ROLES, roleLabel } from "../lib/deal-extras";
+import { DealContactsTab } from "./deal-related";
+
+export interface DealContactsEditorProps {
+  dealId: string;
+  /** Called after any change, so a screen can refresh its numbers. */
+  onChanged?: () => void;
+  /** Open a contact in your contacts screen (see DealContactsTab). */
+  onOpenContact?: (contactId: number) => void;
+  /** Open a contact's company in your companies screen. */
+  onOpenCompany?: (companyId: number) => void;
+  className?: string;
+}
+
+function AddContact({ dealId, existing, onAdded }: { dealId: string; existing: ReadonlySet<number>; onAdded: () => void }) {
+  const [text, setText] = useState("");
+  const [role, setRole] = useState("");
+  const term = useDebouncedValue(text.trim());
+  const found = useG8Query(async (signal) => (await g8Get<ContactRecord[]>("/contacts", { name: term, limit: 8, page: 1 }, { signal })).data ?? [], [term], { enabled: term.length > 1 });
+  const add = useG8Mutation(
+    (c: ContactRecord) => g8Post(`/deals/${encodeURIComponent(dealId)}/contacts`, { person_id: String(c.id), ...(role ? { role } : {}) }),
+    { invalidates: [["deals", "detail", dealId], ["deals", "list"]], onSuccess: () => { setText(""); setRole(""); onAdded(); } },
+  );
+  const choices = (found.data ?? []).filter((c) => !existing.has(c.id));
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap items-end gap-2">
+        <div className="relative min-w-48 flex-1">
+          <Search className="pointer-events-none absolute left-2 top-2.5 size-4 text-muted-foreground" aria-hidden />
+          <Input aria-label="Add a contact to this deal" className="pl-8" placeholder="Search contacts to add" value={text} onChange={(e) => setText(e.target.value)} />
+        </div>
+        <select aria-label="Role for the new contact" className="h-9 rounded-md border bg-background px-2 text-sm" value={role} onChange={(e) => setRole(e.target.value)}>
+          <option value="">No role</option>
+          {CONTACT_ROLES.map((r) => <option key={r} value={r}>{roleLabel(r)}</option>)}
+        </select>
+      </div>
+      {add.error ? <ApiError error={add.error} title="Could not add the contact" /> : null}
+      {found.error ? <ApiError error={found.error} title="Could not search contacts" /> : null}
+      {term.length > 1 && !found.loading && !found.error && choices.length === 0 ? <p className="text-xs text-muted-foreground">No other contacts match.</p> : null}
+      <ul className="divide-y rounded-md border empty:hidden" aria-label="Contacts to add">
+        {choices.map((c) => (
+          <li key={c.id}>
+            <button type="button" className="flex w-full items-center gap-2 p-2 text-left text-sm hover:bg-muted disabled:opacity-60" disabled={add.loading} aria-label={`Add ${contactName(c)}`} onClick={() => void add.mutate(c)}>
+              <EntityAvatar name={contactName(c)} size="sm" />
+              <span className="font-medium">{contactName(c)}</span>
+              <span className="text-xs text-muted-foreground">{[c.job_title, c.company_name].filter(Boolean).join(" at ")}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export function DealContactsEditor({ dealId, onChanged, onOpenContact, onOpenCompany, className }: DealContactsEditorProps) {
+  const base = `/deals/${encodeURIComponent(dealId)}/contacts`;
+  const [busyId, setBusyId] = useState<number | null>(null);
+  const [removing, setRemoving] = useState<DealContact | null>(null);
+  // Same query key as DealContactsTab: one request, and the ids already on the deal are hidden from the search results.
+  const deal = useG8Query(async (signal) => dataOf<Deal>(await g8Get(`/deals/${encodeURIComponent(dealId)}`, undefined, { signal })), [dealId], { key: ["deals", "detail", dealId] });
+  const existing = new Set((deal.data?.contacts ?? []).map((c) => c.id));
+  const done = () => onChanged?.();
+  const refresh = [["deals", "detail", dealId], ["deals", "list"]] as const;
+
+  const role = useG8Mutation(async (v: { contact: DealContact; role: string }) => {
+    setBusyId(v.contact.id);
+    try { await g8Put(`${base}/${v.contact.id}`, { role: v.role || null }); } finally { setBusyId(null); }
+  }, { invalidates: refresh, onSuccess: done });
+  const primary = useG8Mutation(async (c: DealContact) => {
+    setBusyId(c.id);
+    try { await g8Put(`${base}/${encodeURIComponent(String(c.id))}/primary`); } finally { setBusyId(null); }
+  }, { invalidates: refresh, onSuccess: done });
+  const remove = useG8Mutation(async (c: DealContact) => {
+    setBusyId(c.id);
+    try { await g8Delete(`${base}/${encodeURIComponent(String(c.id))}`); } finally { setBusyId(null); }
+  }, { invalidates: refresh, onSuccess: () => { setRemoving(null); done(); }, onError: () => setRemoving(null) });
+  const failure = role.error ?? primary.error ?? remove.error;
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      <AddContact dealId={dealId} existing={existing} onAdded={done} />
+      {failure ? <ApiError error={failure} title="That contact change failed" /> : null}
+      <DealContactsTab
+        dealId={dealId}
+        onOpenContact={onOpenContact}
+        onOpenCompany={onOpenCompany}
+        renderContactActions={(c, deal) => {
+          const isPrimary = deal.primary_contact?.id === c.id;
+          const name = c.name || c.email || `contact ${c.id}`;
+          const options = c.role && !CONTACT_ROLES.includes(c.role as (typeof CONTACT_ROLES)[number]) ? [c.role, ...CONTACT_ROLES] : CONTACT_ROLES;
+          return (
+            <span className="flex shrink-0 items-center gap-1">
+              <select aria-label={`Role of ${name}`} className="h-8 rounded-md border bg-background px-1 text-xs" disabled={busyId === c.id} value={c.role ?? ""} onChange={(e) => void role.mutate({ contact: c, role: e.target.value })}>
+                <option value="">No role</option>
+                {options.map((r) => <option key={r} value={r}>{roleLabel(r)}</option>)}
+              </select>
+              <Button size="sm" variant="ghost" disabled={isPrimary || busyId === c.id} aria-label={`Make ${name} primary`} onClick={() => void primary.mutate(c)}>{isPrimary ? "Primary" : "Make primary"}</Button>
+              <Button size="sm" variant="ghost" disabled={busyId === c.id} aria-label={`Remove ${name}`} onClick={() => setRemoving(c)}>Remove</Button>
+            </span>
+          );
+        }}
+      />
+      <ConfirmSpendDialog open={removing != null} tier="destructive" title={`Remove ${removing?.name || removing?.email || "this contact"} from the deal?`} description="The contact stays in your CRM; only the link to this deal is removed." confirmLabel="Remove contact" affected={1} confirming={remove.loading} onConfirm={() => removing && void remove.mutate(removing)} onCancel={() => setRemoving(null)} />
+    </div>
+  );
+}

package/blocks/deals/components/deal-detail.tsx

@@ -33,6 +33,8 @@ export interface DealDetailProps {
   pipelineId?: string;
   /** Create mode: allow a second deal for a company that already has one (the API refuses it with 409 otherwise). */
   allowDuplicate?: boolean;
+  /** Create mode: the name the form starts with (for example "Acme - Maya Chen"). Typing replaces it. */
+  defaultName?: string;
   onSaved?: (deal: Deal) => void;
   onDeleted?: (dealId: string) => void;
   children?: ReactNode;
@@ -53,10 +55,10 @@ function fromDeal(d: Deal): Form {
   return { name: d.name ?? "", amount: d.amount != null ? String(d.amount) : "", closeDate: d.close_date?.slice(0, 10) ?? "", stageId: d.stage_id ?? "", description: d.description ?? "" };
 }
 
-export function DealDetail({ dealId, ownerId, contactIds = [], pipelineId, allowDuplicate, onSaved, onDeleted, children, className }: DealDetailProps) {
+export function DealDetail({ dealId, ownerId, contactIds = [], pipelineId, allowDuplicate, defaultName, onSaved, onDeleted, children, className }: DealDetailProps) {
   const brand = useBrand();
   const { pipelines, defaultPipeline } = usePipelines();
-  const [form, setForm] = useState<Form>(EMPTY);
+  const [form, setForm] = useState<Form>({ ...EMPTY, name: defaultName ?? "" });
   const [confirmDelete, setConfirmDelete] = useState(false);
   // Retry-safe create: once POST /deals succeeded, further saves edit that deal instead of creating another.
   const [createdId, setCreatedId] = useState<string | null>(null);
@@ -74,7 +76,7 @@ export function DealDetail({ dealId, ownerId, contactIds = [], pipelineId, allow
   const dirty = useRef(false);
   // A different deal (or create mode again) must not show the previous one's fields. Declared BEFORE the
   // seeding effect so that, when the record is already cached, the reset runs first and the seed wins.
-  useEffect(() => { dirty.current = false; setForm(EMPTY); setCreatedId(null); setCreatedRevision(null); setConfirmDelete(false); }, [dealId]);
+  useEffect(() => { dirty.current = false; setForm({ ...EMPTY, name: dealId ? "" : defaultName ?? "" }); setCreatedId(null); setCreatedRevision(null); setConfirmDelete(false); }, [dealId]);
   useEffect(() => { if (deal.data && !dirty.current) setForm(fromDeal(deal.data)); }, [deal.data]);
 
   const pipeline = pipelines.find((p) => p.id === (deal.data?.pipeline_id ?? pipelineId)) ?? defaultPipeline;
@@ -128,14 +130,14 @@ export function DealDetail({ dealId, ownerId, contactIds = [], pipelineId, allow
 
       {d ? (
         <section aria-label="Contacts" className="space-y-1 text-sm">
-          <h3 className="font-semibold">Contacts ({d.contact_count ?? d.contacts?.length ?? 0})</h3>
+          <h3 className="font-medium">Contacts ({d.contact_count ?? d.contacts?.length ?? 0})</h3>
           {(d.contacts ?? []).map((c) => <p key={c.id}>{c.name ?? c.email}{c.role ? ` · ${c.role}` : ""}{d.primary_contact?.id === c.id ? " (primary)" : ""}</p>)}
           <p className="text-muted-foreground">Owner: {d.owner_name ?? d.owner_email ?? "none"} · {formatMoney(d.amount, d.currency)}</p>
         </section>
       ) : null}
       {dealId ? (
         <section aria-label="Stage history" className="space-y-1 text-sm">
-          <h3 className="font-semibold">Stage history</h3>
+          <h3 className="font-medium">Stage history</h3>
           {history.error ? <ApiError error={history.error} title="Could not load history" onRetry={() => void history.refetch()} /> : null}
           {(history.data ?? []).length === 0 && !history.loading ? <p className="text-muted-foreground">No stage changes yet.</p> : null}
           {(history.data ?? []).map((h, i) => <p key={i}>{h.from_stage_name ?? "New"} to {h.to_stage_name ?? "unknown"} <span className="text-muted-foreground">{h.changed_at ?? h.created_at ?? ""}</span></p>)}

package/blocks/deals/components/deal-filters.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+/**
+ * DealFilterBar: the deal list filters beside the search box: owner, stage, outcome, stale, activity, close-date
+ * range and "no contact". It only edits a DealFilterState; `filterQuery(state)` turns that into the `usePipelineDeals`
+ * filters (GET /deals owner_id, stage_id, outcome, stale_before, has_activity, close_after, close_before, has_contact).
+ *
+ * SDK operations: none directly (the owners come from the deals block's useDefaultOwner: GET /team-members).
+ * Dates are date-only (YYYY-MM-DD); the "to" date is inclusive, the API's close_before is exclusive, so
+ * `filterQuery` adds one day in UTC.
+ */
+import { Button } from "@graph8/sdk/ui";
+import { NO_FILTERS, filtersActive, type DealFilterState } from "../lib/deal-extras";
+import type { Stage } from "../lib/deals-types";
+import type { OwnerOption } from "../hooks/use-default-owner";
+
+export interface DealFilterBarProps {
+  value: DealFilterState;
+  onChange: (next: DealFilterState) => void;
+  stages: Stage[];
+  owners: OwnerOption[];
+  className?: string;
+}
+
+const SELECT = "h-9 rounded-md border bg-background px-2 text-sm";
+const DATE = "h-9 rounded-md border bg-background px-2 text-sm";
+
+export function DealFilterBar({ value, onChange, stages, owners, className }: DealFilterBarProps) {
+  const set = <K extends keyof DealFilterState>(key: K, v: DealFilterState[K]) => onChange({ ...value, [key]: v });
+  return (
+    <div className={`flex flex-wrap items-center gap-2 ${className ?? ""}`} role="group" aria-label="Deal filters">
+      <select aria-label="Filter by owner" className={SELECT} value={value.ownerId} onChange={(e) => set("ownerId", e.target.value)}>
+        <option value="">Any owner</option>
+        {owners.map((o) => <option key={o.id} value={o.id}>{o.name}</option>)}
+      </select>
+      <select aria-label="Filter by stage" className={SELECT} value={value.stageId} onChange={(e) => set("stageId", e.target.value)}>
+        <option value="">Any stage</option>
+        {stages.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
+      </select>
+      <select aria-label="Filter by outcome" className={SELECT} value={value.outcome} onChange={(e) => set("outcome", e.target.value as DealFilterState["outcome"])}>
+        <option value="">Open, won and lost</option>
+        <option value="open">Open</option>
+        <option value="won">Won</option>
+        <option value="lost">Lost</option>
+      </select>
+      <select aria-label="Filter by staleness" className={SELECT} value={value.staleDays} onChange={(e) => set("staleDays", e.target.value as DealFilterState["staleDays"])}>
+        <option value="">Any activity age</option>
+        {(["7", "14", "30", "60", "90"] as const).map((d) => <option key={d} value={d}>Stale {d}+ days</option>)}
+      </select>
+      <select aria-label="Filter by activity" className={SELECT} value={value.activity} onChange={(e) => set("activity", e.target.value as DealFilterState["activity"])}>
+        <option value="">With or without activity</option>
+        <option value="yes">Has activity</option>
+        <option value="no">No activity</option>
+      </select>
+      <label className="flex items-center gap-1 text-xs text-muted-foreground">Closes from
+        <input aria-label="Close date from" type="date" className={DATE} value={value.closeFrom} max={value.closeTo || undefined} onChange={(e) => set("closeFrom", e.target.value)} />
+      </label>
+      <label className="flex items-center gap-1 text-xs text-muted-foreground">to
+        <input aria-label="Close date to" type="date" className={DATE} value={value.closeTo} min={value.closeFrom || undefined} onChange={(e) => set("closeTo", e.target.value)} />
+      </label>
+      <label className="flex items-center gap-1 text-sm"><input type="checkbox" checked={value.orphaned} onChange={(e) => set("orphaned", e.target.checked)} />No contact</label>
+      {filtersActive(value) ? <Button size="sm" variant="ghost" onClick={() => onChange(NO_FILTERS)}>Clear filters</Button> : null}
+    </div>
+  );
+}