Skill forge: usable immediately, character-in-skill art painted in background

Forging a skill no longer blocks on image generation. The coding model
defines the skill, it's persisted + learned at once, and a single scene of
THE CHARACTER using the skill is painted in the background (one image now,
used as both icon and detail art — no separate icon + action art).

- skillForge.js: persist with iconPending=true and return immediately;
generateSkillImage() runs fire-and-forget, passing the hero's portrait to
Klein as an identity ref so the actual character appears in the scene.
Status names the coding model (like image/voice backends do).
- app.py: /portrait accepts ref_image; both the sidecar path
(_remote_klein_portrait) and in-process ZeroGPU path (_klein_portrait, via
new _decode_ref_image) feed it as FLUX.2 identity conditioning.
- imagen.js / imagenServer.js: thread refImage through to local + Klein engines.
- tiny.js / skillForgePanel.js: gold spinner loading indicator while an icon
is still painting; swaps to the art when iconPending clears (onRosterChange).

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

app.py

@@ -823,34 +823,81 @@ def _load_klein_pipe():
     return Flux2KleinPipeline.from_pretrained(_KLEIN_MODEL_ID, torch_dtype=torch.bfloat16)
 
 
-def _remote_klein_portrait(prompt, seed=None):
+def _remote_klein_portrait(prompt, seed=None, ref_image=None):
     import os as _os
+    import base64 as _b64
+    import tempfile as _tmp
     from gradio_client import Client
     client = Client(_KLEIN_SPACE, token=HF_TOKEN or None)
-    result = client.predict(prompt, int(seed if seed is not None else 42), api_name="/generate")
+    s = int(seed if seed is not None else 42)
+    ref_path = None
+    if ref_image:
+        try:
+            raw = ref_image.split(",", 1)[1] if "," in ref_image else ref_image  # strip a data: URL prefix
+            fd, ref_path = _tmp.mkstemp(suffix=".png")
+            with _os.fdopen(fd, "wb") as f:
+                f.write(_b64.b64decode(raw))
+        except Exception:  # noqa: BLE001 — a bad ref just falls back to text-only
+            ref_path = None
+    try:
+        if ref_path:
+            from gradio_client import handle_file
+            # generate(prompt, seed, lora, ref_image[pose], ref_image2[identity]). No LoRA so the
+            # identity comes from the reference; pass the portrait as the identity ref.
+            result = client.predict(prompt, s, "", None, handle_file(ref_path), api_name="/generate")
+        else:
+            result = client.predict(prompt, s, api_name="/generate")
+    except Exception:  # noqa: BLE001 — remote may not accept the extra args; retry text-only
+        result = client.predict(prompt, s, api_name="/generate")
+    finally:
+        if ref_path:
+            try:
+                _os.unlink(ref_path)
+            except Exception:  # noqa: BLE001
+                pass
     path = result[0] if isinstance(result, (tuple, list)) else result
     with open(_os.fspath(path), "rb") as f:
         return f.read()
 
 
+def _decode_ref_image(ref_image):
+    """base64 PNG / data-URL string -> PIL.Image (RGB), or None. Used as a FLUX.2 identity ref."""
+    if not ref_image:
+        return None
+    try:
+        import io
+        import base64 as _b64
+        from PIL import Image
+        raw = ref_image.split(",", 1)[1] if "," in ref_image else ref_image  # strip a data: URL prefix
+        return Image.open(io.BytesIO(_b64.b64decode(raw))).convert("RGB")
+    except Exception:  # noqa: BLE001 — a bad ref just falls back to text-only
+        return None
+
+
 @GPU(duration=60)
-def _klein_portrait(prompt, seed=None, width=1024, height=1024):
-    """FLUX.2 [klein] 4B for ZeroGPU-backed portrait generation."""
+def _klein_portrait(prompt, seed=None, width=1024, height=1024, ref_image=None):
+    """FLUX.2 [klein] 4B for ZeroGPU-backed portrait generation. `ref_image` (base64) is an identity
+    reference (e.g. a hero's portrait) so a generated scene depicts THAT character — native multi-image
+    conditioning, same as the klein-zerogpu sidecar's generate()."""
     global _klein_pipe
     import io
     import random
     import torch
+    ref = _decode_ref_image(ref_image)
     with _klein_lock:
         if _klein_pipe is None:
             _klein_pipe = _load_klein_pipe()
         dev = "cuda" if torch.cuda.is_available() else "cpu"
         _klein_pipe.to(dev)
         s = int(seed if seed is not None else random.randint(0, 2_147_483_647))
-        img = _klein_pipe(
+        kwargs = dict(
             prompt=prompt, width=width, height=height,
             num_inference_steps=_KLEIN_STEPS, guidance_scale=_KLEIN_GUIDANCE,
             generator=torch.Generator(device=dev).manual_seed(s),
-        ).images[0]
+        )
+        if ref is not None:
+            kwargs["image"] = ref
+        img = _klein_pipe(**kwargs).images[0]
         if dev == "cuda":
             _klein_pipe.to("cpu")
             try:
@@ -925,6 +972,8 @@ async def portrait(request: Request):
     seed = body.get("seed")
     provider = body.get("provider") or ""  # cloud sub-provider hint (e.g. flux-dev)
     engine = (body.get("engine") or "").strip().lower()  # 'local' | 'klein' | 'cloud' | '' = auto
+    ref_image = body.get("ref_image")  # optional base64 PNG — an identity reference for Klein (e.g. the
+    #                                    character's portrait), so a generated skill image shows THAT character.
     if not prompt:
         return Response("prompt required", status_code=400)
     want_local = engine == "local" or (not engine and IMAGE_MODE == "local")
@@ -944,9 +993,9 @@ async def portrait(request: Request):
     if want_klein:
         try:
             if _KLEIN_SPACE:
-                png = await asyncio.to_thread(_remote_klein_portrait, prompt, seed)
+                png = await asyncio.to_thread(_remote_klein_portrait, prompt, seed, ref_image)
             else:
-                png = await asyncio.to_thread(_klein_portrait, prompt, seed)
+                png = await asyncio.to_thread(_klein_portrait, prompt, seed, 1024, 1024, ref_image)
         except Exception as e:  # noqa: BLE001
             return Response(f"klein image error: {e}", status_code=500)
         return Response(png, media_type="image/png", headers={"Cache-Control": "no-store"})

docs/skill-upgrade-plan.md

@@ -0,0 +1,124 @@
+# Skill Upgrade Plan — impressive unique VFX + powerful AoE forged skills
+
+**Goals (from the ask):**
+1. Forged skills get **impressive graphics when used** in combat (today they look plain).
+2. The **coding model makes each skill visually unique** (not just mechanically).
+3. **Most skills are powerful and hit all units in their range** (AoE).
+
+## Why forged skills look plain today (grounded findings)
+- VFX is config-driven: `combatRenderer.buildSkillPlay(id, def)` reads `def.skillFx[skillId] =
+  { animUrl, effects:[{url,cell}] }`. **Canon** skills get this from the sandbox's skill configs;
+  **forged** skills (id 9000+) have **no `skillFx` entry**, so on `cast` the renderer falls through
+  to `playAttack()` — a **basic sword swing** — and `spawnEffects(undefined)` is a no-op.
+- AoE is **target-centric**: `resolveScope()` supports `self/party/nearby/area/target_and_adjacent/
+  adjacent_to_target`, but `area`/`nearby` = **target + units within `ADJACENT_GW=140` of the
+  TARGET**. There is **no "all enemies within the caster's range" scope.** Forged skills also don't
+  set any `scope`, so each effect hits the single auto-target.
+- Asset palette is rich: `web/assets/effects.json` (228 entries) has element sheets — **fire, ice,
+  nature, poison, shock, petrification**, plus `attack` arcs (slash/pierce/shot) and `hit` pops —
+  all minifantasy strips with `{cell, rows, cols}`. Great raw material for element-themed VFX.
+- The Game wires VFX per actor: `comboBattler.spawnHero` builds `defsById.P0 = {name, profession,
+  ...sheets}` and passes it to `createCombatRenderer`. **Adding `defsById.P0.skillFx` is the hook**
+  for the hero's forged-skill VFX. `spawnEffects` positions effects at the **caster's body centre**.
+
+---
+
+## Phase A — Visual identity in the forge IR (model makes each unique)
+
+Extend the Skill-Forge output so the coding model emits a **`visual` block** alongside the mechanics.
+Cosmetic, so a bad value just falls back (never crashes the resolver).
+
+**New IR fields** (`skillSchema.js` → `validateSkill`):
+```js
+visual: {
+  element: 'fire'|'ice'|'lightning'|'nature'|'poison'|'shadow'|'holy'|'arcane',  // → tint + sprite sheet
+  shape:   'slash'|'nova'|'ring'|'beam'|'pillar'|'projectile'|'shockwave',        // procedural motion
+  color:   '#rrggbb',                                                             // accent (validated hex)
+  intensity: 1..3,                                                                // particle count / scale / flash
+}
+```
+All whitelisted/clamped. `element` maps to an `effects.json` sheet; `shape`+`color`+`intensity` drive
+a procedural layer (Phase B). The model picks them to match the flavor → **every skill is visually
+distinct** (element × shape × color × intensity is a huge space), and consistent with its name/lore.
+
+**Prompt (`FORGE_SYSTEM`)** gains: "Also choose a `visual` that fits the skill's theme: an element,
+a shape (how it manifests), an accent color, and intensity 1-3." Keep the JSON-only contract.
+
+## Phase B — Render impressive, unique VFX
+
+Two composited layers, wired by giving the hero's forged skills a `skillFx` entry at spawn.
+
+**B1 — Element sprite layer (reuse existing pipeline).**
+- Build `ELEMENT_FX` map: element → an `effects.json` URL (fire→fire sheet, lightning→shock, etc.).
+- In `comboBattler.spawnHero`, construct `defsById.P0.skillFx` from the equipped forged skills:
+  `skillFx[skill.id] = { animUrl: null, effects: [ ELEMENT_FX[skill.visual.element] ] }`.
+  `buildSkillPlay` already loads these; `processLog` 'cast' already calls `spawnEffects`. So forged
+  skills immediately stop looking like a basic swing.
+
+**B2 — Procedural Pixi VFX layer (new `src/render/skillVfx.js`).**
+A small, asset-free effect generator drawn into the combat root (world space), parameterised by
+`visual`: an **expanding tinted ring/nova** (shape `nova/ring/shockwave`, radius = the skill's AoE
+range → reads as "everything in here is hit"), a **beam/line** to the farthest target, a **pillar**,
+or a **projectile** burst. Color = `visual.color`; particle count/scale/duration scale with
+`intensity`. Big skills also trigger a brief **screen flash + shake** (reuse the existing
+`addShake`/juice hooks). This guarantees uniqueness + scale even when no sprite matches.
+
+**B3 — Hit feedback on every struck unit.**
+When an AoE skill resolves, pop a small element `hit` sprite (from `effects.json` `hit` category) +
+the yellow skill-name float on each affected enemy — so the player sees the whole area get hit.
+
+**Wiring:** comboBattler's `processLog` 'cast' hook (it already runs per cast) calls
+`skillVfx.play(caster, skill.visual, rangeRadius, targets)`. The renderer change is additive.
+
+## Phase C — Powerful + hit all units in range (AoE)
+
+**C1 — New engine scope (`teamBattle.resolveScope`):**
+```js
+case 'area_around_caster': {
+  const r = e.range || DEFAULT_AOE        // effect-supplied radius (field units)
+  return b.actors.filter(x => x.alive && x.team !== src.team && dist(src, x) <= r)
+}
+```
+Allow effects to carry a clamped `range`. (Also extend `damage/heal/...` op validators to accept
+`scope` + `range`, not just `apply_condition`.)
+
+**C2 — Forge defaults to powerful AoE:**
+- Schema: when the model omits scope, **default most forged skills to `area_around_caster`** (a
+  config flag, e.g. attack/spell categories get AoE by default; `self`/`ally` targets don't).
+- Prompt: "Most skills should be POWERFUL and hit ALL foes in range — prefer an area scope and
+  meaningful damage/conditions."
+- Numbers: raise the forged damage clamp (these are a hero's signature ultimate-ish skills), with a
+  balance ceiling. AoE radius derived from the skill's reach/element (clamped to ~the on-screen
+  ranged reach so it's readable, not whole-map).
+
+**C3 — Readability tie-in:** the AoE radius from C1 drives the Phase-B nova scale, so the visual
+ring exactly covers the hit area — the player *sees* who's caught.
+
+---
+
+## Files to touch
+| File | Change |
+|---|---|
+| `tiny-army/web/skillSchema.js` | `visual` block + validation; `scope`/`range` on more ops; AoE-by-default; higher damage clamp |
+| `tiny-army/web/skillForge.js` | `FORGE_SYSTEM` prompt: emit `visual` + prefer powerful AoE |
+| `auto-battler/src/engine/teamBattle.js` | `area_around_caster` scope + `range` on effects |
+| `auto-battler/src/render/skillVfx.js` (new) | procedural element VFX (nova/ring/beam/pillar/projectile) |
+| `auto-battler/src/render/comboBattler.js` | build `defsById.P0.skillFx` from forged visuals; call `skillVfx.play` on cast; AoE-scaled nova + flash |
+| `auto-battler/src/render/combatRenderer.js` | (light) expose a per-target hit-effect helper for AoE pops |
+
+## Sequencing
+1. **C (engine AoE + power)** first — biggest gameplay impact, smallest surface; verify in-engine
+   that an `area_around_caster` skill damages all foes in radius.
+2. **A (visual schema + prompt)** — model emits `visual`; validate; re-forge produces visual params.
+3. **B1 (element sprites)** — forged skills stop looking plain (quick win, reuses pipeline).
+4. **B2/B3 (procedural VFX + AoE nova + hit pops)** — the "impressive + unique" payoff.
+
+## Decisions (locked 2026-06-13)
+- **Power/AoE:** signature-strong, **capped** — most forged attacks/spells are AoE + high damage, ceiling so they can't trivially one-shot a Champion boss.
+- **VFX:** **both** element sprites + procedural nova/beam scaled to the AoE.
+
+## Open decisions
+1. **VFX approach** — element sprites only, procedural only, or **both composited** (recommended: both — sprites give theme, procedural gives unique scale/motion + guaranteed coverage).
+2. **AoE default** — make *most* forged attacks/spells AoE (recommended), or only when the model opts in.
+3. **Power level** — how strong? Recommend "signature strong": higher damage + AoE, but capped so a forged skill can't trivially one-shot a Champion boss.
+4. **Should canon (non-forged) skills also get the new procedural VFX?** Optional follow-up — they already have authored sprites.

web/imagen.js

@@ -38,6 +38,9 @@ export async function ensureImage(onProgress) { return eng().ensure(onProgress)
 
 // Generate a portrait → PNG Blob. `prompt` is the appearance description; `seed` keeps it
 // reproducible where the engine supports it.
-export async function generatePortrait(prompt, { seed } = {}) {
-  return eng().generate(prompt, { seed })
+// `refImage` (optional, base64 PNG / data URL) is an identity reference passed to Klein, so a
+// generated image can depict a specific character (e.g. a skill scene of the hero). Engines that
+// don't support references (cloud FLUX, in-browser) simply ignore it.
+export async function generatePortrait(prompt, { seed, refImage } = {}) {
+  return eng().generate(prompt, { seed, refImage })
 }

web/imagenServer.js

@@ -28,7 +28,7 @@ export const engineLocal = {
   label: 'Z-Image-Turbo · local (your GPU)',
   available: () => isLocalhost(),
   note: 'run the project locally',
-  generate: (prompt, { seed } = {}) => postPortrait({ prompt, seed, engine: 'local' }),
+  generate: (prompt, { seed, refImage } = {}) => postPortrait({ prompt, seed, engine: 'local', ref_image: refImage }),
   backendLabel: () => '🖥 local model',
 }
 
@@ -37,7 +37,7 @@ export const engineKleinZeroGpu = {
   id: 'klein-zerogpu',
   label: 'FLUX.2 klein 4B · ZeroGPU',
   available: () => true,
-  generate: (prompt, { seed } = {}) => postPortrait({ prompt, seed, engine: 'klein', provider: 'flux-klein-4b' }),
+  generate: (prompt, { seed, refImage } = {}) => postPortrait({ prompt, seed, engine: 'klein', provider: 'flux-klein-4b', ref_image: refImage }),
   backendLabel: () => 'ZeroGPU FLUX.2 klein 4B',
 }
 

web/skillForge.js

@@ -3,13 +3,12 @@
 // validates/clamps it into an engine-runnable CB skill (skillSchema.js), paints a Klein icon,
 // and persists it onto the hero (customSkills + learnedSkills + event). See skillForgePanel.js
 // and tiny.js (character sheet).
-import { streamCoding } from '/web/codingModel.js'
+import { streamCoding, currentCodingModel } from '/web/codingModel.js'
 import { stripThinkFinal } from '/web/personaPrompts.js'
 import { validateSkill, SAFE_OPS, SAFE_CONDITIONS, ELEMENTS, SHAPES } from '/web/skillSchema.js'
 import { generatePortrait } from '/web/imagen.js'
-import { getPersona, patchPersona, putSkillIcon } from '/web/personaStore.js'
+import { getPersona, patchPersona, putSkillIcon, getPortrait } from '/web/personaStore.js'
 import { appendEvent } from '/web/progression.js'
-import { withElapsed } from '/web/elapsed.js'
 
 export const FORGE_SYSTEM = [
   'You are the Skill Forge for a fantasy auto-battler. Author ONE POWERFUL signature skill for a',
@@ -60,40 +59,57 @@ async function generateOnce(p, ask, { think = false, onToken, extra = '' } = {})
   return { v: validateSkill(parseSkillJson(clean), { persona: p }), raw, clean }
 }
 
-export function iconPrompt(p, skill) {
-  return `fantasy game skill icon, "${skill.name}": ${skill.flavor}. ${p.unitClass || ''} ability, dramatic, centered emblem, painterly, square`
+const blobToDataURL = (blob) => new Promise((res) => { const r = new FileReader(); r.onload = () => res(r.result); r.onerror = () => res(null); r.readAsDataURL(blob) })
+
+// The skill's image: a scene of THE CHARACTER performing the skill. Klein gets the hero's portrait
+// as an identity reference (refImage) so the actual character appears. This single image is the
+// skill's icon (and the detail-sheet art) — no separate icon + art any more.
+export function skillImagePrompt(p, skill) {
+  return `${p.name || 'A warrior'}, a ${p.unitClass || 'fighter'}, unleashing the skill "${skill.name}": ${skill.flavor || ''}. dynamic fantasy action scene, the character mid-cast, motion and magical impact, dramatic lighting, painterly`
 }
 
-// Forge a skill for `personaId`, persist it, and return { ok, skill, iconBlob } | { ok:false, error }.
-// One validation retry, then a hard fail (the caller decides how to surface it). Icon paint is
-// best-effort — a skill without art is still learned.
+// Generate the skill image in the BACKGROUND (the skill is already usable). Stores it as the icon
+// and clears iconPending → the UI swaps its spinner for the image (via onRosterChange).
+async function generateSkillImage(personaId, skill) {
+  let refImage = null
+  try { const portrait = await getPortrait(personaId); if (portrait) refImage = await blobToDataURL(portrait) } catch { /* no portrait → text-only */ }
+  try {
+    const blob = await generatePortrait(skillImagePrompt(getPersona(personaId) || {}, skill), { seed: skill.id, refImage })
+    if (blob) await putSkillIcon(skill.id, blob)
+  } catch (e) { console.warn('[tinyarmy:skill] image generation failed (skill still usable):', (e && e.message) || e) }
+  finally {
+    const cur = getPersona(personaId)
+    if (cur && cur.customSkills && cur.customSkills[skill.id]) {
+      patchPersona(personaId, { customSkills: { ...cur.customSkills, [skill.id]: { ...cur.customSkills[skill.id], iconPending: false } } })
+    }
+  }
+}
+
+// Forge a skill for `personaId`. The skill is defined by the coding model, persisted IMMEDIATELY
+// (so it's usable at once), and its image is painted in the BACKGROUND. Returns { ok, skill } as
+// soon as the skill is defined; the image arrives later (iconPending → spinner until then).
 export async function forgeSkillForHero(personaId, request, { onStatus, onToken, think = false } = {}) {
   const p = getPersona(personaId)
   if (!p) return { ok: false, error: 'no hero' }
   const ask = (request || '').trim()
   if (!ask) return { ok: false, error: 'describe the skill you want' }
 
-  onStatus && onStatus('forging…')
+  onStatus && onStatus(`forging via ${currentCodingModel().label}…`) // name the model (like image/voice)
   let { v } = await generateOnce(p, ask, { think, onToken })
   if (!v.ok) {
-    onStatus && onStatus('refining (invalid, retrying)…')
+    onStatus && onStatus(`refining via ${currentCodingModel().label} (retrying)…`)
     ;({ v } = await generateOnce(p, ask, { think, onToken, extra: `\n\nYour previous attempt was invalid: ${v.errors.join('; ')}. Return ONLY a corrected json block.` }))
   }
   if (!v.ok) return { ok: false, error: v.errors.join('; ') }
 
-  const skill = v.skill
-  let iconBlob = null
-  try {
-    iconBlob = await withElapsed((t) => onStatus && onStatus(t), 'painting icon…', generatePortrait(iconPrompt(p, skill), { seed: skill.id }))
-    if (iconBlob) await putSkillIcon(skill.id, iconBlob)
-  } catch (e) { console.warn('[tinyarmy:skill] icon generation failed (skill still learned):', (e && e.message) || e) } // logged via diag; art is optional
-
+  const skill = { ...v.skill, iconPending: true } // image paints in the background
   const fresh = getPersona(p.id) || p
   patchPersona(p.id, {
     customSkills: { ...(fresh.customSkills || {}), [skill.id]: skill },
     learnedSkills: [...(fresh.learnedSkills || []), skill.id],
     events: appendEvent(fresh.events, 'skill_learned', { skill: skill.name, id: skill.id, ts: Date.now() }),
   })
-  onStatus && onStatus('done')
-  return { ok: true, skill, iconBlob }
+  onStatus && onStatus('learned ✓ (painting its scene…)')
+  generateSkillImage(p.id, skill) // fire-and-forget — don't block use of the skill
+  return { ok: true, skill }
 }

web/skillForgePanel.js

@@ -6,6 +6,17 @@ import { listPersonas, getPersona, onRosterChange, getSkillIcon } from '/web/per
 import { effectSummary } from '/web/skillSchema.js'
 import { forgeSkillForHero } from '/web/skillForge.js'
 
+// Loading spinner for a skill whose scene is still painting. Idempotent — tiny.js injects the same
+// keyframes/class; we re-inject (id-guarded) so the Forge tab works even before the game module loads.
+;(function injectSkillSpin() {
+  try {
+    if (document.getElementById('ta-skill-spin-css')) return
+    const s = document.createElement('style'); s.id = 'ta-skill-spin-css'
+    s.textContent = '@keyframes ta-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.ta-skill-spin{position:absolute;top:50%;left:50%;width:18px;height:18px;border:2px solid #2a3340;border-top-color:#c9a227;border-radius:50%;animation:ta-spin .8s linear infinite}'
+    document.head.appendChild(s)
+  } catch { /* ignore */ }
+})()
+
 function el(tag, props = {}, kids = []) {
   const n = document.createElement(tag)
   for (const [k, v] of Object.entries(props)) {
@@ -51,22 +62,36 @@ export function mountSkillForgePanel(host) {
   }
   function refreshStatus() { if (!status.dataset.busy) status.textContent = `Coding model: ${currentCodingModel().label}` }
 
+  let shownSkillId = null // skill currently in the card — so we can repaint its icon when it finishes
   async function renderCard(skill) {
+    shownSkillId = skill.id
     card.style.display = ''
     card.replaceChildren()
     const head = el('div', { style: 'display:flex;gap:12px;align-items:center' })
-    const icon = el('div', { style: 'width:64px;height:64px;border-radius:10px;border:1px solid #2a3340;background:#0d1015;flex:none;background-size:cover;background-position:center' })
-    getSkillIcon(skill.id).then((b) => { if (b) icon.style.backgroundImage = `url(${URL.createObjectURL(b)})` })
+    const icon = el('div', { style: 'position:relative;width:64px;height:64px;border-radius:10px;border:1px solid #2a3340;background:#0d1015;flex:none;background-size:cover;background-position:center' })
+    const b = await getSkillIcon(skill.id)
+    if (b) icon.style.backgroundImage = `url(${URL.createObjectURL(b)})`
+    else if (skill.iconPending) icon.append(el('div', { class: 'ta-skill-spin', title: 'painting its scene…' })) // loading indicator (CSS injected by tiny.js)
     const meta = el('div', {}, [
       el('div', { style: 'font:700 16px var(--tac-font,system-ui);color:#e8e8e8' }, skill.name),
       el('div', { style: 'font-size:11px;color:#9aa4b2;text-transform:uppercase;letter-spacing:.06em;margin:2px 0' }, `${skill.category.replace('_', ' ')} · ${effectSummary(skill)}`),
     ])
     head.append(icon, meta)
     const flav = el('div', { style: 'color:#c2c8d2;font-style:italic;margin:10px 0 0;line-height:1.45' }, skill.flavor || '')
-    const saved = el('div', { style: 'color:#34d058;font-size:12px;margin-top:8px' }, '✓ Learned — view it on the hero’s character sheet.')
+    const note = skill.iconPending ? 'painting its scene… (already usable on the character sheet)' : '✓ Learned — view it on the hero’s character sheet.'
+    const saved = el('div', { style: 'color:#34d058;font-size:12px;margin-top:8px' }, note)
     card.append(head, flav, saved)
   }
 
+  // When the background image finishes, the hero's skill flips iconPending → false (onRosterChange).
+  // If that skill is the one in the card, repaint it so the spinner swaps for the finished art.
+  function repaintShownCard() {
+    if (!shownSkillId || card.style.display === 'none') return
+    const owner = listPersonas().find((p) => p.customSkills && p.customSkills[shownSkillId])
+    const sk = owner && owner.customSkills[shownSkillId]
+    if (sk && !sk.iconPending) renderCard(sk)
+  }
+
   let running = false
   async function forge() {
     if (running) return
@@ -87,7 +112,7 @@ export function mountSkillForgePanel(host) {
   }
 
   btn.addEventListener('click', forge)
-  onRosterChange(refreshHeroes)
+  onRosterChange(() => { refreshHeroes(); repaintShownCard() })
   onCodingModelChange(refreshStatus)
   refreshHeroes(); refreshStatus()
   return { refresh: refreshHeroes }

web/tiny.js

@@ -17,9 +17,8 @@ import { mountPersonaPanel, CLASS_SLUG } from '/web/personaPanel.js'
 import { mountHeroCreator, animateIdleIcon } from '/web/heroCreator.js'
 import { listPersonas, onRosterChange, getPortrait, getPersona, patchPersona, setActiveHeroId } from '/web/personaStore.js'
 import { applyXp, enemyXpValue, levelProgress, xpToNext, appendEvent, statBonuses } from '/web/progression.js'
-import { getSkillIcon, getSkillArt, putSkillArt } from '/web/personaStore.js'
+import { getSkillIcon } from '/web/personaStore.js'
 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'
@@ -95,6 +94,16 @@ function whenEl(id, cb) {
   })
 })()
 
+// Paint a forged skill's icon into a square box, or a spinner if its image is still generating in
+// the background (iconPending). Shared by the bar slots + skill cards.
+;(function injectSkillSpin() { try { const s = document.createElement('style'); s.textContent = '@keyframes ta-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.ta-skill-spin{position:absolute;top:50%;left:50%;width:18px;height:18px;border:2px solid #2a3340;border-top-color:#c9a227;border-radius:50%;animation:ta-spin .8s linear infinite}'; document.head.appendChild(s) } catch { /* ignore */ } })()
+function paintSkillIcon(box, sk) {
+  getSkillIcon(sk.id).then((b) => {
+    if (b) { box.style.backgroundImage = `url(${URL.createObjectURL(b)})` }
+    else if (sk.iconPending) { box.style.position = box.style.position || 'relative'; const sp = document.createElement('div'); sp.className = 'ta-skill-spin'; box.appendChild(sp) }
+  })
+}
+
 // Gradio wraps each gr.HTML block in a `<div class="prose gradio-style …">` whose versioned rules
 // (.gradio-container-X .prose h2 / .prose * ; .gradio-container-X .gradio-style button) outrank the
 // shared component CSS — recolouring/resizing our headings and stripping pill/button borders +
@@ -501,7 +510,7 @@ whenEl('battle-stage', async (el) => {
     const closeDetail = () => { back.remove(); skillSheet = null }
     x.addEventListener('click', closeDetail); sh.append(x)
     const art = document.createElement('div'); art.style.cssText = 'width:100%;aspect-ratio:1/1;border-radius:12px;border:1px solid #2a3340;background:#0d1015;background-size:cover;background-position:center;margin:6px 0 12px;display:flex;align-items:center;justify-content:center;color:#5a6573;font-size:12px'
-    art.textContent = 'summoning the vision…'; sh.append(art)
+    art.textContent = sk.iconPending ? '✦ painting the scene…' : ''; sh.append(art)
     const nm = document.createElement('div'); nm.textContent = sk.name; nm.style.cssText = 'font:700 19px var(--tac-font,system-ui)'; sh.append(nm)
     const cat = document.createElement('div'); cat.textContent = `${(sk.category || '').replace('_', ' ')} · ${effectSummary(sk)}`; cat.style.cssText = 'font-size:11px;color:#9aa4b2;text-transform:uppercase;letter-spacing:.06em;margin:3px 0 10px'; sh.append(cat)
     if (sk.flavor) { const fl = document.createElement('div'); fl.textContent = sk.flavor; fl.style.cssText = 'font-style:italic;color:#c2c8d2;line-height:1.5;margin-bottom:14px'; sh.append(fl) }
@@ -518,16 +527,8 @@ whenEl('battle-stage', async (el) => {
     paintEq(); sh.append(eqBtn)
     back.addEventListener('pointerdown', (e) => { if (e.target === back) closeDetail() })
     back.append(sh); el.append(back); skillSheet = back
-    // Action illustration: serve cached, else paint once with Klein and cache.
-    getSkillArt(sk.id).then(async (b) => {
-      if (b) { art.textContent = ''; art.style.backgroundImage = `url(${URL.createObjectURL(b)})`; return }
-      try {
-        const prompt = `${currentHero.name || 'A fighter'}, a ${currentHero.unitClass || ''}, performing "${sk.name}": ${sk.flavor || ''}. dynamic action scene, motion and impact, fantasy game art, dramatic lighting`
-        const blob = await generatePortrait(prompt, { seed: sk.id + 1 })
-        if (blob) { await putSkillArt(sk.id, blob); art.textContent = ''; art.style.backgroundImage = `url(${URL.createObjectURL(blob)})` }
-        else art.textContent = 'no art'
-      } catch { art.textContent = 'art unavailable' }
-    })
+    // The skill's single image (the character performing it) — generated in the background by the forge.
+    getSkillIcon(sk.id).then((b) => { if (b) { art.textContent = ''; art.style.backgroundImage = `url(${URL.createObjectURL(b)})` } else if (!sk.iconPending) art.textContent = 'no image' })
   }
   // Chat with the current hero in a bottom-sheet (woid-context chat + per-message voice).
   let chatSheet = null
@@ -598,7 +599,7 @@ whenEl('battle-stage', async (el) => {
       const row = document.createElement('button'); row.type = 'button'
       row.style.cssText = `display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:9px;border:1px solid ${on ? '#c9a227' : '#232b36'};border-radius:10px;margin-bottom:7px;background:rgba(20,24,33,.6);color:#e8e8e8;cursor:pointer`
       const ic = document.createElement('div'); ic.style.cssText = 'width:36px;height:36px;border-radius:8px;border:1px solid #2a3340;background:#0d1015;background-size:cover;background-position:center;flex:none'
-      getSkillIcon(sk.id).then((b) => { if (b) ic.style.backgroundImage = `url(${URL.createObjectURL(b)})` })
+      paintSkillIcon(ic, sk)
       const t = document.createElement('div')
       const nm = document.createElement('div'); nm.textContent = sk.name + (on ? '  ★' : elsewhere ? '  (in another slot)' : ''); nm.style.cssText = 'font:600 13px var(--tac-font,system-ui)'
       const ef = document.createElement('div'); ef.textContent = effectSummary(sk); ef.style.cssText = 'font-size:11px;color:#9aa4b2'
@@ -694,7 +695,7 @@ whenEl('battle-stage', async (el) => {
         slot.style.cssText = `flex:1;aspect-ratio:1/1;border-radius:10px;border:1px ${sk ? 'solid #c9a227' : 'dashed #2a3340'};background:#0d1015;background-size:cover;background-position:center;cursor:pointer;position:relative;padding:0;overflow:hidden`
         const num = document.createElement('span'); num.textContent = String(i + 1); num.style.cssText = 'position:absolute;top:3px;left:5px;font-size:10px;color:#9aa4b2;text-shadow:0 1px 2px #000;z-index:1'; slot.append(num)
         if (sk) {
-          getSkillIcon(sk.id).then((b) => { if (b) slot.style.backgroundImage = `url(${URL.createObjectURL(b)})` })
+          paintSkillIcon(slot, sk)
           const cap = document.createElement('span'); cap.textContent = sk.name; cap.style.cssText = 'position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.62);padding:2px 3px;font-size:9px;color:#e8e8e8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis'; slot.append(cap)
         } else { const plus = document.createElement('span'); plus.textContent = '+'; plus.style.cssText = 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:#3a4250'; slot.append(plus) }
         slot.addEventListener('click', () => openBarPicker(i)); bar.append(slot)
@@ -706,8 +707,8 @@ whenEl('battle-stage', async (el) => {
         learned.forEach((sk) => {
           const onBar = eq.includes(sk.id)
           const row = document.createElement('div'); row.style.cssText = `display:flex;gap:10px;align-items:center;width:100%;padding:8px;border:1px solid ${onBar ? '#c9a227' : '#232b36'};border-radius:10px;margin-bottom:7px;background:rgba(20,24,33,.6)`
-          const ic = document.createElement('button'); ic.type = 'button'; ic.title = 'Details'; ic.style.cssText = 'width:40px;height:40px;border-radius:8px;border:1px solid #2a3340;background:#0d1015;background-size:cover;background-position:center;flex:none;cursor:pointer;padding:0'
-          getSkillIcon(sk.id).then((b) => { if (b) ic.style.backgroundImage = `url(${URL.createObjectURL(b)})` })
+          const ic = document.createElement('button'); ic.type = 'button'; ic.title = 'Details'; ic.style.cssText = 'position:relative;width:40px;height:40px;border-radius:8px;border:1px solid #2a3340;background:#0d1015;background-size:cover;background-position:center;flex:none;cursor:pointer;padding:0'
+          paintSkillIcon(ic, sk)
           ic.addEventListener('click', () => openSkillDetail(sk))
           const txt = document.createElement('button'); txt.type = 'button'; txt.style.cssText = 'flex:1;text-align:left;background:none;border:none;color:#e8e8e8;cursor:pointer;padding:0'
           const nm = document.createElement('div'); nm.textContent = sk.name; nm.style.cssText = 'font:600 13px var(--tac-font,system-ui)'
@@ -771,7 +772,7 @@ whenEl('battle-stage', async (el) => {
     if (sheetOpen) updateHp(comboCtrl.getHero?.())
     if (s.player) { if (!moveAnchor) moveAnchor = { x: s.player.x, y: s.player.y }; else if (Math.hypot(s.player.x - moveAnchor.x, s.player.y - moveAnchor.y) > 40) { moveAnchor = { x: s.player.x, y: s.player.y }; try { tut.emit('move') } catch { /* ignore */ } } }
   })
-  onRosterChange(refreshPicker)
+  onRosterChange(() => { refreshPicker(); if (sheetOpen && currentHero?.id) { currentHero = getPersona(currentHero.id) || currentHero; renderSheet() } })
   // First-run guided tour (skippable, persisted). Kicks off shortly after the Game mounts.
   if (tut.shouldAutoStart()) setTimeout(() => tut.startOrResume(), 900)
 })