@adatechnology/conversations-ui 0.8.0 → 0.10.0

package/src/participant/useParticipantAudioSourceRetry.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef, type SyntheticEvent } from 'react'
+
+import type { PlayerContext } from './participantAudioPlayerState'
+
+export type UseParticipantAudioSourceRetryParams = {
+  readonly context: PlayerContext
+  readonly url: string | undefined
+  readonly onSourceError: (() => Promise<string | undefined>) | undefined
+}
+
+/** One retry with a fresh URL when the signed one expired, resuming from the same position. */
+export function useParticipantAudioSourceRetry({ context, url, onSourceError }: UseParticipantAudioSourceRetryParams) {
+  const { audioRef, update } = context
+  const canRetryRef = useRef(true)
+  const resumeAtRef = useRef<number | undefined>(undefined)
+
+  useEffect(() => {
+    const audio = audioRef.current
+    const resumeAt = resumeAtRef.current
+    if (!audio || resumeAt === undefined || !url) return
+    resumeAtRef.current = undefined
+    audio.currentTime = resumeAt
+    Promise.resolve(audio.play()).catch(() => update({ isPlaying: false }))
+  }, [url, audioRef, update])
+
+  function allowRetry(): void {
+    canRetryRef.current = true
+  }
+
+  function handleError(event: SyntheticEvent<HTMLAudioElement>): void {
+    if (!onSourceError || !canRetryRef.current) return update({ hasFailed: true, isPlaying: false })
+    canRetryRef.current = false
+    resumeAtRef.current = event.currentTarget.currentTime
+    onSourceError().then((fresh) => {
+      if (fresh && fresh !== url) return
+      resumeAtRef.current = undefined
+      update({ hasFailed: true, isPlaying: false })
+    })
+  }
+
+  return { handleError, allowRetry }
+}

package/src/participant/useParticipantFailedMenu.ts

@@ -0,0 +1,60 @@
+import { useReducer, useRef, type FocusEvent, type KeyboardEvent, type RefObject } from 'react'
+
+import { handleFailedMenuKeyDown } from './failedMenuKeyboard'
+import {
+  CLOSED_FAILED_MENU,
+  failedMenuReducer,
+  resolveFailedMenuTriggerKey,
+  type FailedMenuPlacement,
+  type FailedMenuState,
+} from './participantFailedMenuState'
+import { useFailedMenuInitialFocus, useFailedMenuOutsideClose, useFailedMenuPlacement } from './useFailedMenuEffects'
+
+export type ParticipantFailedMenuController = {
+  readonly state: FailedMenuState
+  readonly placement: FailedMenuPlacement
+  readonly containerRef: RefObject<HTMLSpanElement | null>
+  readonly triggerRef: RefObject<HTMLButtonElement | null>
+  readonly menuRef: RefObject<HTMLDivElement | null>
+  readonly handleTriggerClick: () => void
+  readonly handleTriggerKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void
+  readonly handleMenuKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void
+  readonly handleBlur: (event: FocusEvent<HTMLSpanElement>) => void
+  readonly close: () => void
+}
+
+export function useParticipantFailedMenu(): ParticipantFailedMenuController {
+  const [state, dispatch] = useReducer(failedMenuReducer, CLOSED_FAILED_MENU)
+  const containerRef = useRef<HTMLSpanElement | null>(null)
+  const triggerRef = useRef<HTMLButtonElement | null>(null)
+  const menuRef = useRef<HTMLDivElement | null>(null)
+
+  useFailedMenuInitialFocus(state, menuRef)
+  useFailedMenuOutsideClose(state.isOpen, containerRef, dispatch)
+  const placement = useFailedMenuPlacement(state.isOpen, { triggerRef, menuRef })
+
+  function handleTriggerKeyDown(event: KeyboardEvent<HTMLButtonElement>): void {
+    const initialFocus = resolveFailedMenuTriggerKey(event.key)
+    if (!initialFocus) return
+    event.preventDefault()
+    dispatch({ type: 'open', initialFocus })
+  }
+
+  function handleBlur(event: FocusEvent<HTMLSpanElement>): void {
+    const next = event.relatedTarget
+    if (next instanceof Node && !containerRef.current?.contains(next)) dispatch({ type: 'close' })
+  }
+
+  return {
+    state,
+    placement,
+    containerRef,
+    triggerRef,
+    menuRef,
+    handleTriggerClick: () => dispatch({ type: 'toggle' }),
+    handleTriggerKeyDown,
+    handleMenuKeyDown: (event) => handleFailedMenuKeyDown({ event, menuRef, triggerRef, dispatch }),
+    handleBlur,
+    close: () => dispatch({ type: 'close' }),
+  }
+}

package/src/participant/useParticipantSendAudio.test.tsx

@@ -0,0 +1,85 @@
+import { act } from 'react'
+
+import { afterAll, beforeAll, describe, expect, it } from 'bun:test'
+
+import { setupDom, type DomHarness } from '../domHarness.test-helper'
+import type { ParticipantSendContent } from './participantDrafts'
+import { useParticipantSendAudio } from './useParticipantSendAudio'
+
+let harness: DomHarness
+let sendAudio: (file: File) => void
+let calls: ParticipantSendContent[]
+let releases: Array<() => void>
+
+function Probe() {
+  sendAudio = useParticipantSendAudio((content) => {
+    calls.push(content)
+    return new Promise<void>((resolve) => releases.push(resolve))
+  })
+  return null
+}
+
+beforeAll(async () => {
+  harness = await setupDom()
+})
+
+afterAll(() => harness.teardown())
+
+function mountProbe(): void {
+  calls = []
+  releases = []
+  harness.mount(<Probe />)
+}
+
+const audio = (name: string) => new File(['x'], name, { type: 'audio/ogg' })
+
+describe('useParticipantSendAudio', () => {
+  it('sends the file alone, as a message of its own', () => {
+    mountProbe()
+    const file = audio('a.ogg')
+    sendAudio(file)
+    expect(calls).toEqual([{ files: [file] }])
+  })
+
+  it('ignores a second synchronous send of the same file', () => {
+    mountProbe()
+    const file = audio('a.ogg')
+    sendAudio(file)
+    sendAudio(file)
+    expect(calls).toHaveLength(1)
+  })
+
+  it('lets another recording through while the first is still uploading, and the same one again once it settled', async () => {
+    mountProbe()
+    const first = audio('a.ogg')
+    sendAudio(first)
+    sendAudio(audio('b.ogg'))
+    expect(calls).toHaveLength(2)
+    await act(async () => releases[0]?.())
+    sendAudio(first)
+    expect(calls).toHaveLength(3)
+  })
+
+  it('a send that throws (for example randomUUID in an insecure context) is contained and frees the file for a retry', async () => {
+    const unhandled: unknown[] = []
+    const onUnhandled = (reason: unknown): void => void unhandled.push(reason)
+    process.on('unhandledRejection', onUnhandled)
+    let attempts = 0
+    function Throwing() {
+      sendAudio = useParticipantSendAudio(async () => {
+        attempts += 1
+        throw new Error('crypto.randomUUID is not a function')
+      })
+      return null
+    }
+    harness.mount(<Throwing />)
+    const file = audio('a.ogg')
+    sendAudio(file)
+    await new Promise((resolve) => setTimeout(resolve, 10))
+    sendAudio(file)
+    await new Promise((resolve) => setTimeout(resolve, 10))
+    process.off('unhandledRejection', onUnhandled)
+    expect(unhandled).toEqual([])
+    expect(attempts).toBe(2)
+  })
+})

package/src/participant/useParticipantSendAudio.ts

@@ -0,0 +1,28 @@
+import { useCallback, useRef } from 'react'
+
+import type { ParticipantSendContent } from './participantDrafts'
+
+/**
+ * Sends a recorded audio as its own message through the attachment path. The file itself is the
+ * lock: send generates a new client id per call, so the server idempotency would not stop a double tap.
+ */
+export function useParticipantSendAudio(send: (content: ParticipantSendContent) => Promise<unknown>): (file: File) => void {
+  const sendRef = useRef(send)
+  sendRef.current = send
+  const inFlightRef = useRef(new Set<File>())
+
+  return useCallback((file: File): void => {
+    const inFlight = inFlightRef.current
+    if (inFlight.has(file)) return
+    inFlight.add(file)
+    void (async () => {
+      try {
+        await sendRef.current({ files: [file] })
+      } catch {
+        // the send path reports its own failures; a throw before it (insecure context) must not become an unhandled rejection
+      } finally {
+        inFlight.delete(file)
+      }
+    })()
+  }, [])
+}

package/src/participant/useParticipantThreadController.ts

@@ -13,6 +13,7 @@ import { findFailedEntry, hasSendingEntry, type ParticipantSendAction } from './
 import type { ParticipantSendStates, ParticipantSendStatesAction } from './participantSendStates'
 import { useParticipantConversationView } from './useParticipantConversationView'
 import { useParticipantDraft } from './useParticipantDraft'
+import { useParticipantSendAudio } from './useParticipantSendAudio'
 import { useParticipantThread, type UseParticipantThreadResult } from './useParticipantThread'
 import { useParticipantThreadScroll } from './useParticipantThreadScroll'
 
@@ -53,6 +54,7 @@ export type ParticipantThreadCoreProps = Pick<
   | 'onLoadOlder'
   | 'pendingActions'
   | 'perspective'
+  | 'onSendAudio'
 >
 
 type BuildPendingActionsParams = {
@@ -71,25 +73,35 @@ function buildPendingActions({ thread, dispatchSend, handleEdit, onRetryPending
   }
 }
 
+type BuildEditHandlerParams = {
+  readonly sendEntries: Parameters<typeof findFailedEntry>[0]
+  readonly dispatchSend: (action: ParticipantSendAction) => void
+  readonly restoreFromEntry: (entry: NonNullable<ReturnType<typeof findFailedEntry>>) => void
+}
+
+function buildEditHandler({ sendEntries, dispatchSend, restoreFromEntry }: BuildEditHandlerParams): (clientMessageId: string) => void {
+  return (clientMessageId) => {
+    const entry = findFailedEntry(sendEntries, clientMessageId)
+    if (!entry) return
+    restoreFromEntry(entry)
+    dispatchSend({ type: 'discarded', clientMessageId })
+  }
+}
+
 export function useParticipantThreadController(params: ParticipantThreadControllerParams): ParticipantThreadCoreProps {
   const { api, subject, conversation, draftsRef } = params
   const { draft, setText, setFiles, takeForSend, restoreFromEntry } = useParticipantDraft(draftsRef, subject)
   const { thread, items, sendEntries, dispatchSend } = useParticipantConversationView(params)
   const resolveAttachmentUrl = useMemo(() => bindAttachmentUrlResolver(api), [api])
   const { scroll, newMessagesCount } = useParticipantThreadScroll(items, params.perspective)
+  const handleSendAudio = useParticipantSendAudio(thread.send)
+  const handleEdit = buildEditHandler({ sendEntries, dispatchSend, restoreFromEntry })
 
   function handleSend(): void {
     const content = takeForSend()
     if (content) void thread.send(content)
   }
 
-  function handleEdit(clientMessageId: string): void {
-    const entry = findFailedEntry(sendEntries, clientMessageId)
-    if (!entry) return
-    restoreFromEntry(entry)
-    dispatchSend({ type: 'discarded', clientMessageId })
-  }
-
   return {
     conversation,
     items,
@@ -108,5 +120,6 @@ export function useParticipantThreadController(params: ParticipantThreadControll
     onLoadOlder: () => void thread.loadOlder(),
     pendingActions: buildPendingActions({ thread, dispatchSend, handleEdit, onRetryPending: params.onRetryPending }),
     perspective: params.perspective,
+    onSendAudio: handleSendAudio,
   }
 }

package/src/participant/useStableAttachmentUrl.ts

@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import type { ParticipantAttachment } from '@adatechnology/conversation-contracts'
+
+import type { ResolveParticipantAttachmentUrl } from './ParticipantAttachmentItem'
+import { isSafeAttachmentUrl } from './participantAttachmentUrl'
+
+export type StableAttachmentUrl = {
+  readonly status: 'pending' | 'ready' | 'failed'
+  readonly url: string | undefined
+  /** Asks the host for a fresh URL (the signed one expired); resolves undefined when it cannot. */
+  readonly resolveAgain: () => Promise<string | undefined>
+}
+
+export type StableAttachmentUrlParams = {
+  readonly attachment: ParticipantAttachment
+  readonly resolveAttachmentUrl: ResolveParticipantAttachmentUrl
+}
+
+type ResolvedState = Pick<StableAttachmentUrl, 'status' | 'url'>
+
+export const ATTACHMENT_URL_RETRY_DELAY_MS = 1000
+
+const PENDING_STATE: ResolvedState = { status: 'pending', url: undefined }
+
+async function resolveSafely({ attachment, resolveAttachmentUrl }: StableAttachmentUrlParams): Promise<string | undefined> {
+  try {
+    const resolved = await resolveAttachmentUrl(attachment, 'inline')
+    return isSafeAttachmentUrl(resolved) ? resolved.trim() : undefined
+  } catch {
+    return undefined
+  }
+}
+
+/** Resolves once per `attachment.id`: a refreshed conversation hands over a new object and URL, and swapping `src` restarts the audio. */
+export function useStableAttachmentUrl(params: StableAttachmentUrlParams): StableAttachmentUrl {
+  const latest = useRef(params)
+  const currentId = useRef(params.attachment.id)
+  const [state, setState] = useState<ResolvedState>(PENDING_STATE)
+  const { id } = params.attachment
+
+  useEffect(() => {
+    latest.current = params
+  })
+
+  useEffect(() => {
+    currentId.current = id
+    setState(PENDING_STATE)
+    let retryTimer: ReturnType<typeof setTimeout> | undefined
+    const settle = (url: string | undefined): void => {
+      if (currentId.current === id) setState(url ? { status: 'ready', url } : { status: 'failed', url: undefined })
+    }
+    resolveSafely(latest.current).then((url) => {
+      if (url || currentId.current !== id) return settle(url)
+      retryTimer = setTimeout(() => void resolveSafely(latest.current).then(settle), ATTACHMENT_URL_RETRY_DELAY_MS)
+    })
+    return () => {
+      currentId.current = ''
+      clearTimeout(retryTimer)
+    }
+  }, [id])
+
+  const resolveAgain = useCallback(async (): Promise<string | undefined> => {
+    const requestedId = currentId.current
+    const url = await resolveSafely(latest.current)
+    if (url && currentId.current === requestedId) setState({ status: 'ready', url })
+    return url
+  }, [])
+
+  return { ...state, resolveAgain }
+}

package/src/participant/useSuppressTouchTooltips.ts

@@ -0,0 +1,38 @@
+import { useEffect, type RefObject } from 'react'
+
+/**
+ * Keeps the package tooltip layer (which listens on the document) from lighting up for touch: a tap
+ * focuses the button on Android and the balloon would stay on. The events are stopped at the thread
+ * root, so the layer keeps its behavior for every other flow.
+ */
+export function useSuppressTouchTooltips(rootRef: RefObject<HTMLElement | null>): void {
+  useEffect(() => {
+    const root = rootRef.current
+    if (!root) return undefined
+    let isTouching = false
+
+    function handlePointerDown(event: PointerEvent): void {
+      isTouching = event.pointerType === 'touch'
+    }
+    function handlePointerOver(event: PointerEvent): void {
+      if (event.pointerType === 'touch') event.stopPropagation()
+    }
+    function handleFocusIn(event: Event): void {
+      if (isTouching) event.stopPropagation()
+    }
+    function handleKeyDown(): void {
+      isTouching = false
+    }
+
+    root.addEventListener('pointerdown', handlePointerDown, true)
+    root.addEventListener('pointerover', handlePointerOver)
+    root.addEventListener('focusin', handleFocusIn)
+    root.addEventListener('keydown', handleKeyDown, true)
+    return () => {
+      root.removeEventListener('pointerdown', handlePointerDown, true)
+      root.removeEventListener('pointerover', handlePointerOver)
+      root.removeEventListener('focusin', handleFocusIn)
+      root.removeEventListener('keydown', handleKeyDown, true)
+    }
+  }, [rootRef])
+}

package/src/participant/useTranscriptionOverflow.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState, type RefObject } from 'react'
+
+export type TranscriptionOverflow = {
+  readonly textRef: RefObject<HTMLParagraphElement | null>
+  readonly isOverflowing: boolean
+}
+
+/** Measures the clamped paragraph; nothing is claimed before layout exists (server render, first paint). */
+export function useTranscriptionOverflow(text: string, isExpanded: boolean): TranscriptionOverflow {
+  const textRef = useRef<HTMLParagraphElement | null>(null)
+  const [isOverflowing, setIsOverflowing] = useState(false)
+
+  useEffect(() => {
+    const element = textRef.current
+    if (!element || isExpanded) return undefined
+    const measure = (): void => setIsOverflowing(element.scrollHeight > element.clientHeight)
+    measure()
+    if (typeof ResizeObserver === 'undefined') return undefined
+    const observer = new ResizeObserver(measure)
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [text, isExpanded])
+
+  return { textRef, isOverflowing }
+}

package/src/participant/useTranscriptionReadyAnnouncement.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react'
+
+import type { ParticipantTranscription } from '@adatechnology/conversation-contracts'
+
+import { useAnnounceCopy } from './ParticipantCopyAnnouncer'
+
+export type TranscriptionReadyAnnouncementParams = {
+  readonly attachmentId: string
+  readonly status: ParticipantTranscription['status'] | undefined
+  readonly text: string
+}
+
+/** Speaks through the thread's existing live region, only for a pending to ready change seen by this mount. */
+export function useTranscriptionReadyAnnouncement({ attachmentId, status, text }: TranscriptionReadyAnnouncementParams): void {
+  const announce = useAnnounceCopy()
+  const previous = useRef({ attachmentId, status })
+
+  useEffect(() => {
+    const before = previous.current
+    previous.current = { attachmentId, status }
+    if (before.attachmentId !== attachmentId) return
+    if (before.status === 'pending' && status === 'ready') announce(text)
+  }, [announce, attachmentId, status, text])
+}

package/src/styles.css

@@ -1188,7 +1188,7 @@
   overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
 }
 
-.cv-p-button, .cv-p-chip, .cv-p-row, .cv-p-thread__older, .cv-p-bubble__retry, .cv-p-bubble__action {
+.cv-p-button, .cv-p-chip, .cv-p-row, .cv-p-thread__older, .cv-p-failed-menu__trigger, .cv-p-failed-menu__item {
   font: inherit; color: inherit; cursor: pointer;
 }
 .cv-p-button {
@@ -1300,20 +1300,50 @@
 }
 .cv-p-bubble__author { display: block; flex: 1 0 100%; margin-bottom: 0.15rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; text-transform: uppercase; color: var(--cv-p-i-accent); }
 .cv-p-bubble > .cv-p-text { flex: 0 1 auto; min-width: 0; margin-inline-end: auto; }
-.cv-p-bubble > .cv-p-attachment, .cv-p-bubble > .cv-p-bubble__actions { flex: 1 0 100%; }
+.cv-p-bubble > .cv-p-attachment { flex: 1 0 100%; }
 .cv-p-bubble__meta { display: flex; flex: 0 0 auto; justify-content: flex-end; align-items: center; gap: 0.35rem; margin-inline-start: auto; margin-top: 0.25rem; font: 0.65rem 'SFMono-Regular', Consolas, monospace; color: var(--cv-p-i-text-muted); }
 .cv-p-bubble__status { display: inline-flex; align-items: center; gap: 0.25rem; }
 .cv-p-bubble .cv-status-ticks--queued, .cv-p-bubble .cv-status-ticks--sent, .cv-p-bubble .cv-status-ticks--delivered { color: var(--cv-p-i-tick); }
 .cv-p-bubble .cv-status-ticks--read { color: var(--cv-p-i-tick-read); }
 .cv-p-bubble .cv-status-ticks--failed { color: var(--cv-p-i-danger); }
-.cv-p-bubble__retry { min-height: var(--cv-p-i-touch); display: inline-flex; align-items: center; gap: 0.25rem; padding: 0 0.5rem; background: transparent; border: 1px solid var(--cv-p-i-danger); color: var(--cv-p-i-danger); border-radius: var(--cv-p-i-radius); font-size: 0.7rem; }
-.cv-p-bubble__actions { display: inline-flex; gap: 0.5rem; margin-top: 0.25rem; }
-.cv-p-bubble__action { min-height: var(--cv-p-i-touch); display: inline-flex; align-items: center; padding: 0 0.75rem; background: transparent; border: 1px solid var(--cv-p-i-border); color: inherit; border-radius: var(--cv-p-i-radius); font-size: 0.7rem; }
+@supports (color: color-mix(in srgb, red, blue)) {
+  .cv-p-bubble--failed { border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border)); --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-border)); }
+  .cv-p-bubble--mine.cv-p-bubble--failed { border-color: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent)); --cv-p-tail-edge: color-mix(in srgb, var(--cv-p-i-danger) 55%, var(--cv-p-i-accent)); }
+}
+.cv-p-failed-retry { position: absolute; top: 50%; right: calc(100% + 0.125rem); transform: translateY(-50%); display: grid; place-items: center; width: var(--cv-p-i-touch); height: var(--cv-p-i-touch); padding: 0; background: transparent; border: 0; color: var(--cv-p-i-danger); font: inherit; cursor: pointer; }
+.cv-p-failed-retry__icon { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--cv-p-i-danger); border-radius: 50%; }
+.cv-p-failed-retry:hover .cv-p-failed-retry__icon, .cv-p-failed-retry:focus-visible .cv-p-failed-retry__icon { background: var(--cv-p-i-surface-raised); }
+.cv-p-failed-menu { display: inline-flex; }
+.cv-p-failed-menu__trigger { position: relative; display: inline-grid; place-items: center; min-width: 1.25rem; height: 0.75rem; padding: 0; background: transparent; border: 0; color: var(--cv-p-i-text-muted); font: inherit; line-height: 0.75rem; cursor: pointer; }
+.cv-p-failed-menu__trigger::after { content: ''; position: absolute; inset: -0.5rem -0.4rem; }
+.cv-p-failed-menu__list { position: absolute; right: 0; bottom: calc(100% + 0.25rem); z-index: 2; display: flex; flex-direction: column; min-width: 8rem; background: var(--cv-p-i-surface-raised); border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); }
+.cv-p-failed-menu__item { min-height: var(--cv-p-i-touch); padding: 0 0.75rem; background: transparent; border: 0; color: var(--cv-p-i-text); font: 0.7rem 'SFMono-Regular', Consolas, monospace; text-align: start; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
+.cv-p-failed-menu__list--below { bottom: auto; top: calc(100% + 0.25rem); }
+.cv-p-failed-menu__item--danger { color: var(--cv-p-i-danger); }
+.cv-p-failed-menu__item:hover, .cv-p-failed-menu__item:focus-visible { background: var(--cv-p-i-highlight); }
 .cv-p-attachment { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; color: inherit; }
 .cv-p-attachment--document { flex-direction: row; justify-content: space-between; min-height: var(--cv-p-i-touch); align-items: center; text-decoration: underline; }
 .cv-p-attachment__image { display: block; max-width: 100%; max-height: 16rem; object-fit: contain; }
 .cv-p-attachment__audio { width: 100%; min-height: var(--cv-p-i-touch); }
+.cv-p-audio { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; width: 100%; min-width: min(15rem, 100%); box-sizing: border-box; }
+.cv-p-audio__toggle, .cv-p-audio__rate { flex: 0 0 auto; display: inline-grid; place-items: center; min-width: var(--cv-p-i-touch); min-height: var(--cv-p-i-touch); padding: 0; background: transparent; border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); color: inherit; font: inherit; font-size: 0.75rem; cursor: pointer; }
+.cv-p-audio__toggle:disabled { opacity: 0.45; cursor: not-allowed; }
+.cv-p-audio__toggle svg { display: block; }
+.cv-p-audio__seek { flex: 1 1 5rem; min-width: 5rem; min-height: var(--cv-p-i-touch); margin: 0; accent-color: var(--cv-p-i-accent); cursor: pointer; }
+.cv-p-audio__time { flex: 0 0 auto; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--cv-p-i-text-muted); }
+.cv-p-audio__media { display: none; }
+.cv-p-audio__error { flex: 1 0 100%; font-size: 0.75rem; }
+.cv-p-recorder .cv-p-audio { flex: 1 1 8rem; width: auto; min-width: 0; }
 .cv-p-attachment__name, .cv-p-attachment__size { font-size: 0.75rem; overflow-wrap: anywhere; }
+.cv-p-transcription { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--cv-p-i-text); }
+.cv-p-transcription--pending, .cv-p-transcription--too-long { font-size: 0.75rem; color: var(--cv-p-i-text-muted); }
+.cv-p-transcription__text, .cv-p-transcription__empty, .cv-p-transcription__notice { margin: 0; overflow-wrap: anywhere; }
+.cv-p-transcription__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; -webkit-user-select: text; user-select: text; }
+.cv-p-transcription__text[data-expanded='true'] { display: block; overflow: visible; }
+.cv-p-transcription__empty { color: var(--cv-p-i-text-muted); }
+.cv-p-transcription__notice { order: 1; font-size: 0.7rem; color: var(--cv-p-i-text-muted); }
+.cv-p-transcription__toggle { order: 2; align-self: flex-start; min-width: var(--cv-p-i-touch); min-height: var(--cv-p-i-touch); padding: 0 0.5rem; background: transparent; border: 0; border-radius: var(--cv-p-i-radius); color: var(--cv-p-i-accent); font: inherit; font-size: 0.75rem; text-decoration: underline; cursor: pointer; }
+.cv-p-transcription__toggle:focus-visible { outline: 2px solid var(--cv-p-i-accent); outline-offset: 2px; }
 
 .cv-p-composer { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0.75rem 0.75rem; background: var(--cv-p-i-surface-raised); border-top: 1px solid var(--cv-p-i-border); }
 .cv-p-composer__row { display: flex; align-items: flex-end; gap: 0.25rem; }
@@ -1323,6 +1353,16 @@
 .cv-p-composer__input { flex: 1 1 auto; min-width: 0; min-height: var(--cv-p-i-touch); max-height: 6.5rem; overflow-y: auto; resize: none; padding: 0.7rem 0.75rem; font: inherit; font-size: 0.9rem; color: inherit; background: var(--cv-p-i-surface); border: 1px solid var(--cv-p-i-border); border-radius: var(--cv-p-i-radius); }
 .cv-p-composer__send { flex: 0 0 auto; padding: 0; margin-inline-start: 0.25rem; }
 .cv-p-composer__error { margin: 0; font-size: 0.8rem; color: var(--cv-p-i-danger); }
+.cv-p-composer__record { flex: 0 0 auto; padding: 0; margin-inline-start: 0.25rem; }
+.cv-p-composer__record svg, .cv-p-recorder svg { display: block; }
+.cv-p-recorder { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
+.cv-p-recorder__hint { flex: 1 1 100%; margin: 0; font-size: 0.8rem; color: var(--cv-p-i-text-muted); }
+.cv-p-recorder__discard { flex: 0 0 auto; padding: 0; color: var(--cv-p-i-text-muted); }
+.cv-p-recorder__dot { flex: 0 0 auto; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--cv-p-i-danger); animation: cv-p-recorder-pulse 1.2s ease-in-out infinite; }
+.cv-p-recorder__elapsed { flex: 1 1 auto; font: 0.85rem 'SFMono-Regular', Consolas, monospace; font-variant-numeric: tabular-nums; color: var(--cv-p-i-text); }
+.cv-p-recorder__stop, .cv-p-recorder__send { flex: 0 0 auto; padding: 0; }
+@keyframes cv-p-recorder-pulse { 50% { opacity: 0.3; } }
+@media (prefers-reduced-motion: reduce) { .cv-p-recorder__dot { animation: none; } }
 .cv-p-quick { --cv-p-i-fade: 0.75rem; display: flex; gap: 0.5rem; overflow-x: auto; margin: -0.25rem calc(-1 * var(--cv-p-i-fade)); padding-block: 0.25rem; }
 .cv-p-files { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
 .cv-p-files__item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
@@ -1416,7 +1456,10 @@
   .cv-p-thread__scroll, .cv-p-inbox, .cv-p-composer__input { scrollbar-width: auto; scrollbar-color: auto; }
   .cv-p-filters, .cv-p-quick { mask-image: none; -webkit-mask-image: none; }
   .cv-p-thread__latest-badge { border: 1px solid ButtonText; }
+  .cv-p-transcription__toggle { color: LinkText; border: 1px solid ButtonText; }
   .cv-p-bubble .cv-status-ticks, .cv-p-copyable__done { color: CanvasText; }
+  .cv-p-failed-menu__list { border-color: CanvasText; }
+  .cv-p-failed-menu__item:focus-visible, .cv-p-failed-menu__item:hover { outline: 2px solid Highlight; }
 }
 @media (forced-colors: active) {
   .cv-p-text__code, .cv-p-text__pre, .cv-p-copyable { border: 1px solid; background: none; }

package/src/tooltipLayerRegistry.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'bun:test'
+
+import { createTooltipLayerRegistry } from './tooltipLayerRegistry'
+
+function track() {
+  const events: boolean[] = []
+  return { events, notify: (isOwner: boolean) => void events.push(isOwner) }
+}
+
+describe('createTooltipLayerRegistry', () => {
+  it('makes the first mounted layer the owner and keeps the others quiet', () => {
+    const registry = createTooltipLayerRegistry()
+    const first = track()
+    const second = track()
+    registry.register({}, first.notify)
+    registry.register({}, second.notify)
+
+    expect(first.events).toEqual([true])
+    expect(second.events).toEqual([])
+  })
+
+  it('hands the ownership to the next mounted layer when the owner unmounts', () => {
+    const registry = createTooltipLayerRegistry()
+    const first = track()
+    const second = track()
+    const third = track()
+    const unmountFirst = registry.register({}, first.notify)
+    registry.register({}, second.notify)
+    registry.register({}, third.notify)
+
+    unmountFirst()
+
+    expect(second.events).toEqual([true])
+    expect(third.events).toEqual([])
+  })
+
+  it('does not disturb the owner when a waiting layer unmounts', () => {
+    const registry = createTooltipLayerRegistry()
+    const first = track()
+    const second = track()
+    registry.register({}, first.notify)
+    registry.register({}, second.notify)()
+
+    expect(first.events).toEqual([true])
+    expect(second.events).toEqual([])
+  })
+
+  it('lets a layer mounted after everyone left become the owner again', () => {
+    const registry = createTooltipLayerRegistry()
+    registry.register({}, () => undefined)()
+    const late = track()
+    registry.register({}, late.notify)
+
+    expect(late.events).toEqual([true])
+  })
+})

package/src/tooltipLayerRegistry.ts

@@ -0,0 +1,34 @@
+export type TooltipLayerRegistry = {
+  /** Mounts a layer; the callback hears when it becomes (true) or stops being (false) the one that draws. */
+  readonly register: (layer: object, onOwnershipChange: (isOwner: boolean) => void) => () => void
+}
+
+/** Layers in mount order: one draws at a time, and when it unmounts the next mounted one takes over. */
+export function createTooltipLayerRegistry(): TooltipLayerRegistry {
+  const layers = new Map<object, (isOwner: boolean) => void>()
+  let owner: object | undefined
+
+  function handOff(): void {
+    const next = layers.entries().next()
+    if (next.done) {
+      owner = undefined
+      return
+    }
+    const [layer, onOwnershipChange] = next.value
+    owner = layer
+    onOwnershipChange(true)
+  }
+
+  return {
+    register(layer, onOwnershipChange) {
+      layers.set(layer, onOwnershipChange)
+      if (owner === undefined) handOff()
+      return () => {
+        layers.delete(layer)
+        if (owner !== layer) return
+        owner = undefined
+        handOff()
+      }
+    },
+  }
+}