@adatechnology/conversations-ui 0.5.0 → 0.6.0

package/src/participant/ParticipantInbox.tsx

@@ -1,14 +1,16 @@
 import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
 
-import { formatTimestamp, isSameDay } from '../lib/format'
 import type {
   ParticipantInboxFilter,
   ParticipantInboxSection,
   ParticipantInboxView,
   ParticipantSubjectGroup,
+  ParticipantSubjectIconRenderer,
 } from './participant.types'
-import { formatParticipantLabel, type ParticipantConversationsLabels } from './participantLabels'
+import { type ParticipantConversationsLabels } from './participantLabels'
 import { resolveLoadView, type ParticipantLoadStatus } from './participantLoadView'
+import { ParticipantInboxRow } from './ParticipantInboxRow'
+import { ParticipantInboxSearchField, type ParticipantInboxSearch } from './ParticipantInboxSearchField'
 import { ParticipantLoadError, ParticipantLoading } from './ParticipantLoadState'
 
 export type ParticipantInboxProps = {
@@ -24,14 +26,17 @@ export type ParticipantInboxProps = {
   readonly hasMore: boolean
   readonly loadMore: () => void
   readonly locale?: string
+  /** Absent = no search field. The host narrows the view with the query; the field only edits it. */
+  readonly search?: ParticipantInboxSearch
+  /** Absent, or returning null/undefined, = the subject group icon. */
+  readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
 }
 
 const ALL_FILTER = 'all'
 
-function formatRowTime(iso: string, locale: string | undefined): string {
-  const date = new Date(iso)
-  if (isSameDay(date, new Date())) return formatTimestamp(iso)
-  return date.toLocaleDateString(locale, { day: '2-digit', month: '2-digit' })
+function resolveNoResultsLabel({ view, hasMore, labels }: ParticipantInboxProps): string {
+  if (view.hasMatchesOutsideFilter) return labels.noResultsInFilter
+  return hasMore ? labels.noResultsLoadedOnly : labels.noResults
 }
 
 function sectionTitle(section: ParticipantInboxSection, props: ParticipantInboxProps): string {
@@ -67,42 +72,6 @@ function Filters({ filters, active, labels, onChange }: FiltersProps) {
   )
 }
 
-type RowProps = {
-  readonly conversation: ParticipantConversationSummary
-  readonly group: ParticipantSubjectGroup | undefined
-  readonly labels: ParticipantConversationsLabels
-  readonly locale?: string
-  readonly onSelect: (subject: ParticipantSubjectRef) => void
-}
-
-function Row({ conversation, group, labels, locale, onSelect }: RowProps) {
-  const kind = group?.label ?? conversation.subjectType
-  const className = conversation.awaitingParticipant ? 'cv-p-row cv-p-row--awaiting' : 'cv-p-row'
-  const { subjectType, subjectId } = conversation
-
-  return (
-    <button type="button" className={className} onClick={() => onSelect({ subjectType, subjectId })}>
-      <span className="cv-p-row__icon" aria-hidden="true">
-        {group?.icon ?? kind.slice(0, 2)}
-      </span>
-      <span className="cv-p-row__body">
-        <span className="cv-p-row__kind">{kind}</span>
-        <span className="cv-p-row__title">{conversation.subjectLabel}</span>
-        {conversation.lastMessagePreview ? <span className="cv-p-row__preview">{conversation.lastMessagePreview}</span> : null}
-      </span>
-      <span className="cv-p-row__meta">
-        {conversation.lastMessageAt ? <span>{formatRowTime(conversation.lastMessageAt, locale)}</span> : null}
-        {conversation.unreadCount > 0 ? (
-          <span className="cv-p-row__unread">
-            <span aria-hidden="true">{conversation.unreadCount}</span>
-            <span className="cv-p-sr-only">{formatParticipantLabel(labels.unreadCount, conversation.unreadCount)}</span>
-          </span>
-        ) : null}
-      </span>
-    </button>
-  )
-}
-
 function SectionHeading({ title, count }: { readonly title: string; readonly count: number }) {
   return (
     <>
@@ -112,15 +81,22 @@ function SectionHeading({ title, count }: { readonly title: string; readonly cou
   )
 }
 
-function Section({ section, props }: { readonly section: ParticipantInboxSection; readonly props: ParticipantInboxProps }) {
+function Section({
+  section,
+  props,
+}: {
+  readonly section: ParticipantInboxSection
+  readonly props: ParticipantInboxProps
+}) {
   const rows = section.conversations.map((conversation) => (
-    <Row
+    <ParticipantInboxRow
       key={`${conversation.subjectType}:${conversation.subjectId}`}
       conversation={conversation}
       group={props.subjectGroups.find((group) => group.subjectType === conversation.subjectType)}
       labels={props.labels}
       locale={props.locale}
       onSelect={props.onSelect}
+      renderSubjectIcon={props.renderSubjectIcon}
     />
   ))
   const heading = <SectionHeading title={sectionTitle(section, props)} count={section.conversations.length} />
@@ -144,17 +120,22 @@ function Section({ section, props }: { readonly section: ParticipantInboxSection
 
 export function ParticipantInbox(props: ParticipantInboxProps) {
   const { view, labels, filter, onFilterChange } = props
-  const loadView = resolveLoadView({ status: props.status, hasItems: view.sections.length > 0 })
+  const isSearching = (props.search?.value.trim() ?? '') !== ''
+  const loadView = resolveLoadView({ status: props.status, hasItems: view.sections.length > 0 || isSearching })
+  const hasNoResults = isSearching && view.sections.length === 0 && props.status === 'ready'
+  const noResultsLabel = resolveNoResultsLabel(props)
 
   return (
     <div className="cv-p cv-p-inbox" aria-busy={loadView.isLoading}>
       <h2 className="cv-p-inbox__title">{labels.inboxTitle}</h2>
       {view.showFilters ? (
-        <Filters filters={view.filters} active={filter} labels={labels} onChange={onFilterChange} />
+        <Filters filters={view.filters} active={view.activeFilter} labels={labels} onChange={onFilterChange} />
       ) : null}
+      {props.search?.isVisible ? <ParticipantInboxSearchField search={props.search} labels={labels} /> : null}
       {loadView.isLoading ? <ParticipantLoading labels={labels} /> : null}
       {loadView.hasError ? <ParticipantLoadError labels={labels} onRetry={props.refresh} /> : null}
       {loadView.isEmpty ? <p className="cv-p-empty">{labels.emptyInbox}</p> : null}
+      {hasNoResults ? <p className="cv-p-empty">{noResultsLabel}</p> : null}
       {view.sections.map((section) => (
         <Section key={section.key} section={section} props={props} />
       ))}

package/src/participant/ParticipantInboxRow.tsx

@@ -0,0 +1,75 @@
+import type { ParticipantConversationSummary, ParticipantSubjectRef } from '@adatechnology/conversation-contracts'
+
+import { formatTimestamp, isSameDay } from '../lib/format'
+import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
+import { formatParticipantLabel, type ParticipantConversationsLabels } from './participantLabels'
+import { ParticipantChannelBadges } from './ParticipantChannelBadges'
+
+export type ParticipantInboxRowProps = {
+  readonly conversation: ParticipantConversationSummary
+  readonly group: ParticipantSubjectGroup | undefined
+  readonly labels: ParticipantConversationsLabels
+  readonly locale?: string
+  readonly onSelect: (subject: ParticipantSubjectRef) => void
+  readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
+}
+
+function formatRowTime(iso: string, locale: string | undefined): string {
+  const date = new Date(iso)
+  if (isSameDay(date, new Date())) return formatTimestamp(iso)
+  return date.toLocaleDateString(locale, { day: '2-digit', month: '2-digit' })
+}
+
+function RowIcon({ props, kind }: { readonly props: ParticipantInboxRowProps; readonly kind: string }) {
+  const custom = props.renderSubjectIcon?.(props.conversation)
+  if (custom !== null && custom !== undefined && custom !== false && custom !== '') {
+    return (
+      <span className="cv-p-row__icon cv-p-inbox__icon" aria-hidden="true">
+        {custom}
+      </span>
+    )
+  }
+  return (
+    <span className="cv-p-row__icon" aria-hidden="true">
+      {props.group?.icon ?? kind.slice(0, 2)}
+    </span>
+  )
+}
+
+export function ParticipantInboxRow(props: ParticipantInboxRowProps) {
+  const { conversation, group, labels, locale, onSelect } = props
+  const kind = group?.label ?? conversation.subjectType
+  const className = conversation.awaitingParticipant ? 'cv-p-row cv-p-row--awaiting' : 'cv-p-row'
+  const { subjectType, subjectId } = conversation
+
+  return (
+    <button type="button" className={className} onClick={() => onSelect({ subjectType, subjectId })}>
+      <RowIcon props={props} kind={kind} />
+      <span className="cv-p-row__body">
+        <span className="cv-p-row__kind">{kind}</span>
+        <span className="cv-p-row__title">{conversation.subjectLabel}</span>
+        <span className="cv-p-row__tags">
+          {conversation.protocol ? (
+            <span className="cv-p-protocol">
+              <span className="cv-p-sr-only">{labels.protocolPrefix} </span>
+              {conversation.protocol}
+            </span>
+          ) : null}
+          <ParticipantChannelBadges channels={conversation.channels} labels={labels} variant="inline" />
+        </span>
+        {conversation.lastMessagePreview ? (
+          <span className="cv-p-row__preview">{conversation.lastMessagePreview}</span>
+        ) : null}
+      </span>
+      <span className="cv-p-row__meta">
+        {conversation.lastMessageAt ? <span>{formatRowTime(conversation.lastMessageAt, locale)}</span> : null}
+        {conversation.unreadCount > 0 ? (
+          <span className="cv-p-row__unread">
+            <span aria-hidden="true">{conversation.unreadCount}</span>
+            <span className="cv-p-sr-only">{formatParticipantLabel(labels.unreadCount, conversation.unreadCount)}</span>
+          </span>
+        ) : null}
+      </span>
+    </button>
+  )
+}

package/src/participant/ParticipantInboxSearchField.tsx

@@ -0,0 +1,34 @@
+import { useId } from 'react'
+
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+export type ParticipantInboxSearch = {
+  readonly value: string
+  readonly onChange: (value: string) => void
+  readonly isVisible: boolean
+}
+
+export type ParticipantInboxSearchFieldProps = {
+  readonly search: ParticipantInboxSearch
+  readonly labels: ParticipantConversationsLabels
+}
+
+export function ParticipantInboxSearchField({ search, labels }: ParticipantInboxSearchFieldProps) {
+  const inputId = useId()
+  return (
+    <div className="cv-p-search">
+      <label className="cv-p-sr-only" htmlFor={inputId}>
+        {labels.searchLabel}
+      </label>
+      <input
+        id={inputId}
+        type="search"
+        className="cv-p-search__input"
+        value={search.value}
+        placeholder={labels.searchPlaceholder}
+        autoComplete="off"
+        onChange={(event) => search.onChange(event.target.value)}
+      />
+    </div>
+  )
+}

package/src/participant/ParticipantMessageBubble.test.tsx

@@ -105,6 +105,8 @@ describe('ParticipantMessageBubble', () => {
 
     expect(withRetry).toContain('<button')
     expect(withRetry).toContain('Failed — tap to retry')
+    expect(withRetry).toContain('cv-status-ticks--failed')
+    expect(findUtilityClassTokens(withRetry)).toEqual([])
     expect(withoutRetry).not.toContain('<button')
     expect(withoutRetry).toContain('cv-status-ticks--failed')
   })

package/src/participant/ParticipantMessageBubble.tsx

@@ -85,7 +85,7 @@ function OwnStatus({ status, labels, onRetry }: OwnStatusProps) {
   if (status === 'failed' && onRetry) {
     return (
       <button type="button" className="cv-p-bubble__retry" onClick={onRetry}>
-        <StatusTicks status="failed" />
+        <StatusTicks status="failed" appearance="stylesheet" />
         <span>{labels.statusFailed}</span>
       </button>
     )
@@ -94,7 +94,7 @@ function OwnStatus({ status, labels, onRetry }: OwnStatusProps) {
   const text = status === 'failed' ? labels.statusFailedShort : statusText(status, labels)
   return (
     <span className="cv-p-bubble__status">
-      <StatusTicks status={ticksStatus} />
+      <StatusTicks status={ticksStatus} appearance="stylesheet" />
       <span className={isVisibleText ? 'cv-p-bubble__status-text' : 'cv-p-sr-only'}>{text}</span>
     </span>
   )
@@ -158,7 +158,7 @@ export function ParticipantMessageBubble({
         <span className="cv-p-bubble__author">{content.authorName}</span>
       ) : null}
       {content.text ? (
-        <MessageText message={toTextPayload(content.text, content.createdAt, isMine)} copyOnClick={false} />
+        <MessageText message={toTextPayload(content.text, content.createdAt, isMine)} copyOnClick={false} appearance="stylesheet" />
       ) : null}
       {content.attachments.map((attachment) => (
         <ParticipantAttachmentItem

package/src/participant/ParticipantProtocolBadge.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useReducer } from 'react'
+
+import type { ParticipantConversationsLabels } from './participantLabels'
+import {
+  INITIAL_PROTOCOL_COPY_STATE,
+  copyProtocolToClipboard,
+  protocolCopyReducer,
+  type ProtocolCopyState,
+} from './participantProtocolCopy'
+
+const COPIED_ANNOUNCEMENT_MS = 3000
+
+export type ParticipantProtocolBadgeProps = {
+  readonly protocol: string
+  readonly labels: ParticipantConversationsLabels
+}
+
+export type ParticipantProtocolBadgeViewProps = ParticipantProtocolBadgeProps & {
+  readonly copyState: ProtocolCopyState
+  readonly onCopy: () => void
+}
+
+export function ParticipantProtocolBadgeView({
+  protocol,
+  labels,
+  copyState,
+  onCopy,
+}: ParticipantProtocolBadgeViewProps) {
+  const { isCopied, copyCount } = copyState
+  return (
+    <>
+      <div className="cv-p-protocol cv-p-protocol--header">
+        <span className="cv-p-protocol__code">
+          <span className="cv-p-sr-only">{labels.protocolPrefix} </span>
+          {protocol}
+        </span>
+        <button type="button" className="cv-p-protocol__copy" onClick={onCopy}>
+          <span aria-hidden="true">{isCopied ? labels.protocolCopied : labels.copyProtocol}</span>
+          <span className="cv-p-sr-only">
+            {labels.copyProtocol} {protocol}
+          </span>
+        </button>
+      </div>
+      <div className="cv-p-sr-only" role="status" aria-live="polite">
+        {isCopied ? <span key={copyCount}>{labels.protocolCopied}</span> : null}
+      </div>
+    </>
+  )
+}
+
+export function ParticipantProtocolBadge({ protocol, labels }: ParticipantProtocolBadgeProps) {
+  const [copyState, dispatch] = useReducer(protocolCopyReducer, INITIAL_PROTOCOL_COPY_STATE)
+  const { isCopied, copyCount } = copyState
+
+  useEffect(() => {
+    if (!isCopied) return undefined
+    const timer = setTimeout(() => dispatch({ type: 'expired' }), COPIED_ANNOUNCEMENT_MS)
+    return () => clearTimeout(timer)
+  }, [isCopied, copyCount])
+
+  async function handleCopy(): Promise<void> {
+    const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard
+    if (await copyProtocolToClipboard(protocol, clipboard)) dispatch({ type: 'copied' })
+  }
+
+  return (
+    <ParticipantProtocolBadgeView
+      protocol={protocol}
+      labels={labels}
+      copyState={copyState}
+      onCopy={() => void handleCopy()}
+    />
+  )
+}

package/src/participant/ParticipantProtocolView.test.tsx

@@ -0,0 +1,208 @@
+import { describe, expect, it } from 'bun:test'
+import { readFileSync, readdirSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { buildConversation, findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+import { groupParticipantConversations } from './participantGrouping'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantInbox } from './ParticipantInbox'
+import { ParticipantProtocolBadgeView } from './ParticipantProtocolBadge'
+import { ParticipantThread } from './ParticipantThread'
+
+const LABELS = DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS
+const WITH_PROTOCOL = buildConversation({ subjectId: '1', subjectLabel: 'Item 4521', protocol: '261009-K7M2' })
+const WITHOUT_PROTOCOL = buildConversation({ subjectId: '2', subjectLabel: 'Item 9999' })
+
+type InboxOverrides = {
+  search?: { value: string; isVisible: boolean }
+  hasMore?: boolean
+  filter?: string
+  hasMatchesOutsideFilter?: boolean
+}
+
+function renderInbox(conversations: readonly (typeof WITH_PROTOCOL)[], overrides: InboxOverrides = {}): string {
+  const view = {
+    ...groupParticipantConversations({ conversations, subjectGroups: [], filter: 'all' }),
+    ...(overrides.hasMatchesOutsideFilter === undefined
+      ? {}
+      : { hasMatchesOutsideFilter: overrides.hasMatchesOutsideFilter }),
+  }
+  return renderToStaticMarkup(
+    <ParticipantInbox
+      view={view}
+      subjectGroups={[]}
+      filter="all"
+      onFilterChange={() => undefined}
+      onSelect={() => undefined}
+      labels={LABELS}
+      status="ready"
+      refresh={() => undefined}
+      hasMore={overrides.hasMore ?? false}
+      loadMore={() => undefined}
+      search={overrides.search ? { ...overrides.search, onChange: () => undefined } : undefined}
+    />,
+  )
+}
+
+function renderThread(conversation: typeof WITH_PROTOCOL): string {
+  return renderToStaticMarkup(
+    <ParticipantThread
+      conversation={conversation}
+      items={[]}
+      hasMore={false}
+      labels={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}
+    />,
+  )
+}
+
+describe('protocol in the inbox row', () => {
+  it('shows the protocol with an accessible name', () => {
+    const markup = renderInbox([WITH_PROTOCOL])
+    expect(markup).toContain('cv-p-protocol')
+    expect(markup).toContain('261009-K7M2')
+    expect(markup).toContain('<span class="cv-p-sr-only">Protocol </span>261009-K7M2')
+    expect(markup).not.toMatch(/<span[^>]*aria-label/)
+  })
+
+  it('draws nothing when the protocol is absent', () => {
+    expect(renderInbox([WITHOUT_PROTOCOL])).not.toContain('cv-p-protocol')
+  })
+})
+
+describe('inbox search', () => {
+  it('is drawn with a label, placeholder and type=search when visible', () => {
+    const markup = renderInbox([WITH_PROTOCOL], { search: { value: '', isVisible: true } })
+    expect(markup).toContain('type="search"')
+    expect(markup).toContain('cv-p-search')
+    expect(markup).toContain(LABELS.searchLabel)
+    expect(markup).toContain(`placeholder="${LABELS.searchPlaceholder}"`)
+  })
+
+  it('is not drawn when hidden or when the prop is absent', () => {
+    expect(renderInbox([WITH_PROTOCOL], { search: { value: '', isVisible: false } })).not.toContain('cv-p-search')
+    expect(renderInbox([WITH_PROTOCOL])).not.toContain('cv-p-search')
+  })
+
+  it('shows the no-results state instead of the empty inbox when a query finds nothing', () => {
+    const markup = renderInbox([], { search: { value: 'zzz', isVisible: true } })
+    expect(markup).toContain(LABELS.noResults)
+    expect(markup).not.toContain(LABELS.emptyInbox)
+  })
+})
+
+describe('protocol in the thread header', () => {
+  it('shows the protocol and a copy button of at least a touch target', () => {
+    const markup = renderThread(WITH_PROTOCOL)
+    expect(markup).toContain('261009-K7M2')
+    expect(markup).toContain('cv-p-protocol__copy')
+    expect(markup).toContain('type="button"')
+    expect(markup).toContain(LABELS.copyProtocol)
+  })
+
+  it('names the code with a visually hidden prefix and no aria-label on the generic span', () => {
+    const markup = renderThread(WITH_PROTOCOL)
+    expect(markup).toContain(`<span class="cv-p-sr-only">${LABELS.protocolPrefix} </span>261009-K7M2`)
+    expect(markup).not.toMatch(/<span[^>]*aria-label/)
+  })
+
+  it('keeps an empty polite live region in the tree', () => {
+    const markup = renderThread(WITH_PROTOCOL)
+    expect(markup).toMatch(/<div class="cv-p-sr-only" role="status" aria-live="polite"><\/div>/)
+    expect(markup).not.toContain(LABELS.protocolCopied)
+  })
+
+  it('draws neither protocol nor button nor live region when absent', () => {
+    const markup = renderThread(WITHOUT_PROTOCOL)
+    expect(markup).not.toContain('cv-p-protocol')
+    expect(markup.match(/aria-live="polite"/g)?.length).toBe(1)
+  })
+
+  it('does not nest a status region inside the protocol block', () => {
+    const markup = renderThread(WITH_PROTOCOL)
+    const block = markup.slice(
+      markup.indexOf('cv-p-protocol--header'),
+      markup.indexOf('</button>', markup.indexOf('cv-p-protocol__copy')),
+    )
+    expect(block).not.toContain('role="status"')
+    expect(block).not.toContain('aria-live')
+  })
+})
+
+describe('copy button', () => {
+  const render = (isCopied: boolean) =>
+    renderToStaticMarkup(
+      <ParticipantProtocolBadgeView
+        protocol="261009-K7M2"
+        labels={LABELS}
+        copyState={{ copyCount: isCopied ? 1 : 0, isCopied }}
+        onCopy={() => undefined}
+      />,
+    )
+
+  it('has a default visible label starting the accessible name', () => {
+    expect(LABELS.copyProtocol).toBe('Copy protocol')
+    const markup = render(false)
+    expect(markup).toContain('<span aria-hidden="true">Copy protocol</span>')
+    expect(markup).toContain('<span class="cv-p-sr-only">Copy protocol 261009-K7M2</span>')
+  })
+
+  it('swaps the visible text for the confirmation while copied, hidden from assistive tech', () => {
+    const markup = render(true)
+    expect(markup).toContain(`<span aria-hidden="true">${LABELS.protocolCopied}</span>`)
+    expect(markup).toContain(`<span>${LABELS.protocolCopied}</span></div>`)
+  })
+
+  it('announces only through the live region, keyed by the copy count', () => {
+    expect(render(false)).toMatch(/aria-live="polite"><\/div>/)
+    expect(render(true)).toMatch(/aria-live="polite"><span>Protocol copied<\/span><\/div>/)
+  })
+})
+
+describe('inbox empty states', () => {
+  const search = { value: 'zzz', isVisible: true }
+
+  it('says the filter is the reason when the query matches in another subject', () => {
+    const markup = renderInbox([], { search, hasMatchesOutsideFilter: true })
+    expect(markup).toContain(LABELS.noResultsInFilter)
+    expect(markup).not.toContain(`>${LABELS.noResults}<`)
+  })
+
+  it('says the search covers only the loaded conversations when more exist', () => {
+    const markup = renderInbox([], { search, hasMore: true })
+    expect(markup).toContain(LABELS.noResultsLoadedOnly)
+    expect(markup).toContain(LABELS.loadMore)
+  })
+
+  it('keeps the plain message when nothing more can be loaded', () => {
+    expect(renderInbox([], { search })).toContain(`>${LABELS.noResults}<`)
+  })
+})
+
+describe('protocol markup hygiene', () => {
+  it('uses only cv-p-* classes and no Tailwind utilities', () => {
+    const markup =
+      renderInbox([WITH_PROTOCOL], { search: { value: '', isVisible: true } }) + renderThread(WITH_PROTOCOL)
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+
+  it('keeps product vocabulary out of the new sources and labels', () => {
+    const files = readdirSync(fileURLToPath(new URL('.', import.meta.url))).filter(
+      (file) => /\.tsx?$/.test(file) && !/\.test(-helper)?\.tsx?$/.test(file),
+    )
+    const source = files.map((file) => readFileSync(new URL(file, import.meta.url), 'utf8')).join('\n')
+    expect(files.length).toBeGreaterThan(20)
+    expect(source).not.toMatch(
+      /\b(carga|entrega|frete|cte|nf-?e|transport\w*|nota|ocorr\w*|motorista|viagem|trip|driver)\b/i,
+    )
+  })
+})

package/src/participant/ParticipantThread.test.tsx

@@ -1,7 +1,12 @@
 import { describe, expect, it } from 'bun:test'
 import { renderToStaticMarkup } from 'react-dom/server'
 
-import { buildConversation, buildMessage, findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+import {
+  buildConversation,
+  buildMessage,
+  findForeignClassTokens,
+  findUtilityClassTokens,
+} from './participantFixtures.test-helper'
 import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
 import type { ParticipantTimelineItem } from './participantMessages'
 import { ParticipantThread, type ParticipantThreadProps } from './ParticipantThread'
@@ -54,6 +59,15 @@ describe('ParticipantThread', () => {
     expect(markup).toContain('Card body')
   })
 
+  it('shows channel badges in the header only with channels', () => {
+    expect(render()).not.toContain('cv-p-channels')
+    const markup = render({
+      conversation: buildConversation({ subjectId: '1', channels: ['email', 'app'] }),
+    })
+    expect(markup).toContain('cv-p-channel--app')
+    expect(markup.indexOf('cv-p-channel--app')).toBeLessThan(markup.indexOf('cv-p-channel--email'))
+  })
+
   it('renders day dividers between days', () => {
     expect(render().match(/cv-p-day"/g)?.length).toBe(2)
   })
@@ -92,7 +106,10 @@ describe('ParticipantThread', () => {
   })
 
   it('disables only the send button while sending, never the field', () => {
-    const markup = render({ isSending: true, draft: { value: 'hi', onChange: () => undefined, files: [], onFilesChange: () => undefined } })
+    const markup = render({
+      isSending: true,
+      draft: { value: 'hi', onChange: () => undefined, files: [], onFilesChange: () => undefined },
+    })
 
     expect(markup).toMatch(/<button[^>]*type="submit"[^>]*disabled/)
     expect(markup).not.toMatch(/<textarea[^>]*disabled/)

package/src/participant/ParticipantThread.tsx

@@ -8,13 +8,19 @@ import { isSameDay } from '../lib/format'
 import type { QuickReply } from '../quickReplies/quickReply.types'
 import { ParticipantComposer } from './ParticipantComposer'
 import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
-import { bindPendingActions, resolveParticipantBubbleActions, type ParticipantPendingActions } from './participantBubbleActions'
+import {
+  bindPendingActions,
+  resolveParticipantBubbleActions,
+  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'
 
 export type ParticipantThreadDraft = {
   readonly value: string
@@ -76,20 +82,24 @@ function Header({ props }: { readonly props: ParticipantThreadProps }) {
           <span className="cv-p-sr-only">{labels.back}</span>
         </button>
       ) : null}
-      <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>
+      <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>
   )
 }