@handled-ai/design-system 0.20.0 → 0.20.2

package/src/components/conversation-panel.tsx

@@ -120,7 +120,7 @@ export interface ConversationPanelProps {
   /** Deployment brand, used in the paused-playbook copy. */
   tenantName?: string
   onSendReply?: (payload: ConversationReplyPayload) => void | Promise<void>
-  onCreateGmailDraft?: (payload: ConversationReplyPayload) => void
+  onCreateGmailDraft?: (payload: ConversationReplyPayload) => void | Promise<void>
   onOpenInGmail?: (threadId: string) => void
   /** Inline-open this thread initially (defaults to the first responded one). */
   defaultOpenThreadId?: string
@@ -152,6 +152,310 @@ 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 serializeNode(node: Node): string {
+  const host = document.createElement("div")
+  host.appendChild(node.cloneNode(true))
+  return host.innerHTML
+}
+
+function wrapHtmlLike(element: Element, innerHtml: string): string {
+  const clone = element.cloneNode(false) as HTMLElement
+  clone.innerHTML = innerHtml
+  return clone.outerHTML
+}
+
+function hasDirectBr(nodes: readonly Node[]): boolean {
+  return nodes.some((node) => node.nodeType === Node.ELEMENT_NODE && (node as Element).tagName.toLowerCase() === "br")
+}
+
+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 }
+}
+
+function splitInlineNodes(nodes: readonly Node[], wrapper?: Element): MessageSegment[] {
+  const containsBr = hasDirectBr(nodes)
+  const chunks: string[][] = [[]]
+
+  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 (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 splitHtmlNodes(nodes: readonly Node[]): MessageSegment[] {
+  const segments: MessageSegment[] = []
+  let inlineNodes: Node[] = []
+
+  const flushInline = () => {
+    if (!inlineNodes.length) return
+    segments.push(...splitInlineNodes(inlineNodes))
+    inlineNodes = []
+  }
+
+  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
+}
+
+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
+  }
+
+  return html.length
+}
+
+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)
+    })
+  }
+
+  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() ?? ""
+}
+
 function GmailMark({ size = 14 }: { size?: number }) {
   return (
     // eslint-disable-next-line @next/next/no-img-element
@@ -212,11 +516,11 @@ function MessageView({
   me?: ConvParticipant
 }) {
   const [quoteOpen, setQuoteOpen] = React.useState(false)
-  const snippet =
-    message.body?.split("\n").find(Boolean) ??
-    (message.bodyHtml ? htmlToTextSnippet(message.bodyHtml, 140) : "")
+  const [detailsOpen, setDetailsOpen] = React.useState(false)
 
   if (!expanded) {
+    const snippet = messageBodySnippet(message, 140)
+
     return (
       <button
         type="button"
@@ -235,6 +539,9 @@ 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)
 
   return (
     <div data-slot="conv-message" className="rounded-md border border-border bg-background">
@@ -273,13 +580,35 @@ function MessageView({
         </span>
       </button>
 
-      <div className="px-3 pb-3">
-        {message.bodyHtml ? (
-          <div className={PROSE} dangerouslySetInnerHTML={{ __html: sanitizeHtml(message.bodyHtml) }} />
+      <div className="px-3 pb-2.5">
+        {htmlParts ? (
+          <div data-slot="conv-message-body" className={PROSE} dangerouslySetInnerHTML={{ __html: htmlParts.bodyHtml }} />
         ) : (
-          <div className={cn(PROSE, "whitespace-pre-line")}>{message.body}</div>
+          <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}
+
         {message.quoted ? (
           <div className="mt-2">
             <button
@@ -320,7 +649,7 @@ function ReplyComposer({
   tenantName?: string
   onClose: () => void
   onSend: (body: string, includeSignature: boolean) => void | Promise<void>
-  onDraft: (body: string, includeSignature: boolean) => void
+  onDraft: (body: string, includeSignature: boolean) => void | Promise<void>
 }) {
   const [body, setBody] = React.useState(thread.draft ?? "")
   const [sig, setSig] = React.useState(true)
@@ -345,6 +674,19 @@ function ReplyComposer({
     }
   }
 
+  const handleDraft = async () => {
+    setSending(true)
+    setSendError(null)
+    try {
+      await onDraft(body, sig)
+      setPreview(false)
+    } catch (error) {
+      setSendError(error instanceof Error ? error.message : "Could not create the Gmail draft. Please try again.")
+    } finally {
+      setSending(false)
+    }
+  }
+
   return (
     <div data-slot="conv-reply" className="border-border bg-muted/20 rounded-md border p-3">
       <div className="mb-2 flex items-center gap-2">
@@ -460,10 +802,7 @@ function ReplyComposer({
             <button
               type="button"
               disabled={sending}
-              onClick={() => {
-                setPreview(false)
-                onDraft(body, sig)
-              }}
+              onClick={handleDraft}
               className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-[13px] disabled:pointer-events-none disabled:opacity-50"
             >
               <GmailMark size={14} /> Open draft in Gmail
@@ -508,7 +847,7 @@ function ThreadBody({
   me?: ConvParticipant
   tenantName?: string
   onSendReply?: (p: ConversationReplyPayload) => void | Promise<void>
-  onCreateGmailDraft?: (p: ConversationReplyPayload) => void
+  onCreateGmailDraft?: (p: ConversationReplyPayload) => void | Promise<void>
   onOpenInGmail?: (threadId: string) => void
 }) {
   const canReply = thread.canReply !== false
@@ -526,7 +865,7 @@ function ThreadBody({
   const toggle = (id: string) => setExpanded((e) => ({ ...e, [id]: !e[id] }))
 
   return (
-    <div data-slot="conv-thread-body" className="space-y-2">
+    <div data-slot="conv-thread-body" className="space-y-1.5">
       {canReply && thread.paused ? (
         <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]">
           <Pause size={13} className="mt-0.5 shrink-0" />
@@ -537,7 +876,7 @@ function ThreadBody({
         </div>
       ) : null}
 
-      <div className="space-y-1.5">
+      <div className="space-y-1">
         {thread.messages.map((m) => (
           <MessageView key={m.id} message={m} expanded={!!expanded[m.id]} onToggle={() => toggle(m.id)} me={me} />
         ))}
@@ -582,8 +921,8 @@ function ThreadBody({
             await onSendReply?.({ threadId: thread.threadId, body, includeSignature, replyAll })
             setMode("sent")
           }}
-          onDraft={(body, includeSignature) => {
-            onCreateGmailDraft?.({ threadId: thread.threadId, body, includeSignature, replyAll })
+          onDraft={async (body, includeSignature) => {
+            await onCreateGmailDraft?.({ threadId: thread.threadId, body, includeSignature, replyAll })
             setMode("draft")
           }}
         />
@@ -639,9 +978,7 @@ function ThreadRow({
   const status = effectiveStatus(thread)
   const last = thread.messages[thread.messages.length - 1]
   const who = last?.direction === "inbound" ? firstName(last.from.name) : "You"
-  const lastSnippet =
-    last?.body?.split("\n").find(Boolean) ??
-    (last?.bodyHtml ? htmlToTextSnippet(last.bodyHtml, 120) : "")
+  const lastSnippet = last ? messageBodySnippet(last, 120) : ""
   const pill = STATUS_PILL[status]
 
   return (

package/src/components/owner-chips.tsx

@@ -12,10 +12,9 @@
  *     more than one (AE + RM). Informational + links out to Salesforce; never
  *     assigned from inside Handled. Leads with the Salesforce mark.
  *
- * Single account owner -> a static, non-interactive chip (no dropdown).
- * Multiple account owners -> stacked avatars + a ×N badge and a menu that
- * lists each owner with a link out. This keeps a single owner cheap and quiet
- * while still surfacing the full set when there is more than one.
+ * Account owner chips are read-only dropdowns. A single owner still opens a
+ * small Salesforce-sourced details menu; multiple owners show stacked avatars
+ * and a ×N badge before listing each owner with optional Salesforce links.
  *
  * Presentational only: data + handlers come from the consumer (the app).
  */
@@ -125,7 +124,7 @@ function SignalOwnerChip({
       </span>
       <span className="bg-border/70 mx-0.5 h-3.5 w-px" aria-hidden />
       <span className={cn("font-medium", owner ? "text-foreground" : "text-muted-foreground")}>
-        {owner ? owner.name.split(" ")[0] : "Unassigned"}
+        {owner ? owner.name : "Unassigned"}
       </span>
     </>
   )
@@ -208,43 +207,103 @@ export interface AccountOwnerChipProps {
   className?: string
 }
 
-function AccountOwnerChip({ owners, className }: AccountOwnerChipProps) {
-  const [open, setOpen] = React.useState(false)
-  if (!owners.length) return null
-  const multi = owners.length > 1
+function AccountOwnerSummary({ person }: { person: OwnerPerson }) {
+  return (
+    <span className="flex min-w-0 flex-col">
+      <span className="truncate text-[13px] font-medium">{person.name}</span>
+      {person.role ? (
+        <span className="text-muted-foreground truncate text-[11px]">{person.role}</span>
+      ) : null}
+      {person.email ? (
+        <span className="text-muted-foreground truncate text-[11px]">{person.email}</span>
+      ) : null}
+    </span>
+  )
+}
 
-  // Single owner: a quiet, static chip — no dropdown (per product intent).
-  if (!multi) {
-    const only = owners[0]
-    const body = (
-      <>
-        <span className="inline-flex shrink-0 items-center">
-          <SalesforceMark />
-        </span>
-        <OwnerAvatar person={only} />
-        <span className="text-foreground font-medium">{only.name.split(" ")[0]}</span>
-      </>
-    )
-    return only.href ? (
+function AccountOwnerSalesforceLink({ person }: { person: OwnerPerson }) {
+  if (!person.href) return null
+
+  return (
+    <DropdownMenuItem asChild className="p-0">
       <a
-        href={only.href}
+        href={person.href}
         target="_blank"
         rel="noopener noreferrer"
-        data-slot="account-owner-chip"
-        className={cn(chipBase, "hover:bg-muted transition-colors", className)}
-        title={`Account owner in Salesforce — ${only.name}`}
+        data-account-owner-salesforce-link="true"
+        className="text-foreground focus:bg-accent focus:text-accent-foreground flex items-center gap-1.5 rounded-sm px-2 py-1.5 text-[12px] font-medium outline-hidden transition-colors"
+        title={`Open ${person.name} in Salesforce`}
       >
-        {body}
-        <ArrowUpRight size={12} className="text-muted-foreground ml-0.5" />
+        <ArrowUpRight size={12} className="text-muted-foreground" />
+        Open in Salesforce
       </a>
-    ) : (
-      <span
-        data-slot="account-owner-chip"
-        className={cn(chipBase, className)}
-        title={`Account owner in Salesforce — ${only.name}`}
+    </DropdownMenuItem>
+  )
+}
+
+function AccountOwnerRow({ person }: { person: OwnerPerson }) {
+  return (
+    <>
+      <DropdownMenuItem
+        disabled
+        data-owner-row="true"
+        className="items-start gap-2 py-1.5 data-[disabled]:opacity-100"
       >
-        {body}
-      </span>
+        <OwnerAvatar person={person} size="default" />
+        <AccountOwnerSummary person={person} />
+      </DropdownMenuItem>
+      <AccountOwnerSalesforceLink person={person} />
+    </>
+  )
+}
+
+function SalesforceReadOnlyHelper() {
+  return (
+    <div role="presentation" className="text-muted-foreground flex items-start gap-1.5 px-2 py-1.5 text-[11px]">
+      <Info size={12} className="mt-0.5 shrink-0" />
+      <span>Read-only from Salesforce. Manage owners in Salesforce.</span>
+    </div>
+  )
+}
+
+function AccountOwnerChip({ owners, className }: AccountOwnerChipProps) {
+  const [open, setOpen] = React.useState(false)
+  if (!owners.length) return null
+  const multi = owners.length > 1
+
+  if (!multi) {
+    const only = owners[0]
+
+    return (
+      <DropdownMenu open={open} onOpenChange={setOpen}>
+        <DropdownMenuTrigger asChild>
+          <button
+            type="button"
+            data-slot="account-owner-chip"
+            className={cn(chipBase, "hover:bg-muted cursor-pointer transition-colors", className)}
+            title={`Account owner in Salesforce — ${only.name}`}
+          >
+            <span className="inline-flex shrink-0 items-center">
+              <SalesforceMark />
+            </span>
+            <OwnerAvatar person={only} />
+            <span className="text-foreground font-medium">{only.name}</span>
+            <span className="text-muted-foreground ml-0.5">
+              {open ? <ChevronUp size={13} /> : <ChevronDown size={13} />}
+            </span>
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-72">
+          <DropdownMenuLabel className="flex items-center gap-1.5 text-[13px]">
+            <SalesforceMark />
+            Account owner
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <AccountOwnerRow person={only} />
+          <DropdownMenuSeparator />
+          <SalesforceReadOnlyHelper />
+        </DropdownMenuContent>
+      </DropdownMenu>
     )
   }
 
@@ -282,35 +341,11 @@ function AccountOwnerChip({ owners, className }: AccountOwnerChipProps) {
           {owners.length} account owners
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
-        {owners.map((o) => {
-          const row = (
-            <>
-              <OwnerAvatar person={o} size="default" />
-              <span className="flex min-w-0 flex-col">
-                <span className="truncate text-[13px] font-medium">{o.name}</span>
-                {o.role ? (
-                  <span className="text-muted-foreground truncate text-[11px]">{o.role}</span>
-                ) : null}
-              </span>
-              {o.href ? <ArrowUpRight size={13} className="text-muted-foreground ml-auto" /> : null}
-            </>
-          )
-          return (
-            <DropdownMenuItem key={o.id ?? o.name} asChild={!!o.href} className="gap-2">
-              {o.href ? (
-                <a href={o.href} target="_blank" rel="noopener noreferrer" title={`Open ${o.name} in Salesforce`}>
-                  {row}
-                </a>
-              ) : (
-                <span>{row}</span>
-              )}
-            </DropdownMenuItem>
-          )
-        })}
+        {owners.map((o) => (
+          <AccountOwnerRow key={o.id ?? o.name} person={o} />
+        ))}
         <DropdownMenuSeparator />
-        <div className="text-muted-foreground flex items-center gap-1.5 px-2 py-1.5 text-[11px]">
-          <Info size={12} /> Synced from Salesforce. Manage owners there.
-        </div>
+        <SalesforceReadOnlyHelper />
       </DropdownMenuContent>
     </DropdownMenu>
   )