Tool filter list in both pages will include Skin Editor even when current metadata rows don’t emit it.

Author: DavidQ

games/index.render.js

@@ -258,6 +258,11 @@ function buildRows(metadata, pinnedSet, toolLabelMap, toolRegistryMap) {
   ).entries()]
     .map(([value, label]) => ({ value, label }))
     .sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
+  const skinEditorLabel = toolLabelMap.get("skin-editor");
+  if (skinEditorLabel && !tools.some((entry) => entry.value === "skin-editor")) {
+    tools.push({ value: "skin-editor", label: skinEditorLabel });
+    tools.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
+  }
   const tags = [...new Set(rows.flatMap((row) => row.tags))].sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));
   return { rows, levels, classes, tools, tags };
 }

samples/index.render.js

@@ -229,6 +229,11 @@ function buildSampleRows(metadata, pinnedSet, toolLabelMap, toolRegistryMap) {
   ).entries()]
     .map(([value, label]) => ({ value, label }))
     .sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
+  const skinEditorLabel = toolLabelMap.get("skin-editor");
+  if (skinEditorLabel && !tools.some((entry) => entry.value === "skin-editor")) {
+    tools.push({ value: "skin-editor", label: skinEditorLabel });
+    tools.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
+  }
   const tags = [...new Set(sampleRows.flatMap((sample) => sample.tags))].sort();
 
   return { sampleRows, phases, phaseOptions, classes, tools, tags, phaseInfoMap };

tools/Skin Editor/index.html

@@ -21,10 +21,6 @@
   <div class="debug-tool-shell app-shell">
     <section class="panel debug-tool-panel">
       <div class="debug-tool-actions">
-        <label class="debug-tool-label" for="skinEditorGameSelect">
-          Game
-          <select id="skinEditorGameSelect" class="debug-tool-field"></select>
-        </label>
         <button type="button" id="skinEditorLoadButton" class="debug-tool-control">Load Active Skin</button>
         <button type="button" id="skinEditorSaveOverrideButton" class="debug-tool-control">Apply Skin Override</button>
         <button type="button" id="skinEditorClearOverrideButton" class="debug-tool-control">Clear Override</button>
@@ -44,7 +40,7 @@ <h3>Skin JSON Input</h3>
       </section>
       <section class="panel debug-tool-panel">
         <h3>Skin Summary</h3>
-        <pre id="skinEditorSummary" class="debug-tool-readout">Select a game to load its active skin payload.</pre>
+        <pre id="skinEditorSummary" class="debug-tool-readout">Load active skin to inspect its payload.</pre>
       </section>
     </section>
   </div>

tools/Skin Editor/main.js

@@ -38,7 +38,6 @@ const GAME_OPTIONS = Object.freeze([
 ]);
 
 const refs = {
-  gameSelect: document.getElementById("skinEditorGameSelect"),
   loadButton: document.getElementById("skinEditorLoadButton"),
   saveOverrideButton: document.getElementById("skinEditorSaveOverrideButton"),
   clearOverrideButton: document.getElementById("skinEditorClearOverrideButton"),
@@ -52,6 +51,7 @@ const refs = {
 };
 
 const state = {
+  activeGameId: "",
   presetSkinPath: "",
   presetSkin: null
 };
@@ -83,10 +83,13 @@ function getGameOptionById(gameId) {
 }
 
 function getSelectedGameOption() {
-  if (!(refs.gameSelect instanceof HTMLSelectElement)) {
-    return null;
-  }
-  return getGameOptionById(refs.gameSelect.value);
+  return getGameOptionById(state.activeGameId) || GAME_OPTIONS[0] || null;
+}
+
+function resolveActiveGameOption(initialGameId = "") {
+  const selected = getGameOptionById(initialGameId) || GAME_OPTIONS[0] || null;
+  state.activeGameId = selected ? selected.id : "";
+  return selected;
 }
 
 function setStatus(message) {
@@ -188,6 +191,7 @@ async function loadActiveSkinForSelectedGame() {
 
   const shouldUsePreset = state.presetSkin
     && normalizeText(state.presetSkin.gameId).toLowerCase() === game.id.toLowerCase();
+  const skinSource = shouldUsePreset ? "preset" : result.source;
   const loadedSkin = shouldUsePreset
     ? buildNormalizedSkinDocument(game, state.presetSkin)
     : buildNormalizedSkinDocument(game, result.skin);
@@ -198,7 +202,7 @@ async function loadActiveSkinForSelectedGame() {
   if (refs.input instanceof HTMLTextAreaElement) {
     refs.input.value = toPrettyJson(loadedSkin);
   }
-  setSummary(formatSummary(game, state.presetSkin ? "preset" : result.source, loadedSkin));
+  setSummary(formatSummary(game, skinSource, loadedSkin));
   setStatus(`Loaded active skin for ${game.label}.`);
 }
 
@@ -281,18 +285,6 @@ async function importSkinJsonFromFile(file) {
   setStatus("Imported skin JSON. Review and click Apply Skin Override.");
 }
 
-function populateGameSelect(initialGameId = "") {
-  if (!(refs.gameSelect instanceof HTMLSelectElement)) {
-    return;
-  }
-  refs.gameSelect.innerHTML = GAME_OPTIONS
-    .map((game) => `<option value="${game.id}">${game.label}</option>`)
-    .join("");
-
-  const selected = getGameOptionById(initialGameId) || GAME_OPTIONS[0];
-  refs.gameSelect.value = selected.id;
-}
-
 function extractPresetPayload(rawPreset) {
   if (!rawPreset || typeof rawPreset !== "object") {
     return {};
@@ -363,16 +355,11 @@ function bindEvents() {
     }
     input.value = "";
   });
-  refs.gameSelect?.addEventListener("change", () => {
-    state.presetSkin = null;
-    state.presetSkinPath = "";
-    void loadActiveSkinForSelectedGame();
-  });
 }
 
 async function bootSkinEditor() {
   const { gameId, presetLoaded } = await loadPresetFromQuery();
-  populateGameSelect(gameId);
+  resolveActiveGameOption(gameId);
   bindEvents();
   await loadActiveSkinForSelectedGame();
   if (presetLoaded) {