@adatechnology/conversations-ui 0.6.0 → 0.7.0

package/src/participant/ParticipantScrollToLatest.test.tsx

@@ -0,0 +1,153 @@
+import { describe, expect, it } from 'bun:test'
+import type { ReactElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import {
+  buildConversation,
+  buildMessage,
+  findForeignClassTokens,
+  findUtilityClassTokens,
+} from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantScrollToLatest } from './ParticipantScrollToLatest'
+import { ParticipantThread, type ParticipantThreadProps } from './ParticipantThread'
+
+const LABEL = DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS.scrollToLatest
+
+function renderButton(overrides: Partial<Parameters<typeof ParticipantScrollToLatest>[0]> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantScrollToLatest
+      label={LABEL}
+      isAwayFromBottom
+      hasMessages
+      newMessagesCount={0}
+      onClick={() => undefined}
+      {...overrides}
+    />,
+  )
+}
+
+function renderThread(overrides: Partial<ParticipantThreadProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantThread
+      conversation={buildConversation({ subjectId: '1' })}
+      items={[{ kind: 'server', message: buildMessage({ id: 'a', createdAt: '2026-10-01T10:00:00.000Z' }) }]}
+      hasMore={false}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      resolveAttachmentUrl={async () => 'https://files.example/a'}
+      draft={{ value: '', onChange: () => undefined, files: [], onFilesChange: () => undefined }}
+      onSend={() => undefined}
+      status="ready"
+      refresh={() => undefined}
+      scroll={{
+        ref: { current: null },
+        onScroll: () => undefined,
+        isAwayFromBottom: true,
+        scrollToLatest: () => undefined,
+      }}
+      newMessagesCount={0}
+      isSending={false}
+      {...overrides}
+    />,
+  )
+}
+
+describe('ParticipantScrollToLatest', () => {
+  it('has a generic English default label', () => {
+    expect(LABEL).toBe('Scroll to latest message')
+  })
+
+  it('draws nothing near the end of the conversation', () => {
+    expect(renderButton({ isAwayFromBottom: false })).toBe('')
+  })
+
+  it('draws nothing without messages', () => {
+    expect(renderButton({ hasMessages: false })).toBe('')
+  })
+
+  it('is a named button that does not submit anything', () => {
+    const markup = renderButton()
+    expect(markup).toContain(`aria-label="${LABEL}"`)
+    expect(markup).toContain('type="button"')
+    expect(markup).toContain('class="cv-p-thread__latest-button"')
+  })
+
+  it('keeps the icon decorative', () => {
+    expect(renderButton()).toContain('aria-hidden="true"')
+  })
+
+  it('shows the count of new incoming messages in a badge hidden from the accessibility tree', () => {
+    expect(renderButton({ newMessagesCount: 3 })).toContain(
+      '<span class="cv-p-thread__latest-badge" aria-hidden="true">3</span>',
+    )
+  })
+
+  it('has no badge with zero new messages', () => {
+    expect(renderButton({ newMessagesCount: 0 })).not.toContain('cv-p-thread__latest-badge')
+  })
+
+  it('has the aria-label exactly as the label, without the count', () => {
+    expect(renderButton({ newMessagesCount: 3 })).toContain(`aria-label="${LABEL}"`)
+  })
+})
+
+describe('ParticipantScrollToLatest focus', () => {
+  it('moves focus to the scroller before scrolling, since the button unmounts on click', () => {
+    const order: string[] = []
+    const root = ParticipantScrollToLatest({
+      label: LABEL,
+      isAwayFromBottom: true,
+      hasMessages: true,
+      newMessagesCount: 0,
+      onClick: () => void order.push('scroll'),
+    }) as ReactElement<{ children: ReactElement<{ onClick: (event: unknown) => void }> }>
+    const button = root.props.children
+    button.props.onClick({
+      currentTarget: { closest: () => ({ focus: () => void order.push('focus') }) },
+    })
+    expect(order).toEqual(['focus', 'scroll'])
+  })
+
+  it('makes the scroller focusable by script only', () => {
+    expect(renderThread()).toMatch(/<div class="cv-p-thread__scroll" tabindex="-1">/)
+  })
+})
+
+describe('ParticipantThread with the scroll-to-latest button', () => {
+  it('draws the button inside the scroller, after the messages', () => {
+    const markup = renderThread()
+    const scroller = markup.indexOf('cv-p-thread__scroll')
+    expect(markup.indexOf('cv-p-thread__latest-button')).toBeGreaterThan(markup.indexOf('cv-p-thread__messages'))
+    expect(markup.indexOf('cv-p-thread__latest-button')).toBeGreaterThan(scroller)
+    expect(markup.indexOf('cv-p-thread__latest-button')).toBeLessThan(markup.indexOf('cv-p-thread__live'))
+  })
+
+  it('does not draw it while the reader is at the end', () => {
+    const scroll = { ref: { current: null }, onScroll: () => undefined, isAwayFromBottom: false }
+    expect(renderThread({ scroll })).not.toContain('cv-p-thread__latest')
+  })
+
+  it('does not draw it for a host that gives no away state', () => {
+    expect(renderThread({ scroll: { ref: { current: null }, onScroll: () => undefined } })).not.toContain(
+      'cv-p-thread__latest',
+    )
+  })
+
+  it('announces only the new-messages label, never the count or the button label', () => {
+    const markup = renderThread({ newMessagesCount: 2 })
+    expect(markup).toContain('role="status" aria-live="polite">New messages</div>')
+    expect(markup.split('New messages').length - 1).toBe(1)
+    expect(markup.match(/aria-live/g)).toHaveLength(1)
+  })
+
+  it('lets the host translate the label', () => {
+    const labels = { ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, scrollToLatest: 'Ir para a última mensagem' }
+    expect(renderThread({ labels })).toContain('aria-label="Ir para a última mensagem"')
+  })
+
+  it('stays inside the participant namespace with no utility classes', () => {
+    const markup = renderThread({ newMessagesCount: 2 })
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+})

package/src/participant/ParticipantScrollToLatest.tsx

@@ -0,0 +1,40 @@
+import { ChevronDown } from 'lucide-react'
+
+import { focusScrollerOf } from './participantScrollFocus'
+import { resolveScrollToLatestView } from './participantScrollView'
+
+export type ParticipantScrollToLatestProps = {
+  readonly label: string
+  readonly isAwayFromBottom: boolean
+  readonly hasMessages: boolean
+  readonly newMessagesCount: number
+  /** Absent (a host that does not own the scroller) draws nothing. */
+  readonly onClick: (() => void) | undefined
+}
+
+export function ParticipantScrollToLatest({
+  label,
+  isAwayFromBottom,
+  hasMessages,
+  newMessagesCount,
+  onClick,
+}: ParticipantScrollToLatestProps) {
+  const { isVisible, badge } = resolveScrollToLatestView({ isAwayFromBottom, newMessagesCount, hasMessages })
+  if (!isVisible || onClick === undefined) return null
+  return (
+    <div className="cv-p-thread__latest">
+      <button type="button" className="cv-p-thread__latest-button" aria-label={label} onClick={(event) => {
+          focusScrollerOf(event.currentTarget)
+          onClick()
+        }}
+      >
+        <ChevronDown size={24} aria-hidden="true" focusable="false" />
+        {badge ? (
+          <span className="cv-p-thread__latest-badge" aria-hidden="true">
+            {badge}
+          </span>
+        ) : null}
+      </button>
+    </div>
+  )
+}

package/src/participant/ParticipantThread.test.tsx

@@ -146,4 +146,41 @@ describe('ParticipantThread', () => {
     expect(findUtilityClassTokens(markup)).toEqual([])
     expect(findForeignClassTokens(markup)).toEqual([])
   })
+
+  it('draws no avatar by default', () => {
+    expect(render()).not.toContain('cv-p-avatar')
+    expect(render()).not.toContain('cv-p-bubble-row')
+  })
+
+  it('draws initials on the first received message of each sequence, never on own messages', () => {
+    const markup = render({
+      avatars: 'initials',
+      items: [
+        { kind: 'server', message: buildMessage({ id: 'a', authorName: 'Ana Souza' }) },
+        { kind: 'server', message: buildMessage({ id: 'b', authorName: 'Ana Souza' }) },
+        { kind: 'server', message: buildMessage({ id: 'c', direction: 'inbound' }) },
+        { kind: 'server', message: buildMessage({ id: 'd', authorName: 'Ana Souza' }) },
+        { kind: 'server', message: buildMessage({ id: 'e', authorName: 'Bruno Lima' }) },
+      ],
+    })
+    expect(markup.match(/class="cv-p-bubble-row"/g)?.length).toBe(4)
+    expect(markup.match(/class="cv-p-avatar" aria-hidden="true">AS</g)?.length).toBe(2)
+    expect(markup.match(/class="cv-p-avatar" aria-hidden="true">BL</g)?.length).toBe(1)
+  })
+
+  it('uses the neutral icon when the author has no usable name', () => {
+    const markup = render({ avatars: 'initials' })
+    expect(markup).toContain('class="cv-p-avatar" aria-hidden="true"><svg')
+  })
+
+  it('gives the host slot precedence over initials, even without the avatars prop', () => {
+    const markup = render({
+      avatars: 'initials',
+      renderAuthorAvatar: ({ name }) => <img alt="" src={`https://photos.example/${name ?? 'none'}.png`} />,
+      items: [{ kind: 'server', message: buildMessage({ id: 'a', authorName: 'Ana Souza' }) }],
+    })
+    expect(markup).toContain('src="https://photos.example/Ana Souza.png"')
+    expect(markup).not.toContain('>AS<')
+    expect(render({ renderAuthorAvatar: () => <i>x</i> })).toContain('<i>x</i>')
+  })
 })

package/src/participant/ParticipantThread.tsx

@@ -2,25 +2,22 @@ import type { ReactNode } from 'react'
 
 import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
 
-import { channelCapabilityFor } from '../channelCapability'
 import type { ConversationChannel } from '../conversationChannel'
-import { isSameDay } from '../lib/format'
 import type { QuickReply } from '../quickReplies/quickReply.types'
+import type { ParticipantTimelineItem } from './participantMessages'
 import { ParticipantComposer } from './ParticipantComposer'
+import { ParticipantCopyAnnouncer, ParticipantThreadLive } from './ParticipantCopyAnnouncer'
 import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
-import {
-  bindPendingActions,
-  resolveParticipantBubbleActions,
-  type ParticipantPendingActions,
-} from './participantBubbleActions'
+import type { ParticipantPendingActions } from './participantBubbleActions'
 import type { ParticipantConversationsLabels } from './participantLabels'
 import { resolveLoadView, type ParticipantLoadStatus } from './participantLoadView'
 import { ParticipantLoadError, ParticipantLoading } from './ParticipantLoadState'
 import type { ParticipantThreadScroll } from './useStickToBottom'
-import type { ParticipantTimelineItem } from './participantMessages'
-import { ParticipantMessageBubble } from './ParticipantMessageBubble'
-import { ParticipantChannelBadges } from './ParticipantChannelBadges'
-import { ParticipantProtocolBadge } from './ParticipantProtocolBadge'
+import type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
+import { ParticipantScrollToLatest } from './ParticipantScrollToLatest'
+import { ParticipantTimeline } from './ParticipantTimeline'
+import { ParticipantThreadHeader } from './ParticipantThreadHeader'
+import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
 
 export type ParticipantThreadDraft = {
   readonly value: string
@@ -55,83 +52,16 @@ export type ParticipantThreadProps = {
   readonly acceptedTypes?: readonly string[]
   readonly maxLength?: number
   readonly renderSubjectCard?: (conversation: ParticipantConversationSummary) => ReactNode
-}
-
-function createdAtOf(item: ParticipantTimelineItem): string {
-  return item.kind === 'server' ? item.message.createdAt : item.pending.createdAt
-}
-
-function keyOf(item: ParticipantTimelineItem): string {
-  return item.kind === 'server' ? item.message.id : `pending:${item.pending.clientMessageId}`
-}
-
-function resolveActions(item: ParticipantTimelineItem, pendingActions?: ParticipantPendingActions) {
-  if (!pendingActions || item.kind === 'server') return {}
-  return resolveParticipantBubbleActions(item, bindPendingActions(pendingActions, item.pending.clientMessageId))
-}
-
-function Header({ props }: { readonly props: ParticipantThreadProps }) {
-  const { conversation, labels, onBack, onOpenSubject } = props
-  const { subjectType, subjectId } = conversation
-
-  return (
-    <header className="cv-p-thread__header">
-      {onBack ? (
-        <button type="button" className="cv-p-button cv-p-thread__back" onClick={onBack}>
-          <span aria-hidden="true">‹</span>
-          <span className="cv-p-sr-only">{labels.back}</span>
-        </button>
-      ) : null}
-      <div className="cv-p-thread__heading">
-        <h2 className="cv-p-thread__title">
-          {onOpenSubject ? (
-            <button
-              type="button"
-              className="cv-p-thread__title-button"
-              aria-label={`${labels.openSubject}: ${conversation.subjectLabel}`}
-              onClick={() => onOpenSubject({ subjectType, subjectId })}
-            >
-              {conversation.subjectLabel}
-            </button>
-          ) : (
-            conversation.subjectLabel
-          )}
-        </h2>
-        {conversation.protocol ? <ParticipantProtocolBadge protocol={conversation.protocol} labels={labels} /> : null}
-        <ParticipantChannelBadges channels={conversation.channels} labels={labels} />
-      </div>
-    </header>
-  )
-}
-
-function Timeline({ props }: { readonly props: ParticipantThreadProps }) {
-  const { items, labels, locale, resolveAttachmentUrl, pendingActions } = props
-  const confirmsRead = channelCapabilityFor(props.channel ?? 'app').confirmsRead
-  const nodes: ReactNode[] = []
-  let previousDay: Date | undefined
-
-  for (const item of items) {
-    const day = new Date(createdAtOf(item))
-    if (previousDay === undefined || !isSameDay(previousDay, day)) {
-      nodes.push(
-        <div key={`day:${keyOf(item)}`} className="cv-p-day" role="separator">
-          {day.toLocaleDateString(locale, { weekday: 'short', day: '2-digit', month: '2-digit' })}
-        </div>,
-      )
-    }
-    previousDay = day
-    nodes.push(
-      <ParticipantMessageBubble
-        key={keyOf(item)}
-        item={item}
-        labels={labels}
-        confirmsRead={confirmsRead}
-        resolveAttachmentUrl={resolveAttachmentUrl}
-        {...resolveActions(item, pendingActions)}
-      />,
-    )
-  }
-  return <div className="cv-p-thread__messages">{nodes}</div>
+  /** Source of the eyebrow above the title: the label of the group of the conversation's subject type. */
+  readonly subjectGroups?: readonly ParticipantSubjectGroup[]
+  /** Absent draws no avatar. The SDK has no photo: the host supplies it through renderAuthorAvatar. */
+  readonly avatars?: 'initials'
+  /** Host slot for the author's photo; wins over 'initials' and enables avatars on its own. */
+  readonly renderAuthorAvatar?: ParticipantAuthorAvatarRenderer
+  /** Host icon of the conversation avatar in the header; absent or empty falls back to the subject group icon. */
+  readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
+  /** Speech-bubble tail on the bottom corner; false removes it. Default true. */
+  readonly tail?: boolean
 }
 
 function Footer({ props }: { readonly props: ParticipantThreadProps }) {
@@ -156,16 +86,23 @@ function Footer({ props }: { readonly props: ParticipantThreadProps }) {
   )
 }
 
-export function ParticipantThread(props: ParticipantThreadProps) {
+function ThreadBody(props: ParticipantThreadProps) {
   const { conversation, labels, hasMore, onLoadOlder, renderSubjectCard } = props
   const subjectCard = renderSubjectCard?.(conversation)
   const loadView = resolveLoadView({ status: props.status, hasItems: props.items.length > 0 })
 
   return (
     <div className="cv-p cv-p-thread" aria-busy={loadView.isLoading}>
-      <Header props={props} />
+      <ParticipantThreadHeader
+        conversation={conversation}
+        labels={labels}
+        subjectGroups={props.subjectGroups}
+        renderSubjectIcon={props.renderSubjectIcon}
+        onBack={props.onBack}
+        onOpenSubject={props.onOpenSubject}
+      />
       {subjectCard ? <div className="cv-p-thread__subject-card">{subjectCard}</div> : null}
-      <div className="cv-p-thread__scroll" ref={props.scroll.ref} onScroll={props.scroll.onScroll}>
+      <div className="cv-p-thread__scroll" ref={props.scroll.ref} onScroll={props.scroll.onScroll} tabIndex={-1}>
         {loadView.isLoading ? <ParticipantLoading labels={labels} /> : null}
         {loadView.hasError ? <ParticipantLoadError labels={labels} onRetry={props.refresh} /> : null}
         {hasMore && onLoadOlder ? (
@@ -173,12 +110,25 @@ export function ParticipantThread(props: ParticipantThreadProps) {
             {labels.loadOlder}
           </button>
         ) : null}
-        <Timeline props={props} />
-      </div>
-      <div className="cv-p-thread__live" role="status" aria-live="polite">
-        {props.newMessagesCount > 0 ? labels.newMessages : ''}
+        <ParticipantTimeline {...props} />
+        <ParticipantScrollToLatest
+          label={labels.scrollToLatest}
+          isAwayFromBottom={props.scroll.isAwayFromBottom === true}
+          hasMessages={props.items.length > 0}
+          newMessagesCount={props.newMessagesCount}
+          onClick={props.scroll.scrollToLatest}
+        />
       </div>
+      <ParticipantThreadLive notice={props.newMessagesCount > 0 ? labels.newMessages : ''} />
       <Footer props={props} />
     </div>
   )
 }
+
+export function ParticipantThread(props: ParticipantThreadProps) {
+  return (
+    <ParticipantCopyAnnouncer>
+      <ThreadBody {...props} />
+    </ParticipantCopyAnnouncer>
+  )
+}

package/src/participant/ParticipantThreadAvatarSequence.test.tsx

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { buildConversation, buildMessage } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import type { ParticipantTimelineItem } from './participantMessages'
+import { ParticipantThread } from './ParticipantThread'
+
+function ana(id: string, createdAt: string): ParticipantTimelineItem {
+  return { kind: 'server', message: buildMessage({ id, authorName: 'Ana Souza', createdAt }) }
+}
+
+function mine(id: string, createdAt: string): ParticipantTimelineItem {
+  return { kind: 'server', message: buildMessage({ id, direction: 'inbound', authorName: 'Ana Souza', createdAt }) }
+}
+
+function render(items: readonly ParticipantTimelineItem[]): string {
+  return renderToStaticMarkup(
+    <ParticipantThread
+      conversation={buildConversation({ subjectId: '1' })}
+      items={items}
+      hasMore={false}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      resolveAttachmentUrl={async () => 'https://files.example/a'}
+      draft={{ value: '', onChange: () => undefined, files: [], onFilesChange: () => undefined }}
+      onSend={() => undefined}
+      status="ready"
+      refresh={() => undefined}
+      scroll={{ ref: { current: null }, onScroll: () => undefined }}
+      newMessagesCount={0}
+      isSending={false}
+      avatars="initials"
+    />,
+  )
+}
+
+function countAvatars(markup: string): number {
+  return markup.match(/class="cv-p-avatar" aria-hidden="true">AS</g)?.length ?? 0
+}
+
+describe('avatar sequence in the thread', () => {
+  it('shows one avatar for consecutive messages of the same author', () => {
+    const markup = render([ana('a', '2026-10-01T10:00:00.000Z'), ana('b', '2026-10-01T10:01:00.000Z')])
+    expect(countAvatars(markup)).toBe(1)
+  })
+
+  it('shows the avatar again after an own message of the same author in between', () => {
+    const markup = render([
+      ana('a', '2026-10-01T10:00:00.000Z'),
+      mine('b', '2026-10-01T10:01:00.000Z'),
+      ana('c', '2026-10-01T10:02:00.000Z'),
+    ])
+    expect(countAvatars(markup)).toBe(2)
+  })
+
+  it('shows the avatar again after the day separator', () => {
+    const markup = render([ana('a', '2026-10-01T10:00:00.000Z'), ana('b', '2026-10-03T10:00:00.000Z')])
+    expect(markup).toMatch(/role="separator" aria-label="[^"]+"/)
+    expect(countAvatars(markup)).toBe(2)
+  })
+
+  it('never draws the avatar on own messages', () => {
+    expect(render([mine('a', '2026-10-01T10:00:00.000Z')])).not.toContain('cv-p-avatar')
+  })
+})

package/src/participant/ParticipantThreadHeader.test.tsx

@@ -0,0 +1,181 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { splitBlocks } from '../cssBlocks.test-helper'
+import { buildConversation } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantProtocolBadgeView } from './ParticipantProtocolBadge'
+import { ParticipantThreadHeader, type ParticipantThreadHeaderProps } from './ParticipantThreadHeader'
+
+const LABELS = DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS
+const GROUPS = [{ subjectType: 'invoice', label: 'Invoices' }]
+
+function render(overrides: Partial<ParticipantThreadHeaderProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantThreadHeader
+      conversation={buildConversation({ subjectId: '1', subjectLabel: 'Item 4521' })}
+      labels={LABELS}
+      {...overrides}
+    />,
+  )
+}
+
+function metaOf(markup: string): string {
+  const start = markup.indexOf('class="cv-p-thread__meta"')
+  const end = markup.indexOf('</header>', start)
+  return start === -1 ? '' : markup.slice(start, end)
+}
+
+describe('thread header structure', () => {
+  const conversation = buildConversation({
+    subjectId: '1',
+    subjectLabel: 'Item 4521',
+    protocol: '261009-K7M2',
+    channels: ['app', 'whatsapp'],
+  })
+
+  it('draws the eyebrow only when the subject type has a group', () => {
+    expect(render({ subjectGroups: GROUPS })).toContain('<p class="cv-p-thread__eyebrow">Invoices</p>')
+    expect(render()).not.toContain('cv-p-thread__eyebrow')
+    expect(render({ subjectGroups: [{ subjectType: 'other', label: 'Other' }] })).not.toContain('cv-p-thread__eyebrow')
+  })
+
+  it('draws the title, clickable only with onOpenSubject', () => {
+    expect(render()).toContain('Item 4521')
+    expect(render()).not.toContain('cv-p-thread__title-button')
+    expect(render({ onOpenSubject: () => undefined })).toContain('cv-p-thread__title-button')
+  })
+
+  it('keeps protocol, copy button and channel badges in one single meta line', () => {
+    const markup = render({ conversation })
+    expect(markup.match(/cv-p-thread__meta"/g)?.length).toBe(1)
+    const meta = metaOf(markup)
+    expect(meta).toContain('261009-K7M2')
+    expect(meta).toContain('cv-p-protocol__copy')
+    expect(meta).toContain('cv-p-channel--app')
+    expect(meta).toContain('cv-p-channel--whatsapp')
+    expect(markup.match(/cv-p-channels/g)?.length).toBe(1)
+    expect(markup.indexOf('cv-p-channels')).toBeGreaterThan(markup.indexOf('cv-p-thread__meta'))
+  })
+
+  it('does not draw a separate channels row', () => {
+    const markup = render({ conversation })
+    expect(markup).not.toContain('<ul')
+    expect(markup).toContain('<span class="cv-p-channels">')
+  })
+
+  it('draws the meta line with channels only when there is no protocol', () => {
+    const markup = render({ conversation: buildConversation({ subjectId: '1', channels: ['app'] }) })
+    expect(metaOf(markup)).toContain('cv-p-channel--app')
+    expect(markup).not.toContain('cv-p-protocol')
+  })
+
+  it('draws no meta line without protocol and without channels', () => {
+    const markup = render()
+    expect(markup).not.toContain('cv-p-thread__meta')
+    expect(markup).not.toContain('cv-p-protocol')
+    expect(markup).not.toContain('cv-p-channels')
+  })
+
+  it('draws the back button only with onBack', () => {
+    expect(render()).not.toContain('cv-p-thread__back')
+    expect(render({ onBack: () => undefined })).toContain('cv-p-thread__back')
+  })
+})
+
+describe('copy button as an icon', () => {
+  const view = (isCopied: boolean) =>
+    renderToStaticMarkup(
+      <ParticipantProtocolBadgeView
+        protocol="261009-K7M2"
+        labels={LABELS}
+        copyState={{ copyCount: isCopied ? 1 : 0, isCopied }}
+        onCopy={() => undefined}
+      />,
+    )
+
+  it('has the full accessible name and no visible text', () => {
+    const markup = view(false)
+    expect(markup).toContain('aria-label="Copy protocol 261009-K7M2"')
+    const button = markup.slice(markup.indexOf('<button'), markup.indexOf('</button>'))
+    expect(button).toContain('<svg')
+    expect(button.replace(/<[^>]+>/g, '')).toBe('')
+    expect(markup.replace(/aria-label="[^"]*"/g, '')).not.toContain('Copy protocol')
+  })
+
+  it('shows the short confirmation next to the icon while copied', () => {
+    const markup = view(true)
+    const button = markup.slice(markup.indexOf('<button'), markup.indexOf('</button>'))
+    expect(button).toContain(`<span class="cv-p-protocol__copied" aria-hidden="true">${LABELS.protocolCopied}</span>`)
+    expect(markup).toMatch(/aria-live="polite"><span>Protocol copied<\/span><\/div>/)
+  })
+
+  it('keeps the live region outside the protocol block', () => {
+    const markup = view(true)
+    const block = markup.slice(markup.indexOf('cv-p-protocol--header'), markup.indexOf('</button>'))
+    expect(block).not.toContain('aria-live')
+  })
+})
+
+const CSS = readFileSync(join(import.meta.dir, '..', 'styles.css'), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '')
+
+function declarationsOf(selector: string): Map<string, string> {
+  const declarations = new Map<string, string>()
+  for (const { prelude, body } of splitBlocks(CSS)) {
+    if (body === undefined || prelude.startsWith('@')) continue
+    if (!prelude.split(',').some((entry) => entry.trim() === selector)) continue
+    for (const declaration of body.split(';')) {
+      const separator = declaration.indexOf(':')
+      if (separator === -1) continue
+      declarations.set(declaration.slice(0, separator).trim().toLowerCase(), declaration.slice(separator + 1).trim())
+    }
+  }
+  return declarations
+}
+
+function toRem(value: string | undefined): number {
+  const match = /^(\d*\.?\d+)rem$/.exec(value ?? '')
+  return match ? Number(match[1]) : 0
+}
+
+describe('thread header CSS', () => {
+  it('lays the meta line out as a wrapping flex row', () => {
+    const meta = declarationsOf('.cv-p-thread__meta')
+    expect(meta.get('display')).toBe('flex')
+    expect(meta.get('flex-wrap')).toBe('wrap')
+  })
+
+  it('gives the copy button a wide touch area without inflating the line', () => {
+    const copy = declarationsOf('.cv-p-protocol__copy')
+    expect(toRem(copy.get('min-width'))).toBeGreaterThanOrEqual(2.75)
+    expect(toRem(copy.get('min-height'))).toBeGreaterThanOrEqual(2)
+    expect(copy.get('margin')).toMatch(/^-/)
+  })
+
+  it('sets a floor of 4rem on the header but never a fixed or maximum height', () => {
+    const header = declarationsOf('.cv-p-thread__header')
+    for (const property of ['height', 'max-height']) expect(header.has(property)).toBe(false)
+    expect(toRem(header.get('min-height'))).toBeGreaterThanOrEqual(4)
+  })
+
+  it('clamps the title to one line', () => {
+    expect(declarationsOf('.cv-p-thread__title-text').get('-webkit-line-clamp')).toBe('1')
+  })
+
+  it('draws the eyebrow like the list row kind label', () => {
+    const eyebrow = declarationsOf('.cv-p-thread__eyebrow')
+    expect(eyebrow.get('text-transform')).toBe('uppercase')
+    expect(eyebrow.get('font')).toContain('monospace')
+  })
+})
+
+describe('avatar CSS', () => {
+  it('draws a 2rem box that follows the host radius token', () => {
+    const avatar = declarationsOf('.cv-p-avatar')
+    expect(avatar.get('width')).toBe('2rem')
+    expect(avatar.get('height')).toBe('2rem')
+    expect(avatar.get('border-radius')).toBe('var(--cv-p-i-radius)')
+  })
+})