Persona voice: re-DESIGN when the voice description changes (not clone)

Editing the voice design now regenerates a fresh timbre instead of cloning the
old voice. play() cloned whenever a cached voice existed, so a changed design
just re-spoke the old voice. Now it clones only when the timbre should be kept
(voice unchanged, new words) and designs otherwise (new/edited description).

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

web/personaPanel.js

@@ -26,7 +26,8 @@ const CLASS_SLUG = {
   Cleric: 'true-heroes-ii-cleric',
   Knight: 'rts-humans-knight',
 }
-const ICON_PX = 26
+const ICON_PX = 30        // on-screen size of the class icon box
+const ICON_ZOOM = 2.4     // sheets pad the character inside each cell — zoom in so it fills the box
 const spriteUrl = (u) => (u || '').replace('/assets/', '/sprites/') // sheets serve at /sprites
 
 function el(tag, props = {}, kids = []) {
@@ -40,9 +41,11 @@ function el(tag, props = {}, kids = []) {
   return n
 }
 
-// Idle sheets are 4 rows (facings) × N frame columns; cell = height/4. Show one
-// front-right cell (row 0) scaled to ICON_PX and step across the columns to loop
-// the idle animation — no canvas, just a sized background + the Web Animations API.
+// Idle sheets are 4 rows (facings) × N frame columns; cell = height/4. We render
+// the front-right row (row 0) and step across the columns to loop the idle — no
+// canvas, just a sized background + the Web Animations API. Each cell is scaled to
+// ICON_ZOOM × the box and the box is centred on it, so the padded-in character
+// fills the icon instead of floating tiny in a sea of transparent cell.
 function animateIdleIcon(box, idleUrl) {
   box.getAnimations?.().forEach((a) => a.cancel())
   box.style.backgroundImage = ''
@@ -51,11 +54,13 @@ function animateIdleIcon(box, idleUrl) {
     const cell = (img.naturalHeight / 4) || img.naturalHeight
     const cols = Math.max(1, Math.round(img.naturalWidth / cell))
     const rows = Math.max(1, Math.round(img.naturalHeight / cell))
+    const cellPx = ICON_PX * ICON_ZOOM                 // zoomed on-screen cell size
+    const off = (cellPx - ICON_PX) / 2                 // inset to centre the box on a cell
     box.style.backgroundImage = `url("${idleUrl}")`
-    box.style.backgroundSize = `${cols * ICON_PX}px ${rows * ICON_PX}px`
-    box.style.backgroundPosition = '0 0'
+    box.style.backgroundSize = `${cols * cellPx}px ${rows * cellPx}px`
+    const y = `-${off}px`                              // row 0, vertically centred
     box.animate(
-      [{ backgroundPosition: '0 0' }, { backgroundPosition: `-${cols * ICON_PX}px 0` }],
+      [{ backgroundPosition: `-${off}px ${y}` }, { backgroundPosition: `-${cols * cellPx + off}px ${y}` }],
       { duration: cols * 110, iterations: Infinity, easing: `steps(${cols})` },
     )
   }
@@ -204,6 +209,9 @@ export function mountPersonaPanel(host) {
   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 || '')
   // Badge when there's a persona but no current voice (none yet, or it went stale).
   function updateVoiceUI() {
     const needs = !!lastPersona && (!hasVoice || isDirty())
@@ -256,9 +264,9 @@ export function mountPersonaPanel(host) {
     updateVoiceUI(); refreshVisibility()
   }
 
-  // ▶ The one voice button: if the cached voice is current, just replay it. If there's
-  // 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.
+  // ▶ The one voice button: if the cached voice is current, just replay it. If the voice
+  // DESIGN text changed (or there's no voice yet) → DESIGN a fresh timbre. If only the
+  // spoken line changed → CLONE the last voice (same timbre, new words). Cache + save over.
   async function play() {
     if (playing) { stopVoice(); return } // second click while sounding → stop
     if (working || !lastPersona) return
@@ -273,13 +281,16 @@ export function mountPersonaPanel(host) {
     if (!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()
     // 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…'
+    status.textContent = reclone ? 'updating the voice…' : 'designing the voice…'
     let wav = null
     try {
-      if (hasVoice) {
+      if (reclone) {
         const blob = await getAudio(savedId)
         wav = await cloneVoiceWav(await blob.arrayBuffer(), lastPersona.voiceQuote || '', line, lastPersona.voice || '')
       } else {

web/shell/persona.css

@@ -41,7 +41,7 @@
 .persona-classdrop-chev { color: var(--p-muted); font-size: 11px; transition: transform .12s; }
 .persona-classdrop.open .persona-classdrop-chev { transform: rotate(180deg); }
 .persona-class-ico {
-  width: 26px; height: 26px; flex-shrink: 0; display: inline-block;
+  width: 30px; height: 30px; flex-shrink: 0; display: inline-block; overflow: hidden;
   background-repeat: no-repeat; background-position: 0 0; image-rendering: pixelated;
 }
 .persona-classdrop-menu {