studio-engine 0.119.1 → 0.121.0

data/app/javascript/studio/microphone.js

@@ -0,0 +1,250 @@
+// studio/microphone: which microphone a page records from. The one the person
+// picked on the microphone chip (studio/microphone_chip), remembered on this
+// device, or the system default when they never picked one or the picked one
+// is gone. Ported from Voicebox's microphone.js (docs/VOICE_CAPTURE.md).
+//
+// Every recorder opens the microphone through openMicrophone, so the recorder
+// and the chip never disagree about the device. The recorder then tells the
+// chip what it opened, how loud the take is, and when it let go, with EVENTS on
+// window; the chip only listens.
+//
+// Why it exists: Chrome's site setting can pick a microphone that is switched
+// off (a wireless headset) instead of the system's own, and every take then
+// records silence with nothing on the page saying which microphone was used.
+//
+// It imports nothing, so test/javascript/microphone.test.mjs loads it as a
+// data: module.
+
+// Where the pick is remembered (localStorage). One key for every engine page
+// on an origin, so the chip on the hub's chat and on /profile agree. A host
+// that wants its own key calls configureMicrophone({ storageKey }) or renders
+// the chip with storage_key: (studio/voice/_microphone_chip).
+export const STORAGE_KEY = "studio.microphone"
+
+let currentKey = STORAGE_KEY
+
+export function configureMicrophone({ storageKey } = {}) {
+  currentKey = storageKey ? String(storageKey) : STORAGE_KEY
+  return currentKey
+}
+
+export function storageKey() { return currentKey }
+
+export const EVENTS = {
+  opened: "studio:microphone:opened", // detail: { label, deviceId, fellBack }
+  level: "studio:microphone:level", // detail: { rms }
+  closed: "studio:microphone:closed",
+  denied: "studio:microphone:denied",
+  chosen: "studio:microphone:chosen", // detail: { deviceId }
+  silent: "studio:microphone:silent" // detail: { label }: a take came back silent
+}
+
+// Which help to show: Chrome's (and Chromium Edge's, Opera's) site-settings
+// steps, or one generic line for Safari and Firefox. Only desktop and Android
+// Chromium carry "Chrome/" (or Edge's "Edg/"); Chrome and Edge on iOS say
+// "CriOS/" and "EdgiOS/", WebKit underneath with no site-settings icon by the
+// address, so they get the generic line too.
+export function browserFamily(userAgent) {
+  return /(Chrome|Chromium|Edg)\//.test(String(userAgent || "")) ? "chrome" : "other"
+}
+
+// Chrome's two stand-ins for "whatever the system picks". They repeat a real
+// device under another id, so the picker leaves them out when real ones exist.
+const PSEUDO_IDS = ["default", "communications"]
+
+// "Arctis Nova Pro Wireless (1038:12e0)" -> "Arctis Nova Pro Wireless", and
+// Chrome's "Default - MacBook Pro Microphone (Built-in)" ->
+// "MacBook Pro Microphone". The USB vendor:product pair and the "(Built-in)"
+// tag mean nothing to a person.
+export function trimLabel(label) {
+  return String(label || "")
+    .replace(/^(Default|Communications)\s+-\s+/i, "")
+    .replace(/\s*\([0-9a-f]{4}:[0-9a-f]{4}\)/gi, "")
+    .replace(/\s*\(Built-in\)/gi, "")
+    .replace(/\s+/g, " ")
+    .trim()
+}
+
+export function audioInputs(devices) {
+  return Array.from(devices || []).filter((device) => device && device.kind === "audioinput")
+}
+
+// Before the person allows the microphone the browser lists inputs with empty
+// labels (and often empty ids): there is nothing to show yet.
+export function permissionGranted(inputs) {
+  return (inputs || []).some((device) => !!device.label)
+}
+
+// The devices worth offering in the picker: real ones, named, once each.
+export function pickerChoices(inputs) {
+  const named = (inputs || []).filter((device) => device.label && device.deviceId)
+  const real = named.filter((device) => !PSEUDO_IDS.includes(device.deviceId))
+  const seen = new Set()
+  return (real.length ? real : named).flatMap((device) => {
+    if (seen.has(device.deviceId)) return []
+    seen.add(device.deviceId)
+    return [{ deviceId: device.deviceId, label: trimLabel(device.label) }]
+  })
+}
+
+// The remembered device, if it is still plugged in; null means "let the
+// browser pick". Before permission the ids are blank and nothing can be
+// checked, so the remembered one is tried and openMicrophone falls back if the
+// browser says it is gone.
+export function chooseDeviceId(inputs, rememberedId) {
+  if (!rememberedId) return null
+  if (inputs.some((device) => device.deviceId === rememberedId)) return rememberedId
+  if (inputs.every((device) => !device.deviceId)) return rememberedId
+  return null
+}
+
+// The system default, as a device to ask for by id. Chrome lists it as the
+// "default" entry, and a bare { audio: true } does NOT open it: Chrome opens
+// its per-site preference instead, which can be a headset switched off in a
+// drawer. So with nothing picked the page asks for the system default by id,
+// and the chip, which names the system default, names what is opened. The
+// real twin's id when there is one (the track then reports that id), else
+// "default" itself; null where the browser lists no "default" (Safari,
+// Firefox), and there the browser's own choice stands and the opened track
+// corrects the chip.
+export function systemDefaultId(inputs) {
+  const entry = inputs.find((device) => device.deviceId === "default" && device.label)
+  if (!entry) return null
+  const name = trimLabel(entry.label)
+  const twin = inputs.find((device) => device.deviceId && !PSEUDO_IDS.includes(device.deviceId) &&
+                                       trimLabel(device.label) === name)
+  return twin ? twin.deviceId : "default"
+}
+
+export function audioConstraints(deviceId) {
+  return deviceId ? { audio: { deviceId: { exact: deviceId } } } : { audio: true }
+}
+
+// The errors getUserMedia gives when an exact device is not there.
+export function isMissingDevice(error) {
+  return !!error && ["OverconstrainedError", "NotFoundError"].includes(error.name)
+}
+
+// What the chip names before a take has opened anything: the picked device,
+// else the system default's name, else the first input. After a take, the
+// track's own label wins (activeLabel), because that is the device that was
+// actually recorded from.
+export function displayedLabel(inputs, rememberedId, activeLabel) {
+  if (activeLabel) return trimLabel(activeLabel)
+  if (!permissionGranted(inputs)) return null
+  const remembered = rememberedId && inputs.find((device) => device.deviceId === rememberedId && device.label)
+  if (remembered) return trimLabel(remembered.label)
+  const fallback = inputs.find((device) => device.deviceId === "default" && device.label) ||
+                   inputs.find((device) => device.label)
+  return fallback ? trimLabel(fallback.label) : null
+}
+
+// ---- Remembering the choice (localStorage can throw: private mode, blocked
+// site data), so every touch is guarded and a failure means "no choice". ----
+
+function storageOf(storage) {
+  if (storage !== undefined) return storage
+  try { return globalThis.localStorage || null } catch (_) { return null }
+}
+
+export function rememberedDeviceId(storage, key = currentKey) {
+  try { return storageOf(storage)?.getItem(key) || null } catch (_) { return null }
+}
+
+export function rememberDevice(deviceId, storage, key = currentKey) {
+  try {
+    const store = storageOf(storage)
+    if (!store) return
+    if (deviceId) store.setItem(key, deviceId)
+    else store.removeItem(key)
+  } catch (_) { /* nothing remembered: the browser picks next time */ }
+}
+
+export function forgetDevice(storage, key = currentKey) { rememberDevice(null, storage, key) }
+
+export function trackOf(stream) {
+  return (stream && stream.getAudioTracks && stream.getAudioTracks()[0]) || null
+}
+
+// Opens the microphone the person picked, or the system default. A picked
+// device that has gone away is forgotten and the default opened instead
+// (fellBack), so a headset left in a drawer never blocks recording. Other
+// errors (NotAllowedError above all) are the caller's to word.
+//
+// With nothing picked it asks for the system default by id (systemDefaultId),
+// so Chrome's per-site preference never silently wins. Before permission the
+// ids are blank and only a bare request can ask; once that grants permission,
+// a stream that landed on another device is closed and the system default
+// opened in its place, so even the first take records from what the chip will
+// name.
+export async function openMicrophone(mediaDevices = globalThis.navigator && globalThis.navigator.mediaDevices, storage) {
+  const remembered = rememberedDeviceId(storage)
+  const inputs = await listInputs(mediaDevices)
+  const picked = chooseDeviceId(inputs, remembered)
+  let fellBack = !!remembered && !picked
+  if (fellBack) forgetDevice(storage)
+  let deviceId = picked || systemDefaultId(inputs)
+
+  let stream
+  try {
+    stream = await mediaDevices.getUserMedia(audioConstraints(deviceId))
+  } catch (error) {
+    if (!deviceId || !isMissingDevice(error)) throw error
+    if (picked) {
+      forgetDevice(storage)
+      fellBack = true
+    }
+    deviceId = null
+    stream = await mediaDevices.getUserMedia(audioConstraints(null))
+  }
+
+  if (!deviceId && !permissionGranted(inputs)) stream = await reopenSystemDefault(mediaDevices, stream)
+
+  const track = trackOf(stream)
+  const settings = settingsOf(track)
+  const opened = { label: trimLabel(track && track.label), deviceId: settings.deviceId || deviceId || null, fellBack }
+  announce(EVENTS.opened, opened)
+  return { stream, ...opened }
+}
+
+async function listInputs(mediaDevices) {
+  if (!mediaDevices || !mediaDevices.enumerateDevices) return []
+  try { return audioInputs(await mediaDevices.enumerateDevices()) } catch (_) { return [] }
+}
+
+function settingsOf(track) {
+  try { return (track && track.getSettings && track.getSettings()) || {} } catch (_) { return {} }
+}
+
+// After the permission prompt: is the bare request's stream the system
+// default? If it landed elsewhere (Chrome's site preference), let it go and
+// open the system default by id. Any doubt keeps the stream it has.
+export async function reopenSystemDefault(mediaDevices, stream) {
+  const inputs = await listInputs(mediaDevices)
+  const wanted = systemDefaultId(inputs)
+  const track = trackOf(stream)
+  if (!wanted || !track) return stream
+  const got = settingsOf(track).deviceId
+  const wantedLabel = trimLabel((inputs.find((device) => device.deviceId === wanted) || {}).label)
+  if (got === wanted || got === "default" || (wantedLabel && trimLabel(track.label) === wantedLabel)) return stream
+  try {
+    const replacement = await mediaDevices.getUserMedia(audioConstraints(wanted))
+    stream.getTracks().forEach((t) => t.stop())
+    return replacement
+  } catch (_) {
+    return stream
+  }
+}
+
+// Tells the chip (and anything else listening on window).
+export function announce(name, detail = {}, win = globalThis) {
+  try { win.dispatchEvent(new CustomEvent(name, { detail })) } catch (_) { /* no listeners to tell */ }
+}
+
+// The silent-take line that names the microphone, or null when the track had
+// no name to give (then the page's general line stands).
+export function silentMessage(template, label) {
+  const name = trimLabel(label)
+  if (!template || !name) return null
+  return template.replace("%{microphone}", name)
+}

data/app/javascript/studio/microphone_chip.js

@@ -0,0 +1,370 @@
+// studio/microphone_chip: the microphone chip (studio/voice/_microphone_chip).
+// It names the microphone the page records from and, tapped, lists the others;
+// picking one remembers it on this device (studio/microphone), and the next
+// take opens it. Ported from Voicebox's microphone_controller.js
+// (docs/VOICE_CAPTURE.md).
+//
+// It listens and never opens the microphone itself: the recorder
+// (studio/voice_recorder) announces what it opened (EVENTS.opened, with the
+// track's own label), each frame's level while a take records (EVENTS.level,
+// painted as the dot), and when it let go. It re-lists on devicechange, so a
+// headset plugged in or pulled out shows up at once.
+//
+// The list shows every microphone with the one in use marked ("In use").
+// Picking another switches on the page, by device id, and opens the help
+// dialog (studio/voice/_microphone_help) with "Switched to X" on top: Chrome's
+// site settings are where the microphone is ALLOWED, never how the page
+// switches. The dialog also opens on a refused microphone, on the second
+// silent take in a row on one microphone, and from the help link;
+// data-microphone-help says which (switched, denied, silent, help) while open.
+//
+// On the root: data-microphone-state (prompt: not allowed yet, no names;
+// ready; denied; unsupported), data-microphone-label (the name shown),
+// data-microphone-live ("true" while a take records), data-microphone-heard
+// (once a frame of that take cleared SILENCE_RMS), --studio-mic-level (0..1).
+import {
+  EVENTS, audioInputs, permissionGranted, pickerChoices, displayedLabel, configureMicrophone,
+  rememberedDeviceId, rememberDevice, announce, trimLabel, browserFamily
+} from "studio/microphone"
+import { meterLevel, SILENCE_RMS } from "studio/level_meter"
+
+function parseJson(text) {
+  try { return JSON.parse(text || "null") } catch (_) { return null }
+}
+
+// Binds one chip. Returns { refresh, destroy }.
+export function mountMicrophoneChip(root, { win = window } = {}) {
+  const doc = root.ownerDocument
+  const one = (selector) => root.querySelector(selector)
+  const copy = parseJson(root.getAttribute("data-microphone-copy")) || {}
+  const key = root.getAttribute("data-microphone-storage-key")
+  if (key) configureMicrophone({ storageKey: key })
+  const media = win.navigator && win.navigator.mediaDevices
+  const chip = one("[data-microphone-chip]")
+  const panel = one("[data-microphone-panel]")
+  const dialog = one("[data-microphone-dialog]")
+  const browser = browserFamily(win.navigator && win.navigator.userAgent)
+  root.dataset.microphoneBrowser = browser
+
+  let inputs = []
+  let active = null
+  let denied = false
+  let unsupported = false
+  let fellBack = false
+  let silentRun = 0
+  let silentLabel = null
+  let lastTakeSilent = false
+  let helpSession = null
+  let permission = null
+  let destroyed = false
+
+  // ---- What the recorder says ----------------------------------------------
+
+  function opened(detail) {
+    // A take that was heard breaks the silent run.
+    if (!lastTakeSilent) silentRun = 0
+    lastTakeSilent = false
+    denied = false
+    active = detail.label ? detail : null
+    fellBack = !!detail.fellBack
+    root.dataset.microphoneLive = "true"
+    root.dataset.microphoneHeard = "false"
+    paintLevel(0)
+    // Allowing the microphone is what gives the devices their names.
+    refresh()
+  }
+
+  function closed() {
+    root.dataset.microphoneLive = "false"
+    paintLevel(0)
+  }
+
+  function paintLevel(rms) {
+    const level = meterLevel(rms)
+    root.style.setProperty("--studio-mic-level", level.toFixed(3))
+    root.dataset.microphoneLevel = level.toFixed(2)
+    if (rms >= SILENCE_RMS) root.dataset.microphoneHeard = "true"
+  }
+
+  // One silent take is often a pause or a quiet room: the recorder's line
+  // names the microphone and that is enough. Two in a row on the same
+  // microphone means it is not hearing anything, and the help opens.
+  function silentTake(label) {
+    lastTakeSilent = true
+    const name = trimLabel(label)
+    silentRun = name === silentLabel ? silentRun + 1 : 1
+    silentLabel = name
+    if (silentRun < 2) return
+    silentRun = 0
+    openHelp("silent", label)
+  }
+
+  const listeners = [
+    [EVENTS.opened, (event) => opened(event.detail || {})],
+    [EVENTS.level, (event) => paintLevel((event.detail || {}).rms)],
+    [EVENTS.closed, () => closed()],
+    [EVENTS.denied, () => { denied = true; render(); openHelp("denied") }],
+    [EVENTS.silent, (event) => silentTake((event.detail || {}).label)]
+  ]
+
+  // ---- The list ------------------------------------------------------------
+
+  // The browser's own answer, where it gives one: "denied" outlasts a reload,
+  // and a person who allows it in the site settings sees the chip catch up.
+  async function watchPermission() {
+    try {
+      if (!win.navigator.permissions || !win.navigator.permissions.query) return
+      const status = await win.navigator.permissions.query({ name: "microphone" })
+      if (destroyed) return
+      permission = status
+      const apply = () => { denied = status.state === "denied"; refresh() }
+      status.onchange = apply
+      if (status.state === "denied") apply()
+    } catch (_) { /* Firefox before 131 cannot be asked; the takes tell us */ }
+  }
+
+  async function refresh() {
+    if (!media || !media.enumerateDevices) {
+      unsupported = true
+      render()
+      return
+    }
+    try {
+      inputs = audioInputs(await media.enumerateDevices())
+    } catch (_) {
+      inputs = []
+    }
+    if (destroyed) return
+    // The device last recorded from was unplugged: stop naming it.
+    if (active && active.deviceId && permissionGranted(inputs) &&
+        !inputs.some((device) => device.deviceId === active.deviceId)) {
+      active = null
+    }
+    render()
+  }
+
+  function state() {
+    if (unsupported) return "unsupported"
+    if (denied) return "denied"
+    return permissionGranted(inputs) || active ? "ready" : "prompt"
+  }
+
+  function fill(template, name) {
+    return String(template || "").replace("%{microphone}", name)
+  }
+
+  function render() {
+    const now = state()
+    const words = copy[now] || {}
+    const name = now === "ready" ? displayedLabel(inputs, rememberedDeviceId(), active && active.label) : null
+    root.dataset.microphoneState = now
+    root.dataset.microphoneLabel = name || ""
+    root.dataset.microphoneFellBack = fellBack ? "true" : "false"
+    const label = one("[data-microphone-label]")
+    if (label) {
+      label.textContent = now === "ready"
+        ? (name ? fill(words.chip || "%{microphone}", name) : (copy.prompt || {}).chip || "")
+        : words.chip || ""
+    }
+    if (chip) {
+      if (name && words.aria) chip.setAttribute("aria-label", fill(words.aria, name))
+      else chip.removeAttribute("aria-label")
+    }
+    const note = one("[data-microphone-note]")
+    if (note) {
+      const fell = fellBack && name && copy.fell_back ? fill(copy.fell_back, name) : null
+      note.textContent = fell || words.note || ""
+    }
+    renderList(now, note)
+  }
+
+  // One button per microphone, the one in use marked with a check and an
+  // "In use" pill, the rest plain options. Labels go in as text, never as
+  // markup: a device names itself.
+  function renderList(now, note) {
+    const list = one("[data-microphone-list]")
+    if (!list) return
+    const choices = now === "ready" ? pickerChoices(inputs) : []
+    const current = currentDeviceId(choices)
+    list.replaceChildren(...choices.map((choice) => {
+      const inUse = choice.deviceId === current
+      const item = doc.createElement("li")
+      const button = doc.createElement("button")
+      button.type = "button"
+      button.className = "studio-mic-option"
+      button.dataset.microphoneOption = choice.deviceId
+      button.setAttribute("aria-pressed", inUse ? "true" : "false")
+      if (inUse) button.setAttribute("aria-current", "true")
+      const mark = doc.createElement("span")
+      mark.className = "studio-mic-check"
+      mark.setAttribute("aria-hidden", "true")
+      mark.textContent = inUse ? "✓" : ""
+      const label = doc.createElement("span")
+      label.className = "studio-mic-option-label"
+      label.textContent = choice.label
+      button.append(mark, label)
+      if (inUse) {
+        const pill = doc.createElement("span")
+        pill.className = "studio-mic-in-use"
+        pill.textContent = copy.in_use || "In use"
+        button.append(pill)
+      }
+      item.append(button)
+      return item
+    }))
+    if (now === "ready" && choices.length === 0 && note) note.textContent = copy.empty || ""
+  }
+
+  // The picked device, else the one last recorded from, else the system
+  // default's twin among the real devices.
+  function currentDeviceId(choices) {
+    const ids = choices.map((choice) => choice.deviceId)
+    const remembered = rememberedDeviceId()
+    if (remembered && ids.includes(remembered)) return remembered
+    if (active && ids.includes(active.deviceId)) return active.deviceId
+    const name = displayedLabel(inputs, null, active && active.label)
+    const twin = choices.find((choice) => choice.label === name)
+    return twin ? twin.deviceId : null
+  }
+
+  function toggle() {
+    if (!panel) return
+    if (panel.hidden) openPanel()
+    else closePanel()
+  }
+
+  function openPanel() {
+    panel.hidden = false
+    if (chip) chip.setAttribute("aria-expanded", "true")
+    refresh()
+  }
+
+  function closePanel() {
+    if (!panel) return
+    panel.hidden = true
+    if (chip) chip.setAttribute("aria-expanded", "false")
+  }
+
+  function pick(button) {
+    const deviceId = button.dataset.microphoneOption
+    if (!deviceId) return
+    if (button.getAttribute("aria-current") === "true") {
+      closePanel()
+      if (chip) chip.focus()
+      return
+    }
+    rememberDevice(deviceId)
+    // The chip now names the pick; the next take opens it and confirms.
+    active = null
+    fellBack = false
+    announce(EVENTS.chosen, { deviceId }, win)
+    const choice = pickerChoices(inputs).find((c) => c.deviceId === deviceId)
+    render()
+    closePanel()
+    openHelp("switched", choice ? choice.label : "", chip)
+  }
+
+  // ---- The help dialog -----------------------------------------------------
+
+  // kind: switched, denied, silent, or help (no lead line). returnTo: where
+  // focus goes when it closes, else wherever it was when it opened.
+  function openHelp(kind, name = "", returnTo = null) {
+    if (!dialog) return
+    const help = copy.help || {}
+    const chrome = browser === "chrome"
+    const microphone = trimLabel(name) || help.unnamed || "the microphone"
+    const lead = {
+      switched: [help.switched, chrome ? help.switched_tip_chrome : help.switched_tip_other],
+      silent: [help.silent, help.silent_tip],
+      denied: [help.denied, help.denied_tip]
+    }[kind]
+    const leadBox = one("[data-microphone-help-lead]")
+    if (leadBox) leadBox.hidden = !lead
+    if (lead) {
+      const headline = one("[data-microphone-help-headline]")
+      const tip = one("[data-microphone-help-tip]")
+      if (headline) headline.textContent = fill(lead[0], microphone)
+      if (tip) tip.textContent = lead[1] || ""
+    }
+    const title = one("[data-microphone-help-title]")
+    if (title) title.textContent = (chrome ? help.title_chrome : help.title_other) || ""
+    const chromeSteps = one("[data-microphone-help-chrome]")
+    if (chromeSteps) chromeSteps.hidden = !chrome
+    const other = one("[data-microphone-help-other]")
+    if (other) other.hidden = chrome
+    root.dataset.microphoneHelp = kind
+
+    if (dialog.open) return
+    helpSession = { returnFocus: returnTo || doc.activeElement, done: false }
+    if (typeof dialog.showModal === "function") dialog.showModal()
+    else dialog.setAttribute("open", "")
+    const close = one("[data-microphone-help-close]")
+    if (close) close.focus()
+  }
+
+  // Esc, Close or a backdrop click: focus goes back where it came from.
+  //
+  // The close event is queued, so one from an earlier opening can land late:
+  // while the dialog is open again (ignored), or after the newer opening has
+  // closed too. Each opening is a session that hands focus back once.
+  function helpClosed() {
+    const session = helpSession
+    if (!session || session.done || dialog.open) return
+    session.done = true
+    delete root.dataset.microphoneHelp
+    const back = session.returnFocus
+    const target = back && back.isConnected && back.offsetParent !== null ? back : chip
+    if (target) target.focus()
+  }
+
+  // ---- Wiring --------------------------------------------------------------
+
+  function onClick(event) {
+    const target = event.target
+    if (!target.closest) return
+    // A click on the backdrop lands on the dialog element itself.
+    if (dialog && target === dialog) { dialog.close(); return }
+    const option = target.closest("[data-microphone-option]")
+    if (option && root.contains(option)) { pick(option); return }
+    if (target.closest("[data-microphone-help-link]")) {
+      openHelp("help", "", target.closest("[data-microphone-help-link]"))
+      return
+    }
+    if (chip && target.closest("[data-microphone-chip]") === chip) toggle()
+  }
+
+  // Esc closes the list, but an Esc inside the help dialog is the dialog's: it
+  // shuts the dialog and leaves the list where it was.
+  function onKey(event) {
+    if (event.key !== "Escape") return
+    if (dialog && dialog.contains(event.target)) return
+    closePanel()
+  }
+
+  const onDeviceChange = () => refresh()
+  const onDialogClose = () => helpClosed()
+
+  listeners.forEach(([name, fn]) => win.addEventListener(name, fn))
+  root.addEventListener("click", onClick)
+  root.addEventListener("keydown", onKey)
+  if (dialog) dialog.addEventListener("close", onDialogClose)
+  if (media && media.addEventListener) media.addEventListener("devicechange", onDeviceChange)
+  watchPermission()
+  refresh()
+  root.dataset.microphoneReady = "true"
+
+  return {
+    refresh,
+    destroy() {
+      destroyed = true
+      listeners.forEach(([name, fn]) => win.removeEventListener(name, fn))
+      root.removeEventListener("click", onClick)
+      root.removeEventListener("keydown", onKey)
+      if (dialog) dialog.removeEventListener("close", onDialogClose)
+      if (media && media.removeEventListener) media.removeEventListener("devicechange", onDeviceChange)
+      if (permission) permission.onchange = null
+      if (dialog && dialog.open) dialog.close()
+      delete root.dataset.microphoneReady
+    }
+  }
+}

data/app/javascript/studio/stimulus.js

@@ -57,7 +57,12 @@ export const schema = {
 // knowledge transcript: a recording whose controller failed still plays from
 // its own controls, and its page says that click-to-play did not load. So is the
 // agent chat: a chat whose controller failed still renders, and its section
-// carries data-studio-controller-failed="agent-chat".
+// carries data-studio-controller-failed="agent-chat". So is the voice row: a
+// row whose controller failed keeps its saved state and its Delete, and says
+// that recording did not load (data-studio-controller-failed="voice-profile").
+// So are the voice capture pair (docs/VOICE_CAPTURE.md): a chip whose controller
+// failed still shows its prompt line, and a recorder whose controller failed
+// says recording did not load (data-studio-controller-failed="voice-recorder").
 export const LAZY = {
   "board": () => import("studio/controllers/board_controller"),
   "geo-settings": () => import("studio/controllers/geo_settings_controller"),
@@ -67,7 +72,10 @@ export const LAZY = {
   "footer-map": () => import("studio/controllers/footer_map_controller"),
   "survey": () => import("studio/controllers/survey_controller"),
   "knowledge-transcript": () => import("studio/controllers/knowledge_transcript_controller"),
-  "agent-chat": () => import("studio/controllers/agent_chat_controller")
+  "agent-chat": () => import("studio/controllers/agent_chat_controller"),
+  "voice-profile": () => import("studio/controllers/voice_profile_controller"),
+  "microphone-chip": () => import("studio/controllers/microphone_chip_controller"),
+  "voice-recorder": () => import("studio/controllers/voice_recorder_controller")
 }
 
 export const application = Application.start(document.documentElement, schema)