Voice: provider-driven per-hero voices; settings is provider-only

Settings → Voice is now just a provider picker (no global voice dropdown, no
"narrate war diaries" checkbox) — the voice belongs to the hero, not the app.
Copy updated to explain the model.

Persona panel now respects the chosen provider:
- Qwen3-TTS (design): voice-design text stays editable; designs/clones as before.
- Kokoro/Kitten/Web Speech (fixed-voice): the design text goes read-only and a
per-hero "Voice" dropdown of the provider's named voices appears. Play
synthesizes the quote in that voice (cached as a WAV for Kokoro/Kitten via a
new PCM→WAV encoder; spoken live for Web Speech). The pick is saved per hero
(voiceId) and the cache tracks voiceIdUsed for staleness, mirroring Qwen3.

The provider is set on another tab, so tts.js now emits onTtsEngineChange and
the panel re-renders its voice controls live (no reliance on tab visibility).

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

web/personaPanel.js

@@ -7,7 +7,10 @@ import { streamChat, ensureModel, currentModel, currentModelId, getEngineId, bac
 import { extractLivePersona } from '/web/personaStream.js'
 import { parsePersonaJson } from '/web/personaParse.js'
 import { getPersonaSystem, personaUserPrompt, stripThink, stripThinkFinal, noThink } from '/web/personaPrompts.js'
-import { createVoiceWav, cloneVoiceWav, playWav, stopPreview } from '/web/tts.js'
+import {
+  createVoiceWav, cloneVoiceWav, playWav, synthVoiceWav, speakVoiceLive, stopVoiceLive,
+  activeEngineIsDesign, activeEngineIsNative, activeVoices, activeDefaultVoice, onTtsEngineChange,
+} from '/web/tts.js'
 import { listPersonas, savePersona, removePersona, onRosterChange, putAudio, getAudio } from '/web/personaStore.js'
 
 const CLASSES = ['Warrior', 'Ranger', 'Monk', 'Assassin', 'Mage', 'Paladin', 'Cleric', 'Knight']
@@ -143,6 +146,11 @@ export function mountPersonaPanel(host) {
   const aboutEl = el('div', { class: 'persona-about persona-edit', 'data-ph': 'Their story…' })
   const quoteEl = el('blockquote', { class: 'persona-quote persona-edit', 'data-ph': 'A line they say…' })
   const voiceEl = el('div', { class: 'persona-voice-desc persona-edit', 'data-ph': 'How they sound…' })
+  // Fixed-voice providers (Kokoro/Kitten/Web Speech) don't design from text — pick a
+  // named voice here instead. Hidden when the provider is Qwen3-TTS (Voice Design).
+  const voicePickEl = el('select', { class: 'persona-input persona-voice-pick' })
+  const voicePickRow = el('div', { class: 'persona-voice-pick-row' },
+    [el('label', { class: 'persona-label' }, 'Voice'), voicePickEl])
   // ▶ play sits on the Quote heading and does everything: it (re)creates the voice when
   // needed and replays it otherwise. A pulsing badge shows when there's no voice yet, or
   // the quote/voice was edited since the last one was made.
@@ -167,7 +175,7 @@ export function mountPersonaPanel(host) {
     nameEl,
     secHead('About'), aboutEl,
     secHead('Quote', playBtn), quoteEl,
-    secHead('Voice design'), voiceEl,
+    secHead('Voice design'), voiceEl, voicePickRow,
   ])
   const result = el('div', { class: 'persona-result' }, [emptyEl, bodyEl, thinkWrap])
   host.appendChild(el('div', { class: 'persona-view' }, [controls, result]))
@@ -188,7 +196,7 @@ export function mountPersonaPanel(host) {
     else updateVoiceUI()
   }
   // Stop any sounding voice and reset the button (used on toggle, nav-away, new pick).
-  function stopVoice() { stopPreview(); setPlaying(false) }
+  function stopVoice() { stopVoiceLive(); 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)
@@ -206,19 +214,52 @@ export function mountPersonaPanel(host) {
 
   // The line the voice actually says (quote, else about, else a fallback).
   const lineFor = (p) => (p.quote || '').trim() || (p.about || '').trim() || `${p.name || 'A hero'} reporting for duty.`
-  // Cached audio is stale if the line or the voice design changed since it was made.
-  const isDirty = () => hasVoice && lastPersona && (lineFor(lastPersona) !== lastPersona.voiceQuote || (lastPersona.voice || '') !== (lastPersona.voiceDesignUsed || ''))
-  // The voice DESIGN text itself changed since the cached voice was made → we must
-  // re-DESIGN a new timbre. (Cloning would just re-speak the OLD voice — the bug.)
-  const designChanged = () => hasVoice && lastPersona && (lastPersona.voice || '') !== (lastPersona.voiceDesignUsed || '')
+  // Which "voice" identity drives the active provider, and what the cached file used.
+  // Qwen3-TTS → the free-form DESIGN text; others → the picked named voice id.
+  const isDesign = () => activeEngineIsDesign()
+  const isNative = () => activeEngineIsNative()
+  const voiceNow = () => (isDesign() ? (lastPersona?.voice || '') : (lastPersona?.voiceId || ''))
+  const voiceUsed = () => (isDesign() ? (lastPersona?.voiceDesignUsed || '') : (lastPersona?.voiceIdUsed || ''))
+  // Cached audio is stale if the line or the voice identity changed since it was made.
+  // Native (Web Speech) never caches, so it's never "dirty".
+  const isDirty = () => !isNative() && hasVoice && lastPersona && (lineFor(lastPersona) !== lastPersona.voiceQuote || voiceNow() !== voiceUsed())
+  // Only Qwen3 has a clone step: re-speak the SAME timbre when just the words changed.
+  // A changed DESIGN text means a new timbre → re-design (cloning would keep the old voice).
+  const designChanged = () => isDesign() && hasVoice && lastPersona && (lastPersona.voice || '') !== (lastPersona.voiceDesignUsed || '')
   // Badge when there's a persona but no current voice (none yet, or it went stale).
   function updateVoiceUI() {
-    const needs = !!lastPersona && (!hasVoice || isDirty())
+    const needs = !!lastPersona && !isNative() && (!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'))
+    playBtn.title = (!lastPersona || isNative()) ? 'Play voice' : (!hasVoice ? 'Create voice' : (isDirty() ? 'Update & play' : 'Play voice'))
   }
 
+  // Reflect the active provider: Qwen3-TTS designs from the editable text; the others
+  // use a named voice (text design goes read-only, the voice picker appears). Called on
+  // show + whenever the panel comes back into view (the provider is set in Settings).
+  function refreshVoiceMode() {
+    const design = isDesign()
+    voiceEl.contentEditable = design ? 'true' : 'false'
+    voiceEl.classList.toggle('readonly', !design)
+    voiceEl.setAttribute('data-ph', design ? 'How they sound…' : '(only used by Qwen3-TTS Voice Design)')
+    voicePickRow.style.display = design ? 'none' : ''
+    if (!design) {
+      const voices = activeVoices()
+      voicePickEl.replaceChildren(...voices.map((v) => el('option', { value: v.id }, v.label)))
+      let cur = (lastPersona && lastPersona.voiceId) || activeDefaultVoice()
+      if (!voices.some((v) => v.id === cur)) cur = voices[0] ? voices[0].id : ''
+      voicePickEl.value = cur
+      if (lastPersona) lastPersona.voiceId = cur
+    }
+  }
+  voicePickEl.addEventListener('change', () => {
+    if (!lastPersona) return
+    lastPersona.voiceId = voicePickEl.value
+    autosave(); updateVoiceUI()
+  })
+  // The provider is chosen on the Settings tab; re-render voice controls when it changes.
+  onTtsEngineChange(() => { stopVoice(); if (lastPersona) { refreshVoiceMode(); updateVoiceUI() } })
+
   function autosave() {
     if (!lastPersona) return
     const rec = savePersona({ ...lastPersona, id: savedId, unitClass: lastPersona.unitClass || sel.value, seed: lastPersona.seed || seed.value })
@@ -254,7 +295,7 @@ export function mountPersonaPanel(host) {
     quoteEl.textContent = p.quote || ''
     voiceEl.textContent = p.voice || ''
     hasVoice = savedId ? !!(await getAudio(savedId)) : false
-    updateVoiceUI(); refreshVisibility()
+    refreshVoiceMode(); updateVoiceUI(); refreshVisibility()
   }
 
   // ▶ The one voice button: if the cached voice is current, just replay it. If the voice
@@ -265,32 +306,46 @@ export function mountPersonaPanel(host) {
     if (working || !lastPersona) return
     const line = lineFor(lastPersona)
 
+    // Native provider (Web Speech): can't render to a file — speak the line live.
+    if (isNative()) {
+      setPlaying(true)
+      try { await speakVoiceLive(lastPersona.voiceId || '', line) }
+      catch (e) { status.textContent = `voice failed: ${e.message || e}` }
+      finally { setPlaying(false) }
+      return
+    }
+
     // Up-to-date voice exists → just replay the cached file.
     if (hasVoice && !isDirty()) {
       const blob = savedId ? await getAudio(savedId) : null
       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 }
+    if (isDesign() && !lastPersona.voice) { status.textContent = 'add a voice design first'; return }
     autosave() // ensure an id to key the audio
 
-    // Clone only when the timbre should be preserved (voice unchanged, just new words);
-    // otherwise design a new voice from the (possibly edited) description.
-    const reclone = hasVoice && !designChanged()
+    const design = isDesign()
+    // Qwen3 clones (same timbre, new words) only when the design text is unchanged;
+    // fixed-voice providers always re-synth the line in the picked named voice.
+    const reclone = design && hasVoice && !designChanged()
     // 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 = reclone ? 'updating the voice…' : 'designing the voice…'
+    status.textContent = reclone ? 'updating the voice…' : (design ? 'designing the voice…' : 'creating the voice…')
     let wav = null
     try {
-      if (reclone) {
+      if (design && reclone) {
         const blob = await getAudio(savedId)
         wav = await cloneVoiceWav(await blob.arrayBuffer(), lastPersona.voiceQuote || '', line, lastPersona.voice || '')
-      } else {
+      } else if (design) {
         wav = await createVoiceWav(lastPersona.voice, line)
+      } else {
+        wav = await synthVoiceWav(lastPersona.voiceId || '', line)
       }
       await putAudio(savedId, new Blob([wav], { type: 'audio/wav' })) // save over
-      lastPersona.voiceQuote = line; lastPersona.voiceDesignUsed = lastPersona.voice
+      lastPersona.voiceQuote = line
+      lastPersona.voiceDesignUsed = lastPersona.voice || ''
+      lastPersona.voiceIdUsed = lastPersona.voiceId || ''
       hasVoice = true; autosave()
       status.textContent = prev
     } catch (e) { status.textContent = `voice failed: ${e.message || e}` }
@@ -303,7 +358,10 @@ export function mountPersonaPanel(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()
+      for (const e of entries) {
+        if (!e.isIntersecting) { if (playing) stopVoice() }
+        else if (lastPersona) { refreshVoiceMode(); updateVoiceUI() } // provider may have changed in Settings
+      }
     }).observe(host)
   } catch { /* no IntersectionObserver — playback just won't auto-stop on nav */ }
 

web/personaPromptBar.js

@@ -28,18 +28,24 @@ export function mountPersonaPromptBar(host) {
   function refreshNote() {
     note.textContent = isPersonaSystemCustom() ? 'Using your custom prompt.' : 'Using the built-in default.'
   }
-  refreshNote()
+  // Badge the Save button while the textarea differs from the prompt in effect —
+  // i.e. there are unsaved edits. Cleared once saved (or the edit matches default).
+  function refreshEdited() {
+    saveBtn.classList.toggle('badged', ta.value.trim() !== getPersonaSystem().trim())
+  }
+  refreshNote(); refreshEdited()
+  ta.addEventListener('input', refreshEdited)
 
   saveBtn.addEventListener('click', () => {
     setPersonaSystem(ta.value)
     ta.value = getPersonaSystem() // reflect (a default-equal edit clears the override)
-    refreshNote()
+    refreshNote(); refreshEdited()
     saveBtn.textContent = '✓ Saved'; setTimeout(() => { saveBtn.textContent = 'Save' }, 1400)
   })
   resetBtn.addEventListener('click', () => {
     resetPersonaSystem()
     ta.value = PERSONA_SYSTEM_DEFAULT
-    refreshNote()
+    refreshNote(); refreshEdited()
   })
 
   host.append(el('div', { class: 'persona-prompt-bar' }, [
@@ -47,5 +53,5 @@ export function mountPersonaPromptBar(host) {
     el('div', { class: 'persona-prompt-actions' }, [saveBtn, resetBtn]),
     note,
   ]))
-  return { refresh: () => { ta.value = getPersonaSystem(); refreshNote() } }
+  return { refresh: () => { ta.value = getPersonaSystem(); refreshNote(); refreshEdited() } }
 }

web/personaStore.js

@@ -38,6 +38,9 @@ export function savePersona(p) {
     about: p.about || '',
     quote: p.quote || '',
     voice: p.voice || '',
+    // Named voice for fixed-voice providers (Kokoro/Kitten/Web Speech); the design `voice`
+    // text above is what Qwen3-TTS uses instead. Both are saved so a hero keeps its voice.
+    voiceId: p.voiceId || '',
     specialty: p.specialty || '',
     personality: p.personality || '',
     vibe: p.vibe || '',
@@ -46,6 +49,7 @@ export function savePersona(p) {
     // the audio is current (replay it) vs stale (re-make it), instead of always re-synthing.
     voiceQuote: p.voiceQuote || '',
     voiceDesignUsed: p.voiceDesignUsed || '',
+    voiceIdUsed: p.voiceIdUsed || '',
     createdAt: now,
     updatedAt: now,
   }

web/settingsPanel.js

@@ -43,8 +43,9 @@ export function mountSettingsPanel() {
       'The in-browser model that writes your soldiers and their war diaries. Runs on ' +
       'your device; models cache in your browser.', mountModelBar)
     injectSection(sample, 'tac-voice-settings', 'Voice',
-      'How war diaries are read aloud. Kokoro/Kitten run on your device; Qwen3-TTS ' +
-      'designs a voice in the cloud.', mountTtsBar)
+      'The provider that voices your heroes. Qwen3-TTS designs a voice from each hero’s ' +
+      'description; Kokoro/Kitten run on your device with a named voice you pick per hero. ' +
+      'The voice belongs to the hero, so there’s no global voice to choose here.', mountTtsBar)
     injectSection(sample, 'tac-persona-prompt-settings', 'Persona Prompt',
       'The system prompt that writes each hero (name, about, quote and voice design). ' +
       'Edit it to change their style; Save uses it on the next “Recruit hero”.', mountPersonaPromptBar)

web/shell/persona.css

@@ -104,6 +104,13 @@
   font-family: var(--p-mono); font-size: 12px; line-height: 1.5; color: var(--p-muted);
   max-width: 60ch; margin-top: 8px; font-style: italic;
 }
+/* Read-only when the provider isn't Qwen3-TTS (the design text isn't used then). */
+.persona-voice-desc.readonly { opacity: .6; cursor: default; }
+.persona-voice-desc.readonly:hover, .persona-voice-desc.readonly:focus { background: transparent; box-shadow: none; }
+/* Per-hero named-voice picker (Kokoro/Kitten/Web Speech). */
+.persona-voice-pick-row { margin-top: 12px; max-width: 320px; }
+.persona-voice-pick-row .persona-label { margin-top: 0; }
+.persona-voice-pick { margin-top: 4px; }
 .persona-quote {
   margin: 8px 0 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--p-transmit);
   font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-style: italic;
@@ -251,15 +258,24 @@
 .tac-set-intro { font-size: 14px; line-height: 1.5; opacity: .75; margin: 2px 0 14px; }
 
 /* Persona-prompt editor (Settings → Persona Prompt). */
-.persona-prompt-bar { display: flex; flex-direction: column; gap: 10px; }
+.persona-prompt-bar { display: flex; flex-direction: column; gap: 10px; width: 100%; }
 .persona-prompt-edit {
-  width: 100%; font-family: var(--p-mono); font-size: 12px; line-height: 1.55;
+  display: block; width: 100%; max-width: none; box-sizing: border-box;
+  font-family: var(--p-mono); font-size: 12px; line-height: 1.55;
   color: var(--p-ink); background: var(--p-card); border: 1.5px solid var(--p-ink);
   border-radius: 0; padding: 10px 12px; resize: vertical; min-height: 200px;
 }
 .persona-prompt-edit:focus { outline: none; box-shadow: 0 0 0 1.5px var(--p-transmit); }
 .persona-prompt-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-.persona-prompt-save { margin-top: 0 !important; }
+/* Save sits left, Reset is pushed to the far right so the two are clearly separated. */
+.persona-prompt-save { margin-top: 0 !important; position: relative; }
+.persona-prompt-reset { margin-left: auto; }
+/* Pulsing badge on Save = unsaved edits in the prompt. Reuses the play-button badge. */
+.persona-prompt-save.badged::after {
+  content: ''; position: absolute; top: -5px; right: -5px; width: 10px; height: 10px;
+  background: var(--p-transmit); border: 1.5px solid var(--p-card); border-radius: 50%;
+  animation: tac-badge-pulse 1.3s ease-out infinite;
+}
 
 /* Collapsible control sections (model / voice). Desktop: no toggle, always shown. */
 .ctl-collapse > summary { display: none; }

web/tts.js

@@ -6,7 +6,7 @@ import { engine as kokoro } from '/web/ttsKokoro.js'
 import { engine as qwen3, engineLocal as qwen3local, isLocalhost } from '/web/ttsQwen3.js'
 import { engine as kitten } from '/web/ttsKitten.js'
 import { engine as webspeech } from '/web/ttsWebSpeech.js'
-import { playSamples, stopAudio, decodeAudio } from '/web/ttsAudio.js'
+import { playSamples, stopAudio, decodeAudio, encodeWav } from '/web/ttsAudio.js'
 import { ensurePersistentStorage } from '/web/storage.js'
 
 const ENGINES = [kokoro, qwen3local, qwen3, kitten, webspeech]
@@ -39,6 +39,34 @@ export async function playWav(arrayBuffer) {
   const { audio, sampleRate } = await decodeAudio(arrayBuffer)
   return playSamples(audio, sampleRate)
 }
+
+// ── Fixed-voice engines (Kokoro / Kitten / Web Speech) ───────────────────────
+// These don't "design" a voice from text; a hero picks one of the engine's named
+// voices. The persona panel uses these when the active engine is NOT Qwen3.
+export const activeEngineIsDesign = () => !!eng().design          // Qwen3 → designs from a description
+export const activeEngineIsNative = () => eng().mode === 'native' // Web Speech → speaks live, no WAV
+export const activeEngineId = () => activeId
+export const activeVoices = () => eng().listVoices()
+export const activeDefaultVoice = () => eng().defaultVoice
+
+// Synthesize `text` in a NAMED voice with the active PCM engine → a cacheable WAV
+// (encode Kokoro/Kitten PCM, or pass through an engine that already returns WAV).
+export async function synthVoiceWav(voiceId, text) {
+  const e = eng()
+  if (e.needsDownload) { await ensurePersistentStorage(); await e.ensure() }
+  if (e.synthWav) return e.synthWav(text, voiceId)
+  const { audio, sampleRate } = await e.synth(text, voiceId)
+  return encodeWav(audio, sampleRate)
+}
+// Speak `text` live in a named voice (native engines that can't render to a file).
+export async function speakVoiceLive(voiceId, text) {
+  const e = eng()
+  if (e.speak) return e.speak(text, voiceId)
+  const { audio, sampleRate } = await e.synth(text, voiceId)
+  return playSamples(audio, sampleRate)
+}
+export function stopVoiceLive() { const e = eng(); if (e.stop) e.stop(); stopAudio() }
+
 const voiceSel = {} // engineId -> chosen voice id
 
 const eng = () => ENGINES.find((e) => e.id === activeId) || ENGINES[0]
@@ -46,7 +74,15 @@ const eng = () => ENGINES.find((e) => e.id === activeId) || ENGINES[0]
 export const listTtsEngines = () =>
   ENGINES.map((e) => ({ id: e.id, label: e.label, available: e.available(), experimental: !!e.experimental, note: e.note || '' }))
 export const getTtsEngineId = () => activeId
-export function setTtsEngine(id) { if (ENGINES.some((e) => e.id === id)) activeId = id }
+// Notify listeners (e.g. the persona panel, on another tab) when the provider changes,
+// so they can re-render voice controls without polling or relying on tab visibility.
+const _engineListeners = new Set()
+export function onTtsEngineChange(fn) { _engineListeners.add(fn); return () => _engineListeners.delete(fn) }
+export function setTtsEngine(id) {
+  if (!ENGINES.some((e) => e.id === id) || id === activeId) return
+  activeId = id
+  for (const fn of _engineListeners) { try { fn(id) } catch { /* ignore */ } }
+}
 
 export const listVoices = () => eng().listVoices()
 export const currentVoiceId = () => (voiceSel[activeId] !== undefined ? voiceSel[activeId] : eng().defaultVoice)

web/ttsAudio.js

@@ -30,6 +30,23 @@ export function stopAudio() {
   _cur = null
 }
 
+// Encode mono Float32 samples to a 16-bit PCM WAV ArrayBuffer — so PCM engines
+// (Kokoro/Kitten) can produce a cacheable voice file like Qwen3-TTS does.
+export function encodeWav(float32, sampleRate) {
+  const n = float32.length
+  const buf = new ArrayBuffer(44 + n * 2)
+  const dv = new DataView(buf)
+  const str = (off, s) => { for (let i = 0; i < s.length; i++) dv.setUint8(off + i, s.charCodeAt(i)) }
+  str(0, 'RIFF'); dv.setUint32(4, 36 + n * 2, true); str(8, 'WAVE')
+  str(12, 'fmt '); dv.setUint32(16, 16, true); dv.setUint16(20, 1, true); dv.setUint16(22, 1, true)
+  dv.setUint32(24, sampleRate, true); dv.setUint32(28, sampleRate * 2, true)
+  dv.setUint16(32, 2, true); dv.setUint16(34, 16, true)
+  str(36, 'data'); dv.setUint32(40, n * 2, true)
+  let off = 44
+  for (let i = 0; i < n; i++) { const s = Math.max(-1, Math.min(1, float32[i])); dv.setInt16(off, s < 0 ? s * 0x8000 : s * 0x7fff, true); off += 2 }
+  return buf
+}
+
 // Decode a WAV/audio ArrayBuffer to { audio: Float32Array, sampleRate } via the shared
 // AudioContext (decoding needs no user gesture; only playback does).
 export async function decodeAudio(arrayBuffer) {

web/ttsBar.js

@@ -1,12 +1,11 @@
-// Voice/TTS picker for the war-diary panel: choose the TTS engine (Kokoro / Kitten /
-// Web Speech — switchable so you can compare), a voice, and whether to auto-narrate
-// while the diary streams. Mirrors modelBar.js. The play/stop button lives in the
-// panel (it owns the diary text); this bar only drives the tts.js facade state.
+// Voice-PROVIDER picker for the Settings page: choose the TTS engine that voices your
+// heroes (Qwen3-TTS designs a voice from each hero's description; Kokoro/Kitten/Web Speech
+// use a named voice picked per-hero on the persona page). No voice dropdown here — the
+// voice is a property of the hero, not a global setting. This bar only sets the engine on
+// the shared tts.js facade; every page reads that choice.
 import {
   listTtsEngines, getTtsEngineId, setTtsEngine,
-  listVoices, currentVoiceId, setVoice,
-  ttsBackendLabel, ttsNeedsDownload,
-  getAutoNarrate, setAutoNarrate,
+  ttsBackendLabel, ttsNeedsDownload, activeEngineIsDesign,
 } from '/web/tts.js'
 
 function el(tag, props = {}, kids = []) {
@@ -22,15 +21,10 @@ function el(tag, props = {}, kids = []) {
 
 export function mountTtsBar(host, { onChange } = {}) {
   const engSel = el('select', { class: 'model-select engine-select' })
-  const voiceSel = el('select', { class: 'model-select' })
-  const auto = el('input', { type: 'checkbox', class: 'tts-auto' })
-  const autoWrap = el('label', { class: 'tts-auto-row' }, [auto, ' narrate war diaries as they write'])
   const info = el('div', { class: 'model-info' })
   host.append(el('div', { class: 'model-bar tts-bar' }, [
-    el('label', { class: 'persona-label' }, '🔊 Voice (reads war diaries aloud)'),
-    engSel,
-    el('label', { class: 'persona-label' }, 'Voice'),
-    voiceSel, info, autoWrap,
+    el('label', { class: 'persona-label' }, '🔊 Voice provider'),
+    engSel, info,
   ]))
 
   engSel.replaceChildren(...listTtsEngines().map((e) =>
@@ -38,26 +32,15 @@ export function mountTtsBar(host, { onChange } = {}) {
       `${e.label}${e.available ? '' : ' · ' + (e.note || 'n/a')}`)))
   engSel.value = getTtsEngineId()
 
-  function renderVoices() {
-    const voices = listVoices()
-    voiceSel.replaceChildren(...(voices.length
-      ? voices.map((v) => el('option', { value: v.id }, v.label))
-      : [el('option', { value: '' }, 'default')]))
-    const cur = currentVoiceId()
-    if (voices.some((v) => v.id === cur)) voiceSel.value = cur
-    info.textContent = `${ttsBackendLabel()}${ttsNeedsDownload() ? ' · downloads on first use' : ' · no download'}`
+  function renderInfo() {
+    const how = activeEngineIsDesign()
+      ? 'designs a voice from each hero’s description'
+      : 'pick a named voice per hero on the Personas page'
+    info.textContent = `${ttsBackendLabel()} · ${how}${ttsNeedsDownload() ? ' · downloads on first use' : ''}`
   }
 
-  engSel.addEventListener('change', () => { setTtsEngine(engSel.value); renderVoices(); onChange && onChange() })
-  voiceSel.addEventListener('change', () => { setVoice(voiceSel.value); onChange && onChange() })
+  engSel.addEventListener('change', () => { setTtsEngine(engSel.value); renderInfo(); onChange && onChange() })
 
-  // auto-narrate is global state (the diary reads it); reflect + persist it here.
-  auto.checked = getAutoNarrate()
-  auto.addEventListener('change', () => setAutoNarrate(auto.checked))
-
-  // Web Speech voices populate asynchronously.
-  if (typeof speechSynthesis !== 'undefined') speechSynthesis.onvoiceschanged = () => renderVoices()
-
-  renderVoices()
-  return { autoNarrate: () => auto.checked, refresh: renderVoices }
+  renderInfo()
+  return { refresh: renderInfo }
 }

web/ttsQwen3.js

@@ -67,6 +67,7 @@ async function postClone(base, text, refAb, refText, instruct) {
 
 const common = {
   mode: 'pcm', needsDownload: false, networked: true,
+  design: true, // designs a voice from a free-form description (the persona's `voice`)
   listVoices: () => VOICES, defaultVoice: 'persona',
   ensure: async () => { /* nothing to load — server-side */ },
   setDesc(d) { _desc = (d || '').trim() }, // shared _desc across both variants