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/yachts/yacht-tabs.tsx

@@ -1,8 +1,38 @@
 'use client';
 
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
 import type { DetailTab } from '@/components/shared/detail-layout';
 import { EmptyState } from '@/components/shared/empty-state';
+import { InlineEditableField } from '@/components/shared/inline-editable-field';
+import { InlineTagEditor } from '@/components/shared/inline-tag-editor';
+import { NotesList } from '@/components/shared/notes-list';
 import { YachtOwnershipHistory } from '@/components/yachts/yacht-ownership-history';
+import { apiFetch } from '@/lib/api/client';
+
+type YachtPatchField =
+  | 'name'
+  | 'hullNumber'
+  | 'registration'
+  | 'flag'
+  | 'yearBuilt'
+  | 'builder'
+  | 'model'
+  | 'hullMaterial'
+  | 'lengthFt'
+  | 'widthFt'
+  | 'draftFt'
+  | 'lengthM'
+  | 'widthM'
+  | 'draftM'
+  | 'status'
+  | 'notes';
+
+const STATUS_OPTIONS = [
+  { value: 'active', label: 'Active' },
+  { value: 'retired', label: 'Retired' },
+  { value: 'sold_away', label: 'Sold away' },
+];
 
 interface YachtTabsYacht {
   id: string;
@@ -22,6 +52,7 @@ interface YachtTabsYacht {
   draftM: string | null;
   status: string;
   notes: string | null;
+  tags?: Array<{ id: string; name: string; color: string }>;
 }
 
 interface YachtTabsOptions {
@@ -30,25 +61,43 @@ interface YachtTabsOptions {
   yacht: YachtTabsYacht;
 }
 
-function InfoRow({ label, value }: { label: string; value?: string | number | null }) {
-  if (value === null || value === undefined || value === '') return null;
+function useYachtPatch(yachtId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (patch: Partial<Record<YachtPatchField, string | number | null>>) =>
+      apiFetch(`/api/v1/yachts/${yachtId}`, {
+        method: 'PATCH',
+        body: patch,
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['yachts', yachtId] });
+    },
+  });
+}
+
+function EditableRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
-    <div className="flex gap-2 py-1.5 border-b last:border-0">
+    <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="text-sm">{value}</dd>
+      <dd className="flex-1 min-w-0">{children}</dd>
     </div>
   );
 }
 
-const STATUS_LABELS: Record<string, string> = {
-  active: 'Active',
-  retired: 'Retired',
-  sold_away: 'Sold away',
-};
-
-function OverviewTab({ yacht }: { yacht: YachtTabsYacht }) {
-  const hasFtDimensions = yacht.lengthFt || yacht.widthFt || yacht.draftFt;
-  const hasMDimensions = yacht.lengthM || yacht.widthM || yacht.draftM;
+function OverviewTab({ yachtId, yacht }: { yachtId: string; yacht: YachtTabsYacht }) {
+  const mutation = useYachtPatch(yachtId);
+  const save =
+    (field: YachtPatchField, transform?: (v: string | null) => string | number | null) =>
+    async (next: string | null) => {
+      const value = transform ? transform(next) : next;
+      await mutation.mutateAsync({ [field]: value });
+    };
+  const numericString = (next: string | null) => (next === null ? null : next);
+  const yearTransform = (next: string | null) => {
+    if (next === null) return null;
+    const n = Number.parseInt(next, 10);
+    return Number.isNaN(n) ? null : n;
+  };
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -56,77 +105,113 @@ function OverviewTab({ yacht }: { yacht: YachtTabsYacht }) {
       <div className="space-y-1">
         <h3 className="text-sm font-medium mb-2">Identity</h3>
         <dl>
-          <InfoRow label="Name" value={yacht.name} />
-          <InfoRow label="Hull Number" value={yacht.hullNumber} />
-          <InfoRow label="Registration" value={yacht.registration} />
-          <InfoRow label="Flag" value={yacht.flag} />
-          <InfoRow label="Year Built" value={yacht.yearBuilt} />
-          <InfoRow label="Status" value={STATUS_LABELS[yacht.status] ?? yacht.status} />
+          <EditableRow label="Name">
+            <InlineEditableField value={yacht.name} onSave={save('name')} />
+          </EditableRow>
+          <EditableRow label="Hull Number">
+            <InlineEditableField value={yacht.hullNumber} onSave={save('hullNumber')} />
+          </EditableRow>
+          <EditableRow label="Registration">
+            <InlineEditableField value={yacht.registration} onSave={save('registration')} />
+          </EditableRow>
+          <EditableRow label="Flag">
+            <InlineEditableField value={yacht.flag} onSave={save('flag')} />
+          </EditableRow>
+          <EditableRow label="Year Built">
+            <InlineEditableField
+              value={yacht.yearBuilt?.toString() ?? null}
+              onSave={save('yearBuilt', yearTransform)}
+            />
+          </EditableRow>
+          <EditableRow label="Status">
+            <InlineEditableField
+              variant="select"
+              options={STATUS_OPTIONS}
+              value={yacht.status}
+              onSave={save('status')}
+            />
+          </EditableRow>
         </dl>
       </div>
 
       {/* Build */}
-      {(yacht.builder || yacht.model || yacht.hullMaterial) && (
-        <div className="space-y-1">
-          <h3 className="text-sm font-medium mb-2">Build</h3>
-          <dl>
-            <InfoRow label="Builder" value={yacht.builder} />
-            <InfoRow label="Model" value={yacht.model} />
-            <InfoRow label="Hull Material" value={yacht.hullMaterial} />
-          </dl>
-        </div>
-      )}
+      <div className="space-y-1">
+        <h3 className="text-sm font-medium mb-2">Build</h3>
+        <dl>
+          <EditableRow label="Builder">
+            <InlineEditableField value={yacht.builder} onSave={save('builder')} />
+          </EditableRow>
+          <EditableRow label="Model">
+            <InlineEditableField value={yacht.model} onSave={save('model')} />
+          </EditableRow>
+          <EditableRow label="Hull Material">
+            <InlineEditableField value={yacht.hullMaterial} onSave={save('hullMaterial')} />
+          </EditableRow>
+        </dl>
+      </div>
 
       {/* Dimensions (ft) */}
-      {hasFtDimensions && (
-        <div className="space-y-1">
-          <h3 className="text-sm font-medium mb-2">Dimensions (ft)</h3>
-          <dl>
-            <InfoRow label="Length" value={yacht.lengthFt ? `${yacht.lengthFt} ft` : null} />
-            <InfoRow label="Width" value={yacht.widthFt ? `${yacht.widthFt} ft` : null} />
-            <InfoRow label="Draft" value={yacht.draftFt ? `${yacht.draftFt} ft` : null} />
-          </dl>
-        </div>
-      )}
+      <div className="space-y-1">
+        <h3 className="text-sm font-medium mb-2">Dimensions (ft)</h3>
+        <dl>
+          <EditableRow label="Length (ft)">
+            <InlineEditableField value={yacht.lengthFt} onSave={save('lengthFt', numericString)} />
+          </EditableRow>
+          <EditableRow label="Width (ft)">
+            <InlineEditableField value={yacht.widthFt} onSave={save('widthFt', numericString)} />
+          </EditableRow>
+          <EditableRow label="Draft (ft)">
+            <InlineEditableField value={yacht.draftFt} onSave={save('draftFt', numericString)} />
+          </EditableRow>
+        </dl>
+      </div>
 
       {/* Dimensions (m) */}
-      {hasMDimensions && (
-        <div className="space-y-1">
-          <h3 className="text-sm font-medium mb-2">Dimensions (m)</h3>
-          <dl>
-            <InfoRow label="Length" value={yacht.lengthM ? `${yacht.lengthM} m` : null} />
-            <InfoRow label="Width" value={yacht.widthM ? `${yacht.widthM} m` : null} />
-            <InfoRow label="Draft" value={yacht.draftM ? `${yacht.draftM} m` : null} />
-          </dl>
-        </div>
-      )}
+      <div className="space-y-1">
+        <h3 className="text-sm font-medium mb-2">Dimensions (m)</h3>
+        <dl>
+          <EditableRow label="Length (m)">
+            <InlineEditableField value={yacht.lengthM} onSave={save('lengthM', numericString)} />
+          </EditableRow>
+          <EditableRow label="Width (m)">
+            <InlineEditableField value={yacht.widthM} onSave={save('widthM', numericString)} />
+          </EditableRow>
+          <EditableRow label="Draft (m)">
+            <InlineEditableField value={yacht.draftM} onSave={save('draftM', numericString)} />
+          </EditableRow>
+        </dl>
+      </div>
 
       {/* Notes */}
-      {yacht.notes && (
-        <div className="space-y-1 md:col-span-2">
-          <h3 className="text-sm font-medium mb-2">Notes</h3>
-          <p className="text-sm whitespace-pre-wrap rounded-md border bg-muted/30 p-3">
-            {yacht.notes}
-          </p>
-        </div>
-      )}
+      <div className="space-y-1 md:col-span-2">
+        <h3 className="text-sm font-medium mb-2">Notes</h3>
+        <InlineEditableField
+          variant="textarea"
+          value={yacht.notes}
+          onSave={save('notes')}
+          emptyText="No notes — click to add"
+        />
+      </div>
+
+      {/* Tags */}
+      <div className="space-y-1 md:col-span-2">
+        <h3 className="text-sm font-medium mb-2">Tags</h3>
+        <InlineTagEditor
+          endpoint={`/api/v1/yachts/${yachtId}/tags`}
+          currentTags={yacht.tags ?? []}
+          invalidateKey={['yachts', yachtId]}
+        />
+      </div>
     </div>
   );
 }
 
-export function getYachtTabs({
-  yachtId,
-  // currentUserId reserved for when NotesList supports entityType='yachts'.
-  currentUserId: _currentUserId,
-  yacht,
-}: YachtTabsOptions): DetailTab[] {
-  void _currentUserId;
-
+export function getYachtTabs({ yachtId, currentUserId, yacht }: YachtTabsOptions): DetailTab[] {
   return [
     {
       id: 'overview',
       label: 'Overview',
-      content: <OverviewTab yacht={yacht} />,
+      content: <OverviewTab yachtId={yachtId} yacht={yacht} />,
     },
     {
       id: 'ownership-history',
@@ -146,23 +231,7 @@ export function getYachtTabs({
     {
       id: 'notes',
       label: 'Notes',
-      // TODO: NotesList currently supports entityType 'clients' | 'interests'.
-      // Extend NotesList (or swap to a yacht-notes endpoint) in a follow-up.
-      content: (
-        <EmptyState
-          title="Notes"
-          description="Yacht notes coming soon — the notes endpoint is pending wiring."
-        />
-      ),
-    },
-    {
-      id: 'tags',
-      label: 'Tags',
-      // TODO: replace with an inline tag editor once one exists; yacht tags
-      // can be edited via the Edit form in the meantime.
-      content: (
-        <EmptyState title="Tags" description="Manage tags from the Edit yacht form for now." />
-      ),
+      content: <NotesList entityType="yachts" entityId={yachtId} currentUserId={currentUserId} />,
     },
   ];
 }