Personas-as-agents: spoken quote + save to a local-first barracks roster

Each persona now also gets a `quote` (a short spoken line). "Hear voice" designs the
voice and speaks the QUOTE (not the bio). New personaStore.js — a local-first roster
(localStorage JSON blob + CRUD + change listeners + a pluggable sync hook), modeled on
woid's Shelter store — so saved soldiers persist for returning visitors. Persona panel
gains "💾 Save to barracks" + a roster list (view / remove); MAX_TOKENS 160→200 for the
extra fields. Verified: save → reload → persists.

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

web/personaPanel.js

@@ -1,15 +1,16 @@
-// Tiny Army persona panel — vanilla DOM, mounted by tiny.js into #persona-stage.
-// Generation runs ON THE USER'S DEVICE via the chosen engine (Settings). Streams into a
-// live "thinking" view + parsed result, shows tok/s, and exposes a one-tap "Copy debug"
-// report (engine/model/raw output/error) so failures can be pasted back for triage.
+// 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.
 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'
 
 const CLASSES = ['Warrior', 'Ranger', 'Monk', 'Assassin', 'Mage', 'Paladin', 'Cleric', 'Knight']
-const MAX_TOKENS = 160 // short personas + a one-line voice description for Qwen3-TTS
+const MAX_TOKENS = 200 // persona JSON + a voice line + a quote
 
 function el(tag, props = {}, kids = []) {
   const n = document.createElement(tag)
@@ -28,12 +29,15 @@ export function mountPersonaPanel(host) {
   const stats = el('div', { class: 'persona-stats' })
   const status = el('div', { class: 'persona-status' }, 'Runs on your device — no cloud.')
   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 tagsEl = el('div', { class: 'persona-tags' })
-  const aboutEl = el('div', { class: 'persona-about' }, 'Pick a class and recruit — a small model in your browser writes their legend.')
+  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 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' },
@@ -43,37 +47,69 @@ export function mountPersonaPanel(host) {
     el('label', { class: 'persona-label' }, 'Class'), sel,
     el('label', { class: 'persona-label' }, 'Seed'), seed,
     btn, stats, status,
+    el('label', { class: 'persona-label persona-roster-label' }, 'Barracks (saved)'), rosterEl,
   ])
-  const result = el('div', { class: 'persona-result' }, [nameEl, tagsEl, aboutEl, voiceEl, hearBtn, thinkWrap])
+  const result = el('div', { class: 'persona-result' }, [nameEl, tagsEl, quoteEl, aboutEl, voiceEl, el('div', { class: 'persona-actions' }, [hearBtn, saveBtn]), thinkWrap])
   host.appendChild(el('div', { class: 'persona-view' }, [controls, result]))
 
-  // 🔊 Hear voice — design this soldier's voice from their `voice` line (Qwen3-TTS via
-  // DashScope) and read their `about` aloud. Networked (not local-first).
-  let lastPersona = null
+  let lastPersona = null     // the persona currently shown (generated or loaded)
+  let savedId = null         // its roster id once saved
   let hearing = false
-  hearBtn.addEventListener('click', async () => {
-    if (hearing) { stopPreview(); return } // onfinish below resets the label
-    if (!lastPersona || !lastPersona.voice) return
-    hearing = true; hearBtn.textContent = '⏹ Stop'
-    const prev = status.textContent
-    status.textContent = '☁ designing the voice on DashScope…'
-    try {
-      await previewVoice(lastPersona.voice, lastPersona.about || lastPersona.name || 'Hello.')
-      status.textContent = prev
-    } catch (e) {
-      status.textContent = `voice failed: ${e.message || e}`
-    } finally {
-      hearing = false; hearBtn.textContent = '🔊 Hear voice'
-    }
-  })
 
   function setTags(p) {
     tagsEl.replaceChildren(...[p.specialty, p.personality, p.vibe].filter(Boolean)
       .map((t) => el('span', { class: 'persona-tag' }, t)))
   }
-  function showStats(s) {
-    stats.textContent = `● ${s.tokPerSec} tok/s · ${s.tokens} tok${s.ttftSeconds != null ? ` · first ${s.ttftSeconds}s` : ''}`
+
+  // Show a persona (from generation or the roster) in the result pane.
+  function showPersona(p, opts = {}) {
+    lastPersona = p
+    savedId = opts.savedId || null
+    nameEl.textContent = p.name || 'Soldier'
+    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
+  }
+
+  // 🔊 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'
+    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' }
+  }
+  hearBtn.addEventListener('click', hear)
+
+  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
+  })
+
+  // ── 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('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 = ''
@@ -98,7 +134,6 @@ export function mountPersonaPanel(host) {
       copyBtn.textContent = '✓ copied'
       setTimeout(() => { copyBtn.textContent = '📋 Copy debug' }, 1600)
     } catch {
-      // Clipboard blocked (insecure context / permissions) — show it selected to copy by hand.
       thinkEl.textContent = text; thinkWrap.open = true
       const r = document.createRange(); r.selectNodeContents(thinkEl)
       const s = getSelection(); s.removeAllRanges(); s.addRange(r)
@@ -112,34 +147,31 @@ export function mountPersonaPanel(host) {
     busy = true; btn.disabled = true
     if (window.innerWidth <= 768) result.scrollIntoView({ behavior: 'smooth', block: 'start' })
     nameEl.textContent = '…'; aboutEl.textContent = ''; tagsEl.replaceChildren()
-    voiceEl.textContent = ''; hearBtn.style.display = 'none'; lastPersona = null
+    quoteEl.textContent = ''; voiceEl.textContent = ''
+    hearBtn.style.display = 'none'; saveBtn.style.display = 'none'; lastPersona = null; savedId = null
     if (hearing) stopPreview()
     thinkEl.textContent = ''; thinkWrap.open = true; stats.textContent = ''
     let acc = ''
     try {
-      status.textContent = `loading ${currentModel().label} into your browser…`
+      status.textContent = `loading ${currentModel().label}…`
       await ensureModel((frac, label) => { status.textContent = label || `downloading ${currentModel().label}… ${Math.round(frac * 100)}% (one-time)` })
       status.textContent = `writing on your device with ${currentModel().label}…`
       await streamChat(PERSONA_SYSTEM, personaUserPrompt(sel.value, seed.value) + noThink(currentModelId()), {
         maxTokens: MAX_TOKENS,
         onToken: (piece) => {
           acc += piece
-          thinkEl.textContent = acc  // raw view shows the model's <think> reasoning too
+          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
         },
-        onStats: showStats,
+        onStats: (s) => { stats.textContent = `● ${s.tokPerSec} tok/s · ${s.tokens} tok${s.ttftSeconds != null ? ` · first ${s.ttftSeconds}s` : ''}` },
       })
       try {
         const p = parsePersonaJson(stripThinkFinal(acc))
-        if (p.name) nameEl.textContent = p.name
-        aboutEl.textContent = p.about
-        setTags(p)
-        lastPersona = p
-        if (p.voice) { voiceEl.textContent = `🎙 ${p.voice}`; hearBtn.style.display = '' }
-        status.textContent = 'enlisted ✓ (generated locally)'
+        showPersona(p)
+        status.textContent = 'enlisted ✓ — 💾 Save to keep'
         lastDebug = buildDebug('parsed OK', acc)
         thinkWrap.open = false
       } catch (e) {

web/personaParse.js

@@ -96,6 +96,7 @@ export function parsePersonaJson(raw) {
   const specialty = trimTag(parsed.specialty ?? parsed.role ?? parsed.job ?? null);
   const personality = trimTag(parsed.personality ?? parsed.personalityTag ?? null);
   const voice = (typeof parsed.voice === "string" ? parsed.voice.trim() : "").slice(0, 300);
+  const quote = (typeof parsed.quote === "string" ? parsed.quote.trim() : "").slice(0, 200);
 
-  return { name: name || null, about, avatar_hint, vibe, specialty, personality, voice };
+  return { name: name || null, about, avatar_hint, vibe, specialty, personality, voice, quote };
 }

web/personaPrompts.js

@@ -12,7 +12,9 @@ export const PERSONA_SYSTEM =
   '  "vibe": a 1-3 word vibe,\n' +
   '  "voice": one sentence describing how they SOUND for a text-to-speech voice — gender, ' +
   'age, pitch, accent, texture, pace and emotion (e.g. "a gravelly, battle-worn male ' +
-  'baritone, slow and weary, with a faint highland accent").\n' +
+  'baritone, slow and weary, with a faint highland accent"),\n' +
+  '  "quote": one short punchy line they say aloud — a battle-cry or wry remark, ' +
+  'first person, under 15 words.\n' +
   'Output strictly valid JSON. No preamble, no code fences, no commentary.'
 
 export const DIARY_SYSTEM =

web/personaStore.js

@@ -0,0 +1,59 @@
+// Local-first roster of saved soldiers (personas-as-agents). Modeled on woid's Shelter
+// store: a single JSON blob in localStorage, simple CRUD, change listeners, and a
+// pluggable `sync` hook so a backend can push/pull later WITHOUT changing callers.
+// Voice is stored as the design TEXT + quote (re-synthesized on replay) — the audio
+// blob and cross-device sync are the backend's job (see the plan). Future persona data
+// (stats, avatar, xp, relationships) just adds fields to the record.
+const KEY = 'tinyarmy.roster.v1'
+
+const listeners = new Set()
+let _sync = null // optional { push(records), pull() } — wired to a backend later
+
+function read() {
+  try { const d = JSON.parse(localStorage.getItem(KEY) || '{}'); return Array.isArray(d.personas) ? d : { personas: [] } }
+  catch { return { personas: [] } }
+}
+function write(d) {
+  try { localStorage.setItem(KEY, JSON.stringify(d)) } catch { /* quota / disabled */ }
+  for (const fn of listeners) { try { fn(d.personas) } catch { /* ignore */ } }
+  if (_sync && _sync.push) { try { _sync.push(d.personas) } catch { /* best-effort */ } }
+}
+
+const newId = () => 's_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 7)
+
+export function listPersonas() { return read().personas }
+export function getPersona(id) { return read().personas.find((p) => p.id === id) || null }
+export function onRosterChange(fn) { listeners.add(fn); return () => listeners.delete(fn) }
+export function setSync(sync) { _sync = sync }
+
+// Insert or update. Returns the stored record (with id + timestamps).
+export function savePersona(p) {
+  const d = read()
+  const now = Date.now()
+  const id = p.id || newId()
+  const rec = {
+    id,
+    name: p.name || 'Unnamed soldier',
+    unitClass: p.unitClass || '',
+    about: p.about || '',
+    quote: p.quote || '',
+    voice: p.voice || '',
+    specialty: p.specialty || '',
+    personality: p.personality || '',
+    vibe: p.vibe || '',
+    seed: p.seed || '',
+    createdAt: now,
+    updatedAt: now,
+  }
+  const i = d.personas.findIndex((x) => x.id === id)
+  if (i >= 0) { rec.createdAt = d.personas[i].createdAt; d.personas[i] = rec }
+  else { d.personas.unshift(rec) }
+  write(d)
+  return rec
+}
+
+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 })
+}

web/shell/persona.css

@@ -67,7 +67,33 @@
   max-width: 60ch; margin-top: 14px; font-style: italic;
 }
 .persona-voice-desc:empty { display: none; }
-.persona-hear { display: inline-block; margin-top: 10px; }
+.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; }
+
+/* ── Barracks roster (saved soldiers) ──────────────────────────────────────── */
+.persona-roster-label { margin-top: 18px; }
+.persona-roster { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; max-height: 230px; overflow-y: auto; }
+.persona-roster-empty { font-family: var(--p-mono); font-size: 10px; color: var(--p-muted); padding: 4px 0; }
+.persona-roster-item { display: flex; align-items: stretch; gap: 4px; }
+.persona-roster-name {
+  flex: 1; text-align: left; cursor: pointer;
+  font-family: var(--p-sans) !important; 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: 7px 9px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.persona-roster-name:hover { background: var(--p-paper-2) !important; }
+.persona-roster-x {
+  cursor: pointer; flex-shrink: 0; font-size: 11px !important;
+  color: var(--p-transmit) !important; background: var(--p-card) !important;
+  border: 1.5px solid var(--p-transmit) !important; border-radius: 0 !important; padding: 0 8px !important;
+}
+.persona-roster-x:hover { background: var(--p-transmit) !important; }
 
 /* ── Model picker + cache controls ─────────────────────────────────────────── */
 .model-bar { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px dashed var(--p-ink); }