Persona voice: play↔stop toggle, loading spinner, auto-stop on nav/new pick

- ▶ becomes ⏹ while a voice is sounding; clicking again stops it.
- While a voice is being generated the button shows a spinning loading ring
(CSS .busy::before) — the spinner clears the instant the WAV is ready, then
the button flips to ⏹ for playback.
- Voice auto-stops when: navigating away from the Personas tab (Intersection
Observer on the hidden stage), picking another hero from the barracks, and
starting a new generation.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/personaPanel.js

@@ -173,6 +173,24 @@ export function mountPersonaPanel(host) {
   let hasVoice = false    // a cached voice file exists for this persona
   let working = false
   let busy = false
+  let playing = false     // audio is currently sounding (▶ becomes ⏹)
+
+  // ▶ ⇄ ⏹: reflect playback state on the button so a second click stops it.
+  function setPlaying(on) {
+    playing = on
+    playBtn.classList.toggle('playing', on)
+    playBtn.textContent = on ? '⏹' : '▶'
+    if (on) playBtn.title = 'Stop'
+    else updateVoiceUI()
+  }
+  // Stop any sounding voice and reset the button (used on toggle, nav-away, new pick).
+  function stopVoice() { stopPreview(); setPlaying(false) }
+  // Play a WAV buffer with the button reflecting play→stop→idle, even if it's cut short.
+  async function playBuf(arrayBuffer) {
+    setPlaying(true)
+    try { await playWav(arrayBuffer) } catch { /* autoplay blocked / cut short */ }
+    finally { setPlaying(false) }
+  }
 
   // Hide the hero fields until a hero is generated or picked from the barracks.
   function refreshVisibility() {
@@ -190,6 +208,7 @@ export function mountPersonaPanel(host) {
   function updateVoiceUI() {
     const needs = !!lastPersona && (!hasVoice || isDirty())
     playBtn.classList.toggle('badged', needs)
+    if (playing) return // 'Stop' title owned by setPlaying while sounding
     playBtn.title = !lastPersona ? 'Play voice' : (!hasVoice ? 'Create voice' : (isDirty() ? 'Update & play' : 'Play voice'))
   }
 
@@ -225,6 +244,7 @@ export function mountPersonaPanel(host) {
   }
 
   async function showPersona(p, opts = {}) {
+    stopVoice() // picking another hero cuts the current voice
     lastPersona = { ...p }
     savedId = opts.savedId || null
     nameEl.textContent = p.name || ''
@@ -240,23 +260,25 @@ export function mountPersonaPanel(host) {
   // no voice yet → DESIGN one from the description. If the quote/voice changed (badge) →
   // CLONE the last voice (same timbre, new words). Then cache + save over + clear badge.
   async function play() {
+    if (playing) { stopVoice(); return } // second click while sounding → stop
     if (working || !lastPersona) return
     const line = lineFor(lastPersona)
 
     // Up-to-date voice exists → just replay the cached file.
     if (hasVoice && !isDirty()) {
       const blob = savedId ? await getAudio(savedId) : null
-      if (blob) { try { await playWav(await blob.arrayBuffer()) } catch { /* ignore */ } return }
+      if (blob) { await playBuf(await blob.arrayBuffer()); return }
       hasVoice = false // cache vanished — fall through to re-make it
     }
     if (!lastPersona.voice) { status.textContent = 'add a voice design first'; return }
     autosave() // ensure an id to key the audio
 
+    // Generating → the ▶ becomes a loading spinner (.busy) until the WAV is ready.
     working = true; playBtn.classList.add('busy'); playBtn.disabled = true
     const prev = status.textContent
     status.textContent = hasVoice ? 'updating the voice…' : 'designing the voice…'
+    let wav = null
     try {
-      let wav
       if (hasVoice) {
         const blob = await getAudio(savedId)
         wav = await cloneVoiceWav(await blob.arrayBuffer(), lastPersona.voiceQuote || '', line, lastPersona.voice || '')
@@ -266,13 +288,21 @@ export function mountPersonaPanel(host) {
       await putAudio(savedId, new Blob([wav], { type: 'audio/wav' })) // save over
       lastPersona.voiceQuote = line; lastPersona.voiceDesignUsed = lastPersona.voice
       hasVoice = true; autosave()
-      try { await playWav(wav.slice(0)) } catch { /* autoplay blocked — ▶ still works */ }
       status.textContent = prev
     } catch (e) { status.textContent = `voice failed: ${e.message || e}` }
     finally { working = false; playBtn.classList.remove('busy'); playBtn.disabled = false; updateVoiceUI() }
+    if (wav) await playBuf(wav.slice(0)) // spinner cleared → now toggles to ⏹ while sounding
   }
   playBtn.addEventListener('click', play)
 
+  // Navigating to another tab hides this stage (Gradio sets display:none) → the host
+  // stops intersecting; cut the voice so it doesn't keep playing off-screen.
+  try {
+    new IntersectionObserver((entries) => {
+      for (const e of entries) if (!e.isIntersecting && playing) stopVoice()
+    }).observe(host)
+  } catch { /* no IntersectionObserver — playback just won't auto-stop on nav */ }
+
   // ── Barracks roster (saved heroes) ──────────────────────────────────────
   function renderRoster(personas) {
     if (!personas.length) { rosterEl.replaceChildren(el('div', { class: 'persona-roster-empty' }, 'No heroes saved yet.')); return }
@@ -319,7 +349,7 @@ export function mountPersonaPanel(host) {
     nameEl.textContent = '…'; aboutEl.textContent = ''; tagsEl.replaceChildren()
     quoteEl.textContent = ''; voiceEl.textContent = ''
     lastPersona = null; savedId = null; hasVoice = false
-    stopPreview(); updateVoiceUI()
+    stopVoice(); updateVoiceUI()
     thinkEl.textContent = ''; thinkWrap.open = true; stats.textContent = ''
     let acc = ''
     try {

web/shell/persona.css

@@ -119,7 +119,15 @@
   border: 1.5px solid var(--p-ink) !important; border-radius: 0 !important; padding: 3px 9px !important;
 }
 .persona-ico:hover { background: var(--p-paper-2) !important; }
-.persona-ico.busy { opacity: .55; cursor: default; }
+.persona-ico.busy { cursor: default; }
+/* Generating a voice → hide the glyph and spin a small ring in its place. */
+.persona-play.busy { color: transparent !important; }
+.persona-play.busy::before {
+  content: ''; position: absolute; inset: 0; margin: auto; width: 11px; height: 11px;
+  border: 2px solid var(--p-paper-2); border-top-color: var(--p-transmit); border-radius: 50%;
+  animation: tac-spin .7s linear infinite;
+}
+@keyframes tac-spin { to { transform: rotate(360deg); } }
 /* Badge = "no voice yet, or the quote/voice changed — tap to (re)make it." Pulses. */
 .persona-play.badged::after {
   content: ''; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px;