studio-engine 0.120.0 → 0.121.0

data/app/javascript/studio/voice_recorder.js

@@ -0,0 +1,352 @@
+// studio/voice_recorder: one record button that captures a take and hands the
+// finished audio to the page. It never uploads: the page listens for the take
+// event and decides where the audio goes (a chat message, a transcript, an
+// embedding). Ported from Voicebox's recorder_controller.js; the contract is in
+// docs/VOICE_CAPTURE.md.
+//
+//   <div data-studio-controller="voice-recorder" data-voice-recorder-state="idle"
+//        data-voice-recorder-max-ms="60000" data-voice-recorder-mode="toggle"
+//        data-voice-recorder-copy='{"idle":{"button":"Talk"}}'>
+//     <button type="button" data-voice-recorder-button>
+//       <span data-voice-recorder-label>Record</span></button>
+//     <span data-voice-recorder-timer>0:00</span>
+//     <p data-voice-recorder-status role="status"></p>
+//   </div>
+//
+// STATES, on data-voice-recorder-state: idle -> starting -> recording ->
+// captured | silent | failed, plus denied (the microphone was refused) and
+// unsupported (no MediaRecorder). Any of idle, captured, silent, failed and
+// denied takes a new press.
+//
+// EVENTS, dispatched on the root (they bubble):
+//   studio:voice-recorder:take    detail { blob, mimeType, durationMs, peakRms, microphone: { label, deviceId } }
+//   studio:voice-recorder:silent  detail { durationMs, microphone }  (nothing heard: no blob is handed over)
+//   studio:voice-recorder:state   detail { state }
+// and, on window, studio/microphone's EVENTS, which the chip listens to.
+//
+// MODES: "toggle" (tap to start, tap to stop) or "hold" (press and hold to
+// talk; letting go stops). While it records, --studio-recorder-level (0..1) on
+// the root drives the ring (studio/level_meter), and data-voice-recorder-heard
+// turns "true" once a frame clears SILENCE_RMS.
+import { openMicrophone, announce, silentMessage, EVENTS as MICROPHONE_EVENTS } from "studio/microphone"
+import { createLevelMeter, SILENCE_RMS } from "studio/level_meter"
+
+export const EVENTS = {
+  take: "studio:voice-recorder:take",
+  silent: "studio:voice-recorder:silent",
+  state: "studio:voice-recorder:state"
+}
+
+// What to ask MediaRecorder for, in order: webm/opus on Chrome and Firefox,
+// mp4/aac on iOS Safari. The first the browser supports wins.
+export const MIME_CANDIDATES = [
+  "audio/webm;codecs=opus",
+  "audio/webm",
+  "audio/mp4;codecs=mp4a.40.2",
+  "audio/mp4",
+  "audio/ogg;codecs=opus"
+]
+
+export const READY = ["idle", "captured", "silent", "failed", "denied"]
+
+// How long a take may stay silent before the status asks whether the
+// microphone is on.
+export const QUIET_HINT_MS = 2500
+
+export const COPY = {
+  idle: { button: "Record", status: "" },
+  starting: { button: "Starting...", status: "" },
+  recording: { button: "Stop", status: "Listening...", quiet: "I can't hear anything yet. Is your microphone on?", heard: "Listening..." },
+  captured: { button: "Record again", status: "Got it." },
+  silent: { button: "Record", status: "I couldn't hear anything. Check your microphone and try again.",
+            named: "I couldn't hear anything from %{microphone}. Pick another microphone and try again." },
+  failed: { button: "Try again", status: "That didn't record. Try again.", start: "I couldn't start recording. Try again.",
+            missing: "I couldn't find a microphone. Plug one in and try again." },
+  denied: { button: "Record", status: "Allow the microphone to record." },
+  unsupported: { button: "Record", status: "This browser can't record here. Try Safari or Chrome." }
+}
+
+export function pickMimeType(isTypeSupported) {
+  if (typeof isTypeSupported !== "function") return ""
+  return MIME_CANDIDATES.find((type) => {
+    try { return isTypeSupported(type) } catch (_) { return false }
+  }) || ""
+}
+
+export function formatElapsed(ms) {
+  const seconds = Math.max(0, Math.floor(ms / 1000))
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`
+}
+
+// The page's words over the defaults, one state at a time.
+export function mergeCopy(overrides) {
+  const merged = {}
+  Object.keys(COPY).forEach((state) => { merged[state] = { ...COPY[state] } })
+  if (overrides && typeof overrides === "object") {
+    Object.entries(overrides).forEach(([state, words]) => {
+      if (words && typeof words === "object") merged[state] = { ...(merged[state] || {}), ...words }
+    })
+  }
+  return merged
+}
+
+function parseJson(text) {
+  try { return JSON.parse(text || "null") } catch (_) { return null }
+}
+
+// Binds one recorder. Returns { start, stop, toggle, destroy, get state }.
+// options.open and options.meter replace openMicrophone and createLevelMeter
+// (the unit tests pass stubs).
+export function mountVoiceRecorder(root, { win = window, open = openMicrophone, meter: makeMeter = createLevelMeter } = {}) {
+  const one = (selector) => root.querySelector(selector)
+  const copy = mergeCopy(parseJson(root.getAttribute("data-voice-recorder-copy")))
+  const maxMs = parseInt(root.getAttribute("data-voice-recorder-max-ms") || "0", 10) || 0
+  const mode = root.getAttribute("data-voice-recorder-mode") === "hold" ? "hold" : "toggle"
+  const now = () => win.performance.now()
+
+  let state = null
+  let stream = null
+  let recorder = null
+  let meter = null
+  let chunks = []
+  let timer = null
+  let startedAt = 0
+  let microphone = { label: "", deviceId: null }
+  let hinted = null
+  let stopWanted = false
+  let destroyed = false
+
+  function setState(next, message = null) {
+    state = next
+    root.dataset.voiceRecorderState = next
+    const words = copy[next] || {}
+    const label = one("[data-voice-recorder-label]")
+    if (label && words.button) label.textContent = words.button
+    const status = one("[data-voice-recorder-status]")
+    if (status) status.textContent = message || words.status || ""
+    const button = one("[data-voice-recorder-button]")
+    if (button) {
+      button.setAttribute("aria-pressed", next === "recording" ? "true" : "false")
+      button.disabled = next === "unsupported"
+    }
+    if (next === "idle") paintTimer(0)
+    root.dispatchEvent(new win.CustomEvent(EVENTS.state, { bubbles: true, detail: { state: next } }))
+  }
+
+  function supported() {
+    return !!(win.MediaRecorder && win.navigator && win.navigator.mediaDevices && win.navigator.mediaDevices.getUserMedia)
+  }
+
+  function paintLevel(level) {
+    root.style.setProperty("--studio-recorder-level", level.toFixed(3))
+    root.dataset.voiceRecorderLevel = level.toFixed(2)
+  }
+
+  function paintTimer(ms) {
+    const el = one("[data-voice-recorder-timer]")
+    if (el) el.textContent = formatElapsed(ms)
+  }
+
+  function hint(kind) {
+    if (state !== "recording" || hinted === kind || !copy.recording[kind]) return
+    hinted = kind
+    const status = one("[data-voice-recorder-status]")
+    if (status) status.textContent = copy.recording[kind]
+  }
+
+  function onSample(rms) {
+    announce(MICROPHONE_EVENTS.level, { rms }, win)
+    if (rms >= SILENCE_RMS && root.dataset.voiceRecorderHeard !== "true") {
+      root.dataset.voiceRecorderHeard = "true"
+      hint("heard")
+    } else if (root.dataset.voiceRecorderHeard !== "true" && startedAt && now() - startedAt > QUIET_HINT_MS) {
+      hint("quiet")
+    }
+    root.dataset.voiceRecorderPeak = meter ? meter.peak.toFixed(4) : "0"
+  }
+
+  function stopTimer() {
+    if (timer) win.clearInterval(timer)
+    timer = null
+  }
+
+  // Lets go of the meter and the microphone, and tells the chip.
+  function release() {
+    stopTimer()
+    if (meter) meter.close()
+    meter = null
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop())
+      announce(MICROPHONE_EVENTS.closed, {}, win)
+    }
+    stream = null
+  }
+
+  async function start() {
+    if (destroyed || !READY.includes(state)) return
+    stopWanted = false
+    setState("starting")
+    let opened
+    try {
+      opened = await open(win.navigator.mediaDevices)
+    } catch (error) {
+      if (destroyed) return
+      const denied = error && error.name === "NotAllowedError"
+      if (denied) announce(MICROPHONE_EVENTS.denied, {}, win)
+      setState(denied ? "denied" : "failed", denied ? null : copy.failed.missing)
+      return
+    }
+    stream = opened.stream
+    microphone = { label: opened.label || "", deviceId: opened.deviceId || null }
+    // Destroyed, or let go of (hold mode) before the microphone opened.
+    if (destroyed || stopWanted) {
+      release()
+      if (!destroyed) setState("idle")
+      return
+    }
+    chunks = []
+    try {
+      begin(stream)
+    } catch (_) {
+      // MediaRecorder refused the stream: let go of the microphone, the meter
+      // and its frames rather than leave them running.
+      recorder = null
+      release()
+      setState("failed", copy.failed.start)
+    }
+  }
+
+  function begin(source) {
+    root.dataset.voiceRecorderHeard = "false"
+    root.dataset.voiceRecorderPeak = "0"
+    hinted = null
+    meter = makeMeter(source, { win, onSample, onPaint: paintLevel })
+    const MediaRecorderClass = win.MediaRecorder
+    const mimeType = pickMimeType(MediaRecorderClass.isTypeSupported && MediaRecorderClass.isTypeSupported.bind(MediaRecorderClass))
+    try {
+      recorder = mimeType ? new MediaRecorderClass(source, { mimeType }) : new MediaRecorderClass(source)
+    } catch (_) {
+      recorder = new MediaRecorderClass(source)
+    }
+    recorder.addEventListener("dataavailable", (event) => {
+      if (event.data && event.data.size > 0) chunks.push(event.data)
+    })
+    recorder.addEventListener("stop", () => finish())
+    recorder.start(250)
+    startedAt = now()
+    paintTimer(0)
+    timer = win.setInterval(() => {
+      const elapsed = now() - startedAt
+      paintTimer(elapsed)
+      if (maxMs && elapsed >= maxMs) stop()
+    }, 250)
+    setState("recording")
+  }
+
+  function stop() {
+    if (state === "starting") { stopWanted = true; return }
+    if (recorder && recorder.state !== "inactive") recorder.stop()
+  }
+
+  function finish() {
+    const durationMs = Math.round(now() - startedAt)
+    stopTimer()
+    if (meter) meter.sample()
+    const heard = meter ? meter.heard() : true
+    const peakRms = meter ? meter.peak : 0
+    const type = (recorder && recorder.mimeType) || (chunks[0] && chunks[0].type) || "audio/webm"
+    const blob = new win.Blob(chunks, { type })
+    chunks = []
+    recorder = null
+    release()
+    if (destroyed) return
+    if (blob.size === 0 || !heard) {
+      setState("silent", silentMessage(copy.silent.named, microphone.label))
+      announce(MICROPHONE_EVENTS.silent, { label: microphone.label }, win)
+      root.dispatchEvent(new win.CustomEvent(EVENTS.silent, { bubbles: true, detail: { durationMs, microphone: { ...microphone } } }))
+      return
+    }
+    setState("captured")
+    root.dispatchEvent(new win.CustomEvent(EVENTS.take, {
+      bubbles: true,
+      detail: { blob, mimeType: type, durationMs, peakRms, microphone: { ...microphone } }
+    }))
+  }
+
+  function toggle() {
+    if (state === "recording" || state === "starting") stop()
+    else start()
+  }
+
+  // Buttons inside the root: the record button follows the mode.
+  function onClick(event) {
+    if (mode !== "toggle") return
+    const button = event.target.closest && event.target.closest("[data-voice-recorder-button]")
+    if (!button || !root.contains(button)) return
+    event.preventDefault()
+    toggle()
+  }
+
+  function onPointerDown(event) {
+    if (mode !== "hold") return
+    const button = event.target.closest && event.target.closest("[data-voice-recorder-button]")
+    if (!button || !root.contains(button)) return
+    event.preventDefault()
+    if (button.setPointerCapture && event.pointerId != null) {
+      try { button.setPointerCapture(event.pointerId) } catch (_) { /* a synthetic pointer */ }
+    }
+    start()
+  }
+
+  function onPointerUp() {
+    if (mode === "hold" && (state === "recording" || state === "starting")) stop()
+  }
+
+  // Hold mode by keyboard: Space or Enter held down records.
+  function onKeyDown(event) {
+    if (mode !== "hold" || event.repeat || ![" ", "Enter"].includes(event.key)) return
+    if (!event.target.closest || !event.target.closest("[data-voice-recorder-button]")) return
+    event.preventDefault()
+    start()
+  }
+
+  function onKeyUp(event) {
+    if (mode !== "hold" || ![" ", "Enter"].includes(event.key)) return
+    event.preventDefault()
+    onPointerUp()
+  }
+
+  root.addEventListener("click", onClick)
+  root.addEventListener("pointerdown", onPointerDown)
+  root.addEventListener("pointerup", onPointerUp)
+  root.addEventListener("pointercancel", onPointerUp)
+  root.addEventListener("keydown", onKeyDown)
+  root.addEventListener("keyup", onKeyUp)
+  root.dataset.voiceRecorderMode = mode
+  paintLevel(0)
+  if (supported()) setState("idle")
+  else setState("unsupported")
+  root.dataset.voiceRecorderReady = "true"
+
+  return {
+    start,
+    stop,
+    toggle,
+    get state() { return state },
+    destroy() {
+      destroyed = true
+      root.removeEventListener("click", onClick)
+      root.removeEventListener("pointerdown", onPointerDown)
+      root.removeEventListener("pointerup", onPointerUp)
+      root.removeEventListener("pointercancel", onPointerUp)
+      root.removeEventListener("keydown", onKeyDown)
+      root.removeEventListener("keyup", onKeyUp)
+      if (recorder && recorder.state !== "inactive") {
+        try { recorder.stop() } catch (_) { /* already stopped */ }
+      }
+      recorder = null
+      release()
+      delete root.dataset.voiceRecorderReady
+    }
+  }
+}

data/app/views/studio/voice/_microphone_chip.html.erb

@@ -0,0 +1,45 @@
+<%# The microphone chip (docs/VOICE_CAPTURE.md): names the microphone the page
+    records from, and a tap lists every microphone, the one in use marked, to
+    pick from (studio/microphone_chip, studio/microphone). While a take records
+    the dot beside the name shows the live level, so a dead microphone is
+    visible at a glance. Help: studio/voice/_microphone_help, inside it.
+
+    Locals, all optional:
+      copy:        overrides merged over Studio::VoiceCapture::MICROPHONE_COPY
+      storage_key: where the pick is remembered (default "studio.microphone")
+      id:          the picker's id, for aria-controls (one chip per page needs
+                   none; two chips need two ids)
+
+    The chip never opens the microphone: a recorder (studio/voice/_recorder or
+    any studio/voice_recorder) does, and the chip listens on window. The
+    controller is lazy (studio/stimulus); if it fails to load, the root carries
+    data-studio-controller-failed="microphone-chip" and says that picking a
+    microphone did not load (the recorder still uses the system default). %>
+<% copy = Studio::VoiceCapture.microphone_copy(local_assigns[:copy]) %>
+<% picker_id = local_assigns.fetch(:id, "studio-microphone-picker") %>
+<% storage_key = local_assigns.fetch(:storage_key, Studio::VoiceCapture::STORAGE_KEY) %>
+<%= render "studio/voice/styles" %>
+<div class="studio-mic"
+     data-studio-controller="microphone-chip"
+     data-microphone-state="prompt"
+     data-microphone-storage-key="<%= storage_key %>"
+     data-microphone-copy="<%= copy.to_json %>">
+  <button type="button" class="studio-mic-chip" data-microphone-chip aria-expanded="false" aria-controls="<%= picker_id %>">
+    <svg class="studio-mic-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M12 2a3.5 3.5 0 0 0-3.5 3.5v6a3.5 3.5 0 0 0 7 0v-6A3.5 3.5 0 0 0 12 2Z"/>
+      <path d="M6 10.5a1 1 0 1 0-2 0 8 8 0 0 0 7 7.94V21H8.5a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2H13v-2.56a8 8 0 0 0 7-7.94 1 1 0 1 0-2 0 6 6 0 0 1-12 0Z"/>
+    </svg>
+    <span class="studio-mic-dot" data-microphone-dot aria-hidden="true"></span>
+    <span class="studio-mic-name" data-microphone-label><%= copy.dig("prompt", "chip") %></span>
+    <svg class="studio-mic-caret" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true">
+      <path d="M2.2 4.2a.75.75 0 0 1 1.06 0L6 6.94l2.74-2.74a.75.75 0 1 1 1.06 1.06L6.53 8.53a.75.75 0 0 1-1.06 0L2.2 5.26a.75.75 0 0 1 0-1.06Z"/>
+    </svg>
+  </button>
+  <div id="<%= picker_id %>" class="studio-mic-panel card" data-microphone-panel hidden>
+    <p class="studio-mic-note" data-microphone-note role="status"><%= copy.dig("prompt", "note") %></p>
+    <ul class="studio-mic-list" data-microphone-list aria-label="Microphones"></ul>
+    <button type="button" class="studio-mic-help-link" data-microphone-help-link><%= copy.dig("help", "link") %></button>
+  </div>
+  <p class="studio-mic-failed"><%= copy["unavailable"] %></p>
+  <%= render "studio/voice/microphone_help", copy: copy, title_id: "#{picker_id}-help-title" %>
+</div>

data/app/views/studio/voice/_microphone_help.html.erb

@@ -0,0 +1,63 @@
+<%# "How to change your microphone in Chrome": a native modal <dialog> inside
+    the microphone chip (studio/voice/_microphone_chip). showModal() makes the
+    page behind it inert, so focus stays inside; Esc and Close shut it, and
+    focus goes back where it was (studio/microphone_chip). It opens after a
+    switch, on a refused microphone, on the second silent take in a row on one
+    microphone, and from the picker's help link. The lead line on top says
+    which; the browser decides between Chrome's steps and one generic line
+    (browserFamily, studio/microphone). The picture is a drawn, simplified
+    address bar, never a screenshot.
+
+    Locals: copy (the chip's merged copy), title_id. %>
+<% help = copy.fetch("help") %>
+<dialog class="studio-mic-help" data-microphone-dialog aria-labelledby="<%= title_id %>">
+  <div class="studio-mic-help-body">
+    <div class="studio-mic-help-lead" data-microphone-help-lead hidden>
+      <p class="studio-mic-help-headline" data-microphone-help-headline></p>
+      <p class="studio-mic-help-tip" data-microphone-help-tip></p>
+    </div>
+
+    <h2 id="<%= title_id %>" class="studio-mic-help-title" data-microphone-help-title><%= help.fetch("title_chrome") %></h2>
+
+    <div class="studio-mic-help-chrome" data-microphone-help-chrome>
+      <svg class="studio-mic-mock" viewBox="0 0 320 168" role="img" aria-label="A drawing of Chrome's address bar: the site settings icon left of the address is circled, and below it the Microphone setting is on with its list of microphones.">
+        <rect x="4" y="6" width="312" height="36" rx="18" class="mock-bar"/>
+        <circle cx="26" cy="24" r="14" class="mock-ring"/>
+        <g class="mock-ink" stroke-width="2" stroke-linecap="round">
+          <line x1="19" y1="20" x2="33" y2="20"/><circle cx="23" cy="20" r="2.5" class="mock-knob"/>
+          <line x1="19" y1="28" x2="33" y2="28"/><circle cx="29" cy="28" r="2.5" class="mock-knob"/>
+        </g>
+        <text x="48" y="29" class="mock-text" font-size="13"><%= request.host %></text>
+        <rect x="12" y="54" width="232" height="106" rx="10" class="mock-panel"/>
+        <g class="mock-ink" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="26" y="68" width="8" height="13" rx="4"/><path d="M23 77a7 7 0 0 0 14 0M30 84v4"/>
+        </g>
+        <text x="46" y="82" class="mock-text" font-size="13" font-weight="600">Microphone</text>
+        <rect x="196" y="70" width="34" height="18" rx="9" class="mock-on"/>
+        <circle cx="221" cy="79" r="6" class="mock-knob-on"/>
+        <rect x="26" y="102" width="204" height="44" rx="8" class="mock-ring"/>
+        <text x="38" y="129" class="mock-text" font-size="12">MacBook Pro Microphone</text>
+        <path d="M212 120l5 5 5-5" class="mock-ink" stroke-width="2" fill="none" stroke-linecap="round"/>
+        <g font-size="11" font-weight="700" text-anchor="middle">
+          <circle cx="50" cy="8" r="8" class="mock-badge"/><text x="50" y="12" class="mock-badge-text">1</text>
+          <circle cx="252" cy="70" r="8" class="mock-badge"/><text x="252" y="74" class="mock-badge-text">2</text>
+          <circle cx="252" cy="118" r="8" class="mock-badge"/><text x="252" y="122" class="mock-badge-text">3</text>
+        </g>
+      </svg>
+      <ol class="studio-mic-help-steps" data-microphone-help-steps>
+        <% help.fetch("steps_chrome").each_with_index do |step, i| %>
+          <li>
+            <span class="studio-mic-step" aria-hidden="true"><%= i + 1 %></span>
+            <span><%= step %></span>
+          </li>
+        <% end %>
+      </ol>
+    </div>
+
+    <p class="studio-mic-help-other" data-microphone-help-other hidden><%= help.fetch("other") %></p>
+
+    <form method="dialog" class="studio-mic-help-actions">
+      <button type="submit" class="btn btn-primary studio-mic-help-close" data-microphone-help-close><%= help.fetch("close") %></button>
+    </form>
+  </div>
+</dialog>

data/app/views/studio/voice/_recorder.html.erb

@@ -0,0 +1,34 @@
+<%# The record button (docs/VOICE_CAPTURE.md): studio/voice_recorder opens the
+    microphone through studio/microphone (so it records from what the chip
+    names), runs the engine's one level meter (studio/level_meter) as the ring
+    around the button, refuses a silent take, and hands a heard take to the page
+    as a studio:voice-recorder:take event with the blob. It uploads nothing:
+    the page that renders it decides where the audio goes.
+
+    Locals, all optional:
+      copy:   per-state words merged over studio/voice_recorder's COPY
+              (e.g. { "idle" => { "button" => "Talk" } })
+      mode:   "toggle" (tap to start, tap to stop; the default) or "hold"
+              (press and hold to talk)
+      max_ms: stop a take on its own after this long (default 60000)
+      id:     an id for the root, for a page's own listener
+
+    The controller is lazy (studio/stimulus); if it fails to load, the root
+    carries data-studio-controller-failed="voice-recorder" and says so. %>
+<% copy = Studio::VoiceCapture.recorder_copy(local_assigns[:copy]) %>
+<% mode = local_assigns.fetch(:mode, "toggle").to_s == "hold" ? "hold" : "toggle" %>
+<%= render "studio/voice/styles" %>
+<div class="studio-recorder"
+     <%= tag.attributes(id: local_assigns[:id]) %>
+     data-studio-controller="voice-recorder"
+     data-voice-recorder-state="idle"
+     data-voice-recorder-mode="<%= mode %>"
+     data-voice-recorder-max-ms="<%= local_assigns.fetch(:max_ms, 60_000).to_i %>"
+     data-voice-recorder-copy="<%= copy.except("unavailable").to_json %>">
+  <button type="button" class="studio-recorder-button" data-voice-recorder-button aria-pressed="false">
+    <span data-voice-recorder-label><%= copy.dig("idle", "button") %></span>
+  </button>
+  <span class="studio-recorder-timer" data-voice-recorder-timer aria-hidden="true">0:00</span>
+  <p class="studio-recorder-status" data-voice-recorder-status role="status" aria-live="polite"></p>
+  <p class="studio-recorder-failed"><%= copy["unavailable"] %></p>
+</div>

data/app/views/studio/voice/_styles.html.erb

@@ -0,0 +1,90 @@
+<%# The voice capture layer's scoped CSS (docs/VOICE_CAPTURE.md), rendered by
+    the chip and the recorder partials. Scoped classes rather than utilities, as
+    in studio/profiles/_voice_section: the chip, the dot, the ring and the help
+    drawing must render in an app whose Tailwind build never saw these files.
+    Every colour is a theme token (the primary through --color-primary-500-rgb
+    and the CTA fill under its label), so dark mode and each app's palette come
+    for free. Tap targets are 44px. A page rendering both partials carries this
+    block twice, which is harmless. %>
+<style>
+  .studio-mic { display: flex; width: 100%; flex-direction: column; align-items: center; gap: .5rem; }
+  .studio-mic-chip { display: inline-flex; min-height: 44px; max-width: 100%; align-items: center; gap: .5rem;
+    border-radius: 1.5rem; border: 1px solid var(--color-border, rgb(127 127 127 / .25));
+    background: var(--color-inset, rgb(127 127 127 / .12)); padding: .5rem 1rem; font-size: .875rem; font-weight: 600;
+    color: var(--color-text, inherit); cursor: pointer; text-align: left; }
+  .studio-mic-chip:focus-visible { outline: 3px solid rgb(var(--color-primary-500-rgb, 99 102 241) / .5); outline-offset: 2px; }
+  .studio-mic-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--color-text-secondary, currentColor); }
+  .studio-mic-name { min-width: 0; overflow-wrap: anywhere; }
+  .studio-mic-caret { width: .75rem; height: .75rem; flex-shrink: 0; color: var(--color-text-muted, currentColor); }
+  .studio-mic-chip[aria-expanded="true"] .studio-mic-caret { transform: rotate(180deg); }
+  [data-microphone-state="denied"] .studio-mic-chip { border-color: rgb(var(--color-primary-500-rgb, 99 102 241)); }
+  /* The live dot: hollow while nothing records; while a take records it fills
+     with the primary colour as loud as the voice (--studio-mic-level, 0..1). */
+  .studio-mic-dot { width: .625rem; height: .625rem; flex-shrink: 0; border-radius: 9999px; border: 2px solid currentColor; opacity: .35; }
+  [data-microphone-live="true"] .studio-mic-dot { opacity: 1; border-color: rgb(var(--color-primary-500-rgb, 99 102 241));
+    background-color: rgb(var(--color-primary-500-rgb, 99 102 241) / calc(.15 + var(--studio-mic-level, 0) * .85));
+    transform: scale(calc(1 + var(--studio-mic-level, 0) * .5)); transition: transform 80ms linear, background-color 80ms linear; }
+  .studio-mic-panel { width: 100%; max-width: 24rem; padding: .75rem; text-align: left; display: grid; gap: .5rem; }
+  .studio-mic-panel[hidden] { display: none; }
+  .studio-mic-note { font-size: .875rem; color: var(--color-text-muted, inherit); }
+  .studio-mic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
+  .studio-mic-option { display: flex; min-height: 44px; width: 100%; align-items: center; gap: .5rem; border-radius: .75rem;
+    border: 1px solid transparent; background: transparent; padding: .5rem .75rem; text-align: left; font-size: .875rem;
+    color: var(--color-text, inherit); cursor: pointer; }
+  .studio-mic-option:hover { background-color: rgb(var(--color-primary-500-rgb, 99 102 241) / .08); }
+  .studio-mic-option[aria-current="true"] { border-color: rgb(var(--color-primary-500-rgb, 99 102 241));
+    background-color: rgb(var(--color-primary-500-rgb, 99 102 241) / .12); font-weight: 600; }
+  .studio-mic-check { width: 1rem; flex-shrink: 0; font-weight: 700; color: rgb(var(--color-primary-500-rgb, 99 102 241)); }
+  .studio-mic-option-label { min-width: 0; flex: 1; overflow-wrap: anywhere; }
+  .studio-mic-in-use { flex-shrink: 0; border-radius: 9999px; padding: .125rem .5rem; font-size: .75rem; font-weight: 700;
+    background: var(--color-cta-fill, var(--color-cta, rgb(var(--color-primary-500-rgb, 99 102 241)))); color: var(--btn-primary-fg, #fff); }
+  .studio-mic-help-link { min-height: 44px; width: 100%; border-radius: .75rem; padding: 0 .75rem; text-align: left; font-size: .875rem;
+    font-weight: 600; color: var(--color-text-secondary, inherit); text-decoration: underline; background: transparent; border: 0; cursor: pointer; }
+  /* The help dialog: a native modal <dialog>, so the page behind it is inert. */
+  .studio-mic-help { border: 0; padding: 0; margin: auto; width: min(28rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
+    overflow-y: auto; text-align: left; color: var(--color-text-body, inherit); background: var(--color-surface, Canvas); border-radius: 1rem; }
+  .studio-mic-help::backdrop { background-color: rgb(0 0 0 / .55); }
+  .studio-mic-help-body { display: grid; gap: 1rem; padding: 1.25rem; }
+  .studio-mic-help-lead { display: grid; gap: .25rem; border-radius: .75rem; background: var(--color-inset, rgb(127 127 127 / .12)); padding: .75rem; }
+  .studio-mic-help-lead[hidden], .studio-mic-help-chrome[hidden], .studio-mic-help-other[hidden] { display: none; }
+  .studio-mic-help-headline { font-weight: 600; color: var(--color-text, inherit); margin: 0; }
+  .studio-mic-help-tip { font-size: .875rem; color: var(--color-text-secondary, inherit); margin: 0; }
+  .studio-mic-help-title { font-size: 1.25rem; font-weight: 700; color: var(--color-text, inherit); margin: 0; }
+  .studio-mic-help-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
+  .studio-mic-help-steps li { display: flex; align-items: flex-start; gap: .75rem; }
+  .studio-mic-step { display: flex; width: 1.5rem; height: 1.5rem; flex-shrink: 0; align-items: center; justify-content: center;
+    border-radius: 9999px; font-size: .75rem; font-weight: 700;
+    background: var(--color-cta-fill, var(--color-cta, rgb(var(--color-primary-500-rgb, 99 102 241)))); color: var(--btn-primary-fg, #fff); }
+  .studio-mic-help-actions { display: flex; justify-content: flex-end; margin: 0; }
+  .studio-mic-help-close { min-height: 44px; padding: 0 1.5rem; }
+  /* The drawn address bar: never a screenshot, every stroke a token. */
+  .studio-mic-mock { width: 100%; height: auto; color: var(--color-text, currentColor); }
+  .studio-mic-mock .mock-bar, .studio-mic-mock .mock-panel { fill: var(--color-inset, rgb(127 127 127 / .12)); stroke: currentColor; stroke-opacity: .25; }
+  .studio-mic-mock .mock-ring { fill: none; stroke: rgb(var(--color-primary-500-rgb, 99 102 241)); stroke-width: 3; }
+  .studio-mic-mock .mock-ink { stroke: currentColor; }
+  .studio-mic-mock .mock-knob { fill: currentColor; stroke: none; }
+  .studio-mic-mock .mock-text { fill: currentColor; font-family: inherit; }
+  .studio-mic-mock .mock-on, .studio-mic-mock .mock-badge { fill: rgb(var(--color-primary-500-rgb, 99 102 241)); }
+  .studio-mic-mock .mock-knob-on, .studio-mic-mock .mock-badge-text { fill: var(--color-surface, Canvas); }
+
+  /* The record button: a ring as loud as the voice (--studio-recorder-level). */
+  .studio-recorder { display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; }
+  .studio-recorder-button { min-height: 44px; min-width: 12rem; max-width: 100%; border: 0; border-radius: 9999px; padding: .875rem 1.75rem;
+    font-weight: 700; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
+    color: var(--btn-primary-fg, #fff); background: var(--color-cta-fill, var(--color-cta, rgb(var(--color-primary-500-rgb, 99 102 241))));
+    box-shadow: 0 0 0 calc(var(--studio-recorder-level, 0) * 14px) rgb(var(--color-primary-500-rgb, 99 102 241) / .3);
+    transition: box-shadow 80ms linear; }
+  .studio-recorder-button:focus-visible { outline: 3px solid rgb(var(--color-primary-500-rgb, 99 102 241) / .5); outline-offset: 3px; }
+  .studio-recorder-button:disabled { opacity: .5; cursor: not-allowed; }
+  [data-voice-recorder-state="recording"] .studio-recorder-button { background: var(--color-danger-fill, var(--color-danger, #dc2626)); }
+  .studio-recorder-timer { font-variant-numeric: tabular-nums; font-size: .875rem; color: var(--color-text-muted, inherit); }
+  .studio-recorder-status { min-height: 2.5rem; max-width: 24rem; margin: 0; color: var(--color-text-body, inherit); }
+  .studio-recorder-failed { display: none; font-size: .8125rem; color: var(--color-text-secondary, inherit); }
+  [data-studio-controller-failed~="voice-recorder"] .studio-recorder-failed { display: block; }
+  .studio-mic-failed { display: none; margin: 0; font-size: .8125rem; color: var(--color-text-secondary, inherit); }
+  [data-studio-controller-failed~="microphone-chip"] .studio-mic-failed { display: block; }
+  @media (prefers-reduced-motion: reduce) {
+    [data-microphone-live="true"] .studio-mic-dot { transform: none; transition: none; }
+    .studio-recorder-button { transition: none; }
+  }
+</style>

data/lib/studio/engine.rb

@@ -303,8 +303,10 @@ module Studio
     # User#inspect: POST /profile/voice carries voice[embeddings], and the user
     # holds voice_embedding (Voicebox logged vectors until it filtered them).
     # `(\A|\.)` also masks the JSON param wrapper's copy (profile.voice.embeddings).
+    # POST /voice/takes carries voice[embedding] (one take's vector) and
+    # voice[audio] (the take itself); both are masked the same way.
     initializer "studio.voice_profile.filter_parameters" do |app|
-      app.config.filter_parameters += [/(\A|\.)voice\.embeddings\z/, /\Avoice_embedding\z/]
+      app.config.filter_parameters += [/(\A|\.)voice\.(embeddings|embedding|audio)\z/, /\Avoice_embedding\z/]
     end
 
     initializer "studio.footer_only_eager_load" do

data/lib/studio/version.rb

@@ -1,3 +1,3 @@
 module Studio
-  VERSION = "0.120.0"
+  VERSION = "0.121.0"
 end