@adatechnology/conversations-ui 0.6.1 → 0.8.0

package/src/participant/conversationThreadCss.test.ts

@@ -0,0 +1,116 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { describe, expect, it } from 'bun:test'
+
+import { declarationsIn, mediaBody, PARTICIPANT_CSS } from './participantCss.test-helper'
+
+const NEW_SOURCES = [
+  'ConversationThread.tsx',
+  'conversationThreadApi.ts',
+  'conversationThreadSummary.ts',
+  'participantPerspective.ts',
+  'useParticipantUnread.ts',
+  'useParticipantThreadController.ts',
+].map((file) => ({ file, source: readFileSync(join(import.meta.dir, file), 'utf8') }))
+
+describe('header additions', () => {
+  it('puts the counterpart line in one muted, ellipsized line', () => {
+    const rule = declarationsIn('.cv-p-thread__counterpart')
+    expect(rule.get('color')).toBe('var(--cv-p-i-text-muted)')
+    expect(rule.get('white-space')).toBe('nowrap')
+    expect(rule.get('text-overflow')).toBe('ellipsis')
+  })
+
+  it('keeps the host actions at the end of the bar, never wider than the bar', () => {
+    const rule = declarationsIn('.cv-p-thread__actions')
+    expect(rule.get('flex')).toBe('0 0 auto')
+    expect(rule.get('margin-inline-start')).toBe('auto')
+    expect(rule.get('max-width')).toBe('100%')
+  })
+
+  it('lets the bar wrap and gives the title a floor only when there are host actions', () => {
+    const withActions = '.cv-p-thread__header:has(.cv-p-thread__actions)'
+    expect(declarationsIn(withActions).get('flex-wrap')).toBe('wrap')
+    expect(declarationsIn(`${withActions} .cv-p-thread__heading`).get('min-width')).toBe('6rem')
+    expect(declarationsIn('.cv-p-thread__header').has('flex-wrap')).toBe(false)
+    expect(declarationsIn('.cv-p-thread__heading').get('min-width')).toBe('0')
+  })
+})
+
+describe('ticks', () => {
+  it('take their color from package tokens that a host can override, with a fallback', () => {
+    const root = declarationsIn('.cv-p')
+    expect(root.get('--cv-p-i-tick')).toBe('var(--cv-p-tick, var(--cv-p-i-text-muted))')
+    expect(root.get('--cv-p-i-tick-read')).toMatch(/^var\(--cv-p-tick-read, #[0-9a-f]{6}\)$/)
+    expect(declarationsIn('.dark .cv-p').get('--cv-p-i-tick-read')).toMatch(/^var\(--cv-p-tick-read, #[0-9a-f]{6}\)$/)
+  })
+
+  it('override the shared tick colors only inside the participant bubble', () => {
+    expect(declarationsIn('.cv-p-bubble .cv-status-ticks--sent').get('color')).toBe('var(--cv-p-i-tick)')
+    expect(declarationsIn('.cv-p-bubble .cv-status-ticks--delivered').get('color')).toBe('var(--cv-p-i-tick)')
+    expect(declarationsIn('.cv-p-bubble .cv-status-ticks--read').get('color')).toBe('var(--cv-p-i-tick-read)')
+    expect(declarationsIn('.cv-p-bubble .cv-status-ticks--failed').get('color')).toBe('var(--cv-p-i-danger)')
+    expect(declarationsIn('.cv-status-ticks--read').get('color')).toBe('rgb(14 165 233)')
+  })
+
+  it('give way to the system colors under forced-colors', () => {
+    const forced = mediaBody('(forced-colors: active)') ?? ''
+    expect(forced).toContain('.cv-p-bubble .cv-status-ticks')
+    expect(declarationsIn('.cv-p-bubble .cv-status-ticks', forced).get('color')).toBe('CanvasText')
+  })
+})
+
+describe('wallpaper and the strips around it', () => {
+  it('gives the load error a solid panel so no text depends on the dots', () => {
+    expect(declarationsIn('.cv-p-thread__scroll > .cv-p-error').get('background')).toBe('var(--cv-p-i-surface)')
+  })
+
+  it('paints the live strip like the composer it sits on', () => {
+    expect(declarationsIn('.cv-p-thread__live').get('background')).toBe('var(--cv-p-i-surface-raised)')
+  })
+
+  it('keeps the wallpaper off under forced-colors', () => {
+    expect(
+      declarationsIn('.cv-p-thread__scroll', mediaBody('(forced-colors: active)') ?? '').get('background-image'),
+    ).toBe('none')
+  })
+})
+
+describe('motion', () => {
+  it('adds no transition or animation outside the no-preference block', () => {
+    const rules = declarationsIn('.cv-p-thread__actions')
+    const counterpart = declarationsIn('.cv-p-thread__counterpart')
+    for (const declarations of [rules, counterpart]) {
+      expect(
+        [...declarations.keys()].some(
+          (property) => property.startsWith('transition') || property.startsWith('animation'),
+        ),
+      ).toBe(false)
+    }
+    expect(mediaBody('(prefers-reduced-motion: no-preference)')).toBeDefined()
+  })
+})
+
+describe('new sources', () => {
+  it('use no Tailwind utilities and none of the vocabulary of a specific product', () => {
+    for (const { file, source } of NEW_SOURCES) {
+      expect(source, file).not.toMatch(/className="[^"]*\b(flex|grid|p-\d|m-\d|text-(sm|xs|lg)|bg-\w+)\b/)
+      expect(source, file).not.toMatch(
+        /\b(nota|ocorr\w+|motorista|viagem|carga|entrega|frete|cte|nf-?e|transport\w*|trip|driver)\b/i,
+      )
+    }
+  })
+
+  it('stay under 200 lines and use no any', () => {
+    for (const { file, source } of NEW_SOURCES) {
+      expect(source.split('\n').length, file).toBeLessThanOrEqual(200)
+      expect(source, file).not.toMatch(/:\s*any\b|\bas any\b|<any>/)
+    }
+  })
+
+  it('declare the new tokens in the public theming comment', () => {
+    const raw = readFileSync(join(import.meta.dir, '..', 'styles.css'), 'utf8')
+    expect(raw).toContain('--cv-p-tick, --cv-p-tick-read')
+    expect(PARTICIPANT_CSS).toContain('--cv-p-i-tick-read')
+  })
+})

package/src/participant/conversationThreadSummary.ts

@@ -0,0 +1,34 @@
+import type {
+  ParticipantConversationStatus,
+  ParticipantConversationSummary,
+  ParticipantSubjectRef,
+} from '@adatechnology/conversation-contracts'
+
+export type BuildThreadSummaryParams = {
+  readonly subject: ParticipantSubjectRef
+  readonly title: string
+  readonly protocol?: string
+  readonly channels?: ParticipantConversationSummary['channels']
+  readonly status?: ParticipantConversationStatus
+}
+
+/** The header reads a summary; a single conversation has no list to take it from, so the host's props build it. */
+export function buildThreadSummary({
+  subject,
+  title,
+  protocol,
+  channels,
+  status,
+}: BuildThreadSummaryParams): ParticipantConversationSummary {
+  return {
+    subjectType: subject.subjectType,
+    subjectId: subject.subjectId,
+    subjectLabel: title,
+    lastMessageAt: null,
+    unreadCount: 0,
+    awaitingParticipant: false,
+    status: status ?? 'open',
+    ...(protocol ? { protocol } : {}),
+    ...(channels ? { channels } : {}),
+  }
+}

package/src/participant/index.ts

@@ -1,4 +1,8 @@
 export { ParticipantConversations, type ParticipantConversationsProps } from './ParticipantConversations'
+export { ConversationThread, type ConversationThreadProps } from './ConversationThread'
+export type { ConversationThreadApi } from './conversationThreadApi'
+export type { ParticipantPerspective } from './participantPerspective'
+export type { ParticipantAuthorAvatarRenderer } from './ParticipantAuthorAvatar'
 export { groupParticipantConversations } from './participantGrouping'
 export { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, type ParticipantConversationsLabels } from './participantLabels'
 export type {

package/src/participant/participantAutoGrow.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'bun:test'
+
+import { fitTextareaHeight, type AutoGrowTarget } from './participantAutoGrow'
+
+describe('fitTextareaHeight', () => {
+  it('measures after resetting, so the field can also shrink', () => {
+    const heights: string[] = []
+    const target: AutoGrowTarget = {
+      style: {
+        get height() {
+          return heights.at(-1) ?? ''
+        },
+        set height(value: string) {
+          heights.push(value)
+        },
+      },
+      scrollHeight: 96,
+      offsetHeight: 96,
+      clientHeight: 96,
+    }
+    fitTextareaHeight(target)
+    expect(heights).toEqual(['auto', '96px'])
+  })
+
+  it('adds the border to the content height, so a border-box field does not overflow', () => {
+    const heights: string[] = []
+    const target: AutoGrowTarget = {
+      style: {
+        get height() {
+          return heights.at(-1) ?? ''
+        },
+        set height(value: string) {
+          heights.push(value)
+        },
+      },
+      scrollHeight: 61,
+      offsetHeight: 63,
+      clientHeight: 61,
+    }
+    fitTextareaHeight(target)
+    expect(heights.at(-1)).toBe('63px')
+  })
+})

package/src/participant/participantAutoGrow.ts

@@ -0,0 +1,12 @@
+export type AutoGrowTarget = {
+  readonly style: { height: string }
+  readonly scrollHeight: number
+  readonly offsetHeight: number
+  readonly clientHeight: number
+}
+
+/** Fits the field to its content plus its border (border-box), so no phantom scrollbar; the CSS max-height caps it. */
+export function fitTextareaHeight(target: AutoGrowTarget): void {
+  target.style.height = 'auto'
+  target.style.height = `${target.scrollHeight + (target.offsetHeight - target.clientHeight)}px`
+}

package/src/participant/participantAvatar.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'bun:test'
+
+import { authorInitials, shouldShowAvatar } from './participantAvatar'
+
+describe('authorInitials', () => {
+  it('takes the first letters of the first and last names', () => {
+    expect(authorInitials('Ana Souza')).toBe('AS')
+    expect(authorInitials('maria ana souza lima')).toBe('ML')
+  })
+
+  it('uses a single initial for a single name', () => {
+    expect(authorInitials('Ana')).toBe('A')
+  })
+
+  it('ignores prepositions and punctuation', () => {
+    expect(authorInitials('Maria da Silva')).toBe('MS')
+    expect(authorInitials('João de Souza e Silva')).toBe('JS')
+    expect(authorInitials('  (Ana)   -  Souza. ')).toBe('AS')
+  })
+
+  it('keeps an accented initial and upper-cases it', () => {
+    expect(authorInitials('élida ávila')).toBe('ÉÁ')
+  })
+
+  it('keeps the first word even when it looks like a particle', () => {
+    expect(authorInitials('Le Minh')).toBe('LM')
+    expect(authorInitials('Van Morrison')).toBe('VM')
+  })
+
+  it('composes accents before taking the initial', () => {
+    expect(authorInitials('e\u0301lida')).toBe('\u00c9')
+  })
+
+  it('falls back to the first word when only prepositions remain', () => {
+    expect(authorInitials('de da')).toBe('D')
+  })
+
+  it('returns undefined for missing, empty, question-mark or emoji-only names', () => {
+    expect(authorInitials(null)).toBeUndefined()
+    expect(authorInitials(undefined)).toBeUndefined()
+    expect(authorInitials('')).toBeUndefined()
+    expect(authorInitials('   ')).toBeUndefined()
+    expect(authorInitials('?')).toBeUndefined()
+    expect(authorInitials('😀')).toBeUndefined()
+  })
+
+  it('ignores a trailing emoji', () => {
+    expect(authorInitials('Ana 😀')).toBe('A')
+  })
+})
+
+describe('shouldShowAvatar', () => {
+  it('shows it on the first message of a sequence', () => {
+    expect(shouldShowAvatar({ previousAuthor: undefined, author: 'Ana', isMine: false })).toBe(true)
+  })
+
+  it('hides it while the same author keeps talking', () => {
+    expect(shouldShowAvatar({ previousAuthor: 'Ana', author: 'Ana', isMine: false })).toBe(false)
+  })
+
+  it('shows it again when the author changes', () => {
+    expect(shouldShowAvatar({ previousAuthor: 'Ana', author: 'Bruno', isMine: false })).toBe(true)
+  })
+
+  it('treats consecutive unnamed authors as one sequence', () => {
+    expect(shouldShowAvatar({ previousAuthor: null, author: null, isMine: false })).toBe(false)
+    expect(shouldShowAvatar({ previousAuthor: 'Ana', author: null, isMine: false })).toBe(true)
+  })
+
+  it('never shows it on an own message', () => {
+    expect(shouldShowAvatar({ previousAuthor: undefined, author: null, isMine: true })).toBe(false)
+    expect(shouldShowAvatar({ previousAuthor: 'Ana', author: 'Ana', isMine: true })).toBe(false)
+  })
+})

package/src/participant/participantAvatar.ts

@@ -0,0 +1,48 @@
+const NAME_PARTICLES = new Set([
+  'a',
+  'e',
+  'o',
+  'da',
+  'das',
+  'de',
+  'del',
+  'di',
+  'do',
+  'dos',
+  'du',
+  'la',
+  'le',
+  'van',
+  'von',
+])
+
+export type ParticipantAvatarAuthor = string | null
+
+export type ShouldShowAvatarParams = {
+  /** Author of the previous message; undefined at the start of the list or right after an own message. */
+  readonly previousAuthor: ParticipantAvatarAuthor | undefined
+  readonly author: ParticipantAvatarAuthor
+  readonly isMine: boolean
+}
+
+function lettersOf(word: string): string {
+  return word.replace(/[^\p{L}\p{M}]/gu, '')
+}
+
+function firstLetter(word: string): string {
+  return (Array.from(word.normalize('NFC'))[0] ?? '').toUpperCase()
+}
+
+/** Up to two initials; undefined when the name has no letters, so the caller draws the neutral icon. */
+export function authorInitials(name: string | null | undefined): string | undefined {
+  const [first, ...rest] = (name ?? '').split(/\s+/).map(lettersOf).filter(Boolean)
+  if (first === undefined) return undefined
+  const last = rest.filter((word) => !NAME_PARTICLES.has(word.toLowerCase())).pop()
+  return `${firstLetter(first)}${last === undefined ? '' : firstLetter(last)}`
+}
+
+export function shouldShowAvatar({ previousAuthor, author, isMine }: ShouldShowAvatarParams): boolean {
+  if (isMine) return false
+  if (previousAuthor === undefined) return true
+  return previousAuthor !== author
+}

package/src/participant/participantBubbleTail.test.tsx

@@ -0,0 +1,107 @@
+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 { buildMessage, findForeignClassTokens, findUtilityClassTokens } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantMessageBubble, type ParticipantMessageBubbleProps } from './ParticipantMessageBubble'
+
+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 render(direction: 'inbound' | 'outbound', extra: Partial<ParticipantMessageBubbleProps> = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantMessageBubble
+      item={{ kind: 'server', message: buildMessage({ id: 'm1', direction }) }}
+      labels={DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS}
+      confirmsRead
+      resolveAttachmentUrl={async () => 'https://files.example/a.png'}
+      {...extra}
+    />,
+  )
+}
+
+describe('bubble tail CSS', () => {
+  it('draws two decorative triangles that never catch touches', () => {
+    for (const pseudo of ['::before', '::after']) {
+      const tail = declarationsOf(`.cv-p-bubble${pseudo}`)
+      expect(tail.get('content')).toBe("''")
+      expect(tail.get('pointer-events')).toBe('none')
+      expect(tail.get('position')).toBe('absolute')
+      expect(tail.get('border-style')).toBe('solid')
+    }
+    expect(declarationsOf('.cv-p-bubble').get('position')).toBe('relative')
+  })
+
+  it('puts the received tail on the left, edge colour under fill colour', () => {
+    expect(declarationsOf('.cv-p-bubble::before').get('left')).toBe('-10px')
+    expect(declarationsOf('.cv-p-bubble::after').get('left')).toBe('-8px')
+    expect(declarationsOf('.cv-p-bubble::before').get('border-bottom-color')).toBe('var(--cv-p-tail-edge)')
+    expect(declarationsOf('.cv-p-bubble::after').get('border-bottom-color')).toBe('var(--cv-p-tail-fill)')
+    expect(declarationsOf('.cv-p-bubble').get('border-bottom-left-radius')).toBe('0')
+  })
+
+  it('mirrors the own tail to the right with the own tokens', () => {
+    expect(declarationsOf('.cv-p-bubble--mine::before').get('right')).toBe('-10px')
+    expect(declarationsOf('.cv-p-bubble--mine::after').get('right')).toBe('-8px')
+    const mine = declarationsOf('.cv-p-bubble--mine')
+    expect(mine.get('border-bottom-right-radius')).toBe('0')
+    expect(mine.get('--cv-p-tail-edge')).toBe('var(--cv-p-i-accent)')
+    expect(mine.get('--cv-p-tail-fill')).toBe('var(--cv-p-i-highlight)')
+    expect(declarationsOf('.cv-p-bubble').get('--cv-p-tail-edge')).toBe('var(--cv-p-i-border)')
+    expect(declarationsOf('.cv-p-bubble').get('--cv-p-tail-fill')).toBe('var(--cv-p-i-surface-raised)')
+  })
+
+  it('turns the tail off and restores the corner with --no-tail', () => {
+    expect(declarationsOf('.cv-p-bubble--no-tail::before').get('content')).toBe('none')
+    expect(declarationsOf('.cv-p-bubble--no-tail::after').get('content')).toBe('none')
+    expect(declarationsOf('.cv-p-bubble--no-tail').get('border-radius')).toBe('var(--cv-p-i-radius)')
+  })
+
+  it('uses no fixed colour for the tail', () => {
+    const tailRules = splitBlocks(CSS).filter(({ prelude }) => /cv-p-bubble[^,{]*::(before|after)/.test(prelude))
+    expect(tailRules.length).toBeGreaterThan(0)
+    for (const { body } of tailRules) expect(body ?? '').not.toMatch(/#[0-9a-f]{3,8}|rgba?\(/i)
+  })
+})
+
+describe('bubble tail markup', () => {
+  it('keeps the default markup free of any new class', () => {
+    expect(render('outbound')).toContain('<div class="cv-p-bubble">')
+    expect(render('inbound')).toContain('<div class="cv-p-bubble cv-p-bubble--mine">')
+  })
+
+  it('adds --no-tail only when tail is false, on both sides', () => {
+    expect(render('outbound', { tail: false })).toContain('class="cv-p-bubble cv-p-bubble--no-tail"')
+    expect(render('inbound', { tail: false })).toContain('class="cv-p-bubble cv-p-bubble--mine cv-p-bubble--no-tail"')
+    expect(render('outbound', { tail: true })).not.toContain('--no-tail')
+  })
+
+  it('keeps the content and the avatar row unchanged by the tail flag', () => {
+    const withAvatar = render('outbound', { avatar: <b>A</b>, tail: false })
+    expect(withAvatar).toContain('cv-p-bubble-row')
+    expect(withAvatar).toContain('cv-p-bubble--no-tail')
+    expect(render('outbound', { tail: false })).toContain('cv-p-bubble__meta')
+  })
+
+  it('stays inside the participant namespace', () => {
+    const markup = render('outbound', { tail: false })
+    expect(findForeignClassTokens(markup)).toEqual([])
+    expect(findUtilityClassTokens(markup)).toEqual([])
+  })
+})

package/src/participant/participantChatDesign.test.tsx

@@ -0,0 +1,198 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { declarationsIn, mediaBody } from './participantCss.test-helper'
+import {
+  buildConversation,
+  buildMessage,
+  findForeignClassTokens,
+  findUtilityClassTokens,
+} from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { ParticipantComposer } from './ParticipantComposer'
+import { ParticipantThread } from './ParticipantThread'
+
+const LABELS = DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS
+
+function renderThread(): string {
+  return renderToStaticMarkup(
+    <ParticipantThread
+      conversation={buildConversation({ subjectId: '1' })}
+      items={[
+        { kind: 'server', message: buildMessage({ id: 'a', text: 'Hello', createdAt: '2026-10-01T10:00:00.000Z' }) },
+        { kind: 'server', message: buildMessage({ id: 'b', text: 'Again', createdAt: '2026-10-02T10:00:00.000Z' }) },
+      ]}
+      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}
+    />,
+  )
+}
+
+function renderComposer(overrides: { value?: string } = {}): string {
+  return renderToStaticMarkup(
+    <ParticipantComposer
+      value={overrides.value ?? ''}
+      onChange={() => undefined}
+      files={[]}
+      onFilesChange={() => undefined}
+      onSend={() => undefined}
+      labels={LABELS}
+      quickReplies={[{ id: '1', title: 'Hi', shortcut: 'hi', body: 'Hi' }]}
+    />,
+  )
+}
+
+describe('wallpaper', () => {
+  it('is drawn on the message scroller from the token, defaulting to a CSS-only pattern', () => {
+    const scroller = declarationsIn('.cv-p-thread__scroll')
+    expect(scroller.get('background-image')).toBe('var(--cv-p-wallpaper, var(--cv-p-i-wallpaper))')
+    const root = declarationsIn('.cv-p')
+    expect(root.get('--cv-p-i-wallpaper')).toContain('radial-gradient')
+    expect(root.get('--cv-p-i-wallpaper')).not.toContain('url(')
+    expect(root.get('--cv-p-i-wallpaper-ink')).toBe('var(--cv-p-i-border)')
+  })
+
+  it('is switched off in forced colors and in print', () => {
+    for (const query of ['(forced-colors: active)', 'print']) {
+      expect(declarationsIn('.cv-p-thread__scroll', mediaBody(query) ?? '').get('background-image')).toBe('none')
+    }
+  })
+
+  it('uses logical properties for the text, the meta and the title button, so RTL mirrors', () => {
+    expect(declarationsIn('.cv-p-bubble > .cv-p-text').get('margin-inline-end')).toBe('auto')
+    expect(declarationsIn('.cv-p-thread__title-button').get('text-align')).toBe('start')
+  })
+
+  it('restores the bubble corner radius in print, where the tail is off', () => {
+    const rule = declarationsIn('.cv-p-bubble', mediaBody('print') ?? '')
+    expect(rule.get('border-radius')).toBe('var(--cv-p-i-radius)')
+    expect(declarationsIn('.cv-p-bubble--mine', mediaBody('print') ?? '').get('border-radius')).toBe(
+      'var(--cv-p-i-radius)',
+    )
+  })
+
+  it('never reaches the composer, the header or the bubbles', () => {
+    for (const selector of ['.cv-p-composer', '.cv-p-thread__header', '.cv-p-bubble']) {
+      expect(declarationsIn(selector).has('background-image')).toBe(false)
+    }
+  })
+})
+
+describe('day pill', () => {
+  it('is a separator holding a time with a machine date', () => {
+    expect(renderThread()).toMatch(
+      /<div class="cv-p-day" role="separator" aria-label="[^"]+"><time class="cv-p-day__label" dateTime="2026-10-01">/,
+    )
+  })
+
+  it('is a centred raised pill with a border and the radius token', () => {
+    const day = declarationsIn('.cv-p-day')
+    expect(day.get('align-self')).toBe('center')
+    expect(day.get('background')).toBe('var(--cv-p-i-surface-raised)')
+    expect(day.get('border')).toBe('1px solid var(--cv-p-i-border)')
+    expect(day.get('border-radius')).toBe('var(--cv-p-i-radius)')
+    expect(day.get('font')).toContain('monospace')
+  })
+})
+
+describe('time and ticks at the foot of the bubble', () => {
+  it('keeps time and status together in the last element of the bubble', () => {
+    const markup = renderToStaticMarkup(
+      <ParticipantThread
+        conversation={buildConversation({ subjectId: '1' })}
+        items={[{ kind: 'server', message: buildMessage({ id: 'a', direction: 'inbound', text: 'Hello' }) }]}
+        hasMore={false}
+        labels={LABELS}
+        resolveAttachmentUrl={async () => ''}
+        draft={{ value: '', onChange: () => undefined, files: [], onFilesChange: () => undefined }}
+        onSend={() => undefined}
+        status="ready"
+        refresh={() => undefined}
+        scroll={{ ref: { current: null }, onScroll: () => undefined }}
+        newMessagesCount={0}
+        isSending={false}
+      />,
+    )
+    const meta = markup.slice(
+      markup.indexOf('cv-p-bubble__meta'),
+      markup.indexOf('</span></div>', markup.indexOf('cv-p-bubble__meta')),
+    )
+    expect(meta).toContain('<time')
+    expect(meta).toContain('cv-p-bubble__status')
+    expect(meta.indexOf('<time')).toBeLessThan(meta.indexOf('cv-p-bubble__status'))
+  })
+
+  it('lets the text and the meta share a line, and the meta fall to the right when it does not fit', () => {
+    const bubble = declarationsIn('.cv-p-bubble')
+    expect(bubble.get('display')).toBe('flex')
+    expect(bubble.get('flex-wrap')).toBe('wrap')
+    expect(bubble.get('align-items')).toBe('flex-end')
+    expect(bubble.get('max-width')).toBe('85%')
+    const meta = declarationsIn('.cv-p-bubble__meta')
+    expect(meta.get('margin-inline-start')).toBe('auto')
+    expect(meta.get('flex')).toBe('0 0 auto')
+    expect(declarationsIn('.cv-p-bubble > .cv-p-text').get('min-width')).toBe('0')
+  })
+
+  it('keeps author, attachments and failed actions on their own full-width row', () => {
+    expect(declarationsIn('.cv-p-bubble__author').get('flex')).toBe('1 0 100%')
+    expect(declarationsIn('.cv-p-bubble > .cv-p-attachment').get('flex')).toBe('1 0 100%')
+  })
+})
+
+describe('composer', () => {
+  it('draws attach and send as lucide icons with accessible names and no text glyphs', () => {
+    const markup = renderComposer({ value: 'x' })
+    const attach = markup.slice(
+      markup.indexOf('cv-p-composer__attach'),
+      markup.indexOf('</button>', markup.indexOf('cv-p-composer__attach')),
+    )
+    expect(attach).toContain('aria-label="Attach"')
+    expect(attach).toContain('<svg')
+    const send = markup.slice(
+      markup.indexOf('type="submit"'),
+      markup.indexOf('</button>', markup.indexOf('type="submit"')),
+    )
+    expect(send).toContain('aria-label="Send"')
+    expect(send).toContain('<svg')
+    for (const glyph of ['＋', '➤', '+']) expect(markup).not.toContain(glyph)
+    expect(findUtilityClassTokens(markup)).toEqual([])
+    expect(findForeignClassTokens(markup)).toEqual([])
+  })
+
+  it('orders attach, field and send in one row, with the chips above it', () => {
+    const markup = renderComposer()
+    const order = ['cv-p-quick', 'cv-p-composer__row', 'cv-p-composer__attach', '<textarea', 'type="submit"']
+    const positions = order.map((token) => markup.indexOf(token))
+    expect(positions).toEqual([...positions].sort((a, b) => a - b))
+    expect(positions.every((position) => position >= 0)).toBe(true)
+  })
+
+  it('aligns the row by the base, with a field that grows up to four lines and keeps 44px', () => {
+    expect(declarationsIn('.cv-p-composer__row').get('align-items')).toBe('flex-end')
+    const input = declarationsIn('.cv-p-composer__input')
+    expect(input.get('min-height')).toBe('var(--cv-p-i-touch)')
+    expect(input.get('max-height')).toBe('6.5rem')
+    expect(input.get('overflow-y')).toBe('auto')
+    expect(input.get('border-radius')).toBe('var(--cv-p-i-radius)')
+    for (const selector of ['.cv-p-composer__attach']) {
+      expect(declarationsIn(selector).get('min-width')).toBe('var(--cv-p-i-touch)')
+      expect(declarationsIn(selector).get('min-height')).toBe('var(--cv-p-i-touch)')
+    }
+  })
+
+  it('sits on a raised bar with a top border; send is the primary button', () => {
+    const bar = declarationsIn('.cv-p-composer')
+    expect(bar.get('background')).toBe('var(--cv-p-i-surface-raised)')
+    expect(bar.get('border-top')).toBe('1px solid var(--cv-p-i-border)')
+    expect(renderComposer()).toContain('class="cv-p-button cv-p-button--primary cv-p-composer__send"')
+  })
+})