@adatechnology/conversations-ui 0.9.0 → 0.11.0

package/src/participant/participantAudioRecorderState.test.ts

@@ -0,0 +1,144 @@
+import { describe, expect, it } from 'bun:test'
+
+import { DEFAULT_MAX_RECORDING_MILLISECONDS } from '../audioRecorderFormat'
+import {
+  canStartRecording,
+  classifyCapture,
+  classifyMicrophoneError,
+  formatRecordingClock,
+  MINIMUM_RECORDING_MILLISECONDS,
+  reduceRecorderStatus,
+  resolveInterruptionAction,
+  resolveRecordingLimits,
+  type RecorderEvent,
+  type RecorderStatus,
+} from './participantAudioRecorderState'
+import { DEFAULT_MAX_RECORDING_BYTES } from './participantAudio.types'
+
+const SIXTEEN_MIB = 16 * 1024 * 1024
+
+describe('resolveRecordingLimits only lowers the defaults (contract 2)', () => {
+  it('uses the defaults when nothing is passed', () => {
+    expect(resolveRecordingLimits({})).toEqual({ maxDurationMs: DEFAULT_MAX_RECORDING_MILLISECONDS, maxSizeBytes: SIXTEEN_MIB })
+    expect(DEFAULT_MAX_RECORDING_BYTES).toBe(SIXTEEN_MIB)
+  })
+
+  it('lowers the duration and the size', () => {
+    expect(resolveRecordingLimits({ options: { maxDurationMs: 60_000, maxSizeBytes: 1_000_000 } })).toEqual({
+      maxDurationMs: 60_000,
+      maxSizeBytes: 1_000_000,
+    })
+  })
+
+  it('cuts a larger duration or size back to the default', () => {
+    const limits = resolveRecordingLimits({ options: { maxDurationMs: 3_600_000, maxSizeBytes: 100 * 1024 * 1024 } })
+    expect(limits.maxDurationMs).toBe(DEFAULT_MAX_RECORDING_MILLISECONDS)
+    expect(limits.maxSizeBytes).toBe(SIXTEEN_MIB)
+  })
+
+  it('takes the smallest of the policy, the channel and the passed value', () => {
+    expect(resolveRecordingLimits({ channelMaxBytes: 10 * 1024 * 1024 }).maxSizeBytes).toBe(10 * 1024 * 1024)
+    expect(resolveRecordingLimits({ channelMaxBytes: 25 * 1024 * 1024 }).maxSizeBytes).toBe(SIXTEEN_MIB)
+    expect(resolveRecordingLimits({ options: { maxSizeBytes: 5_000_000 }, channelMaxBytes: 10_000_000 }).maxSizeBytes).toBe(5_000_000)
+  })
+
+  it('ignores values that are not a positive number', () => {
+    for (const bad of [0, -5, Number.NaN]) {
+      expect(resolveRecordingLimits({ options: { maxDurationMs: bad, maxSizeBytes: bad } })).toEqual({
+        maxDurationMs: DEFAULT_MAX_RECORDING_MILLISECONDS,
+        maxSizeBytes: SIXTEEN_MIB,
+      })
+    }
+  })
+})
+
+describe('reduceRecorderStatus', () => {
+  const table: ReadonlyArray<readonly [RecorderStatus, RecorderEvent, RecorderStatus]> = [
+    ['idle', 'request', 'requesting'],
+    ['denied', 'request', 'requesting'],
+    ['unsupported', 'request', 'requesting'],
+    ['empty', 'request', 'requesting'],
+    ['tooLarge', 'request', 'requesting'],
+    ['requesting', 'granted', 'recording'],
+    ['requesting', 'microphoneDenied', 'denied'],
+    ['requesting', 'microphoneUnavailable', 'unsupported'],
+    ['requesting', 'cancel', 'idle'],
+    ['recording', 'capturedReview', 'review'],
+    ['recording', 'capturedEmpty', 'empty'],
+    ['recording', 'capturedTooLarge', 'tooLarge'],
+    ['recording', 'cancel', 'idle'],
+    ['review', 'cancel', 'idle'],
+  ]
+
+  for (const [from, event, to] of table) {
+    it(`${from} + ${event} -> ${to}`, () => {
+      expect(reduceRecorderStatus(from, event)).toBe(to)
+    })
+  }
+
+  it('ignores events that do not apply to the current state', () => {
+    expect(reduceRecorderStatus('recording', 'request')).toBe('recording')
+    expect(reduceRecorderStatus('review', 'request')).toBe('review')
+    expect(reduceRecorderStatus('requesting', 'request')).toBe('requesting')
+    expect(reduceRecorderStatus('idle', 'granted')).toBe('idle')
+    expect(reduceRecorderStatus('review', 'capturedEmpty')).toBe('review')
+  })
+})
+
+describe('resolveInterruptionAction (contract 2.1)', () => {
+  it('stops a recording, pauses a review, cancels a pending request', () => {
+    expect(resolveInterruptionAction('recording')).toBe('stop')
+    expect(resolveInterruptionAction('review')).toBe('pause')
+    expect(resolveInterruptionAction('requesting')).toBe('cancel')
+  })
+
+  it('ignores the idle and error states', () => {
+    for (const status of ['idle', 'denied', 'unsupported', 'empty', 'tooLarge'] as const) {
+      expect(resolveInterruptionAction(status)).toBe('ignore')
+    }
+  })
+})
+
+describe('classifyCapture', () => {
+  const limits = { maxDurationMs: 300_000, maxSizeBytes: 1000 }
+
+  it('is empty without bytes or below the minimum duration', () => {
+    expect(classifyCapture({ sizeBytes: 0, durationMs: 5000 }, limits)).toBe('capturedEmpty')
+    expect(classifyCapture({ sizeBytes: 500, durationMs: 0 }, limits)).toBe('capturedEmpty')
+    expect(classifyCapture({ sizeBytes: 500, durationMs: MINIMUM_RECORDING_MILLISECONDS - 1 }, limits)).toBe('capturedEmpty')
+  })
+
+  it('is too large above the byte ceiling and fine at it', () => {
+    expect(classifyCapture({ sizeBytes: 1001, durationMs: 5000 }, limits)).toBe('capturedTooLarge')
+    expect(classifyCapture({ sizeBytes: 1000, durationMs: MINIMUM_RECORDING_MILLISECONDS }, limits)).toBe('capturedReview')
+  })
+})
+
+describe('classifyMicrophoneError', () => {
+  it('maps the permission errors to denied and the rest to unavailable', () => {
+    expect(classifyMicrophoneError({ name: 'NotAllowedError' })).toBe('microphoneDenied')
+    expect(classifyMicrophoneError({ name: 'SecurityError' })).toBe('microphoneDenied')
+    for (const name of ['NotFoundError', 'NotReadableError', 'OverconstrainedError', 'AbortError']) {
+      expect(classifyMicrophoneError({ name })).toBe('microphoneUnavailable')
+    }
+    expect(classifyMicrophoneError('boom')).toBe('microphoneUnavailable')
+    expect(classifyMicrophoneError(undefined)).toBe('microphoneUnavailable')
+  })
+})
+
+describe('formatRecordingClock', () => {
+  it('formats m:ss, flooring the seconds', () => {
+    expect(formatRecordingClock(0)).toBe('0:00')
+    expect(formatRecordingClock(12_999)).toBe('0:12')
+    expect(formatRecordingClock(65_000)).toBe('1:05')
+    expect(formatRecordingClock(300_000)).toBe('5:00')
+    expect(formatRecordingClock(-10)).toBe('0:00')
+  })
+})
+
+describe('canStartRecording', () => {
+  it('lets a tap start only from idle and the failure states', () => {
+    for (const status of ['idle', 'denied', 'unsupported', 'empty', 'tooLarge'] as const) expect(canStartRecording(status)).toBe(true)
+    for (const status of ['requesting', 'recording', 'review'] as const) expect(canStartRecording(status)).toBe(false)
+  })
+})

package/src/participant/participantAudioRecorderState.ts

@@ -0,0 +1,93 @@
+import { DEFAULT_MAX_RECORDING_MILLISECONDS } from '../audioRecorderFormat'
+import { DEFAULT_MAX_RECORDING_BYTES, type ParticipantAudioRecordingOptions } from './participantAudio.types'
+
+export type RecorderStatus =
+  | 'idle'
+  | 'requesting'
+  | 'recording'
+  | 'review'
+  | 'denied'
+  | 'unsupported'
+  | 'empty'
+  | 'tooLarge'
+
+export type RecorderEvent =
+  | 'request'
+  | 'granted'
+  | 'microphoneDenied'
+  | 'microphoneUnavailable'
+  | 'capturedReview'
+  | 'capturedEmpty'
+  | 'capturedTooLarge'
+  | 'cancel'
+
+export type InterruptionAction = 'stop' | 'pause' | 'cancel' | 'ignore'
+export type RecordingLimits = { readonly maxDurationMs: number; readonly maxSizeBytes: number }
+export type CaptureMeasure = { readonly sizeBytes: number; readonly durationMs: number }
+
+export const MINIMUM_RECORDING_MILLISECONDS = 500
+export const MUTE_INTERRUPTION_DELAY_MS = 3000
+
+const RETRYABLE: readonly RecorderStatus[] = ['idle', 'denied', 'unsupported', 'empty', 'tooLarge']
+
+const TRANSITIONS: Readonly<Record<RecorderEvent, ReadonlyArray<readonly [readonly RecorderStatus[], RecorderStatus]>>> = {
+  request: [[RETRYABLE, 'requesting']],
+  granted: [[['requesting'], 'recording']],
+  microphoneDenied: [[['requesting'], 'denied']],
+  microphoneUnavailable: [[['requesting'], 'unsupported']],
+  capturedReview: [[['recording'], 'review']],
+  capturedEmpty: [[['recording'], 'empty']],
+  capturedTooLarge: [[['recording'], 'tooLarge']],
+  cancel: [[['requesting', 'recording', 'review'], 'idle']],
+}
+
+export function canStartRecording(status: RecorderStatus): boolean {
+  return RETRYABLE.includes(status)
+}
+
+export function reduceRecorderStatus(status: RecorderStatus, event: RecorderEvent): RecorderStatus {
+  const match = TRANSITIONS[event].find(([from]) => from.includes(status))
+  return match ? match[1] : status
+}
+
+export function resolveInterruptionAction(status: RecorderStatus): InterruptionAction {
+  if (status === 'recording') return 'stop'
+  if (status === 'review') return 'pause'
+  if (status === 'requesting') return 'cancel'
+  return 'ignore'
+}
+
+function lowerOnly(requested: number | undefined, ceiling: number): number {
+  if (requested === undefined || !Number.isFinite(requested) || requested <= 0) return ceiling
+  return Math.min(requested, ceiling)
+}
+
+export type ResolveRecordingLimitsParams = {
+  readonly options?: ParticipantAudioRecordingOptions
+  readonly channelMaxBytes?: number
+}
+
+export function resolveRecordingLimits({ options, channelMaxBytes }: ResolveRecordingLimitsParams): RecordingLimits {
+  const sizeCeiling = lowerOnly(channelMaxBytes, DEFAULT_MAX_RECORDING_BYTES)
+  return {
+    maxDurationMs: lowerOnly(options?.maxDurationMs, DEFAULT_MAX_RECORDING_MILLISECONDS),
+    maxSizeBytes: lowerOnly(options?.maxSizeBytes, sizeCeiling),
+  }
+}
+
+export function classifyCapture({ sizeBytes, durationMs }: CaptureMeasure, limits: RecordingLimits): RecorderEvent {
+  if (sizeBytes === 0 || durationMs < MINIMUM_RECORDING_MILLISECONDS) return 'capturedEmpty'
+  if (sizeBytes > limits.maxSizeBytes) return 'capturedTooLarge'
+  return 'capturedReview'
+}
+
+export function classifyMicrophoneError(error: unknown): 'microphoneDenied' | 'microphoneUnavailable' {
+  const name = typeof error === 'object' && error !== null && 'name' in error ? (error as { name: unknown }).name : undefined
+  return name === 'NotAllowedError' || name === 'SecurityError' ? 'microphoneDenied' : 'microphoneUnavailable'
+}
+
+export function formatRecordingClock(milliseconds: number): string {
+  const totalSeconds = Math.floor(Math.max(0, milliseconds) / 1000)
+  const seconds = String(totalSeconds % 60).padStart(2, '0')
+  return `${Math.floor(totalSeconds / 60)}:${seconds}`
+}

package/src/participant/participantAudioRecorderView.test.tsx

@@ -0,0 +1,98 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { describe, expect, it } from 'bun:test'
+
+import { ParticipantAudioRecorderView, type ParticipantAudioRecorderViewProps } from './ParticipantAudioRecorderView'
+import type { RecorderStatus } from './participantAudioRecorderState'
+import { DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS } from './participantLabels'
+
+function render(overrides: Partial<ParticipantAudioRecorderViewProps> & { state: RecorderStatus }): string {
+  return renderToStaticMarkup(<ParticipantAudioRecorderView elapsedMs={12_000} {...overrides} />)
+}
+
+describe('idle and requesting', () => {
+  it('renders the microphone as a non-submitting primary button named by recordAudio', () => {
+    const markup = render({ state: 'idle' })
+    expect(markup).toContain('type="button"')
+    expect(markup).toContain('class="cv-p-button cv-p-button--primary cv-p-composer__record"')
+    expect(markup).toContain('aria-label="Record audio"')
+    expect(markup).not.toContain('type="submit"')
+    expect(markup).not.toContain('aria-busy')
+  })
+
+  it('is busy and disabled while the permission is pending', () => {
+    const markup = render({ state: 'requesting' })
+    expect(markup).toContain('aria-busy="true"')
+    expect(markup).toContain('disabled=""')
+  })
+
+  it('is disabled when the composer is', () => {
+    expect(render({ state: 'idle', disabled: true })).toContain('disabled=""')
+  })
+})
+
+describe('recording', () => {
+  it('shows the clock "m:ss of m:ss", discard and stop, and no aria-live', () => {
+    const markup = render({ state: 'recording' })
+    expect(markup).toContain('role="group"')
+    expect(markup).toContain('aria-label="Recording"')
+    expect(markup).toContain('role="timer"')
+    expect(markup).toContain('0:12 of 5:00')
+    expect(markup).toContain('cv-p-recorder__discard')
+    expect(markup).toContain('cv-p-recorder__stop')
+    expect(markup).not.toContain('aria-live')
+    expect(markup).not.toContain('cv-p-composer__record')
+  })
+
+  it('uses the lowered ceiling in the clock', () => {
+    expect(render({ state: 'recording', maxDurationMs: 90_000 })).toContain('0:12 of 1:30')
+  })
+
+  it('every button is type="button"', () => {
+    const buttons = render({ state: 'recording' }).match(/<button[^>]*>/g) ?? []
+    expect(buttons).toHaveLength(2)
+    for (const button of buttons) expect(button).toContain('type="button"')
+  })
+})
+
+describe('review', () => {
+  it('has the hint, the player over the object URL, discard and send', () => {
+    const markup = render({ state: 'review', review: { url: 'blob:abc' } })
+    expect(markup).toContain('cv-p-recorder--review')
+    expect(markup).toContain('<p class="cv-p-recorder__hint" aria-hidden="true">Listen before sending</p>')
+    expect(markup).toContain('<audio')
+    expect(markup).toContain('src="blob:abc"')
+    expect(markup).toContain('cv-p-recorder__discard')
+    expect(markup).toContain('cv-p-recorder__send')
+    expect(markup).toContain('aria-label="Send audio"')
+  })
+})
+
+describe('failure states', () => {
+  const cases: ReadonlyArray<readonly [RecorderStatus, string]> = [
+    ['denied', 'No permission to use the microphone.'],
+    ['unsupported', 'This device cannot record audio.'],
+    ['empty', 'Nothing was captured by the microphone.'],
+    ['tooLarge', 'Audio too large to send.'],
+  ]
+  for (const [state, text] of cases) {
+    it(`${state} keeps the microphone and announces the phrase as an alert`, () => {
+      const markup = render({ state })
+      expect(markup).toContain(`<p class="cv-p-composer__error" role="alert">${text}</p>`)
+      expect(markup).toContain('cv-p-composer__record')
+    })
+  }
+})
+
+describe('labels', () => {
+  it('uses the English defaults when the host map does not carry the new keys', () => {
+    const { recordAudio: _omitted, ...withoutAudio } = DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS
+    expect(render({ state: 'idle', labels: withoutAudio })).toContain('aria-label="Record audio"')
+  })
+
+  it('takes the host translation when present', () => {
+    const labels = { ...DEFAULT_PARTICIPANT_CONVERSATIONS_LABELS, recordAudio: 'Gravar áudio', recordingElapsed: '{elapsed} de {limit}' }
+    expect(render({ state: 'idle', labels })).toContain('aria-label="Gravar áudio"')
+    expect(render({ state: 'recording', labels })).toContain('0:12 de 5:00')
+  })
+})

package/src/participant/participantAudioSupport.ts

@@ -0,0 +1,36 @@
+import { channelCapabilityFor } from '../channelCapability'
+import { resolveRecordingFormat, type RecordingFormat } from '../audioRecorderFormat'
+import type { ConversationChannel } from '../conversationChannel'
+import type { ParticipantAudioRecordingOptions } from './participantAudio.types'
+import { matchesAcceptedType } from './participantFileValidation'
+
+export type ComposerAudioSettings = {
+  readonly audioRecording: ParticipantAudioRecordingOptions
+  readonly channel: ConversationChannel
+  readonly onSendAudio: (file: File) => void
+}
+
+export type ResolveComposerAudioParams = {
+  readonly audioRecording?: ParticipantAudioRecordingOptions
+  readonly onSendAudio?: (file: File) => void
+  readonly channel?: ConversationChannel
+  readonly acceptedTypes?: readonly string[]
+}
+
+/** Feature detection only: on a server there is no MediaRecorder, so it answers false. */
+function resolveBrowserRecordingFormat(): RecordingFormat | undefined {
+  if (typeof navigator === 'undefined' || !navigator.mediaDevices?.getUserMedia) return undefined
+  return resolveRecordingFormat()
+}
+
+/** The host opts in through the prop; the channel and the browser can only switch the microphone off. */
+export function resolveComposerAudio(params: ResolveComposerAudioParams): ComposerAudioSettings | undefined {
+  const { audioRecording, onSendAudio, channel = 'app', acceptedTypes } = params
+  if (!audioRecording || !onSendAudio) return undefined
+  const capability = channelCapabilityFor(channel)
+  if (!capability.audio.records || !capability.attachments.accepted) return undefined
+  const format = resolveBrowserRecordingFormat()
+  if (!format) return undefined
+  if (acceptedTypes && !matchesAcceptedType(format.uploadMimeType, acceptedTypes)) return undefined
+  return { audioRecording, channel, onSendAudio }
+}

package/src/participant/participantAudioTranscriptionDom.test.tsx

@@ -0,0 +1,198 @@
+import { act, useState } from 'react'
+
+import type { ParticipantTranscription } from '@adatechnology/conversation-contracts'
+import { afterAll, afterEach, beforeAll, describe, expect, it } from 'bun:test'
+
+import { setupDom, type DomHarness } from '../domHarness.test-helper'
+import { ParticipantAudioTranscription } from './ParticipantAudioTranscription'
+import { ParticipantCopyAnnouncer, ParticipantThreadLive } from './ParticipantCopyAnnouncer'
+import { DEFAULT_PARTICIPANT_AUDIO_LABELS } from './participantAudioLabels'
+
+let harness: DomHarness
+let container: HTMLElement
+let setTranscription: (next: ParticipantTranscription | undefined) => void = () => undefined
+let overflow = { scrollHeight: 100, clientHeight: 100 }
+let prototype: Record<string, unknown> = {}
+let originals: Record<string, PropertyDescriptor | undefined> = {}
+
+const READY: ParticipantTranscription = { status: 'ready', text: 'Chego em dez minutos.', language: 'pt', generatedAt: '2026-10-01T12:01:00.000Z' }
+
+beforeAll(async () => {
+  harness = await setupDom()
+  prototype = HTMLElement.prototype as unknown as Record<string, unknown>
+  originals = {
+    scrollHeight: Object.getOwnPropertyDescriptor(prototype, 'scrollHeight'),
+    clientHeight: Object.getOwnPropertyDescriptor(prototype, 'clientHeight'),
+  }
+  Object.defineProperty(prototype, 'scrollHeight', { configurable: true, get: () => overflow.scrollHeight })
+  Object.defineProperty(prototype, 'clientHeight', { configurable: true, get: () => overflow.clientHeight })
+})
+
+afterAll(() => {
+  for (const [name, descriptor] of Object.entries(originals)) {
+    if (descriptor) Object.defineProperty(prototype, name, descriptor)
+    else delete prototype[name]
+  }
+  harness.teardown()
+})
+
+afterEach(() => {
+  overflow = { scrollHeight: 100, clientHeight: 100 }
+})
+
+function Harness({ initial, attachmentId = 'att-1' }: { initial: ParticipantTranscription | undefined; attachmentId?: string }) {
+  const [transcription, update] = useState(initial)
+  setTranscription = update
+  return (
+    <ParticipantCopyAnnouncer>
+      <ParticipantThreadLive notice="" />
+      <ParticipantAudioTranscription attachmentId={attachmentId} transcription={transcription} labels={DEFAULT_PARTICIPANT_AUDIO_LABELS} />
+    </ParticipantCopyAnnouncer>
+  )
+}
+
+function mount(initial: ParticipantTranscription | undefined, attachmentId?: string): void {
+  container = harness.mount(<Harness initial={initial} {...(attachmentId === undefined ? {} : { attachmentId })} />).container
+}
+
+function liveText(): string {
+  return container.querySelector('[role="status"]')?.textContent ?? ''
+}
+
+function change(next: ParticipantTranscription | undefined): void {
+  act(() => setTranscription(next))
+}
+
+describe('announcement through the existing live region', () => {
+  it('announces "Transcription ready" once on the observed pending to ready change', () => {
+    mount({ status: 'pending' })
+    expect(liveText()).toBe('')
+    change(READY)
+    expect(liveText()).toBe('Transcription ready')
+    expect(container.querySelectorAll('[aria-live]')).toHaveLength(1)
+  })
+
+  it('does not announce a transcription that is already ready at the first render', () => {
+    mount(READY)
+    expect(liveText()).toBe('')
+  })
+
+  it('does not announce again on a re-render that stays ready, nor for failed or empty transitions', () => {
+    mount({ status: 'pending' })
+    change(READY)
+    act(() => undefined)
+    const announced = liveText()
+    change({ ...READY, text: 'Outra coisa' })
+    expect(liveText()).toBe(announced)
+
+    mount({ status: 'pending' })
+    change({ status: 'failed' })
+    expect(liveText()).toBe('')
+  })
+
+  it('does not announce the full text', () => {
+    mount({ status: 'pending' })
+    change(READY)
+    expect(liveText()).not.toContain('dez minutos')
+  })
+})
+
+describe('states', () => {
+  it('pending shows the discreet notice only', () => {
+    mount({ status: 'pending' })
+    expect(container.querySelector('.cv-p-transcription--pending')?.textContent).toBe('Transcribing…')
+  })
+
+  it('ready keeps the machine notice always next to the text, notice read first', () => {
+    mount(READY)
+    const text = container.querySelector('.cv-p-transcription__text')
+    const notice = container.querySelector('.cv-p-transcription__notice')
+    expect(text?.textContent).toBe('Chego em dez minutos.')
+    expect(text?.getAttribute('lang')).toBe('pt')
+    expect(notice?.textContent).toBe('Transcription generated by machine')
+    expect(text?.hasAttribute('aria-describedby')).toBe(false)
+    expect(notice?.hasAttribute('id')).toBe(false)
+    const order = Array.from(container.querySelector('.cv-p-transcription')?.children ?? [])
+    expect(order.indexOf(notice as Element)).toBeLessThan(order.indexOf(text as Element))
+  })
+
+  it('empty text shows only the empty message and the notice', () => {
+    mount({ status: 'ready', text: '', generatedAt: READY.status === 'ready' ? READY.generatedAt : '' })
+    expect(container.querySelector('.cv-p-transcription__empty')?.textContent).toBe('Nothing was said in the audio')
+    expect(container.querySelector('.cv-p-transcription__notice')).not.toBeNull()
+    expect(container.querySelector('.cv-p-transcription__text')).toBeNull()
+  })
+
+  it('too_long computes the minutes from the field and is not an alarm', () => {
+    mount({ status: 'failed', reason: 'too_long', maxDurationMs: 600_000 })
+    const block = container.querySelector('.cv-p-transcription--too-long')
+    expect(block?.textContent).toBe('Transcription only for audios shorter than 10 minutes')
+    expect(block?.getAttribute('role')).toBeNull()
+    change({ status: 'failed', reason: 'too_long', maxDurationMs: 300_000 })
+    expect(container.querySelector('.cv-p-transcription--too-long')?.textContent).toContain('shorter than 5 minutes')
+  })
+
+  it('plain failed, too_long without the limit, a limit without reason, disabled and absent draw nothing', () => {
+    for (const transcription of [
+      { status: 'failed' },
+      { status: 'failed', reason: 'too_long' },
+      { status: 'failed', maxDurationMs: 600_000 },
+      { status: 'failed', reason: 'too_long', maxDurationMs: 30_000 },
+      { status: 'disabled' },
+      undefined,
+    ] as (ParticipantTranscription | undefined)[]) {
+      mount(transcription)
+      expect(container.querySelector('.cv-p-transcription')).toBeNull()
+      expect(container.textContent).not.toMatch(/error|fail/i)
+    }
+  })
+})
+
+describe('malformed data from a host that did not validate', () => {
+  it('draws only the player area (nothing) and never throws', () => {
+    for (const transcription of [
+      { status: 'ready', text: { nested: 'object' } },
+      { status: 'ready', text: 42 },
+      { status: 'ready' },
+      { status: 'weird', text: 'x' },
+      { status: 'failed', reason: 'too_long', maxDurationMs: '600000' },
+    ] as unknown as ParticipantTranscription[]) {
+      mount(transcription)
+      expect(container.querySelector('.cv-p-transcription')).toBeNull()
+    }
+  })
+})
+
+describe('collapse', () => {
+  const LONG: ParticipantTranscription = { status: 'ready', text: 'x '.repeat(500), generatedAt: '2026-10-01T12:01:00.000Z' }
+
+  it('shows no button when the text fits', () => {
+    mount(LONG)
+    expect(container.querySelector('.cv-p-transcription__toggle')).toBeNull()
+  })
+
+  it('measures the overflow, then expands and collapses with aria-expanded', () => {
+    overflow = { scrollHeight: 200, clientHeight: 100 }
+    mount(LONG)
+    const toggle = container.querySelector<HTMLButtonElement>('.cv-p-transcription__toggle')
+    expect(toggle?.textContent).toBe('Show all')
+    expect(toggle?.getAttribute('aria-expanded')).toBe('false')
+    expect(container.querySelector('.cv-p-transcription__text')?.textContent).toBe(LONG.text)
+    act(() => toggle?.click())
+    const expanded = container.querySelector<HTMLButtonElement>('.cv-p-transcription__toggle')
+    expect(expanded?.textContent).toBe('Show less')
+    expect(expanded?.getAttribute('aria-expanded')).toBe('true')
+    act(() => expanded?.click())
+    expect(container.querySelector('.cv-p-transcription__toggle')?.getAttribute('aria-expanded')).toBe('false')
+  })
+})
+
+describe('the transcribed text never leaves the paragraph', () => {
+  it('is in no title, data-* attribute or tooltip', () => {
+    mount(READY)
+    const attributes = Array.from(container.querySelectorAll('*')).flatMap((element) => Array.from(element.attributes))
+    for (const attribute of attributes) {
+      if (attribute.name === 'title' || attribute.name.startsWith('data-')) expect(attribute.value).not.toContain('dez minutos')
+    }
+  })
+})