Chat voice: speaker button right of bubble + real stop

Move the per-reply voice control to a 🔊 speaker button to the RIGHT of the bubble
(horizontal row) instead of below it. Playback is now a proper toggle: tapping a playing
line STOPS it (🔊⇄⏹) via stopAudio/stopVoiceLive — the same primitives the creation
screen uses — and starting another line (or re-rendering) stops the previous one. Synth
started-then-stopped no longer plays late (guarded). Fixes 'pause doesn't stop the voice'.

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

web/characterChat.js

@@ -9,28 +9,12 @@ import { getPersona, patchPersona, putChatAudio, getChatAudio } from '/web/perso
 import {
   ensureTts, createVoiceWav, synthVoiceWav, speakVoiceLive, playWav,
   activeEngineIsDesign, activeEngineIsNative, currentVoiceId, getAutoNarrate,
+  stopPreview, stopVoiceLive,
 } from '/web/tts.js'
 
 const msgId = () => 'm_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6)
 const HISTORY_CAP = 50
-
-// Speak `text` in the fighter's voice; cache the WAV under the message id for instant replay.
-async function speak(id, text, p, btn) {
-  const set = (s) => { if (btn) btn.textContent = s }
-  try {
-    if (activeEngineIsNative()) { set('⏳'); await ensureTts(); await speakVoiceLive(p.voiceId || currentVoiceId(), text); return }
-    let blob = await getChatAudio(id)
-    let bytes
-    if (blob) { bytes = await blob.arrayBuffer() }
-    else {
-      set('⏳'); await ensureTts()
-      const wav = activeEngineIsDesign() ? await createVoiceWav(p.voice || '', text) : await synthVoiceWav(p.voiceId || currentVoiceId(), text)
-      bytes = wav instanceof Blob ? await wav.arrayBuffer() : wav
-      try { await putChatAudio(id, new Blob([bytes.slice(0)])) } catch { /* cache best-effort */ }
-    }
-    set('⏸'); await playWav(bytes.slice(0))
-  } catch { /* voice is best-effort */ } finally { set('▶') }
-}
+const SPEAKER = '🔊', STOP = '⏹'
 
 export function mountCharacterChat(host, personaId, { onUpdate, getLive } = {}) {
   const wrap = document.createElement('div'); wrap.style.cssText = 'display:flex;flex-direction:column;height:100%;min-height:0'
@@ -42,16 +26,49 @@ export function mountCharacterChat(host, personaId, { onUpdate, getLive } = {})
   send.style.cssText = 'flex:none;width:42px;height:40px;border-radius:10px;border:1px solid #2a3340;background:#1a2230;color:#e8e8e8;font-size:16px;cursor:pointer'
   form.append(input, send); wrap.append(thread, form); host.append(wrap)
 
+  // Voice playback with a real stop. Only one line plays at a time; tapping the speaker while it's
+  // playing STOPS it (stopAudio/stopVoiceLive — same primitives the creation screen uses), and the
+  // WAV is cached per message for instant replay.
+  let playing = null // { id, btn }
+  const stopAll = () => {
+    try { stopVoiceLive() } catch { /* ignore */ }
+    try { stopPreview() } catch { /* ignore */ }
+    if (playing && playing.btn) playing.btn.textContent = SPEAKER
+    playing = null
+  }
+  async function speak(id, text, p, btn) {
+    if (playing && playing.id === id) { stopAll(); return } // tap the playing one → stop (toggle off)
+    stopAll()                                               // stop any other line first
+    playing = { id, btn }; btn.textContent = STOP
+    try {
+      if (activeEngineIsNative()) { await ensureTts(); await speakVoiceLive(p.voiceId || currentVoiceId(), text) }
+      else {
+        let bytes
+        const blob = await getChatAudio(id)
+        if (blob) bytes = await blob.arrayBuffer()
+        else {
+          await ensureTts()
+          const wav = activeEngineIsDesign() ? await createVoiceWav(p.voice || '', text) : await synthVoiceWav(p.voiceId || currentVoiceId(), text)
+          bytes = wav instanceof Blob ? await wav.arrayBuffer() : wav
+          try { await putChatAudio(id, new Blob([bytes.slice(0)])) } catch { /* cache best-effort */ }
+        }
+        if (playing && playing.id === id) await playWav(bytes.slice(0)) // skip if stopped during synth
+      }
+    } catch { /* voice is best-effort */ } finally { if (playing && playing.id === id) { btn.textContent = SPEAKER; playing = null } }
+  }
+
+  const bubbleCss = (role) => `padding:8px 11px;border-radius:12px;line-height:1.4;font:13px var(--tac-font,system-ui);white-space:pre-wrap;${role === 'user' ? 'background:#1f6feb;color:#fff;border-bottom-right-radius:4px' : 'background:#1a2230;color:#e8e8e8;border:1px solid #232b36;border-bottom-left-radius:4px'}`
+  // Horizontal row so the speaker can sit to the RIGHT of an assistant bubble; user bubbles hug right.
   const bubble = (role, text) => {
-    const row = document.createElement('div'); row.style.cssText = `display:flex;flex-direction:column;max-width:88%;${role === 'user' ? 'align-self:flex-end;align-items:flex-end' : 'align-self:flex-start;align-items:flex-start'}`
-    const b = document.createElement('div')
-    b.style.cssText = `padding:8px 11px;border-radius:12px;line-height:1.4;font:13px var(--tac-font,system-ui);white-space:pre-wrap;${role === 'user' ? 'background:#1f6feb;color:#fff;border-bottom-right-radius:4px' : 'background:#1a2230;color:#e8e8e8;border:1px solid #232b36;border-bottom-left-radius:4px'}`
-    b.textContent = text
+    const row = document.createElement('div')
+    row.style.cssText = `display:flex;align-items:center;gap:6px;max-width:92%;${role === 'user' ? 'align-self:flex-end;flex-direction:row-reverse' : 'align-self:flex-start;flex-direction:row'}`
+    const b = document.createElement('div'); b.style.cssText = bubbleCss(role); b.textContent = text
     row.append(b); row._b = b; return row
   }
 
   function renderThread() {
     const p = getPersona(personaId)
+    stopAll()
     thread.replaceChildren()
     const hist = (p && p.chat && p.chat.history) || []
     if (!hist.length) {
@@ -61,8 +78,8 @@ export function mountCharacterChat(host, personaId, { onUpdate, getLive } = {})
     for (const m of hist) {
       const row = bubble(m.role, m.text)
       if (m.role === 'assistant') {
-        const play = document.createElement('button'); play.type = 'button'; play.textContent = '▶'
-        play.title = 'Hear it'; play.style.cssText = 'margin-top:3px;background:none;border:none;color:#9aa4b2;font-size:12px;cursor:pointer;padding:2px 4px'
+        const play = document.createElement('button'); play.type = 'button'; play.textContent = SPEAKER
+        play.title = 'Hear it'; play.style.cssText = 'flex:none;background:none;border:none;color:#9aa4b2;font-size:18px;line-height:1;cursor:pointer;padding:2px;user-select:none'
         play.addEventListener('click', () => speak(m.id, m.text, getPersona(personaId), play))
         row.append(play)
       }