@handled-ai/design-system 0.20.5 → 0.20.6

package/src/components/conversation-panel.tsx

@@ -43,12 +43,13 @@ import {
 import { cn } from "../lib/utils"
 import { getInitials } from "../lib/user-display"
 import { BRAND_ICONS } from "../lib/icons"
-import { htmlToTextSnippet, sanitizeHtml } from "../internal/safe-html"
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar"
 import { Button } from "./button"
 import { Switch } from "./switch"
 import { Textarea } from "./textarea"
 import { RichTextToolbar } from "./rich-text-toolbar"
+import { EmailBody } from "./email-body"
+import { decodeEmailDisplayText, emailBodySnippet, formatAddressList, normalizeEmailSender } from "./email-display-helpers"
 import {
   Dialog,
   DialogContent,
@@ -74,6 +75,25 @@ export 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?: { kind: "new" | "read" | "opened" | "sent" | "draft"; label: string }
@@ -156,22 +176,13 @@ export interface ConversationPanelProps {
 
 /* ── Shared helpers ──────────────────────────────────────────────────────── */
 
-/** Gmail-like reading-pane typography (mirrors timeline-activity's email mode). */
-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: string): string {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")
 }
 
 /** Plain-text -> simple paragraph HTML for the Preview / sent-message body. */
 function textToHtml(text: string): string {
-  return text
+  return decodeEmailDisplayText(text)
     .split(/\n{2,}/)
     .map((p) => p.trim())
     .filter(Boolean)
@@ -179,308 +190,85 @@ function textToHtml(text: string): string {
     .join("")
 }
 
-type CollapsedHtmlMessage = { bodyHtml: string; detailsHtml: string }
-type CollapsedTextMessage = { bodyText: string; detailsText: string }
-type MessageSegment = { html?: string; text?: string; visibleText: string }
-
-const SPLITTABLE_BLOCK_TAGS = new Set(["p", "div"])
-const WHOLE_BLOCK_TAGS = new Set(["blockquote", "table", "ul", "ol", "hr"])
-const BLOCK_TAGS = 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: string): string {
-  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: string): string {
-  return decodeHtmlText(html).replace(/\u00a0/g, " ").replace(/[ \t]+/g, " ").trim()
+function displayParticipant(person: ConvParticipant) {
+  return normalizeEmailSender({ name: person.name, email: person.email, fallbackName: person.email || person.name })
 }
 
-function serializeNode(node: Node): string {
-  const host = document.createElement("div")
-  host.appendChild(node.cloneNode(true))
-  return host.innerHTML
+function firstName(name: string): string {
+  return decodeEmailDisplayText(name).split(" ")[0] || decodeEmailDisplayText(name)
 }
 
-function wrapHtmlLike(element: Element, innerHtml: string): string {
-  const clone = element.cloneNode(false) as HTMLElement
-  clone.innerHTML = innerHtml
-  return clone.outerHTML
+function sameEmail(a?: string | null, b?: string | null): boolean {
+  return Boolean(a && b && a.trim().toLowerCase() === b.trim().toLowerCase())
 }
 
-function hasDirectBr(nodes: readonly Node[]): boolean {
-  return nodes.some((node) => node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === "br")
+function messageBodySnippet(message: Pick<ConvMessage, "body" | "bodyHtml">, maxLength = 140): string {
+  return emailBodySnippet({ bodyHtml: message.bodyHtml, body: message.body }, maxLength)
 }
 
-function hasDirectBlockChild(element: Element): boolean {
-  return Array.from(element.children).some((child) => {
-    const tagName = child.tagName.toLowerCase()
-    return tagName !== "br" && BLOCK_TAGS.has(tagName)
-  })
-}
 
-function makeHtmlSegment(html: string): MessageSegment | null {
-  const visibleText = htmlToVisibleText(html)
-  if (!html.trim() || (!visibleText && !/<(?:img|hr)\b/i.test(html))) return null
-  return { html, visibleText }
-}
+type MessageTimestampValue = string | number | Date | null | undefined
 
-function splitInlineNodes(nodes: readonly Node[], wrapper?: Element): MessageSegment[] {
-  const containsBr = hasDirectBr(nodes)
-  const chunks: string[][] = [[]]
+function parseMessageTimestampValue(value: MessageTimestampValue): number | null {
+  if (value == null || value === "") return null
 
-  nodes.forEach((node) => {
-    if (node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === "br") {
-      chunks.push([])
-      return
-    }
-
-    chunks[chunks.length - 1]?.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): segment is MessageSegment => Boolean(segment))
-}
-
-function splitElementSegment(element: Element): MessageSegment[] {
-  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) as MessageSegment[]
+  if (value instanceof Date) {
+    const time = value.getTime()
+    return Number.isNaN(time) ? null : time
   }
 
-  if (SPLITTABLE_BLOCK_TAGS.has(tagName) && hasDirectBr(Array.from(element.childNodes)) && !hasDirectBlockChild(element)) {
-    return splitInlineNodes(Array.from(element.childNodes), element)
+  if (typeof value === "number") {
+    if (!Number.isFinite(value)) return null
+    return value < 10_000_000_000 ? value * 1000 : value
   }
 
-  const segment = makeHtmlSegment(element.outerHTML)
-  return segment ? [segment] : []
-}
-
-function splitHtmlNodes(nodes: readonly Node[]): MessageSegment[] {
-  const segments: MessageSegment[] = []
-  let inlineNodes: Node[] = []
+  const trimmed = value.trim()
+  if (!trimmed) return null
 
-  const flushInline = () => {
-    if (!inlineNodes.length) return
-    segments.push(...splitInlineNodes(inlineNodes))
-    inlineNodes = []
+  if (/^\d+$/.test(trimmed)) {
+    const numeric = Number(trimmed)
+    if (!Number.isFinite(numeric)) return null
+    return numeric < 10_000_000_000 ? numeric * 1000 : numeric
   }
 
-  nodes.forEach((node) => {
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const element = node as Element
-      const tagName = element.tagName.toLowerCase()
-      if (BLOCK_TAGS.has(tagName)) {
-        flushInline()
-        segments.push(...splitElementSegment(element))
-        return
-      }
-    }
-
-    inlineNodes.push(node)
-  })
-
-  flushInline()
-  return segments
+  const parsed = Date.parse(trimmed)
+  return Number.isNaN(parsed) ? null : parsed
 }
 
-function findMatchingCloseTag(html: string, tagName: string, openTagEnd: number): number {
-  if (tagName === "hr") return openTagEnd + 1
-
-  const tagPattern = new RegExp(`</?${tagName}\\b[^>]*>`, "gi")
-  tagPattern.lastIndex = openTagEnd + 1
-  let depth = 1
-  let match: RegExpExecArray | null
-
-  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 messageTimestamp(message: ConvMessage): number | null {
+  const directional = message.direction === "outbound"
+    ? [message.sentAt, message.sent_at]
+    : [message.receivedAt, message.received_at]
+
+  const candidates: MessageTimestampValue[] = [
+    ...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 html.length
+  return null
 }
 
-function splitHtmlSegmentsFallback(html: string): MessageSegment[] {
-  const segments: MessageSegment[] = []
-  let cursor = 0
-
-  const pushInline = (inlineHtml: string) => {
-    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)
+function sortMessagesChronologically(messages: ConvMessage[]): ConvMessage[] {
+  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 a.index - b.index
     })
-  }
-
-  while (cursor < html.length) {
-    const rest = html.slice(cursor)
-    const match = HTML_BLOCK_START_RE.exec(rest)
-    if (!match || match.index === undefined) {
-      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
-  }
-
-  return segments
-}
-
-function segmentHtmlMessage(html: string): MessageSegment[] {
-  if (typeof document === "undefined" || typeof Node === "undefined") {
-    return splitHtmlSegmentsFallback(html)
-  }
-
-  const template = document.createElement("template")
-  template.innerHTML = html
-  return splitHtmlNodes(Array.from(template.content.childNodes))
-}
-
-function segmentTextMessage(text: string): MessageSegment[] {
-  const lines = text.match(/[^\n]*(?:\n|$)/g) ?? []
-  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: string): string {
-  return text.replace(/\u00a0/g, " ").trimStart().split(/\r?\n/).find((line) => line.trim())?.trim() ?? ""
-}
-
-function isLikelySenderNameLine(line: string): boolean {
-  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: MessageSegment[], fromIndex: number): string {
-  for (let index = fromIndex + 1; index < segments.length; index += 1) {
-    const text = firstVisibleLine(segments[index]?.visibleText ?? "")
-    if (text) return text
-  }
-  return ""
-}
-
-function isFooterBoundary(segments: MessageSegment[], index: number): boolean {
-  const line = firstVisibleLine(segments[index]?.visibleText ?? "")
-  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: MessageSegment[]): { bodySegments: MessageSegment[]; detailsSegments: MessageSegment[] } {
-  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) }
-    }
-  }
-
-  return { bodySegments: segments, detailsSegments: [] }
-}
-
-function splitMessageHtml(rawHtml: string): CollapsedHtmlMessage {
-  const sanitizedHtml = sanitizeHtml(rawHtml)
-  const { bodySegments, detailsSegments } = splitFooterSegments(segmentHtmlMessage(sanitizedHtml))
-
-  if (!detailsSegments.length) return { bodyHtml: sanitizedHtml, detailsHtml: "" }
-
-  return {
-    bodyHtml: bodySegments.map((segment) => segment.html ?? "").join(""),
-    detailsHtml: detailsSegments.map((segment) => segment.html ?? "").join(""),
-  }
-}
-
-function splitMessageText(text: string): CollapsedTextMessage {
-  const { bodySegments, detailsSegments } = splitFooterSegments(segmentTextMessage(text))
-
-  if (!detailsSegments.length) return { bodyText: text, detailsText: "" }
-
-  return {
-    bodyText: bodySegments.map((segment) => segment.text ?? "").join(""),
-    detailsText: detailsSegments.map((segment) => segment.text ?? "").join(""),
-  }
-}
-
-function messageBodySnippet(message: Pick<ConvMessage, "body" | "bodyHtml">, maxLength = 140): string {
-  if (message.bodyHtml) {
-    return htmlToTextSnippet(splitMessageHtml(message.bodyHtml).bodyHtml, maxLength)
-  }
-
-  return splitMessageText(message.body ?? "").bodyText.split("\n").find((line) => line.trim())?.trim() ?? ""
+    .map((entry) => entry.message)
 }
 
 function GmailMark({ size = 14 }: { size?: number }) {
@@ -497,20 +285,18 @@ function GmailMark({ size = 14 }: { size?: number }) {
 }
 
 function PersonAvatar({ person, size = "sm" }: { person: ConvParticipant; size?: "sm" | "default" }) {
+  const display = displayParticipant(person)
+
   return (
     <Avatar size={size}>
-      {person.avatarUrl ? <AvatarImage src={person.avatarUrl} alt={person.name} /> : null}
+      {person.avatarUrl ? <AvatarImage src={person.avatarUrl} alt={display.name} /> : null}
       <AvatarFallback className="bg-muted text-muted-foreground text-[10px] font-medium uppercase">
-        {getInitials({ name: person.name, email: person.email })}
+        {getInitials({ name: display.name, email: display.email ?? person.email })}
       </AvatarFallback>
     </Avatar>
   )
 }
 
-function firstName(name: string): string {
-  return name.split(" ")[0] || name
-}
-
 const STATUS_PILL: Record<ConvStatus, { label: string; cls: string }> = {
   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" },
@@ -599,7 +385,8 @@ function MessageView({
   me?: ConvParticipant
 }) {
   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)
@@ -613,7 +400,7 @@ function MessageView({
       >
         <PersonAvatar person={message.from} />
         <span className="text-muted-foreground min-w-0 flex-1 truncate text-[13px]">
-          <b className="text-foreground">{firstName(message.from.name)}</b> · {snippet}
+          <b className="text-foreground">{firstName(fromDisplay.name)}</b> · {snippet}
         </span>
         <span className="text-muted-foreground/60 shrink-0 text-xs">{message.ago ?? message.date}</span>
         <ChevronDown size={13} className="text-muted-foreground shrink-0" />
@@ -621,10 +408,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(message.body ?? "")
-  const hasDetails = Boolean(htmlParts?.detailsHtml || textParts?.detailsText)
+  const meDisplay = me ? displayParticipant(me) : null
+  const toLabel = meDisplay && sameEmail(toDisplay.email, meDisplay.email) ? "me" : firstName(toDisplay.name)
 
   return (
     <div data-slot="conv-message" className="rounded-md border border-border bg-background">
@@ -636,8 +421,10 @@ function MessageView({
         <PersonAvatar person={message.from} size="default" />
         <span className="min-w-0 flex-1">
           <span className="flex flex-wrap items-baseline gap-x-1.5">
-            <span className="text-[13px] font-semibold">{message.from.name}</span>
-            <span className="text-muted-foreground/60 truncate text-xs">&lt;{message.from.email}&gt;</span>
+            <span className="text-[13px] font-semibold">{fromDisplay.name}</span>
+            {fromDisplay.email ? (
+              <span className="text-muted-foreground/60 truncate text-xs">&lt;{fromDisplay.email}&gt;</span>
+            ) : null}
           </span>
           <span className="text-muted-foreground block text-xs">
             to <b>{toLabel}</b>
@@ -664,33 +451,15 @@ function MessageView({
       </button>
 
       <div className="px-3 pb-2.5">
-        {htmlParts ? (
-          <div data-slot="conv-message-body" className={PROSE} dangerouslySetInnerHTML={{ __html: htmlParts.bodyHtml }} />
-        ) : (
-          <div data-slot="conv-message-body" className={cn(PROSE, "whitespace-pre-line")}>{textParts?.bodyText}</div>
-        )}
-
-        {hasDetails ? (
-          <div className="mt-2">
-            <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}
-            >
-              {detailsOpen ? "Hide signature/details" : "Show signature/details"}
-            </button>
-            {detailsOpen ? (
-              <div className="border-border text-muted-foreground mt-1 border-l-2 pl-3 text-[13px]">
-                {htmlParts ? (
-                  <div data-slot="conv-message-details" className={PROSE} dangerouslySetInnerHTML={{ __html: htmlParts.detailsHtml }} />
-                ) : (
-                  <div data-slot="conv-message-details" className={cn(PROSE, "whitespace-pre-line")}>{textParts?.detailsText}</div>
-                )}
-              </div>
-            ) : null}
-          </div>
-        ) : null}
+        <div data-slot="conv-message-body">
+          <EmailBody
+            html={message.bodyHtml}
+            text={message.body}
+            variant="history"
+            collapseDetails={true}
+            className="text-sm"
+          />
+        </div>
 
         {message.quoted ? (
           <div className="mt-2">
@@ -704,8 +473,10 @@ function MessageView({
             </button>
             {quoteOpen ? (
               <div className="border-border text-muted-foreground mt-1 border-l-2 pl-3 text-[13px]">
-                <p className="mb-1" dangerouslySetInnerHTML={{ __html: sanitizeHtml(message.quoted.attr) }} />
-                <div className={PROSE} dangerouslySetInnerHTML={{ __html: sanitizeHtml(message.quoted.html) }} />
+                <p className="mb-1">{decodeEmailDisplayText(message.quoted.attr)}</p>
+                <div data-slot="conv-quoted-body">
+                  <EmailBody html={message.quoted.html} variant="history" collapseDetails={false} />
+                </div>
               </div>
             ) : null}
           </div>
@@ -769,7 +540,7 @@ function ReplyComposer({
 
     if (!onPreviewReply) {
       // No server preview contract: render a sanitized local draft preview only.
-      setPreviewState({ loading: false, html: sanitizeHtml(localPreviewHtml), confirmationToken: null, error: null, local: true })
+      setPreviewState({ loading: false, html: localPreviewHtml, confirmationToken: null, error: null, local: true })
       return
     }
 
@@ -778,7 +549,7 @@ function ReplyComposer({
       const result = await onPreviewReply({ threadId: thread.threadId, body, includeSignature: sig, replyAll })
       setPreviewState({
         loading: false,
-        html: sanitizeHtml(result.htmlBody ?? ""),
+        html: result.htmlBody ?? "",
         confirmationToken: result.confirmationToken ?? null,
         error: null,
         local: false,
@@ -835,7 +606,7 @@ function ReplyComposer({
             </>
           ) : (
             <>
-              Reply to <b>{firstName(thread.contact.name)}</b>
+              Reply to <b>{firstName(displayParticipant(thread.contact).name)}</b>
             </>
           )}
         </span>
@@ -850,14 +621,14 @@ function ReplyComposer({
       <div className="border-border mb-2 space-y-1 border-b pb-2 text-[13px]">
         <div className="flex items-center gap-1.5">
           <span className="text-muted-foreground w-12 shrink-0 text-[11px] font-medium">To</span>
-          <span className="font-medium">{thread.contact.name}</span>
-          <span className="text-muted-foreground/60 truncate text-xs">{thread.contact.email}</span>
+          <span className="font-medium">{displayParticipant(thread.contact).name}</span>
+          <span className="text-muted-foreground/60 truncate text-xs">{displayParticipant(thread.contact).email ?? thread.contact.email}</span>
         </div>
         {replyAll && ccList.length ? (
           <div className="flex items-start gap-1.5">
             <span className="text-muted-foreground w-12 shrink-0 text-[11px] font-medium">Cc</span>
             <span className="text-muted-foreground text-xs">
-              {ccList.map((c) => c.name).join(", ")}
+              {formatAddressList(ccList.map((c) => `${displayParticipant(c).name} <${displayParticipant(c).email ?? c.email}>`))}
             </span>
           </div>
         ) : null}
@@ -919,11 +690,11 @@ function ReplyComposer({
           <div className="border-border space-y-1 rounded-md border p-3 text-[13px]">
             <div>
               <span className="text-muted-foreground">To </span>
-              <b>{thread.contact.name}</b>{" "}
-              <span className="text-muted-foreground/60">&lt;{thread.contact.email}&gt;</span>
+              <b>{displayParticipant(thread.contact).name}</b>{" "}
+              <span className="text-muted-foreground/60">&lt;{displayParticipant(thread.contact).email ?? thread.contact.email}&gt;</span>
             </div>
             {replyAll && ccList.length ? (
-              <div className="text-muted-foreground">Cc {ccList.map((c) => c.name).join(", ")}</div>
+              <div className="text-muted-foreground">Cc {formatAddressList(ccList.map((c) => `${displayParticipant(c).name} <${displayParticipant(c).email ?? c.email}>`))}</div>
             ) : null}
             <div>
               <span className="text-muted-foreground">Subject </span>
@@ -943,9 +714,10 @@ function ReplyComposer({
             <div
               data-slot="conv-preview-body"
               data-confirmation-token={previewState.confirmationToken ?? undefined}
-              className={cn(PROSE, "max-h-72 overflow-auto")}
-              dangerouslySetInnerHTML={{ __html: previewState.html ?? "" }}
-            />
+              className="max-h-72 overflow-auto"
+            >
+              <EmailBody html={previewState.html ?? ""} variant="preview" collapseDetails={false} defaultDetailsOpen />
+            </div>
           )}
           {sendError ? (
             <p role="alert" className="text-destructive text-sm">
@@ -1013,16 +785,27 @@ function ThreadBody({
   const replyDisabledReason = thread.replyDisabledReason?.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<ThreadMode>("idle")
   const [replyAll, setReplyAll] = React.useState(false)
   const [expanded, setExpanded] = React.useState<Record<string, boolean>>(() => {
     const o: Record<string, boolean> = {}
-    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 = { ...current }
+      sortedMessages.forEach((m, i) => {
+        if (next[m.id] === undefined) next[m.id] = i === sortedMessages.length - 1
+      })
+      return next
+    })
+  }, [sortedMessages])
+
   const toggle = (id: string) => setExpanded((e) => ({ ...e, [id]: !e[id] }))
 
   return (
@@ -1038,7 +821,7 @@ function ThreadBody({
       ) : null}
 
       <div className="space-y-1">
-        {thread.messages.map((m) => (
+        {sortedMessages.map((m) => (
           <MessageView key={m.id} message={m} expanded={!!expanded[m.id]} onToggle={() => toggle(m.id)} me={me} />
         ))}
       </div>
@@ -1096,7 +879,7 @@ function ThreadBody({
           <Check size={16} className="text-status-active-fg shrink-0" />
           <span className="flex-1">
             <b>{replyAll ? "Reply all sent" : "Reply sent"}</b> · added to the thread. Delivered to{" "}
-            <b>{thread.contact.name}</b>. This action stays <b>Pending</b>; playbooks remain stopped.
+            <b>{displayParticipant(thread.contact).name}</b>. This action stays <b>Pending</b>; playbooks remain stopped.
           </span>
           <Button type="button" variant="ghost" size="sm" onClick={() => setMode("idle")}>
             Done
@@ -1138,8 +921,11 @@ function ThreadRow({
   onToggleOpen: () => void
 } & Pick<ConversationPanelProps, "me" | "tenantName" | "onSendReply" | "onCreateGmailDraft" | "onPreviewReply" | "onOpenInGmail">) {
   const status = effectiveStatus(thread)
-  const last = thread.messages[thread.messages.length - 1]
-  const who = 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?.direction === "outbound" && sameEmail(lastSender?.email, meDisplay?.email) ? "You" : firstName(lastSender?.name ?? "")
   const lastSnippet = last ? messageBodySnippet(last, 120) : ""
   const pill = STATUS_PILL[status]
 
@@ -1160,7 +946,7 @@ function ThreadRow({
             </span>
           </span>
           <span className="text-muted-foreground block truncate text-xs">
-            <b className="text-foreground/80">{thread.contact.name}</b> · {who}: {lastSnippet}
+            <b className="text-foreground/80">{displayParticipant(thread.contact).name}</b> · {who}: {lastSnippet}
           </span>
         </span>
         <span className="text-muted-foreground/60 shrink-0 text-xs">{thread.lastWhen}</span>