Skill icons: show the spinner while painting, not a stale reused-id icon

Forged skill ids live in a reused 9000+ band, so getSkillIcon(id) could return a
PREVIOUS skill's art for a brand-new pending one — the loading spinner never
showed; the old icon did. Two layers of fix:
- paintSkillIcon / skill detail / forge card now check iconPending FIRST and show
the spinner (clearing any background image), only fetching the stored icon once
it's no longer pending.
- forgeSkillForHero deletes any existing icon for the (reused) id up front, so the
store starts clean — new delSkillIcon() in personaStore.

Also: Replay tour button on the hero-selection screen (only when no hero is
picked yet) → tut.reset() restarts the guided tour.

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

web/personaStore.js

@@ -176,6 +176,7 @@ export const getPortrait = (id) => _get(PSTORE, id)
 // Skill media is keyed by skillId; chat audio by message id.
 export const putSkillIcon = (skillId, blob) => _put(ICONS, skillId, blob)
 export const getSkillIcon = (skillId) => _get(ICONS, skillId)
+export const delSkillIcon = (skillId) => _del(ICONS, skillId)
 export const putSkillArt = (skillId, blob) => _put(ART, skillId, blob)
 export const getSkillArt = (skillId) => _get(ART, skillId)
 export const putChatAudio = (msgId, blob) => _put(CHATAUDIO, msgId, blob)

web/skillForge.js

@@ -7,7 +7,7 @@ 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, getPortrait } from '/web/personaStore.js'
+import { getPersona, patchPersona, putSkillIcon, delSkillIcon, getPortrait } from '/web/personaStore.js'
 import { appendEvent } from '/web/progression.js'
 
 export const FORGE_SYSTEM = [
@@ -103,6 +103,7 @@ export async function forgeSkillForHero(personaId, request, { onStatus, onToken,
   if (!v.ok) return { ok: false, error: v.errors.join('; ') }
 
   const skill = { ...v.skill, iconPending: true } // image paints in the background
+  try { await delSkillIcon(skill.id) } catch { /* ignore */ } // forged ids are reused — drop any old art so the spinner shows, not a stale icon
   const fresh = getPersona(p.id) || p
   patchPersona(p.id, {
     customSkills: { ...(fresh.customSkills || {}), [skill.id]: skill },

web/skillForgePanel.js

@@ -69,9 +69,8 @@ export function mountSkillForgePanel(host) {
     card.replaceChildren()
     const head = el('div', { style: 'display:flex;gap:12px;align-items:center' })
     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)
+    if (skill.iconPending) icon.append(el('div', { class: 'ta-skill-spin', title: 'painting its scene…' })) // still painting → spinner, never a stale (reused-id) icon
+    else { const b = await getSkillIcon(skill.id); if (b) icon.style.backgroundImage = `url(${URL.createObjectURL(b)})` }
     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)}`),

web/tiny.js

@@ -98,10 +98,16 @@ function whenEl(id, cb) {
 // 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) }
-  })
+  // While the scene is still painting, ALWAYS show the spinner — never a leftover icon. Forged skill
+  // ids are reused (9000+ band), so getSkillIcon(id) can return a previous skill's art for a brand-new
+  // pending one; checking iconPending first keeps that stale image from flashing in.
+  if (sk.iconPending) {
+    box.style.backgroundImage = ''
+    box.style.position = box.style.position || 'relative'
+    const sp = document.createElement('div'); sp.className = 'ta-skill-spin'; box.appendChild(sp)
+    return
+  }
+  getSkillIcon(sk.id).then((b) => { if (b) box.style.backgroundImage = `url(${URL.createObjectURL(b)})` })
 }
 
 // Gradio wraps each gr.HTML block in a `<div class="prose gradio-style …">` whose versioned rules
@@ -353,7 +359,11 @@ function buildHeroPicker(host, personas, chars, onPick, onCreate) {
   create.append(plus, clbl)
   create.addEventListener('pointerdown', (ev) => { ev.preventDefault(); ev.stopPropagation(); onCreate && onCreate() })
   row.appendChild(create)
-  bar.append(title, row); host.appendChild(bar)
+  // Replay the guided tour — only here, on the hero-selection screen (no hero picked yet).
+  const replay = document.createElement('button'); replay.type = 'button'; replay.textContent = '↻ Replay tour'
+  replay.style.cssText = 'pointer-events:auto;background:none;border:none;color:#8a93a0;font:600 11px var(--tac-font,system-ui);letter-spacing:.04em;cursor:pointer;padding:4px 8px;text-shadow:0 1px 3px #000'
+  replay.addEventListener('pointerdown', (ev) => { ev.preventDefault(); ev.stopPropagation(); try { tut.reset() } catch { /* ignore */ } })
+  bar.append(title, row, replay); host.appendChild(bar)
   return bar
 }
 // "Create a Hero" modal over the map: hosts the shared creator (heroCreator.js — stream details,
@@ -528,7 +538,8 @@ whenEl('battle-stage', async (el) => {
     back.addEventListener('pointerdown', (e) => { if (e.target === back) closeDetail() })
     back.append(sh); el.append(back); skillSheet = back
     // 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' })
+    // While pending, keep the "painting…" label and don't pull a stale (reused-id) icon from the store.
+    if (!sk.iconPending) getSkillIcon(sk.id).then((b) => { if (b) { art.textContent = ''; art.style.backgroundImage = `url(${URL.createObjectURL(b)})` } else art.textContent = 'no image' })
   }
   // Chat with the current hero in a bottom-sheet (woid-context chat + per-message voice).
   let chatSheet = null