Fun+LLM: death after-action report with in-voice war-diary recap

When a hero falls, intercept the death (snap.over) with an after-action screen: run
stats (foes felled, threat reached, levels gained, time held) + a streamed first-person
war-diary recap the fighter writes about THIS battle (load-bearing LLM). The recap is
banked to the hero's event log as a 'battle' memory, so chat recalls past battles.
Buttons: Fight again / Choose hero. Verified: overlay + real model recap + persistence.

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

web/afterAction.js

@@ -0,0 +1,90 @@
+// Death after-action — when a hero falls, show what the run achieved AND have the fighter
+// recount the battle in its own voice (load-bearing LLM). The recap is banked to the hero's
+// event log so it remembers this fight (feeds chat + future "living character" features).
+import { streamChat, ensureModel, currentModelId } from '/web/runtime.js'
+import { noThink, stripThinkFinal } from '/web/personaPrompts.js'
+import { getPersona, patchPersona } from '/web/personaStore.js'
+import { appendEvent } from '/web/progression.js'
+
+function recapPrompts(p, run, recentEvents) {
+  const system = [
+    `You are ${p?.name || 'a fighter'}${p?.unitClass ? `, a ${p.unitClass}` : ''}, in a fantasy auto-battler.`,
+    'You just fought a desperate battle and fell in the field. Recount it in FIRST PERSON, past tense,',
+    'in 1-2 vivid sentences — proud, rueful or defiant as fits you. No preamble, no markdown.',
+  ].join(' ')
+  const lines = [
+    `This battle: you cut down ${run.killsThisRun} foe${run.killsThisRun === 1 ? '' : 's'}`,
+    run.levelEnd > run.levelStart ? `, rose from level ${run.levelStart} to ${run.levelEnd}` : `, at level ${run.levelEnd}`,
+    `, the threat climbed to ${run.threat}×`,
+    `, and you held for ${run.timeSurvived}s before falling.`,
+  ].join('')
+  return { system, user: lines + (recentEvents ? `\nAlong the way: ${recentEvents}.` : '') }
+}
+
+export function mountAfterAction(host, persona, run, { onAgain, onChoose } = {}) {
+  const back = document.createElement('div')
+  back.style.cssText = 'position:absolute;inset:0;z-index:13;background:rgba(6,8,12,.82);display:flex;align-items:center;justify-content:center;padding:16px'
+  const card = document.createElement('div')
+  card.style.cssText = 'width:min(440px,94vw);background:#11151c;border:1px solid #2a3340;border-radius:16px;padding:20px;color:#e8e8e8;box-sizing:border-box;text-align:center'
+
+  const title = document.createElement('div'); title.textContent = `${persona?.name || 'Your hero'} has fallen`
+  title.style.cssText = 'font:800 22px var(--tac-font,system-ui);color:#ff8a8a;margin-bottom:4px'
+  const sub = document.createElement('div'); sub.textContent = 'After-action report'
+  sub.style.cssText = 'font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#9aa4b2;margin-bottom:16px'
+  card.append(title, sub)
+
+  // Stat grid
+  const grid = document.createElement('div'); grid.style.cssText = 'display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px'
+  const stat = (label, value, gold) => {
+    const c = document.createElement('div'); c.style.cssText = 'background:rgba(20,24,33,.6);border:1px solid #232b36;border-radius:10px;padding:10px'
+    const v = document.createElement('div'); v.textContent = value; v.style.cssText = `font:800 20px var(--tac-font,system-ui);color:${gold ? '#ffe082' : '#e8e8e8'}`
+    const l = document.createElement('div'); l.textContent = label; l.style.cssText = 'font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9aa4b2;margin-top:2px'
+    c.append(v, l); return c
+  }
+  grid.append(
+    stat('Foes felled', String(run.killsThisRun), true),
+    stat('Threat reached', run.threat + '×'),
+    stat('Levels gained', '+' + Math.max(0, run.levelEnd - run.levelStart)),
+    stat('Held for', run.timeSurvived + 's'),
+  )
+  card.append(grid)
+
+  // War-diary recap (streamed, in-voice)
+  const recapWrap = document.createElement('div'); recapWrap.style.cssText = 'background:rgba(20,24,33,.5);border-left:3px solid #c9a227;border-radius:8px;padding:12px;margin-bottom:16px;min-height:48px;text-align:left'
+  const recap = document.createElement('div'); recap.textContent = '…'; recap.style.cssText = 'font-style:italic;color:#c2c8d2;line-height:1.5;font:italic 14px var(--tac-font,system-ui)'
+  recapWrap.append(recap); card.append(recapWrap)
+
+  const btns = document.createElement('div'); btns.style.cssText = 'display:flex;gap:10px'
+  const again = document.createElement('button'); again.type = 'button'; again.textContent = '⚔ Fight again'
+  again.style.cssText = 'flex:1;padding:13px;border-radius:10px;border:1px solid #c9a227;background:#2a2410;color:#ffe082;font:700 14px var(--tac-font,system-ui);cursor:pointer'
+  const choose = document.createElement('button'); choose.type = 'button'; choose.textContent = 'Choose hero'
+  choose.style.cssText = 'flex:1;padding:13px;border-radius:10px;border:1px solid #2a3340;background:#1a2230;color:#e8e8e8;font:600 14px var(--tac-font,system-ui);cursor:pointer'
+  const close = () => back.remove()
+  again.addEventListener('click', () => { close(); onAgain && onAgain() })
+  choose.addEventListener('click', () => { close(); onChoose && onChoose() })
+  btns.append(again, choose); card.append(btns)
+
+  back.append(card); host.append(back)
+
+  // Stream the in-voice recap, then bank it to the hero's memory.
+  ;(async () => {
+    try {
+      const recent = (persona?.events || []).slice(-4).map((e) => e.type === 'skill_learned' ? `forged ${e.skill}` : e.type === 'level_up' ? `reached level ${e.level}` : '').filter(Boolean).join(', ')
+      const { system, user } = recapPrompts(persona, run, recent)
+      await ensureModel(() => {})
+      let raw = ''
+      await streamChat(system, user + noThink(currentModelId()), {
+        maxTokens: 110, temperature: 0.9,
+        onToken: (t) => { raw += t; recap.textContent = stripThinkFinal(raw) || '…' },
+      })
+      const text = stripThinkFinal(raw).trim() || '…'
+      recap.textContent = text
+      if (persona?.id) {
+        const fresh = getPersona(persona.id)
+        if (fresh) patchPersona(persona.id, { events: appendEvent(fresh.events, 'battle', { kills: run.killsThisRun, threat: run.threat, recap: text, ts: Date.now() }) })
+      }
+    } catch (e) { recap.textContent = '(the memory is a blur of steel and blood)' }
+  })()
+
+  return { close }
+}

web/characterContext.js

@@ -12,6 +12,7 @@ function formatEvent(e) {
     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}".`
+    case 'battle': return e.recap ? `You remember a battle: "${e.recap}"` : `You fought a hard battle, felling ${e.kills || 0} foes before falling.`
     default: return null
   }
 }

web/tiny.js

@@ -22,6 +22,7 @@ import { effectSummary, resolveEquipped } from '/web/skillSchema.js'
 import { generatePortrait } from '/web/imagen.js'
 import { mountCharacterChat } from '/web/characterChat.js'
 import { forgeSkillForHero } from '/web/skillForge.js'
+import { mountAfterAction } from '/web/afterAction.js'
 import { mountDiaryPanel } from '/web/diaryPanel.js'
 import { mountSettingsPanel } from '/web/settingsPanel.js'
 import { mountSkillForgePanel } from '/web/skillForgePanel.js'
@@ -369,10 +370,27 @@ whenEl('battle-stage', async (el) => {
     // Re-read from the store so we carry live progression (level/xp/skills), not a stale picker copy.
     currentHero = (p && p.id && getPersona(p.id)) || p
     setActiveHeroId(currentHero?.id || null)
+    runStart = { level: currentHero?.progression?.level || 1 } // for the after-action "levels gained"
+    deathShown = false
     const s = comboCtrl.getSpawnWorld()
     comboCtrl.selectHero(buildPlayer(chars, currentHero))
     comboCtrl.map.flyTo(s.x, s.y, GAMEPLAY_ZOOM, 1000).catch(() => {})
   }
+  // Hero died → after-action report (run stats + an in-voice war-diary recap), then re-enter.
+  let runStart = null, deathShown = false
+  const onHeroDown = () => {
+    if (deathShown) return; deathShown = true
+    const th = comboCtrl.getThreat?.() || { kills: 0, time: 0, diff: 1 }
+    const fresh = (currentHero?.id && getPersona(currentHero.id)) || currentHero
+    const run = {
+      killsThisRun: th.kills, threat: +th.diff.toFixed(1), timeSurvived: Math.round(th.time),
+      levelStart: runStart?.level || fresh?.progression?.level || 1, levelEnd: fresh?.progression?.level || 1,
+    }
+    mountAfterAction(el, fresh, run, {
+      onAgain: () => { if (fresh) spawnWithFly(fresh) },
+      onChoose: () => showPicker(),
+    })
+  }
 
   // ── Leveling: a foe defeat grants XP to the active hero, persisted to the roster. ──
   const awardKill = (enemy) => {
@@ -682,6 +700,6 @@ whenEl('battle-stage', async (el) => {
   el.append(sheetBtn, sheet)
 
   showPicker()
-  comboCtrl.onChange((s) => { if (s.over) showPicker(); if (sheetOpen) updateHp(comboCtrl.getHero?.()) })
+  comboCtrl.onChange((s) => { if (s.over) onHeroDown(); if (sheetOpen) updateHp(comboCtrl.getHero?.()) })
   onRosterChange(refreshPicker)
 })