Persona: simplify prompt to name/about/quote/voice; editable in Settings

- Drop the specialty/personality/vibe tags from the generation prompt and the
hero panel — only name, about, quote and voice design remain.
- New Settings → "Persona Prompt" section: view and edit the system prompt that
writes each hero. Saved locally (tinyarmy.personaPrompt) and used on the next
"Recruit hero"; Reset restores the built-in default.
- personaPrompts.js exposes PERSONA_SYSTEM_DEFAULT + get/set/reset/isCustom;
personaPanel.js calls getPersonaSystem() so an override wins.

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

web/personaPanel.js

@@ -6,7 +6,7 @@
 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 { getPersonaSystem, personaUserPrompt, stripThink, stripThinkFinal, noThink } from '/web/personaPrompts.js'
 import { createVoiceWav, cloneVoiceWav, playWav, stopPreview } from '/web/tts.js'
 import { listPersonas, savePersona, removePersona, onRosterChange, putAudio, getAudio } from '/web/personaStore.js'
 
@@ -140,7 +140,6 @@ export function mountPersonaPanel(host) {
   const rosterEl = el('div', { class: 'persona-roster' })
 
   const nameEl = el('div', { class: 'persona-name persona-edit', 'data-ph': 'Name' })
-  const tagsEl = el('div', { class: 'persona-tags' })
   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…' })
@@ -165,7 +164,7 @@ export function mountPersonaPanel(host) {
   ])
   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,
+    nameEl,
     secHead('About'), aboutEl,
     secHead('Quote', playBtn), quoteEl,
     secHead('Voice design'), voiceEl,
@@ -246,17 +245,11 @@ export function mountPersonaPanel(host) {
   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)))
-  }
-
   async function showPersona(p, opts = {}) {
     stopVoice() // picking another hero cuts the current voice
     lastPersona = { ...p }
     savedId = opts.savedId || null
     nameEl.textContent = p.name || ''
-    setTags(p)
     aboutEl.textContent = p.about || ''
     quoteEl.textContent = p.quote || ''
     voiceEl.textContent = p.voice || ''
@@ -357,7 +350,7 @@ export function mountPersonaPanel(host) {
     if (busy) return
     busy = true; btn.disabled = true; refreshVisibility()
     if (window.innerWidth <= 768) result.scrollIntoView({ behavior: 'smooth', block: 'start' })
-    nameEl.textContent = '…'; aboutEl.textContent = ''; tagsEl.replaceChildren()
+    nameEl.textContent = '…'; aboutEl.textContent = ''
     quoteEl.textContent = ''; voiceEl.textContent = ''
     lastPersona = null; savedId = null; hasVoice = false
     stopVoice(); updateVoiceUI()
@@ -367,7 +360,7 @@ export function mountPersonaPanel(host) {
       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()), {
+      await streamChat(getPersonaSystem(), personaUserPrompt(sel.value, seed.value) + noThink(currentModelId()), {
         maxTokens: MAX_TOKENS,
         onToken: (piece) => {
           acc += piece

web/personaPromptBar.js

@@ -0,0 +1,51 @@
+// Persona-prompt viewer/editor for the Settings page. Shows the system prompt that
+// writes each hero (name / about / quote / voice design) and lets you edit it. A saved
+// edit is stored locally (personaPrompts.js → setPersonaSystem) and used by the persona
+// panel on the next "Recruit hero"; Reset restores the built-in default.
+import {
+  PERSONA_SYSTEM_DEFAULT, getPersonaSystem, setPersonaSystem, resetPersonaSystem, isPersonaSystemCustom,
+} from '/web/personaPrompts.js'
+
+function el(tag, props = {}, kids = []) {
+  const n = document.createElement(tag)
+  for (const [k, v] of Object.entries(props)) {
+    if (k === 'class') n.className = v
+    else if (k.startsWith('on') && typeof v === 'function') n.addEventListener(k.slice(2), v)
+    else if (v != null) n.setAttribute(k, v)
+  }
+  for (const kid of [].concat(kids)) if (kid != null) n.append(kid)
+  return n
+}
+
+export function mountPersonaPromptBar(host) {
+  const ta = el('textarea', { class: 'persona-prompt-edit', rows: 12, spellcheck: 'false' })
+  const saveBtn = el('button', { class: 'persona-go persona-prompt-save', type: 'button' }, 'Save')
+  const resetBtn = el('button', { class: 'persona-ico persona-prompt-reset', type: 'button' }, 'Reset to default')
+  const note = el('div', { class: 'persona-status persona-prompt-note' })
+
+  ta.value = getPersonaSystem()
+
+  function refreshNote() {
+    note.textContent = isPersonaSystemCustom() ? 'Using your custom prompt.' : 'Using the built-in default.'
+  }
+  refreshNote()
+
+  saveBtn.addEventListener('click', () => {
+    setPersonaSystem(ta.value)
+    ta.value = getPersonaSystem() // reflect (a default-equal edit clears the override)
+    refreshNote()
+    saveBtn.textContent = '✓ Saved'; setTimeout(() => { saveBtn.textContent = 'Save' }, 1400)
+  })
+  resetBtn.addEventListener('click', () => {
+    resetPersonaSystem()
+    ta.value = PERSONA_SYSTEM_DEFAULT
+    refreshNote()
+  })
+
+  host.append(el('div', { class: 'persona-prompt-bar' }, [
+    ta,
+    el('div', { class: 'persona-prompt-actions' }, [saveBtn, resetBtn]),
+    note,
+  ]))
+  return { refresh: () => { ta.value = getPersonaSystem(); refreshNote() } }
+}

web/personaPrompts.js

@@ -1,24 +1,39 @@
 // Tiny-Army persona + war-diary prompts (mirrors the Python prompts.py for the
 // in-browser path). War-legend tone, not woid's.
 
-export const PERSONA_SYSTEM =
+// The default persona system prompt. Editable at runtime from the Settings page —
+// see getPersonaSystem()/setPersonaSystem() below; personaPanel.js calls
+// getPersonaSystem() so a saved override wins.
+export const PERSONA_SYSTEM_DEFAULT =
   '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 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' +
-  '  "vibe": a 1-3 word vibe,\n' +
+  '  "quote": one short punchy line they say aloud — a battle-cry or wry remark, ' +
+  'first person, under 15 words,\n' +
   '  "voice": one sentence describing how THIS hero sounds for a text-to-speech voice — ' +
   'pick a gender, age, pitch, accent, texture, pace and emotion that FIT their class and ' +
   'personality, and make it DISTINCT from a generic gruff soldier. Vary it widely between ' +
   'heroes — e.g. a bright quick-tongued young woman, a wheezing ancient sage, a velvet-smooth ' +
-  'rogue, a booming jolly giant, a cold precise duelist, a sing-song forest spirit,\n' +
-  '  "quote": one short punchy line they say aloud — a battle-cry or wry remark, ' +
-  'first person, under 15 words.\n' +
+  'rogue, a booming jolly giant, a cold precise duelist, a sing-song forest spirit.\n' +
   'Output strictly valid JSON. No preamble, no code fences, no commentary.'
 
+// Runtime-editable persona prompt (Settings page). A non-empty localStorage override
+// replaces the default; clearing it falls back to PERSONA_SYSTEM_DEFAULT.
+const PERSONA_PROMPT_KEY = 'tinyarmy.personaPrompt'
+export function getPersonaSystem() {
+  try { return localStorage.getItem(PERSONA_PROMPT_KEY) || PERSONA_SYSTEM_DEFAULT } catch { return PERSONA_SYSTEM_DEFAULT }
+}
+export function setPersonaSystem(text) {
+  try {
+    if (text && text.trim() && text.trim() !== PERSONA_SYSTEM_DEFAULT.trim()) localStorage.setItem(PERSONA_PROMPT_KEY, text)
+    else localStorage.removeItem(PERSONA_PROMPT_KEY)
+  } catch { /* storage blocked — just use the default */ }
+}
+export function resetPersonaSystem() { try { localStorage.removeItem(PERSONA_PROMPT_KEY) } catch { /* ignore */ } }
+export function isPersonaSystemCustom() { try { return !!localStorage.getItem(PERSONA_PROMPT_KEY) } catch { return false } }
+
 export const DIARY_SYSTEM =
   '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 ' +

web/settingsPanel.js

@@ -8,6 +8,7 @@
 // just won't appear (graceful no-op) and the app still runs on defaults.
 import { mountModelBar } from '/web/modelBar.js'
 import { mountTtsBar } from '/web/ttsBar.js'
+import { mountPersonaPromptBar } from '/web/personaPromptBar.js'
 
 function el(tag, props = {}, kids = []) {
   const n = document.createElement(tag)
@@ -44,6 +45,9 @@ export function mountSettingsPanel() {
     injectSection(sample, 'tac-voice-settings', 'Voice',
       'How war diaries are read aloud. Kokoro/Kitten run on your device; Qwen3-TTS ' +
       'designs a voice in the cloud.', mountTtsBar)
+    injectSection(sample, 'tac-persona-prompt-settings', 'Persona Prompt',
+      'The system prompt that writes each hero (name, about, quote and voice design). ' +
+      'Edit it to change their style; Save uses it on the next “Recruit hero”.', mountPersonaPromptBar)
   }
   new MutationObserver(tryInject).observe(document.body, { childList: true, subtree: true })
   tryInject()

web/shell/persona.css

@@ -250,6 +250,17 @@
 .tac-set-section .model-bar { border-bottom: 0; padding-bottom: 0; }
 .tac-set-intro { font-size: 14px; line-height: 1.5; opacity: .75; margin: 2px 0 14px; }
 
+/* Persona-prompt editor (Settings → Persona Prompt). */
+.persona-prompt-bar { display: flex; flex-direction: column; gap: 10px; }
+.persona-prompt-edit {
+  width: 100%; font-family: var(--p-mono); font-size: 12px; line-height: 1.55;
+  color: var(--p-ink); background: var(--p-card); border: 1.5px solid var(--p-ink);
+  border-radius: 0; padding: 10px 12px; resize: vertical; min-height: 200px;
+}
+.persona-prompt-edit:focus { outline: none; box-shadow: 0 0 0 1.5px var(--p-transmit); }
+.persona-prompt-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+.persona-prompt-save { margin-top: 0 !important; }
+
 /* Collapsible control sections (model / voice). Desktop: no toggle, always shown. */
 .ctl-collapse > summary { display: none; }