@handled-ai/design-system 0.20.4 → 0.20.6

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 displayParticipant(person) {
+  return normalizeEmailSender({ name: person.name, email: person.email, fallbackName: person.email || person.name });
 }
-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 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 "";
+  return null;
 }
-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);
-}
-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" },
@@ -350,15 +159,57 @@ const STATUS_DOT = {
 function effectiveStatus(t) {
   return t.canReply === false ? "viewing" : t.status;
 }
+function disabledOpenInGmailReason(thread) {
+  var _a, _b;
+  return ((_a = thread.openInGmailDisabledReason) == null ? void 0 : _a.trim()) || ((_b = thread.replyDisabledReason) == null ? void 0 : _b.trim()) || "Gmail access is not available for this thread.";
+}
+function canOpenInGmail(thread, onOpenInGmail) {
+  return thread.openInGmailDisabled !== true && Boolean(thread.openInGmailUrl || onOpenInGmail);
+}
+function OpenInGmailButton({
+  thread,
+  onOpenInGmail,
+  label = "Open in Gmail"
+}) {
+  const hasConfiguredAction = Boolean(thread.openInGmailUrl || onOpenInGmail || thread.openInGmailDisabled || thread.openInGmailDisabledReason);
+  if (!hasConfiguredAction) return null;
+  const disabled = !canOpenInGmail(thread, onOpenInGmail);
+  const disabledReason = disabled ? disabledOpenInGmailReason(thread) : void 0;
+  if (!disabled && thread.openInGmailUrl) {
+    return /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", asChild: true, children: /* @__PURE__ */ jsxs("a", { href: thread.openInGmailUrl, target: "_blank", rel: "noopener noreferrer", children: [
+      /* @__PURE__ */ jsx(GmailMark, { size: 14 }),
+      " ",
+      label
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "inline-flex", title: disabledReason, children: /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "sm",
+      disabled,
+      "aria-disabled": disabled || void 0,
+      "aria-label": disabledReason ? `${label}: ${disabledReason}` : label,
+      onClick: disabled ? void 0 : () => onOpenInGmail == null ? void 0 : onOpenInGmail(thread.threadId),
+      children: [
+        /* @__PURE__ */ jsx(GmailMark, { size: 14 }),
+        " ",
+        label
+      ]
+    }
+  ) });
+}
 function MessageView({
   message,
   expanded,
   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(
@@ -371,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
           ] }),
@@ -381,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",
@@ -396,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 ",
@@ -420,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",
@@ -446,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
     ] })
@@ -462,9 +307,10 @@ function ReplyComposer({
   onClose,
   onSend,
   onDraft,
-  onPreviewReply
+  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);
@@ -473,13 +319,14 @@ function ReplyComposer({
   const [sendError, setSendError] = React.useState(null);
   const ccList = replyAll ? (_b = thread.cc) != null ? _b : [] : [];
   const subject = /^re:/i.test(thread.subject) ? thread.subject : `Re: ${thread.subject}`;
+  const draftDisabled = Boolean(draftDisabledReason);
   const localPreviewHtml = textToHtml(body) + (sig && thread.signature ? textToHtml(thread.signature) : "");
   const openPreview = async () => {
     var _a2, _b2;
     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 });
@@ -487,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
@@ -516,6 +363,7 @@ function ReplyComposer({
     }
   };
   const handleDraft = async () => {
+    if (draftDisabled) return;
     setSending(true);
     setSendError(null);
     try {
@@ -541,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 }),
@@ -552,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" }),
@@ -623,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 " }),
@@ -647,26 +501,27 @@ 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,
       /* @__PURE__ */ jsxs(DialogFooter, { className: "sm:justify-between", children: [
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("span", { className: "inline-flex", title: draftDisabledReason != null ? draftDisabledReason : void 0, children: /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            disabled: sending || previewState.loading,
+            disabled: sending || previewState.loading || draftDisabled,
             onClick: handleDraft,
+            "aria-label": draftDisabledReason ? `Open draft in Gmail: ${draftDisabledReason}` : "Open draft in Gmail",
             className: "text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-[13px] disabled:pointer-events-none disabled:opacity-50",
             children: [
               /* @__PURE__ */ jsx(GmailMark, { size: 14 }),
               " Open draft in Gmail"
             ]
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", disabled: sending, onClick: () => {
             setPreview(false);
@@ -701,17 +556,30 @@ function ThreadBody({
   onPreviewReply,
   onOpenInGmail
 }) {
+  var _a;
   const canReply = thread.canReply !== false;
+  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: [
@@ -725,13 +593,15 @@ 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)) }),
-    !canReply ? /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/30 text-muted-foreground flex items-start gap-2 rounded-md border p-2.5 text-[12px]", children: [
+    /* @__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", { children: [
+      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
         /* @__PURE__ */ jsx("b", { children: "Viewing only." }),
-        " You\u2019re not a participant on this thread, so replying is disabled here."
-      ] })
+        " ",
+        replyDisabledReason
+      ] }),
+      /* @__PURE__ */ jsx(OpenInGmailButton, { thread, onOpenInGmail })
     ] }) : null,
     canReply && mode === "idle" ? /* @__PURE__ */ jsxs("div", { "data-slot": "conv-action-row", className: "border-border/70 mt-1 flex flex-wrap items-center gap-x-3 gap-y-2 border-t pt-3", children: [
       /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", onClick: () => {
@@ -748,10 +618,7 @@ function ThreadBody({
         /* @__PURE__ */ jsx(ReplyAll, { size: 14 }),
         " Reply all"
       ] }) : null,
-      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenInGmail == null ? void 0 : onOpenInGmail(thread.threadId), children: [
-        /* @__PURE__ */ jsx(GmailMark, { size: 14 }),
-        " Open in Gmail"
-      ] }),
+      /* @__PURE__ */ jsx(OpenInGmailButton, { thread, onOpenInGmail }),
       /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/70 ml-auto inline-flex items-center gap-1.5 text-[12px]", children: [
         /* @__PURE__ */ jsx(GitMerge, { size: 13 }),
         " Stays on this thread"
@@ -771,9 +638,11 @@ function ThreadBody({
           setMode("sent");
         },
         onDraft: async (body, includeSignature) => {
-          await (onCreateGmailDraft == null ? void 0 : onCreateGmailDraft({ threadId: thread.threadId, body, includeSignature, replyAll }));
+          if (!onCreateGmailDraft) return;
+          await onCreateGmailDraft({ threadId: thread.threadId, body, includeSignature, replyAll });
           setMode("draft");
-        }
+        },
+        draftDisabledReason
       }
     ) : null,
     canReply && mode === "sent" ? /* @__PURE__ */ jsxs("div", { className: "border-status-active-border bg-status-active-bg flex items-center gap-2 rounded-md border p-3 text-[13px]", children: [
@@ -782,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."
@@ -800,10 +669,7 @@ function ThreadBody({
         ] }),
         " thread; open it there to finish. Nothing was sent."
       ] }),
-      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenInGmail == null ? void 0 : onOpenInGmail(thread.threadId), children: [
-        /* @__PURE__ */ jsx(GmailMark, { size: 14 }),
-        " Open in Gmail"
-      ] }),
+      /* @__PURE__ */ jsx(OpenInGmailButton, { thread, onOpenInGmail }),
       /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setMode("idle"), children: "Done" })
     ] }) : null
   ] });
@@ -819,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: [
@@ -840,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,
               ": ",