@adatechnology/conversations-ui 0.9.0 → 0.11.0

package/src/participant/participantAudioFormat.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from 'bun:test'
+
+import {
+  PLAYBACK_RATES,
+  formatAudioClock,
+  formatPlaybackRate,
+  formatPositionValueText,
+  nextRateIndex,
+  resolveMediaDurationSeconds,
+  resolveSeekKeyTarget,
+  resolveSeekMax,
+  resolveServerDurationSeconds,
+} from './participantAudioFormat'
+
+describe('formatAudioClock', () => {
+  it('formats m:ss and pads the seconds', () => {
+    expect(formatAudioClock(0)).toBe('0:00')
+    expect(formatAudioClock(12.9)).toBe('0:12')
+    expect(formatAudioClock(65)).toBe('1:05')
+    expect(formatAudioClock(300)).toBe('5:00')
+  })
+
+  it('shows a placeholder when the duration is unknown or infinite', () => {
+    expect(formatAudioClock(undefined)).toBe('--:--')
+    expect(formatAudioClock(Number.POSITIVE_INFINITY)).toBe('--:--')
+    expect(formatAudioClock(Number.NaN)).toBe('--:--')
+  })
+})
+
+describe('playback rate', () => {
+  it('cycles 1x, 1.5x, 2x and back', () => {
+    expect(PLAYBACK_RATES).toEqual([1, 1.5, 2])
+    expect(nextRateIndex(0)).toBe(1)
+    expect(nextRateIndex(1)).toBe(2)
+    expect(nextRateIndex(2)).toBe(0)
+  })
+
+  it('names the rate with the multiplication sign', () => {
+    expect(formatPlaybackRate(1.5)).toBe('1.5×')
+    expect(formatPlaybackRate(2)).toBe('2×')
+  })
+})
+
+describe('durations', () => {
+  it('takes the server duration in seconds only when positive and finite', () => {
+    expect(resolveServerDurationSeconds(65_000)).toBe(65)
+    expect(resolveServerDurationSeconds(undefined)).toBeUndefined()
+    expect(resolveServerDurationSeconds(0)).toBeUndefined()
+  })
+
+  it('ignores an infinite or NaN media duration (Chromium WebM without a header)', () => {
+    expect(resolveMediaDurationSeconds(42)).toBe(42)
+    expect(resolveMediaDurationSeconds(Number.POSITIVE_INFINITY)).toBeUndefined()
+    expect(resolveMediaDurationSeconds(Number.NaN)).toBeUndefined()
+  })
+})
+
+describe('keyboard step', () => {
+  it('moves 5 seconds with the arrows and clamps at the start and the end', () => {
+    expect(resolveSeekKeyTarget({ key: 'ArrowRight', position: 10, duration: 65 })).toBe(15)
+    expect(resolveSeekKeyTarget({ key: 'ArrowUp', position: 10, duration: 65 })).toBe(15)
+    expect(resolveSeekKeyTarget({ key: 'ArrowLeft', position: 10, duration: 65 })).toBe(5)
+    expect(resolveSeekKeyTarget({ key: 'ArrowDown', position: 2, duration: 65 })).toBe(0)
+    expect(resolveSeekKeyTarget({ key: 'ArrowRight', position: 63, duration: 65 })).toBe(65)
+  })
+
+  it('jumps to the start with Home and to the end with End', () => {
+    expect(resolveSeekKeyTarget({ key: 'Home', position: 30, duration: 65 })).toBe(0)
+    expect(resolveSeekKeyTarget({ key: 'End', position: 30, duration: 65 })).toBe(65)
+  })
+
+  it('does not know the end without a finite duration and leaves other keys alone', () => {
+    expect(resolveSeekKeyTarget({ key: 'End', position: 30, duration: undefined })).toBeUndefined()
+    expect(resolveSeekKeyTarget({ key: 'ArrowRight', position: 30, duration: undefined })).toBe(35)
+    expect(resolveSeekKeyTarget({ key: 'a', position: 30, duration: 65 })).toBeUndefined()
+  })
+})
+
+describe('range bounds and value text', () => {
+  it('uses the rounded-up duration as max when known', () => {
+    expect(resolveSeekMax({ duration: 64.2, maxSeen: 3, position: 3 })).toBe(65)
+  })
+
+  it('uses the largest position seen as a provisional max when the duration is unknown', () => {
+    expect(resolveSeekMax({ duration: undefined, maxSeen: 12, position: 12 })).toBe(12)
+    expect(resolveSeekMax({ duration: undefined, maxSeen: 0, position: 0 })).toBe(0)
+  })
+
+  it('writes position and duration, or only the position without a duration', () => {
+    expect(formatPositionValueText({ template: '{position} of {duration}', position: 12, duration: 65 })).toBe('0:12 of 1:05')
+    expect(formatPositionValueText({ template: '{position} of {duration}', position: 12, duration: undefined })).toBe('0:12')
+  })
+})

package/src/participant/participantAudioFormat.ts

@@ -0,0 +1,72 @@
+export const PLAYBACK_RATES = [1, 1.5, 2] as const
+export const SEEK_STEP_SECONDS = 5
+
+const UNKNOWN_CLOCK = '--:--'
+
+export function formatAudioClock(seconds: number | undefined): string {
+  if (seconds === undefined || !Number.isFinite(seconds) || seconds < 0) return UNKNOWN_CLOCK
+  const wholeSeconds = Math.floor(seconds)
+  const remainder = String(wholeSeconds % 60).padStart(2, '0')
+  return `${Math.floor(wholeSeconds / 60)}:${remainder}`
+}
+
+export function nextRateIndex(index: number): number {
+  return (index + 1) % PLAYBACK_RATES.length
+}
+
+export function formatPlaybackRate(rate: number): string {
+  return `${rate}×`
+}
+
+export function resolveServerDurationSeconds(durationMs: number | undefined): number | undefined {
+  if (durationMs === undefined || !Number.isFinite(durationMs) || durationMs <= 0) return undefined
+  return durationMs / 1000
+}
+
+export function resolveMediaDurationSeconds(duration: number): number | undefined {
+  return Number.isFinite(duration) && duration > 0 ? duration : undefined
+}
+
+export type SeekKeyParams = {
+  readonly key: string
+  readonly position: number
+  readonly duration: number | undefined
+}
+
+function clampPosition(position: number, duration: number | undefined): number {
+  const floored = Math.max(0, position)
+  return duration === undefined ? floored : Math.min(duration, floored)
+}
+
+/** The position a key moves the bar to, or undefined when the key is not ours to handle. */
+export function resolveSeekKeyTarget({ key, position, duration }: SeekKeyParams): number | undefined {
+  if (key === 'ArrowRight' || key === 'ArrowUp') return clampPosition(position + SEEK_STEP_SECONDS, duration)
+  if (key === 'ArrowLeft' || key === 'ArrowDown') return clampPosition(position - SEEK_STEP_SECONDS, duration)
+  if (key === 'Home') return 0
+  if (key === 'End') return duration
+  return undefined
+}
+
+export type SeekMaxParams = {
+  readonly duration: number | undefined
+  readonly maxSeen: number
+  readonly position: number
+}
+
+/** Known duration wins; otherwise the largest position seen so far keeps the bar coherent while it grows. */
+export function resolveSeekMax({ duration, maxSeen, position }: SeekMaxParams): number {
+  if (duration !== undefined) return Math.ceil(duration)
+  return Math.ceil(Math.max(maxSeen, position))
+}
+
+export type PositionValueTextParams = {
+  readonly template: string
+  readonly position: number
+  readonly duration: number | undefined
+}
+
+export function formatPositionValueText({ template, position, duration }: PositionValueTextParams): string {
+  const positionText = formatAudioClock(position)
+  if (duration === undefined) return positionText
+  return template.replace('{position}', positionText).replace('{duration}', formatAudioClock(duration))
+}

package/src/participant/participantAudioGolden.test.tsx

@@ -0,0 +1,168 @@
+/**
+ * Goldens of the participant thread (264, contract.md §2.4, §3): the empty composer must not change, and the
+ * audio player and transcription blocks are pinned byte for byte. The composer goldens live in
+ * `participantComposerAudioGolden.test.tsx`.
+ */
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { afterEach, beforeAll, describe, expect, it } from 'bun:test'
+import type { ComponentType } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { ParticipantConversations } from './ParticipantConversations'
+import { ParticipantThread } from './ParticipantThread'
+import {
+  buildThreadProps,
+  renderGoldenScenarios,
+  type GoldenComponents,
+} from './participantGoldenScenarios.test-helper'
+import { buildMessage } from './participantFixtures.test-helper'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+import { installFakeRecording } from './participantRecorderFakes.test-helper'
+
+const FIXTURES_DIRECTORY = join(import.meta.dir, 'test-fixtures')
+const PRE_EXISTING_GOLDENS = [
+  'thread-default',
+  'thread-plain',
+  'thread-avatars-initials',
+  'thread-tail-off',
+  'thread-error',
+  'thread-loading',
+  'thread-closed',
+  'conversations-list',
+  'conversations-selected',
+]
+
+function readGolden(name: string): string {
+  return readFileSync(join(FIXTURES_DIRECTORY, `${name}.golden.html`), 'utf8')
+}
+
+const UntypedThread = ParticipantThread as unknown as ComponentType<Record<string, unknown>>
+
+function renderThread(extra: Record<string, unknown>): string {
+  const props = { ...buildThreadProps(DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS), ...extra }
+  return renderToStaticMarkup(<UntypedThread {...props} />)
+}
+
+describe('empty composer stays byte-identical to origin/main a7c5c85 (contract 2.4)', () => {
+  let restoreEnvironment: (() => void) | undefined
+
+  beforeAll(() => {
+    process.env.TZ = 'UTC'
+  })
+
+  afterEach(() => {
+    restoreEnvironment?.()
+    restoreEnvironment = undefined
+  })
+
+  it('(a) without the audioRecording prop', () => {
+    expect(renderThread({ draft: { value: '', onChange: () => undefined, files: [], onFilesChange: () => undefined } })).toBe(
+      readGolden('thread-empty-draft'),
+    )
+  })
+
+  it('(b) with audioRecording={{}} on the server render (no MediaRecorder)', () => {
+    const markup = renderThread({
+      draft: { value: '', onChange: () => undefined, files: [], onFilesChange: () => undefined },
+      audioRecording: {},
+    })
+    expect(markup).toBe(readGolden('thread-empty-draft'))
+  })
+
+  it('(c) with audioRecording={{}}, a fake MediaRecorder and channel portal (portal never records)', () => {
+    restoreEnvironment = installFakeRecording().restore
+    const markup = renderThread({
+      draft: { value: '', onChange: () => undefined, files: [], onFilesChange: () => undefined },
+      audioRecording: {},
+      channel: 'portal',
+    })
+    expect(markup).toBe(readGolden('thread-empty-draft'))
+  })
+})
+
+describe('the existing goldens carry no audio; the audio goldens document the player that replaced the native one', () => {
+  it('none of the 9 recorded goldens has an <audio> element', () => {
+    expect(PRE_EXISTING_GOLDENS).toHaveLength(9)
+    for (const name of PRE_EXISTING_GOLDENS) expect(readGolden(name).match(/<audio/g)?.length ?? 0).toBe(0)
+  })
+
+  it('thread-audio-native was regrouped by 264 T1.5: same attachment without durationMs, now the player (no native controls)', () => {
+    const markup = readGolden('thread-audio-native')
+    expect(markup.match(/<audio/g)).toHaveLength(1)
+    expect(markup).not.toContain('controls')
+    expect(markup).not.toContain('cv-p-attachment__audio')
+    expect(markup).toContain('0:00 / --:--')
+  })
+
+  it('the helper renders the new scenarios and the 9 existing ones', () => {
+    const rendered = renderGoldenScenarios({
+      ParticipantThread,
+      ParticipantConversations,
+      labels: DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS,
+    } as unknown as GoldenComponents)
+    for (const name of [...PRE_EXISTING_GOLDENS, 'thread-empty-draft', 'thread-audio-native', 'thread-audio-player'])
+      expect(rendered[name]).toBe(readGolden(name))
+  })
+})
+
+function renderThreadGoldens(): Record<string, string> {
+  return renderGoldenScenarios({
+    ParticipantThread,
+    ParticipantConversations,
+    labels: DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS,
+  } as unknown as GoldenComponents)
+}
+
+const AUDIO_ATTACHMENT = { id: 'att-1', kind: 'audio', filename: 'voice.webm', mimeType: 'audio/webm', sizeBytes: 2048, durationMs: 65_000 }
+const GENERATED_AT = '2026-10-01T12:01:00.000Z'
+
+function audioItems(transcription?: Record<string, unknown>): Record<string, unknown>[] {
+  const attachments = [{ ...AUDIO_ATTACHMENT, ...(transcription === undefined ? {} : { transcription }) }]
+  return [{ kind: 'server', message: buildMessage({ id: 'au', direction: 'inbound', text: '', attachments: attachments as never, createdAt: '2026-10-01T12:00:00.000Z' }) }]
+}
+
+describe('[T1.5] thread-audio-player: the custom player replaces <audio controls> (contract 3.1-3.2)', () => {
+  it('thread-audio-player is byte-identical to its golden', () => {
+    expect(renderThread({ items: audioItems() })).toBe(readGolden('thread-audio-player'))
+  })
+
+  it('renders the contract 3.1 markup: group, toggle, range, time, rate and a preload="none" audio after which comes the file name', () => {
+    const markup = readGolden('thread-audio-player')
+    expect(markup).toContain('<div class="cv-p-audio" role="group" aria-label="Audio: voice.webm">')
+    expect(markup).toContain('type="range" class="cv-p-audio__seek"')
+    expect(markup).toContain('0:00 / 1:05')
+    expect(markup).toContain('<audio class="cv-p-audio__media" preload="none"></audio>')
+    expect(markup.indexOf('cv-p-audio__media')).toBeLessThan(markup.indexOf('cv-p-attachment__name'))
+  })
+
+  it('no other recorded golden changes: the 9 old ones and the empty draft stay without the player', () => {
+    for (const name of [...PRE_EXISTING_GOLDENS, 'thread-empty-draft']) expect(readGolden(name)).not.toContain('cv-p-audio')
+    expect(Object.keys(renderThreadGoldens()).sort()).toEqual(
+      [...PRE_EXISTING_GOLDENS, 'thread-empty-draft', 'thread-audio-native', 'thread-audio-player'].sort(),
+    )
+  })
+})
+
+describe('[T1.6] thread-audio-transcription-*: the block under the player (contract 3.3)', () => {
+  const scenarios: ReadonlyArray<readonly [string, Record<string, unknown>]> = [
+    ['pending', { status: 'pending' }],
+    ['ready', { status: 'ready', text: 'Chego em dez minutos.', language: 'pt', engine: 'whisper-local', generatedAt: GENERATED_AT }],
+    ['empty', { status: 'ready', text: '', generatedAt: GENERATED_AT }],
+    ['too_long', { status: 'failed', reason: 'too_long', maxDurationMs: 300_000 }],
+  ]
+
+  for (const [state, transcription] of scenarios) {
+    it(`thread-audio-transcription-${state} is byte-identical to its golden`, () => {
+      expect(renderThread({ items: audioItems(transcription) })).toBe(readGolden(`thread-audio-transcription-${state}`))
+    })
+  }
+
+  it('absent, disabled and plain failed transcriptions render only the player', () => {
+    const playerOnly = renderThread({ items: audioItems() })
+    for (const transcription of [{ status: 'disabled' }, { status: 'failed' }]) {
+      expect(renderThread({ items: audioItems(transcription) })).toBe(playerOnly)
+    }
+  })
+})

package/src/participant/participantAudioLabels.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'bun:test'
+
+import { DEFAULT_PARTICIPANT_AUDIO_LABELS, formatRecordingElapsedLabel, resolveParticipantAudioLabels } from './participantAudioLabels'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+
+describe('participant audio labels', () => {
+  it('fills every missing key with the English default', () => {
+    expect(resolveParticipantAudioLabels(undefined)).toEqual(DEFAULT_PARTICIPANT_AUDIO_LABELS)
+    expect(resolveParticipantAudioLabels({ sendAudio: 'Enviar áudio' }).stopRecording).toBe('Stop recording')
+    expect(resolveParticipantAudioLabels({ sendAudio: 'Enviar áudio' }).sendAudio).toBe('Enviar áudio')
+  })
+
+  it('is carried by the default map of the whole view', () => {
+    for (const key of Object.keys(DEFAULT_PARTICIPANT_AUDIO_LABELS) as (keyof typeof DEFAULT_PARTICIPANT_AUDIO_LABELS)[]) {
+      expect(DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS[key]).toBe(DEFAULT_PARTICIPANT_AUDIO_LABELS[key])
+    }
+  })
+
+  it('fills the elapsed and limit placeholders', () => {
+    expect(formatRecordingElapsedLabel('{elapsed} of {limit}', '0:12', '5:00')).toBe('0:12 of 5:00')
+  })
+})

package/src/participant/participantAudioLabels.ts

@@ -0,0 +1,76 @@
+import type { ParticipantConversationsLabels } from './participantLabels'
+
+export type ParticipantAudioLabels = {
+  readonly recordAudio: string
+  readonly recordingInProgress: string
+  readonly stopRecording: string
+  /** Uses the `{elapsed}` and `{limit}` placeholders. */
+  readonly recordingElapsed: string
+  readonly reviewAudio: string
+  readonly sendAudio: string
+  readonly discardAudio: string
+  readonly microphoneDenied: string
+  readonly recordingUnsupported: string
+  readonly audioEmpty: string
+  readonly audioTooLarge: string
+  readonly audioPlayer: string
+  readonly playAudio: string
+  readonly pauseAudio: string
+  readonly audioPosition: string
+  /** Uses the `{position}` and `{duration}` placeholders; without a duration only the position is spoken. */
+  readonly audioPositionValue: string
+  /** Uses the `{rate}` placeholder. */
+  readonly playbackRate: string
+  readonly audioUnavailable: string
+  readonly transcribing: string
+  /** Spoken by the thread's live region when a transcription finishes. */
+  readonly transcriptionReady: string
+  readonly machineTranscription: string
+  readonly emptyTranscription: string
+  /** Uses the `{minutes}` placeholder, filled from the limit the server applied. */
+  readonly transcriptionTooLong: string
+  readonly showFullTranscription: string
+  readonly collapseTranscription: string
+}
+
+export const DEFAULT_PARTICIPANT_AUDIO_LABELS: ParticipantAudioLabels = {
+  recordAudio: 'Record audio',
+  recordingInProgress: 'Recording',
+  stopRecording: 'Stop recording',
+  recordingElapsed: '{elapsed} of {limit}',
+  reviewAudio: 'Listen before sending',
+  sendAudio: 'Send audio',
+  discardAudio: 'Discard audio',
+  microphoneDenied: 'No permission to use the microphone.',
+  recordingUnsupported: 'This device cannot record audio.',
+  audioEmpty: 'Nothing was captured by the microphone.',
+  audioTooLarge: 'Audio too large to send.',
+  audioPlayer: 'Audio',
+  playAudio: 'Play audio',
+  pauseAudio: 'Pause audio',
+  audioPosition: 'Audio position',
+  audioPositionValue: '{position} of {duration}',
+  playbackRate: 'Playback speed {rate}',
+  audioUnavailable: 'Audio unavailable',
+  transcribing: 'Transcribing…',
+  transcriptionReady: 'Transcription ready',
+  machineTranscription: 'Transcription generated by machine',
+  emptyTranscription: 'Nothing was said in the audio',
+  transcriptionTooLong: 'Transcription only for audios shorter than {minutes} minutes',
+  showFullTranscription: 'Show all',
+  collapseTranscription: 'Show less',
+}
+
+export function resolveParticipantAudioLabels(
+  labels: Partial<ParticipantAudioLabels> | ParticipantConversationsLabels | undefined,
+): ParticipantAudioLabels {
+  const resolved = { ...DEFAULT_PARTICIPANT_AUDIO_LABELS }
+  for (const key of Object.keys(resolved) as (keyof ParticipantAudioLabels)[]) {
+    resolved[key] = labels?.[key] ?? DEFAULT_PARTICIPANT_AUDIO_LABELS[key]
+  }
+  return resolved
+}
+
+export function formatRecordingElapsedLabel(template: string, elapsed: string, limit: string): string {
+  return template.replace('{elapsed}', elapsed).replace('{limit}', limit)
+}

package/src/participant/participantAudioPlayerControlsDom.test.tsx

@@ -0,0 +1,123 @@
+import { act } from 'react'
+
+import { describe, expect, it } from 'bun:test'
+
+import { pressKey, wait } from '../domHarness.test-helper'
+import { ParticipantAudioRecorderView } from './ParticipantAudioRecorderView'
+import { DEFAULT_PARTICIPANT_AUDIO_LABELS } from './participantAudioLabels'
+import { buildAttachment, setupPlayerDom } from './participantAudioPlayerDomKit.test-helper'
+
+const kit = setupPlayerDom()
+const { mountAttachments, audioOf, toggleOf, find, tap } = kit
+
+describe('time and range', () => {
+  it('shows the server duration before the first tap', async () => {
+    await mountAttachments([buildAttachment('a', 65_000)])
+    expect(find('.cv-p-audio__time').textContent).toBe('0:00 / 1:05')
+    expect(find<HTMLInputElement>('.cv-p-audio__seek').getAttribute('max')).toBe('65')
+  })
+
+  it('uses loadedmetadata when the server sent no duration', async () => {
+    await mountAttachments([buildAttachment('a')])
+    expect(find('.cv-p-audio__time').textContent).toBe('0:00 / --:--')
+    kit.media.stateOf(audioOf()).duration = 42
+    act(() => kit.media.emit(audioOf(), 'loadedmetadata'))
+    expect(find('.cv-p-audio__time').textContent).toBe('0:00 / 0:42')
+  })
+
+  it('follows timeupdate and seeks by dragging the range', async () => {
+    await mountAttachments([buildAttachment('a', 65_000)])
+    kit.media.stateOf(audioOf()).currentTime = 12
+    act(() => kit.media.emit(audioOf(), 'timeupdate'))
+    expect(find('.cv-p-audio__time').textContent).toBe('0:12 / 1:05')
+    expect(find('.cv-p-audio__seek').getAttribute('aria-valuetext')).toBe('0:12 of 1:05')
+    const range = find<HTMLInputElement>('.cv-p-audio__seek')
+    act(() => {
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(range, '30')
+      range.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+    expect(kit.media.stateOf(audioOf()).currentTime).toBe(30)
+  })
+
+  it('steps 5 seconds with the arrows and jumps with Home and End', async () => {
+    await mountAttachments([buildAttachment('a', 65_000)])
+    const range = find('.cv-p-audio__seek')
+    pressKey(range, 'ArrowRight')
+    expect(kit.media.stateOf(audioOf()).currentTime).toBe(5)
+    pressKey(range, 'ArrowRight')
+    pressKey(range, 'ArrowLeft')
+    expect(kit.media.stateOf(audioOf()).currentTime).toBe(5)
+    pressKey(range, 'End')
+    expect(kit.media.stateOf(audioOf()).currentTime).toBe(65)
+    pressKey(range, 'Home')
+    expect(kit.media.stateOf(audioOf()).currentTime).toBe(0)
+  })
+
+  it('tolerates an infinite duration: no broken max, value text with the position only', async () => {
+    await mountAttachments([buildAttachment('a')])
+    kit.media.stateOf(audioOf()).duration = Number.POSITIVE_INFINITY
+    act(() => kit.media.emit(audioOf(), 'durationchange'))
+    kit.media.stateOf(audioOf()).currentTime = 12
+    act(() => kit.media.emit(audioOf(), 'timeupdate'))
+    const range = find('.cv-p-audio__seek')
+    expect(range.getAttribute('max')).toBe('12')
+    expect(range.getAttribute('aria-valuetext')).toBe('0:12')
+    expect(find('.cv-p-audio__time').textContent).toBe('0:12 / --:--')
+  })
+})
+
+describe('speed', () => {
+  it('cycles 1x, 1.5x, 2x applying defaultPlaybackRate and playbackRate', async () => {
+    await mountAttachments([buildAttachment('a')])
+    const rate = find('.cv-p-audio__rate')
+    expect(rate.textContent).toBe('1×')
+    tap(rate)
+    expect(rate.textContent).toBe('1.5×')
+    expect(rate.getAttribute('aria-label')).toBe('Playback speed 1.5×')
+    expect(kit.media.stateOf(audioOf()).defaultPlaybackRate).toBe(1.5)
+    expect(kit.media.stateOf(audioOf()).playbackRate).toBe(1.5)
+    tap(rate)
+    expect(kit.media.stateOf(audioOf()).playbackRate).toBe(2)
+    tap(rate)
+    expect(kit.media.stateOf(audioOf()).playbackRate).toBe(1)
+  })
+})
+
+describe('expired signed URL', () => {
+  it('re-resolves once on a media error, swaps the src and resumes from the same position', async () => {
+    await mountAttachments([buildAttachment('a', 65_000)])
+    tap(toggleOf())
+    kit.media.stateOf(audioOf()).currentTime = 12
+    act(() => kit.media.emit(audioOf(), 'error'))
+    await wait(0)
+    expect(kit.resolverCalls).toEqual(['a', 'a'])
+    expect(audioOf().getAttribute('src')).toBe('https://files.test/a-2.webm')
+    expect(kit.media.stateOf(audioOf()).currentTime).toBe(12)
+    expect(kit.media.playCalls.length).toBe(2)
+  })
+
+  it('gives up after the single retry and says the audio is unavailable', async () => {
+    await mountAttachments([buildAttachment('a', 65_000)])
+    tap(toggleOf())
+    act(() => kit.media.emit(audioOf(), 'error'))
+    await wait(0)
+    act(() => kit.media.emit(audioOf(), 'error'))
+    await wait(0)
+    expect(kit.resolverCalls).toEqual(['a', 'a'])
+    expect(kit.container.textContent).toContain(DEFAULT_PARTICIPANT_AUDIO_LABELS.audioUnavailable)
+  })
+})
+
+describe('recorder review reuses the same player', () => {
+  it('draws the player with the object URL, hands the audio element to the recorder ref and shows the recorded duration', () => {
+    const audioRef: { current: HTMLAudioElement | null } = { current: null }
+    kit.container = kit.harness.mount(
+      <ParticipantAudioRecorderView state="review" elapsedMs={0} review={{ url: 'blob:fake', audioRef, durationMs: 12_000 }} />,
+    ).container
+    expect(kit.container.querySelector('.cv-p-audio')).not.toBeNull()
+    expect(audioOf().getAttribute('src')).toBe('blob:fake')
+    expect(audioOf().getAttribute('preload')).toBe('none')
+    expect(audioRef.current).toBe(audioOf())
+    expect(find('.cv-p-audio__time').textContent).toBe('0:00 / 0:12')
+  })
+})

package/src/participant/participantAudioPlayerCss.test.ts

@@ -0,0 +1,63 @@
+import { readdirSync, 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'
+
+describe('player styles (.cv-p-audio*)', () => {
+  it('keeps both buttons and the bar at the touch size, from the existing tokens', () => {
+    for (const selector of ['.cv-p-audio__seek']) expect(declarationsIn(selector).get('min-height')).toBe('var(--cv-p-i-touch)')
+    expect(PARTICIPANT_CSS).toContain('min-width: var(--cv-p-i-touch); min-height: var(--cv-p-i-touch)')
+  })
+
+  it('has a width floor that never exceeds the bubble, so the play button stays visible at 375 px', () => {
+    expect(declarationsIn('.cv-p-audio').get('min-width')).toBe('min(15rem, 100%)')
+  })
+
+  it('does not draw the media element and defines no utility-class dependency', () => {
+    expect(declarationsIn('.cv-p-audio__media').get('display')).toBe('none')
+    expect(PARTICIPANT_CSS).not.toMatch(/@apply|\btw-/)
+  })
+})
+
+describe('transcription styles (.cv-p-transcription*)', () => {
+  it('clamps the text at six lines and keeps it selectable', () => {
+    const text = declarationsIn('.cv-p-transcription__text')
+    expect(text.get('-webkit-line-clamp')).toBe('6')
+    expect(text.get('user-select')).toBe('text')
+    expect(declarationsIn(".cv-p-transcription__text[data-expanded='true']").get('overflow')).toBe('visible')
+  })
+
+  it('gives the see-all button the touch size and a forced-colors outline, from existing tokens', () => {
+    const toggle = declarationsIn('.cv-p-transcription__toggle')
+    expect(toggle.get('min-height')).toBe('var(--cv-p-i-touch)')
+    expect(toggle.get('min-width')).toBe('var(--cv-p-i-touch)')
+    expect(mediaBody('(forced-colors: active)')).toContain('.cv-p-transcription__toggle')
+  })
+
+  it('has no motion, so reduced-motion is respected by construction', () => {
+    expect(PARTICIPANT_CSS).not.toMatch(/\.cv-p-transcription[^{]*\{[^}]*(transition|animation)/)
+  })
+
+  it('uses only existing tokens and no utility-class dependency', () => {
+    const rules = PARTICIPANT_CSS.split('\n').filter((line) => line.startsWith('.cv-p-transcription'))
+    expect(rules.length).toBeGreaterThan(5)
+    for (const variable of rules.join('\n').match(/var\(--cv-p-i-[a-z-]+\)/g) ?? []) {
+      expect(PARTICIPANT_CSS).toContain(`${variable.slice(4, -1)}:`)
+    }
+    expect(rules.join('\n')).not.toMatch(/@apply|\btw-/)
+  })
+})
+
+describe('no dead audio selectors', () => {
+  it('every .cv-p-recorder*, .cv-p-audio* and .cv-p-transcription* class is rendered by a component', () => {
+    const sources = readdirSync(import.meta.dir)
+      .filter((name) => name.endsWith('.tsx') && !name.includes('.test'))
+      .map((name) => readFileSync(join(import.meta.dir, name), 'utf8'))
+      .join('\n')
+    const classNames = new Set(PARTICIPANT_CSS.match(/\.cv-p-(?:recorder|audio|transcription)[a-z_-]*/g) ?? [])
+    expect(classNames.size).toBeGreaterThan(10)
+    for (const selector of classNames) expect(sources).toContain(selector.slice(1))
+  })
+})