@adatechnology/conversations-ui 0.6.1 → 0.8.0

package/src/participant/participantPerspectiveRender.test.tsx

@@ -0,0 +1,94 @@
+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, type ParticipantThreadProps } from './ParticipantThread'
+
+const ITEMS: readonly ParticipantTimelineItem[] = [
+  {
+    kind: 'server',
+    message: buildMessage({
+      id: 'a',
+      direction: 'inbound',
+      authorName: 'Ana Souza',
+      createdAt: '2026-10-01T10:00:00.000Z',
+    }),
+  },
+  {
+    kind: 'server',
+    message: buildMessage({ id: 'b', direction: 'outbound', status: 'read', createdAt: '2026-10-01T10:05:00.000Z' }),
+  },
+  {
+    kind: 'pending',
+    origin: 'local',
+    displayState: 'queued',
+    pending: {
+      clientMessageId: 'c',
+      subject: { subjectType: 'invoice', subjectId: '1' },
+      text: 'Waiting',
+      createdAt: '2026-10-01T10:06:00.000Z',
+      state: 'queued',
+    },
+  },
+]
+
+function render(overrides: Partial<ParticipantThreadProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantThread
+      conversation={buildConversation({ subjectId: '1', subjectLabel: 'Invoice 4521' })}
+      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}
+      {...overrides}
+    />,
+  )
+}
+
+function mineFlags(markup: string): boolean[] {
+  return markup
+    .split('<div class="cv-p-bubble')
+    .slice(1)
+    .map((bubble) => bubble.startsWith(' cv-p-bubble--mine'))
+}
+
+describe('ParticipantThread perspective', () => {
+  it('is untouched without the new props: the participant owns the inbound messages', () => {
+    expect(mineFlags(render())).toEqual([true, false, true])
+    expect(render({ perspective: 'participant' })).toBe(render())
+  })
+
+  it('draws none of the new header parts without the new props', () => {
+    const markup = render()
+    expect(markup).not.toContain('cv-p-thread__actions')
+    expect(markup).not.toContain('cv-p-thread__counterpart')
+  })
+
+  it('inverts which bubble is mine for the operator, keeping the own local pending message', () => {
+    expect(mineFlags(render({ perspective: 'operator' }))).toEqual([false, true, true])
+  })
+
+  it('moves the ticks to the operator side', () => {
+    const participant = render()
+    const operator = render({ perspective: 'operator' })
+    expect(participant).not.toContain('cv-status-ticks--read')
+    expect(operator).toContain('cv-status-ticks--read')
+    expect(operator).toContain('cv-status-ticks--queued')
+  })
+
+  it('puts the avatar on the counterpart, not on the operator', () => {
+    const participant = render({ avatars: 'initials' })
+    const operator = render({ perspective: 'operator', avatars: 'initials' })
+    expect(participant).not.toContain('>AS<')
+    expect(operator).toContain('class="cv-p-avatar" aria-hidden="true">AS<')
+  })
+})

package/src/participant/participantScrollFocus.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'bun:test'
+
+import { SCROLLER_SELECTOR, focusScrollerOf } from './participantScrollFocus'
+
+describe('focusScrollerOf', () => {
+  it('moves focus to the scroller ancestor without scrolling it', () => {
+    const calls: unknown[] = []
+    const selectors: string[] = []
+    focusScrollerOf({
+      closest: (selector) => {
+        selectors.push(selector)
+        return { focus: (options) => void calls.push(options) }
+      },
+    })
+    expect(selectors).toEqual([SCROLLER_SELECTOR])
+    expect(calls).toEqual([{ preventScroll: true }])
+  })
+
+  it('does nothing when there is no scroller', () => {
+    expect(() => focusScrollerOf({ closest: () => null })).not.toThrow()
+  })
+})

package/src/participant/participantScrollFocus.ts

@@ -0,0 +1,10 @@
+export type FocusableAncestorSource = {
+  readonly closest: (selector: string) => { readonly focus: (options: { preventScroll: boolean }) => void } | null
+}
+
+export const SCROLLER_SELECTOR = '.cv-p-thread__scroll'
+
+/** The button unmounts on click; moving focus first keeps it from falling to the body. */
+export function focusScrollerOf(button: FocusableAncestorSource): void {
+  button.closest(SCROLLER_SELECTOR)?.focus({ preventScroll: true })
+}

package/src/participant/participantScrollView.test.ts

@@ -0,0 +1,74 @@
+import { readFileSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'bun:test'
+
+import { resolveScrollToLatestView, scrollIntoViewOptions, scrollToLatestOptions } from './participantScrollView'
+
+describe('resolveScrollToLatestView', () => {
+  it('is hidden while the reader is near the end', () => {
+    expect(resolveScrollToLatestView({ isAwayFromBottom: false, newMessagesCount: 0, hasMessages: true })).toEqual({
+      isVisible: false,
+      badge: undefined,
+    })
+  })
+
+  it('is hidden when there is nothing to scroll to', () => {
+    expect(
+      resolveScrollToLatestView({ isAwayFromBottom: true, newMessagesCount: 0, hasMessages: false }).isVisible,
+    ).toBe(false)
+  })
+
+  it('is visible without a badge when away and nothing new arrived', () => {
+    expect(resolveScrollToLatestView({ isAwayFromBottom: true, newMessagesCount: 0, hasMessages: true })).toEqual({
+      isVisible: true,
+      badge: undefined,
+    })
+  })
+
+  it('carries the count of new incoming messages as the badge', () => {
+    expect(resolveScrollToLatestView({ isAwayFromBottom: true, newMessagesCount: 3, hasMessages: true }).badge).toBe(
+      '3',
+    )
+  })
+
+  it('caps a large count', () => {
+    expect(resolveScrollToLatestView({ isAwayFromBottom: true, newMessagesCount: 100, hasMessages: true }).badge).toBe(
+      '99+',
+    )
+    expect(resolveScrollToLatestView({ isAwayFromBottom: true, newMessagesCount: 99, hasMessages: true }).badge).toBe(
+      '99',
+    )
+  })
+})
+
+describe('scroll options', () => {
+  it('scrolls to the end of the list, smooth only without reduced motion', () => {
+    expect(scrollToLatestOptions({ scrollHeight: 900, isReducedMotion: false })).toEqual({
+      top: 900,
+      behavior: 'smooth',
+    })
+    expect(scrollToLatestOptions({ scrollHeight: 900, isReducedMotion: true })).toEqual({ top: 900, behavior: 'auto' })
+  })
+
+  it('reveals the active chip with the nearest rule and no animation under reduced motion', () => {
+    expect(scrollIntoViewOptions(false)).toEqual({ block: 'nearest', inline: 'nearest', behavior: 'smooth' })
+    expect(scrollIntoViewOptions(true)).toEqual({ block: 'nearest', inline: 'nearest', behavior: 'auto' })
+  })
+})
+
+describe('the near-the-end threshold has one owner', () => {
+  it('is declared only in participantScroll.ts', () => {
+    const sources = readdirSync(import.meta.dir).filter(
+      (name) => /\.tsx?$/.test(name) && !/\.test(-helper)?\.tsx?$/.test(name),
+    )
+    const declaring = sources.filter((name) =>
+      /NEAR_BOTTOM_THRESHOLD_PX\s*=/.test(readFileSync(join(import.meta.dir, name), 'utf8')),
+    )
+    expect(declaring).toEqual(['participantScroll.ts'])
+  })
+
+  it('is not re-derived by the scroll-to-latest rule', () => {
+    const source = readFileSync(join(import.meta.dir, 'participantScrollView.ts'), 'utf8')
+    expect(source).not.toMatch(/scrollTop|clientHeight|threshold/i)
+  })
+})

package/src/participant/participantScrollView.ts

@@ -0,0 +1,38 @@
+const BADGE_CAP = 99
+
+export type ScrollToLatestViewParams = {
+  /** Already decided by shouldStickToBottom; this rule never looks at pixels. */
+  readonly isAwayFromBottom: boolean
+  readonly newMessagesCount: number
+  readonly hasMessages: boolean
+}
+
+export type ScrollToLatestView = {
+  readonly isVisible: boolean
+  readonly badge: string | undefined
+}
+
+export type ScrollToLatestOptionsParams = {
+  readonly scrollHeight: number
+  readonly isReducedMotion: boolean
+}
+
+export function resolveScrollToLatestView(params: ScrollToLatestViewParams): ScrollToLatestView {
+  const { isAwayFromBottom, newMessagesCount, hasMessages } = params
+  if (!isAwayFromBottom || !hasMessages) return { isVisible: false, badge: undefined }
+  if (newMessagesCount <= 0) return { isVisible: true, badge: undefined }
+  return { isVisible: true, badge: newMessagesCount > BADGE_CAP ? `${BADGE_CAP}+` : String(newMessagesCount) }
+}
+
+export function scrollToLatestOptions(params: ScrollToLatestOptionsParams): ScrollToOptions {
+  return { top: params.scrollHeight, behavior: params.isReducedMotion ? 'auto' : 'smooth' }
+}
+
+export function scrollIntoViewOptions(isReducedMotion: boolean): ScrollIntoViewOptions {
+  return { block: 'nearest', inline: 'nearest', behavior: isReducedMotion ? 'auto' : 'smooth' }
+}
+
+export function readPrefersReducedMotion(): boolean {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}

package/src/participant/participantScrollbars.test.ts

@@ -0,0 +1,156 @@
+import { describe, expect, it } from 'bun:test'
+
+import { PARTICIPANT_CSS, declarationsIn, mediaBody, toRem } from './participantCss.test-helper'
+
+const VERTICAL_AREAS = ['.cv-p-thread__scroll', '.cv-p-inbox', '.cv-p-composer__input']
+const HORIZONTAL_STRIPS = ['.cv-p-filters', '.cv-p-quick']
+const NO_PREFERENCE = '(prefers-reduced-motion: no-preference)'
+const FORCED_COLORS = '(forced-colors: active)'
+const WEBKIT_GUARD = 'not (forced-colors: active)'
+
+function webkitRules(selector: string): Map<string, string> {
+  return declarationsIn(`${selector}::-webkit-scrollbar`, mediaBody(WEBKIT_GUARD))
+}
+
+describe.each(VERTICAL_AREAS)('vertical scroller %s', (selector) => {
+  const declarations = declarationsIn(selector)
+
+  it('has a thin themed scrollbar from the tokens', () => {
+    expect(declarations.get('scrollbar-width')).toBe('thin')
+    expect(declarations.get('scrollbar-color')).toBe('var(--cv-p-i-scrollbar-thumb) transparent')
+  })
+
+  it('does not chain the scroll to the page', () => {
+    expect(declarations.get('overscroll-behavior-y')).toBe('contain')
+  })
+
+  it('has a 6px track-less webkit scrollbar with a rounded thumb and no arrows', () => {
+    expect(webkitRules(selector).get('width')).toBe('6px')
+    expect(webkitRules(selector).get('height')).toBe('6px')
+    const track = declarationsIn(`${selector}::-webkit-scrollbar-track`, mediaBody(WEBKIT_GUARD))
+    expect(track.get('background')).toBe('transparent')
+    const thumb = declarationsIn(`${selector}::-webkit-scrollbar-thumb`, mediaBody(WEBKIT_GUARD))
+    expect(thumb.get('background-color')).toBe('var(--cv-p-i-scrollbar-thumb)')
+    expect(thumb.get('border-radius')).toBe('var(--cv-p-i-radius)')
+    const buttons = declarationsIn(`${selector}::-webkit-scrollbar-button`, mediaBody(WEBKIT_GUARD))
+    expect(buttons.get('display')).toBe('none')
+  })
+
+  it('highlights the thumb with the accent on hover and drag', () => {
+    const hover = declarationsIn(`${selector}::-webkit-scrollbar-thumb:hover`, mediaBody(WEBKIT_GUARD))
+    const active = declarationsIn(`${selector}::-webkit-scrollbar-thumb:active`, mediaBody(WEBKIT_GUARD))
+    expect(hover.get('background-color')).toBe('var(--cv-p-i-scrollbar-thumb-hover)')
+    expect(active.get('background-color')).toBe('var(--cv-p-i-scrollbar-thumb-hover)')
+  })
+
+  it('goes back to the system scrollbar under forced colors', () => {
+    const forced = declarationsIn(selector, mediaBody(FORCED_COLORS))
+    expect(forced.get('scrollbar-color')).toBe('auto')
+    expect(forced.get('scrollbar-width')).toBe('auto')
+  })
+})
+
+describe('scrollbar tokens', () => {
+  const root = declarationsIn('.cv-p')
+
+  it('derive from the existing tokens and are overridable', () => {
+    expect(root.get('--cv-p-i-scrollbar-thumb')).toBe('var(--cv-p-scrollbar-thumb, var(--cv-p-i-border))')
+    expect(root.get('--cv-p-i-scrollbar-thumb-hover')).toBe('var(--cv-p-scrollbar-thumb-hover, var(--cv-p-i-accent))')
+  })
+})
+
+describe('thread scrollbar does not move the bubbles', () => {
+  it('reserves no gutter', () => {
+    expect(declarationsIn('.cv-p-thread__scroll').get('scrollbar-gutter')).toBeUndefined()
+    expect(declarationsIn('.cv-p-inbox').get('scrollbar-gutter')).toBeUndefined()
+  })
+})
+
+describe.each(HORIZONTAL_STRIPS)('horizontal strip %s', (selector) => {
+  const declarations = declarationsIn(selector)
+
+  it('hides the scrollbar everywhere', () => {
+    expect(declarations.get('scrollbar-width')).toBe('none')
+    expect(declarationsIn(`${selector}::-webkit-scrollbar`).get('display')).toBe('none')
+  })
+
+  it('fades both edges to hint that it scrolls', () => {
+    const mask = declarations.get('mask-image') ?? ''
+    expect(mask).toContain('linear-gradient(to right')
+    expect(mask).toContain('transparent')
+    expect(declarations.get('-webkit-mask-image')).toBe(mask)
+  })
+
+  it('snaps with proximity and does not chain sideways', () => {
+    expect(declarations.get('scroll-snap-type')).toBe('x proximity')
+    expect(declarations.get('overscroll-behavior-x')).toBe('contain')
+    expect(declarations.get('-webkit-overflow-scrolling')).toBe('touch')
+  })
+
+  it('keeps the first chip clear of the fade', () => {
+    expect(declarations.get('scroll-padding-inline')).toBe('var(--cv-p-i-fade)')
+    expect(declarations.get('padding-inline')).toBe('var(--cv-p-i-fade)')
+    expect(toRem(declarationsIn(selector).get('--cv-p-i-fade'))).toBeGreaterThanOrEqual(0.75)
+    expect(declarationsIn(`${selector} > .cv-p-chip`).get('scroll-snap-align')).toBe('start')
+  })
+
+  it('drops the mask under forced colors', () => {
+    const forced = declarationsIn(selector, mediaBody(FORCED_COLORS))
+    expect(forced.get('mask-image')).toBe('none')
+    expect(forced.get('-webkit-mask-image')).toBe('none')
+  })
+})
+
+describe('smooth scrolling', () => {
+  const SMOOTH_AREAS = ['.cv-p-inbox', '.cv-p-filters', '.cv-p-quick']
+
+  it.each(SMOOTH_AREAS)('%s is smooth only when motion is welcome', (selector) => {
+    expect(declarationsIn(selector, mediaBody(NO_PREFERENCE)).get('scroll-behavior')).toBe('smooth')
+    expect(declarationsIn(selector).get('scroll-behavior')).toBeUndefined()
+  })
+
+  it('never makes the thread scroller smooth: its programmatic positioning must stay instant', () => {
+    expect(declarationsIn('.cv-p-thread__scroll').get('scroll-behavior')).toBeUndefined()
+    expect(declarationsIn('.cv-p-thread__scroll', mediaBody(NO_PREFERENCE)).get('scroll-behavior')).toBeUndefined()
+  })
+
+  it('has no scroll-behavior outside the no-preference block', () => {
+    const outside = PARTICIPANT_CSS.replace(mediaBody(NO_PREFERENCE) ?? '', '')
+    expect(outside).not.toMatch(/(?<!over)scroll-behavior/)
+  })
+})
+
+describe('scroll-to-latest button styles', () => {
+  const button = declarationsIn('.cv-p-thread__latest-button')
+
+  it('is a 44px touch target', () => {
+    expect(button.get('width')).toBe('var(--cv-p-i-touch)')
+    expect(button.get('height')).toBe('var(--cv-p-i-touch)')
+    expect(toRem(declarationsIn('.cv-p').get('--cv-p-i-touch'))).toBeGreaterThanOrEqual(2.75)
+  })
+
+  it('floats without taking room in the scroller', () => {
+    const anchor = declarationsIn('.cv-p-thread__latest')
+    expect(anchor.get('position')).toBe('sticky')
+    expect(anchor.get('bottom')).toBe('0')
+    expect(anchor.get('height')).toBe('0')
+    expect(button.get('position')).toBe('absolute')
+  })
+
+  it('animates its entrance only when motion is welcome', () => {
+    expect(declarationsIn('.cv-p-thread__latest-button', mediaBody(NO_PREFERENCE)).get('animation')).toContain(
+      'cv-p-latest-in',
+    )
+    expect(button.get('animation')).toBeUndefined()
+  })
+
+  it('outlines the badge under forced colors', () => {
+    expect(declarationsIn('.cv-p-thread__latest-badge', mediaBody(FORCED_COLORS)).get('border')).toContain('ButtonText')
+  })
+})
+
+describe('no leftovers', () => {
+  it('uses no Tailwind and no host vocabulary in the new rules', () => {
+    expect(PARTICIPANT_CSS).not.toMatch(/@apply|@tailwind/)
+  })
+})

package/src/participant/participantSubjectIcon.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'bun:test'
+
+import { buildConversation } from './participantFixtures.test-helper'
+import { resolveConversationIcon } from './participantSubjectIcon'
+
+const conversation = buildConversation({ subjectId: '1' })
+const group = { subjectType: 'invoice', label: 'Invoices', icon: <i>group</i> }
+
+describe('resolveConversationIcon', () => {
+  it('prefers the host icon, then the group icon, then nothing', () => {
+    const host = <b>host</b>
+    expect(resolveConversationIcon({ conversation, group, renderSubjectIcon: () => host })).toBe(host)
+    expect(resolveConversationIcon({ conversation, group })).toBe(group.icon)
+    expect(resolveConversationIcon({ conversation, group: { ...group, icon: undefined } })).toBeUndefined()
+    expect(resolveConversationIcon({ conversation, group: undefined })).toBeUndefined()
+  })
+
+  it.each([null, undefined, false, ''])('treats %p from the host as no icon, like the list row', (empty) => {
+    expect(resolveConversationIcon({ conversation, group, renderSubjectIcon: () => empty })).toBe(group.icon)
+  })
+
+  it('hands the conversation to the host renderer', () => {
+    const seen: string[] = []
+    resolveConversationIcon({ conversation, group, renderSubjectIcon: (item) => seen.push(item.subjectId) })
+    expect(seen).toEqual(['1'])
+  })
+})

package/src/participant/participantSubjectIcon.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+
+import type { ParticipantConversationSummary } from '@adatechnology/conversation-contracts'
+
+import type { ParticipantSubjectGroup, ParticipantSubjectIconRenderer } from './participant.types'
+
+export type ResolveConversationIconParams = {
+  readonly conversation: ParticipantConversationSummary
+  readonly group: ParticipantSubjectGroup | undefined
+  readonly renderSubjectIcon?: ParticipantSubjectIconRenderer
+}
+
+export function isDrawable(node: ReactNode): boolean {
+  return node !== null && node !== undefined && node !== false && node !== ''
+}
+
+/** Host icon, then group icon, then nothing; the list row adds its own text fallback, the header draws no tile. */
+export function resolveConversationIcon({
+  conversation,
+  group,
+  renderSubjectIcon,
+}: ResolveConversationIconParams): ReactNode | undefined {
+  const custom = renderSubjectIcon?.(conversation)
+  if (isDrawable(custom)) return custom
+  return isDrawable(group?.icon) ? group?.icon : undefined
+}

package/src/participant/participantThemeContrast.test.ts

@@ -0,0 +1,98 @@
+import { describe, expect, it } from 'bun:test'
+
+import {
+  contrastRatio,
+  declaredToken,
+  defaultPalette,
+  fallbackOf,
+  flatten,
+  mappedPalette,
+  over,
+  parseColor,
+  tint,
+  type Palette,
+  type Rgba,
+} from './participantContrast.test-helper'
+
+const TEXT_MINIMUM = 4.5
+const NON_TEXT_MINIMUM = 3
+const WALLPAPER_SUBTLETY = 2
+
+/** The light mapping a host panel can set on `.cv-p`; every other token keeps the package default. */
+const PANEL_LIGHT_MAPPING = {
+  surface: '#f2efe9',
+  raised: '#ffffff',
+  text: '#1f2a30',
+  muted: '#59636a',
+  border: '#cfc8bb',
+  accent: '#a85a1c',
+  highlight: '#fbf3ea',
+} as const
+
+type Scenario = { readonly name: string; readonly palette: Palette; readonly tick: Rgba; readonly tickRead: Rgba }
+
+function scenario(name: string, palette: Palette, theme: 'light' | 'dark'): Scenario {
+  const flat = flatten(palette)
+  const tick = flat.muted
+  const tickRead = parseColor(fallbackOf(declaredToken('--cv-p-i-tick-read', theme)))
+  return { name, palette: flat, tick, tickRead }
+}
+
+const SCENARIOS: readonly Scenario[] = [
+  scenario('light defaults', defaultPalette('light'), 'light'),
+  scenario('dark defaults', defaultPalette('dark'), 'dark'),
+  scenario('panel light mapping', mappedPalette(PANEL_LIGHT_MAPPING), 'light'),
+]
+
+function fillOf(palette: Palette, surface: 'received' | 'mine'): Rgba {
+  return surface === 'received' ? palette.raised : over(palette.highlight, palette.surface)
+}
+
+describe.each(SCENARIOS.map((entry) => [entry.name, entry] as const))(
+  'contrast: %s',
+  (_name, { palette, tick, tickRead }) => {
+    it('keeps the text of both bubbles at 4.5:1 or more', () => {
+      for (const side of ['received', 'mine'] as const) {
+        const fill = fillOf(palette, side)
+        expect(contrastRatio(palette.text, fill)).toBeGreaterThanOrEqual(TEXT_MINIMUM)
+        expect(contrastRatio(palette.muted, fill)).toBeGreaterThanOrEqual(TEXT_MINIMUM)
+        expect(contrastRatio(palette.accent, fill)).toBeGreaterThanOrEqual(TEXT_MINIMUM)
+        expect(contrastRatio(palette.danger, fill)).toBeGreaterThanOrEqual(TEXT_MINIMUM)
+      }
+    })
+
+    it('keeps every tick at 3:1 or more on both bubbles', () => {
+      for (const side of ['received', 'mine'] as const) {
+        const fill = fillOf(palette, side)
+        expect(contrastRatio(tick, fill)).toBeGreaterThanOrEqual(NON_TEXT_MINIMUM)
+        expect(contrastRatio(tickRead, fill)).toBeGreaterThanOrEqual(NON_TEXT_MINIMUM)
+        expect(contrastRatio(palette.danger, fill)).toBeGreaterThanOrEqual(NON_TEXT_MINIMUM)
+      }
+    })
+
+    it('tells the own bubble from the page by an accent edge of 3:1 or more', () => {
+      expect(contrastRatio(palette.accent, palette.surface)).toBeGreaterThanOrEqual(NON_TEXT_MINIMUM)
+      expect(contrastRatio(palette.accent, fillOf(palette, 'mine'))).toBeGreaterThanOrEqual(NON_TEXT_MINIMUM)
+    })
+
+    it('reads copyable tokens: text at 4.5:1 on the tint, the dotted underline at 3:1', () => {
+      for (const side of ['received', 'mine'] as const) {
+        const tinted = tint(palette.accent, 14, fillOf(palette, side))
+        expect(contrastRatio(palette.text, tinted)).toBeGreaterThanOrEqual(TEXT_MINIMUM)
+        expect(contrastRatio(palette.accent, fillOf(palette, side))).toBeGreaterThanOrEqual(NON_TEXT_MINIMUM)
+      }
+    })
+
+    it('lets text sit on the wallpaper dots and keeps the wallpaper itself subtle', () => {
+      const ink = palette.border
+      expect(contrastRatio(palette.text, ink)).toBeGreaterThanOrEqual(TEXT_MINIMUM)
+      expect(contrastRatio(palette.danger, palette.surface)).toBeGreaterThanOrEqual(TEXT_MINIMUM)
+      expect(contrastRatio(ink, palette.surface)).toBeLessThanOrEqual(WALLPAPER_SUBTLETY)
+    })
+
+    it('keeps the strip above the composer and the unread badge readable', () => {
+      expect(contrastRatio(palette.accent, palette.raised)).toBeGreaterThanOrEqual(TEXT_MINIMUM)
+      expect(contrastRatio(palette.accentContrast, palette.accent)).toBeGreaterThanOrEqual(TEXT_MINIMUM)
+    })
+  },
+)

package/src/participant/test-fixtures/conversations-list.golden.html

@@ -0,0 +1 @@
+<div class="cv-p-root"><div class="cv-p-root__screen"><div class="cv-p cv-p-inbox" aria-busy="true"><h2 class="cv-p-inbox__title">Conversations</h2><div class="cv-p-loading"><span class="cv-p-skeleton" aria-hidden="true"></span><span class="cv-p-skeleton" aria-hidden="true"></span><span class="cv-p-sr-only">Loading…</span></div></div></div></div>

package/src/participant/test-fixtures/conversations-selected.golden.html

@@ -0,0 +1 @@
+<div class="cv-p-root"><div class="cv-p-root__screen"><div class="cv-p cv-p-thread" aria-busy="true"></div></div></div>

package/src/participant/test-fixtures/thread-avatars-initials.golden.html

@@ -0,0 +1 @@
+<div class="cv-p cv-p-thread" aria-busy="false"><header class="cv-p-thread__header"><button type="button" class="cv-p-thread__back" aria-label="Back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true" focusable="false"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg></button><div class="cv-p-thread__heading"><h2 class="cv-p-thread__title"><span class="cv-p-thread__title-text">Invoice 4521</span></h2><div class="cv-p-thread__meta"><span class="cv-p-protocol cv-p-protocol--header"><span class="cv-p-protocol__code"><span class="cv-p-sr-only">Protocol </span>P-1</span><button type="button" class="cv-p-protocol__copy" aria-label="Copy protocol P-1"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span><div class="cv-p-sr-only" role="status" aria-live="polite"></div><span class="cv-p-channels"><span class="cv-p-sr-only">Channels in this conversation: </span><span class="cv-p-channel cv-p-channel--app"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg><span class="cv-p-sr-only">App, </span></span><span class="cv-p-channel cv-p-channel--whatsapp"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><span class="cv-p-sr-only">WhatsApp</span></span></span></div></div></header><div class="cv-p-thread__scroll" tabindex="-1"><button type="button" class="cv-p-thread__older">Load older messages</button><div class="cv-p-thread__messages"><div class="cv-p-day" role="separator" aria-label="Thu, 10/01"><time class="cv-p-day__label" dateTime="2026-10-01">Thu, 10/01</time></div><div class="cv-p-bubble cv-p-bubble--mine"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">*<strong>oi</strong>* <button type="button" class="cv-p-copyable cv-p-copyable--phone" aria-label="Copy 11 98888-7777">11 98888-7777</button> <button type="button" class="cv-p-copyable cv-p-copyable--email" aria-label="Copy a@b.com">a@b.com</button> <span class="cv-p-text__link-group"><a class="cv-p-text__link" href="https://x.com" rel="noopener noreferrer nofollow ugc" target="_blank">https://x.com<span class="cv-p-sr-only"> (opens in a new tab)</span></a><button type="button" class="cv-p-text__link-copy" aria-label="Copy https://x.com"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span></div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:00:00.000Z">12:00</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--sent"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L5 10.5L14.5 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Sent</span></span></span></div><div class="cv-p-bubble-row"><span class="cv-p-bubble-row__avatar"><span class="cv-p-avatar" aria-hidden="true">O</span></span><div class="cv-p-bubble"><span class="cv-p-bubble__author">Op</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:05:00.000Z">12:05</time></span></div></div><div class="cv-p-day" role="separator" aria-label="Fri, 10/02"><time class="cv-p-day__label" dateTime="2026-10-02">Fri, 10/02</time></div><div class="cv-p-bubble cv-p-bubble--mine"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-02T12:05:00.000Z">12:05</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--delivered"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L4.5 10L11 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 6.5L9.5 10L19 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Delivered</span></span></span></div><div class="cv-p-bubble cv-p-bubble--mine"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">W</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-02T12:06:00.000Z">12:06</time><button type="button" class="cv-p-bubble__retry"><span class="cv-status-ticks cv-status-ticks--failed"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert lucide-alert-triangle" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><span>Failed — tap to retry</span></button></span><span class="cv-p-bubble__actions"><button type="button" class="cv-p-bubble__action">Edit</button><button type="button" class="cv-p-bubble__action">Discard</button></span></div></div><div class="cv-p-thread__latest"><button type="button" class="cv-p-thread__latest-button" aria-label="Scroll to latest message"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"></path></svg><span class="cv-p-thread__latest-badge" aria-hidden="true">2</span></button></div></div><div class="cv-p-thread__live" role="status" aria-live="polite">New messages</div><form class="cv-p-composer"><div class="cv-p-quick" role="group" aria-label="Quick replies"><button type="button" class="cv-p-chip">T</button></div><div class="cv-p-composer__row"><input class="cv-p-composer__file-input" type="file" multiple="" hidden=""/><button type="button" class="cv-p-composer__attach" aria-label="Attach"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paperclip" aria-hidden="true" focusable="false"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"></path></svg></button><textarea class="cv-p-composer__input" aria-label="Message" placeholder="Write a message…" rows="1">abc</textarea><button type="submit" class="cv-p-button cv-p-button--primary cv-p-composer__send" aria-label="Send"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send" aria-hidden="true" focusable="false"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg></button></div></form></div>

package/src/participant/test-fixtures/thread-closed.golden.html

@@ -0,0 +1 @@
+<div class="cv-p cv-p-thread" aria-busy="false"><header class="cv-p-thread__header"><button type="button" class="cv-p-thread__back" aria-label="Back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true" focusable="false"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg></button><div class="cv-p-thread__heading"><h2 class="cv-p-thread__title"><span class="cv-p-thread__title-text">Invoice 4521</span></h2></div></header><div class="cv-p-thread__scroll" tabindex="-1"><button type="button" class="cv-p-thread__older">Load older messages</button><div class="cv-p-thread__messages"><div class="cv-p-day" role="separator" aria-label="Thu, 10/01"><time class="cv-p-day__label" dateTime="2026-10-01">Thu, 10/01</time></div><div class="cv-p-bubble cv-p-bubble--mine"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">*<strong>oi</strong>* <button type="button" class="cv-p-copyable cv-p-copyable--phone" aria-label="Copy 11 98888-7777">11 98888-7777</button> <button type="button" class="cv-p-copyable cv-p-copyable--email" aria-label="Copy a@b.com">a@b.com</button> <span class="cv-p-text__link-group"><a class="cv-p-text__link" href="https://x.com" rel="noopener noreferrer nofollow ugc" target="_blank">https://x.com<span class="cv-p-sr-only"> (opens in a new tab)</span></a><button type="button" class="cv-p-text__link-copy" aria-label="Copy https://x.com"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span></div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:00:00.000Z">12:00</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--sent"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L5 10.5L14.5 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Sent</span></span></span></div><div class="cv-p-bubble"><span class="cv-p-bubble__author">Op</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:05:00.000Z">12:05</time></span></div><div class="cv-p-day" role="separator" aria-label="Fri, 10/02"><time class="cv-p-day__label" dateTime="2026-10-02">Fri, 10/02</time></div><div class="cv-p-bubble cv-p-bubble--mine"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-02T12:05:00.000Z">12:05</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--delivered"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L4.5 10L11 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 6.5L9.5 10L19 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Delivered</span></span></span></div><div class="cv-p-bubble cv-p-bubble--mine"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">W</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-02T12:06:00.000Z">12:06</time><button type="button" class="cv-p-bubble__retry"><span class="cv-status-ticks cv-status-ticks--failed"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert lucide-alert-triangle" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><span>Failed — tap to retry</span></button></span><span class="cv-p-bubble__actions"><button type="button" class="cv-p-bubble__action">Edit</button><button type="button" class="cv-p-bubble__action">Discard</button></span></div></div><div class="cv-p-thread__latest"><button type="button" class="cv-p-thread__latest-button" aria-label="Scroll to latest message"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"></path></svg><span class="cv-p-thread__latest-badge" aria-hidden="true">2</span></button></div></div><div class="cv-p-thread__live" role="status" aria-live="polite">New messages</div><p class="cv-p-thread__closed">This conversation is closed</p></div>

package/src/participant/test-fixtures/thread-default.golden.html

@@ -0,0 +1 @@
+<div class="cv-p cv-p-thread" aria-busy="false"><header class="cv-p-thread__header"><button type="button" class="cv-p-thread__back" aria-label="Back"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left" aria-hidden="true" focusable="false"><path d="m12 19-7-7 7-7"></path><path d="M19 12H5"></path></svg></button><div class="cv-p-thread__heading"><h2 class="cv-p-thread__title"><span class="cv-p-thread__title-text">Invoice 4521</span></h2><div class="cv-p-thread__meta"><span class="cv-p-protocol cv-p-protocol--header"><span class="cv-p-protocol__code"><span class="cv-p-sr-only">Protocol </span>P-1</span><button type="button" class="cv-p-protocol__copy" aria-label="Copy protocol P-1"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span><div class="cv-p-sr-only" role="status" aria-live="polite"></div><span class="cv-p-channels"><span class="cv-p-sr-only">Channels in this conversation: </span><span class="cv-p-channel cv-p-channel--app"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-smartphone" aria-hidden="true"><rect width="14" height="20" x="5" y="2" rx="2" ry="2"></rect><path d="M12 18h.01"></path></svg><span class="cv-p-sr-only">App, </span></span><span class="cv-p-channel cv-p-channel--whatsapp"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle" aria-hidden="true"><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg><span class="cv-p-sr-only">WhatsApp</span></span></span></div></div></header><div class="cv-p-thread__scroll" tabindex="-1"><button type="button" class="cv-p-thread__older">Load older messages</button><div class="cv-p-thread__messages"><div class="cv-p-day" role="separator" aria-label="Thu, 10/01"><time class="cv-p-day__label" dateTime="2026-10-01">Thu, 10/01</time></div><div class="cv-p-bubble cv-p-bubble--mine"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">*<strong>oi</strong>* <button type="button" class="cv-p-copyable cv-p-copyable--phone" aria-label="Copy 11 98888-7777">11 98888-7777</button> <button type="button" class="cv-p-copyable cv-p-copyable--email" aria-label="Copy a@b.com">a@b.com</button> <span class="cv-p-text__link-group"><a class="cv-p-text__link" href="https://x.com" rel="noopener noreferrer nofollow ugc" target="_blank">https://x.com<span class="cv-p-sr-only"> (opens in a new tab)</span></a><button type="button" class="cv-p-text__link-copy" aria-label="Copy https://x.com"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></span></div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:00:00.000Z">12:00</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--sent"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L5 10.5L14.5 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Sent</span></span></span></div><div class="cv-p-bubble"><span class="cv-p-bubble__author">Op</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-01T12:05:00.000Z">12:05</time></span></div><div class="cv-p-day" role="separator" aria-label="Fri, 10/02"><time class="cv-p-day__label" dateTime="2026-10-02">Fri, 10/02</time></div><div class="cv-p-bubble cv-p-bubble--mine"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">Hello</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-02T12:05:00.000Z">12:05</time><span class="cv-p-bubble__status"><span class="cv-status-ticks cv-status-ticks--delivered"><svg viewBox="0 0 20 12" width="15" height="9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.5L4.5 10L11 2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M6 6.5L9.5 10L19 1" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></span><span class="cv-p-sr-only">Delivered</span></span></span></div><div class="cv-p-bubble cv-p-bubble--mine"><span class="cv-p-sr-only">Me</span><div class="cv-p-text">W</div><span class="cv-p-bubble__meta"><time class="cv-p-bubble__time" dateTime="2026-10-02T12:06:00.000Z">12:06</time><button type="button" class="cv-p-bubble__retry"><span class="cv-status-ticks cv-status-ticks--failed"><svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert lucide-alert-triangle" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path><path d="M12 9v4"></path><path d="M12 17h.01"></path></svg></span><span>Failed — tap to retry</span></button></span><span class="cv-p-bubble__actions"><button type="button" class="cv-p-bubble__action">Edit</button><button type="button" class="cv-p-bubble__action">Discard</button></span></div></div><div class="cv-p-thread__latest"><button type="button" class="cv-p-thread__latest-button" aria-label="Scroll to latest message"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true" focusable="false"><path d="m6 9 6 6 6-6"></path></svg><span class="cv-p-thread__latest-badge" aria-hidden="true">2</span></button></div></div><div class="cv-p-thread__live" role="status" aria-live="polite">New messages</div><form class="cv-p-composer"><div class="cv-p-quick" role="group" aria-label="Quick replies"><button type="button" class="cv-p-chip">T</button></div><div class="cv-p-composer__row"><input class="cv-p-composer__file-input" type="file" multiple="" hidden=""/><button type="button" class="cv-p-composer__attach" aria-label="Attach"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paperclip" aria-hidden="true" focusable="false"><path d="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"></path></svg></button><textarea class="cv-p-composer__input" aria-label="Message" placeholder="Write a message…" rows="1">abc</textarea><button type="submit" class="cv-p-button cv-p-button--primary cv-p-composer__send" aria-label="Send"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send" aria-hidden="true" focusable="false"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"></path><path d="m21.854 2.147-10.94 10.939"></path></svg></button></div></form></div>