feat(emails): sales send-out flows + brochures + email-from settings

Phase 7 of the berth-recommender refactor (plan §3.3, §4.8, §4.9, §5.7,
§5.8, §5.9, §11.1, §14.7, §14.9). Adds the rep-driven send-out path for
per-berth PDFs and port-wide brochures, the per-port sales SMTP/IMAP
config + body templates, and the supporting admin UI.

Migration: 0031_brochures_and_document_sends.sql

Schema additions:
  - brochures (port-wide, with isDefault marker + archive)
  - brochure_versions (versioned uploads, storageKey per §4.7a)
  - document_sends (audit log of every rep-initiated send; failures
    captured with failedAt + errorReason). berthPdfVersionId is a plain
    text column (no FK) — loose-coupled to Phase 6b's berth_pdf_versions
    so the two phases stay independent.

§14.7 critical mitigations:
  - Body XSS: rep-authored markdown goes through renderEmailBody()
    (HTML-escape first, then a tight allowlist of bold/italic/code/link
    rules). https:// + mailto: only — javascript:/data: URLs stripped.
    Tested against script/img/iframe/svg/onerror polyglots.
  - Recipient typo: strict email regex + two-step confirm modal that
    shows the exact recipient before send.
  - Unresolved merge fields: pre-send dry-run /preview endpoint blocks
    submission until findUnresolvedTokens() returns empty.
  - SMTP failure: every transport rejection writes a document_sends row
    with failedAt + errorReason; UI surfaces the message.
  - Hourly per-user rate limit: 50 sends/user/hour via existing
    checkRateLimit().
  - Size threshold fallback (§11.1): files above
    email_attach_threshold_mb (default 15) ship as a 24h signed-URL
    download link in the body instead of an attachment. Storage stream
    flows directly to nodemailer to avoid buffering 20MB+.

§14.10 critical mitigation:
  - SMTP/IMAP passwords encrypted at rest via the existing
    EMAIL_CREDENTIAL_KEY (AES-256-GCM). The /api/v1/admin/email/
    sales-config GET endpoint never returns the decrypted value — only
    a *PassIsSet boolean. PATCH treats empty string as "leave unchanged"
    and explicit null as "clear", so the masked-placeholder UI round-
    trips without forcing re-entry on every save.

system_settings keys (per-port unless noted):
  - sales_from_address, sales_smtp_{host,port,secure,user,pass_encrypted}
  - sales_imap_{host,port,user,pass_encrypted}
  - sales_auth_method (default app_password)
  - noreply_from_address
  - email_template_send_berth_pdf_body, email_template_send_brochure_body
  - brochure_max_upload_mb (default 50)
  - email_attach_threshold_mb (default 15)

UI surfaces (per §5.7, §5.8, §5.9):
  - <SendDocumentDialog> shared 2-step compose+confirm flow.
  - <SendBerthPdfDialog>, <SendDocumentsDialog>, <SendFromInterestButton>
    wrappers per detail page.
  - /[portSlug]/admin/brochures: list, upload (direct-to-storage
    presigned PUT for the 20MB+ files per §11.1), default toggle,
    archive.
  - /[portSlug]/admin/email extended with <SalesEmailConfigCard>:
    SMTP + IMAP creds, body templates, threshold/max settings.

Storage: every upload + download goes through getStorageBackend() —
no direct minio imports, per Phase 6a contract.

Tests: 1145 vitest passing (+ 50 new in
markdown-email-sanitization.test.ts, document-sends-validators.test.ts,
sales-email-config-validators.test.ts).

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

src/components/admin/brochures-admin-panel.tsx

@@ -0,0 +1,345 @@
+'use client';
+
+/**
+ * Brochures admin panel (Phase 7 §5.8).
+ *
+ * Lists every brochure for the port (including archived). Lets a
+ * `manage_settings` admin:
+ *   - Create new brochures.
+ *   - Upload a new version (direct-to-storage presigned PUT, see §11.1).
+ *   - Mark default / archive.
+ */
+import { useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Archive, FileText, Loader2, Plus, Star, Upload } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { apiFetch } from '@/lib/api/client';
+
+interface BrochureRow {
+  id: string;
+  label: string;
+  description: string | null;
+  isDefault: boolean;
+  archivedAt: string | null;
+  versionCount: number;
+  currentVersion: {
+    id: string;
+    fileName: string;
+    fileSizeBytes: number;
+    uploadedAt: string;
+  } | null;
+}
+
+interface BrochuresResponse {
+  data: BrochureRow[];
+}
+
+interface UploadGrantResponse {
+  data: { storageKey: string; uploadUrl: string; method: 'PUT'; maxBytes: number };
+}
+
+export function BrochuresAdminPanel() {
+  const queryClient = useQueryClient();
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const brochuresQuery = useQuery<BrochuresResponse>({
+    queryKey: ['brochures', 'admin'],
+    queryFn: () => apiFetch('/api/v1/admin/brochures'),
+  });
+
+  const rows = brochuresQuery.data?.data ?? [];
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-end">
+        <Button onClick={() => setCreateOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" /> New brochure
+        </Button>
+      </div>
+
+      {brochuresQuery.isLoading && (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" /> Loading…
+        </div>
+      )}
+
+      {!brochuresQuery.isLoading && rows.length === 0 && (
+        <Card>
+          <CardContent className="py-8 text-center text-sm text-muted-foreground">
+            No brochures yet. Click &ldquo;New brochure&rdquo; to add one.
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="space-y-3">
+        {rows.map((b) => (
+          <BrochureCard
+            key={b.id}
+            brochure={b}
+            onChange={() => {
+              void queryClient.invalidateQueries({ queryKey: ['brochures', 'admin'] });
+              void queryClient.invalidateQueries({ queryKey: ['brochures', 'list'] });
+            }}
+          />
+        ))}
+      </div>
+
+      <CreateBrochureDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        onCreated={() => {
+          void queryClient.invalidateQueries({ queryKey: ['brochures', 'admin'] });
+        }}
+      />
+    </div>
+  );
+}
+
+function BrochureCard({ brochure, onChange }: { brochure: BrochureRow; onChange: () => void }) {
+  const [uploading, setUploading] = useState(false);
+
+  const setDefaultMutation = useMutation({
+    mutationFn: () =>
+      apiFetch(`/api/v1/admin/brochures/${brochure.id}`, {
+        method: 'PATCH',
+        body: { isDefault: true },
+      }),
+    onSuccess: () => {
+      toast.success('Default brochure updated');
+      onChange();
+    },
+  });
+
+  const archiveMutation = useMutation({
+    mutationFn: () => apiFetch(`/api/v1/admin/brochures/${brochure.id}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      toast.success('Brochure archived');
+      onChange();
+    },
+  });
+
+  async function handleUpload(file: File) {
+    setUploading(true);
+    try {
+      const grant: UploadGrantResponse = await apiFetch(
+        `/api/v1/admin/brochures/${brochure.id}/versions`,
+      );
+      if (file.size > grant.data.maxBytes) {
+        throw new Error(
+          `File is too large. Max is ${(grant.data.maxBytes / 1024 / 1024).toFixed(0)}MB.`,
+        );
+      }
+      // Direct-to-storage PUT (§11.1).
+      const putRes = await fetch(grant.data.uploadUrl, {
+        method: 'PUT',
+        body: file,
+        headers: { 'Content-Type': 'application/pdf' },
+      });
+      if (!putRes.ok) throw new Error(`Upload failed: ${putRes.status}`);
+
+      const sha = await sha256Hex(file);
+      await apiFetch(`/api/v1/admin/brochures/${brochure.id}/versions`, {
+        method: 'POST',
+        body: {
+          storageKey: grant.data.storageKey,
+          fileName: file.name,
+          fileSizeBytes: file.size,
+          contentSha256: sha,
+        },
+      });
+      toast.success('New version uploaded');
+      onChange();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Upload failed');
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  return (
+    <Card className={brochure.archivedAt ? 'opacity-60' : ''}>
+      <CardHeader>
+        <CardTitle className="flex items-center justify-between text-base">
+          <span className="flex items-center gap-2">
+            <FileText className="h-4 w-4" /> {brochure.label}
+            {brochure.isDefault && (
+              <span className="flex items-center gap-1 rounded bg-primary/10 px-2 py-0.5 text-xs text-primary">
+                <Star className="h-3 w-3" /> default
+              </span>
+            )}
+            {brochure.archivedAt && (
+              <span className="rounded bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+                archived
+              </span>
+            )}
+          </span>
+          <span className="text-xs text-muted-foreground">{brochure.versionCount} versions</span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        {brochure.description && (
+          <p className="text-sm text-muted-foreground">{brochure.description}</p>
+        )}
+        {brochure.currentVersion && (
+          <p className="text-xs text-muted-foreground">
+            Latest: {brochure.currentVersion.fileName} (
+            {(brochure.currentVersion.fileSizeBytes / 1024 / 1024).toFixed(2)} MB,{' '}
+            {new Date(brochure.currentVersion.uploadedAt).toLocaleDateString()})
+          </p>
+        )}
+        <div className="flex gap-2 pt-2">
+          {!brochure.archivedAt && (
+            <>
+              <label className="cursor-pointer">
+                <input
+                  type="file"
+                  accept="application/pdf"
+                  className="hidden"
+                  onChange={(e) => {
+                    const file = e.target.files?.[0];
+                    if (file) void handleUpload(file);
+                    e.target.value = '';
+                  }}
+                />
+                <Button asChild variant="outline" size="sm" disabled={uploading}>
+                  <span>
+                    {uploading ? (
+                      <Loader2 className="mr-2 h-3 w-3 animate-spin" />
+                    ) : (
+                      <Upload className="mr-2 h-3 w-3" />
+                    )}
+                    Upload version
+                  </span>
+                </Button>
+              </label>
+              {!brochure.isDefault && (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setDefaultMutation.mutate()}
+                  disabled={setDefaultMutation.isPending}
+                >
+                  <Star className="mr-2 h-3 w-3" /> Mark default
+                </Button>
+              )}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => archiveMutation.mutate()}
+                disabled={archiveMutation.isPending}
+              >
+                <Archive className="mr-2 h-3 w-3" /> Archive
+              </Button>
+            </>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function CreateBrochureDialog({
+  open,
+  onOpenChange,
+  onCreated,
+}: {
+  open: boolean;
+  onOpenChange: (o: boolean) => void;
+  onCreated: () => void;
+}) {
+  const [label, setLabel] = useState('');
+  const [description, setDescription] = useState('');
+  const [isDefault, setIsDefault] = useState(false);
+
+  const createMutation = useMutation({
+    mutationFn: () =>
+      apiFetch('/api/v1/admin/brochures', {
+        method: 'POST',
+        body: {
+          label,
+          description: description || null,
+          isDefault,
+        },
+      }),
+    onSuccess: () => {
+      toast.success('Brochure created. Upload a version next.');
+      setLabel('');
+      setDescription('');
+      setIsDefault(false);
+      onCreated();
+      onOpenChange(false);
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>New brochure</DialogTitle>
+          <DialogDescription>
+            Create the brochure container, then upload a PDF version on the card that appears.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          <div className="space-y-1">
+            <Label htmlFor="b-label">Label</Label>
+            <Input
+              id="b-label"
+              value={label}
+              onChange={(e) => setLabel(e.target.value)}
+              placeholder="General overview"
+            />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="b-desc">Description (optional)</Label>
+            <Textarea
+              id="b-desc"
+              rows={2}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <Label htmlFor="b-def">Set as default</Label>
+            <Switch id="b-def" checked={isDefault} onCheckedChange={setIsDefault} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            disabled={!label.trim() || createMutation.isPending}
+            onClick={() => createMutation.mutate()}
+          >
+            {createMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+async function sha256Hex(file: File): Promise<string> {
+  const buf = await file.arrayBuffer();
+  const hash = await crypto.subtle.digest('SHA-256', buf);
+  return Array.from(new Uint8Array(hash))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('');
+}

src/components/admin/sales-email-config-card.tsx

@@ -0,0 +1,381 @@
+'use client';
+
+/**
+ * Sales send-from config card (Phase 7 §5.9).
+ *
+ * Lives on /[portSlug]/admin/email below the existing noreply transport
+ * card. Lets per-port admins configure the SMTP/IMAP creds + body templates
+ * that the document-sends flow uses.
+ *
+ * §14.10 enforcement: passwords are write-only. The GET endpoint never
+ * returns the decrypted value — only a `*PassIsSet` boolean. Empty
+ * password input means "leave unchanged"; explicit `null` sent over the
+ * wire means "clear".
+ */
+import { useEffect, useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Textarea } from '@/components/ui/textarea';
+import { apiFetch } from '@/lib/api/client';
+
+interface SalesConfigResponse {
+  data: {
+    email: {
+      fromAddress: string;
+      smtpHost: string | null;
+      smtpPort: number;
+      smtpSecure: boolean;
+      smtpUser: string | null;
+      authMethod: string;
+      smtpPassIsSet: boolean;
+      isUsable: boolean;
+    };
+    imap: {
+      imapHost: string | null;
+      imapPort: number;
+      imapUser: string | null;
+      imapPassIsSet: boolean;
+      isUsable: boolean;
+    };
+    content: {
+      noreplyFromAddress: string;
+      templateBerthPdfBody: string;
+      templateBrochureBody: string;
+      brochureMaxUploadMb: number;
+      emailAttachThresholdMb: number;
+    };
+  };
+}
+
+interface FormState {
+  fromAddress: string;
+  smtpHost: string;
+  smtpPort: number | '';
+  smtpSecure: boolean;
+  smtpUser: string;
+  smtpPass: string; // empty = unchanged
+  imapHost: string;
+  imapPort: number | '';
+  imapUser: string;
+  imapPass: string;
+  noreplyFromAddress: string;
+  templateBerthPdfBody: string;
+  templateBrochureBody: string;
+  brochureMaxUploadMb: number | '';
+  emailAttachThresholdMb: number | '';
+}
+
+const EMPTY_FORM: FormState = {
+  fromAddress: '',
+  smtpHost: '',
+  smtpPort: 587,
+  smtpSecure: false,
+  smtpUser: '',
+  smtpPass: '',
+  imapHost: '',
+  imapPort: 993,
+  imapUser: '',
+  imapPass: '',
+  noreplyFromAddress: '',
+  templateBerthPdfBody: '',
+  templateBrochureBody: '',
+  brochureMaxUploadMb: 50,
+  emailAttachThresholdMb: 15,
+};
+
+export function SalesEmailConfigCard() {
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [smtpPassSet, setSmtpPassSet] = useState(false);
+  const [imapPassSet, setImapPassSet] = useState(false);
+  const [form, setForm] = useState<FormState>(EMPTY_FORM);
+
+  async function refresh() {
+    setLoading(true);
+    try {
+      const res: SalesConfigResponse = await apiFetch('/api/v1/admin/email/sales-config');
+      setSmtpPassSet(res.data.email.smtpPassIsSet);
+      setImapPassSet(res.data.imap.imapPassIsSet);
+      setForm({
+        fromAddress: res.data.email.fromAddress,
+        smtpHost: res.data.email.smtpHost ?? '',
+        smtpPort: res.data.email.smtpPort,
+        smtpSecure: res.data.email.smtpSecure,
+        smtpUser: res.data.email.smtpUser ?? '',
+        smtpPass: '',
+        imapHost: res.data.imap.imapHost ?? '',
+        imapPort: res.data.imap.imapPort,
+        imapUser: res.data.imap.imapUser ?? '',
+        imapPass: '',
+        noreplyFromAddress: res.data.content.noreplyFromAddress,
+        templateBerthPdfBody: res.data.content.templateBerthPdfBody,
+        templateBrochureBody: res.data.content.templateBrochureBody,
+        brochureMaxUploadMb: res.data.content.brochureMaxUploadMb,
+        emailAttachThresholdMb: res.data.content.emailAttachThresholdMb,
+      });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    void refresh();
+  }, []);
+
+  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((prev) => ({ ...prev, [key]: value }));
+  }
+
+  async function handleSave() {
+    setSaving(true);
+    try {
+      const payload: Record<string, unknown> = {
+        fromAddress: form.fromAddress || null,
+        smtpHost: form.smtpHost || null,
+        smtpPort: typeof form.smtpPort === 'number' ? form.smtpPort : null,
+        smtpSecure: form.smtpSecure,
+        smtpUser: form.smtpUser || null,
+        imapHost: form.imapHost || null,
+        imapPort: typeof form.imapPort === 'number' ? form.imapPort : null,
+        imapUser: form.imapUser || null,
+        noreplyFromAddress: form.noreplyFromAddress || null,
+        templateBerthPdfBody: form.templateBerthPdfBody,
+        templateBrochureBody: form.templateBrochureBody,
+        brochureMaxUploadMb:
+          typeof form.brochureMaxUploadMb === 'number' ? form.brochureMaxUploadMb : null,
+        emailAttachThresholdMb:
+          typeof form.emailAttachThresholdMb === 'number' ? form.emailAttachThresholdMb : null,
+      };
+      // Only send password fields when the user actually typed something.
+      if (form.smtpPass !== '') payload.smtpPass = form.smtpPass;
+      if (form.imapPass !== '') payload.imapPass = form.imapPass;
+
+      await apiFetch('/api/v1/admin/email/sales-config', { method: 'PATCH', body: payload });
+      toast.success('Sales email settings saved');
+      await refresh();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Save failed');
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent className="flex items-center gap-2 py-6 text-sm text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" /> Loading sales email config…
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Sales send-from account</CardTitle>
+          <CardDescription>
+            SMTP credentials for human-touch outbound (brochures + per-berth PDFs). IMAP creds
+            enable the bounce monitor — leave blank to disable bounce-rejection banners. Passwords
+            are encrypted at rest and never returned by the API.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid gap-3 md:grid-cols-2">
+            <Field label="From address" id="sef-from">
+              <Input
+                id="sef-from"
+                type="email"
+                value={form.fromAddress}
+                onChange={(e) => update('fromAddress', e.target.value)}
+                placeholder="sales@portnimara.com"
+              />
+            </Field>
+            <Field label="SMTP host" id="sef-smtp-host">
+              <Input
+                id="sef-smtp-host"
+                value={form.smtpHost}
+                onChange={(e) => update('smtpHost', e.target.value)}
+                placeholder="smtp.gmail.com"
+              />
+            </Field>
+            <Field label="SMTP port" id="sef-smtp-port">
+              <Input
+                id="sef-smtp-port"
+                type="number"
+                value={form.smtpPort}
+                onChange={(e) =>
+                  update('smtpPort', e.target.value === '' ? '' : Number(e.target.value))
+                }
+              />
+            </Field>
+            <div className="flex items-end justify-between gap-2">
+              <Label htmlFor="sef-smtp-secure" className="text-sm">
+                SSL (true=465, false=STARTTLS on 587)
+              </Label>
+              <Switch
+                id="sef-smtp-secure"
+                checked={form.smtpSecure}
+                onCheckedChange={(v) => update('smtpSecure', v)}
+              />
+            </div>
+            <Field label="SMTP username" id="sef-smtp-user">
+              <Input
+                id="sef-smtp-user"
+                value={form.smtpUser}
+                onChange={(e) => update('smtpUser', e.target.value)}
+              />
+            </Field>
+            <Field
+              label={`SMTP password ${smtpPassSet ? '(stored — leave blank to keep)' : ''}`}
+              id="sef-smtp-pass"
+            >
+              <Input
+                id="sef-smtp-pass"
+                type="password"
+                value={form.smtpPass}
+                onChange={(e) => update('smtpPass', e.target.value)}
+                placeholder={smtpPassSet ? '••••••••' : 'app password'}
+              />
+            </Field>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Bounce monitor (IMAP)</CardTitle>
+          <CardDescription>
+            Required only for the async-bounce banner (§14.9). Same provider account as SMTP in most
+            setups.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-3 md:grid-cols-2">
+          <Field label="IMAP host" id="sef-imap-host">
+            <Input
+              id="sef-imap-host"
+              value={form.imapHost}
+              onChange={(e) => update('imapHost', e.target.value)}
+              placeholder="imap.gmail.com"
+            />
+          </Field>
+          <Field label="IMAP port" id="sef-imap-port">
+            <Input
+              id="sef-imap-port"
+              type="number"
+              value={form.imapPort}
+              onChange={(e) =>
+                update('imapPort', e.target.value === '' ? '' : Number(e.target.value))
+              }
+            />
+          </Field>
+          <Field label="IMAP username" id="sef-imap-user">
+            <Input
+              id="sef-imap-user"
+              value={form.imapUser}
+              onChange={(e) => update('imapUser', e.target.value)}
+            />
+          </Field>
+          <Field
+            label={`IMAP password ${imapPassSet ? '(stored — leave blank to keep)' : ''}`}
+            id="sef-imap-pass"
+          >
+            <Input
+              id="sef-imap-pass"
+              type="password"
+              value={form.imapPass}
+              onChange={(e) => update('imapPass', e.target.value)}
+              placeholder={imapPassSet ? '••••••••' : 'app password'}
+            />
+          </Field>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Body templates</CardTitle>
+          <CardDescription>
+            Default markdown bodies used when a rep doesn&rsquo;t write a custom one. Tokens like{' '}
+            <code>{'{{client.fullName}}'}</code> are expanded server-side.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Field label="Berth PDF body" id="sef-tmpl-berth">
+            <Textarea
+              id="sef-tmpl-berth"
+              rows={6}
+              value={form.templateBerthPdfBody}
+              onChange={(e) => update('templateBerthPdfBody', e.target.value)}
+              className="font-mono text-sm"
+            />
+          </Field>
+          <Field label="Brochure body" id="sef-tmpl-broc">
+            <Textarea
+              id="sef-tmpl-broc"
+              rows={6}
+              value={form.templateBrochureBody}
+              onChange={(e) => update('templateBrochureBody', e.target.value)}
+              className="font-mono text-sm"
+            />
+          </Field>
+          <div className="grid gap-3 md:grid-cols-2">
+            <Field label="Brochure max upload (MB)" id="sef-broc-max">
+              <Input
+                id="sef-broc-max"
+                type="number"
+                value={form.brochureMaxUploadMb}
+                onChange={(e) =>
+                  update('brochureMaxUploadMb', e.target.value === '' ? '' : Number(e.target.value))
+                }
+              />
+            </Field>
+            <Field label="Attach-vs-link threshold (MB)" id="sef-attach">
+              <Input
+                id="sef-attach"
+                type="number"
+                value={form.emailAttachThresholdMb}
+                onChange={(e) =>
+                  update(
+                    'emailAttachThresholdMb',
+                    e.target.value === '' ? '' : Number(e.target.value),
+                  )
+                }
+              />
+            </Field>
+          </div>
+          <Field label="Noreply from address" id="sef-noreply">
+            <Input
+              id="sef-noreply"
+              type="email"
+              value={form.noreplyFromAddress}
+              onChange={(e) => update('noreplyFromAddress', e.target.value)}
+            />
+          </Field>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button onClick={handleSave} disabled={saving}>
+          {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          Save sales email settings
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function Field({ label, id, children }: { label: string; id: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1">
+      <Label htmlFor={id}>{label}</Label>
+      {children}
+    </div>
+  );
+}

src/components/berths/send-berth-pdf-dialog.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+/**
+ * Berth-detail "Send to client" dialog (Phase 7 §5.6 / §5.7).
+ *
+ * Thin wrapper around {@link SendDocumentDialog} that pins documentKind to
+ * `berth_pdf`. Used by the berth detail page header action and by the
+ * recommender panel quick-send shortcut.
+ */
+import { SendDocumentDialog } from '@/components/shared/send-document-dialog';
+
+interface SendBerthPdfDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  berthId: string;
+  berthMooringNumber: string;
+  recipient: { clientId?: string; email?: string; interestId?: string };
+  onSent?: () => void;
+}
+
+export function SendBerthPdfDialog({
+  open,
+  onOpenChange,
+  berthId,
+  berthMooringNumber,
+  recipient,
+  onSent,
+}: SendBerthPdfDialogProps) {
+  return (
+    <SendDocumentDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      documentKind="berth_pdf"
+      recipient={recipient}
+      context={{ berthId }}
+      title={`Send berth ${berthMooringNumber} spec sheet`}
+      subtitle="The current PDF version is attached automatically."
+      onSent={onSent}
+    />
+  );
+}

src/components/clients/send-documents-dialog.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+/**
+ * Client-detail multi-step "Send documents" dialog (Phase 7 §5.7).
+ *
+ * The client header action opens this dialog. The rep picks one of the
+ * client's interest-linked berths (to send a per-berth PDF) OR a brochure
+ * (defaults to the port default when unspecified). The actual send flow
+ * delegates to {@link SendDocumentDialog}; this wrapper is the picker.
+ */
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { FileText, Loader2, Mail } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { SendDocumentDialog } from '@/components/shared/send-document-dialog';
+import { apiFetch } from '@/lib/api/client';
+
+interface SendDocumentsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  clientId: string;
+  clientName: string;
+  /** When the rep is launching from a specific interest, pin it. */
+  interestId?: string;
+}
+
+interface BrochureOption {
+  id: string;
+  label: string;
+  isDefault: boolean;
+  archivedAt: string | null;
+  versionCount: number;
+}
+
+interface BrochuresResponse {
+  data: BrochureOption[];
+}
+
+export function SendDocumentsDialog({
+  open,
+  onOpenChange,
+  clientId,
+  clientName,
+  interestId,
+}: SendDocumentsDialogProps) {
+  const [activeSend, setActiveSend] = useState<
+    | { kind: 'brochure'; brochureId?: string }
+    | { kind: 'berth_pdf'; berthId: string; mooring: string }
+    | null
+  >(null);
+
+  // Lightweight brochures fetch — only fires once dialog is opened.
+  const brochuresQuery = useQuery<BrochuresResponse>({
+    queryKey: ['brochures', 'list'],
+    queryFn: () => apiFetch('/api/v1/admin/brochures'),
+    enabled: open,
+  });
+
+  const usableBrochures =
+    brochuresQuery.data?.data.filter((b) => !b.archivedAt && b.versionCount > 0) ?? [];
+
+  return (
+    <>
+      <Dialog open={open && activeSend === null} onOpenChange={onOpenChange}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Send documents to {clientName}</DialogTitle>
+            <DialogDescription>
+              Pick a brochure or open the berth detail page to send a per-berth spec sheet.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3">
+            <div>
+              <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold">
+                <Mail className="h-4 w-4" /> Brochures
+              </h3>
+              {brochuresQuery.isLoading && (
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <Loader2 className="h-4 w-4 animate-spin" /> Loading brochures…
+                </div>
+              )}
+              {!brochuresQuery.isLoading && usableBrochures.length === 0 && (
+                <p className="text-sm text-muted-foreground">
+                  No brochures uploaded yet. Add one in /admin/brochures.
+                </p>
+              )}
+              <div className="space-y-2">
+                {usableBrochures.map((b) => (
+                  <Button
+                    key={b.id}
+                    variant="outline"
+                    className="w-full justify-between"
+                    onClick={() => setActiveSend({ kind: 'brochure', brochureId: b.id })}
+                  >
+                    <span className="flex items-center gap-2">
+                      <FileText className="h-4 w-4" />
+                      {b.label}
+                      {b.isDefault && (
+                        <span className="rounded bg-primary/10 px-2 py-0.5 text-xs text-primary">
+                          default
+                        </span>
+                      )}
+                    </span>
+                    <span className="text-xs text-muted-foreground">{b.versionCount} ver.</span>
+                  </Button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Close
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {activeSend?.kind === 'brochure' && (
+        <SendDocumentDialog
+          open
+          onOpenChange={(o) => {
+            if (!o) {
+              setActiveSend(null);
+              onOpenChange(false);
+            }
+          }}
+          documentKind="brochure"
+          recipient={{ clientId, interestId }}
+          context={{ brochureId: activeSend.brochureId }}
+          title={`Send brochure to ${clientName}`}
+          onSent={() => setActiveSend(null)}
+        />
+      )}
+
+      {activeSend?.kind === 'berth_pdf' && (
+        <SendDocumentDialog
+          open
+          onOpenChange={(o) => {
+            if (!o) {
+              setActiveSend(null);
+              onOpenChange(false);
+            }
+          }}
+          documentKind="berth_pdf"
+          recipient={{ clientId, interestId }}
+          context={{ berthId: activeSend.berthId }}
+          title={`Send berth ${activeSend.mooring} spec sheet`}
+          onSent={() => setActiveSend(null)}
+        />
+      )}
+    </>
+  );
+}

src/components/interests/send-from-interest-button.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+/**
+ * Per-interest send launcher (Phase 7 §5.9).
+ *
+ * Shown on the interest detail page header. Opens the same picker as
+ * {@link SendDocumentsDialog} but pre-pins the `interestId` so the resulting
+ * audit row is filed against the interest timeline.
+ */
+import { useState } from 'react';
+import { Send } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { SendDocumentsDialog } from '@/components/clients/send-documents-dialog';
+
+interface SendFromInterestButtonProps {
+  interestId: string;
+  clientId: string;
+  clientName: string;
+}
+
+export function SendFromInterestButton({
+  interestId,
+  clientId,
+  clientName,
+}: SendFromInterestButtonProps) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        <Send className="mr-2 h-4 w-4" /> Send documents
+      </Button>
+      <SendDocumentsDialog
+        open={open}
+        onOpenChange={setOpen}
+        clientId={clientId}
+        clientName={clientName}
+        interestId={interestId}
+      />
+    </>
+  );
+}

src/components/shared/send-document-dialog.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+/**
+ * Shared send-document dialog (Phase 7).
+ *
+ * Used by:
+ *   - {@link SendBerthPdfDialog} (berths/) — single berth, recipient picker.
+ *   - {@link SendBrochureDialog}    (clients/, interests/) — brochure picker.
+ *   - The interest "send from interest" pattern reuses both via a wrapper.
+ *
+ * §14.7 mitigations enforced client-side:
+ *   - Recipient email is shown verbatim in the confirm step (no quick-send).
+ *   - Pre-send dry-run calls /preview first; the Send button is disabled
+ *     until the unresolved-tokens list is empty.
+ *   - Body length capped at 50KB; char count visible.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { Loader2 } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Input } from '@/components/ui/input';
+import { apiFetch } from '@/lib/api/client';
+
+const BODY_MAX = 50_000;
+
+export type DocumentKind = 'berth_pdf' | 'brochure';
+
+interface SendDocumentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  documentKind: DocumentKind;
+  /** Pre-filled recipient. Leave both blank to let the rep type one. */
+  recipient: { clientId?: string; email?: string; interestId?: string };
+  /** Either a berthId (for berth_pdf) or brochureId (for brochure). */
+  context: { berthId?: string; brochureId?: string };
+  /** Title displayed in the dialog header. */
+  title: string;
+  /** Short context line under the title (e.g. "Berth A1 — primary version"). */
+  subtitle?: string;
+  onSent?: () => void;
+}
+
+interface PreviewResponse {
+  data: { html: string; markdown: string; unresolved: string[] };
+}
+
+export function SendDocumentDialog({
+  open,
+  onOpenChange,
+  documentKind,
+  recipient,
+  context,
+  title,
+  subtitle,
+  onSent,
+}: SendDocumentDialogProps) {
+  const [step, setStep] = useState<'compose' | 'confirm'>('compose');
+  const [emailOverride, setEmailOverride] = useState(recipient.email ?? '');
+  const [customBody, setCustomBody] = useState('');
+
+  useEffect(() => {
+    if (open) {
+      setStep('compose');
+      setEmailOverride(recipient.email ?? '');
+      setCustomBody('');
+    }
+  }, [open, recipient.email]);
+
+  const recipientForApi = useMemo(
+    () => ({
+      clientId: recipient.clientId,
+      email: emailOverride || recipient.email,
+      interestId: recipient.interestId,
+    }),
+    [recipient.clientId, recipient.email, recipient.interestId, emailOverride],
+  );
+
+  // Live preview via /api/v1/document-sends/preview. Re-runs whenever the
+  // body text or recipient changes (debounce-by-react-query for free).
+  const previewQuery = useQuery<PreviewResponse>({
+    queryKey: [
+      'document-sends-preview',
+      documentKind,
+      context.berthId ?? null,
+      context.brochureId ?? null,
+      recipientForApi.clientId ?? null,
+      recipientForApi.email ?? null,
+      customBody,
+    ],
+    queryFn: () =>
+      apiFetch('/api/v1/document-sends/preview', {
+        method: 'POST',
+        body: {
+          documentKind,
+          recipient: recipientForApi,
+          berthId: context.berthId,
+          brochureId: context.brochureId,
+          customBodyMarkdown: customBody.trim() ? customBody : undefined,
+        },
+      }),
+    enabled: open && Boolean(recipientForApi.clientId || recipientForApi.email),
+  });
+
+  type SendResp = { data: { error?: string; deliveredAsAttachment: boolean } };
+  const sendMutation = useMutation<SendResp, Error, void>({
+    mutationFn: async (): Promise<SendResp> => {
+      const endpoint =
+        documentKind === 'berth_pdf'
+          ? '/api/v1/document-sends/berth-pdf'
+          : '/api/v1/document-sends/brochure';
+      const body =
+        documentKind === 'berth_pdf'
+          ? {
+              berthId: context.berthId,
+              recipient: recipientForApi,
+              customBodyMarkdown: customBody.trim() ? customBody : undefined,
+            }
+          : {
+              brochureId: context.brochureId,
+              recipient: recipientForApi,
+              customBodyMarkdown: customBody.trim() ? customBody : undefined,
+            };
+      return (await apiFetch<SendResp>(endpoint, { method: 'POST', body })) as SendResp;
+    },
+    onSuccess: (resp) => {
+      if (resp.data.error) {
+        toast.error(`Send failed: ${resp.data.error}`);
+      } else {
+        toast.success(
+          resp.data.deliveredAsAttachment
+            ? 'Sent as attachment'
+            : 'Sent (large file delivered as download link)',
+        );
+        onSent?.();
+        onOpenChange(false);
+      }
+    },
+    onError: (err) => {
+      toast.error(err instanceof Error ? err.message : 'Send failed');
+    },
+  });
+
+  const unresolved = previewQuery.data?.data.unresolved ?? [];
+  const previewHtml = previewQuery.data?.data.html ?? '';
+
+  const recipientResolved = Boolean(recipientForApi.clientId || recipientForApi.email);
+  const canPreview = recipientResolved;
+  const canSend = step === 'confirm' && unresolved.length === 0 && !sendMutation.isPending;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {subtitle && <DialogDescription>{subtitle}</DialogDescription>}
+        </DialogHeader>
+
+        {step === 'compose' ? (
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Label htmlFor="ds-email">Recipient email</Label>
+              <Input
+                id="ds-email"
+                type="email"
+                value={emailOverride}
+                onChange={(e) => setEmailOverride(e.target.value)}
+                placeholder={recipient.email ? '' : 'recipient@example.com'}
+              />
+              <p className="text-xs text-muted-foreground">
+                {recipient.clientId
+                  ? 'Defaults to the client primary email; override here if needed.'
+                  : 'Type the address you want to send to.'}
+              </p>
+            </div>
+
+            <div className="space-y-1">
+              <Label htmlFor="ds-body">Message body</Label>
+              <Textarea
+                id="ds-body"
+                rows={10}
+                value={customBody}
+                onChange={(e) => setCustomBody(e.target.value.slice(0, BODY_MAX))}
+                placeholder="Leave blank to use the port template…"
+                className="font-mono text-sm"
+              />
+              <div className="flex items-center justify-between text-xs text-muted-foreground">
+                <span>Markdown supported. Tokens like {'{{client.fullName}}'} are expanded.</span>
+                <span>
+                  {customBody.length} / {BODY_MAX}
+                </span>
+              </div>
+            </div>
+
+            {canPreview && previewQuery.isSuccess && (
+              <div className="rounded border bg-muted/30 p-3">
+                <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  Preview
+                </p>
+                <div
+                  className="prose prose-sm max-w-none"
+                  dangerouslySetInnerHTML={{ __html: previewHtml }}
+                />
+                {unresolved.length > 0 && (
+                  <p className="mt-3 rounded border border-amber-300 bg-amber-50 p-2 text-xs text-amber-900">
+                    Unresolved merge fields: {unresolved.join(', ')}. Replace these before sending.
+                  </p>
+                )}
+              </div>
+            )}
+            {previewQuery.isLoading && canPreview && (
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Loader2 className="h-4 w-4 animate-spin" /> Rendering preview…
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <div className="rounded border bg-muted/30 p-3 text-sm">
+              <p>
+                Sending to: <span className="font-mono">{recipientForApi.email}</span>
+              </p>
+              {context.berthId && <p>Document: berth PDF</p>}
+              {context.brochureId !== undefined && <p>Document: brochure</p>}
+            </div>
+            <div
+              className="prose prose-sm max-w-none rounded border p-3"
+              dangerouslySetInnerHTML={{ __html: previewHtml }}
+            />
+            <p className="text-xs text-muted-foreground">
+              The PDF file is added by the system after the body — your text won&rsquo;t override
+              it.
+            </p>
+          </div>
+        )}
+
+        <DialogFooter className="gap-2">
+          {step === 'compose' ? (
+            <>
+              <Button variant="outline" onClick={() => onOpenChange(false)}>
+                Cancel
+              </Button>
+              <Button
+                onClick={() => setStep('confirm')}
+                disabled={!recipientResolved || unresolved.length > 0 || previewQuery.isLoading}
+              >
+                Review & send
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button variant="outline" onClick={() => setStep('compose')}>
+                Back
+              </Button>
+              <Button onClick={() => sendMutation.mutate()} disabled={!canSend}>
+                {sendMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Confirm and send
+              </Button>
+            </>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}