@handled-ai/design-system 0.20.5 → 0.20.7

package/dist/components/conversation-panel.d.ts

@@ -34,6 +34,25 @@ interface ConvMessage {
     to: ConvParticipant;
     /** Absolute timestamp label, e.g. "Jun 1, 2026, 9:12 AM". */
     date: string;
+    /**
+     * Raw chronological timestamp for deterministic thread ordering. Prefer
+     * `sentAt` for outbound messages and `receivedAt` for inbound messages.
+     * Accepts ISO/RFC822 strings, Date objects, epoch milliseconds, or Gmail
+     * internalDate values as strings/numbers. Display-only `date` / `ago` labels
+     * are never parsed for ordering.
+     */
+    timestamp?: string | number | Date | null;
+    rawTimestamp?: string | number | Date | null;
+    sentAt?: string | number | Date | null;
+    receivedAt?: string | number | Date | null;
+    /** Compatibility with data contracts that pass through source field names. */
+    sent_at?: string | number | Date | null;
+    received_at?: string | number | Date | null;
+    internalDate?: string | number | Date | null;
+    gmailInternalDate?: string | number | Date | null;
+    internal_date?: string | number | Date | null;
+    rfc822Date?: string | number | Date | null;
+    dateHeader?: string | number | Date | null;
     /** Relative label, e.g. "2 days ago". */
     ago?: string;
     receipt?: {

package/dist/components/conversation-panel.js

@@ -42,12 +42,13 @@ import {
 import { cn } from "../lib/utils.js";
 import { getInitials } from "../lib/user-display.js";
 import { BRAND_ICONS } from "../lib/icons.js";
-import { htmlToTextSnippet, sanitizeHtml } from "../internal/safe-html.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { Button } from "./button.js";
 import { Switch } from "./switch.js";
 import { Textarea } from "./textarea.js";
 import { RichTextToolbar } from "./rich-text-toolbar.js";
+import { EmailBody } from "./email-body.js";
+import { decodeEmailDisplayText, emailBodySnippet, formatAddressList, normalizeEmailSender } from "./email-display-helpers.js";
 import {
   Dialog,
   DialogContent,
@@ -56,260 +57,69 @@ import {
   DialogDescription,
   DialogFooter
 } from "./dialog.js";
-const PROSE = cn(
-  "text-sm leading-[1.62] text-foreground/90 break-words",
-  "[&_p]:my-2 [&_p:first-child]:mt-0 [&_p:last-child]:mb-0",
-  "[&_a]:text-[#1a73e8] [&_a]:underline-offset-2 hover:[&_a]:underline",
-  "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5",
-  "[&_img]:max-w-full [&_img]:h-auto"
-);
 function escapeHtml(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 function textToHtml(text) {
-  return text.split(/\n{2,}/).map((p) => p.trim()).filter(Boolean).map((p) => `<p>${escapeHtml(p).replace(/\n/g, "<br>")}</p>`).join("");
+  return decodeEmailDisplayText(text).split(/\n{2,}/).map((p) => p.trim()).filter(Boolean).map((p) => `<p>${escapeHtml(p).replace(/\n/g, "<br>")}</p>`).join("");
 }
-const SPLITTABLE_BLOCK_TAGS = /* @__PURE__ */ new Set(["p", "div"]);
-const WHOLE_BLOCK_TAGS = /* @__PURE__ */ new Set(["blockquote", "table", "ul", "ol", "hr"]);
-const BLOCK_TAGS = /* @__PURE__ */ new Set([...SPLITTABLE_BLOCK_TAGS, ...WHOLE_BLOCK_TAGS]);
-const BR_TAG_RE = /<br\s*\/?>/gi;
-const HTML_BLOCK_START_RE = /<(p|div|blockquote|table|ul|ol|hr)\b[^>]*>/i;
-const SIGNATURE_DELIMITER_RE = /^--\s*$/;
-const SIGNOFF_RE = /^(?:thanks,|thank you,|best,|regards,|sincerely,)$/i;
-const DETAILS_START_RE = /^(?:confidentiality notice\b|this message and any attachments\b|this email and any attachments\b|the information contained in this message\b|this communication may contain\b|unsubscribe\b|manage your preferences\b)/i;
-const CONTACT_DETAIL_RE = /(?:@|https?:\/\/|www\.|\+?\d[\d\s().-]{6,}\d|\b(?:ceo|cfo|cto|coo|founder|co-founder|director|manager|vp|vice president|president|head of|sales|marketing|operations|account|customer success|success|support|engineer|consultant|partner|principal|advisor|associate)\b|\b(?:inc|llc|ltd|corp|corporation|company|co\.)\b)/i;
-function decodeHtmlText(value) {
-  const withoutTags = value.replace(BR_TAG_RE, "\n").replace(/<\/(p|div|blockquote|li|tr|table|ul|ol)>/gi, "\n").replace(/<[^>]*>/g, "");
-  if (typeof document !== "undefined") {
-    const textarea = document.createElement("textarea");
-    textarea.innerHTML = withoutTags;
-    return textarea.value;
-  }
-  return withoutTags.replace(/&nbsp;/gi, " ").replace(/&amp;/gi, "&").replace(/&lt;/gi, "<").replace(/&gt;/gi, ">").replace(/&quot;/gi, '"').replace(/&#39;|&apos;/gi, "'");
-}
-function htmlToVisibleText(html) {
-  return decodeHtmlText(html).replace(/\u00a0/g, " ").replace(/[ \t]+/g, " ").trim();
-}
-function serializeNode(node) {
-  const host = document.createElement("div");
-  host.appendChild(node.cloneNode(true));
-  return host.innerHTML;
-}
-function wrapHtmlLike(element, innerHtml) {
-  const clone = element.cloneNode(false);
-  clone.innerHTML = innerHtml;
-  return clone.outerHTML;
-}
-function hasDirectBr(nodes) {
-  return nodes.some((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === "br");
-}
-function hasDirectBlockChild(element) {
-  return Array.from(element.children).some((child) => {
-    const tagName = child.tagName.toLowerCase();
-    return tagName !== "br" && BLOCK_TAGS.has(tagName);
-  });
-}
-function makeHtmlSegment(html) {
-  const visibleText = htmlToVisibleText(html);
-  if (!html.trim() || !visibleText && !/<(?:img|hr)\b/i.test(html)) return null;
-  return { html, visibleText };
+function displayParticipant(person) {
+  return normalizeEmailSender({ name: person.name, email: person.email, fallbackName: person.email || person.name });
 }
-function splitInlineNodes(nodes, wrapper) {
-  const containsBr = hasDirectBr(nodes);
-  const chunks = [[]];
-  nodes.forEach((node) => {
-    var _a;
-    if (node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === "br") {
-      chunks.push([]);
-      return;
-    }
-    (_a = chunks[chunks.length - 1]) == null ? void 0 : _a.push(serializeNode(node));
-  });
-  return chunks.map((chunk) => chunk.join("")).map((innerHtml) => {
-    if (wrapper) return wrapHtmlLike(wrapper, innerHtml);
-    return containsBr ? `<div>${innerHtml}</div>` : innerHtml;
-  }).map(makeHtmlSegment).filter((segment) => Boolean(segment));
+function firstName(name) {
+  return decodeEmailDisplayText(name).split(" ")[0] || decodeEmailDisplayText(name);
 }
-function splitElementSegment(element) {
-  const tagName = element.tagName.toLowerCase();
-  if (tagName === "div" && hasDirectBlockChild(element)) {
-    const childSegments = splitHtmlNodes(Array.from(element.childNodes));
-    return childSegments.length ? childSegments : [makeHtmlSegment(element.outerHTML)].filter(Boolean);
-  }
-  if (SPLITTABLE_BLOCK_TAGS.has(tagName) && hasDirectBr(Array.from(element.childNodes)) && !hasDirectBlockChild(element)) {
-    return splitInlineNodes(Array.from(element.childNodes), element);
-  }
-  const segment = makeHtmlSegment(element.outerHTML);
-  return segment ? [segment] : [];
+function sameEmail(a, b) {
+  return Boolean(a && b && a.trim().toLowerCase() === b.trim().toLowerCase());
 }
-function splitHtmlNodes(nodes) {
-  const segments = [];
-  let inlineNodes = [];
-  const flushInline = () => {
-    if (!inlineNodes.length) return;
-    segments.push(...splitInlineNodes(inlineNodes));
-    inlineNodes = [];
-  };
-  nodes.forEach((node) => {
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const element = node;
-      const tagName = element.tagName.toLowerCase();
-      if (BLOCK_TAGS.has(tagName)) {
-        flushInline();
-        segments.push(...splitElementSegment(element));
-        return;
-      }
-    }
-    inlineNodes.push(node);
-  });
-  flushInline();
-  return segments;
+function messageBodySnippet(message, maxLength = 140) {
+  return emailBodySnippet({ bodyHtml: message.bodyHtml, body: message.body }, maxLength);
 }
-function findMatchingCloseTag(html, tagName, openTagEnd) {
-  if (tagName === "hr") return openTagEnd + 1;
-  const tagPattern = new RegExp(`</?${tagName}\\b[^>]*>`, "gi");
-  tagPattern.lastIndex = openTagEnd + 1;
-  let depth = 1;
-  let match;
-  while ((match = tagPattern.exec(html)) !== null) {
-    const rawTag = match[0];
-    if (/^<\//.test(rawTag)) depth -= 1;
-    else if (!/\/\s*>$/.test(rawTag)) depth += 1;
-    if (depth === 0) return tagPattern.lastIndex;
+function parseMessageTimestampValue(value) {
+  if (value == null || value === "") return null;
+  if (value instanceof Date) {
+    const time = value.getTime();
+    return Number.isNaN(time) ? null : time;
   }
-  return html.length;
-}
-function splitHtmlSegmentsFallback(html) {
-  const segments = [];
-  let cursor = 0;
-  const pushInline = (inlineHtml) => {
-    const chunks = inlineHtml.split(BR_TAG_RE);
-    const hadBr = chunks.length > 1;
-    chunks.forEach((chunk) => {
-      const segment = makeHtmlSegment(hadBr ? `<div>${chunk}</div>` : chunk);
-      if (segment) segments.push(segment);
-    });
-  };
-  while (cursor < html.length) {
-    const rest = html.slice(cursor);
-    const match = HTML_BLOCK_START_RE.exec(rest);
-    if (!match || match.index === void 0) {
-      pushInline(rest);
-      break;
-    }
-    if (match.index > 0) pushInline(rest.slice(0, match.index));
-    const tagStart = cursor + match.index;
-    const rawOpen = match[0];
-    const tagName = match[1].toLowerCase();
-    const openTagEnd = tagStart + rawOpen.length - 1;
-    const segmentEnd = findMatchingCloseTag(html, tagName, openTagEnd);
-    const blockHtml = html.slice(tagStart, segmentEnd);
-    if (SPLITTABLE_BLOCK_TAGS.has(tagName) && BR_TAG_RE.test(blockHtml)) {
-      const openTag = rawOpen;
-      const closeTag = `</${tagName}>`;
-      const inner = blockHtml.replace(new RegExp(`^${rawOpen.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`, "i"), "").replace(new RegExp(`${closeTag}$`, "i"), "");
-      inner.split(BR_TAG_RE).forEach((chunk) => {
-        const segment = makeHtmlSegment(`${openTag}${chunk}${closeTag}`);
-        if (segment) segments.push(segment);
-      });
-    } else {
-      const segment = makeHtmlSegment(blockHtml);
-      if (segment) segments.push(segment);
-    }
-    cursor = segmentEnd;
+  if (typeof value === "number") {
+    if (!Number.isFinite(value)) return null;
+    return value < 1e10 ? value * 1e3 : value;
   }
-  return segments;
-}
-function segmentHtmlMessage(html) {
-  if (typeof document === "undefined" || typeof Node === "undefined") {
-    return splitHtmlSegmentsFallback(html);
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (/^\d+$/.test(trimmed)) {
+    const numeric = Number(trimmed);
+    if (!Number.isFinite(numeric)) return null;
+    return numeric < 1e10 ? numeric * 1e3 : numeric;
   }
-  const template = document.createElement("template");
-  template.innerHTML = html;
-  return splitHtmlNodes(Array.from(template.content.childNodes));
-}
-function segmentTextMessage(text) {
-  var _a;
-  const lines = (_a = text.match(/[^\n]*(?:\n|$)/g)) != null ? _a : [];
-  return lines.filter((line, index) => line.length > 0 && !(index === lines.length - 1 && line === "")).map((line) => ({ text: line, visibleText: line.replace(/\u00a0/g, " ").trim() }));
-}
-function firstVisibleLine(text) {
-  var _a, _b;
-  return (_b = (_a = text.replace(/\u00a0/g, " ").trimStart().split(/\r?\n/).find((line) => line.trim())) == null ? void 0 : _a.trim()) != null ? _b : "";
-}
-function isLikelySenderNameLine(line) {
-  if (!line || line.length > 60) return false;
-  if (/[,@:;!?]|https?:\/\/|www\.|\d/.test(line)) return false;
-  const words = line.split(/\s+/).filter(Boolean);
-  if (words.length < 1 || words.length > 4) return false;
-  return words.every((word) => /^[A-Z][A-Za-z'.-]*$/.test(word));
-}
-function nextVisibleSegmentText(segments, fromIndex) {
-  var _a, _b;
-  for (let index = fromIndex + 1; index < segments.length; index += 1) {
-    const text = firstVisibleLine((_b = (_a = segments[index]) == null ? void 0 : _a.visibleText) != null ? _b : "");
-    if (text) return text;
+  const parsed = Date.parse(trimmed);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+function messageTimestamp(message) {
+  const directional = message.direction === "outbound" ? [message.sentAt, message.sent_at] : [message.receivedAt, message.received_at];
+  const candidates = [
+    ...directional,
+    message.rawTimestamp,
+    message.timestamp,
+    message.gmailInternalDate,
+    message.internalDate,
+    message.internal_date,
+    message.rfc822Date,
+    message.dateHeader
+  ];
+  for (const candidate of candidates) {
+    const parsed = parseMessageTimestampValue(candidate);
+    if (parsed !== null) return parsed;
   }
-  return "";
-}
-function isFooterBoundary(segments, index) {
-  var _a, _b;
-  const line = firstVisibleLine((_b = (_a = segments[index]) == null ? void 0 : _a.visibleText) != null ? _b : "");
-  if (!line) return false;
-  if (SIGNATURE_DELIMITER_RE.test(line) || DETAILS_START_RE.test(line)) return true;
-  const nextText = nextVisibleSegmentText(segments, index);
-  if (SIGNOFF_RE.test(line)) return Boolean(nextText && (isLikelySenderNameLine(nextText) || CONTACT_DETAIL_RE.test(nextText)));
-  return isLikelySenderNameLine(line) && CONTACT_DETAIL_RE.test(nextText);
+  return null;
 }
-function splitFooterSegments(segments) {
-  const visibleIndexes = segments.map((segment, index) => segment.visibleText ? index : -1).filter((index) => index >= 0);
-  const visibleCount = visibleIndexes.length;
-  if (visibleCount < 2) return { bodySegments: segments, detailsSegments: [] };
-  const trailingCount = Math.max(Math.ceil(visibleCount * 0.4), 8);
-  const firstTrailingOrdinal = Math.max(1, visibleCount - trailingCount);
-  for (let ordinal = firstTrailingOrdinal; ordinal < visibleCount; ordinal += 1) {
-    const index = visibleIndexes[ordinal];
-    if (ordinal > 0 && isFooterBoundary(segments, index)) {
-      return { bodySegments: segments.slice(0, index), detailsSegments: segments.slice(index) };
+function sortMessagesChronologically(messages) {
+  return messages.map((message, index) => ({ message, index, timestamp: messageTimestamp(message) })).sort((a, b) => {
+    if (a.timestamp !== null && b.timestamp !== null && a.timestamp !== b.timestamp) {
+      return a.timestamp - b.timestamp;
     }
-  }
-  return { bodySegments: segments, detailsSegments: [] };
-}
-function splitMessageHtml(rawHtml) {
-  const sanitizedHtml = sanitizeHtml(rawHtml);
-  const { bodySegments, detailsSegments } = splitFooterSegments(segmentHtmlMessage(sanitizedHtml));
-  if (!detailsSegments.length) return { bodyHtml: sanitizedHtml, detailsHtml: "" };
-  return {
-    bodyHtml: bodySegments.map((segment) => {
-      var _a;
-      return (_a = segment.html) != null ? _a : "";
-    }).join(""),
-    detailsHtml: detailsSegments.map((segment) => {
-      var _a;
-      return (_a = segment.html) != null ? _a : "";
-    }).join("")
-  };
-}
-function splitMessageText(text) {
-  const { bodySegments, detailsSegments } = splitFooterSegments(segmentTextMessage(text));
-  if (!detailsSegments.length) return { bodyText: text, detailsText: "" };
-  return {
-    bodyText: bodySegments.map((segment) => {
-      var _a;
-      return (_a = segment.text) != null ? _a : "";
-    }).join(""),
-    detailsText: detailsSegments.map((segment) => {
-      var _a;
-      return (_a = segment.text) != null ? _a : "";
-    }).join("")
-  };
-}
-function messageBodySnippet(message, maxLength = 140) {
-  var _a, _b, _c;
-  if (message.bodyHtml) {
-    return htmlToTextSnippet(splitMessageHtml(message.bodyHtml).bodyHtml, maxLength);
-  }
-  return (_c = (_b = splitMessageText((_a = message.body) != null ? _a : "").bodyText.split("\n").find((line) => line.trim())) == null ? void 0 : _b.trim()) != null ? _c : "";
+    return a.index - b.index;
+  }).map((entry) => entry.message);
 }
 function GmailMark({ size = 14 }) {
   return (
@@ -327,14 +137,13 @@ function GmailMark({ size = 14 }) {
   );
 }
 function PersonAvatar({ person, size = "sm" }) {
+  var _a;
+  const display = displayParticipant(person);
   return /* @__PURE__ */ jsxs(Avatar, { size, children: [
-    person.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: person.avatarUrl, alt: person.name }) : null,
-    /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-muted-foreground text-[10px] font-medium uppercase", children: getInitials({ name: person.name, email: person.email }) })
+    person.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: person.avatarUrl, alt: display.name }) : null,
+    /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-muted text-muted-foreground text-[10px] font-medium uppercase", children: getInitials({ name: display.name, email: (_a = display.email) != null ? _a : person.email }) })
   ] });
 }
-function firstName(name) {
-  return name.split(" ")[0] || name;
-}
 const STATUS_PILL = {
   responded: { label: "New reply", cls: "bg-status-active-bg text-status-active-fg border-status-active-border" },
   draft: { label: "Draft", cls: "bg-background text-foreground/80 border-border" },
@@ -397,9 +206,10 @@ function MessageView({
   onToggle,
   me
 }) {
-  var _a, _b;
+  var _a;
   const [quoteOpen, setQuoteOpen] = React.useState(false);
-  const [detailsOpen, setDetailsOpen] = React.useState(false);
+  const fromDisplay = displayParticipant(message.from);
+  const toDisplay = displayParticipant(message.to);
   if (!expanded) {
     const snippet = messageBodySnippet(message, 140);
     return /* @__PURE__ */ jsxs(
@@ -412,7 +222,7 @@ function MessageView({
         children: [
           /* @__PURE__ */ jsx(PersonAvatar, { person: message.from }),
           /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground min-w-0 flex-1 truncate text-[13px]", children: [
-            /* @__PURE__ */ jsx("b", { className: "text-foreground", children: firstName(message.from.name) }),
+            /* @__PURE__ */ jsx("b", { className: "text-foreground", children: firstName(fromDisplay.name) }),
             " \xB7 ",
             snippet
           ] }),
@@ -422,10 +232,8 @@ function MessageView({
       }
     );
   }
-  const toLabel = me && message.to.email === me.email ? "me" : firstName(message.to.name);
-  const htmlParts = message.bodyHtml ? splitMessageHtml(message.bodyHtml) : null;
-  const textParts = message.bodyHtml ? null : splitMessageText((_b = message.body) != null ? _b : "");
-  const hasDetails = Boolean((htmlParts == null ? void 0 : htmlParts.detailsHtml) || (textParts == null ? void 0 : textParts.detailsText));
+  const meDisplay = me ? displayParticipant(me) : null;
+  const toLabel = meDisplay && sameEmail(toDisplay.email, meDisplay.email) ? "me" : firstName(toDisplay.name);
   return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-message", className: "rounded-md border border-border bg-background", children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -437,12 +245,12 @@ function MessageView({
           /* @__PURE__ */ jsx(PersonAvatar, { person: message.from, size: "default" }),
           /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsxs("span", { className: "flex flex-wrap items-baseline gap-x-1.5", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold", children: message.from.name }),
-              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60 truncate text-xs", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold", children: fromDisplay.name }),
+              fromDisplay.email ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60 truncate text-xs", children: [
                 "<",
-                message.from.email,
+                fromDisplay.email,
                 ">"
-              ] })
+              ] }) : null
             ] }),
             /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground block text-xs", children: [
               "to ",
@@ -461,20 +269,16 @@ function MessageView({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "px-3 pb-2.5", children: [
-      htmlParts ? /* @__PURE__ */ jsx("div", { "data-slot": "conv-message-body", className: PROSE, dangerouslySetInnerHTML: { __html: htmlParts.bodyHtml } }) : /* @__PURE__ */ jsx("div", { "data-slot": "conv-message-body", className: cn(PROSE, "whitespace-pre-line"), children: textParts == null ? void 0 : textParts.bodyText }),
-      hasDetails ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setDetailsOpen((v) => !v),
-            className: "text-muted-foreground hover:text-foreground hover:bg-muted rounded px-1.5 text-xs leading-5",
-            "aria-expanded": detailsOpen,
-            children: detailsOpen ? "Hide signature/details" : "Show signature/details"
-          }
-        ),
-        detailsOpen ? /* @__PURE__ */ jsx("div", { className: "border-border text-muted-foreground mt-1 border-l-2 pl-3 text-[13px]", children: htmlParts ? /* @__PURE__ */ jsx("div", { "data-slot": "conv-message-details", className: PROSE, dangerouslySetInnerHTML: { __html: htmlParts.detailsHtml } }) : /* @__PURE__ */ jsx("div", { "data-slot": "conv-message-details", className: cn(PROSE, "whitespace-pre-line"), children: textParts == null ? void 0 : textParts.detailsText }) }) : null
-      ] }) : null,
+      /* @__PURE__ */ jsx("div", { "data-slot": "conv-message-body", children: /* @__PURE__ */ jsx(
+        EmailBody,
+        {
+          html: message.bodyHtml,
+          text: message.body,
+          variant: "history",
+          collapseDetails: true,
+          className: "text-sm"
+        }
+      ) }),
       message.quoted ? /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
         /* @__PURE__ */ jsx(
           "button",
@@ -487,8 +291,8 @@ function MessageView({
           }
         ),
         quoteOpen ? /* @__PURE__ */ jsxs("div", { className: "border-border text-muted-foreground mt-1 border-l-2 pl-3 text-[13px]", children: [
-          /* @__PURE__ */ jsx("p", { className: "mb-1", dangerouslySetInnerHTML: { __html: sanitizeHtml(message.quoted.attr) } }),
-          /* @__PURE__ */ jsx("div", { className: PROSE, dangerouslySetInnerHTML: { __html: sanitizeHtml(message.quoted.html) } })
+          /* @__PURE__ */ jsx("p", { className: "mb-1", children: decodeEmailDisplayText(message.quoted.attr) }),
+          /* @__PURE__ */ jsx("div", { "data-slot": "conv-quoted-body", children: /* @__PURE__ */ jsx(EmailBody, { html: message.quoted.html, variant: "history", collapseDetails: false }) })
         ] }) : null
       ] }) : null
     ] })
@@ -506,7 +310,7 @@ function ReplyComposer({
   onPreviewReply,
   draftDisabledReason
 }) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const [body, setBody] = React.useState((_a = thread.draft) != null ? _a : "");
   const [sig, setSig] = React.useState(true);
   const [preview, setPreview] = React.useState(false);
@@ -522,7 +326,7 @@ function ReplyComposer({
     setPreview(true);
     setSendError(null);
     if (!onPreviewReply) {
-      setPreviewState({ loading: false, html: sanitizeHtml(localPreviewHtml), confirmationToken: null, error: null, local: true });
+      setPreviewState({ loading: false, html: localPreviewHtml, confirmationToken: null, error: null, local: true });
       return;
     }
     setPreviewState({ loading: true, html: null, confirmationToken: null, error: null, local: false });
@@ -530,7 +334,7 @@ function ReplyComposer({
       const result = await onPreviewReply({ threadId: thread.threadId, body, includeSignature: sig, replyAll });
       setPreviewState({
         loading: false,
-        html: sanitizeHtml((_a2 = result.htmlBody) != null ? _a2 : ""),
+        html: (_a2 = result.htmlBody) != null ? _a2 : "",
         confirmationToken: (_b2 = result.confirmationToken) != null ? _b2 : null,
         error: null,
         local: false
@@ -585,7 +389,7 @@ function ReplyComposer({
         ] })
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         "Reply to ",
-        /* @__PURE__ */ jsx("b", { children: firstName(thread.contact.name) })
+        /* @__PURE__ */ jsx("b", { children: firstName(displayParticipant(thread.contact).name) })
       ] }) }),
       /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground inline-flex items-center gap-1 text-[11px]", children: [
         /* @__PURE__ */ jsx(GitMerge, { size: 11 }),
@@ -596,12 +400,15 @@ function ReplyComposer({
     /* @__PURE__ */ jsxs("div", { className: "border-border mb-2 space-y-1 border-b pb-2 text-[13px]", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-12 shrink-0 text-[11px] font-medium", children: "To" }),
-        /* @__PURE__ */ jsx("span", { className: "font-medium", children: thread.contact.name }),
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 truncate text-xs", children: thread.contact.email })
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: displayParticipant(thread.contact).name }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60 truncate text-xs", children: (_c = displayParticipant(thread.contact).email) != null ? _c : thread.contact.email })
       ] }),
       replyAll && ccList.length ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5", children: [
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-12 shrink-0 text-[11px] font-medium", children: "Cc" }),
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: ccList.map((c) => c.name).join(", ") })
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: formatAddressList(ccList.map((c) => {
+          var _a2;
+          return `${displayParticipant(c).name} <${(_a2 = displayParticipant(c).email) != null ? _a2 : c.email}>`;
+        })) })
       ] }) : null,
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground w-12 shrink-0 text-[11px] font-medium", children: "Subject" }),
@@ -667,17 +474,20 @@ function ReplyComposer({
       /* @__PURE__ */ jsxs("div", { className: "border-border space-y-1 rounded-md border p-3 text-[13px]", children: [
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "To " }),
-          /* @__PURE__ */ jsx("b", { children: thread.contact.name }),
+          /* @__PURE__ */ jsx("b", { children: displayParticipant(thread.contact).name }),
           " ",
           /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60", children: [
             "<",
-            thread.contact.email,
+            (_d = displayParticipant(thread.contact).email) != null ? _d : thread.contact.email,
             ">"
           ] })
         ] }),
         replyAll && ccList.length ? /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
           "Cc ",
-          ccList.map((c) => c.name).join(", ")
+          formatAddressList(ccList.map((c) => {
+            var _a2;
+            return `${displayParticipant(c).name} <${(_a2 = displayParticipant(c).email) != null ? _a2 : c.email}>`;
+          }))
         ] }) : null,
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Subject " }),
@@ -691,9 +501,9 @@ function ReplyComposer({
         "div",
         {
           "data-slot": "conv-preview-body",
-          "data-confirmation-token": (_c = previewState.confirmationToken) != null ? _c : void 0,
-          className: cn(PROSE, "max-h-72 overflow-auto"),
-          dangerouslySetInnerHTML: { __html: (_d = previewState.html) != null ? _d : "" }
+          "data-confirmation-token": (_e = previewState.confirmationToken) != null ? _e : void 0,
+          className: "max-h-72 overflow-auto",
+          children: /* @__PURE__ */ jsx(EmailBody, { html: (_f = previewState.html) != null ? _f : "", variant: "preview", collapseDetails: false, defaultDetailsOpen: true })
         }
       ),
       sendError ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive text-sm", children: sendError }) : null,
@@ -751,15 +561,25 @@ function ThreadBody({
   const replyDisabledReason = ((_a = thread.replyDisabledReason) == null ? void 0 : _a.trim()) || "You are not a participant on this thread, so replying is disabled here.";
   const draftDisabledReason = onCreateGmailDraft ? null : "Gmail draft creation is not available for this thread.";
   const hasCc = !!(thread.cc && thread.cc.length);
+  const sortedMessages = React.useMemo(() => sortMessagesChronologically(thread.messages), [thread.messages]);
   const [mode, setMode] = React.useState("idle");
   const [replyAll, setReplyAll] = React.useState(false);
   const [expanded, setExpanded] = React.useState(() => {
     const o = {};
-    thread.messages.forEach((m, i) => {
-      o[m.id] = i === thread.messages.length - 1;
+    sortedMessages.forEach((m, i) => {
+      o[m.id] = i === sortedMessages.length - 1;
     });
     return o;
   });
+  React.useEffect(() => {
+    setExpanded((current) => {
+      const next = __spreadValues({}, current);
+      sortedMessages.forEach((m, i) => {
+        if (next[m.id] === void 0) next[m.id] = i === sortedMessages.length - 1;
+      });
+      return next;
+    });
+  }, [sortedMessages]);
   const toggle = (id) => setExpanded((e) => __spreadProps(__spreadValues({}, e), { [id]: !e[id] }));
   return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-thread-body", className: "space-y-2", children: [
     canReply && thread.paused ? /* @__PURE__ */ jsxs("div", { className: "border-status-pending-border bg-status-pending-bg text-status-pending-fg flex items-start gap-2 rounded-md border p-2.5 text-[12px]", children: [
@@ -773,7 +593,7 @@ function ThreadBody({
         " or Gmail."
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: thread.messages.map((m) => /* @__PURE__ */ jsx(MessageView, { message: m, expanded: !!expanded[m.id], onToggle: () => toggle(m.id), me }, m.id)) }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: sortedMessages.map((m) => /* @__PURE__ */ jsx(MessageView, { message: m, expanded: !!expanded[m.id], onToggle: () => toggle(m.id), me }, m.id)) }),
     !canReply ? /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/30 text-muted-foreground flex flex-wrap items-start gap-2 rounded-md border p-2.5 text-[12px]", children: [
       /* @__PURE__ */ jsx(Eye, { size: 14, className: "mt-0.5 shrink-0" }),
       /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
@@ -831,7 +651,7 @@ function ThreadBody({
         /* @__PURE__ */ jsx("b", { children: replyAll ? "Reply all sent" : "Reply sent" }),
         " \xB7 added to the thread. Delivered to",
         " ",
-        /* @__PURE__ */ jsx("b", { children: thread.contact.name }),
+        /* @__PURE__ */ jsx("b", { children: displayParticipant(thread.contact).name }),
         ". This action stays ",
         /* @__PURE__ */ jsx("b", { children: "Pending" }),
         "; playbooks remain stopped."
@@ -865,9 +685,13 @@ function ThreadRow({
   onPreviewReply,
   onOpenInGmail
 }) {
+  var _a;
   const status = effectiveStatus(thread);
-  const last = thread.messages[thread.messages.length - 1];
-  const who = (last == null ? void 0 : last.direction) === "inbound" ? firstName(last.from.name) : "You";
+  const sortedMessages = React.useMemo(() => sortMessagesChronologically(thread.messages), [thread.messages]);
+  const last = sortedMessages[sortedMessages.length - 1];
+  const lastSender = last ? displayParticipant(last.from) : null;
+  const meDisplay = me ? displayParticipant(me) : null;
+  const who = (last == null ? void 0 : last.direction) === "outbound" && sameEmail(lastSender == null ? void 0 : lastSender.email, meDisplay == null ? void 0 : meDisplay.email) ? "You" : firstName((_a = lastSender == null ? void 0 : lastSender.name) != null ? _a : "");
   const lastSnippet = last ? messageBodySnippet(last, 120) : "";
   const pill = STATUS_PILL[status];
   return /* @__PURE__ */ jsxs("div", { "data-slot": "conv-thread", "data-open": open ? "true" : void 0, className: "border-border border-b last:border-b-0", children: [
@@ -886,7 +710,7 @@ function ThreadRow({
               /* @__PURE__ */ jsx("span", { className: cn("shrink-0 rounded-md border px-1.5 py-px text-[10px] font-medium leading-4", pill.cls), children: pill.label })
             ] }),
             /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground block truncate text-xs", children: [
-              /* @__PURE__ */ jsx("b", { className: "text-foreground/80", children: thread.contact.name }),
+              /* @__PURE__ */ jsx("b", { className: "text-foreground/80", children: displayParticipant(thread.contact).name }),
               " \xB7 ",
               who,
               ": ",