feat(proxies): CM-9 UI — ProxyCard on client, interest, and yacht detail pages

- shared ProxyCard (view/add/edit/remove point-of-contact) reading each entity's
  /[id]/proxy sub-resource; permission-gated on the entity's edit right
- wired into the client overview, interest overview, and yacht overview tabs

Completes CM-9. tsc clean, lint 0 errors, prod build green, 1638 vitest pass.
Comms send-side wiring (route EOIs/emails through resolveEffectiveProxy) is a
deliberate follow-up — the resolver + data are ready for it.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/clients/client-tabs.tsx

@@ -11,6 +11,7 @@ import { RemindersInline } from '@/components/reminders/reminders-inline';
 import { primaryTimezoneFor } from '@/lib/i18n/timezones';
 import { InlineTagEditor } from '@/components/shared/inline-tag-editor';
 import { NotesList } from '@/components/shared/notes-list';
+import { ProxyCard } from '@/components/shared/proxy-card';
 import type { CountryCode } from '@/lib/i18n/countries';
 import { ClientInterestsTab } from '@/components/clients/client-interests-tab';
 import { ClientPipelineSummary } from '@/components/clients/client-pipeline-summary';
@@ -156,6 +157,9 @@ function OverviewTab({
           <ClientPipelineSummary clientId={clientId} variant="panel" />
         </div>
 
+        {/* CM-9: point-of-contact (default level for the client). */}
+        <ProxyCard entityType="client" entityId={clientId} />
+
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           {/* Personal Info */}
           <div className="space-y-1">

src/components/interests/interest-tabs.tsx

@@ -19,6 +19,7 @@ import {
   AccordionTrigger,
 } from '@/components/ui/accordion';
 import { NotesList } from '@/components/shared/notes-list';
+import { ProxyCard } from '@/components/shared/proxy-card';
 import { InlineEditableField } from '@/components/shared/inline-editable-field';
 import { FieldHistoryProvider, FieldHistoryIcon } from '@/components/shared/field-history';
 import { ClientChannelEditor } from '@/components/clients/client-channel-editor';
@@ -1133,6 +1134,9 @@ function OverviewTab({
           archivedAt={null}
         />
 
+        {/* CM-9: per-deal point-of-contact (overrides the client's default). */}
+        <ProxyCard entityType="interest" entityId={interestId} />
+
         {/* Qualification checklist  -  surfaces the port's per-port criteria so
           the rep can mark each one confirmed before the deal advances out
           of 'enquiry'. Hidden when the port has no enabled criteria. */}

src/components/shared/proxy-card.tsx

@@ -0,0 +1,249 @@
+'use client';
+
+import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Mail, Phone, UserCheck, UserPlus } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { usePermissions } from '@/hooks/use-permissions';
+import { apiFetch } from '@/lib/api/client';
+import { toastError } from '@/lib/api/toast-error';
+
+type ProxyEntityType = 'client' | 'interest' | 'yacht';
+
+interface Proxy {
+  id: string;
+  name: string;
+  email: string | null;
+  phone: string | null;
+  relationship: string | null;
+  notes: string | null;
+}
+
+const RESOURCE: Record<ProxyEntityType, 'clients' | 'interests' | 'yachts'> = {
+  client: 'clients',
+  interest: 'interests',
+  yacht: 'yachts',
+};
+
+/**
+ * CM-9: point-of-contact ("proxy") panel for a client / interest / yacht detail
+ * page. Reads + edits the per-entity proxy via the entity's sub-resource route.
+ */
+export function ProxyCard({
+  entityType,
+  entityId,
+}: {
+  entityType: ProxyEntityType;
+  entityId: string;
+}) {
+  const { can } = usePermissions();
+  const canManage = can(RESOURCE[entityType], 'edit');
+  const qc = useQueryClient();
+  const base = `/api/v1/${RESOURCE[entityType]}/${entityId}/proxy`;
+  const queryKey = ['proxy', entityType, entityId];
+
+  const { data } = useQuery<{ data: Proxy | null }>({
+    queryKey,
+    queryFn: () => apiFetch(base),
+  });
+  const proxy = data?.data ?? null;
+
+  const [open, setOpen] = useState(false);
+
+  const remove = useMutation({
+    mutationFn: () => apiFetch(base, { method: 'DELETE' }),
+    onSuccess: () => {
+      toast.success('Point of contact removed');
+      qc.invalidateQueries({ queryKey });
+    },
+    onError: (err) => toastError(err),
+  });
+
+  return (
+    <div className="rounded-xl border border-border bg-card p-4">
+      <div className="mb-2 flex items-center justify-between">
+        <h3 className="inline-flex items-center gap-1.5 text-sm font-semibold text-foreground">
+          <UserCheck className="h-4 w-4 text-muted-foreground" aria-hidden />
+          Point of contact
+        </h3>
+        {canManage ? (
+          <Button variant="ghost" size="sm" className="h-7" onClick={() => setOpen(true)}>
+            {proxy ? (
+              'Edit'
+            ) : (
+              <>
+                <UserPlus className="me-1 h-3.5 w-3.5" aria-hidden />
+                Add
+              </>
+            )}
+          </Button>
+        ) : null}
+      </div>
+
+      {proxy ? (
+        <div className="space-y-1 text-sm">
+          <p className="font-medium text-foreground">
+            {proxy.name}
+            {proxy.relationship ? (
+              <span className="ms-2 text-xs font-normal text-muted-foreground">
+                {proxy.relationship}
+              </span>
+            ) : null}
+          </p>
+          {proxy.email ? (
+            <a
+              href={`mailto:${proxy.email}`}
+              className="inline-flex items-center gap-1.5 text-muted-foreground hover:text-foreground"
+            >
+              <Mail className="h-3.5 w-3.5" aria-hidden />
+              {proxy.email}
+            </a>
+          ) : null}
+          {proxy.phone ? (
+            <p className="inline-flex items-center gap-1.5 text-muted-foreground">
+              <Phone className="h-3.5 w-3.5" aria-hidden />
+              {proxy.phone}
+            </p>
+          ) : null}
+          {proxy.notes ? <p className="text-xs text-muted-foreground">{proxy.notes}</p> : null}
+          {canManage ? (
+            <button
+              type="button"
+              onClick={() => remove.mutate()}
+              disabled={remove.isPending}
+              className="pt-1 text-xs text-destructive hover:underline disabled:opacity-50"
+            >
+              Remove
+            </button>
+          ) : null}
+        </div>
+      ) : (
+        <p className="text-sm text-muted-foreground">
+          No proxy set — comms go to the {entityType} directly.
+        </p>
+      )}
+
+      {open ? (
+        <ProxyDialog
+          open={open}
+          onOpenChange={setOpen}
+          base={base}
+          existing={proxy}
+          entityType={entityType}
+          onSaved={() => qc.invalidateQueries({ queryKey })}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function ProxyDialog({
+  open,
+  onOpenChange,
+  base,
+  existing,
+  entityType,
+  onSaved,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  base: string;
+  existing: Proxy | null;
+  entityType: ProxyEntityType;
+  onSaved: () => void;
+}) {
+  const [name, setName] = useState(existing?.name ?? '');
+  const [email, setEmail] = useState(existing?.email ?? '');
+  const [phone, setPhone] = useState(existing?.phone ?? '');
+  const [relationship, setRelationship] = useState(existing?.relationship ?? '');
+  const [notes, setNotes] = useState(existing?.notes ?? '');
+  // State seeds from `existing` at mount; the dialog is remounted on each open
+  // (the parent renders it conditionally), so no reseed effect is needed.
+
+  const save = useMutation({
+    mutationFn: () =>
+      apiFetch(base, {
+        method: 'PUT',
+        body: { name: name.trim(), email, phone, relationship, notes },
+      }),
+    onSuccess: () => {
+      toast.success('Point of contact saved');
+      onSaved();
+      onOpenChange(false);
+    },
+    onError: (err) => toastError(err),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Point of contact</DialogTitle>
+          <DialogDescription>
+            A person who acts as the point of contact for this {entityType}. Used to address
+            outbound comms.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="space-y-1.5">
+            <Label htmlFor="proxy-name">Name</Label>
+            <Input
+              id="proxy-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              autoFocus
+            />
+          </div>
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <div className="space-y-1.5">
+              <Label htmlFor="proxy-email">Email</Label>
+              <Input
+                id="proxy-email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="proxy-phone">Phone</Label>
+              <Input id="proxy-phone" value={phone} onChange={(e) => setPhone(e.target.value)} />
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="proxy-rel">Relationship (optional)</Label>
+            <Input
+              id="proxy-rel"
+              placeholder="e.g. broker, spouse, assistant, legal"
+              value={relationship}
+              onChange={(e) => setRelationship(e.target.value)}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="proxy-notes">Notes (optional)</Label>
+            <Input id="proxy-notes" value={notes} onChange={(e) => setNotes(e.target.value)} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={() => save.mutate()} disabled={!name.trim() || save.isPending}>
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/yachts/yacht-tabs.tsx

@@ -12,6 +12,7 @@ import { TenancyCreateDialog } from '@/components/tenancies/tenancy-create-dialo
 import { InlineEditableField } from '@/components/shared/inline-editable-field';
 import { FieldHistoryProvider, FieldHistoryIcon } from '@/components/shared/field-history';
 import { InlineTagEditor } from '@/components/shared/inline-tag-editor';
+import { ProxyCard } from '@/components/shared/proxy-card';
 import { NotesList } from '@/components/shared/notes-list';
 import { EntityActivityFeed } from '@/components/shared/entity-activity-feed';
 import { TenancyList, type TenancyRow } from '@/components/tenancies/tenancy-list';
@@ -176,6 +177,10 @@ function OverviewTab({
   return (
     <FieldHistoryProvider scope={{ type: 'yacht', id: yachtId }}>
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* CM-9: per-vessel point-of-contact (overrides interest + client). */}
+        <div className="md:col-span-2">
+          <ProxyCard entityType="yacht" entityId={yachtId} />
+        </div>
         {/* Identity */}
         <div className="space-y-1">
           <h3 className="text-sm font-medium mb-2">Identity</h3>