@adatechnology/conversations-ui 0.7.0 → 0.9.0

package/src/participant/useParticipantFailedMenu.ts

@@ -0,0 +1,60 @@
+import { useReducer, useRef, type FocusEvent, type KeyboardEvent, type RefObject } from 'react'
+
+import { handleFailedMenuKeyDown } from './failedMenuKeyboard'
+import {
+  CLOSED_FAILED_MENU,
+  failedMenuReducer,
+  resolveFailedMenuTriggerKey,
+  type FailedMenuPlacement,
+  type FailedMenuState,
+} from './participantFailedMenuState'
+import { useFailedMenuInitialFocus, useFailedMenuOutsideClose, useFailedMenuPlacement } from './useFailedMenuEffects'
+
+export type ParticipantFailedMenuController = {
+  readonly state: FailedMenuState
+  readonly placement: FailedMenuPlacement
+  readonly containerRef: RefObject<HTMLSpanElement | null>
+  readonly triggerRef: RefObject<HTMLButtonElement | null>
+  readonly menuRef: RefObject<HTMLDivElement | null>
+  readonly handleTriggerClick: () => void
+  readonly handleTriggerKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void
+  readonly handleMenuKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void
+  readonly handleBlur: (event: FocusEvent<HTMLSpanElement>) => void
+  readonly close: () => void
+}
+
+export function useParticipantFailedMenu(): ParticipantFailedMenuController {
+  const [state, dispatch] = useReducer(failedMenuReducer, CLOSED_FAILED_MENU)
+  const containerRef = useRef<HTMLSpanElement | null>(null)
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const menuRef = useRef<HTMLDivElement | null>(null)
+
+  useFailedMenuInitialFocus(state, menuRef)
+  useFailedMenuOutsideClose(state.isOpen, containerRef, dispatch)
+  const placement = useFailedMenuPlacement(state.isOpen, { triggerRef, menuRef })
+
+  function handleTriggerKeyDown(event: KeyboardEvent<HTMLButtonElement>): void {
+    const initialFocus = resolveFailedMenuTriggerKey(event.key)
+    if (!initialFocus) return
+    event.preventDefault()
+    dispatch({ type: 'open', initialFocus })
+  }
+
+  function handleBlur(event: FocusEvent<HTMLSpanElement>): void {
+    const next = event.relatedTarget
+    if (next instanceof Node && !containerRef.current?.contains(next)) dispatch({ type: 'close' })
+  }
+
+  return {
+    state,
+    placement,
+    containerRef,
+    triggerRef,
+    menuRef,
+    handleTriggerClick: () => dispatch({ type: 'toggle' }),
+    handleTriggerKeyDown,
+    handleMenuKeyDown: (event) => handleFailedMenuKeyDown({ event, menuRef, triggerRef, dispatch }),
+    handleBlur,
+    close: () => dispatch({ type: 'close' }),
+  }
+}

package/src/participant/useParticipantThread.ts

@@ -17,9 +17,11 @@ import {
   type ParticipantSendEntry,
 } from './participantSendController'
 import { INITIAL_PARTICIPANT_THREAD_STATE, participantThreadReducer, type ParticipantThreadState } from './participantThreadState'
+import type { ParticipantPerspective } from './participantPerspective'
 import { useParticipantMarkRead } from './useParticipantMarkRead'
 import { useParticipantRevalidation } from './useParticipantRevalidation'
 import { useParticipantSend, type UseParticipantSendResult } from './useParticipantSend'
+import { useParticipantUnread } from './useParticipantUnread'
 
 const THREAD_PAGE_SIZE = 30
 
@@ -35,6 +37,8 @@ export type UseParticipantThreadParams = {
   readonly sendEntries: readonly ParticipantSendEntry[]
   readonly dispatchSend: (action: ParticipantSendAction) => void
   readonly hostPending?: readonly ParticipantPendingMessage[]
+  /** Present on a single-conversation screen: unread comes from the messages, not from `unreadCount`. */
+  readonly perspective?: ParticipantPerspective
 }
 
 export type UseParticipantThreadResult = ParticipantThreadState &
@@ -55,7 +59,7 @@ function isForSubject(event: ParticipantConversationEvent | undefined, subject:
 }
 
 export function useParticipantThread(params: UseParticipantThreadParams): UseParticipantThreadResult {
-  const { api, subject, channel, unreadCount = 0, onMarkedRead, sendEntries, dispatchSend, hostPending = [] } = params
+  const { api, subject, channel, unreadCount = 0, onMarkedRead, sendEntries, dispatchSend, hostPending = [], perspective } = params
   const { subjectType, subjectId } = subject
   const stableSubject = useMemo<ParticipantSubjectRef>(() => ({ subjectType, subjectId }), [subjectType, subjectId])
   const [state, dispatch] = useReducer(participantThreadReducer, INITIAL_PARTICIPANT_THREAD_STATE)
@@ -109,7 +113,14 @@ export function useParticipantThread(params: UseParticipantThreadParams): UsePar
     dispatchSend({ type: 'reflected', knownClientMessageIds: collectKnownClientMessageIds({ messages: state.messages, hostPending }) })
   }, [sendEntries, state.messages, hostPending, dispatchSend])
 
-  useParticipantMarkRead({ apiRef, subject: stableSubject, unreadCount, messageCount: state.messages.length, onMarkedRead })
+  const unread = useParticipantUnread({ messages: state.messages, perspective, reportedUnreadCount: unreadCount, onMarkedRead })
+  useParticipantMarkRead({
+    apiRef,
+    subject: stableSubject,
+    unreadCount: unread.unreadCount,
+    messageCount: state.messages.length,
+    onMarkedRead: unread.handleMarkedRead,
+  })
 
   const localPending = useMemo(() => toLocalPending(sendEntries), [sendEntries])
   return { ...state, localPending, confirmsRead, refresh, loadOlder, ...sending }

package/src/participant/useParticipantThreadController.ts

@@ -0,0 +1,112 @@
+import { useMemo, type Dispatch, type MutableRefObject } from 'react'
+
+import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
+
+import type { ConversationChannel } from '../conversationChannel'
+import type { ParticipantThreadProps } from './ParticipantThread'
+import { bindAttachmentUrlResolver } from './bindAttachmentUrlResolver'
+import type { ParticipantConversationsApi, ParticipantPendingMessage } from './participantApi.types'
+import type { ParticipantDrafts } from './participantDrafts'
+import type { ParticipantConversationsLabels } from './participantLabels'
+import type { ParticipantPerspective } from './participantPerspective'
+import { findFailedEntry, hasSendingEntry, type ParticipantSendAction } from './participantSendController'
+import type { ParticipantSendStates, ParticipantSendStatesAction } from './participantSendStates'
+import { useParticipantConversationView } from './useParticipantConversationView'
+import { useParticipantDraft } from './useParticipantDraft'
+import { useParticipantThread, type UseParticipantThreadResult } from './useParticipantThread'
+import { useParticipantThreadScroll } from './useParticipantThreadScroll'
+
+export type ParticipantThreadControllerParams = {
+  readonly api: ParticipantConversationsApi
+  readonly subject: ParticipantSubjectRef
+  readonly conversation: ParticipantConversationSummary
+  readonly labels: ParticipantConversationsLabels
+  /** Holds the immutable drafts of every subject; replaced, never mutated. */
+  readonly draftsRef: MutableRefObject<ParticipantDrafts>
+  readonly sendStates: ParticipantSendStates
+  readonly dispatchSendStates: Dispatch<ParticipantSendStatesAction>
+  readonly onMarkedRead: (subject: ParticipantSubjectRef) => void
+  readonly channel?: ConversationChannel
+  readonly locale?: string
+  readonly pendingMessages?: readonly ParticipantPendingMessage[]
+  readonly onRetryPending?: (clientMessageId: string) => void
+  readonly perspective?: ParticipantPerspective
+}
+
+/** Everything a conversation screen needs from the hooks; the caller adds only its own presentation props. */
+export type ParticipantThreadCoreProps = Pick<
+  ParticipantThreadProps,
+  | 'conversation'
+  | 'items'
+  | 'hasMore'
+  | 'labels'
+  | 'resolveAttachmentUrl'
+  | 'draft'
+  | 'onSend'
+  | 'status'
+  | 'refresh'
+  | 'scroll'
+  | 'newMessagesCount'
+  | 'isSending'
+  | 'channel'
+  | 'locale'
+  | 'onLoadOlder'
+  | 'pendingActions'
+  | 'perspective'
+>
+
+type BuildPendingActionsParams = {
+  readonly thread: UseParticipantThreadResult
+  readonly dispatchSend: (action: ParticipantSendAction) => void
+  readonly handleEdit: (clientMessageId: string) => void
+  readonly onRetryPending: ParticipantThreadControllerParams['onRetryPending']
+}
+
+function buildPendingActions({ thread, dispatchSend, handleEdit, onRetryPending }: BuildPendingActionsParams): ParticipantThreadCoreProps['pendingActions'] {
+  return {
+    retryLocal: (clientMessageId) => void thread.retry(clientMessageId),
+    discardLocal: (clientMessageId) => dispatchSend({ type: 'discarded', clientMessageId }),
+    editLocal: handleEdit,
+    ...(onRetryPending ? { retryHost: onRetryPending } : {}),
+  }
+}
+
+export function useParticipantThreadController(params: ParticipantThreadControllerParams): ParticipantThreadCoreProps {
+  const { api, subject, conversation, draftsRef } = params
+  const { draft, setText, setFiles, takeForSend, restoreFromEntry } = useParticipantDraft(draftsRef, subject)
+  const { thread, items, sendEntries, dispatchSend } = useParticipantConversationView(params)
+  const resolveAttachmentUrl = useMemo(() => bindAttachmentUrlResolver(api), [api])
+  const { scroll, newMessagesCount } = useParticipantThreadScroll(items, params.perspective)
+
+  function handleSend(): void {
+    const content = takeForSend()
+    if (content) void thread.send(content)
+  }
+
+  function handleEdit(clientMessageId: string): void {
+    const entry = findFailedEntry(sendEntries, clientMessageId)
+    if (!entry) return
+    restoreFromEntry(entry)
+    dispatchSend({ type: 'discarded', clientMessageId })
+  }
+
+  return {
+    conversation,
+    items,
+    hasMore: thread.hasMore,
+    labels: params.labels,
+    resolveAttachmentUrl,
+    draft: { value: draft.text, onChange: setText, files: draft.files, onFilesChange: setFiles },
+    onSend: handleSend,
+    status: thread.status,
+    refresh: () => void thread.refresh(),
+    scroll,
+    newMessagesCount,
+    isSending: hasSendingEntry(sendEntries),
+    channel: params.channel,
+    locale: params.locale,
+    onLoadOlder: () => void thread.loadOlder(),
+    pendingActions: buildPendingActions({ thread, dispatchSend, handleEdit, onRetryPending: params.onRetryPending }),
+    perspective: params.perspective,
+  }
+}

package/src/participant/useParticipantThreadScroll.ts

@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react'
 
 import { collectServerMessageIds, countNewIncomingMessages } from './participantNewMessages'
 import type { ParticipantTimelineItem } from './participantMessages'
+import type { ParticipantPerspective } from './participantPerspective'
 import { useScrollAwayState } from './useScrollAwayState'
 import { useStickToBottom, type ParticipantThreadScroll } from './useStickToBottom'
 
@@ -17,6 +18,7 @@ function keyOf(item: ParticipantTimelineItem | undefined): string | undefined {
 
 export function useParticipantThreadScroll(
   items: readonly ParticipantTimelineItem[],
+  perspective?: ParticipantPerspective,
 ): UseParticipantThreadScrollResult {
   const { scroll: base, isNearBottom } = useStickToBottom({
     firstKey: keyOf(items[0]),
@@ -30,5 +32,5 @@ export function useParticipantThreadScroll(
     if (isNearBottom) seenIds.current = collectServerMessageIds(items)
   }, [isNearBottom, items])
 
-  return { scroll, newMessagesCount: isNearBottom ? 0 : countNewIncomingMessages(seenIds.current, items) }
+  return { scroll, newMessagesCount: isNearBottom ? 0 : countNewIncomingMessages(seenIds.current, items, perspective) }
 }

package/src/participant/useParticipantUnread.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import type { ParticipantMessage } from '@adatechnology/conversation-contracts'
+
+import { buildMessage } from './participantFixtures.test-helper'
+import type { ParticipantPerspective } from './participantPerspective'
+import { useParticipantUnread } from './useParticipantUnread'
+
+const MESSAGES: readonly ParticipantMessage[] = [
+  buildMessage({ id: 'a', direction: 'inbound' }),
+  buildMessage({ id: 'b', direction: 'inbound' }),
+  buildMessage({ id: 'c', direction: 'outbound' }),
+]
+
+type ProbeProps = { readonly perspective?: ParticipantPerspective; readonly reported: number }
+
+function Probe({ perspective, reported }: ProbeProps) {
+  const { unreadCount } = useParticipantUnread({ messages: MESSAGES, perspective, reportedUnreadCount: reported })
+  return <output>{unreadCount}</output>
+}
+
+function unreadOf(props: ProbeProps): string {
+  return renderToStaticMarkup(<Probe {...props} />)
+}
+
+describe('useParticipantUnread', () => {
+  it('keeps the count the inbox reported when no perspective is given', () => {
+    expect(unreadOf({ reported: 3 })).toBe('<output>3</output>')
+    expect(unreadOf({ reported: 0 })).toBe('<output>0</output>')
+  })
+
+  it('derives from the messages for the operator: only the inbound ones, whatever the inbox said', () => {
+    expect(unreadOf({ perspective: 'operator', reported: 9 })).toBe('<output>2</output>')
+  })
+
+  it('derives from the messages for the participant: only the outbound ones', () => {
+    expect(unreadOf({ perspective: 'participant', reported: 9 })).toBe('<output>1</output>')
+  })
+})

package/src/participant/useParticipantUnread.ts

@@ -0,0 +1,38 @@
+import { useCallback, useRef, useState } from 'react'
+
+import type { ParticipantMessage, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
+
+import { countOtherSideMessages, resolveViewerUnread, type ParticipantPerspective } from './participantPerspective'
+
+export type UseParticipantUnreadParams = {
+  readonly messages: readonly ParticipantMessage[]
+  /** Absent keeps the count the inbox reported, which is how the list-driven screen works. */
+  readonly perspective?: ParticipantPerspective
+  readonly reportedUnreadCount: number
+  readonly onMarkedRead?: (subject: ParticipantSubjectRef) => void
+}
+
+export type UseParticipantUnreadResult = {
+  readonly unreadCount: number
+  readonly handleMarkedRead: (subject: ParticipantSubjectRef) => void
+}
+
+/** A single conversation has no inbox, so what the viewer has not read is derived from the messages themselves. */
+export function useParticipantUnread(params: UseParticipantUnreadParams): UseParticipantUnreadResult {
+  const { messages, perspective, reportedUnreadCount, onMarkedRead } = params
+  const [acknowledgedCount, setAcknowledgedCount] = useState(0)
+  const messagesRef = useRef(messages)
+  messagesRef.current = messages
+
+  const handleMarkedRead = useCallback(
+    (subject: ParticipantSubjectRef): void => {
+      if (perspective) setAcknowledgedCount(countOtherSideMessages(messagesRef.current, perspective))
+      onMarkedRead?.(subject)
+    },
+    [perspective, onMarkedRead],
+  )
+  const unreadCount = perspective
+    ? resolveViewerUnread({ messages, perspective, acknowledgedCount })
+    : reportedUnreadCount
+  return { unreadCount, handleMarkedRead }
+}

package/src/participant/useSuppressTouchTooltips.ts

@@ -0,0 +1,38 @@
+import { useEffect, type RefObject } from 'react'
+
+/**
+ * Keeps the package tooltip layer (which listens on the document) from lighting up for touch: a tap
+ * focuses the button on Android and the balloon would stay on. The events are stopped at the thread
+ * root, so the layer keeps its behavior for every other flow.
+ */
+export function useSuppressTouchTooltips(rootRef: RefObject<HTMLElement | null>): void {
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root) return undefined
+    let isTouching = false
+
+    function handlePointerDown(event: PointerEvent): void {
+      isTouching = event.pointerType === 'touch'
+    }
+    function handlePointerOver(event: PointerEvent): void {
+      if (event.pointerType === 'touch') event.stopPropagation()
+    }
+    function handleFocusIn(event: Event): void {
+      if (isTouching) event.stopPropagation()
+    }
+    function handleKeyDown(): void {
+      isTouching = false
+    }
+
+    root.addEventListener('pointerdown', handlePointerDown, true)
+    root.addEventListener('pointerover', handlePointerOver)
+    root.addEventListener('focusin', handleFocusIn)
+    root.addEventListener('keydown', handleKeyDown, true)
+    return () => {
+      root.removeEventListener('pointerdown', handlePointerDown, true)
+      root.removeEventListener('pointerover', handlePointerOver)
+      root.removeEventListener('focusin', handleFocusIn)
+      root.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [rootRef])
+}

package/src/styles.css

@@ -1139,7 +1139,7 @@
 
 /* Participant view (.cv-p-*). Public theming API: override --cv-p-surface, --cv-p-surface-raised,
    --cv-p-text, --cv-p-text-muted, --cv-p-border, --cv-p-accent, --cv-p-accent-contrast,
-   --cv-p-highlight, --cv-p-danger, --cv-p-radius, --cv-p-wallpaper, --cv-p-scrollbar-thumb, --cv-p-scrollbar-thumb-hover, --cv-p-channel-app, --cv-p-channel-whatsapp on .cv-p or any
+   --cv-p-highlight, --cv-p-danger, --cv-p-radius, --cv-p-wallpaper, --cv-p-scrollbar-thumb, --cv-p-scrollbar-thumb-hover, --cv-p-tick, --cv-p-tick-read, --cv-p-channel-app, --cv-p-channel-whatsapp on .cv-p or any
    ancestor. Channel colors must keep 3:1 against surface, surface-raised and highlight. */
 .cv-p {
   --cv-p-i-surface: var(--cv-p-surface, #ffffff);
@@ -1149,12 +1149,14 @@
   --cv-p-i-border: var(--cv-p-border, #d5d9df);
   --cv-p-i-accent: var(--cv-p-accent, #a85a1c);
   --cv-p-i-accent-contrast: var(--cv-p-accent-contrast, #ffffff);
-  --cv-p-i-highlight: var(--cv-p-highlight, #fbefe2);
+  --cv-p-i-highlight: var(--cv-p-highlight, #fcf3ea);
   --cv-p-i-danger: var(--cv-p-danger, #c62828);
   --cv-p-i-radius: var(--cv-p-radius, 0);
   --cv-p-i-touch: 2.75rem;
   --cv-p-i-scrollbar-thumb: var(--cv-p-scrollbar-thumb, var(--cv-p-i-border));
   --cv-p-i-scrollbar-thumb-hover: var(--cv-p-scrollbar-thumb-hover, var(--cv-p-i-accent));
+  --cv-p-i-tick: var(--cv-p-tick, var(--cv-p-i-text-muted));
+  --cv-p-i-tick-read: var(--cv-p-tick-read, #0369a1);
   --cv-p-i-wallpaper-ink: var(--cv-p-i-border);
   --cv-p-i-wallpaper: radial-gradient(circle at 2px 2px, var(--cv-p-i-wallpaper-ink) 1px, transparent 1.5px), radial-gradient(circle at 14px 14px, var(--cv-p-i-wallpaper-ink) 1px, transparent 1.5px);
   display: flex;
@@ -1177,6 +1179,7 @@
   --cv-p-i-accent-contrast: var(--cv-p-accent-contrast, #10222c);
   --cv-p-i-highlight: var(--cv-p-highlight, rgb(213 138 71 / 10%));
   --cv-p-i-danger: var(--cv-p-danger, #ff6b63);
+  --cv-p-i-tick-read: var(--cv-p-tick-read, #5cc8ff);
 }
 .cv-p *, .cv-p *::before, .cv-p *::after { box-sizing: border-box; }
 .cv-p :focus-visible { outline: 2px solid var(--cv-p-i-accent); outline-offset: 2px; }
@@ -1185,7 +1188,7 @@
   overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
 }
 
-.cv-p-button, .cv-p-chip, .cv-p-row, .cv-p-thread__older, .cv-p-bubble__retry, .cv-p-bubble__action {
+.cv-p-button, .cv-p-chip, .cv-p-row, .cv-p-thread__older, .cv-p-failed-menu__trigger, .cv-p-failed-menu__item {
   font: inherit; color: inherit; cursor: pointer;
 }
 .cv-p-button {
@@ -1211,6 +1214,7 @@
 .cv-p-filters { --cv-p-i-fade: 1rem; display: flex; gap: 0.5rem; padding: 0.625rem 1rem; overflow-x: auto; border-bottom: 1px solid var(--cv-p-i-border); }
 .cv-p-error { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.5rem 1rem; text-align: center; color: var(--cv-p-i-danger, #b91c1c); }
 .cv-p-error__message { margin: 0; }
+.cv-p-thread__scroll > .cv-p-error { background: var(--cv-p-i-surface); }
 .cv-p-loading { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; }
 .cv-p-skeleton { display: block; height: 3rem; border-radius: var(--cv-p-i-radius); background: var(--cv-p-i-surface-raised); }
 .cv-p-inbox__more { display: block; margin: 0.75rem auto; padding: 0 1rem; }
@@ -1258,6 +1262,10 @@
 .cv-p-thread__eyebrow { margin: 0; font: 0.64rem 'SFMono-Regular', Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv-p-i-text-muted); }
 .cv-p-thread__title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
 .cv-p-thread__title-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.cv-p-thread__counterpart { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; line-height: 1.3; color: var(--cv-p-i-text-muted); }
+.cv-p-thread__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; max-width: 100%; }
+.cv-p-thread__header:has(.cv-p-thread__actions) { flex-wrap: wrap; }
+.cv-p-thread__header:has(.cv-p-thread__actions) .cv-p-thread__heading { min-width: 6rem; }
 .cv-p-thread__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.5rem; min-width: 0; padding-top: 0.5rem; }
 .cv-p-thread__title-button { display: flex; align-items: center; max-width: 100%; min-height: var(--cv-p-i-touch); padding: 0; background: none; border: 0; color: inherit; font: inherit; font-weight: 600; text-align: start; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; }
 .cv-p-thread__subject-card { margin: 0.75rem 1rem 0; padding: 0.625rem 0.75rem; border: 1px solid var(--cv-p-i-border); background: var(--cv-p-i-surface-raised); border-radius: var(--cv-p-i-radius); font-size: 0.82rem; }
@@ -1265,7 +1273,7 @@
 .cv-p-thread__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; touch-action: pan-y pinch-zoom; padding: 0.5rem 0.75rem 1rem; background-image: var(--cv-p-wallpaper, var(--cv-p-i-wallpaper)); background-size: var(--cv-p-wallpaper-size, 24px 24px); }
 .cv-p-thread__older { display: block; margin: 0 auto 0.5rem; min-height: var(--cv-p-i-touch); padding: 0 1rem; background: transparent; border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); }
 .cv-p-thread__messages { display: flex; flex-direction: column; gap: 0.5rem; }
-.cv-p-thread__live { padding: 0 1rem; font-size: 0.75rem; color: var(--cv-p-i-accent); }
+.cv-p-thread__live { padding: 0 1rem; font-size: 0.75rem; color: var(--cv-p-i-accent); background: var(--cv-p-i-surface-raised); }
 .cv-p-thread__live:empty { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 .cv-p-thread__closed { margin: 0; padding: 1rem; text-align: center; color: var(--cv-p-i-text-muted); border-top: 1px solid var(--cv-p-i-border); }
 .cv-p-day { align-self: center; margin: 0.5rem 0; padding: 0.25rem 0.75rem; background: var(--cv-p-i-surface-raised); border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); font: 0.65rem 'SFMono-Regular', Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cv-p-i-text-muted); }
@@ -1285,14 +1293,6 @@
 .cv-p-bubble-row > .cv-p-bubble:not(.cv-p-bubble--no-tail) { margin-left: 0.25rem; }
 .cv-p-bubble--no-tail { border-radius: var(--cv-p-i-radius); }
 .cv-p-bubble--no-tail::before, .cv-p-bubble--no-tail::after { content: none; }
-@media (forced-colors: active) {
-  .cv-p-bubble::before, .cv-p-bubble::after { content: none; }
-  .cv-p-bubble, .cv-p-bubble--mine { border-radius: var(--cv-p-i-radius); }
-  .cv-p-thread__scroll { background-image: none; }
-  .cv-p-thread__scroll, .cv-p-inbox, .cv-p-composer__input { scrollbar-width: auto; scrollbar-color: auto; }
-  .cv-p-filters, .cv-p-quick { mask-image: none; -webkit-mask-image: none; }
-  .cv-p-thread__latest-badge { border: 1px solid ButtonText; }
-}
 @media print {
   .cv-p-bubble::before, .cv-p-bubble::after { content: none; }
   .cv-p-bubble, .cv-p-bubble--mine { border-radius: var(--cv-p-i-radius); }
@@ -1300,12 +1300,27 @@
 }
 .cv-p-bubble__author { display: block; flex: 1 0 100%; margin-bottom: 0.15rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; text-transform: uppercase; color: var(--cv-p-i-accent); }
 .cv-p-bubble > .cv-p-text { flex: 0 1 auto; min-width: 0; margin-inline-end: auto; }
-.cv-p-bubble > .cv-p-attachment, .cv-p-bubble > .cv-p-bubble__actions { flex: 1 0 100%; }
+.cv-p-bubble > .cv-p-attachment { flex: 1 0 100%; }
 .cv-p-bubble__meta { display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; gap: 0.35rem; margin-inline-start: auto; margin-top: 0.25rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; color: var(--cv-p-i-text-muted); }
 .cv-p-bubble__status { display: inline-flex; align-items: center; gap: 0.25rem; }
-.cv-p-bubble__retry { min-height: var(--cv-p-i-touch); display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem; background: transparent; border: 1px solid var(--cv-p-i-danger); color: var(--cv-p-i-danger); border-radius: var(--cv-p-i-radius); font-size: 0.7rem; }
-.cv-p-bubble__actions { display: inline-flex; gap: 0.5rem; margin-top: 0.25rem; }
-.cv-p-bubble__action { min-height: var(--cv-p-i-touch); display: inline-flex; align-items: center; padding: 0 0.75rem; background: transparent; border: 1px solid var(--cv-p-i-border); color: inherit; border-radius: var(--cv-p-i-radius); font-size: 0.7rem; }
+.cv-p-bubble .cv-status-ticks--queued, .cv-p-bubble .cv-status-ticks--sent, .cv-p-bubble .cv-status-ticks--delivered { color: var(--cv-p-i-tick); }
+.cv-p-bubble .cv-status-ticks--read { color: var(--cv-p-i-tick-read); }
+.cv-p-bubble .cv-status-ticks--failed { color: var(--cv-p-i-danger); }
+@supports (color: color-mix(in srgb, red, blue)) {
+  .cv-p-bubble--failed { border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border)); --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border)); }
+  .cv-p-bubble--mine.cv-p-bubble--failed { border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent)); --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent)); }
+}
+.cv-p-failed-retry { position: absolute; top: 50%; right: calc(100% + 0.125rem); transform: translateY(-50%); display: grid; place-items: center; width: var(--cv-p-i-touch); height: var(--cv-p-i-touch); padding: 0; background: transparent; border: 0; color: var(--cv-p-i-danger); font: inherit; cursor: pointer; }
+.cv-p-failed-retry__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--cv-p-i-danger); border-radius: 50%; }
+.cv-p-failed-retry:hover .cv-p-failed-retry__icon, .cv-p-failed-retry:focus-visible .cv-p-failed-retry__icon { background: var(--cv-p-i-surface-raised); }
+.cv-p-failed-menu { display: inline-flex; }
+.cv-p-failed-menu__trigger { position: relative; display: inline-grid; place-items: center; min-width: 1.25rem; height: 0.75rem; padding: 0; background: transparent; border: 0; color: var(--cv-p-i-text-muted); font: inherit; line-height: 0.75rem; cursor: pointer; }
+.cv-p-failed-menu__trigger::after { content: ''; position: absolute; inset: -0.5rem -0.4rem; }
+.cv-p-failed-menu__list { position: absolute; right: 0; bottom: calc(100% + 0.25rem); z-index: 2; display: flex; flex-direction: column; min-width: 8rem; background: var(--cv-p-i-surface-raised); border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); }
+.cv-p-failed-menu__item { min-height: var(--cv-p-i-touch); padding: 0 0.75rem; background: transparent; border: 0; color: var(--cv-p-i-text); font: 0.7rem 'SFMono-Regular', Consolas, monospace; text-align: start; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
+.cv-p-failed-menu__list--below { bottom: auto; top: calc(100% + 0.25rem); }
+.cv-p-failed-menu__item--danger { color: var(--cv-p-i-danger); }
+.cv-p-failed-menu__item:hover, .cv-p-failed-menu__item:focus-visible { background: var(--cv-p-i-highlight); }
 .cv-p-attachment { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; color: inherit; }
 .cv-p-attachment--document { flex-direction: row; justify-content: space-between; min-height: var(--cv-p-i-touch); align-items: center; text-decoration: underline; }
 .cv-p-attachment__image { display: block; max-width: 100%; max-height: 16rem; object-fit: contain; }
@@ -1405,7 +1420,18 @@
 .cv-p-text__link-copy::after { inset-inline: 0 auto; min-width: var(--cv-p-i-touch); }
 .cv-p-copyable { padding: 0 0.15rem; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.92em; background: color-mix(in srgb, var(--cv-p-i-accent) 14%, transparent); border-bottom: 1px dotted var(--cv-p-i-accent); border-radius: var(--cv-p-i-radius); }
 .cv-p-copyable--email { font-family: inherit; }
-.cv-p-copyable__done { margin-inline-start: 0.35rem; font-size: 0.85em; color: var(--cv-p-i-accent); }
+.cv-p-copyable__done { margin-inline-start: 0.35rem; font-size: 0.85em; color: var(--cv-p-i-text); }
+@media (forced-colors: active) {
+  .cv-p-bubble::before, .cv-p-bubble::after { content: none; }
+  .cv-p-bubble, .cv-p-bubble--mine { border-radius: var(--cv-p-i-radius); }
+  .cv-p-thread__scroll { background-image: none; }
+  .cv-p-thread__scroll, .cv-p-inbox, .cv-p-composer__input { scrollbar-width: auto; scrollbar-color: auto; }
+  .cv-p-filters, .cv-p-quick { mask-image: none; -webkit-mask-image: none; }
+  .cv-p-thread__latest-badge { border: 1px solid ButtonText; }
+  .cv-p-bubble .cv-status-ticks, .cv-p-copyable__done { color: CanvasText; }
+  .cv-p-failed-menu__list { border-color: CanvasText; }
+  .cv-p-failed-menu__item:focus-visible, .cv-p-failed-menu__item:hover { outline: 2px solid Highlight; }
+}
 @media (forced-colors: active) {
   .cv-p-text__code, .cv-p-text__pre, .cv-p-copyable { border: 1px solid; background: none; }
   .cv-p-text__link, .cv-p-text__link-copy { color: LinkText; }

package/src/tooltipLayerRegistry.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'bun:test'
+
+import { createTooltipLayerRegistry } from './tooltipLayerRegistry'
+
+function track() {
+  const events: boolean[] = []
+  return { events, notify: (isOwner: boolean) => void events.push(isOwner) }
+}
+
+describe('createTooltipLayerRegistry', () => {
+  it('makes the first mounted layer the owner and keeps the others quiet', () => {
+    const registry = createTooltipLayerRegistry()
+    const first = track()
+    const second = track()
+    registry.register({}, first.notify)
+    registry.register({}, second.notify)
+
+    expect(first.events).toEqual([true])
+    expect(second.events).toEqual([])
+  })
+
+  it('hands the ownership to the next mounted layer when the owner unmounts', () => {
+    const registry = createTooltipLayerRegistry()
+    const first = track()
+    const second = track()
+    const third = track()
+    const unmountFirst = registry.register({}, first.notify)
+    registry.register({}, second.notify)
+    registry.register({}, third.notify)
+
+    unmountFirst()
+
+    expect(second.events).toEqual([true])
+    expect(third.events).toEqual([])
+  })
+
+  it('does not disturb the owner when a waiting layer unmounts', () => {
+    const registry = createTooltipLayerRegistry()
+    const first = track()
+    const second = track()
+    registry.register({}, first.notify)
+    registry.register({}, second.notify)()
+
+    expect(first.events).toEqual([true])
+    expect(second.events).toEqual([])
+  })
+
+  it('lets a layer mounted after everyone left become the owner again', () => {
+    const registry = createTooltipLayerRegistry()
+    registry.register({}, () => undefined)()
+    const late = track()
+    registry.register({}, late.notify)
+
+    expect(late.events).toEqual([true])
+  })
+})

package/src/tooltipLayerRegistry.ts

@@ -0,0 +1,34 @@
+export type TooltipLayerRegistry = {
+  /** Mounts a layer; the callback hears when it becomes (true) or stops being (false) the one that draws. */
+  readonly register: (layer: object, onOwnershipChange: (isOwner: boolean) => void) => () => void
+}
+
+/** Layers in mount order: one draws at a time, and when it unmounts the next mounted one takes over. */
+export function createTooltipLayerRegistry(): TooltipLayerRegistry {
+  const layers = new Map<object, (isOwner: boolean) => void>()
+  let owner: object | undefined
+
+  function handOff(): void {
+    const next = layers.entries().next()
+    if (next.done) {
+      owner = undefined
+      return
+    }
+    const [layer, onOwnershipChange] = next.value
+    owner = layer
+    onOwnershipChange(true)
+  }
+
+  return {
+    register(layer, onOwnershipChange) {
+      layers.set(layer, onOwnershipChange)
+      if (owner === undefined) handOff()
+      return () => {
+        layers.delete(layer)
+        if (owner !== layer) return
+        owner = undefined
+        handOff()
+      }
+    },
+  }
+}