Live-apply equipped-skill changes to the on-field hero's bar

writeEquipped now calls comboCtrl.setHeroSkills(resolveEquipped(hero)) so assigning/
clearing a skill bar slot (or the ★ toggle) updates the live combat bar + buttons
immediately, not just on next spawn. Rebuilt comboBattler bundle.

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

web/comboBattler.js

@@ -6157,6 +6157,38 @@ function mountComboBattler(pixi, host, opts = {}) {
       window.removeEventListener("pointerup", onUp);
     };
   }
+  let skillRowEl = null;
+  function roundBtn(label, on, big) {
+    const b = document.createElement("button");
+    b.textContent = label;
+    const s = big ? 70 : 46;
+    b.style.cssText = `pointer-events:auto;touch-action:manipulation;width:${s}px;height:${s}px;border-radius:50%;border:1px solid #20262e;background:rgba(20,24,33,.78);color:#e8e8e8;font:600 ${big ? 22 : 15}px monospace;cursor:pointer`;
+    b.addEventListener("pointerdown", (ev) => {
+      ev.preventDefault();
+      on();
+    });
+    return b;
+  }
+  function rebuildSkillButtons() {
+    if (!skillRowEl) return;
+    skillRowEl.replaceChildren();
+    const bar = pa()?.bar || [];
+    bar.forEach((s, i) => {
+      const b = roundBtn(String(i + 1), () => {
+        req.skill = i + 1;
+      }, false);
+      b.title = s.name || "";
+      skillRowEl.appendChild(b);
+    });
+    skillRowEl.style.display = bar.length ? "flex" : "none";
+  }
+  function setHeroSkills(skills) {
+    const p = pa();
+    if (!p) return;
+    p.bar = (skills || []).map((s) => s && typeof s === "object" ? s : skillById(s)).filter(Boolean);
+    rebuildSkillButtons();
+    emit();
+  }
   function buildControls() {
     const wrap = document.createElement("div");
     wrap.style.cssText = "position:absolute;inset:0;pointer-events:none;z-index:5;font-family:monospace";
@@ -6214,29 +6246,12 @@ function mountComboBattler(pixi, host, opts = {}) {
     wrap.appendChild(base);
     const pad = document.createElement("div");
     pad.style.cssText = "position:absolute;right:20px;bottom:20px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none";
-    const mk = (label, on, big) => {
-      const b = document.createElement("button");
-      b.textContent = label;
-      const s = big ? 70 : 46;
-      b.style.cssText = `pointer-events:auto;touch-action:manipulation;width:${s}px;height:${s}px;border-radius:50%;border:1px solid #20262e;background:rgba(20,24,33,.78);color:#e8e8e8;font:600 ${big ? 22 : 15}px monospace;cursor:pointer`;
-      b.addEventListener("pointerdown", (ev) => {
-        ev.preventDefault();
-        on();
-      });
-      return b;
-    };
     const skills = document.createElement("div");
     skills.style.cssText = "display:flex;gap:8px;align-items:flex-end";
-    const names = (pa()?.bar || []).map((s) => s.name);
-    names.forEach((nm, i) => {
-      const b = mk(String(i + 1), () => {
-        req.skill = i + 1;
-      }, false);
-      b.title = nm || "";
-      skills.appendChild(b);
-    });
-    if (names.length) pad.appendChild(skills);
-    pad.appendChild(mk("\u2694", () => {
+    skillRowEl = skills;
+    rebuildSkillButtons();
+    pad.appendChild(skills);
+    pad.appendChild(roundBtn("\u2694", () => {
       req.attack = true;
     }, true));
     wrap.appendChild(pad);
@@ -6422,6 +6437,7 @@ function mountComboBattler(pixi, host, opts = {}) {
     } catch {
     }
     controlsEl = null;
+    skillRowEl = null;
     try {
       markers?.destroy();
     } catch {
@@ -6649,7 +6665,7 @@ function mountComboBattler(pixi, host, opts = {}) {
     const p = pa();
     return p ? { name: p.name, profession: p.profession, hp: Math.round(p.hp), maxHp: Math.round(p.maxHp), skills: (p.bar || []).map((s) => s.name) } : null;
   }
-  const ctrl = { ready, selectHero, getSpawnWorld, getSnapshot, getHero, heroEmote, resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
+  const ctrl = { ready, selectHero, getSpawnWorld, getSnapshot, getHero, heroEmote, setHeroSkills, resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
   if (typeof window !== "undefined") {
     window.__comboSnap = () => ctrl.getSnapshot();
     window.__combo = ctrl;

web/tiny.js

@@ -472,7 +472,12 @@ whenEl('battle-stage', async (el) => {
   }
   // ── 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 writeEquipped = (eq) => {
+    patchPersona(currentHero.id, { equippedSkills: eq.slice(0, 3) })
+    currentHero = getPersona(currentHero.id)
+    comboCtrl?.setHeroSkills?.(resolveEquipped(currentHero)) // live-update the on-field hero's bar + buttons
+    renderSheet()
+  }
   const toggleEquip = (id) => {
     const eq = (getPersona(currentHero.id)?.equippedSkills || []).slice()
     if (eq.includes(id)) writeEquipped(eq.filter((x) => x !== id))