Game: hero creation + selection flow; pin the Space

Shared hero creator (heroCreator.js) used by the Personas page and a new Game 'Create a Hero'/'Hero Details' modal: two-state layout (recruit ⇄ portrait panel), streamed details, generate portrait + quote + voice, barracks, fixed-size modal (no resize across states/streaming), and portrait repaint disabled unless the appearance changed.

Hero picker: cards show the saved portrait (or an animated class idle); picking opens a hero detail page (portrait/about/quote + Select) instead of spawning immediately; on Select the camera flies down to the spawn point and the hero drops in. Picker auto-refreshes on roster changes.

- web/comboBattler.js, web/mapSandbox.js: rebuilt bundles (flyTo + getSpawnWorld).
- README: pinned: true.

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

README.md

@@ -5,7 +5,7 @@ colorFrom: red
 colorTo: yellow
 sdk: docker
 app_port: 7860
-pinned: false
+pinned: true
 license: mit
 short_description: Tiny Army — fighters write their own true legends
 ---

web/comboBattler.js

@@ -33,6 +33,7 @@ function createChunkedMap(pixi, host, config) {
   let seed = config.seed ?? 1;
   let zoom = Z_DEFAULT;
   let cameraDirty = true, genPending = false, lastEmitTile = null;
+  let flyAnim = null;
   const camera = { x: config.initialCamera?.x ?? CHUNKPX / 2, y: config.initialCamera?.y ?? CHUNKPX / 2 };
   const chunks = /* @__PURE__ */ new Map();
   const macroChunks = /* @__PURE__ */ new Map();
@@ -257,6 +258,21 @@ function createChunkedMap(pixi, host, config) {
   function zoomBy(factor) {
     if (app) zoomAt(factor, app.screen.width / 2, app.screen.height / 2);
   }
+  function flyTo(wx, wy, z, ms = 800) {
+    return new Promise((resolve) => {
+      if (!app) {
+        resolve();
+        return;
+      }
+      if (flyAnim) {
+        const r = flyAnim.resolve;
+        flyAnim = null;
+        r && r();
+      }
+      const toZ = Math.min(Z_MAX, Math.max(bounds ? coverZoom() : Z_MIN, z));
+      flyAnim = { fromX: camera.x, fromY: camera.y, fromZ: zoom, toX: wx, toY: wy, toZ, t: 0, dur: Math.max(1, ms), resolve };
+    });
+  }
   function bindInput() {
     const canvas = app.canvas;
     const local = (cx, cy) => {
@@ -268,7 +284,7 @@ function createChunkedMap(pixi, host, config) {
       return [it.next().value, it.next().value];
     };
     handlers.down = (e) => {
-      if (!enabled) return;
+      if (!enabled || flyAnim) return;
       pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
       canvas.setPointerCapture?.(e.pointerId);
       if (pointers.size === 1) {
@@ -308,7 +324,7 @@ function createChunkedMap(pixi, host, config) {
       } else if (pointers.size === 0) drag.on = false;
     };
     handlers.wheel = (e) => {
-      if (!enabled) return;
+      if (!enabled || flyAnim) return;
       e.preventDefault();
       zoomAt(e.deltaY < 0 ? Z_STEP : 1 / Z_STEP, ...local(e.clientX, e.clientY));
     };
@@ -346,6 +362,23 @@ function createChunkedMap(pixi, host, config) {
   const PAN_SPEED = 6;
   function tick(ticker) {
     for (const fn of tickHooks) fn(ticker);
+    if (flyAnim) {
+      flyAnim.t += ticker.deltaMS;
+      const p = Math.min(1, flyAnim.t / flyAnim.dur);
+      const e = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+      camera.x = flyAnim.fromX + (flyAnim.toX - flyAnim.fromX) * e;
+      camera.y = flyAnim.fromY + (flyAnim.toY - flyAnim.fromY) * e;
+      zoom = flyAnim.fromZ + (flyAnim.toZ - flyAnim.fromZ) * e;
+      cameraDirty = true;
+      if (p >= 1) {
+        const r = flyAnim.resolve;
+        flyAnim = null;
+        r && r();
+      }
+      reconcile();
+      cameraDirty = false;
+      return;
+    }
     if (!enabled) return;
     let dx = 0, dy = 0;
     for (const k of keys) {
@@ -490,7 +523,7 @@ function createChunkedMap(pixi, host, config) {
     ctx = null;
     texCache.clear();
   }
-  return { ready, regenerate, destroy, onChange, getSnapshot, getCamera, tileIndexAt, biomeAt, getBounds, zoomBy, setEnabled, onTick, getEntityLayer, getApp, screenToWorld, worldToScreen, tile: TILE7 };
+  return { ready, regenerate, destroy, onChange, getSnapshot, getCamera, tileIndexAt, biomeAt, getBounds, zoomBy, flyTo, setEnabled, onTick, getEntityLayer, getApp, screenToWorld, worldToScreen, tile: TILE7 };
 }
 
 // ../auto-battler/src/engine/rng.js
@@ -5125,7 +5158,11 @@ function mountComboBattler(pixi, host, opts = {}) {
     combatRoot = null;
     listeners.clear();
   }
-  const ctrl = { ready, selectHero, getSnapshot, resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
+  function getSpawnWorld() {
+    const b = map.getBounds();
+    return b ? { x: b.x0 + 64 * TILE6, y: b.y1 - 64 * TILE6 } : { x: 0, y: 0 };
+  }
+  const ctrl = { ready, selectHero, getSpawnWorld, getSnapshot, resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
   if (typeof window !== "undefined") {
     window.__comboSnap = () => ctrl.getSnapshot();
     window.__combo = ctrl;

web/heroCreator.js

@@ -0,0 +1,520 @@
+// Shared hero-creator — the recruit/stream/edit experience used by BOTH the Personas page
+// (personaPanel.js, which adds a barracks roster around it) and the Game page's "Create a hero"
+// modal (tiny.js). Renders the two-column `.persona-view` (class/seed/recruit controls on the left,
+// streamed name/about/quote + voice + portrait on the right), runs the whole generation pipeline
+// (local LLM → JSON persona, image engine → portrait, TTS → voice) and autosaves to the roster.
+//
+//   const creator = mountHeroCreator(host, { extraControls, onSaved })
+//   creator.load(persona, { savedId })   // show an existing hero for editing
+//   creator.current()                    // { persona, savedId }
+import { streamChat, ensureModel, currentModel, currentModelId, getEngineId, backendLabel } from '/web/runtime.js'
+import { extractLivePersona } from '/web/personaStream.js'
+import { parsePersonaJson } from '/web/personaParse.js'
+import { getPersonaSystem, personaUserPrompt, stripThink, stripThinkFinal, noThink } from '/web/personaPrompts.js'
+import {
+  createVoiceWav, cloneVoiceWav, playWav, synthVoiceWav, speakVoiceLive, stopVoiceLive,
+  activeEngineIsDesign, activeEngineIsNative, activeVoices, activeDefaultVoice, onTtsEngineChange, ttsBackendLabel,
+} from '/web/tts.js'
+import { listPersonas, savePersona, removePersona, onRosterChange, putAudio, getAudio, putPortrait, getPortrait } from '/web/personaStore.js'
+import { generatePortrait, imageBackendLabel, imageNeedsDownload, ensureImage } from '/web/imagen.js'
+
+const CLASSES = ['Warrior', 'Ranger', 'Monk', 'Assassin', 'Mage', 'Paladin', 'Cleric', 'Knight']
+const MAX_TOKENS = 200 // persona JSON + a voice line + a quote
+
+// Each class shows the idle pose of a fitting sprite (character slug → see
+// characters.json). The sheet's front-right row is animated as a tiny looping
+// icon beside the class name in the dropdown.
+export const CLASS_SLUG = {
+  Warrior: 'true-heroes-iii-fighter',
+  Ranger: 'true-heroes-iii-ranger',
+  Monk: 'true-heroes-ii-bard',
+  Assassin: 'true-heroes-iv-ninja-assassin',
+  Mage: 'true-heroes-iii-wizard',
+  Paladin: 'true-heroes-ii-paladin',
+  Cleric: 'true-heroes-ii-cleric',
+  Knight: 'rts-humans-knight',
+}
+const ICON_PX = 30        // on-screen size of the class icon box
+const ICON_ZOOM = 2.4     // sheets pad the character inside each cell — zoom in so it fills the box
+const spriteUrl = (u) => (u || '').replace('/assets/', '/sprites/') // sheets serve at /sprites
+
+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
+}
+
+// Idle sheets are 4 rows (facings) × N frame columns; cell = height/4. We render
+// the front-right row (row 0) and step across the columns to loop the idle — no
+// canvas, just a sized background + the Web Animations API.
+export function animateIdleIcon(box, idleUrl, sizePx = ICON_PX) {
+  box.getAnimations?.().forEach((a) => a.cancel())
+  box.style.backgroundImage = ''
+  const img = new Image()
+  img.onload = () => {
+    const cell = (img.naturalHeight / 4) || img.naturalHeight
+    const cols = Math.max(1, Math.round(img.naturalWidth / cell))
+    const rows = Math.max(1, Math.round(img.naturalHeight / cell))
+    const cellPx = sizePx * ICON_ZOOM                  // zoomed on-screen cell size (fills the box)
+    const off = (cellPx - sizePx) / 2                  // inset to centre the box on a cell
+    box.style.backgroundImage = `url("${idleUrl}")`
+    box.style.backgroundSize = `${cols * cellPx}px ${rows * cellPx}px`
+    const y = `-${off}px`                              // row 0, vertically centred
+    box.animate(
+      [{ backgroundPosition: `-${off}px ${y}` }, { backgroundPosition: `-${cols * cellPx + off}px ${y}` }],
+      { duration: cols * 110, iterations: Infinity, easing: `steps(${cols})` },
+    )
+  }
+  img.src = idleUrl
+}
+
+// A class picker that mirrors a native <select> API (.value get/set, 'change'
+// event) but renders an animated idle icon beside each class.
+function makeClassDropdown(classes) {
+  const triggerIco = el('span', { class: 'persona-class-ico' })
+  const triggerLabel = el('span', { class: 'persona-classdrop-label' })
+  const trigger = el('button', { class: 'persona-input persona-classdrop-trigger', type: 'button' },
+    [triggerIco, triggerLabel, el('span', { class: 'persona-classdrop-chev' }, '▾')])
+  const menu = el('div', { class: 'persona-classdrop-menu' })
+  const root = el('div', { class: 'persona-classdrop' }, [trigger, menu])
+
+  let value = classes[0]
+  let icons = {}            // class → idle sheet URL (filled by setIcons)
+  const optIco = {}         // class → menu icon span
+
+  const items = classes.map((c) => {
+    const ico = el('span', { class: 'persona-class-ico' }); optIco[c] = ico
+    const it = el('button', { class: 'persona-classdrop-opt', type: 'button' }, [ico, el('span', {}, c)])
+    it.addEventListener('click', () => { set(c); close() })
+    return it
+  })
+  menu.append(...items)
+
+  function set(c) {
+    if (!classes.includes(c)) return
+    const changed = c !== value
+    value = c
+    triggerLabel.textContent = c
+    items.forEach((it, i) => it.classList.toggle('sel', classes[i] === c))
+    if (icons[c]) animateIdleIcon(triggerIco, icons[c])
+    if (changed) root.dispatchEvent(new Event('change'))
+  }
+  const close = () => root.classList.remove('open')
+  trigger.addEventListener('click', (e) => { e.stopPropagation(); root.classList.toggle('open') })
+  document.addEventListener('click', (e) => { if (!root.contains(e.target)) close() })
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close() })
+
+  root.setIcons = (map) => {
+    icons = map
+    for (const c of classes) if (map[c]) animateIdleIcon(optIco[c], map[c])
+    if (map[value]) animateIdleIcon(triggerIco, map[value])
+  }
+  Object.defineProperty(root, 'value', { get: () => value, set: (v) => set(v) })
+  triggerLabel.textContent = value
+  items.forEach((it, i) => it.classList.toggle('sel', classes[i] === value))
+  return root
+}
+
+// Resolve each class's idle sheet via characters.json and light up the dropdown.
+async function loadClassIcons(dropdown) {
+  try {
+    const d = await fetch('/sprites/characters.json').then((r) => r.json())
+    const bySlug = {}
+    for (const p of d.packs || []) for (const c of p.characters || []) bySlug[c.slug] = c
+    const map = {}
+    for (const [cls, slug] of Object.entries(CLASS_SLUG)) {
+      const idle = bySlug[slug]?.idle
+      if (idle) map[cls] = spriteUrl(idle)
+    }
+    dropdown.setIcons(map)
+  } catch { /* no icons — the dropdown still works with labels only */ }
+}
+
+// Mount the creator into `host`. `opts.extraControls` (DOM) is appended into the controls aside
+// (the Personas page passes its barracks roster here). `opts.onSaved(rec)` fires after every
+// autosave (generate + inline edits + portrait/voice), so the host can refresh a roster, enable a
+// "Save & Play" button, etc. Returns a controller (load / current / reset / stop).
+export function mountHeroCreator(host, opts = {}) {
+  const DEFAULT_STATUS = 'Runs on your device — no cloud.'
+  const sel = makeClassDropdown(CLASSES)
+  loadClassIcons(sel)
+  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' }, DEFAULT_STATUS)
+  const btn = el('button', { class: 'persona-go', type: 'button' }, '⚔ Recruit hero')
+
+  const nameEl = el('div', { class: 'persona-name persona-edit', 'data-ph': 'Name' })
+  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…' })
+  const voicePickEl = el('select', { class: 'persona-input persona-voice-pick' })
+  const voicePickRow = el('div', { class: 'persona-voice-pick-row' },
+    [el('label', { class: 'persona-label' }, 'Voice'), voicePickEl])
+  const playBtn = el('button', { class: 'persona-ico persona-play', type: 'button', title: 'Play voice' }, '▶')
+  const voiceStatus = el('span', { class: 'persona-act-status' })       // "generating voice via …" beside ▶
+  const appearanceEl = el('div', { class: 'persona-appearance persona-edit', 'data-ph': 'How they look…' })
+  const portraitBtn = el('button', { class: 'persona-ico persona-portrait-btn', type: 'button', title: 'Paint portrait' }, '🎨')
+  const portraitStatus = el('span', { class: 'persona-act-status' })    // "painting via …" beside 🎨
+  const portraitImg = el('img', { class: 'persona-portrait-img', alt: '' })
+  const portraitWrap = el('div', { class: 'persona-portrait-wrap' }, [portraitImg])
+  // The general status line + token rate live INSIDE the debug section (only per-action voice/portrait
+  // notes show beside their buttons). No copy button.
+  const thinkEl = el('pre', { class: 'persona-think' })
+  const thinkWrap = el('details', { class: 'persona-think-wrap' },
+    [el('summary', {}, 'model output / debug (raw)'), status, stats, thinkEl])
+
+  // Plain section header (top line + small heading) with an optional right-side action.
+  const secHead = (title, action) =>
+    el('div', { class: 'persona-sec' }, [el('div', { class: 'persona-sec-title' }, title), action || el('span')])
+  // Header whose action is a create button with an inline status note to its RIGHT (full model name).
+  const actionHead = (title, button, note) =>
+    el('div', { class: 'persona-sec' }, [el('div', { class: 'persona-sec-title' }, title), el('div', { class: 'persona-sec-action' }, [button, note])])
+
+  const backBtn = el('button', { class: 'persona-back', type: 'button' }, '← Back')
+  // Optional barracks roster (saved heroes) — always visible in the left column when enabled.
+  const rosterEl = opts.showBarracks ? el('div', { class: 'persona-roster' }) : null
+  const barracksEl = opts.showBarracks
+    ? el('div', { class: 'persona-barracks' }, [el('label', { class: 'persona-label persona-roster-label' }, 'Barracks (saved)'), rosterEl])
+    : null
+
+  // Left column has two states. STATE A (recruit): class + seed + Recruit. STATE B (a hero exists): a
+  // portrait panel — placeholder/image + 🎨 paint button & badge + the editable appearance prompt. The
+  // barracks (if any) and the model-output debug are shown in BOTH states; the debug is anchored bottom.
+  const recruitBox = el('div', { class: 'persona-recruit-box' }, [
+    el('label', { class: 'persona-label' }, 'Class'), sel,
+    el('label', { class: 'persona-label' }, 'Seed'), seed,
+    btn,
+  ])
+  const portraitBox = el('div', { class: 'persona-portrait-panel' }, [
+    actionHead('Portrait', portraitBtn, portraitStatus),
+    portraitWrap,
+    appearanceEl,
+  ])
+  const controls = el('aside', { class: 'persona-controls' }, [
+    recruitBox, portraitBox, barracksEl, thinkWrap,
+  ])
+  const emptyEl = el('div', { class: 'persona-empty' }, opts.emptyText || 'Every legend starts here — pick a class and recruit your hero.')
+  const bodyEl = el('div', { class: 'persona-body' }, [
+    nameEl,
+    secHead('About'), aboutEl,
+    actionHead('Quote', playBtn, voiceStatus), quoteEl,
+    secHead('Voice design'), voiceEl, voicePickRow,
+  ])
+  const result = el('div', { class: 'persona-result' }, [emptyEl, bodyEl])
+  const view = el('div', { class: 'persona-view' }, [controls, result])
+  host.appendChild(view)
+
+  // Back button: in the host-provided footer slot (the Game modal) or, by default, at the top of the
+  // portrait panel. It RESETS the creator and returns to the recruit state; only shown in STATE B.
+  if (opts.backSlot) opts.backSlot.prepend(backBtn)
+  else portraitBox.prepend(backBtn)
+  backBtn.addEventListener('click', () => resetAll())
+
+  function setLeftState(s) {
+    const portrait = s === 'portrait'
+    recruitBox.style.display = portrait ? 'none' : ''
+    portraitBox.style.display = portrait ? '' : 'none'
+    backBtn.style.display = portrait ? '' : 'none'
+    if (barracksEl) barracksEl.style.display = portrait ? 'none' : '' // barracks only in the recruit state
+    try { opts.onState?.(s) } catch { /* host hook */ }
+  }
+  setLeftState('recruit')
+
+  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 hasPortrait = false // a cached portrait exists for this persona
+  let portraitBusy = false
+  let portraitUrl = null  // object URL for the shown image (revoked on replace)
+  let working = false
+  let busy = false
+  let playing = false     // audio is currently sounding (▶ becomes ⏹)
+
+  const fireSaved = (rec) => { try { opts.onSaved?.(rec, { persona: lastPersona, savedId }) } catch { /* host hook */ } }
+
+  function setPlaying(on) {
+    playing = on
+    playBtn.classList.toggle('playing', on)
+    playBtn.textContent = on ? '⏹' : '▶'
+    if (on) playBtn.title = 'Stop'
+    else updateVoiceUI()
+  }
+  function stopVoice() { stopVoiceLive(); setPlaying(false) }
+  async function playBuf(arrayBuffer) {
+    setPlaying(true)
+    try { await playWav(arrayBuffer) } catch { /* autoplay blocked / cut short */ }
+    finally { setPlaying(false) }
+  }
+
+  function refreshVisibility() {
+    const show = !!lastPersona || busy
+    bodyEl.style.display = show ? '' : 'none'
+    emptyEl.style.display = show ? 'none' : ''
+  }
+  refreshVisibility()
+
+  const lineFor = (p) => (p.quote || '').trim() || (p.about || '').trim() || `${p.name || 'A hero'} reporting for duty.`
+  const isDesign = () => activeEngineIsDesign()
+  const isNative = () => activeEngineIsNative()
+  const voiceNow = () => (isDesign() ? (lastPersona?.voice || '') : (lastPersona?.voiceId || ''))
+  const voiceUsed = () => (isDesign() ? (lastPersona?.voiceDesignUsed || '') : (lastPersona?.voiceIdUsed || ''))
+  const isDirty = () => !isNative() && hasVoice && lastPersona && (lineFor(lastPersona) !== lastPersona.voiceQuote || voiceNow() !== voiceUsed())
+  const designChanged = () => isDesign() && hasVoice && lastPersona && (lastPersona.voice || '') !== (lastPersona.voiceDesignUsed || '')
+  function updateVoiceUI() {
+    const needs = !!lastPersona && !isNative() && (!hasVoice || isDirty())
+    playBtn.classList.toggle('badged', needs)
+    if (playing) return
+    playBtn.title = (!lastPersona || isNative()) ? 'Play voice' : (!hasVoice ? 'Create voice' : (isDirty() ? 'Update & play' : 'Play voice'))
+  }
+
+  function refreshVoiceMode() {
+    const design = isDesign()
+    voiceEl.contentEditable = design ? 'true' : 'false'
+    voiceEl.classList.toggle('readonly', !design)
+    voiceEl.setAttribute('data-ph', design ? 'How they sound…' : '(only used by Qwen3-TTS Voice Design)')
+    voicePickRow.style.display = design ? 'none' : ''
+    if (!design) {
+      const voices = activeVoices()
+      voicePickEl.replaceChildren(...voices.map((v) => el('option', { value: v.id }, v.label)))
+      let cur = (lastPersona && lastPersona.voiceId) || activeDefaultVoice()
+      if (!voices.some((v) => v.id === cur)) cur = voices[0] ? voices[0].id : ''
+      voicePickEl.value = cur
+      if (lastPersona) lastPersona.voiceId = cur
+    }
+  }
+  voicePickEl.addEventListener('change', () => {
+    if (!lastPersona) return
+    lastPersona.voiceId = voicePickEl.value
+    autosave(); updateVoiceUI()
+  })
+  onTtsEngineChange(() => { stopVoice(); if (lastPersona) { refreshVoiceMode(); updateVoiceUI() } })
+
+  function autosave() {
+    if (!lastPersona) return
+    const rec = savePersona({ ...lastPersona, id: savedId, unitClass: lastPersona.unitClass || sel.value, seed: lastPersona.seed || seed.value })
+    savedId = rec.id
+    fireSaved(rec)
+  }
+
+  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() } })
+    if (field === 'quote' || field === 'voice') {
+      elm.addEventListener('input', () => { if (lastPersona) { lastPersona[field] = elm.textContent.trim(); updateVoiceUI() } })
+    }
+    elm.addEventListener('blur', () => {
+      if (!lastPersona) return
+      lastPersona[field] = elm.textContent.trim()
+      autosave(); updateVoiceUI()
+    })
+  }
+  editable(nameEl, 'name', { single: true })
+  editable(aboutEl, 'about')
+  editable(quoteEl, 'quote', { single: true })
+  editable(voiceEl, 'voice')
+
+  // ── Portrait ──────────────────────────────────────────────────────────────
+  const PORTRAIT_STYLE = 'Fantasy hero character portrait, painterly digital art, dramatic lighting, head and shoulders, detailed face, plain background.'
+  const buildAppearance = (p) => [
+    [p.name, p.unitClass && `a ${p.unitClass}`].filter(Boolean).join(', '),
+    (p.about || '').trim(),
+  ].filter(Boolean).join('. ')
+  const appearanceFor = (p) => (p.appearance || '').trim() || buildAppearance(p)
+  const portraitDirty = () => hasPortrait && lastPersona && appearanceFor(lastPersona) !== (lastPersona.portraitUsed || '')
+
+  function setPortrait(blob) {
+    if (portraitUrl) { try { URL.revokeObjectURL(portraitUrl) } catch { /* ignore */ } }
+    portraitUrl = blob ? URL.createObjectURL(blob) : null
+    portraitImg.src = portraitUrl || ''
+    portraitWrap.classList.toggle('has-img', !!blob)
+  }
+  function updatePortraitUI() {
+    // Paintable when there's no portrait yet, or the appearance changed since the last one. When the
+    // portrait already matches the definition, repainting is disabled (nothing to redo).
+    const paintable = !!lastPersona && (!hasPortrait || portraitDirty())
+    portraitBtn.classList.toggle('badged', paintable)
+    portraitBtn.disabled = portraitBusy || (!!lastPersona && !paintable)
+    portraitBtn.title = !lastPersona ? 'Paint portrait' : (!hasPortrait ? 'Paint portrait' : (portraitDirty() ? 'Repaint portrait' : 'Portrait is up to date'))
+  }
+  appearanceEl.contentEditable = 'true'; appearanceEl.spellcheck = false
+  appearanceEl.addEventListener('input', () => { if (lastPersona) { lastPersona.appearance = appearanceEl.textContent.trim(); updatePortraitUI() } })
+  appearanceEl.addEventListener('blur', () => { if (!lastPersona) return; lastPersona.appearance = appearanceEl.textContent.trim(); autosave(); updatePortraitUI() })
+
+  async function makePortrait() {
+    if (portraitBusy || !lastPersona) return
+    if (hasPortrait && !portraitDirty()) return // no change to the appearance — don't repaint
+    autosave() // ensure an id to key the image
+    const appearance = appearanceFor(lastPersona)
+    portraitBusy = true; portraitBtn.classList.add('busy'); portraitBtn.disabled = true
+    try {
+      if (imageNeedsDownload()) {
+        portraitStatus.textContent = 'loading model…'
+        await ensureImage((f) => { portraitStatus.textContent = `downloading model… ${Math.round(f * 100)}%` })
+      }
+      portraitStatus.textContent = `painting via ${imageBackendLabel()}…`
+      const blob = await generatePortrait(`${appearance}. ${PORTRAIT_STYLE}`, { seed: 42 })
+      await putPortrait(savedId, blob)
+      lastPersona.appearance = appearance; lastPersona.portraitUsed = appearance
+      hasPortrait = true; setPortrait(blob); autosave()
+      portraitStatus.textContent = ''
+    } catch (e) { portraitStatus.textContent = `failed: ${e.message || e}` }
+    finally { portraitBusy = false; portraitBtn.classList.remove('busy'); portraitBtn.disabled = false; updatePortraitUI() }
+  }
+  portraitBtn.addEventListener('click', makePortrait)
+
+  async function showPersona(p, o = {}) {
+    stopVoice() // picking another hero cuts the current voice
+    lastPersona = { ...p }
+    savedId = o.savedId || null
+    nameEl.textContent = p.name || ''
+    aboutEl.textContent = p.about || ''
+    quoteEl.textContent = p.quote || ''
+    voiceEl.textContent = p.voice || ''
+    appearanceEl.textContent = p.appearance || buildAppearance(p)
+    hasVoice = savedId ? !!(await getAudio(savedId)) : false
+    let pblob = null
+    hasPortrait = savedId ? !!(pblob = await getPortrait(savedId)) : false
+    setPortrait(pblob)
+    refreshVoiceMode(); updateVoiceUI(); updatePortraitUI(); refreshVisibility()
+    setLeftState('portrait') // a hero exists → show the portrait panel in place of class/recruit
+  }
+
+  async function play() {
+    if (playing) { stopVoice(); return }
+    if (working || !lastPersona) return
+    const line = lineFor(lastPersona)
+
+    if (isNative()) {
+      setPlaying(true)
+      try { await speakVoiceLive(lastPersona.voiceId || '', line) }
+      catch (e) { voiceStatus.textContent = `failed: ${e.message || e}` }
+      finally { setPlaying(false) }
+      return
+    }
+
+    if (hasVoice && !isDirty()) {
+      const blob = savedId ? await getAudio(savedId) : null
+      if (blob) { await playBuf(await blob.arrayBuffer()); return }
+      hasVoice = false
+    }
+    if (isDesign() && !lastPersona.voice) { voiceStatus.textContent = 'add a voice design first'; return }
+    autosave() // ensure an id to key the audio
+
+    const design = isDesign()
+    const reclone = design && hasVoice && !designChanged()
+    working = true; playBtn.classList.add('busy'); playBtn.disabled = true
+    const verb = reclone ? 'updating' : (design ? 'designing' : 'generating')
+    voiceStatus.textContent = `${verb} voice via ${ttsBackendLabel()}…`
+    let wav = null
+    try {
+      if (design && reclone) {
+        const blob = await getAudio(savedId)
+        wav = await cloneVoiceWav(await blob.arrayBuffer(), lastPersona.voiceQuote || '', line, lastPersona.voice || '')
+      } else if (design) {
+        wav = await createVoiceWav(lastPersona.voice, line)
+      } else {
+        wav = await synthVoiceWav(lastPersona.voiceId || '', line)
+      }
+      await putAudio(savedId, new Blob([wav], { type: 'audio/wav' }))
+      lastPersona.voiceQuote = line
+      lastPersona.voiceDesignUsed = lastPersona.voice || ''
+      lastPersona.voiceIdUsed = lastPersona.voiceId || ''
+      hasVoice = true; autosave()
+      voiceStatus.textContent = ''
+    } catch (e) { voiceStatus.textContent = `failed: ${e.message || e}` }
+    finally { working = false; playBtn.classList.remove('busy'); playBtn.disabled = false; updateVoiceUI() }
+    if (wav) await playBuf(wav.slice(0))
+  }
+  playBtn.addEventListener('click', play)
+
+  try {
+    new IntersectionObserver((entries) => {
+      for (const e of entries) {
+        if (!e.isIntersecting) { if (playing) stopVoice() }
+        else if (lastPersona) { refreshVoiceMode(); updateVoiceUI() }
+      }
+    }).observe(host)
+  } catch { /* no IntersectionObserver — playback just won't auto-stop on nav */ }
+
+  // ← Back: wipe every field and return to a blank recruit state.
+  function resetAll() {
+    stopVoice()
+    lastPersona = null; savedId = null; hasVoice = false; hasPortrait = false
+    nameEl.textContent = ''; aboutEl.textContent = ''; quoteEl.textContent = ''
+    voiceEl.textContent = ''; appearanceEl.textContent = ''
+    setPortrait(null)
+    voiceStatus.textContent = ''; portraitStatus.textContent = ''
+    stats.textContent = ''; status.textContent = DEFAULT_STATUS; thinkEl.textContent = ''; thinkWrap.open = false
+    updateVoiceUI(); updatePortraitUI(); refreshVisibility(); setLeftState('recruit')
+  }
+
+  // ── Barracks (saved heroes) — clicking one loads it for editing; always visible when enabled. ──
+  function renderRoster(personas) {
+    if (!rosterEl) 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 || 'Hero'}${p.unitClass ? ` · ${p.unitClass}` : ''}`),
+        el('button', { class: 'persona-roster-x', type: 'button', title: 'Remove', onclick: () => removePersona(p.id) }, '🗑'),
+      ])))
+  }
+  if (opts.showBarracks) { renderRoster(listPersonas()); onRosterChange(renderRoster) }
+
+  async function generate() {
+    if (busy) return
+    busy = true; btn.disabled = true
+    setLeftState('portrait') // swap the left column to the portrait panel the moment we start
+    refreshVisibility()
+    if (window.innerWidth <= 768) result.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    nameEl.textContent = '…'; aboutEl.textContent = ''
+    quoteEl.textContent = ''; voiceEl.textContent = ''; appearanceEl.textContent = ''
+    lastPersona = null; savedId = null; hasVoice = false; hasPortrait = false
+    stopVoice(); setPortrait(null); voiceStatus.textContent = ''; portraitStatus.textContent = ''; updateVoiceUI(); updatePortraitUI()
+    thinkEl.textContent = ''; stats.textContent = '' // debug stays COLLAPSED — status/tokens update inside it
+    let acc = ''
+    try {
+      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(getPersonaSystem(), personaUserPrompt(sel.value, seed.value) + noThink(currentModelId()), {
+        maxTokens: MAX_TOKENS,
+        onToken: (piece) => {
+          acc += piece
+          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: (s) => { stats.textContent = `● ${s.tokPerSec} tok/s · ${s.tokens} tok${s.ttftSeconds != null ? ` · first ${s.ttftSeconds}s` : ''}` },
+      })
+      try {
+        const p = parsePersonaJson(stripThinkFinal(acc))
+        await showPersona(p)
+        autosave()                  // generated personas are saved immediately (no Save button)
+        status.textContent = 'enlisted ✓ (saved) — edit any field, or create a voice'
+      } catch (e) {
+        status.textContent = `the model rambled — couldn't parse a clean persona (${e.message || e})`
+        setLeftState('recruit') // back to recruit so they can retry
+      }
+    } catch (e) {
+      status.textContent = `couldn't run the local model: ${e.message || e}`
+      setLeftState('recruit')
+    } finally { busy = false; btn.disabled = false; refreshVisibility() }
+  }
+  btn.addEventListener('click', generate)
+
+  return {
+    root: view,
+    load: (p, o = {}) => showPersona(p, o),
+    current: () => ({ persona: lastPersona, savedId }),
+    reset: resetAll,
+    stop: stopVoice,
+  }
+}

web/mapSandbox.js

@@ -33,6 +33,7 @@ function createChunkedMap(pixi, host, config) {
   let seed = config.seed ?? 1;
   let zoom = Z_DEFAULT;
   let cameraDirty = true, genPending = false, lastEmitTile = null;
+  let flyAnim = null;
   const camera = { x: config.initialCamera?.x ?? CHUNKPX / 2, y: config.initialCamera?.y ?? CHUNKPX / 2 };
   const chunks = /* @__PURE__ */ new Map();
   const macroChunks = /* @__PURE__ */ new Map();
@@ -257,6 +258,21 @@ function createChunkedMap(pixi, host, config) {
   function zoomBy(factor) {
     if (app) zoomAt(factor, app.screen.width / 2, app.screen.height / 2);
   }
+  function flyTo(wx, wy, z, ms = 800) {
+    return new Promise((resolve) => {
+      if (!app) {
+        resolve();
+        return;
+      }
+      if (flyAnim) {
+        const r = flyAnim.resolve;
+        flyAnim = null;
+        r && r();
+      }
+      const toZ = Math.min(Z_MAX, Math.max(bounds ? coverZoom() : Z_MIN, z));
+      flyAnim = { fromX: camera.x, fromY: camera.y, fromZ: zoom, toX: wx, toY: wy, toZ, t: 0, dur: Math.max(1, ms), resolve };
+    });
+  }
   function bindInput() {
     const canvas = app.canvas;
     const local = (cx, cy) => {
@@ -268,7 +284,7 @@ function createChunkedMap(pixi, host, config) {
       return [it.next().value, it.next().value];
     };
     handlers.down = (e) => {
-      if (!enabled) return;
+      if (!enabled || flyAnim) return;
       pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
       canvas.setPointerCapture?.(e.pointerId);
       if (pointers.size === 1) {
@@ -308,7 +324,7 @@ function createChunkedMap(pixi, host, config) {
       } else if (pointers.size === 0) drag.on = false;
     };
     handlers.wheel = (e) => {
-      if (!enabled) return;
+      if (!enabled || flyAnim) return;
       e.preventDefault();
       zoomAt(e.deltaY < 0 ? Z_STEP : 1 / Z_STEP, ...local(e.clientX, e.clientY));
     };
@@ -346,6 +362,23 @@ function createChunkedMap(pixi, host, config) {
   const PAN_SPEED = 6;
   function tick(ticker) {
     for (const fn of tickHooks) fn(ticker);
+    if (flyAnim) {
+      flyAnim.t += ticker.deltaMS;
+      const p = Math.min(1, flyAnim.t / flyAnim.dur);
+      const e = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
+      camera.x = flyAnim.fromX + (flyAnim.toX - flyAnim.fromX) * e;
+      camera.y = flyAnim.fromY + (flyAnim.toY - flyAnim.fromY) * e;
+      zoom = flyAnim.fromZ + (flyAnim.toZ - flyAnim.fromZ) * e;
+      cameraDirty = true;
+      if (p >= 1) {
+        const r = flyAnim.resolve;
+        flyAnim = null;
+        r && r();
+      }
+      reconcile();
+      cameraDirty = false;
+      return;
+    }
     if (!enabled) return;
     let dx = 0, dy = 0;
     for (const k of keys) {
@@ -490,7 +523,7 @@ function createChunkedMap(pixi, host, config) {
     ctx = null;
     texCache.clear();
   }
-  return { ready, regenerate, destroy, onChange, getSnapshot, getCamera, tileIndexAt, biomeAt, getBounds, zoomBy, setEnabled, onTick, getEntityLayer, getApp, screenToWorld, worldToScreen, tile: TILE6 };
+  return { ready, regenerate, destroy, onChange, getSnapshot, getCamera, tileIndexAt, biomeAt, getBounds, zoomBy, flyTo, setEnabled, onTick, getEntityLayer, getApp, screenToWorld, worldToScreen, tile: TILE6 };
 }
 
 // ../auto-battler/src/engine/rng.js

web/personaPanel.js

@@ -1,512 +1,11 @@
-// 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
-// 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 { getPersonaSystem, personaUserPrompt, stripThink, stripThinkFinal, noThink } from '/web/personaPrompts.js'
-import {
-  createVoiceWav, cloneVoiceWav, playWav, synthVoiceWav, speakVoiceLive, stopVoiceLive,
-  activeEngineIsDesign, activeEngineIsNative, activeVoices, activeDefaultVoice, onTtsEngineChange,
-} from '/web/tts.js'
-import { listPersonas, savePersona, removePersona, onRosterChange, putAudio, getAudio, putPortrait, getPortrait } from '/web/personaStore.js'
-import { generatePortrait, imageBackendLabel, imageNeedsDownload, ensureImage } from '/web/imagen.js'
+// Tiny Army persona panel — mounted by tiny.js into #persona-stage. It's just the shared hero
+// creator (heroCreator.js — recruit/stream/edit/voice/portrait, autosaved) with its barracks roster
+// of saved heroes enabled.
+import { mountHeroCreator, CLASS_SLUG } from '/web/heroCreator.js'
 
-const CLASSES = ['Warrior', 'Ranger', 'Monk', 'Assassin', 'Mage', 'Paladin', 'Cleric', 'Knight']
-const MAX_TOKENS = 200 // persona JSON + a voice line + a quote
-
-// Each class shows the idle pose of a fitting sprite (character slug → see
-// characters.json). The sheet's front-right row is animated as a tiny looping
-// icon beside the class name in the dropdown.
-export const CLASS_SLUG = {
-  Warrior: 'true-heroes-iii-fighter',
-  Ranger: 'true-heroes-iii-ranger',
-  Monk: 'true-heroes-ii-bard',
-  Assassin: 'true-heroes-iv-ninja-assassin',
-  Mage: 'true-heroes-iii-wizard',
-  Paladin: 'true-heroes-ii-paladin',
-  Cleric: 'true-heroes-ii-cleric',
-  Knight: 'rts-humans-knight',
-}
-const ICON_PX = 30        // on-screen size of the class icon box
-const ICON_ZOOM = 2.4     // sheets pad the character inside each cell — zoom in so it fills the box
-const spriteUrl = (u) => (u || '').replace('/assets/', '/sprites/') // sheets serve at /sprites
-
-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
-}
-
-// Idle sheets are 4 rows (facings) × N frame columns; cell = height/4. We render
-// the front-right row (row 0) and step across the columns to loop the idle — no
-// canvas, just a sized background + the Web Animations API. Each cell is scaled to
-// ICON_ZOOM × the box and the box is centred on it, so the padded-in character
-// fills the icon instead of floating tiny in a sea of transparent cell.
-function animateIdleIcon(box, idleUrl) {
-  box.getAnimations?.().forEach((a) => a.cancel())
-  box.style.backgroundImage = ''
-  const img = new Image()
-  img.onload = () => {
-    const cell = (img.naturalHeight / 4) || img.naturalHeight
-    const cols = Math.max(1, Math.round(img.naturalWidth / cell))
-    const rows = Math.max(1, Math.round(img.naturalHeight / cell))
-    const cellPx = ICON_PX * ICON_ZOOM                 // zoomed on-screen cell size
-    const off = (cellPx - ICON_PX) / 2                 // inset to centre the box on a cell
-    box.style.backgroundImage = `url("${idleUrl}")`
-    box.style.backgroundSize = `${cols * cellPx}px ${rows * cellPx}px`
-    const y = `-${off}px`                              // row 0, vertically centred
-    box.animate(
-      [{ backgroundPosition: `-${off}px ${y}` }, { backgroundPosition: `-${cols * cellPx + off}px ${y}` }],
-      { duration: cols * 110, iterations: Infinity, easing: `steps(${cols})` },
-    )
-  }
-  img.src = idleUrl
-}
-
-// A class picker that mirrors a native <select> API (.value get/set, 'change'
-// event) but renders an animated idle icon beside each class. Icons attach once
-// characters.json resolves (root.setIcons), so the menu is usable immediately.
-function makeClassDropdown(classes) {
-  const triggerIco = el('span', { class: 'persona-class-ico' })
-  const triggerLabel = el('span', { class: 'persona-classdrop-label' })
-  const trigger = el('button', { class: 'persona-input persona-classdrop-trigger', type: 'button' },
-    [triggerIco, triggerLabel, el('span', { class: 'persona-classdrop-chev' }, '▾')])
-  const menu = el('div', { class: 'persona-classdrop-menu' })
-  const root = el('div', { class: 'persona-classdrop' }, [trigger, menu])
-
-  let value = classes[0]
-  let icons = {}            // class → idle sheet URL (filled by setIcons)
-  const optIco = {}         // class → menu icon span
-
-  const items = classes.map((c) => {
-    const ico = el('span', { class: 'persona-class-ico' }); optIco[c] = ico
-    const it = el('button', { class: 'persona-classdrop-opt', type: 'button' }, [ico, el('span', {}, c)])
-    it.addEventListener('click', () => { set(c); close() })
-    return it
-  })
-  menu.append(...items)
-
-  function set(c) {
-    if (!classes.includes(c)) return
-    const changed = c !== value
-    value = c
-    triggerLabel.textContent = c
-    items.forEach((it, i) => it.classList.toggle('sel', classes[i] === c))
-    if (icons[c]) animateIdleIcon(triggerIco, icons[c])
-    if (changed) root.dispatchEvent(new Event('change'))
-  }
-  const close = () => root.classList.remove('open')
-  trigger.addEventListener('click', (e) => { e.stopPropagation(); root.classList.toggle('open') })
-  document.addEventListener('click', (e) => { if (!root.contains(e.target)) close() })
-  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') close() })
-
-  root.setIcons = (map) => {
-    icons = map
-    for (const c of classes) if (map[c]) animateIdleIcon(optIco[c], map[c])
-    if (map[value]) animateIdleIcon(triggerIco, map[value])
-  }
-  Object.defineProperty(root, 'value', { get: () => value, set: (v) => set(v) })
-  triggerLabel.textContent = value
-  items.forEach((it, i) => it.classList.toggle('sel', classes[i] === value))
-  return root
-}
-
-// Resolve each class's idle sheet via characters.json and light up the dropdown.
-async function loadClassIcons(dropdown) {
-  try {
-    const d = await fetch('/sprites/characters.json').then((r) => r.json())
-    const bySlug = {}
-    for (const p of d.packs || []) for (const c of p.characters || []) bySlug[c.slug] = c
-    const map = {}
-    for (const [cls, slug] of Object.entries(CLASS_SLUG)) {
-      const idle = bySlug[slug]?.idle
-      if (idle) map[cls] = spriteUrl(idle)
-    }
-    dropdown.setIcons(map)
-  } catch { /* no icons — the dropdown still works with labels only */ }
-}
+// Re-exported so existing importers (tiny.js) keep working.
+export { CLASS_SLUG }
 
 export function mountPersonaPanel(host) {
-  const sel = makeClassDropdown(CLASSES)
-  loadClassIcons(sel)
-  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 hero')
-  const rosterEl = el('div', { class: 'persona-roster' })
-
-  const nameEl = el('div', { class: 'persona-name persona-edit', 'data-ph': 'Name' })
-  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…' })
-  // Fixed-voice providers (Kokoro/Kitten/Web Speech) don't design from text — pick a
-  // named voice here instead. Hidden when the provider is Qwen3-TTS (Voice Design).
-  const voicePickEl = el('select', { class: 'persona-input persona-voice-pick' })
-  const voicePickRow = el('div', { class: 'persona-voice-pick-row' },
-    [el('label', { class: 'persona-label' }, 'Voice'), voicePickEl])
-  // ▶ 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' }, '▶')
-  // Portrait: an editable appearance prompt + a 🎨 button that paints it (Z-Image/FLUX),
-  // cached per hero. Badge pulses when there's no portrait yet or the appearance changed.
-  const appearanceEl = el('div', { class: 'persona-appearance persona-edit', 'data-ph': 'How they look…' })
-  const portraitBtn = el('button', { class: 'persona-ico persona-portrait-btn', type: 'button', title: 'Paint portrait' }, '🎨')
-  const portraitImg = el('img', { class: 'persona-portrait-img', alt: '' })
-  const portraitWrap = el('div', { class: 'persona-portrait-wrap' }, [portraitImg])
-  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' },
-    [el('summary', {}, 'model output / debug (raw)'), copyBtn, thinkEl])
-
-  // A section header: a top line + a small red heading, with an optional action on the right.
-  const secHead = (title, action) =>
-    el('div', { class: 'persona-sec' }, [el('div', { class: 'persona-sec-title' }, title), action || el('span')])
-
-  const controls = el('aside', { class: 'persona-controls' }, [
-    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 emptyEl = el('div', { class: 'persona-empty' }, 'Recruit a hero, or pick one from the barracks.')
-  const bodyEl = el('div', { class: 'persona-body' }, [
-    nameEl,
-    secHead('About'), aboutEl,
-    secHead('Quote', playBtn), quoteEl,
-    secHead('Voice design'), voiceEl, voicePickRow,
-    secHead('Portrait', portraitBtn), appearanceEl, portraitWrap,
-  ])
-  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 hasPortrait = false // a cached portrait exists for this persona
-  let portraitBusy = false
-  let portraitUrl = null  // object URL for the shown image (revoked on replace)
-  let working = false
-  let busy = false
-  let playing = false     // audio is currently sounding (▶ becomes ⏹)
-
-  // ▶ ⇄ ⏹: reflect playback state on the button so a second click stops it.
-  function setPlaying(on) {
-    playing = on
-    playBtn.classList.toggle('playing', on)
-    playBtn.textContent = on ? '⏹' : '▶'
-    if (on) playBtn.title = 'Stop'
-    else updateVoiceUI()
-  }
-  // Stop any sounding voice and reset the button (used on toggle, nav-away, new pick).
-  function stopVoice() { stopVoiceLive(); setPlaying(false) }
-  // Play a WAV buffer with the button reflecting play→stop→idle, even if it's cut short.
-  async function playBuf(arrayBuffer) {
-    setPlaying(true)
-    try { await playWav(arrayBuffer) } catch { /* autoplay blocked / cut short */ }
-    finally { setPlaying(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 hero'} reporting for duty.`
-  // Which "voice" identity drives the active provider, and what the cached file used.
-  // Qwen3-TTS → the free-form DESIGN text; others → the picked named voice id.
-  const isDesign = () => activeEngineIsDesign()
-  const isNative = () => activeEngineIsNative()
-  const voiceNow = () => (isDesign() ? (lastPersona?.voice || '') : (lastPersona?.voiceId || ''))
-  const voiceUsed = () => (isDesign() ? (lastPersona?.voiceDesignUsed || '') : (lastPersona?.voiceIdUsed || ''))
-  // Cached audio is stale if the line or the voice identity changed since it was made.
-  // Native (Web Speech) never caches, so it's never "dirty".
-  const isDirty = () => !isNative() && hasVoice && lastPersona && (lineFor(lastPersona) !== lastPersona.voiceQuote || voiceNow() !== voiceUsed())
-  // Only Qwen3 has a clone step: re-speak the SAME timbre when just the words changed.
-  // A changed DESIGN text means a new timbre → re-design (cloning would keep the old voice).
-  const designChanged = () => isDesign() && hasVoice && lastPersona && (lastPersona.voice || '') !== (lastPersona.voiceDesignUsed || '')
-  // Badge when there's a persona but no current voice (none yet, or it went stale).
-  function updateVoiceUI() {
-    const needs = !!lastPersona && !isNative() && (!hasVoice || isDirty())
-    playBtn.classList.toggle('badged', needs)
-    if (playing) return // 'Stop' title owned by setPlaying while sounding
-    playBtn.title = (!lastPersona || isNative()) ? 'Play voice' : (!hasVoice ? 'Create voice' : (isDirty() ? 'Update & play' : 'Play voice'))
-  }
-
-  // Reflect the active provider: Qwen3-TTS designs from the editable text; the others
-  // use a named voice (text design goes read-only, the voice picker appears). Called on
-  // show + whenever the panel comes back into view (the provider is set in Settings).
-  function refreshVoiceMode() {
-    const design = isDesign()
-    voiceEl.contentEditable = design ? 'true' : 'false'
-    voiceEl.classList.toggle('readonly', !design)
-    voiceEl.setAttribute('data-ph', design ? 'How they sound…' : '(only used by Qwen3-TTS Voice Design)')
-    voicePickRow.style.display = design ? 'none' : ''
-    if (!design) {
-      const voices = activeVoices()
-      voicePickEl.replaceChildren(...voices.map((v) => el('option', { value: v.id }, v.label)))
-      let cur = (lastPersona && lastPersona.voiceId) || activeDefaultVoice()
-      if (!voices.some((v) => v.id === cur)) cur = voices[0] ? voices[0].id : ''
-      voicePickEl.value = cur
-      if (lastPersona) lastPersona.voiceId = cur
-    }
-  }
-  voicePickEl.addEventListener('change', () => {
-    if (!lastPersona) return
-    lastPersona.voiceId = voicePickEl.value
-    autosave(); updateVoiceUI()
-  })
-  // The provider is chosen on the Settings tab; re-render voice controls when it changes.
-  onTtsEngineChange(() => { stopVoice(); if (lastPersona) { refreshVoiceMode(); updateVoiceUI() } })
-
-  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() } })
-    // 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
-      lastPersona[field] = elm.textContent.trim()
-      autosave(); updateVoiceUI()
-    })
-  }
-  editable(nameEl, 'name', { single: true })
-  editable(aboutEl, 'about')
-  editable(quoteEl, 'quote', { single: true })
-  editable(voiceEl, 'voice')
-
-  // ── Portrait ──────────────────────────────────────────────────────────────
-  const PORTRAIT_STYLE = 'Fantasy hero character portrait, painterly digital art, dramatic lighting, head and shoulders, detailed face, plain background.'
-  const buildAppearance = (p) => [
-    [p.name, p.unitClass && `a ${p.unitClass}`].filter(Boolean).join(', '),
-    (p.about || '').trim(),
-  ].filter(Boolean).join('. ')
-  const appearanceFor = (p) => (p.appearance || '').trim() || buildAppearance(p)
-  const portraitDirty = () => hasPortrait && lastPersona && appearanceFor(lastPersona) !== (lastPersona.portraitUsed || '')
-
-  function setPortrait(blob) {
-    if (portraitUrl) { try { URL.revokeObjectURL(portraitUrl) } catch { /* ignore */ } }
-    portraitUrl = blob ? URL.createObjectURL(blob) : null
-    portraitImg.src = portraitUrl || ''
-    portraitWrap.classList.toggle('has-img', !!blob)
-  }
-  function updatePortraitUI() {
-    portraitBtn.classList.toggle('badged', !!lastPersona && (!hasPortrait || portraitDirty()))
-    portraitBtn.title = !hasPortrait ? 'Paint portrait' : 'Repaint portrait'
-  }
-  // Make the appearance field click-to-edit (drives the prompt + the badge).
-  appearanceEl.contentEditable = 'true'; appearanceEl.spellcheck = false
-  appearanceEl.addEventListener('input', () => { if (lastPersona) { lastPersona.appearance = appearanceEl.textContent.trim(); updatePortraitUI() } })
-  appearanceEl.addEventListener('blur', () => { if (!lastPersona) return; lastPersona.appearance = appearanceEl.textContent.trim(); autosave(); updatePortraitUI() })
-
-  // 🎨 Generate (or regenerate) the portrait from the appearance prompt; cache + persist.
-  async function makePortrait() {
-    if (portraitBusy || !lastPersona) return
-    autosave() // ensure an id to key the image
-    const appearance = appearanceFor(lastPersona)
-    portraitBusy = true; portraitBtn.classList.add('busy'); portraitBtn.disabled = true
-    const prev = status.textContent
-    try {
-      // In-browser engines (Janus) download the model on first use — show progress.
-      if (imageNeedsDownload()) {
-        status.textContent = 'loading portrait model…'
-        await ensureImage((f) => { status.textContent = `downloading portrait model… ${Math.round(f * 100)}% (one-time)` })
-      }
-      status.textContent = `painting with ${imageBackendLabel()}…`
-      const blob = await generatePortrait(`${appearance}. ${PORTRAIT_STYLE}`, { seed: 42 })
-      await putPortrait(savedId, blob)
-      lastPersona.appearance = appearance; lastPersona.portraitUsed = appearance
-      hasPortrait = true; setPortrait(blob); autosave()
-      status.textContent = prev
-    } catch (e) { status.textContent = `portrait failed: ${e.message || e}` }
-    finally { portraitBusy = false; portraitBtn.classList.remove('busy'); portraitBtn.disabled = false; updatePortraitUI() }
-  }
-  portraitBtn.addEventListener('click', makePortrait)
-
-  async function showPersona(p, opts = {}) {
-    stopVoice() // picking another hero cuts the current voice
-    lastPersona = { ...p }
-    savedId = opts.savedId || null
-    nameEl.textContent = p.name || ''
-    aboutEl.textContent = p.about || ''
-    quoteEl.textContent = p.quote || ''
-    voiceEl.textContent = p.voice || ''
-    appearanceEl.textContent = p.appearance || buildAppearance(p)
-    hasVoice = savedId ? !!(await getAudio(savedId)) : false
-    let pblob = null
-    hasPortrait = savedId ? !!(pblob = await getPortrait(savedId)) : false
-    setPortrait(pblob)
-    refreshVoiceMode(); updateVoiceUI(); updatePortraitUI(); refreshVisibility()
-  }
-
-  // ▶ The one voice button: if the cached voice is current, just replay it. If the voice
-  // DESIGN text changed (or there's no voice yet) → DESIGN a fresh timbre. If only the
-  // spoken line changed → CLONE the last voice (same timbre, new words). Cache + save over.
-  async function play() {
-    if (playing) { stopVoice(); return } // second click while sounding → stop
-    if (working || !lastPersona) return
-    const line = lineFor(lastPersona)
-
-    // Native provider (Web Speech): can't render to a file — speak the line live.
-    if (isNative()) {
-      setPlaying(true)
-      try { await speakVoiceLive(lastPersona.voiceId || '', line) }
-      catch (e) { status.textContent = `voice failed: ${e.message || e}` }
-      finally { setPlaying(false) }
-      return
-    }
-
-    // Up-to-date voice exists → just replay the cached file.
-    if (hasVoice && !isDirty()) {
-      const blob = savedId ? await getAudio(savedId) : null
-      if (blob) { await playBuf(await blob.arrayBuffer()); return }
-      hasVoice = false // cache vanished — fall through to re-make it
-    }
-    if (isDesign() && !lastPersona.voice) { status.textContent = 'add a voice design first'; return }
-    autosave() // ensure an id to key the audio
-
-    const design = isDesign()
-    // Qwen3 clones (same timbre, new words) only when the design text is unchanged;
-    // fixed-voice providers always re-synth the line in the picked named voice.
-    const reclone = design && hasVoice && !designChanged()
-    // Generating → the ▶ becomes a loading spinner (.busy) until the WAV is ready.
-    working = true; playBtn.classList.add('busy'); playBtn.disabled = true
-    const prev = status.textContent
-    status.textContent = reclone ? 'updating the voice…' : (design ? 'designing the voice…' : 'creating the voice…')
-    let wav = null
-    try {
-      if (design && reclone) {
-        const blob = await getAudio(savedId)
-        wav = await cloneVoiceWav(await blob.arrayBuffer(), lastPersona.voiceQuote || '', line, lastPersona.voice || '')
-      } else if (design) {
-        wav = await createVoiceWav(lastPersona.voice, line)
-      } else {
-        wav = await synthVoiceWav(lastPersona.voiceId || '', line)
-      }
-      await putAudio(savedId, new Blob([wav], { type: 'audio/wav' })) // save over
-      lastPersona.voiceQuote = line
-      lastPersona.voiceDesignUsed = lastPersona.voice || ''
-      lastPersona.voiceIdUsed = lastPersona.voiceId || ''
-      hasVoice = true; autosave()
-      status.textContent = prev
-    } catch (e) { status.textContent = `voice failed: ${e.message || e}` }
-    finally { working = false; playBtn.classList.remove('busy'); playBtn.disabled = false; updateVoiceUI() }
-    if (wav) await playBuf(wav.slice(0)) // spinner cleared → now toggles to ⏹ while sounding
-  }
-  playBtn.addEventListener('click', play)
-
-  // Navigating to another tab hides this stage (Gradio sets display:none) → the host
-  // stops intersecting; cut the voice so it doesn't keep playing off-screen.
-  try {
-    new IntersectionObserver((entries) => {
-      for (const e of entries) {
-        if (!e.isIntersecting) { if (playing) stopVoice() }
-        else if (lastPersona) { refreshVoiceMode(); updateVoiceUI() } // provider may have changed in Settings
-      }
-    }).observe(host)
-  } catch { /* no IntersectionObserver — playback just won't auto-stop on nav */ }
-
-  // ── Barracks roster (saved heroes) ──────────────────────────────────────
-  function renderRoster(personas) {
-    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 || 'Hero'}${p.unitClass ? ` · ${p.unitClass}` : ''}`),
-        el('button', { class: 'persona-roster-x', type: 'button', title: 'Remove', onclick: () => removePersona(p.id) }, '🗑'),
-      ])))
-  }
-  renderRoster(listPersonas())
-  onRosterChange(renderRoster)
-
-  let lastDebug = ''
-  function buildDebug(outcome, acc) {
-    const stripped = stripThinkFinal(acc || '')
-    return [
-      '=== TINY ARMY · PERSONA DEBUG ===',
-      `engine:   ${getEngineId()} · ${backendLabel()}`,
-      `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)',
-    ].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)
-    } catch {
-      thinkEl.textContent = text; thinkWrap.open = true
-      const r = document.createRange(); r.selectNodeContents(thinkEl)
-      const s = getSelection(); s.removeAllRanges(); s.addRange(r)
-      copyBtn.textContent = 'selected ↓ — ⌘/Ctrl+C'
-    }
-  })
-
-  async function generate() {
-    if (busy) return
-    busy = true; btn.disabled = true; refreshVisibility()
-    if (window.innerWidth <= 768) result.scrollIntoView({ behavior: 'smooth', block: 'start' })
-    nameEl.textContent = '…'; aboutEl.textContent = ''
-    quoteEl.textContent = ''; voiceEl.textContent = ''; appearanceEl.textContent = ''
-    lastPersona = null; savedId = null; hasVoice = false; hasPortrait = false
-    stopVoice(); setPortrait(null); updateVoiceUI(); updatePortraitUI()
-    thinkEl.textContent = ''; thinkWrap.open = true; stats.textContent = ''
-    let acc = ''
-    try {
-      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(getPersonaSystem(), personaUserPrompt(sel.value, seed.value) + noThink(currentModelId()), {
-        maxTokens: MAX_TOKENS,
-        onToken: (piece) => {
-          acc += piece
-          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: (s) => { stats.textContent = `● ${s.tokPerSec} tok/s · ${s.tokens} tok${s.ttftSeconds != null ? ` · first ${s.ttftSeconds}s` : ''}` },
-      })
-      try {
-        const p = parsePersonaJson(stripThinkFinal(acc))
-        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
-      }
-    } 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; refreshVisibility() }
-  }
-  btn.addEventListener('click', generate)
+  mountHeroCreator(host, { showBarracks: true })
 }

web/shell/persona.css

@@ -138,6 +138,9 @@
   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; }
+/* Disabled = up to date (no change to repaint); dim it (but not while busy — that shows a spinner). */
+.persona-ico:disabled:not(.busy) { opacity: .4; cursor: default; }
+.persona-ico:disabled:not(.busy):hover { background: var(--p-card) !important; }
 .persona-ico.busy { cursor: default; }
 /* Working (voice/portrait) → hide the glyph and spin a small ring in its place. */
 .persona-ico.busy { color: transparent !important; }
@@ -355,3 +358,126 @@
   .model-select { font-size: 15px !important; padding: 9px 10px !important; }
   .persona-go, .persona-go-alt { padding: 12px !important; }
 }
+
+/* ── Game-page "Create a Hero" modal — hosts the shared creator (.persona-view) in a card over the
+ *    dimmed map. Palette vars are re-declared here so the modal chrome (head/foot) matches the
+ *    parchment body even though those vars are normally scoped to .persona-view. */
+.hero-modal-backdrop {
+  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
+  padding: 20px; background: rgba(8, 11, 16, .62); backdrop-filter: blur(2px);
+}
+.hero-modal {
+  --p-ink: #141821; --p-muted: #6d6a5f; --p-paper: #f3ebdc; --p-paper-2: #ece2cc;
+  --p-card: #fbf6ea; --p-transmit: #d8271a;
+  --p-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  /* FIXED height so the modal never resizes between Create a Hero ⇄ Hero Details or while text
+   * streams in — the two columns scroll internally instead. */
+  width: min(940px, 96vw); height: min(620px, 90vh); display: flex; flex-direction: column;
+  background: var(--p-paper); color: var(--p-ink); font-family: var(--p-sans);
+  border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
+}
+.hero-modal-head {
+  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
+  padding: 12px 16px; border-bottom: 1px solid var(--p-paper-2); background: var(--p-card);
+}
+.hero-modal-title { font-weight: 700; font-size: 16px; letter-spacing: .01em; }
+.hero-modal-x {
+  border: 0; background: none; color: var(--p-muted); font-size: 20px; line-height: 1;
+  cursor: pointer; padding: 4px 8px; border-radius: 8px;
+}
+.hero-modal-x:hover { background: var(--p-paper-2); color: var(--p-ink); }
+.hero-modal-body { flex: 1; min-height: 0; overflow: hidden; }
+/* The creator's two-column view fills the fixed body; each column scrolls inside it. */
+.hero-modal-body .persona-view { height: 100%; }
+.hero-modal-foot {
+  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0;
+  padding: 12px 16px; border-top: 1px solid var(--p-paper-2); background: var(--p-card);
+}
+.hero-modal-cancel, .hero-modal-save {
+  font-family: var(--p-sans); font-weight: 600; font-size: 14px; cursor: pointer;
+  padding: 9px 16px; border-radius: 9px; border: 1px solid var(--p-paper-2);
+}
+.hero-modal-cancel { background: transparent; color: var(--p-muted); }
+.hero-modal-cancel:hover { color: var(--p-ink); border-color: var(--p-muted); }
+.hero-modal-save { background: var(--p-transmit); color: #fff; border-color: var(--p-transmit); }
+.hero-modal-save:hover { filter: brightness(1.06); }
+.hero-modal-save:disabled { opacity: .45; cursor: not-allowed; filter: none; }
+
+/* The "+ Create hero" card in the Game hero picker. */
+.hero-pick-create {
+  border-style: dashed !important; color: #cfd6df !important;
+}
+.hero-pick-create:hover { border-color: #4a5765 !important; background: rgba(40, 48, 60, .92) !important; }
+.hero-pick-create .hero-pick-plus { font-size: 26px; line-height: 1; color: #aab3c0; }
+
+/* ── Left-column states: recruit controls (A) ⇄ portrait panel (B). The model output is anchored to
+ *    the bottom of the column; the portrait box shows a framed placeholder until it's painted. ── */
+.persona-recruit-box, .persona-portrait-panel { display: flex; flex-direction: column; gap: 8px; }
+.persona-controls > .persona-think-wrap { margin-top: auto; } /* anchor model output to the bottom */
+.persona-back {
+  align-self: flex-start; font-family: var(--p-mono); font-size: 11px; letter-spacing: .06em;
+  color: var(--p-muted); background: none; border: 0; cursor: pointer; padding: 2px 0;
+}
+.persona-back:hover { color: var(--p-ink); }
+/* Portrait box: always a framed square in the panel (placeholder before painting, image after). */
+.persona-portrait-panel .persona-portrait-wrap {
+  display: flex; align-items: center; justify-content: center; margin-top: 4px;
+  width: 100%; aspect-ratio: 1 / 1; background: var(--p-card);
+  border: 1.5px dashed var(--p-muted); box-shadow: 4px 4px 0 var(--p-transmit);
+}
+.persona-portrait-panel .persona-portrait-wrap.has-img { border-style: solid; border-color: var(--p-ink); }
+.persona-portrait-panel .persona-portrait-wrap:not(.has-img)::after {
+  content: 'portrait appears here'; font-family: var(--p-mono); font-size: 10px;
+  letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted);
+}
+.persona-portrait-panel .persona-portrait-img {
+  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border: 0; box-shadow: none; display: none;
+}
+.persona-portrait-panel .persona-portrait-wrap.has-img .persona-portrait-img { display: block; }
+
+/* Inline per-action status (e.g. "painting via …", "generating voice via …") beside a section's
+ * create button; the button + note sit together on the right of the heading. */
+/* Action header: the create button with its status note to the RIGHT; the note wraps (never
+ * truncates) so the full model name always shows. */
+.persona-sec-action { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
+.persona-sec-action > .persona-ico { flex-shrink: 0; }
+/* The note stays BESIDE the button and wraps its own text (tiny font), so it never pushes the
+ * portrait/box below it down even with a full model name. */
+.persona-act-status {
+  flex: 1; min-width: 0;
+  font-family: var(--p-mono); font-size: 8px; letter-spacing: .02em; color: var(--p-muted);
+  white-space: normal; line-height: 1.2;
+}
+/* Always-visible barracks block in the left column. */
+.persona-barracks { display: flex; flex-direction: column; gap: 4px; }
+/* Status + token rate now live inside the debug <details>; give them a little breathing room. */
+.persona-think-wrap > .persona-status, .persona-think-wrap > .persona-stats { margin: 6px 0 0; }
+/* ← Back in the modal footer sits to the LEFT of Cancel / Save & Play. */
+.hero-modal-foot { gap: 10px; }
+.hero-modal-foot .persona-back { margin-right: auto; font-size: 13px; }
+
+/* ── Hero detail page (Game): a dark card shown before spawning — big portrait/idle + about/quote
+ *    and a Select button. ── */
+.hero-detail-backdrop {
+  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
+  padding: 20px; background: rgba(8, 11, 16, .7); backdrop-filter: blur(2px); font-family: var(--tac-font, system-ui);
+}
+.hero-detail {
+  width: min(380px, 94vw); max-height: 92vh; overflow: auto; display: flex; flex-direction: column;
+  background: #14181f; color: #e8e8e8; border: 1px solid #2a3340; border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
+}
+.hero-detail-portrait {
+  width: 240px; height: 240px; margin: 18px auto 4px; border-radius: 12px;
+  background: #0b0e12 center no-repeat; background-size: cover; border: 1px solid #20262e; box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
+}
+.hero-detail-info { padding: 8px 18px 4px; display: flex; flex-direction: column; gap: 8px; }
+.hero-detail-name { font-size: 22px; font-weight: 700; line-height: 1.1; }
+.hero-detail-class { color: #8a93a0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-top: -4px; }
+.hero-detail-about { font-size: 14px; line-height: 1.55; color: #c8cdd4; }
+.hero-detail-quote { margin: 2px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid #d8271a; font-style: italic; color: #e8d8a0; font-size: 15px; line-height: 1.4; }
+.hero-detail-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 18px 18px; }
+.hero-detail-back, .hero-detail-select { font: 600 14px var(--tac-font, system-ui); cursor: pointer; padding: 9px 18px; border-radius: 10px; border: 1px solid #2a3340; }
+.hero-detail-back { background: transparent; color: #aab3c0; }
+.hero-detail-back:hover { color: #e8e8e8; border-color: #4a5765; }
+.hero-detail-select { background: #d8271a; color: #fff; border-color: #d8271a; }
+.hero-detail-select:hover { filter: brightness(1.08); }

web/tiny.js

@@ -10,7 +10,8 @@ import { mountEnemiesSandbox } from '/web/enemiesSandbox.js'
 import { mountMapSandbox } from '/web/mapSandbox.js'
 import { mountComboBattler } from '/web/comboBattler.js'
 import { mountPersonaPanel, CLASS_SLUG } from '/web/personaPanel.js'
-import { listPersonas } from '/web/personaStore.js'
+import { mountHeroCreator, animateIdleIcon } from '/web/heroCreator.js'
+import { listPersonas, onRosterChange, getPortrait } from '/web/personaStore.js'
 import { mountDiaryPanel } from '/web/diaryPanel.js'
 import { mountSettingsPanel } from '/web/settingsPanel.js'
 import { mountSkillForgePanel } from '/web/skillForgePanel.js'
@@ -215,9 +216,49 @@ const buildPlayer = (chars, p) => {
   const pc = chars[CLASS_SLUG[p?.unitClass]] || chars['true-heroes-iii-fighter']
   return { name: p?.name || pc?.name || 'Hero', sheets: sheetsOf(pc), unit: { profession: PERSONA_PROF[p?.unitClass] || 'Warrior', name: p?.name || 'Hero' } }
 }
-// Bottom-of-screen hero picker: a card per saved persona (idle-sprite avatar + name). onPick gets the
-// chosen persona record. Overlays the map (pointer-events only on the cards, so the map still pans).
-function buildHeroPicker(host, personas, chars, onPick) {
+const PICK_CARD_CSS = 'display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;padding:8px 6px;border-radius:10px;border:1px solid #2a3340;background:rgba(20,24,33,.92);color:#e8e8e8;cursor:pointer;font:600 11px var(--tac-font,system-ui)'
+// Fill a square box with the hero's saved PORTRAIT (if any), else an animated idle GIF-style sprite
+// of their class (same loop as the class selector). `sizePx` sizes the idle-sprite cell math.
+async function fillAvatar(box, persona, chars, sizePx) {
+  let blob = null
+  try { if (persona?.id) blob = await getPortrait(persona.id) } catch { /* none */ }
+  box.getAnimations?.().forEach((a) => a.cancel())
+  if (blob) {
+    box.style.backgroundImage = `url(${URL.createObjectURL(blob)})`
+    box.style.backgroundSize = 'cover'; box.style.backgroundPosition = 'center'; box.style.imageRendering = 'auto'
+  } else {
+    box.style.imageRendering = 'pixelated'
+    const pc = chars[CLASS_SLUG[persona?.unitClass]] || chars['true-heroes-iii-fighter']
+    if (pc?.idle) animateIdleIcon(box, spriteUrl(pc.idle), sizePx)
+  }
+}
+// Hero detail page (before spawning): big portrait/idle + name/class/about/quote and a Select button.
+// onSelect fires when confirmed; Back / backdrop just close (returns to the picker).
+function openHeroDetail(host, persona, chars, onSelect) {
+  const backdrop = document.createElement('div'); backdrop.className = 'hero-detail-backdrop'
+  const card = document.createElement('div'); card.className = 'hero-detail'
+  const portrait = document.createElement('div'); portrait.className = 'hero-detail-portrait'
+  fillAvatar(portrait, persona, chars, 240)
+  const info = document.createElement('div'); info.className = 'hero-detail-info'
+  const name = document.createElement('div'); name.className = 'hero-detail-name'; name.textContent = persona?.name || 'Hero'
+  info.append(name)
+  if (persona?.unitClass) { const c = document.createElement('div'); c.className = 'hero-detail-class'; c.textContent = persona.unitClass; info.append(c) }
+  if (persona?.about) { const a = document.createElement('div'); a.className = 'hero-detail-about'; a.textContent = persona.about; info.append(a) }
+  if (persona?.quote) { const q = document.createElement('blockquote'); q.className = 'hero-detail-quote'; q.textContent = persona.quote; info.append(q) }
+  const foot = document.createElement('div'); foot.className = 'hero-detail-foot'
+  const back = document.createElement('button'); back.className = 'hero-detail-back'; back.type = 'button'; back.textContent = 'Back'
+  const select = document.createElement('button'); select.className = 'hero-detail-select'; select.type = 'button'; select.textContent = 'Select ▶'
+  foot.append(back, select)
+  card.append(portrait, info, foot); backdrop.append(card); host.appendChild(backdrop)
+  const close = () => backdrop.remove()
+  back.addEventListener('click', close)
+  backdrop.addEventListener('pointerdown', (e) => { if (e.target === backdrop) close() })
+  select.addEventListener('click', () => { close(); onSelect() })
+}
+// Bottom-of-screen hero picker: a card per saved persona (idle-sprite avatar + name) plus a
+// "+ Create hero" card. onPick gets the chosen persona; onCreate opens the create modal. Overlays
+// the map (pointer-events only on the cards, so the map still pans).
+function buildHeroPicker(host, personas, chars, onPick, onCreate) {
   const bar = document.createElement('div')
   bar.style.cssText = 'position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 12px 18px;pointer-events:none;background:linear-gradient(to top,rgba(8,11,16,.86),rgba(8,11,16,0));font-family:var(--tac-font,system-ui)'
   const title = document.createElement('div')
@@ -228,10 +269,10 @@ function buildHeroPicker(host, personas, chars, onPick) {
   for (const p of personas) {
     const pc = chars[CLASS_SLUG[p?.unitClass]] || chars['true-heroes-iii-fighter']
     const card = document.createElement('button')
-    card.style.cssText = 'display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;padding:8px 6px;border-radius:10px;border:1px solid #2a3340;background:rgba(20,24,33,.92);color:#e8e8e8;cursor:pointer;font:600 11px var(--tac-font,system-ui)'
+    card.style.cssText = PICK_CARD_CSS
     const av = document.createElement('div')
-    av.style.cssText = 'width:48px;height:48px;border-radius:8px;background:#0b0e12 0% 0%/400% 400% no-repeat;image-rendering:pixelated;border:1px solid #20262e'
-    if (pc?.idle) av.style.backgroundImage = `url(${spriteUrl(pc.idle)})`
+    av.style.cssText = 'width:48px;height:48px;border-radius:8px;background:#0b0e12 no-repeat;border:1px solid #20262e'
+    fillAvatar(av, p, chars, 48) // portrait if saved, else animated class idle
     const nm = document.createElement('div'); nm.textContent = p?.name || pc?.name || 'Hero'
     nm.style.cssText = 'max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
     card.append(av, nm)
@@ -239,9 +280,51 @@ function buildHeroPicker(host, personas, chars, onPick) {
     card.addEventListener('pointerdown', (ev) => { ev.preventDefault(); ev.stopPropagation(); onPick(p) })
     row.appendChild(card)
   }
+  // "+ Create hero" card → opens the create modal.
+  const create = document.createElement('button')
+  create.className = 'hero-pick-create'; create.style.cssText = PICK_CARD_CSS
+  const plus = document.createElement('div'); plus.className = 'hero-pick-plus'; plus.textContent = '+'
+  plus.style.cssText = 'width:48px;height:48px;display:flex;align-items:center;justify-content:center'
+  const clbl = document.createElement('div'); clbl.textContent = 'Create hero'; clbl.style.cssText = 'max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap'
+  create.append(plus, clbl)
+  create.addEventListener('pointerdown', (ev) => { ev.preventDefault(); ev.stopPropagation(); onCreate && onCreate() })
+  row.appendChild(create)
   bar.append(title, row); host.appendChild(bar)
   return bar
 }
+// "Create a Hero" modal over the map: hosts the shared creator (heroCreator.js — stream details,
+// generate a portrait + quote + voice, autosaved to the roster). onCreated(persona) fires on
+// "Save & Play"; Cancel/✕/backdrop just close (a generated hero is already saved to the barracks).
+function openCreateModal(host, onCreated) {
+  const backdrop = document.createElement('div'); backdrop.className = 'hero-modal-backdrop'
+  const card = document.createElement('div'); card.className = 'hero-modal'
+  const head = document.createElement('div'); head.className = 'hero-modal-head'
+  const title = document.createElement('div'); title.className = 'hero-modal-title'; title.textContent = 'Create a Hero'
+  const x = document.createElement('button'); x.className = 'hero-modal-x'; x.type = 'button'; x.title = 'Close'; x.textContent = '✕'
+  head.append(title, x)
+  const body = document.createElement('div'); body.className = 'hero-modal-body'
+  const foot = document.createElement('div'); foot.className = 'hero-modal-foot'
+  const cancel = document.createElement('button'); cancel.className = 'hero-modal-cancel'; cancel.type = 'button'; cancel.textContent = 'Cancel'
+  const save = document.createElement('button'); save.className = 'hero-modal-save'; save.type = 'button'; save.textContent = 'Save & Play ▶'; save.disabled = true
+  foot.append(cancel, save) // the creator prepends its ← Back here (shown only once a hero exists)
+  card.append(head, body, foot); backdrop.append(card); host.appendChild(backdrop)
+
+  // Save & Play is enabled once a hero is saved; ← Back resets the creator → recruit state → disabled.
+  const creator = mountHeroCreator(body, {
+    showBarracks: true,
+    backSlot: foot,
+    onSaved: () => { save.disabled = false },
+    onState: (s) => { title.textContent = s === 'portrait' ? 'Hero Details' : 'Create a Hero'; if (s === 'recruit') save.disabled = true },
+  })
+  const close = () => { try { creator.stop() } catch { /* ignore */ } backdrop.remove() }
+  x.addEventListener('click', close)
+  cancel.addEventListener('click', close)
+  backdrop.addEventListener('pointerdown', (e) => { if (e.target === backdrop) close() })
+  save.addEventListener('click', () => {
+    const cur = creator.current(); if (!cur.persona) return
+    close(); onCreated(cur.persona)
+  })
+}
 whenEl('battle-stage', async (el) => {
   unprose(el)
   const chars = await loadChars()
@@ -255,15 +338,29 @@ whenEl('battle-stage', async (el) => {
   comboCtrl = mountComboBattler(PIXI, el, { seed: 1, rosters })
   await comboCtrl.ready
   const FALLBACK = { name: 'Fighter', unitClass: 'Warrior' }
+  const OVERVIEW_ZOOM = 0.45, GAMEPLAY_ZOOM = 2.5
   let picker = null
-  const showPicker = () => {
-    if (picker) return
+  // Cinematic: the picker presents a zoomed-out overview; confirming a hero flies the camera DOWN to
+  // the spawn point and drops them in there.
+  const flyToOverview = () => { const b = comboCtrl.map.getBounds(); if (b) comboCtrl.map.flyTo((b.x0 + b.x1) / 2, (b.y0 + b.y1) / 2, OVERVIEW_ZOOM, 700).catch(() => {}) }
+  const spawnWithFly = (p) => {
+    picker?.remove(); picker = null
+    const s = comboCtrl.getSpawnWorld()
+    comboCtrl.selectHero(buildPlayer(chars, p))
+    comboCtrl.map.flyTo(s.x, s.y, GAMEPLAY_ZOOM, 1000).catch(() => {})
+  }
+  // Picking a hero opens its detail page (portrait/about/quote + Select); Select confirms → spawnWithFly.
+  const onPick = (p) => openHeroDetail(el, p, chars, () => spawnWithFly(p))
+  const buildPicker = () => {
     const personas = listPersonas()
-    picker = buildHeroPicker(el, personas.length ? personas : [FALLBACK], chars, (p) => {
-      picker?.remove(); picker = null
-      comboCtrl.selectHero(buildPlayer(chars, p))
-    })
+    return buildHeroPicker(el, personas.length ? personas : [FALLBACK], chars, onPick,
+      () => openCreateModal(el, spawnWithFly))
   }
+  const showPicker = () => { if (!picker) { picker = buildPicker(); flyToOverview() } }
+  // Rebuild the open picker whenever the roster changes — so a hero just created (or removed) shows
+  // up in the "Choose your hero" bar without waiting for the next time it reopens.
+  const refreshPicker = () => { if (picker) { picker.remove(); picker = buildPicker() } }
   showPicker()
   comboCtrl.onChange((s) => { if (s.over) showPicker() })
+  onRosterChange(refreshPicker)
 })