Persona voice: one pulsing play button, sidebar-style headings, live badge

- One ▶ play button (create button removed). Always shown on the Quote heading; it
designs the voice when there's none, clones the last voice when the quote/voice was
edited (same timbre), or replays the cached file when current.
- Pulsing red badge on ▶ whenever there's no voice yet OR the quote/voice changed —
updates LIVE as you type (input listener), not just on blur.
- Section headings restyled like the sidebar: a short ink line before a small red
uppercase heading; the action button is anchored right after the heading (not at the
page edge). Verified: badge pulses on a no-voice persona; headings + button placement.

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

web/personaPanel.js

@@ -37,9 +37,10 @@ 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…' })
-  // ▶ play sits on the Quote heading; 🎙 create sits on the Voice design heading.
-  const playBtn = el('button', { class: 'persona-ico persona-play', type: 'button', title: 'Play voice', style: 'display:none' }, '▶')
-  const createBtn = el('button', { class: 'persona-ico persona-create', type: 'button', title: 'Create voice', style: 'display:none' }, '🎙')
+  // ▶ 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.
+  const playBtn = el('button', { class: 'persona-ico persona-play', type: 'button', title: 'Play voice' }, '▶')
   const thinkEl = el('pre', { class: 'persona-think' })
   const copyBtn = el('button', { class: 'persona-copy', type: 'button' }, '📋 Copy debug')
   const thinkWrap = el('details', { class: 'persona-think-wrap' },
@@ -59,7 +60,7 @@ export function mountPersonaPanel(host) {
     nameEl, tagsEl,
     secHead('About'), aboutEl,
     secHead('Quote', playBtn), quoteEl,
-    secHead('Voice design', createBtn), voiceEl,
+    secHead('Voice design'), voiceEl,
     thinkWrap,
   ])
   host.appendChild(el('div', { class: 'persona-view' }, [controls, result]))
@@ -73,11 +74,11 @@ export function mountPersonaPanel(host) {
   const lineFor = (p) => (p.quote || '').trim() || (p.about || '').trim() || `${p.name || 'A soldier'} 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 || ''))
+  // Badge when there's a persona but no current voice (none yet, or it went stale).
   function updateVoiceUI() {
-    playBtn.style.display = hasVoice ? '' : 'none'
-    playBtn.classList.toggle('badged', isDirty())
-    createBtn.style.display = lastPersona ? '' : 'none'
-    createBtn.title = hasVoice ? 'Recreate voice' : 'Create voice'
+    const needs = !!lastPersona && (!hasVoice || isDirty())
+    playBtn.classList.toggle('badged', needs)
+    playBtn.title = !lastPersona ? 'Play voice' : (!hasVoice ? 'Create voice' : (isDirty() ? 'Update & play' : 'Play voice'))
   }
 
   function autosave() {
@@ -91,13 +92,14 @@ export function mountPersonaPanel(host) {
     elm.contentEditable = 'true'
     elm.spellcheck = false
     if (single) elm.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); elm.blur() } })
+    // Update the badge immediately as you type; persist on blur.
+    if (field === 'quote' || field === 'voice') {
+      elm.addEventListener('input', () => { if (lastPersona) { lastPersona[field] = elm.textContent.trim(); updateVoiceUI() } })
+    }
     elm.addEventListener('blur', () => {
       if (!lastPersona) return
-      const v = elm.textContent.trim()
-      if ((lastPersona[field] || '') === v) return
-      lastPersona[field] = v
-      autosave()
-      if (field === 'quote' || field === 'voice') updateVoiceUI() // may go stale → badge
+      lastPersona[field] = elm.textContent.trim()
+      autosave(); updateVoiceUI()
     })
   }
   editable(nameEl, 'name', { single: true })
@@ -122,43 +124,39 @@ export function mountPersonaPanel(host) {
     updateVoiceUI()
   }
 
-  // 🎙 Create / Recreate voice — DESIGN a fresh voice from the description and cache it.
-  async function createVoice() {
+  // ▶ 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.
+  async function play() {
     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 }
+      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
-    const line = lineFor(lastPersona)
-    working = true; createBtn.classList.add('busy'); createBtn.disabled = true
-    const prev = status.textContent; status.textContent = 'designing the voice…'
+
+    working = true; playBtn.classList.add('busy'); playBtn.disabled = true
+    const prev = status.textContent
+    status.textContent = hasVoice ? 'updating the voice…' : 'designing the voice…'
     try {
-      const wav = await createVoiceWav(lastPersona.voice, line)
-      await putAudio(savedId, new Blob([wav], { type: 'audio/wav' }))
+      let wav
+      if (hasVoice) {
+        const blob = await getAudio(savedId)
+        wav = await cloneVoiceWav(await blob.arrayBuffer(), lastPersona.voiceQuote || '', line, lastPersona.voice || '')
+      } else {
+        wav = await createVoiceWav(lastPersona.voice, line)
+      }
+      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; createBtn.classList.remove('busy'); createBtn.disabled = false; updateVoiceUI() }
-  }
-  createBtn.addEventListener('click', createVoice)
-
-  // ▶ Play — plays the cached file. If the quote/voice changed since (badge), re-render
-  // the new line by CLONING the last voice (keeps the same timbre), then save over it.
-  async function play() {
-    if (working || !hasVoice || !savedId) return
-    const blob = await getAudio(savedId)
-    if (!blob) { hasVoice = false; updateVoiceUI(); return }
-    if (!isDirty()) { try { await playWav(await blob.arrayBuffer()) } catch { /* ignore */ } return }
-    working = true; playBtn.classList.add('busy'); playBtn.disabled = true
-    const prev = status.textContent; status.textContent = 'updating the voice…'
-    try {
-      const line = lineFor(lastPersona)
-      const newWav = await cloneVoiceWav(await blob.arrayBuffer(), lastPersona.voiceQuote || '', line, lastPersona.voice || '')
-      try { await playWav(newWav.slice(0)) } catch { /* ignore */ }
-      await putAudio(savedId, new Blob([newWav], { type: 'audio/wav' })) // save over
-      lastPersona.voiceQuote = line; lastPersona.voiceDesignUsed = lastPersona.voice
-      autosave(); status.textContent = prev
-    } catch (e) { status.textContent = `voice update failed: ${e.message || e}` }
     finally { working = false; playBtn.classList.remove('busy'); playBtn.disabled = false; updateVoiceUI() }
   }
   playBtn.addEventListener('click', play)
@@ -209,8 +207,8 @@ export function mountPersonaPanel(host) {
     if (window.innerWidth <= 768) result.scrollIntoView({ behavior: 'smooth', block: 'start' })
     nameEl.textContent = '…'; aboutEl.textContent = ''; tagsEl.replaceChildren()
     quoteEl.textContent = ''; voiceEl.textContent = ''
-    createBtn.style.display = 'none'; playBtn.style.display = 'none'; lastPersona = null; savedId = null; hasVoice = false
-    stopPreview()
+    lastPersona = null; savedId = null; hasVoice = false
+    stopPreview(); updateVoiceUI()
     thinkEl.textContent = ''; thinkWrap.open = true; stats.textContent = ''
     let acc = ''
     try {

web/shell/persona.css

@@ -62,15 +62,15 @@
   font-size: 17px; line-height: 1.6; max-width: 60ch; color: var(--p-ink);
   white-space: pre-wrap;
 }
-/* ── Section headers (line + red heading, action on the right) ─────────────── */
-.persona-sec {
-  display: flex; align-items: center; justify-content: space-between; gap: 10px;
-  margin-top: 20px; padding-top: 9px; border-top: 1px solid var(--p-ink);
-}
+/* ── Section headers — like the sidebar: a short ink line, red heading, with the
+   action button anchored right after the title (not at the page edge). ───────── */
+.persona-sec { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
 .persona-sec-title {
-  font-family: var(--p-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em;
+  display: flex; align-items: center; gap: 8px;
+  font-family: var(--p-mono); font-size: 10px; font-weight: 500; letter-spacing: .2em;
   text-transform: uppercase; color: var(--p-transmit);
 }
+.persona-sec-title::before { content: ''; height: 2px; width: 18px; background: var(--p-ink); flex-shrink: 0; }
 .persona-voice-desc {
   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;
@@ -83,17 +83,24 @@
 .persona-quote:not(:empty)::before { content: '“'; }
 .persona-quote:not(:empty)::after { content: '”'; }
 
-/* Simple icon buttons on the section headers. */
+/* Simple icon button anchored after a section heading. */
 .persona-ico {
   position: relative; cursor: pointer; flex-shrink: 0; line-height: 1;
-  font-size: 13px !important; color: var(--p-ink) !important; background: var(--p-card) !important;
-  border: 1.5px solid var(--p-ink) !important; border-radius: 0 !important; padding: 5px 10px !important;
+  font-size: 12px !important; color: var(--p-ink) !important; background: var(--p-card) !important;
+  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-play.badged::after { /* "voice changed — tap to refresh" badge */
+/* 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;
   background: var(--p-transmit); border: 1.5px solid var(--p-card); border-radius: 50%;
+  animation: tac-badge-pulse 1.3s ease-out infinite;
+}
+@keyframes tac-badge-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(216, 39, 26, .6); }
+  70% { box-shadow: 0 0 0 7px rgba(216, 39, 26, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(216, 39, 26, 0); }
 }
 
 /* Click-to-edit fields (name / about / quote / voice) — auto-saved on blur. */