feat(platform): residential module + admin UI + reliability fixes

Residential platform
- New schema: residentialClients, residentialInterests (separate from
  marina/yacht clients) with migration 0010
- Service layer with CRUD + audit + sockets + per-port portal toggle
- v1 + public API routes (/api/v1/residential/*, /api/public/residential-inquiries)
- List + detail pages with inline editing for clients and interests
- Per-user residentialAccess toggle on userPortRoles (migration 0011)
- Permission keys: residential_clients, residential_interests
- Sidebar nav + role form integration
- Smoke spec covering page loads, UI create flow, public endpoint

Admin & shared UI
- Admin → Forms (form templates CRUD) with validators + service
- Notification preferences page (in-app + email per type)
- Email composition + accounts list + threads view
- Branded auth shell shared across CRM + portal auth surfaces
- Inline editing extended to yacht/company/interest detail pages
- InlineTagEditor + per-entity tags endpoints (yachts, companies)
- Notes service polymorphic across clients/interests/yachts/companies
- Client list columns: yachtCount + companyCount badges
- Reservation file-download via presigned URL (replaces stale <a href>)

Route handler refactor
- Extracted yachts/companies/berths reservation handlers to sibling
  handlers.ts files (Next.js 15 route.ts only allows specific exports)

Reliability fixes
- apiFetch double-stringify bug fixed across 13 components
  (apiFetch already JSON.stringifies its body; passing a stringified
  body produced double-encoded JSON which failed zod validation)
- SocketProvider gated behind useSyncExternalStore-based mount check
  to avoid useSession() SSR crashes under React 19 + Next 15
- apiFetch falls back to URL-pathname → port-id resolution when the
  Zustand store hasn't hydrated yet (fresh contexts, e2e tests)
- CRM invite flow (schema, service, route, email, dev script)
- Dashboard route → [portSlug]/dashboard/page.tsx + redirect
- Document the dev-server restart-after-migration gotcha in CLAUDE.md

Tests
- 5-case residential smoke spec
- Integration test updates for new service signatures

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

src/components/residential/residential-client-detail.tsx

@@ -0,0 +1,299 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { ArrowLeft, Plus } 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 { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { InlineEditableField } from '@/components/shared/inline-editable-field';
+import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { apiFetch } from '@/lib/api/client';
+
+interface ResidentialInterestSummary {
+  id: string;
+  pipelineStage: string;
+  source: string | null;
+  notes: string | null;
+  preferences: string | null;
+  updatedAt: string;
+}
+
+interface ResidentialClientDetail {
+  id: string;
+  fullName: string;
+  email: string | null;
+  phone: string | null;
+  placeOfResidence: string | null;
+  preferredContactMethod: string | null;
+  status: string;
+  source: string | null;
+  notes: string | null;
+  interests: ResidentialInterestSummary[];
+}
+
+const STATUS_OPTIONS = [
+  { value: 'prospect', label: 'Prospect' },
+  { value: 'active', label: 'Active' },
+  { value: 'inactive', label: 'Inactive' },
+];
+
+const CONTACT_OPTIONS = [
+  { value: 'email', label: 'Email' },
+  { value: 'phone', label: 'Phone' },
+];
+
+const SOURCE_OPTIONS = [
+  { value: 'website', label: 'Website' },
+  { value: 'manual', label: 'Manual' },
+  { value: 'referral', label: 'Referral' },
+  { value: 'broker', label: 'Broker' },
+];
+
+const STAGE_LABELS: Record<string, string> = {
+  new: 'New',
+  contacted: 'Contacted',
+  viewing_scheduled: 'Viewing scheduled',
+  offer_made: 'Offer made',
+  offer_accepted: 'Offer accepted',
+  closed_won: 'Closed — won',
+  closed_lost: 'Closed — lost',
+};
+
+export function ResidentialClientDetail({ clientId }: { clientId: string }) {
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
+  const qc = useQueryClient();
+  const [newInterestOpen, setNewInterestOpen] = useState(false);
+
+  const { data, isLoading } = useQuery<{ data: ResidentialClientDetail }>({
+    queryKey: ['residential-client', clientId],
+    queryFn: () => apiFetch(`/api/v1/residential/clients/${clientId}`),
+  });
+
+  useRealtimeInvalidation({
+    'residential_client:updated': [['residential-client', clientId]],
+    'residential_interest:created': [['residential-client', clientId]],
+    'residential_interest:updated': [['residential-client', clientId]],
+    'residential_interest:archived': [['residential-client', clientId]],
+  });
+
+  const update = useMutation({
+    mutationFn: (patch: Record<string, unknown>) =>
+      apiFetch(`/api/v1/residential/clients/${clientId}`, {
+        method: 'PATCH',
+        body: patch,
+      }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['residential-client', clientId] }),
+  });
+
+  const save = (field: string) => async (next: string | null) => {
+    await update.mutateAsync({ [field]: next });
+  };
+
+  if (isLoading || !data) {
+    return <div className="text-sm text-muted-foreground">Loading…</div>;
+  }
+  const client = data.data;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <Link
+          /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+          href={`/${portSlug}/residential/clients` as any}
+          className="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
+        >
+          <ArrowLeft className="h-3 w-3" /> All residential clients
+        </Link>
+      </div>
+
+      <div className="rounded-lg border bg-card p-6 space-y-6">
+        <div>
+          <h1 className="text-2xl font-semibold">
+            <InlineEditableField value={client.fullName} onSave={save('fullName')} />
+          </h1>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium mb-2">Contact</h3>
+            <Row label="Email">
+              <InlineEditableField value={client.email} onSave={save('email')} />
+            </Row>
+            <Row label="Phone">
+              <InlineEditableField value={client.phone} onSave={save('phone')} />
+            </Row>
+            <Row label="Preferred contact">
+              <InlineEditableField
+                variant="select"
+                options={CONTACT_OPTIONS}
+                value={client.preferredContactMethod}
+                onSave={save('preferredContactMethod')}
+              />
+            </Row>
+            <Row label="Place of residence">
+              <InlineEditableField
+                value={client.placeOfResidence}
+                onSave={save('placeOfResidence')}
+              />
+            </Row>
+          </div>
+
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium mb-2">Status</h3>
+            <Row label="Status">
+              <InlineEditableField
+                variant="select"
+                options={STATUS_OPTIONS}
+                value={client.status}
+                onSave={save('status')}
+              />
+            </Row>
+            <Row label="Source">
+              <InlineEditableField
+                variant="select"
+                options={SOURCE_OPTIONS}
+                value={client.source}
+                onSave={save('source')}
+              />
+            </Row>
+            <Row label="Notes">
+              <InlineEditableField value={client.notes} onSave={save('notes')} />
+            </Row>
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-lg border bg-card p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">Interests</h2>
+          <Button size="sm" onClick={() => setNewInterestOpen(true)}>
+            <Plus className="h-3.5 w-3.5 mr-1.5" />
+            New interest
+          </Button>
+        </div>
+        {client.interests.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No interests yet.</p>
+        ) : (
+          <ul className="space-y-2">
+            {client.interests.map((i) => (
+              <li key={i.id} className="flex items-center gap-3 p-3 rounded-md border bg-muted/30">
+                <span className="text-xs font-medium uppercase text-muted-foreground w-32 shrink-0">
+                  {STAGE_LABELS[i.pipelineStage] ?? i.pipelineStage}
+                </span>
+                <span className="flex-1 truncate text-sm">{i.preferences || i.notes || '—'}</span>
+                <Link
+                  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                  href={`/${portSlug}/residential/interests/${i.id}` as any}
+                  className="text-xs text-primary hover:underline"
+                >
+                  View
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      <NewInterestSheet
+        clientId={clientId}
+        open={newInterestOpen}
+        onOpenChange={setNewInterestOpen}
+      />
+    </div>
+  );
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex gap-2 py-1.5 border-b last:border-0 items-center">
+      <dt className="w-40 shrink-0 text-sm text-muted-foreground">{label}</dt>
+      <dd className="flex-1 min-w-0">{children}</dd>
+    </div>
+  );
+}
+
+function NewInterestSheet({
+  clientId,
+  open,
+  onOpenChange,
+}: {
+  clientId: string;
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}) {
+  const qc = useQueryClient();
+  const [preferences, setPreferences] = useState('');
+  const [notes, setNotes] = useState('');
+
+  const create = useMutation({
+    mutationFn: () =>
+      apiFetch('/api/v1/residential/interests', {
+        method: 'POST',
+        body: {
+          residentialClientId: clientId,
+          preferences: preferences || undefined,
+          notes: notes || undefined,
+          source: 'manual',
+        },
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['residential-client', clientId] });
+      onOpenChange(false);
+      setPreferences('');
+      setNotes('');
+      toast.success('Interest added');
+    },
+    onError: (err) => toast.error(err instanceof Error ? err.message : 'Failed to add'),
+  });
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>New interest</SheetTitle>
+        </SheetHeader>
+        <form
+          className="mt-6 space-y-4"
+          onSubmit={(e) => {
+            e.preventDefault();
+            create.mutate();
+          }}
+        >
+          <div className="space-y-1.5">
+            <Label htmlFor="ri-prefs">Preferences</Label>
+            <Input
+              id="ri-prefs"
+              value={preferences}
+              onChange={(e) => setPreferences(e.target.value)}
+              placeholder="Unit type, size, budget…"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="ri-notes">Notes</Label>
+            <Input id="ri-notes" value={notes} onChange={(e) => setNotes(e.target.value)} />
+          </div>
+          <SheetFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={create.isPending}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={create.isPending}>
+              {create.isPending ? 'Saving…' : 'Create'}
+            </Button>
+          </SheetFooter>
+        </form>
+      </SheetContent>
+    </Sheet>
+  );
+}

src/components/residential/residential-clients-list.tsx

@@ -0,0 +1,246 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { Plus } 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 { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { PageHeader } from '@/components/shared/page-header';
+import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { apiFetch } from '@/lib/api/client';
+
+interface ResidentialClientRow {
+  id: string;
+  fullName: string;
+  email: string | null;
+  phone: string | null;
+  placeOfResidence: string | null;
+  status: string;
+  source: string | null;
+  updatedAt: string;
+}
+
+interface ListResponse {
+  data: ResidentialClientRow[];
+  pagination: { total: number; page: number; pageSize: number };
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  prospect: 'Prospect',
+  active: 'Active',
+  inactive: 'Inactive',
+};
+
+export function ResidentialClientsList() {
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
+  const [createOpen, setCreateOpen] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const { data, isLoading } = useQuery<ListResponse>({
+    queryKey: ['residential-clients', { search }],
+    queryFn: () => {
+      const qs = new URLSearchParams({ search, limit: '50' });
+      return apiFetch(`/api/v1/residential/clients?${qs.toString()}`);
+    },
+  });
+
+  useRealtimeInvalidation({
+    'residential_client:created': [['residential-clients']],
+    'residential_client:updated': [['residential-clients']],
+    'residential_client:archived': [['residential-clients']],
+    'residential_client:restored': [['residential-clients']],
+  });
+
+  return (
+    <div className="space-y-4">
+      <PageHeader
+        title="Residential Clients"
+        description="Inquiries and clients for the residential side"
+        actions={
+          <Button size="sm" onClick={() => setCreateOpen(true)}>
+            <Plus className="mr-1.5 h-3.5 w-3.5" />
+            New
+          </Button>
+        }
+      />
+
+      <div className="flex items-center gap-2">
+        <Input
+          placeholder="Search by name, email, phone, residence…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-sm"
+        />
+      </div>
+
+      <div className="rounded-lg border bg-card overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-muted/40 text-xs text-muted-foreground">
+            <tr>
+              <th className="text-left font-medium px-3 py-2">Name</th>
+              <th className="text-left font-medium px-3 py-2">Email</th>
+              <th className="text-left font-medium px-3 py-2">Phone</th>
+              <th className="text-left font-medium px-3 py-2">Residence</th>
+              <th className="text-left font-medium px-3 py-2">Status</th>
+              <th className="text-left font-medium px-3 py-2">Source</th>
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading && (
+              <tr>
+                <td colSpan={6} className="px-3 py-8 text-center text-muted-foreground">
+                  Loading…
+                </td>
+              </tr>
+            )}
+            {!isLoading && data?.data.length === 0 && (
+              <tr>
+                <td colSpan={6} className="px-3 py-8 text-center text-muted-foreground">
+                  No residential clients yet.
+                </td>
+              </tr>
+            )}
+            {data?.data.map((c) => (
+              <tr
+                key={c.id}
+                className="border-t hover:bg-muted/30 transition-colors cursor-pointer"
+              >
+                <td className="px-3 py-2">
+                  <Link
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    href={`/${portSlug}/residential/clients/${c.id}` as any}
+                    className="font-medium hover:underline"
+                  >
+                    {c.fullName}
+                  </Link>
+                </td>
+                <td className="px-3 py-2 text-muted-foreground">{c.email ?? '—'}</td>
+                <td className="px-3 py-2 text-muted-foreground">{c.phone ?? '—'}</td>
+                <td className="px-3 py-2 text-muted-foreground">{c.placeOfResidence ?? '—'}</td>
+                <td className="px-3 py-2">{STATUS_LABELS[c.status] ?? c.status}</td>
+                <td className="px-3 py-2 capitalize text-muted-foreground">{c.source ?? '—'}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <NewResidentialClientSheet open={createOpen} onOpenChange={setCreateOpen} />
+    </div>
+  );
+}
+
+function NewResidentialClientSheet({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+}) {
+  const qc = useQueryClient();
+  const [fullName, setFullName] = useState('');
+  const [email, setEmail] = useState('');
+  const [phone, setPhone] = useState('');
+  const [placeOfResidence, setPlaceOfResidence] = useState('');
+  const [notes, setNotes] = useState('');
+
+  const create = useMutation({
+    mutationFn: () =>
+      apiFetch('/api/v1/residential/clients', {
+        method: 'POST',
+        body: {
+          fullName,
+          email: email || undefined,
+          phone: phone || undefined,
+          placeOfResidence: placeOfResidence || undefined,
+          notes: notes || undefined,
+          source: 'manual',
+        },
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['residential-clients'] });
+      onOpenChange(false);
+      setFullName('');
+      setEmail('');
+      setPhone('');
+      setPlaceOfResidence('');
+      setNotes('');
+      toast.success('Residential client added');
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : 'Failed to create');
+    },
+  });
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>New residential client</SheetTitle>
+        </SheetHeader>
+        <form
+          className="mt-6 space-y-4"
+          onSubmit={(e) => {
+            e.preventDefault();
+            create.mutate();
+          }}
+        >
+          <div className="space-y-1.5">
+            <Label htmlFor="rc-name">Full name *</Label>
+            <Input
+              id="rc-name"
+              value={fullName}
+              onChange={(e) => setFullName(e.target.value)}
+              required
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="rc-email">Email</Label>
+            <Input
+              id="rc-email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="rc-phone">Phone</Label>
+            <Input id="rc-phone" value={phone} onChange={(e) => setPhone(e.target.value)} />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="rc-residence">Place of residence</Label>
+            <Input
+              id="rc-residence"
+              value={placeOfResidence}
+              onChange={(e) => setPlaceOfResidence(e.target.value)}
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="rc-notes">Notes</Label>
+            <Input id="rc-notes" value={notes} onChange={(e) => setNotes(e.target.value)} />
+          </div>
+          <SheetFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={create.isPending}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!fullName.trim() || create.isPending}>
+              {create.isPending ? 'Saving…' : 'Create'}
+            </Button>
+          </SheetFooter>
+        </form>
+      </SheetContent>
+    </Sheet>
+  );
+}

src/components/residential/residential-interest-detail.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { ArrowLeft } from 'lucide-react';
+
+import { InlineEditableField } from '@/components/shared/inline-editable-field';
+import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { apiFetch } from '@/lib/api/client';
+import { PIPELINE_STAGES } from '@/lib/validators/residential';
+
+interface ResidentialInterestDetail {
+  id: string;
+  residentialClientId: string;
+  pipelineStage: string;
+  source: string | null;
+  notes: string | null;
+  preferences: string | null;
+  assignedTo: string | null;
+  client: { id: string; fullName: string } | null;
+}
+
+const STAGE_LABELS: Record<string, string> = {
+  new: 'New',
+  contacted: 'Contacted',
+  viewing_scheduled: 'Viewing scheduled',
+  offer_made: 'Offer made',
+  offer_accepted: 'Offer accepted',
+  closed_won: 'Closed — won',
+  closed_lost: 'Closed — lost',
+};
+
+const STAGE_OPTIONS = PIPELINE_STAGES.map((s) => ({
+  value: s,
+  label: STAGE_LABELS[s] ?? s,
+}));
+
+const SOURCE_OPTIONS = [
+  { value: 'website', label: 'Website' },
+  { value: 'manual', label: 'Manual' },
+  { value: 'referral', label: 'Referral' },
+  { value: 'broker', label: 'Broker' },
+];
+
+export function ResidentialInterestDetail({ interestId }: { interestId: string }) {
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
+  const qc = useQueryClient();
+
+  const { data, isLoading } = useQuery<{ data: ResidentialInterestDetail }>({
+    queryKey: ['residential-interest', interestId],
+    queryFn: () => apiFetch(`/api/v1/residential/interests/${interestId}`),
+  });
+
+  useRealtimeInvalidation({
+    'residential_interest:updated': [['residential-interest', interestId]],
+  });
+
+  const update = useMutation({
+    mutationFn: (patch: Record<string, unknown>) =>
+      apiFetch(`/api/v1/residential/interests/${interestId}`, {
+        method: 'PATCH',
+        body: patch,
+      }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: ['residential-interest', interestId] }),
+  });
+
+  const save = (field: string) => async (next: string | null) => {
+    await update.mutateAsync({ [field]: next });
+  };
+
+  if (isLoading || !data) {
+    return <div className="text-sm text-muted-foreground">Loading…</div>;
+  }
+  const interest = data.data;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <Link
+          /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+          href={`/${portSlug}/residential/interests` as any}
+          className="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-1"
+        >
+          <ArrowLeft className="h-3 w-3" /> All residential interests
+        </Link>
+      </div>
+
+      <div className="rounded-lg border bg-card p-6 space-y-6">
+        <div>
+          <p className="text-xs uppercase text-muted-foreground tracking-wider mb-1">
+            Residential interest
+          </p>
+          {interest.client && (
+            <h1 className="text-2xl font-semibold">
+              <Link
+                /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                href={`/${portSlug}/residential/clients/${interest.client.id}` as any}
+                className="hover:underline"
+              >
+                {interest.client.fullName}
+              </Link>
+            </h1>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium mb-2">Pipeline</h3>
+            <Row label="Stage">
+              <InlineEditableField
+                variant="select"
+                options={STAGE_OPTIONS}
+                value={interest.pipelineStage}
+                onSave={save('pipelineStage')}
+              />
+            </Row>
+            <Row label="Source">
+              <InlineEditableField
+                variant="select"
+                options={SOURCE_OPTIONS}
+                value={interest.source}
+                onSave={save('source')}
+              />
+            </Row>
+            <Row label="Assigned to">
+              <InlineEditableField
+                value={interest.assignedTo}
+                onSave={save('assignedTo')}
+                placeholder="user id"
+              />
+            </Row>
+          </div>
+
+          <div className="space-y-1">
+            <h3 className="text-sm font-medium mb-2">Details</h3>
+            <Row label="Preferences">
+              <InlineEditableField value={interest.preferences} onSave={save('preferences')} />
+            </Row>
+            <Row label="Notes">
+              <InlineEditableField value={interest.notes} onSave={save('notes')} />
+            </Row>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex gap-2 py-1.5 border-b last:border-0 items-center">
+      <dt className="w-40 shrink-0 text-sm text-muted-foreground">{label}</dt>
+      <dd className="flex-1 min-w-0">{children}</dd>
+    </div>
+  );
+}

src/components/residential/residential-interests-list.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { useParams } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
+
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { PageHeader } from '@/components/shared/page-header';
+import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
+import { apiFetch } from '@/lib/api/client';
+import { PIPELINE_STAGES } from '@/lib/validators/residential';
+
+interface ResidentialInterestRow {
+  id: string;
+  residentialClientId: string;
+  pipelineStage: string;
+  source: string | null;
+  notes: string | null;
+  preferences: string | null;
+  assignedTo: string | null;
+  updatedAt: string;
+}
+
+interface ListResponse {
+  data: ResidentialInterestRow[];
+  pagination: { total: number };
+}
+
+const STAGE_LABELS: Record<string, string> = {
+  new: 'New',
+  contacted: 'Contacted',
+  viewing_scheduled: 'Viewing scheduled',
+  offer_made: 'Offer made',
+  offer_accepted: 'Offer accepted',
+  closed_won: 'Closed — won',
+  closed_lost: 'Closed — lost',
+};
+
+export function ResidentialInterestsList() {
+  const params = useParams<{ portSlug: string }>();
+  const portSlug = params?.portSlug ?? '';
+  const [search, setSearch] = useState('');
+  const [stage, setStage] = useState<string>('all');
+
+  const { data, isLoading } = useQuery<ListResponse>({
+    queryKey: ['residential-interests', { search, stage }],
+    queryFn: () => {
+      const qs = new URLSearchParams({ search, limit: '50' });
+      if (stage !== 'all') qs.set('pipelineStage', stage);
+      return apiFetch(`/api/v1/residential/interests?${qs.toString()}`);
+    },
+  });
+
+  useRealtimeInvalidation({
+    'residential_interest:created': [['residential-interests']],
+    'residential_interest:updated': [['residential-interests']],
+    'residential_interest:archived': [['residential-interests']],
+  });
+
+  return (
+    <div className="space-y-4">
+      <PageHeader
+        title="Residential Interests"
+        description="Inquiries flowing through the residential pipeline"
+      />
+
+      <div className="flex items-center gap-2">
+        <Input
+          placeholder="Search notes / preferences…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="max-w-sm"
+        />
+        <Select value={stage} onValueChange={setStage}>
+          <SelectTrigger className="w-52">
+            <SelectValue placeholder="All stages" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All stages</SelectItem>
+            {PIPELINE_STAGES.map((s) => (
+              <SelectItem key={s} value={s}>
+                {STAGE_LABELS[s] ?? s}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      <div className="rounded-lg border bg-card overflow-hidden">
+        <table className="w-full text-sm">
+          <thead className="bg-muted/40 text-xs text-muted-foreground">
+            <tr>
+              <th className="text-left font-medium px-3 py-2">Stage</th>
+              <th className="text-left font-medium px-3 py-2">Preferences</th>
+              <th className="text-left font-medium px-3 py-2">Notes</th>
+              <th className="text-left font-medium px-3 py-2">Source</th>
+              <th className="text-left font-medium px-3 py-2">Updated</th>
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading && (
+              <tr>
+                <td colSpan={5} className="px-3 py-8 text-center text-muted-foreground">
+                  Loading…
+                </td>
+              </tr>
+            )}
+            {!isLoading && data?.data.length === 0 && (
+              <tr>
+                <td colSpan={5} className="px-3 py-8 text-center text-muted-foreground">
+                  No interests match.
+                </td>
+              </tr>
+            )}
+            {data?.data.map((i) => (
+              <tr
+                key={i.id}
+                className="border-t hover:bg-muted/30 transition-colors cursor-pointer"
+              >
+                <td className="px-3 py-2">
+                  <Link
+                    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+                    href={`/${portSlug}/residential/interests/${i.id}` as any}
+                    className="font-medium hover:underline"
+                  >
+                    {STAGE_LABELS[i.pipelineStage] ?? i.pipelineStage}
+                  </Link>
+                </td>
+                <td className="px-3 py-2 text-muted-foreground truncate max-w-xs">
+                  {i.preferences ?? '—'}
+                </td>
+                <td className="px-3 py-2 text-muted-foreground truncate max-w-xs">
+                  {i.notes ?? '—'}
+                </td>
+                <td className="px-3 py-2 capitalize text-muted-foreground">{i.source ?? '—'}</td>
+                <td className="px-3 py-2 text-muted-foreground text-xs">
+                  {new Date(i.updatedAt).toLocaleDateString()}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}