Persona: editable fields (auto-save), quote after about, Create/Replay voice

- Reorder result: name → tags → about → quote → voice design.
- All fields (name/about/quote/voice) are click-to-edit (contentEditable); every edit
auto-saves to the roster — no Save button. Generated personas auto-save immediately.
- "Hear voice" → "🎙 Create voice": synthesizes the QUOTE in the designed voice, caches
the WAV in IndexedDB (personaStore put/getAudio), and plays it. Once created, a ▶
replay button beside the quote replays the exact cached file; button becomes
"Recreate voice".
- tts.js: createVoiceWav() returns the raw WAV (caller caches/plays); qwen3.synthWav()
added. Verified end-to-end on the local GPU: synth → cache → retrieve.

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

web/personaPanel.js

@@ -1,13 +1,14 @@
 // Tiny Army persona panel — mounted by tiny.js into #persona-stage. Recruits a soldier
-// (name/about/traits + a voice design + a spoken quote) on the chosen engine, lets you
-// HEAR their voice say their quote, and SAVE them to a local-first barracks roster
-// (personaStore) so they persist for returning visitors. Modeled on woid's agent store.
+// (name/about/traits + a voice design + a spoken quote), lets you CREATE a voice file of
+// them saying their quote (Qwen3-TTS) and REPLAY it, edit every field inline (auto-saved),
+// and keeps everyone in a local-first barracks roster (personaStore) so they persist for
+// returning visitors. Modeled on woid's agent store.
 import { streamChat, ensureModel, currentModel, currentModelId, getEngineId, backendLabel } from '/web/runtime.js'
 import { extractLivePersona } from '/web/personaStream.js'
 import { parsePersonaJson } from '/web/personaParse.js'
 import { PERSONA_SYSTEM, personaUserPrompt, stripThink, stripThinkFinal, noThink } from '/web/personaPrompts.js'
-import { previewVoice, stopPreview } from '/web/tts.js'
-import { listPersonas, savePersona, removePersona, onRosterChange } from '/web/personaStore.js'
+import { createVoiceWav, playWav, stopPreview } 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']
 const MAX_TOKENS = 200 // persona JSON + a voice line + a quote
@@ -31,13 +32,15 @@ export function mountPersonaPanel(host) {
   const btn = el('button', { class: 'persona-go', type: 'button' }, '⚔ Recruit a soldier')
   const rosterEl = el('div', { class: 'persona-roster' })
 
-  const nameEl = el('div', { class: 'persona-name' }, 'Your soldier')
+  const nameEl = el('div', { class: 'persona-name persona-edit', 'data-ph': 'Name' })
   const tagsEl = el('div', { class: 'persona-tags' })
-  const quoteEl = el('blockquote', { class: 'persona-quote' })
-  const aboutEl = el('div', { class: 'persona-about' }, 'Pick a class and recruit — a small model writes their legend, designs their voice, and gives them a battle-cry.')
-  const voiceEl = el('div', { class: 'persona-voice-desc' })
-  const hearBtn = el('button', { class: 'persona-go persona-go-alt persona-hear', type: 'button', style: 'display:none' }, '🔊 Hear voice')
-  const saveBtn = el('button', { class: 'persona-go persona-save', type: 'button', style: 'display:none' }, '💾 Save to barracks')
+  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 replayBtn = el('button', { class: 'persona-replay', type: 'button', title: 'Replay voice', style: 'display:none' }, '▶')
+  const quoteRow = el('div', { class: 'persona-quote-row' }, [quoteEl, replayBtn])
+  const voiceLabel = el('div', { class: 'persona-voice-lbl' }, '🎙 Voice design')
+  const voiceEl = el('div', { class: 'persona-voice-desc persona-edit', 'data-ph': 'How they sound…' })
+  const createBtn = el('button', { class: 'persona-go persona-go-alt persona-create', type: 'button', style: 'display:none' }, '🎙 Create 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' },
@@ -49,69 +52,101 @@ export function mountPersonaPanel(host) {
     btn, stats, status,
     el('label', { class: 'persona-label persona-roster-label' }, 'Barracks (saved)'), rosterEl,
   ])
-  const result = el('div', { class: 'persona-result' }, [nameEl, tagsEl, quoteEl, aboutEl, voiceEl, el('div', { class: 'persona-actions' }, [hearBtn, saveBtn]), thinkWrap])
+  const result = el('div', { class: 'persona-result' },
+    [nameEl, tagsEl, aboutEl, quoteRow, voiceLabel, voiceEl, el('div', { class: 'persona-actions' }, [createBtn]), thinkWrap])
   host.appendChild(el('div', { class: 'persona-view' }, [controls, result]))
 
-  let lastPersona = null     // the persona currently shown (generated or loaded)
-  let savedId = null         // its roster id once saved
-  let hearing = false
+  let lastPersona = null  // the persona currently shown
+  let savedId = null      // its roster id (set the moment it's shown — always saved)
+  let working = false
+
+  function autosave() {
+    if (!lastPersona) return
+    const rec = savePersona({ ...lastPersona, id: savedId, unitClass: lastPersona.unitClass || sel.value, seed: lastPersona.seed || seed.value })
+    savedId = rec.id
+  }
+
+  // Make a field click-to-edit; persist on blur (always save after edit — no button).
+  function editable(elm, field, { single = false } = {}) {
+    elm.contentEditable = 'true'
+    elm.spellcheck = false
+    if (single) elm.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); elm.blur() } })
+    elm.addEventListener('blur', () => {
+      if (!lastPersona) return
+      const v = elm.textContent.trim()
+      if ((lastPersona[field] || '') === v) return
+      lastPersona[field] = v
+      autosave()
+    })
+  }
+  editable(nameEl, 'name', { single: true })
+  editable(aboutEl, 'about')
+  editable(quoteEl, 'quote', { single: true })
+  editable(voiceEl, 'voice')
 
   function setTags(p) {
     tagsEl.replaceChildren(...[p.specialty, p.personality, p.vibe].filter(Boolean)
       .map((t) => el('span', { class: 'persona-tag' }, t)))
   }
 
-  // Show a persona (from generation or the roster) in the result pane.
-  function showPersona(p, opts = {}) {
-    lastPersona = p
+  async function showPersona(p, opts = {}) {
+    lastPersona = { ...p }
     savedId = opts.savedId || null
-    nameEl.textContent = p.name || 'Soldier'
+    nameEl.textContent = p.name || ''
     setTags(p)
-    quoteEl.textContent = p.quote ? `“${p.quote}”` : ''
     aboutEl.textContent = p.about || ''
-    voiceEl.textContent = p.voice ? `🎙 ${p.voice}` : ''
-    hearBtn.style.display = p.voice ? '' : 'none'
-    saveBtn.style.display = ''
-    saveBtn.textContent = savedId ? '✓ saved' : '💾 Save to barracks'
-    saveBtn.disabled = !!savedId
+    quoteEl.textContent = p.quote || ''
+    voiceEl.textContent = p.voice || ''
+    createBtn.style.display = ''
+    // Show replay if we have a cached voice file for this saved persona.
+    const has = savedId ? !!(await getAudio(savedId)) : false
+    replayBtn.style.display = has ? '' : 'none'
+    createBtn.textContent = has ? '🎙 Recreate voice' : '🎙 Create voice'
   }
 
-  // 🔊 Hear voice — design the voice from `voice` and speak the QUOTE (falls back to a
-  // line built from name/about if there's no quote). Networked (Qwen3-TTS).
-  async function hear() {
-    if (hearing) { stopPreview(); return }
-    if (!lastPersona || !lastPersona.voice) return
-    const line = lastPersona.quote || lastPersona.about || `${lastPersona.name} reporting for duty.`
-    hearing = true; hearBtn.textContent = '⏹ Stop'
+  // 🎙 Create voice — synth the QUOTE in the designed voice, cache the WAV, play it.
+  async function createVoice() {
+    if (working || !lastPersona) return
+    const line = (lastPersona.quote || '').trim() || (lastPersona.about || '').trim() || `${lastPersona.name} reporting for duty.`
+    if (!lastPersona.voice) { status.textContent = 'add a voice design first'; return }
+    autosave() // ensure an id to key the audio
+    working = true; const prevTxt = createBtn.textContent; createBtn.textContent = '🎙 designing…'; createBtn.disabled = true
     const prev = status.textContent
-    status.textContent = 'designing the voice…'
-    try { await previewVoice(lastPersona.voice, line); status.textContent = prev }
-    catch (e) { status.textContent = `voice failed: ${e.message || e}` }
-    finally { hearing = false; hearBtn.textContent = '🔊 Hear voice' }
+    try {
+      const wav = await createVoiceWav(lastPersona.voice, line)
+      await putAudio(savedId, new Blob([wav], { type: 'audio/wav' }))
+      try { await playWav(wav.slice(0)) } catch { /* autoplay blocked — replay button still works */ }
+      replayBtn.style.display = ''
+      createBtn.textContent = '🎙 Recreate voice'
+      status.textContent = prev
+    } catch (e) {
+      status.textContent = `voice failed: ${e.message || e}`
+      createBtn.textContent = prevTxt
+    } finally { working = false; createBtn.disabled = false }
   }
-  hearBtn.addEventListener('click', hear)
+  createBtn.addEventListener('click', createVoice)
 
-  saveBtn.addEventListener('click', () => {
-    if (!lastPersona || savedId) return
-    const rec = savePersona({ ...lastPersona, unitClass: sel.value, seed: seed.value })
-    savedId = rec.id
-    saveBtn.textContent = '✓ saved'; saveBtn.disabled = true
-  })
+  async function replay() {
+    if (!savedId) return
+    const blob = await getAudio(savedId)
+    if (!blob) return createVoice()
+    try { await playWav(await blob.arrayBuffer()) } catch { /* ignore */ }
+  }
+  replayBtn.addEventListener('click', replay)
 
   // ── Barracks roster (saved soldiers) ──────────────────────────────────────
   function renderRoster(personas) {
     if (!personas.length) { rosterEl.replaceChildren(el('div', { class: 'persona-roster-empty' }, 'No soldiers saved yet.')); return }
     rosterEl.replaceChildren(...personas.map((p) =>
-      el('div', { class: 'persona-roster-item' }, [
-        el('button', { class: 'persona-roster-name', type: 'button', title: 'View', onclick: () => showPersona(p, { savedId: p.id }) },
-          `${p.name}${p.unitClass ? ` · ${p.unitClass}` : ''}`),
+      el('div', { class: 'persona-roster-item' + (p.id === savedId ? ' active' : '') }, [
+        el('button', { class: 'persona-roster-name', type: 'button', title: 'View', onclick: () => showPersona(p, { savedId: p.id }).then(() => renderRoster(listPersonas())) },
+          `${p.name || 'Soldier'}${p.unitClass ? ` · ${p.unitClass}` : ''}`),
         el('button', { class: 'persona-roster-x', type: 'button', title: 'Remove', onclick: () => removePersona(p.id) }, '🗑'),
       ])))
   }
   renderRoster(listPersonas())
   onRosterChange(renderRoster)
 
-  // A self-contained, paste-ready report of the last run.
   let lastDebug = ''
   function buildDebug(outcome, acc) {
     const stripped = stripThinkFinal(acc || '')
@@ -121,18 +156,15 @@ export function mountPersonaPanel(host) {
       `model:    ${currentModelId()} (${currentModel().label})`,
       `input:    class=${sel.value} seed=${seed.value || '(none)'} maxTokens=${MAX_TOKENS}`,
       `outcome:  ${outcome}`,
-      `--- raw output (${(acc || '').length} chars) ---`,
-      acc || '(empty)',
-      `--- after stripThink → parser (${stripped.length} chars) ---`,
-      stripped || '(empty)',
+      `--- raw output (${(acc || '').length} chars) ---`, acc || '(empty)',
+      `--- after stripThink → parser (${stripped.length} chars) ---`, stripped || '(empty)',
     ].join('\n')
   }
   copyBtn.addEventListener('click', async () => {
     const text = lastDebug || buildDebug('(no generation yet)', '')
     try {
       await navigator.clipboard.writeText(text)
-      copyBtn.textContent = '✓ copied'
-      setTimeout(() => { copyBtn.textContent = '📋 Copy debug' }, 1600)
+      copyBtn.textContent = '✓ copied'; setTimeout(() => { copyBtn.textContent = '📋 Copy debug' }, 1600)
     } catch {
       thinkEl.textContent = text; thinkWrap.open = true
       const r = document.createRange(); r.selectNodeContents(thinkEl)
@@ -148,8 +180,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 = ''
-    hearBtn.style.display = 'none'; saveBtn.style.display = 'none'; lastPersona = null; savedId = null
-    if (hearing) stopPreview()
+    createBtn.style.display = 'none'; replayBtn.style.display = 'none'; lastPersona = null; savedId = null
+    stopPreview()
     thinkEl.textContent = ''; thinkWrap.open = true; stats.textContent = ''
     let acc = ''
     try {
@@ -160,8 +192,7 @@ export function mountPersonaPanel(host) {
         maxTokens: MAX_TOKENS,
         onToken: (piece) => {
           acc += piece
-          thinkEl.textContent = acc
-          thinkEl.scrollTop = thinkEl.scrollHeight
+          thinkEl.textContent = acc; thinkEl.scrollTop = thinkEl.scrollHeight
           const live = extractLivePersona(stripThink(acc))
           if (live.name) nameEl.textContent = live.name
           if (live.about) aboutEl.textContent = live.about
@@ -170,22 +201,19 @@ export function mountPersonaPanel(host) {
       })
       try {
         const p = parsePersonaJson(stripThinkFinal(acc))
-        showPersona(p)
-        status.textContent = 'enlisted ✓ — 💾 Save to keep'
-        lastDebug = buildDebug('parsed OK', acc)
-        thinkWrap.open = false
+        await showPersona(p)
+        autosave()                  // generated personas are saved immediately (no Save button)
+        renderRoster(listPersonas())
+        status.textContent = 'enlisted ✓ (saved) — edit any field, or create a voice'
+        lastDebug = buildDebug('parsed OK', acc); thinkWrap.open = false
       } catch (e) {
         status.textContent = `the model rambled — couldn't parse a clean persona (${e.message || e}) · 📋 Copy debug`
-        lastDebug = buildDebug('PARSE ERROR: ' + (e.message || e), acc)
-        thinkWrap.open = true
+        lastDebug = buildDebug('PARSE ERROR: ' + (e.message || e), acc); thinkWrap.open = true
       }
     } catch (e) {
       status.textContent = `couldn't run the local model: ${e.message || e} · 📋 Copy debug`
-      lastDebug = buildDebug('EXCEPTION: ' + (e.message || e) + (e.stack ? '\n' + e.stack : ''), acc)
-      thinkWrap.open = true
-    } finally {
-      busy = false; btn.disabled = false
-    }
+      lastDebug = buildDebug('EXCEPTION: ' + (e.message || e) + (e.stack ? '\n' + e.stack : ''), acc); thinkWrap.open = true
+    } finally { busy = false; btn.disabled = false }
   }
   btn.addEventListener('click', generate)
 }

web/personaStore.js

@@ -56,4 +56,35 @@ export function removePersona(id) {
   const d = read()
   const next = d.personas.filter((x) => x.id !== id)
   if (next.length !== d.personas.length) write({ personas: next })
+  delAudio(id)
+}
+
+// ── Voice audio store (IndexedDB — WAV blobs are too big for localStorage) ──────
+const DB = 'tinyarmy', STORE = 'voices'
+let _dbp = null
+function db() {
+  if (!_dbp) {
+    _dbp = new Promise((res, rej) => {
+      const r = indexedDB.open(DB, 1)
+      r.onupgradeneeded = () => { if (!r.result.objectStoreNames.contains(STORE)) r.result.createObjectStore(STORE) }
+      r.onsuccess = () => res(r.result)
+      r.onerror = () => rej(r.error)
+    })
+  }
+  return _dbp
+}
+export async function putAudio(id, blob) {
+  try {
+    const d = await db()
+    await new Promise((res, rej) => { const t = d.transaction(STORE, 'readwrite'); t.objectStore(STORE).put(blob, id); t.oncomplete = res; t.onerror = () => rej(t.error) })
+  } catch { /* best-effort */ }
+}
+export async function getAudio(id) {
+  try {
+    const d = await db()
+    return await new Promise((res) => { const t = d.transaction(STORE, 'readonly'); const q = t.objectStore(STORE).get(id); q.onsuccess = () => res(q.result || null); q.onerror = () => res(null) })
+  } catch { return null }
+}
+async function delAudio(id) {
+  try { const d = await db(); d.transaction(STORE, 'readwrite').objectStore(STORE).delete(id) } catch { /* ignore */ }
 }

web/shell/persona.css

@@ -62,19 +62,35 @@
   font-size: 17px; line-height: 1.6; max-width: 60ch; color: var(--p-ink);
   white-space: pre-wrap;
 }
+.persona-voice-lbl {
+  font-family: var(--p-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
+  color: var(--p-muted); margin-top: 16px;
+}
 .persona-voice-desc {
-  font-family: var(--p-mono); font-size: 11px; line-height: 1.5; color: var(--p-muted);
-  max-width: 60ch; margin-top: 14px; font-style: italic;
+  font-family: var(--p-mono); font-size: 12px; line-height: 1.5; color: var(--p-muted);
+  max-width: 60ch; margin-top: 4px; font-style: italic;
 }
-.persona-voice-desc:empty { display: none; }
+.persona-quote-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; }
 .persona-quote {
-  margin: 14px 0 0; padding: 8px 0 8px 16px; border-left: 3px solid var(--p-transmit);
-  font-family: 'Fraunces', Georgia, serif; font-size: 20px; font-style: italic;
-  line-height: 1.35; color: var(--p-ink); max-width: 56ch;
-}
-.persona-quote:empty { display: none; }
-.persona-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
-.persona-hear, .persona-save { display: inline-block; margin-top: 0; }
+  flex: 1; margin: 0; padding: 6px 0 6px 16px; border-left: 3px solid var(--p-transmit);
+  font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-style: italic;
+  line-height: 1.35; color: var(--p-ink); max-width: 54ch;
+}
+.persona-quote:not(:empty)::before { content: '“'; }
+.persona-quote:not(:empty)::after { content: '”'; }
+.persona-replay {
+  flex-shrink: 0; cursor: pointer; margin-top: 4px;
+  font-size: 13px !important; color: var(--p-paper) !important; background: var(--p-transmit) !important;
+  border: 1.5px solid var(--p-transmit) !important; border-radius: 0 !important; padding: 6px 11px !important; line-height: 1;
+}
+.persona-replay:hover { background: var(--p-ink) !important; border-color: var(--p-ink) !important; }
+.persona-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
+
+/* Click-to-edit fields (name / about / quote / voice) — auto-saved on blur. */
+.persona-edit { cursor: text; border-radius: 0; outline: none; transition: background .12s; }
+.persona-edit:hover { background: color-mix(in srgb, var(--p-card) 60%, transparent); box-shadow: 0 0 0 1px var(--p-paper-2); }
+.persona-edit:focus { background: var(--p-card); box-shadow: 0 0 0 1.5px var(--p-transmit); }
+.persona-edit:empty::before { content: attr(data-ph); color: var(--p-muted); opacity: .6; font-style: italic; }
 
 /* ── Barracks roster (saved soldiers) ──────────────────────────────────────── */
 .persona-roster-label { margin-top: 18px; }

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 } from '/web/ttsAudio.js'
+import { playSamples, stopAudio, decodeAudio } from '/web/ttsAudio.js'
 import { ensurePersistentStorage } from '/web/storage.js'
 
 const ENGINES = [kokoro, qwen3local, qwen3, kitten, webspeech]
@@ -23,6 +23,17 @@ export async function previewVoice(desc, text) {
   return playSamples(audio, sampleRate)
 }
 export const stopPreview = () => stopAudio()
+
+// Create a persona's voice FILE: synth the line in the designed voice and return the
+// raw WAV (ArrayBuffer) so it can be cached + replayed verbatim. Caller plays it.
+export async function createVoiceWav(desc, text) {
+  qwen3.setDesc(desc)
+  return qwen3.synthWav(text, 'persona')
+}
+export async function playWav(arrayBuffer) {
+  const { audio, sampleRate } = await decodeAudio(arrayBuffer)
+  return playSamples(audio, sampleRate)
+}
 const voiceSel = {} // engineId -> chosen voice id
 
 const eng = () => ENGINES.find((e) => e.id === activeId) || ENGINES[0]

web/ttsQwen3.js

@@ -35,16 +35,17 @@ export const isLocalhost = () => {
   try { return /^(localhost|127\.0\.0\.1|\[?::1\]?|0\.0\.0\.0)$/i.test(location.hostname) } catch { return false }
 }
 
-// POST to `${base}/qwen-tts` → WAV → samples. base '' = same-origin.
-async function postSynth(base, text, voiceId) {
+// POST to `${base}/qwen-tts` → raw WAV ArrayBuffer. base '' = same-origin.
+async function postSynthWav(base, text, voiceId) {
   const instruct = (get(voiceId).desc() || '').trim()
   const resp = await fetch(`${base}/qwen-tts`, {
     method: 'POST', headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ text, instruct, language: 'English' }),
   })
   if (!resp.ok) throw new Error(`Qwen3-TTS ${resp.status}: ${(await resp.text()).slice(0, 140)}`)
-  return decodeAudio(await resp.arrayBuffer())
+  return resp.arrayBuffer()
 }
+const postSynth = async (base, text, voiceId) => decodeAudio(await postSynthWav(base, text, voiceId))
 
 const common = {
   mode: 'pcm', needsDownload: false, networked: true,
@@ -60,6 +61,7 @@ export const engine = {
   label: 'Qwen3-TTS · Voice Design (cloud)',
   available: () => true,
   synth: (text, voiceId) => postSynth(ttsBase(), text, voiceId),
+  synthWav: (text, voiceId) => postSynthWav(ttsBase(), text, voiceId),
   backendLabel: () => { const b = ttsBase(); try { return b ? '🖥 ' + new URL(b).host : '☁ DashScope' } catch { return '☁ DashScope' } },
 }