Phase 3+4: character chat (woid context) with per-message voice playback

characterContext.js ports woid's two-part pattern client-side: a static identity
system prompt + a dynamic state turn (level, equipped skills, a perception log of
recent kills/level-ups/forged skills) + verbatim recent-chat memory. characterChat.js
mounts a mobile chat thread that streams replies via the local text model
(runtime.js) and persists history to the soul. Each reply gets a ▶ button that speaks
it in the fighter's voice (tts.js), caching the WAV per message in IndexedDB. A
'Talk to <name>' button on the Game character sheet opens it as a bottom-sheet.

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

web/characterChat.js

@@ -0,0 +1,110 @@
+// Character chat — talk to a fighter on its character page. Streams replies from the local
+// text model (runtime.js facade) using woid-style assembled context (characterContext.js), so
+// the fighter answers in-voice and aware of its real game state. Each reply gets a ▶ button
+// that speaks it in the fighter's voice (tts.js), caching the WAV per-message (Phase 4).
+import { streamChat, ensureModel, currentModelId } from '/web/runtime.js'
+import { noThink, stripThinkFinal } from '/web/personaPrompts.js'
+import { buildContext } from '/web/characterContext.js'
+import { getPersona, patchPersona, putChatAudio, getChatAudio } from '/web/personaStore.js'
+import {
+  ensureTts, createVoiceWav, synthVoiceWav, speakVoiceLive, playWav,
+  activeEngineIsDesign, activeEngineIsNative, currentVoiceId, getAutoNarrate,
+} from '/web/tts.js'
+
+const msgId = () => 'm_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 6)
+const HISTORY_CAP = 50
+
+// Speak `text` in the fighter's voice; cache the WAV under the message id for instant replay.
+async function speak(id, text, p, btn) {
+  const set = (s) => { if (btn) btn.textContent = s }
+  try {
+    if (activeEngineIsNative()) { set('⏳'); await ensureTts(); await speakVoiceLive(p.voiceId || currentVoiceId(), text); return }
+    let blob = await getChatAudio(id)
+    let bytes
+    if (blob) { bytes = await blob.arrayBuffer() }
+    else {
+      set('⏳'); await ensureTts()
+      const wav = activeEngineIsDesign() ? await createVoiceWav(p.voice || '', text) : await synthVoiceWav(p.voiceId || currentVoiceId(), text)
+      bytes = wav instanceof Blob ? await wav.arrayBuffer() : wav
+      try { await putChatAudio(id, new Blob([bytes.slice(0)])) } catch { /* cache best-effort */ }
+    }
+    set('⏸'); await playWav(bytes.slice(0))
+  } catch { /* voice is best-effort */ } finally { set('▶') }
+}
+
+export function mountCharacterChat(host, personaId, { onUpdate } = {}) {
+  const wrap = document.createElement('div'); wrap.style.cssText = 'display:flex;flex-direction:column;height:100%;min-height:0'
+  const thread = document.createElement('div'); thread.style.cssText = 'flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:4px 2px 8px'
+  const form = document.createElement('div'); form.style.cssText = 'display:flex;gap:8px;align-items:flex-end;border-top:1px solid #232b36;padding-top:8px'
+  const input = document.createElement('textarea'); input.rows = 1; input.placeholder = 'say something…'
+  input.style.cssText = 'flex:1;resize:none;max-height:96px;background:#0d1015;border:1px solid #2a3340;border-radius:10px;color:#e8e8e8;padding:9px 11px;font:13px var(--tac-font,system-ui);box-sizing:border-box'
+  const send = document.createElement('button'); send.type = 'button'; send.textContent = '➤'
+  send.style.cssText = 'flex:none;width:42px;height:40px;border-radius:10px;border:1px solid #2a3340;background:#1a2230;color:#e8e8e8;font-size:16px;cursor:pointer'
+  form.append(input, send); wrap.append(thread, form); host.append(wrap)
+
+  const bubble = (role, text) => {
+    const row = document.createElement('div'); row.style.cssText = `display:flex;flex-direction:column;max-width:88%;${role === 'user' ? 'align-self:flex-end;align-items:flex-end' : 'align-self:flex-start;align-items:flex-start'}`
+    const b = document.createElement('div')
+    b.style.cssText = `padding:8px 11px;border-radius:12px;line-height:1.4;font:13px var(--tac-font,system-ui);white-space:pre-wrap;${role === 'user' ? 'background:#1f6feb;color:#fff;border-bottom-right-radius:4px' : 'background:#1a2230;color:#e8e8e8;border:1px solid #232b36;border-bottom-left-radius:4px'}`
+    b.textContent = text
+    row.append(b); row._b = b; return row
+  }
+
+  function renderThread() {
+    const p = getPersona(personaId)
+    thread.replaceChildren()
+    const hist = (p && p.chat && p.chat.history) || []
+    if (!hist.length) {
+      const hint = document.createElement('div'); hint.textContent = `Ask ${p ? p.name : 'them'} about a battle, a skill, or how they feel.`
+      hint.style.cssText = 'color:#6b7686;font-size:12px;text-align:center;margin:auto;padding:20px 6px'; thread.append(hint)
+    }
+    for (const m of hist) {
+      const row = bubble(m.role, m.text)
+      if (m.role === 'assistant') {
+        const play = document.createElement('button'); play.type = 'button'; play.textContent = '▶'
+        play.title = 'Hear it'; play.style.cssText = 'margin-top:3px;background:none;border:none;color:#9aa4b2;font-size:12px;cursor:pointer;padding:2px 4px'
+        play.addEventListener('click', () => speak(m.id, m.text, getPersona(personaId), play))
+        row.append(play)
+      }
+      thread.append(row)
+    }
+    thread.scrollTop = thread.scrollHeight
+  }
+
+  function persist(role, id, text) {
+    const cur = getPersona(personaId); if (!cur) return
+    const history = [...((cur.chat && cur.chat.history) || []), { id, role, text, ts: Date.now() }].slice(-HISTORY_CAP)
+    patchPersona(personaId, { chat: { history } })
+    onUpdate && onUpdate()
+  }
+
+  let busy = false
+  async function submit() {
+    const text = input.value.trim(); if (!text || busy) return
+    const p = getPersona(personaId); if (!p) return
+    busy = true; send.disabled = true; input.value = ''
+    persist('user', msgId(), text); renderThread()
+    // Transient streaming bubble (not yet in history) we write tokens into live.
+    const row = bubble('assistant', '…'); thread.append(row); thread.scrollTop = thread.scrollHeight
+    const { system, user } = buildContext(p, text)
+    let raw = ''
+    try {
+      await ensureModel(() => {})
+      await streamChat(system, user + noThink(currentModelId()), {
+        maxTokens: 220, temperature: 0.85,
+        onToken: (t) => { raw += t; row._b.textContent = stripThinkFinal(raw) || '…'; thread.scrollTop = thread.scrollHeight },
+      })
+    } catch (e) { row._b.textContent = '…(couldn’t answer: ' + (e && e.message ? e.message : e) + ')' }
+    const final = stripThinkFinal(raw).trim() || '…'
+    const id = msgId()
+    persist('assistant', id, final)
+    renderThread()
+    if (getAutoNarrate()) { const btns = thread.querySelectorAll('button'); speak(id, final, getPersona(personaId), btns[btns.length - 1]) }
+    busy = false; send.disabled = false
+  }
+
+  send.addEventListener('click', submit)
+  input.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit() } })
+  renderThread()
+  return { refresh: renderThread, focus: () => input.focus() }
+}

web/characterContext.js

@@ -0,0 +1,63 @@
+// Character context — a single-player, client-side port of woid's two-part context pattern
+// (agent-sandbox/pi-bridge/buildContext.js): a STATIC system prompt that is the fighter's
+// identity, plus a DYNAMIC "what's happening to you now" turn assembled from live game state
+// (level, recent battle/skill events — woid's perception log) and a VERBATIM slice of the
+// recent conversation (woid drops summarization; so do we). See docs/rpg-progression-plan.md.
+
+import { effectSummary } from '/web/skillSchema.js'
+
+// One perception-log line per event, in the fighter's lived-experience voice.
+function formatEvent(e) {
+  switch (e && e.type) {
+    case 'kill': return `You defeated ${e.enemy || 'a foe'} (+${e.xp || 0} xp).`
+    case 'level_up': return `You grew stronger — you reached level ${e.level}.`
+    case 'skill_learned': return `You forged a new skill: "${e.skill}".`
+    default: return null
+  }
+}
+
+// STATIC identity. Built once per chat session; the fighter's "bible".
+export function buildSystemPrompt(p) {
+  if (!p) return 'You are a fighter in a fantasy auto-battler. Stay in character.'
+  const lines = [
+    `You are ${p.name || 'a nameless fighter'}${p.unitClass ? `, a ${p.unitClass}` : ''} in a fantasy auto-battler called Tiny Army.`,
+    p.about ? `Who you are: ${p.about}` : '',
+    [p.personality && `Personality: ${p.personality}`, p.vibe && `Vibe: ${p.vibe}`, p.specialty && `Specialty: ${p.specialty}`].filter(Boolean).join('. '),
+    '',
+    'You are a REAL fighter who has actually lived the battles described below — speak from that experience, in first person, never as an assistant.',
+    'Stay fully in character. Keep replies short and natural (1-3 sentences). Never mention being an AI, a model, or a game system. Do not use markdown or stage directions.',
+  ]
+  return lines.filter((l) => l !== '').join('\n')
+}
+
+// DYNAMIC turn: current standing + recent perception events + verbatim recent chat + new line.
+export function buildStateTurn(p, userMsg, { maxEvents = 5, maxHistory = 8 } = {}) {
+  const prog = (p && p.progression) || { level: 1, kills: 0 }
+  const cs = (p && p.customSkills) || {}
+  const equipped = (p && p.equippedSkills || []).map((id) => cs[id]).filter(Boolean)
+  const events = (p && p.events || []).map(formatEvent).filter(Boolean).slice(-maxEvents)
+  const history = (p && p.chat && p.chat.history || []).slice(-maxHistory)
+
+  const state = [
+    `Level ${prog.level}${prog.kills ? `, ${prog.kills} foes felled` : ''}.`,
+    equipped.length ? `Skills at the ready: ${equipped.map((s) => `${s.name} (${effectSummary(s)})`).join('; ')}.` : '',
+    events.length ? `Lately:\n${events.map((e) => `  - ${e}`).join('\n')}` : '',
+  ].filter(Boolean).join('\n')
+
+  const convo = history.map((m) => `${m.role === 'user' ? 'Player' : 'You'}: ${m.text}`).join('\n')
+
+  return [
+    '[Where you stand right now]',
+    state || 'You are fresh to the field, untested.',
+    '',
+    convo ? '[Your conversation so far]\n' + convo + '\n' : '',
+    `Player: ${userMsg}`,
+    '',
+    `Reply as ${(p && p.name) || 'yourself'}, in first person, 1-3 sentences.`,
+  ].filter((l) => l !== '').join('\n')
+}
+
+// Convenience: assemble both halves for a turn.
+export function buildContext(p, userMsg, opts) {
+  return { system: buildSystemPrompt(p), user: buildStateTurn(p, userMsg, opts) }
+}

web/tiny.js

@@ -20,6 +20,7 @@ import { applyXp, enemyXpValue, levelProgress, xpToNext, appendEvent } from '/we
 import { getSkillIcon, getSkillArt, putSkillArt } from '/web/personaStore.js'
 import { effectSummary, resolveEquipped } from '/web/skillSchema.js'
 import { generatePortrait } from '/web/imagen.js'
+import { mountCharacterChat } from '/web/characterChat.js'
 import { mountDiaryPanel } from '/web/diaryPanel.js'
 import { mountSettingsPanel } from '/web/settingsPanel.js'
 import { mountSkillForgePanel } from '/web/skillForgePanel.js'
@@ -451,6 +452,23 @@ whenEl('battle-stage', async (el) => {
       } catch { art.textContent = 'art unavailable' }
     })
   }
+  // Chat with the current hero in a bottom-sheet (woid-context chat + per-message voice).
+  let chatSheet = null
+  const openChat = () => {
+    if (!currentHero || !currentHero.id) return
+    chatSheet?.remove()
+    const back = document.createElement('div'); back.style.cssText = 'position:absolute;inset:0;z-index:11;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center'
+    const sh = document.createElement('div'); sh.style.cssText = 'width:min(440px,96vw);height:82%;display:flex;flex-direction:column;background:#11151c;border:1px solid #2a3340;border-radius:16px 16px 0 0;padding:14px;color:#e8e8e8;box-sizing:border-box'
+    const head = document.createElement('div'); head.style.cssText = 'display:flex;align-items:center;justify-content:space-between;margin-bottom:8px'
+    const ttl = document.createElement('div'); ttl.textContent = `💬 ${currentHero.name || 'Hero'}`; ttl.style.cssText = 'font:700 16px var(--tac-font,system-ui)'
+    const x = document.createElement('button'); x.type = 'button'; x.textContent = '✕'; x.style.cssText = 'background:none;border:none;color:#9aa4b2;font-size:20px;cursor:pointer'
+    const closeChat = () => { back.remove(); chatSheet = null }
+    x.addEventListener('click', closeChat); head.append(ttl, x); sh.append(head)
+    const body = document.createElement('div'); body.style.cssText = 'flex:1;min-height:0;display:flex;flex-direction:column'; sh.append(body)
+    const chat = mountCharacterChat(body, currentHero.id, {}); setTimeout(() => chat.focus(), 50)
+    back.addEventListener('pointerdown', (e) => { if (e.target === back) closeChat() })
+    back.append(sh); el.append(back); chatSheet = back
+  }
   const renderSheet = () => {
     sheet.innerHTML = ''
     const close = document.createElement('button'); close.type = 'button'; close.textContent = '✕'
@@ -478,6 +496,12 @@ whenEl('battle-stage', async (el) => {
       if (prog.attributePoints > 0) { const pts = document.createElement('span'); pts.textContent = `★ ${prog.attributePoints} point${prog.attributePoints > 1 ? 's' : ''}`; pts.style.color = '#ffe082'; meta.append(pts) }
       sheet.append(meta)
     }
+    // Talk to this fighter (chat + voice). Needs a saved hero (id) to persist the conversation.
+    if (currentHero.id) {
+      const talk = document.createElement('button'); talk.type = 'button'; talk.textContent = `💬 Talk to ${currentHero.name || 'them'}`
+      talk.style.cssText = 'width:100%;padding:11px;border-radius:10px;border:1px solid #2a3340;background:#16202e;color:#e8e8e8;font:600 13px var(--tac-font,system-ui);cursor:pointer;margin-bottom:12px'
+      talk.addEventListener('click', openChat); sheet.append(talk)
+    }
     if (hero) {
       const wrap = document.createElement('div'); wrap.style.cssText = 'margin:6px 0 12px'
       const lab = document.createElement('div'); lab.style.cssText = 'font-size:11px;color:#9aa4b2;margin-bottom:3px'