Personas → heroes: shield icon, hero terminology, empty state, active highlight

- Nav icon for Personas: 🪖 (contemporary helmet) → 🛡 (fantasy shield).
- "Recruit a soldier" → "Recruit hero"; all "soldier" copy → "hero" ("No heroes saved
yet", prompts, store defaults, diary).
- Persona page hides the hero fields until a hero is generated or picked (empty state
"Recruit a hero, or pick one from the barracks").
- The selected hero is highlighted in the barracks roster (ink fill + red accent bar).
Verified: icon, empty/shown toggle, active highlight, terminology.

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

web/diaryPanel.js

@@ -80,7 +80,7 @@ export function mountDiaryPanel(host) {
   // Ensure the TTS model is loaded (showing progress), then return a fresh narrator.
   async function makeReadyNarrator() {
     // For Qwen3-TTS's "persona voice", design a voice from this unit's traits.
-    setVoiceDescription(`A war-weary soldier's voice — ${(traits.value || 'battle-hardened').trim()}.`)
+    setVoiceDescription(`A war-weary hero's voice — ${(traits.value || 'battle-hardened').trim()}.`)
     ttsStatus.textContent = 'loading voice…'
     await ensureTts((frac) => { ttsStatus.textContent = `downloading voice… ${Math.round(frac * 100)}% (one-time)` })
     ttsStatus.textContent = 'reading on your device…'
@@ -116,7 +116,7 @@ export function mountDiaryPanel(host) {
     busy = true; btn.disabled = true; stats.textContent = ''
     if (window.innerWidth <= 768) result.scrollIntoView({ behavior: 'smooth', block: 'start' })
     stopNarration()
-    const header = `— Diary of ${(unit.value || 'a nameless soldier').trim()} —\n\n`
+    const header = `— Diary of ${(unit.value || 'a nameless hero').trim()} —\n\n`
     out.textContent = header
     lastBody = ''
 

web/personaPanel.js

@@ -1,4 +1,4 @@
-// Tiny Army persona panel — mounted by tiny.js into #persona-stage. Recruits a soldier
+// Tiny Army persona panel — mounted by tiny.js into #persona-stage. Recruits a hero
 // (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
@@ -29,7 +29,7 @@ export function mountPersonaPanel(host) {
   const seed = el('input', { class: 'persona-input', type: 'text', placeholder: 'a word, a vibe… (optional)' })
   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 btn = el('button', { class: 'persona-go', type: 'button' }, '⚔ Recruit hero')
   const rosterEl = el('div', { class: 'persona-roster' })
 
   const nameEl = el('div', { class: 'persona-name persona-edit', 'data-ph': 'Name' })
@@ -56,22 +56,32 @@ 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' }, [
+  const emptyEl = el('div', { class: 'persona-empty' }, 'Recruit a hero, or pick one from the barracks.')
+  const bodyEl = el('div', { class: 'persona-body' }, [
     nameEl, tagsEl,
     secHead('About'), aboutEl,
     secHead('Quote', playBtn), quoteEl,
     secHead('Voice design'), voiceEl,
-    thinkWrap,
   ])
+  const result = el('div', { class: 'persona-result' }, [emptyEl, bodyEl, thinkWrap])
   host.appendChild(el('div', { class: 'persona-view' }, [controls, result]))
 
   let lastPersona = null  // the persona currently shown
   let savedId = null      // its roster id (set the moment it's shown — always saved)
   let hasVoice = false    // a cached voice file exists for this persona
   let working = false
+  let busy = false
+
+  // Hide the hero fields until a hero is generated or picked from the barracks.
+  function refreshVisibility() {
+    const show = !!lastPersona || busy
+    bodyEl.style.display = show ? '' : 'none'
+    emptyEl.style.display = show ? 'none' : ''
+  }
+  refreshVisibility()
 
   // The line the voice actually says (quote, else about, else a fallback).
-  const lineFor = (p) => (p.quote || '').trim() || (p.about || '').trim() || `${p.name || 'A soldier'} reporting for duty.`
+  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 || ''))
   // Badge when there's a persona but no current voice (none yet, or it went stale).
@@ -121,7 +131,7 @@ export function mountPersonaPanel(host) {
     quoteEl.textContent = p.quote || ''
     voiceEl.textContent = p.voice || ''
     hasVoice = savedId ? !!(await getAudio(savedId)) : false
-    updateVoiceUI()
+    updateVoiceUI(); refreshVisibility()
   }
 
   // ▶ The one voice button: if the cached voice is current, just replay it. If there's
@@ -161,13 +171,13 @@ export function mountPersonaPanel(host) {
   }
   playBtn.addEventListener('click', play)
 
-  // ── Barracks roster (saved soldiers) ──────────────────────────────────────
+  // ── Barracks roster (saved heroes) ──────────────────────────────────────
   function renderRoster(personas) {
-    if (!personas.length) { rosterEl.replaceChildren(el('div', { class: 'persona-roster-empty' }, 'No soldiers saved yet.')); return }
+    if (!personas.length) { rosterEl.replaceChildren(el('div', { class: 'persona-roster-empty' }, 'No heroes saved yet.')); return }
     rosterEl.replaceChildren(...personas.map((p) =>
       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}` : ''}`),
+          `${p.name || 'Hero'}${p.unitClass ? ` · ${p.unitClass}` : ''}`),
         el('button', { class: 'persona-roster-x', type: 'button', title: 'Remove', onclick: () => removePersona(p.id) }, '🗑'),
       ])))
   }
@@ -200,10 +210,9 @@ export function mountPersonaPanel(host) {
     }
   })
 
-  let busy = false
   async function generate() {
     if (busy) return
-    busy = true; btn.disabled = true
+    busy = true; btn.disabled = true; refreshVisibility()
     if (window.innerWidth <= 768) result.scrollIntoView({ behavior: 'smooth', block: 'start' })
     nameEl.textContent = '…'; aboutEl.textContent = ''; tagsEl.replaceChildren()
     quoteEl.textContent = ''; voiceEl.textContent = ''
@@ -240,7 +249,7 @@ export function mountPersonaPanel(host) {
     } 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 }
+    } finally { busy = false; btn.disabled = false; refreshVisibility() }
   }
   btn.addEventListener('click', generate)
 }

web/personaPrompts.js

@@ -2,10 +2,10 @@
 // in-browser path). War-legend tone, not woid's.
 
 export const PERSONA_SYSTEM =
-  'You invent tiny soldiers for a fantasy auto-battler called Tiny Army, where every ' +
+  'You invent tiny heroes for a fantasy auto-battler called Tiny Army, where every ' +
   'fighter writes its own legend. Given a class and an optional seed, return ONE JSON ' +
   'object and NOTHING else, with exactly these keys:\n' +
-  '  "name": a short evocative soldier name (2-4 words),\n' +
+  '  "name": a short evocative hero name (2-4 words),\n' +
   '  "about": 1-2 short sentences of backstory (about 25 words) in a heroic, wry war-legend tone,\n' +
   '  "specialty": a 1-3 word combat specialty,\n' +
   '  "personality": a 1-3 word personality tag,\n' +
@@ -18,18 +18,18 @@ export const PERSONA_SYSTEM =
   'Output strictly valid JSON. No preamble, no code fences, no commentary.'
 
 export const DIARY_SYSTEM =
-  'You are a tiny soldier in the auto-battler Tiny Army, writing a short first-person ' +
+  'You are a tiny hero in the auto-battler Tiny Army, writing a short first-person ' +
   'war-diary entry. Given your name and traits, write just 1-2 vivid sentences (about ' +
   '60 words, no more) in first person about a day on the battlefield — heroic, grounded, ' +
   'a touch of dark humor. Prose only: no headings, no lists, no preamble. Be brief.'
 
 export function personaUserPrompt(unitClass = '', seed = '') {
   const s = seed && seed.trim() ? ` Seed inspiration: "${seed.trim()}".` : ''
-  return `Class: ${(unitClass || 'soldier').trim()}.${s} Return the JSON object now.`
+  return `Class: ${(unitClass || 'hero').trim()}.${s} Return the JSON object now.`
 }
 
 export function diaryUserPrompt(unit = '', traits = '') {
-  const u = (unit || 'a nameless soldier').trim()
+  const u = (unit || 'a nameless hero').trim()
   const t = (traits || 'untested').trim()
   return `Name: ${u}. Traits: ${t}. Write the diary entry.`
 }

web/personaStore.js

@@ -1,4 +1,4 @@
-// Local-first roster of saved soldiers (personas-as-agents). Modeled on woid's Shelter
+// Local-first roster of saved heroes (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
@@ -33,7 +33,7 @@ export function savePersona(p) {
   const id = p.id || newId()
   const rec = {
     id,
-    name: p.name || 'Unnamed soldier',
+    name: p.name || 'Unnamed hero',
     unitClass: p.unitClass || '',
     about: p.about || '',
     quote: p.quote || '',

web/shell/nav.json

@@ -25,7 +25,7 @@
       "title": "Barracks",
       "items": [
         { "label": "War Diaries", "icon": "📓", "space": "Barracks" },
-        { "label": "Personas", "icon": "🪖", "space": "Personas" }
+        { "label": "Personas", "icon": "🛡", "space": "Personas" }
       ]
     },
     {

web/shell/persona.css

@@ -109,7 +109,13 @@
 .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) ──────────────────────────────────────── */
+/* Empty state — shown until a hero is recruited or picked from the barracks. */
+.persona-empty {
+  font-family: var(--p-mono); font-size: 12px; letter-spacing: .04em; color: var(--p-muted);
+  padding: 28px 0; max-width: 50ch;
+}
+
+/* ── Barracks roster (saved heroes) ────────────────────────────────────────── */
 .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; }
@@ -121,6 +127,11 @@
   padding: 7px 9px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .persona-roster-name:hover { background: var(--p-paper-2) !important; }
+/* The selected hero is highlighted in the barracks. */
+.persona-roster-item.active .persona-roster-name {
+  background: var(--p-ink) !important; color: var(--p-paper) !important;
+  border-color: var(--p-ink) !important; box-shadow: inset 4px 0 0 var(--p-transmit); font-weight: 700;
+}
 .persona-roster-x {
   cursor: pointer; flex-shrink: 0; font-size: 11px !important;
   color: var(--p-transmit) !important; background: var(--p-card) !important;