Learn & manage skills from the in-Game character sheet

Extract the forge pipeline into shared skillForge.js (forgeSkillForHero: model →
validate → Klein icon → persist), used by both the Skill Forge tab and the character
sheet. On the Game character sheet add: a 3-slot Skill Bar (tap a slot to assign/clear
a learned skill), an inline ★ equip toggle on each forged-skill card, and a '⚒ Forge a
new skill' button that forges for the active hero in a bottom-sheet. Verified end-to-end
(real forge produced a valid skill + Klein icon; slot picker + equip persist).

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

web/skillForge.js

@@ -0,0 +1,96 @@
+// Shared Skill-Forge pipeline — used by BOTH the Skill Forge tab and the in-Game character
+// sheet so a hero can learn skills from either place. Streams a skill from the coding model,
+// 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 { stripThinkFinal } from '/web/personaPrompts.js'
+import { validateSkill, SAFE_OPS, SAFE_CONDITIONS } from '/web/skillSchema.js'
+import { generatePortrait } from '/web/imagen.js'
+import { getPersona, patchPersona, putSkillIcon } from '/web/personaStore.js'
+import { appendEvent } from '/web/progression.js'
+
+export const FORGE_SYSTEM = [
+  'You are the Skill Forge for a fantasy auto-battler. Author ONE combat skill for a specific',
+  'hero, tailored to their class, story and personality. Respond with a SINGLE fenced ```json',
+  'block (no prose outside it) of the form:',
+  '{"name": string, "flavor": string (one vivid in-world sentence),',
+  '"category": "melee_attack"|"ranged_attack"|"spell"|"shout"|"stance",',
+  '"target": "foe"|"self"|"ally"|"area", "cost": int, "recharge": int seconds,',
+  '"effects": [ {"op": <op>, ...args} ] }.',
+  `Allowed effect ops: ${SAFE_OPS.join(', ')}.`,
+  'damage/bonus_damage/heal/life_steal take {"amount": int}. apply_condition takes',
+  `{"condition": one of [${SAFE_CONDITIONS.join(', ')}], "duration": int seconds}.`,
+  'knockdown takes {"duration": int}. interrupt and lose_all_adrenaline take no args.',
+  'Use 1-3 effects. Keep it concise, flavourful and balanced. Output ONLY the json block.',
+].join(' ')
+
+export function personaBlock(p) {
+  if (!p) return ''
+  return [
+    `Hero: ${p.name || 'Unnamed'}${p.unitClass ? ` — ${p.unitClass}` : ''}`,
+    p.about ? `About: ${p.about}` : '',
+    p.personality ? `Personality: ${p.personality}` : '',
+    p.specialty ? `Specialty: ${p.specialty}` : '',
+  ].filter(Boolean).join('\n')
+}
+
+export function parseSkillJson(text) {
+  const fence = text.match(/```(?:json)?\s*([\s\S]*?)```/i)
+  const body = fence ? fence[1] : text
+  const a = body.indexOf('{'), b = body.lastIndexOf('}')
+  if (a < 0 || b <= a) return null
+  try { return JSON.parse(body.slice(a, b + 1)) } catch { return null }
+}
+
+// Stream one skill from the coding model and validate it. `onToken` streams raw text for a
+// debug view; `extra` lets a retry feed validation errors back in.
+async function generateOnce(p, ask, { think = false, onToken, extra = '' } = {}) {
+  const user = `${personaBlock(p)}\n\nSkill to create: ${ask}${extra}`
+  let raw = ''
+  await streamCoding(FORGE_SYSTEM, user, {
+    maxTokens: 512, temperature: 0.6, think,
+    onToken: (t) => { raw += t; onToken && onToken(raw) },
+  })
+  const clean = stripThinkFinal(raw)
+  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`
+}
+
+// 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.
+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…')
+  let { v } = await generateOnce(p, ask, { think, onToken })
+  if (!v.ok) {
+    onStatus && onStatus('refining (invalid, 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
+  onStatus && onStatus('painting icon…')
+  let iconBlob = null
+  try {
+    iconBlob = await generatePortrait(iconPrompt(p, skill), { seed: skill.id })
+    if (iconBlob) await putSkillIcon(skill.id, iconBlob)
+  } catch { /* art is optional */ }
+
+  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 }
+}

web/skillForgePanel.js

@@ -1,14 +1,10 @@
-// Skill Forge — the Sandbox surface that uses the Coding Model to author a REAL, engine-
-// resolvable combat skill for a chosen hero. Pick a recruited persona, describe the skill,
-// and the coding model writes a CB skill object (validated + clamped by skillSchema.js) that
-// the battle engine can actually run. The forge then paints a Klein icon, saves the skill onto
-// the hero (customSkills + learnedSkills), and shows a card you can view on the character page.
-import { streamCoding, currentCodingModel, onCodingModelChange } from '/web/codingModel.js'
-import { listPersonas, getPersona, onRosterChange, patchPersona, putSkillIcon, getSkillIcon } from '/web/personaStore.js'
-import { stripThink, stripThinkFinal } from '/web/personaPrompts.js'
-import { validateSkill, effectSummary, SAFE_OPS, SAFE_CONDITIONS } from '/web/skillSchema.js'
-import { generatePortrait } from '/web/imagen.js'
-import { appendEvent } from '/web/progression.js'
+// Skill Forge tab — author a REAL, engine-resolvable combat skill for a chosen hero. The forge
+// pipeline (model → validate → Klein icon → persist) lives in skillForge.js and is shared with
+// the in-Game character sheet, so a hero can learn skills from either place.
+import { currentCodingModel, onCodingModelChange } from '/web/codingModel.js'
+import { listPersonas, getPersona, onRosterChange, getSkillIcon } from '/web/personaStore.js'
+import { effectSummary } from '/web/skillSchema.js'
+import { forgeSkillForHero } from '/web/skillForge.js'
 
 function el(tag, props = {}, kids = []) {
   const n = document.createElement(tag)
@@ -22,42 +18,6 @@ function el(tag, props = {}, kids = []) {
   return n
 }
 
-// The forge contract: emit ONE fenced json skill object the engine can resolve. We constrain
-// the op + condition vocabulary to skillSchema's whitelist so the result is always runnable.
-const SYSTEM = [
-  'You are the Skill Forge for a fantasy auto-battler. Author ONE combat skill for a specific',
-  'hero, tailored to their class, story and personality. Respond with a SINGLE fenced ```json',
-  'block (no prose outside it) of the form:',
-  '{"name": string, "flavor": string (one vivid in-world sentence),',
-  '"category": "melee_attack"|"ranged_attack"|"spell"|"shout"|"stance",',
-  '"target": "foe"|"self"|"ally"|"area", "cost": int, "recharge": int seconds,',
-  '"effects": [ {"op": <op>, ...args} ] }.',
-  `Allowed effect ops: ${SAFE_OPS.join(', ')}.`,
-  'damage/bonus_damage/heal/life_steal take {"amount": int}. apply_condition takes',
-  `{"condition": one of [${SAFE_CONDITIONS.join(', ')}], "duration": int seconds}.`,
-  'knockdown takes {"duration": int}. interrupt and lose_all_adrenaline take no args.',
-  'Use 1-3 effects. Keep it concise, flavourful and balanced. Output ONLY the json block.',
-].join(' ')
-
-function personaBlock(p) {
-  if (!p) return ''
-  return [
-    `Hero: ${p.name || 'Unnamed'}${p.unitClass ? ` — ${p.unitClass}` : ''}`,
-    p.about ? `About: ${p.about}` : '',
-    p.personality ? `Personality: ${p.personality}` : '',
-    p.specialty ? `Specialty: ${p.specialty}` : '',
-  ].filter(Boolean).join('\n')
-}
-
-// Pull the first JSON object out of model text (fenced or bare).
-function parseSkillJson(text) {
-  const fence = text.match(/```(?:json)?\s*([\s\S]*?)```/i)
-  const body = fence ? fence[1] : text
-  const a = body.indexOf('{'), b = body.lastIndexOf('}')
-  if (a < 0 || b <= a) return null
-  try { return JSON.parse(body.slice(a, b + 1)) } catch { return null }
-}
-
 export function mountSkillForgePanel(host) {
   const sel = el('select', { class: 'persona-input skillforge-hero' })
   const req = el('textarea', { class: 'persona-prompt-edit skillforge-req', rows: 4,
@@ -68,29 +28,17 @@ export function mountSkillForgePanel(host) {
   const empty = el('div', { class: 'persona-roster-empty' },
     'No heroes yet — recruit one in the Personas tab, then come back to forge its skills.')
 
-  const thinkChk = el('input', { type: 'checkbox', class: 'skillforge-think' })
-  const thinkLabel = el('label', { class: 'persona-label skillforge-think-label' }, [thinkChk, ' show model thinking'])
-  const dbgEl = el('pre', { class: 'persona-think' })
-  const copyBtn = el('button', { class: 'persona-copy', type: 'button',
-    onclick: () => navigator.clipboard?.writeText(dbgEl.textContent || '') }, 'copy')
-  const dbgWrap = el('details', { class: 'persona-think-wrap' }, [el('summary', {}, 'model thinking / raw'), copyBtn, dbgEl])
-  dbgWrap.style.display = thinkChk.checked ? '' : 'none'
-
   const controls = el('aside', { class: 'persona-controls skillforge' }, [
     el('div', { class: 'persona-sec' }, [el('div', { class: 'persona-sec-title' }, 'Skill Forge'), el('span')]),
     el('label', { class: 'persona-label' }, 'Hero'), sel,
     empty,
     el('label', { class: 'persona-label' }, 'Skill request'), req,
-    thinkLabel,
     el('div', { class: 'persona-prompt-actions' }, [btn]),
     status,
     card,
-    dbgWrap,
   ])
   host.append(controls)
 
-  thinkChk.addEventListener('change', () => { dbgWrap.style.display = thinkChk.checked ? '' : 'none' })
-
   function refreshHeroes() {
     const people = listPersonas()
     const prev = sel.value
@@ -103,27 +51,12 @@ export function mountSkillForgePanel(host) {
   }
   function refreshStatus() { if (!status.dataset.busy) status.textContent = `Coding model: ${currentCodingModel().label}` }
 
-  // Stream the coding model once; return the validated skill (or null + reason). `extra` lets a
-  // retry feed the validation errors back to the model.
-  async function generateSkill(p, ask, showThink, extra = '') {
-    const user = `${personaBlock(p)}\n\nSkill to create: ${ask}${extra}`
-    let raw = ''
-    const { } = await streamCoding(SYSTEM, user, {
-      maxTokens: 512, temperature: 0.6, think: showThink,
-      onToken: (t) => { raw += t; if (showThink) { dbgEl.textContent = raw; dbgWrap.open = true; dbgEl.scrollTop = dbgEl.scrollHeight } },
-    })
-    const clean = stripThinkFinal(raw)
-    const parsed = parseSkillJson(clean)
-    const v = validateSkill(parsed, { persona: p })
-    return { v, clean }
-  }
-
-  function renderCard(skill, iconBlob) {
+  async function renderCard(skill) {
     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' })
-    if (iconBlob) icon.style.backgroundImage = `url(${URL.createObjectURL(iconBlob)})`
+    getSkillIcon(skill.id).then((b) => { 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)}`),
@@ -139,38 +72,12 @@ export function mountSkillForgePanel(host) {
     if (running) return
     const p = getPersona(sel.value)
     if (!p) { status.textContent = 'Pick a hero first.'; return }
-    const ask = req.value.trim()
-    if (!ask) { status.textContent = 'Describe the skill you want.'; return }
-    running = true; status.dataset.busy = '1'; btn.disabled = true
-    card.style.display = 'none'; dbgEl.textContent = ''
-    const showThink = thinkChk.checked
+    if (!req.value.trim()) { status.textContent = 'Describe the skill you want.'; return }
+    running = true; status.dataset.busy = '1'; btn.disabled = true; card.style.display = 'none'
     try {
-      status.textContent = `Forging with ${currentCodingModel().label}…`
-      let { v } = await generateSkill(p, ask, showThink)
-      if (!v.ok) {
-        status.textContent = 'Refining (invalid skill, retrying)…'
-        const fix = `\n\nYour previous attempt was invalid: ${v.errors.join('; ')}. Return ONLY a corrected json block.`
-        ;({ v } = await generateSkill(p, ask, showThink, fix))
-      }
-      if (!v.ok) { status.textContent = 'Forge failed to produce a valid skill: ' + v.errors.join('; '); return }
-      const skill = v.skill
-      // Paint the icon (best-effort; a skill without art is still learned).
-      status.textContent = 'Painting skill icon…'
-      let iconBlob = null
-      try {
-        iconBlob = await generatePortrait(
-          `fantasy game skill icon, "${skill.name}": ${skill.flavor}. ${p.unitClass || ''} ability, dramatic, centered emblem, painterly, square`,
-          { seed: skill.id })
-        if (iconBlob) await putSkillIcon(skill.id, iconBlob)
-      } catch { /* art is optional */ }
-      // Persist onto the hero.
-      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() }),
-      })
-      renderCard(skill, iconBlob)
+      const res = await forgeSkillForHero(p.id, req.value, { onStatus: (s) => { status.textContent = s } })
+      if (!res.ok) { status.textContent = 'Forge failed: ' + res.error; return }
+      await renderCard(res.skill)
       status.textContent = 'Done.'
     } catch (e) {
       status.textContent = 'Forge failed: ' + (e && e.message ? e.message : e)

web/tiny.js

@@ -21,6 +21,7 @@ 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 { forgeSkillForHero } from '/web/skillForge.js'
 import { mountDiaryPanel } from '/web/diaryPanel.js'
 import { mountSettingsPanel } from '/web/settingsPanel.js'
 import { mountSkillForgePanel } from '/web/skillForgePanel.js'
@@ -469,6 +470,80 @@ whenEl('battle-stage', async (el) => {
     back.addEventListener('pointerdown', (e) => { if (e.target === back) closeChat() })
     back.append(sh); el.append(back); chatSheet = back
   }
+  // ── Skill-bar management (equippedSkills = ordered list, max 3 = the in-combat bar) ──
+  const learnedSkills = () => { const cs = currentHero?.customSkills || {}; return (currentHero?.learnedSkills || []).map((id) => cs[id]).filter(Boolean) }
+  const writeEquipped = (eq) => { patchPersona(currentHero.id, { equippedSkills: eq.slice(0, 3) }); currentHero = getPersona(currentHero.id); renderSheet() }
+  const toggleEquip = (id) => {
+    const eq = (getPersona(currentHero.id)?.equippedSkills || []).slice()
+    if (eq.includes(id)) writeEquipped(eq.filter((x) => x !== id))
+    else if (eq.length < 3) writeEquipped([...eq, id])
+  }
+  const setSlot = (i, id) => {
+    let eq = (getPersona(currentHero.id)?.equippedSkills || []).slice()
+    if (id == null) eq.splice(i, 1)                       // clear the slot
+    else { eq = eq.filter((x) => x !== id); if (i < eq.length) eq[i] = id; else eq.push(id) } // replace / fill, no dupes
+    writeEquipped(eq)
+  }
+  // Generic bottom-sheet shell (used by the bar picker + forge form).
+  let toolSheet = null
+  const openToolSheet = (title) => {
+    toolSheet?.remove()
+    const back = document.createElement('div'); back.style.cssText = 'position:absolute;inset:0;z-index:12;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);max-height:88%;overflow-y:auto;background:#11151c;border:1px solid #2a3340;border-radius:16px 16px 0 0;padding:16px;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:10px'
+    const ttl = document.createElement('div'); ttl.textContent = title; 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 close = () => { back.remove(); toolSheet = null }
+    x.addEventListener('click', close); head.append(ttl, x); sh.append(head)
+    back.addEventListener('pointerdown', (e) => { if (e.target === back) close() })
+    back.append(sh); el.append(back); toolSheet = back
+    return { sh, close }
+  }
+  // Choose what goes in bar slot i (assign a learned skill or clear it).
+  const openBarPicker = (i) => {
+    const { sh, close } = openToolSheet(`Skill slot ${i + 1}`)
+    const eq = currentHero.equippedSkills || []
+    const skills = learnedSkills()
+    if (!skills.length) { const e = document.createElement('div'); e.textContent = 'No forged skills yet — forge one below.'; e.style.cssText = 'color:#9aa4b2;font-size:13px'; sh.append(e); return }
+    skills.forEach((sk) => {
+      const on = eq[i] === sk.id, elsewhere = eq.includes(sk.id) && !on
+      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)})` })
+      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'
+      t.append(nm, ef); row.append(ic, t)
+      row.addEventListener('click', () => { setSlot(i, sk.id); close() })
+      sh.append(row)
+    })
+    if (eq[i]) { const clr = document.createElement('button'); clr.type = 'button'; clr.textContent = 'Clear slot'; clr.style.cssText = 'width:100%;padding:10px;border-radius:10px;border:1px solid #3a2530;background:#241a1e;color:#ff8a8a;font:600 13px var(--tac-font,system-ui);cursor:pointer;margin-top:4px'; clr.addEventListener('click', () => { setSlot(i, null); close() }); sh.append(clr) }
+  }
+  // Forge a new skill for this hero, right here on the character page.
+  const openForge = () => {
+    const { sh, close } = openToolSheet(`⚒ Forge a skill for ${currentHero.name || 'this hero'}`)
+    const ta = document.createElement('textarea'); ta.rows = 3; ta.placeholder = 'describe the skill (e.g. “a whirlwind that bleeds everyone around me”)'
+    ta.style.cssText = 'width:100%;resize:vertical;background:#0d1015;border:1px solid #2a3340;border-radius:10px;color:#e8e8e8;padding:10px;font:13px var(--tac-font,system-ui);box-sizing:border-box'
+    const go = document.createElement('button'); go.type = 'button'; go.textContent = '⚒ Forge skill'
+    go.style.cssText = 'width:100%;margin-top:10px;padding:12px;border-radius:10px;border:1px solid #c9a227;background:#2a2410;color:#ffe082;font:600 14px var(--tac-font,system-ui);cursor:pointer'
+    const status = document.createElement('div'); status.style.cssText = 'color:#9aa4b2;font-size:12px;margin-top:8px;min-height:16px'
+    sh.append(ta, go, status); setTimeout(() => ta.focus(), 50)
+    let busy = false
+    go.addEventListener('click', async () => {
+      if (busy) return
+      if (!ta.value.trim()) { status.textContent = 'Describe the skill you want.'; return }
+      busy = true; go.disabled = true; ta.disabled = true
+      try {
+        const res = await forgeSkillForHero(currentHero.id, ta.value, { onStatus: (s) => { status.textContent = s + '…' } })
+        if (!res.ok) { status.textContent = 'Forge failed: ' + res.error; busy = false; go.disabled = false; ta.disabled = false; return }
+        currentHero = getPersona(currentHero.id)
+        status.textContent = `✓ Learned “${res.skill.name}”.`
+        renderSheet()                                  // reflect the new skill behind the sheet
+        setTimeout(close, 900)
+      } catch (e) { status.textContent = 'Forge failed: ' + (e && e.message ? e.message : e); busy = false; go.disabled = false; ta.disabled = false }
+    })
+  }
   const renderSheet = () => {
     sheet.innerHTML = ''
     const close = document.createElement('button'); close.type = 'button'; close.textContent = '✕'
@@ -515,26 +590,49 @@ whenEl('battle-stage', async (el) => {
       const h = document.createElement('div'); h.textContent = 'Skills'; h.style.cssText = 'font:600 10px var(--tac-font,system-ui);letter-spacing:.18em;text-transform:uppercase;color:#9aa4b2;margin:12px 0 6px'; sheet.append(h)
       skills.forEach((s, i) => { const row = document.createElement('div'); row.style.cssText = 'display:flex;gap:8px;align-items:center;padding:7px 9px;border:1px solid #232b36;border-radius:8px;margin-bottom:6px'; const n = document.createElement('span'); n.textContent = String(i + 1); n.style.cssText = 'width:18px;height:18px;border-radius:50%;background:#222a35;display:flex;align-items:center;justify-content:center;font-size:11px;color:#9aa4b2;flex:none'; const t = document.createElement('span'); t.textContent = s; row.append(n, t); sheet.append(row) })
     }
-    // ── Forged skills — tap a card for the detail sheet (action art + equip) ──
-    {
+    // ── Skill bar + forged skills: learn here, switch the 3 equipped, tap for detail ──
+    if (currentHero.id) {
+      const headerCss = 'font:600 10px var(--tac-font,system-ui);letter-spacing:.18em;text-transform:uppercase;color:#9aa4b2;margin:16px 0 6px'
+      const learned = learnedSkills()
+      const eq = currentHero.equippedSkills || []
       const cs = currentHero.customSkills || {}
-      const learned = (currentHero.learnedSkills || []).map((id) => cs[id]).filter(Boolean)
+      // Skill bar — three tappable slots = the in-combat 1/2/3 buttons.
+      const barH = document.createElement('div'); barH.textContent = 'Skill bar (tap a slot to assign)'; barH.style.cssText = headerCss; sheet.append(barH)
+      const bar = document.createElement('div'); bar.style.cssText = 'display:flex;gap:8px;margin-bottom:8px'
+      for (let i = 0; i < 3; i++) {
+        const sk = cs[eq[i]]
+        const slot = document.createElement('button'); slot.type = 'button'; slot.title = sk ? sk.name : 'Assign a skill'
+        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)})` })
+          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)
+      }
+      sheet.append(bar)
+      // Forged skills — quick ★ equip toggle + tap for the detail/action-art sheet.
       if (learned.length) {
-        const equipped = new Set(currentHero.equippedSkills || [])
-        const h = document.createElement('div'); h.textContent = `Forged skills (${equipped.size}/3 equipped)`; h.style.cssText = 'font:600 10px var(--tac-font,system-ui);letter-spacing:.18em;text-transform:uppercase;color:#9aa4b2;margin:16px 0 6px'; sheet.append(h)
+        const lh = document.createElement('div'); lh.textContent = 'Forged skills'; lh.style.cssText = headerCss; sheet.append(lh)
         learned.forEach((sk) => {
-          const row = document.createElement('button'); row.type = 'button'
-          row.style.cssText = `display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:8px;border:1px solid ${equipped.has(sk.id) ? '#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:40px;height:40px;border-radius:8px;border:1px solid #2a3340;background:#0d1015;background-size:cover;background-position:center;flex:none'
+          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 txt = document.createElement('div')
-          const nm = document.createElement('div'); nm.textContent = sk.name + (equipped.has(sk.id) ? '  ★' : ''); nm.style.cssText = 'font:600 13px var(--tac-font,system-ui)'
+          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)'
           const ef = document.createElement('div'); ef.textContent = effectSummary(sk); ef.style.cssText = 'font-size:11px;color:#9aa4b2'
-          txt.append(nm, ef); row.append(ic, txt)
-          row.addEventListener('click', () => openSkillDetail(sk))
-          sheet.append(row)
+          txt.append(nm, ef); txt.addEventListener('click', () => openSkillDetail(sk))
+          const eqb = document.createElement('button'); eqb.type = 'button'; eqb.textContent = onBar ? '★' : '☆'; eqb.title = onBar ? 'Remove from bar' : (eq.length >= 3 ? 'Bar full' : 'Add to bar')
+          eqb.style.cssText = `flex:none;width:34px;height:34px;border-radius:8px;border:1px solid ${onBar ? '#c9a227' : '#2a3340'};background:${onBar ? '#2a2410' : '#1a2230'};color:${onBar ? '#ffe082' : '#9aa4b2'};font-size:15px;cursor:pointer`
+          eqb.addEventListener('click', () => toggleEquip(sk.id))
+          row.append(ic, txt, eqb); sheet.append(row)
         })
       }
+      const forgeBtn = document.createElement('button'); forgeBtn.type = 'button'; forgeBtn.textContent = '⚒ Forge a new skill'
+      forgeBtn.style.cssText = 'width:100%;padding:11px;border-radius:10px;border:1px solid #c9a227;background:#2a2410;color:#ffe082;font:600 13px var(--tac-font,system-ui);cursor:pointer;margin:6px 0 12px'
+      forgeBtn.addEventListener('click', openForge); sheet.append(forgeBtn)
     }
     if (currentHero.about) { const a = document.createElement('div'); a.textContent = currentHero.about; a.style.cssText = 'color:#c2c8d2;margin:12px 0;line-height:1.45'; sheet.append(a) }
     const sw = document.createElement('button'); sw.type = 'button'; sw.textContent = '⇄ Switch / New hero'