From 78e9e64deec7341e90cbaf7899e5b016dde78269 Mon Sep 17 00:00:00 2001
From: w1n5t0n <w1n5t0n@lnfinitemonkeys.org>
Date: Fri, 3 Apr 2026 18:30:20 +0100
Subject: [PATCH] fix(playground): move engine switcher to synth drawer, fix
 output mode labels

- Engine switcher now lives in the Synth drawer (was incorrectly in NISPS params drawer)
- Params drawer renamed to "NISPS" (it's for ML engine tuning, not synth engine selection)
- Output mode button says "Synth" (generic) not "C15 Shaper-Feedback" (engine-specific)
- Dock icon for params drawer now labelled "NISPS" with correct tooltip
---
 playground/a-immersive.html | 11 ++++++-----
 playground/js/a-app.js      |  6 +++---
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/playground/a-immersive.html b/playground/a-immersive.html
index cf89b52..b85022d 100644
--- a/playground/a-immersive.html
+++ b/playground/a-immersive.html
@@ -158,11 +158,11 @@
       </svg>
       <span class="dock-label">Synth</span>
     </button>
-    <button class="dock-icon" data-drawer="params" title="Engine parameters">
+    <button class="dock-icon" data-drawer="params" title="NISPS ML parameters">
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
         <circle cx="8" cy="8" r="3"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.05 3.05l1.41 1.41M11.54 11.54l1.41 1.41M3.05 12.95l1.41-1.41M11.54 4.46l1.41-1.41"/>
       </svg>
-      <span class="dock-label">Engine</span>
+      <span class="dock-label">NISPS</span>
     </button>
     <button class="dock-icon" data-drawer="eoc" title="Effects Chain" aria-label="Effects Chain">
       <svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor">
@@ -227,7 +227,7 @@
           <span class="mode-label">Output</span>
           <div class="pill-toggle pill-toggle-sm" id="output-toggle-float">
             <button class="pill-opt active" data-mode="visual">Visual</button>
-            <button class="pill-opt" data-mode="synth" id="synth-mode-btn">C15 Shaper-Feedback</button>
+            <button class="pill-opt" data-mode="synth" id="synth-mode-btn">Synth</button>
             <button class="pill-opt" data-mode="midi-cc">MIDI CC</button>
             <button class="pill-opt" data-mode="audio-canvas">Audio Canvas</button>
           </div>
@@ -245,6 +245,7 @@
         <button class="drawer-close" data-drawer="synth">&times;</button>
       </div>
       <div class="drawer-body" id="synth-panel">
+        <div id="synth-engine-switcher"></div>
         <div class="synth-row">
           <button class="action-btn accent" id="synth-start">Start Audio</button>
           <span class="synth-status" id="synth-status">Stopped</span>
@@ -317,10 +318,10 @@
       </div>
     </div>
 
-    <!-- Params drawer (NISPS engine tuning) -->
+    <!-- Params drawer (NISPS ML engine tuning) -->
     <div class="drawer hidden" id="drawer-params" data-drawer="params">
       <div class="drawer-header">
-        <span>Engine</span>
+        <span>NISPS</span>
         <button class="drawer-close" data-drawer="params">&times;</button>
       </div>
       <div class="drawer-body">
diff --git a/playground/js/a-app.js b/playground/js/a-app.js
index 2586f53..fc053ef 100644
--- a/playground/js/a-app.js
+++ b/playground/js/a-app.js
@@ -924,8 +924,8 @@ async function setActiveEngine(engine) {
   if (midiInput) midiInput.setEngine(engine);
   const btn = document.getElementById('synth-mode-btn');
   if (btn) btn.textContent = engine.displayName;
-  const engineDockBtn = document.querySelector('[data-drawer="params"]');
-  if (engineDockBtn) engineDockBtn.title = `Engine: ${engine.displayName}`;
+  const synthDockBtn = document.querySelector('[data-drawer="synth"]');
+  if (synthDockBtn) synthDockBtn.title = `Synth: ${engine.displayName}`;
   EngineSwitcher.setActive(engine.id);
   EngineSwitcher.setLoading(engine.id, false);
   await resizeMLP(totalOutputCount());
@@ -1097,7 +1097,7 @@ async function init() {
       description: '4-operator FM with continuous routing matrix. Algorithm emerges from exploration.',
     },
   ];
-  const engineSwitcherEl = document.getElementById('engine-params');
+  const engineSwitcherEl = document.getElementById('synth-engine-switcher');
   if (engineSwitcherEl) {
     EngineSwitcher.init(engineSwitcherEl, ENGINES, async (engineId) => {
       if (engineId === activeEngine?.id) return;