From 955fdeee41953997b4482030d5924daa4bec6690 Mon Sep 17 00:00:00 2001
From: Oleg <ogrechko@top-sysops.ru>
Date: Wed, 19 Aug 2026 07:40:19 +0000
Subject: [PATCH] Preserve email formatting in ticket display; paste-to-attach
 screenshots in replies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Inbound HTML emails were being flattened through html-to-text for display,
which lost all formatting and — for images embedded as data: URIs — leaked
the raw base64 as visible "[data:image/png;base64,...]" link text (an
Outlook/webmail screenshot-paste artifact). Customer messages now also
store a sanitized HTML rendering (messages.body_html) that preserves the
sender's fonts/colors/layout and shows inline images (data: URIs render
natively; cid: references are rewritten to the matching attachment's
serving URL via a new attachments.content_id column). Sanitization is a
tag/style allowlist (lib/mail/sanitize-html.ts, covered by
sanitize-html.test.ts) — no script/event handlers/javascript: hrefs, no
layout-breaking CSS. The plain-text fallback (used for channels other than
email) also drops image/data-URI link text via html-to-text selectors, for
the same underlying bug on that path.

Also: pasting a screenshot (Ctrl+V) into the agent reply box now attaches
it directly, reusing the existing attachment-upload/email-delivery path —
no more "save to disk, then click attach" round trip.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GteWhnWKTmnXcsd5jx6H7u
---
 package-lock.json                             |   65 +-
 package.json                                  |    2 +
 .../(admin)/tickets/[id]/ticket-thread.tsx    |   26 +-
 .../t/[token]/[ticketId]/portal-thread.tsx    |    7 +-
 src/components/message-body-html.tsx          |   12 +
 src/lib/db/migrations/0007_neat_archangel.sql |    2 +
 src/lib/db/migrations/meta/0007_snapshot.json | 1042 +++++++++++++++++
 src/lib/db/migrations/meta/_journal.json      |    7 +
 src/lib/db/schema.ts                          |   10 +
 src/lib/mail/imap.ts                          |   44 +-
 src/lib/mail/sanitize-html.test.ts            |   50 +
 src/lib/mail/sanitize-html.ts                 |   58 +
 src/lib/tickets/service.ts                    |   14 +-
 src/lib/tickets/types.ts                      |    1 +
 14 files changed, 1332 insertions(+), 8 deletions(-)
 create mode 100644 src/components/message-body-html.tsx
 create mode 100644 src/lib/db/migrations/0007_neat_archangel.sql
 create mode 100644 src/lib/db/migrations/meta/0007_snapshot.json
 create mode 100644 src/lib/mail/sanitize-html.test.ts
 create mode 100644 src/lib/mail/sanitize-html.ts

diff --git a/package-lock.json b/package-lock.json
index 660820f..cabfb3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "nodemailer": "^9.0.3",
         "react": "19.2.4",
         "react-dom": "19.2.4",
+        "sanitize-html": "^2.13.1",
         "telegraf": "^4.16.3",
         "web-push": "^3.6.7",
         "zod": "^4.4.3"
@@ -34,6 +35,7 @@
         "@types/nodemailer": "^8.0.1",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@types/sanitize-html": "^2.16.1",
         "@types/web-push": "^3.6.4",
         "drizzle-kit": "^0.31.10",
         "eslint": "^9",
@@ -2879,6 +2881,15 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/sanitize-html": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@types/sanitize-html/-/sanitize-html-2.16.1.tgz",
+      "integrity": "sha512-n9wjs8bCOTyN/ynwD8s/nTcTreIHB1vf31vhLMGqUPNHaweKC4/fAl4Dj+hUlCTKYgm4P3k83fmiFfzkZ6sgMA==",
+      "dev": true,
+      "dependencies": {
+        "htmlparser2": "^10.1"
+      }
+    },
     "node_modules/@types/web-push": {
       "version": "3.6.4",
       "resolved": "https://registry.npmjs.org/@types/web-push/-/web-push-3.6.4.tgz",
@@ -4434,6 +4445,14 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/deepmerge-ts": {
       "version": "7.1.5",
       "resolved": "https://registry.npmjs.org/deepmerge-ts/-/deepmerge-ts-7.1.5.tgz",
@@ -5010,7 +5029,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -6373,6 +6391,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -7620,6 +7646,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q=="
+    },
     "node_modules/parseley": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/parseley/-/parseley-0.13.1.tgz",
@@ -7742,7 +7773,6 @@
       "version": "8.5.23",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.23.tgz",
       "integrity": "sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -8214,6 +8244,37 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/sanitize-html": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.13.1.tgz",
+      "integrity": "sha512-ZXtKq89oue4RP7abL9wp/9URJcqQNABB5GGJ2acW1sdO8JTVl92f4ygD7Yc9Ze09VAZhnt2zegeU0tbNsdcLYg==",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
diff --git a/package.json b/package.json
index 825abd4..f04cf88 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "nodemailer": "^9.0.3",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "sanitize-html": "^2.13.1",
     "telegraf": "^4.16.3",
     "web-push": "^3.6.7",
     "zod": "^4.4.3"
@@ -40,6 +41,7 @@
     "@types/nodemailer": "^8.0.1",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/sanitize-html": "^2.16.1",
     "@types/web-push": "^3.6.4",
     "drizzle-kit": "^0.31.10",
     "eslint": "^9",
diff --git a/src/app/(admin)/tickets/[id]/ticket-thread.tsx b/src/app/(admin)/tickets/[id]/ticket-thread.tsx
index 6cea06d..4ea0513 100644
--- a/src/app/(admin)/tickets/[id]/ticket-thread.tsx
+++ b/src/app/(admin)/tickets/[id]/ticket-thread.tsx
@@ -8,6 +8,7 @@ import { useTicketEvents } from "@/lib/events/use-ticket-events";
 import { formatRelativeTime } from "@/lib/format";
 import { Avatar } from "@/components/avatar";
 import { AttachmentChip } from "@/components/attachment-chip";
+import { MessageBodyHtml } from "@/components/message-body-html";
 import { TagPicker } from "./tag-picker";
 import type { TicketDTO, MessageDTO, TicketStatus } from "@/lib/tickets/types";
 
@@ -234,6 +235,19 @@ export function TicketThread({
                 sendReply();
               }
             }}
+            onPaste={(e) => {
+              // Ctrl+V a screenshot straight from the clipboard — no need to
+              // save it to disk first and click "attach file". Only kicks in
+              // when the clipboard actually holds image data; a normal text
+              // paste falls through untouched.
+              const item = Array.from(e.clipboardData.items).find((i) => i.kind === "file" && i.type.startsWith("image/"));
+              if (!item) return;
+              const file = item.getAsFile();
+              if (!file) return;
+              e.preventDefault();
+              const extension = item.type.split("/")[1] ?? "png";
+              setPendingFile(new File([file], `screenshot-${Date.now()}.${extension}`, { type: item.type }));
+            }}
             rows={2}
             placeholder={visibility === "internal" ? "Заметка — клиент её не увидит…" : "Ответить клиенту…"}
             className={`flex-1 resize-none rounded-md border px-3 py-2 text-sm outline-none ${
@@ -314,7 +328,11 @@ function MessageBubble({ message }: { message: MessageDTO }) {
           <StickyNote size={11} />
           Внутренняя заметка
         </p>
-        <p className="mb-1 whitespace-pre-wrap text-sm">{message.body}</p>
+        {message.bodyHtml ? (
+          <MessageBodyHtml html={message.bodyHtml} className="mb-1" />
+        ) : (
+          <p className="mb-1 whitespace-pre-wrap text-sm">{message.body}</p>
+        )}
         {message.attachments.map((a) => (
           <AttachmentChip key={a.id} attachment={a} />
         ))}
@@ -334,7 +352,11 @@ function MessageBubble({ message }: { message: MessageDTO }) {
       className={`mb-3 flex ${isAgent ? "justify-end" : "justify-start"}`}
     >
       <div className={`max-w-[75%] rounded-lg px-3 py-2 text-sm ${isAgent ? "bg-accent text-white" : "bg-surface-hover"}`}>
-        <p className="mb-1 whitespace-pre-wrap">{message.body}</p>
+        {message.bodyHtml ? (
+          <MessageBodyHtml html={message.bodyHtml} className="mb-1" />
+        ) : (
+          <p className="mb-1 whitespace-pre-wrap">{message.body}</p>
+        )}
         {message.attachments.map((a) => (
           <AttachmentChip key={a.id} attachment={a} />
         ))}
diff --git a/src/app/(portal)/t/[token]/[ticketId]/portal-thread.tsx b/src/app/(portal)/t/[token]/[ticketId]/portal-thread.tsx
index f96bf45..7c0baae 100644
--- a/src/app/(portal)/t/[token]/[ticketId]/portal-thread.tsx
+++ b/src/app/(portal)/t/[token]/[ticketId]/portal-thread.tsx
@@ -7,6 +7,7 @@ import { ArrowLeft, Send, Paperclip, X } from "lucide-react";
 import { useTicketEvents } from "@/lib/events/use-ticket-events";
 import { formatRelativeTime } from "@/lib/format";
 import { AttachmentChip } from "@/components/attachment-chip";
+import { MessageBodyHtml } from "@/components/message-body-html";
 import type { TicketDTO, MessageDTO } from "@/lib/tickets/types";
 
 export function PortalThread({
@@ -153,7 +154,11 @@ function MessageBubble({
       className={`mb-3 flex ${isMine ? "justify-end" : "justify-start"}`}
     >
       <div className={`max-w-[75%] rounded-lg px-3 py-2 text-sm ${isMine ? "bg-accent text-white" : "bg-surface-hover"}`}>
-        <p className="mb-1 whitespace-pre-wrap">{message.body}</p>
+        {message.bodyHtml ? (
+          <MessageBodyHtml html={message.bodyHtml} className="mb-1" />
+        ) : (
+          <p className="mb-1 whitespace-pre-wrap">{message.body}</p>
+        )}
         {message.attachments.map((a) => (
           <AttachmentChip key={a.id} attachment={a} token={token} />
         ))}
diff --git a/src/components/message-body-html.tsx b/src/components/message-body-html.tsx
new file mode 100644
index 0000000..8d7b279
--- /dev/null
+++ b/src/components/message-body-html.tsx
@@ -0,0 +1,12 @@
+// message.bodyHtml is already sanitized server-side (see
+// lib/mail/sanitize-html.ts) before it's ever stored — this only adds
+// layout containment so an email's inline styles/tables can't blow out the
+// message bubble's width.
+export function MessageBodyHtml({ html, className = "" }: { html: string; className?: string }) {
+  return (
+    <div
+      className={`max-w-full overflow-x-auto text-sm break-words [&_img]:max-w-full [&_table]:max-w-full [&_td]:break-words [&_th]:break-words ${className}`}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
diff --git a/src/lib/db/migrations/0007_neat_archangel.sql b/src/lib/db/migrations/0007_neat_archangel.sql
new file mode 100644
index 0000000..c8e31d7
--- /dev/null
+++ b/src/lib/db/migrations/0007_neat_archangel.sql
@@ -0,0 +1,2 @@
+ALTER TABLE `attachments` ADD `content_id` text;--> statement-breakpoint
+ALTER TABLE `messages` ADD `body_html` text;
\ No newline at end of file
diff --git a/src/lib/db/migrations/meta/0007_snapshot.json b/src/lib/db/migrations/meta/0007_snapshot.json
new file mode 100644
index 0000000..64fc827
--- /dev/null
+++ b/src/lib/db/migrations/meta/0007_snapshot.json
@@ -0,0 +1,1042 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "f3f7178d-b3ff-4333-af59-11273f1c5d36",
+  "prevId": "a70ac1d2-a318-4822-94a1-a53ada857a0c",
+  "tables": {
+    "attachments": {
+      "name": "attachments",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "message_id": {
+          "name": "message_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "filename": {
+          "name": "filename",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "mime_type": {
+          "name": "mime_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "size_bytes": {
+          "name": "size_bytes",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "storage_key": {
+          "name": "storage_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content_id": {
+          "name": "content_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "attachments_message_id_messages_id_fk": {
+          "name": "attachments_message_id_messages_id_fk",
+          "tableFrom": "attachments",
+          "tableTo": "messages",
+          "columnsFrom": [
+            "message_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "canned_responses": {
+      "name": "canned_responses",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "body": {
+          "name": "body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "customers": {
+      "name": "customers",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "display_name": {
+          "name": "display_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "telegram_chat_id": {
+          "name": "telegram_chat_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "portal_token": {
+          "name": "portal_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {
+        "customers_telegram_chat_id_unique": {
+          "name": "customers_telegram_chat_id_unique",
+          "columns": [
+            "telegram_chat_id"
+          ],
+          "isUnique": true
+        },
+        "customers_portal_token_unique": {
+          "name": "customers_portal_token_unique",
+          "columns": [
+            "portal_token"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "ldap_config": {
+      "name": "ldap_config",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "host": {
+          "name": "host",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "port": {
+          "name": "port",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 389
+        },
+        "use_tls": {
+          "name": "use_tls",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "bind_dn": {
+          "name": "bind_dn",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "bind_password_enc": {
+          "name": "bind_password_enc",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "base_dn": {
+          "name": "base_dn",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_filter": {
+          "name": "user_filter",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'(mail={{email}})'"
+        },
+        "list_filter": {
+          "name": "list_filter",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'(objectClass=person)'"
+        },
+        "default_role": {
+          "name": "default_role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'agent'"
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "verified_at": {
+          "name": "verified_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "mailbox_config": {
+      "name": "mailbox_config",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "imap_host": {
+          "name": "imap_host",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "imap_port": {
+          "name": "imap_port",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 993
+        },
+        "smtp_host": {
+          "name": "smtp_host",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "smtp_port": {
+          "name": "smtp_port",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 587
+        },
+        "user": {
+          "name": "user",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password_enc": {
+          "name": "password_enc",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "allow_insecure_tls": {
+          "name": "allow_insecure_tls",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "verified_at": {
+          "name": "verified_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "messages": {
+      "name": "messages",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "ticket_id": {
+          "name": "ticket_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "author_type": {
+          "name": "author_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "author_id": {
+          "name": "author_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "author_name": {
+          "name": "author_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "body": {
+          "name": "body",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "body_html": {
+          "name": "body_html",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "direction": {
+          "name": "direction",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visibility": {
+          "name": "visibility",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'public'"
+        },
+        "email_message_id": {
+          "name": "email_message_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "messages_ticket_id_tickets_id_fk": {
+          "name": "messages_ticket_id_tickets_id_fk",
+          "tableFrom": "messages",
+          "tableTo": "tickets",
+          "columnsFrom": [
+            "ticket_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "push_subscriptions": {
+      "name": "push_subscriptions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "endpoint": {
+          "name": "endpoint",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "p256dh": {
+          "name": "p256dh",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "auth": {
+          "name": "auth",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {
+        "push_subscriptions_endpoint_unique": {
+          "name": "push_subscriptions_endpoint_unique",
+          "columns": [
+            "endpoint"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "push_subscriptions_user_id_users_id_fk": {
+          "name": "push_subscriptions_user_id_users_id_fk",
+          "tableFrom": "push_subscriptions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "sessions": {
+      "name": "sessions",
+      "columns": {
+        "token_hash": {
+          "name": "token_hash",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sessions_user_id_users_id_fk": {
+          "name": "sessions_user_id_users_id_fk",
+          "tableFrom": "sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "tags": {
+      "name": "tags",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "color": {
+          "name": "color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'accent'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {
+        "tags_name_unique": {
+          "name": "tags_name_unique",
+          "columns": [
+            "name"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "telegram_config": {
+      "name": "telegram_config",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "bot_token_enc": {
+          "name": "bot_token_enc",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "bot_username": {
+          "name": "bot_username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "verified_at": {
+          "name": "verified_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "ticket_tags": {
+      "name": "ticket_tags",
+      "columns": {
+        "ticket_id": {
+          "name": "ticket_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "tag_id": {
+          "name": "tag_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "ticket_tags_ticket_id_tickets_id_fk": {
+          "name": "ticket_tags_ticket_id_tickets_id_fk",
+          "tableFrom": "ticket_tags",
+          "tableTo": "tickets",
+          "columnsFrom": [
+            "ticket_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "ticket_tags_tag_id_tags_id_fk": {
+          "name": "ticket_tags_tag_id_tags_id_fk",
+          "tableFrom": "ticket_tags",
+          "tableTo": "tags",
+          "columnsFrom": [
+            "tag_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "ticket_tags_ticket_id_tag_id_pk": {
+          "columns": [
+            "ticket_id",
+            "tag_id"
+          ],
+          "name": "ticket_tags_ticket_id_tag_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "tickets": {
+      "name": "tickets",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "subject": {
+          "name": "subject",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "status": {
+          "name": "status",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'new'"
+        },
+        "priority": {
+          "name": "priority",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'normal'"
+        },
+        "channel": {
+          "name": "channel",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "customer_id": {
+          "name": "customer_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "assignee_id": {
+          "name": "assignee_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "last_message_at": {
+          "name": "last_message_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "tickets_customer_id_customers_id_fk": {
+          "name": "tickets_customer_id_customers_id_fk",
+          "tableFrom": "tickets",
+          "tableTo": "customers",
+          "columnsFrom": [
+            "customer_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "tickets_assignee_id_users_id_fk": {
+          "name": "tickets_assignee_id_users_id_fk",
+          "tableFrom": "tickets",
+          "tableTo": "users",
+          "columnsFrom": [
+            "assignee_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "password_hash": {
+          "name": "password_hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "role": {
+          "name": "role",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'agent'"
+        },
+        "auth_source": {
+          "name": "auth_source",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'local'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "widget_sites": {
+      "name": "widget_sites",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "site_key": {
+          "name": "site_key",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "allowed_origin": {
+          "name": "allowed_origin",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "(unixepoch('subsec') * 1000)"
+        }
+      },
+      "indexes": {
+        "widget_sites_site_key_unique": {
+          "name": "widget_sites_site_key_unique",
+          "columns": [
+            "site_key"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
\ No newline at end of file
diff --git a/src/lib/db/migrations/meta/_journal.json b/src/lib/db/migrations/meta/_journal.json
index a93fcf7..b230d00 100644
--- a/src/lib/db/migrations/meta/_journal.json
+++ b/src/lib/db/migrations/meta/_journal.json
@@ -50,6 +50,13 @@
       "when": 1786130418783,
       "tag": "0006_big_daredevil",
       "breakpoints": true
+    },
+    {
+      "idx": 7,
+      "version": "6",
+      "when": 1787124609684,
+      "tag": "0007_neat_archangel",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/src/lib/db/schema.ts b/src/lib/db/schema.ts
index 88a3f09..2e8a77e 100644
--- a/src/lib/db/schema.ts
+++ b/src/lib/db/schema.ts
@@ -89,6 +89,11 @@ export const messages = sqliteTable("messages", {
   authorId: text("author_id"),
   authorName: text("author_name").notNull(),
   body: text("body").notNull(),
+  // Sanitized HTML, set only for inbound email messages that had an HTML
+  // part — preserves the sender's original formatting (fonts, layout,
+  // inline images) instead of the flattened plain-text `body`. Null for
+  // every other channel/direction, which keeps rendering the plain body.
+  bodyHtml: text("body_html"),
   direction: text("direction", { enum: ["in", "out"] }).notNull(),
   // "internal" notes are agent-only — never sent to the customer over any
   // channel, and filtered out of every customer-facing read path (portal,
@@ -177,6 +182,11 @@ export const attachments = sqliteTable("attachments", {
   sizeBytes: integer("size_bytes").notNull(),
   // Relative path under DATA_DIR/attachments/ — see src/lib/attachments/storage.ts.
   storageKey: text("storage_key").notNull(),
+  // The email's Content-ID header (no angle brackets) for an inline image —
+  // only set for attachments extracted from an HTML email body, used to
+  // rewrite `cid:` references in messages.bodyHtml to this attachment's
+  // serving URL. Null for regular (non-inline) attachments.
+  contentId: text("content_id"),
   createdAt: timestamps.createdAt,
 });
 
diff --git a/src/lib/mail/imap.ts b/src/lib/mail/imap.ts
index 988bf19..1b3527b 100644
--- a/src/lib/mail/imap.ts
+++ b/src/lib/mail/imap.ts
@@ -1,9 +1,11 @@
+import crypto from "node:crypto";
 import { ImapFlow } from "imapflow";
 import { simpleParser, type ParsedMail } from "mailparser";
 import { htmlToText } from "html-to-text";
 import { getMailboxSettings, saveMailboxSettings, disableMailboxConfig, type MailboxSettings } from "@/lib/mail/config";
 import { recordEmailInboundMessage } from "@/lib/tickets/service";
 import { saveAttachment } from "@/lib/attachments/storage";
+import { sanitizeEmailHtml } from "@/lib/mail/sanitize-html";
 
 interface ListenerState {
   client: ImapFlow | null;
@@ -33,15 +35,44 @@ function createClient(settings: MailboxSettings): ImapFlow {
 // blindly — some senders (Outlook in particular) produce a text/plain
 // alternative that isn't actually clean, while html-to-text reliably drops
 // <head>/<style> content (e.g. Outlook's VML behavior: url(...) rules) and
-// decodes entities, which a naive tag-stripping regex cannot do.
+// decodes entities, which a naive tag-stripping regex cannot do. Images and
+// any link whose href is itself a cid:/data: URI are skipped entirely — the
+// alternative is a multi-KB base64 blob or a bare `cid:...` token leaking
+// into the plain-text fallback as visible "text". The real HTML rendering
+// (bodyHtml, built in handleRawMessage) is what actually shows the images.
 function extractBody(parsed: ParsedMail): string {
   if (typeof parsed.html === "string") {
-    return htmlToText(parsed.html, { baseElements: { selectors: ["body"] }, wordwrap: false }).trim();
+    return htmlToText(parsed.html, {
+      baseElements: { selectors: ["body"] },
+      wordwrap: false,
+      selectors: [
+        { selector: "img", format: "skip" },
+        { selector: 'a[href^="data:"]', format: "skip" },
+        { selector: 'a[href^="cid:"]', format: "skip" },
+      ],
+    }).trim();
   }
   if (parsed.text) return parsed.text;
   return "(пустое письмо)";
 }
 
+/**
+ * Sanitizes the HTML part for display and rewrites `cid:` inline-image
+ * references to the URL the matching attachment will be served from —
+ * `attachmentIdByCid` must already reflect the IDs the attachments are about
+ * to be inserted with (see handleRawMessage, which generates them upfront
+ * for exactly this reason). Data-URI images need no rewriting; the browser
+ * renders those natively once real HTML (not flattened text) reaches the UI.
+ */
+function extractHtmlBody(parsed: ParsedMail, attachmentIdByCid: Map<string, string>): string | null {
+  if (typeof parsed.html !== "string") return null;
+  let html = parsed.html;
+  for (const [cid, attachmentId] of attachmentIdByCid) {
+    html = html.split(`cid:${cid}`).join(`/api/attachments/${attachmentId}`);
+  }
+  return sanitizeEmailHtml(html);
+}
+
 async function handleRawMessage(source: Buffer): Promise<void> {
   const parsed = await simpleParser(source);
   const from = parsed.from?.value[0];
@@ -53,15 +84,23 @@ async function handleRawMessage(source: Buffer): Promise<void> {
     ...(Array.isArray(parsed.references) ? parsed.references : parsed.references ? [parsed.references] : []),
   ];
 
+  // IDs are generated here rather than left to the DB default so bodyHtml's
+  // cid: rewrite (which happens before anything is inserted) can point at
+  // the exact attachment row this loop is about to create.
+  const attachmentIdByCid = new Map<string, string>();
   const attachmentInputs = [];
   for (const [i, part] of (parsed.attachments ?? []).entries()) {
     try {
       const { storageKey, sizeBytes } = await saveAttachment(part.content);
+      const attachmentId = crypto.randomUUID();
+      if (part.cid) attachmentIdByCid.set(part.cid, attachmentId);
       attachmentInputs.push({
+        id: attachmentId,
         filename: part.filename || `attachment-${i + 1}`,
         mimeType: part.contentType || "application/octet-stream",
         sizeBytes,
         storageKey,
+        contentId: part.cid ?? null,
       });
     } catch (err) {
       console.error("[mail] failed to save attachment:", err);
@@ -73,6 +112,7 @@ async function handleRawMessage(source: Buffer): Promise<void> {
     fromName: from.name || from.address,
     subject: parsed.subject ?? "",
     body: extractBody(parsed),
+    bodyHtml: extractHtmlBody(parsed, attachmentIdByCid),
     messageId: parsed.messageId ?? null,
     referencedMessageIds: referencedIds,
     attachments: attachmentInputs,
diff --git a/src/lib/mail/sanitize-html.test.ts b/src/lib/mail/sanitize-html.test.ts
new file mode 100644
index 0000000..577315f
--- /dev/null
+++ b/src/lib/mail/sanitize-html.test.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { sanitizeEmailHtml } from "./sanitize-html";
+
+describe("sanitizeEmailHtml", () => {
+  it("keeps a data-URI screenshot as a real image, not text", () => {
+    const html = '<p>See screenshot:</p><img src="data:image/png;base64,iVBORw0KGgo=" alt="shot">';
+    const out = sanitizeEmailHtml(html);
+    expect(out).toContain('src="data:image/png;base64,iVBORw0KGgo="');
+    expect(out).not.toContain("[data:image");
+  });
+
+  it("preserves inline font/color formatting", () => {
+    const out = sanitizeEmailHtml('<p style="color:red;font-family:Arial;font-size:14px;">Hi</p>');
+    expect(out).toContain("color:red");
+    expect(out).toContain("font-family:Arial");
+    expect(out).toContain("font-size:14px");
+  });
+
+  it("strips <script> tags and inline event handlers", () => {
+    const out = sanitizeEmailHtml('<p onclick="alert(1)">click</p><script>alert(2)</script>');
+    expect(out).not.toContain("<script");
+    expect(out).not.toContain("onclick");
+    expect(out).not.toContain("alert");
+  });
+
+  it("strips javascript: hrefs but keeps real links with noopener", () => {
+    const out = sanitizeEmailHtml('<a href="javascript:alert(1)">bad</a><a href="https://example.com">good</a>');
+    expect(out).not.toContain("javascript:");
+    expect(out).toContain('href="https://example.com"');
+    expect(out).toContain("noopener");
+  });
+
+  it("drops unresolved cid: image references instead of leaking the token as text", () => {
+    const out = sanitizeEmailHtml('<img src="cid:image001.png@01D9" alt="x">');
+    expect(out).not.toContain("cid:image001.png");
+  });
+
+  it("drops layout-breaking styles like position:fixed", () => {
+    const out = sanitizeEmailHtml('<div style="position:fixed;top:0;left:0;width:9999px;">x</div>');
+    expect(out).not.toContain("position");
+    expect(out).not.toContain("9999px");
+  });
+
+  it("unwraps Outlook VML/mso markup without leaking its CSS as visible text", () => {
+    const html = `<html><head><style>v\\:* {behavior:url(#default#VML);}</style></head><body><p>Hi</p></body></html>`;
+    const out = sanitizeEmailHtml(html);
+    expect(out).not.toContain("behavior:url");
+    expect(out).toContain("Hi");
+  });
+});
diff --git a/src/lib/mail/sanitize-html.ts b/src/lib/mail/sanitize-html.ts
new file mode 100644
index 0000000..6895ac6
--- /dev/null
+++ b/src/lib/mail/sanitize-html.ts
@@ -0,0 +1,58 @@
+import sanitizeHtml from "sanitize-html";
+
+// Formatting-only tags — no <script>/<style>/<iframe>/<object>/<form>/svg/etc.
+// Unknown tags (Outlook's <o:p>, VML <v:*>) are unwrapped by sanitize-html
+// (tag dropped, text content kept), which is what we want for stray markup.
+const ALLOWED_TAGS = [
+  "a", "p", "br", "div", "span", "b", "strong", "i", "em", "u", "s", "strike", "small",
+  "ul", "ol", "li", "blockquote", "pre", "code", "hr",
+  "h1", "h2", "h3", "h4", "h5", "h6",
+  "table", "thead", "tbody", "tr", "td", "th",
+  "img", "sub", "sup", "font",
+];
+
+// Only visual/typographic properties — nothing that can reposition or
+// resize content out of the message bubble (position, width/height on
+// non-img elements, etc. are simply not in this allowlist and get dropped).
+const ALLOWED_STYLES = {
+  "*": {
+    color: [/^#[0-9a-fA-F]{3,8}$/, /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/, /^[a-zA-Z]+$/],
+    "background-color": [/^#[0-9a-fA-F]{3,8}$/, /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/, /^[a-zA-Z]+$/],
+    "font-family": [/^[\w\s,'"-]+$/],
+    "font-size": [/^\d+(\.\d+)?(px|pt|em|%)$/],
+    "font-weight": [/^(normal|bold|\d{3})$/],
+    "font-style": [/^(normal|italic)$/],
+    "text-align": [/^(left|right|center|justify)$/],
+    "text-decoration": [/^[\w\s-]+$/],
+    "line-height": [/^[\d.]+(px|em|%)?$/],
+  },
+};
+
+/**
+ * Renders an inbound email's HTML part safely for display in the ticket
+ * thread — preserves fonts/colors/layout/inline images (the whole point:
+ * "как человек на почту отправил, ровно также оно и пришло"), while
+ * stripping anything that could execute script or break the page layout.
+ * `cid:` image references must already be rewritten to real attachment URLs
+ * before calling this (see imap.ts) — `cid`/`javascript` are not in the
+ * allowed URL schemes, so any that slip through as-is are dropped.
+ */
+export function sanitizeEmailHtml(html: string): string {
+  return sanitizeHtml(html, {
+    allowedTags: ALLOWED_TAGS,
+    allowedAttributes: {
+      a: ["href", "title", "target", "rel"],
+      img: ["src", "alt", "width", "height", "style"],
+      td: ["colspan", "rowspan", "style"],
+      th: ["colspan", "rowspan", "style"],
+      table: ["style", "border", "cellpadding", "cellspacing"],
+      "*": ["style"],
+    },
+    allowedSchemes: ["http", "https", "mailto"],
+    allowedSchemesByTag: { img: ["http", "https", "data"] },
+    allowedStyles: ALLOWED_STYLES,
+    transformTags: {
+      a: sanitizeHtml.simpleTransform("a", { target: "_blank", rel: "noopener noreferrer" }),
+    },
+  });
+}
diff --git a/src/lib/tickets/service.ts b/src/lib/tickets/service.ts
index ef23c0f..b16610b 100644
--- a/src/lib/tickets/service.ts
+++ b/src/lib/tickets/service.ts
@@ -22,7 +22,14 @@ import type {
   AttachmentDTO,
 } from "@/lib/tickets/types";
 
-type AttachmentInput = { filename: string; mimeType: string; sizeBytes: number; storageKey: string };
+type AttachmentInput = {
+  id?: string;
+  filename: string;
+  mimeType: string;
+  sizeBytes: number;
+  storageKey: string;
+  contentId?: string | null;
+};
 
 function toTicketDTO(ticket: typeof tickets.$inferSelect, customerName: string, tags: TagDTO[]): TicketDTO {
   return {
@@ -48,6 +55,7 @@ function toMessageDTO(message: typeof messages.$inferSelect, attachments: Attach
     authorType: message.authorType,
     authorName: message.authorName,
     body: message.body,
+    bodyHtml: message.bodyHtml,
     direction: message.direction,
     visibility: message.visibility,
     attachments,
@@ -115,6 +123,7 @@ async function appendMessage(params: {
   authorId: string | null;
   authorName: string;
   body: string;
+  bodyHtml?: string | null;
   direction: "in" | "out";
   visibility?: "public" | "internal";
   emailMessageId?: string;
@@ -128,6 +137,7 @@ async function appendMessage(params: {
       authorId: params.authorId,
       authorName: params.authorName,
       body: params.body,
+      bodyHtml: params.bodyHtml ?? null,
       direction: params.direction,
       visibility: params.visibility ?? "public",
       emailMessageId: params.emailMessageId,
@@ -288,6 +298,7 @@ export async function recordEmailInboundMessage(params: {
   fromName: string;
   subject: string;
   body: string;
+  bodyHtml?: string | null;
   messageId: string | null;
   referencedMessageIds: string[];
   attachments?: AttachmentInput[];
@@ -321,6 +332,7 @@ export async function recordEmailInboundMessage(params: {
     authorId: customer.id,
     authorName: params.fromName,
     body: params.body,
+    bodyHtml: params.bodyHtml,
     direction: "in",
     emailMessageId: params.messageId ?? undefined,
     attachments: params.attachments,
diff --git a/src/lib/tickets/types.ts b/src/lib/tickets/types.ts
index 3390f7e..d3d1212 100644
--- a/src/lib/tickets/types.ts
+++ b/src/lib/tickets/types.ts
@@ -40,6 +40,7 @@ export interface MessageDTO {
   authorType: MessageAuthorType;
   authorName: string;
   body: string;
+  bodyHtml: string | null;
   direction: MessageDirection;
   visibility: MessageVisibility;
   attachments: AttachmentDTO[];