bun install in dockerfile and reload page when visualizer switching to avoid issues

.devcontainer/devcontainer.json

@@ -14,7 +14,7 @@
         }
     },
 
-    "postCreateCommand": "bun --version && code --version",
+    "postCreateCommand": "bun install",
 
     "remoteEnv": {
         "SHELL": "/usr/bin/fish"

js/visualizer.js

@@ -91,9 +91,7 @@ export class Visualizer {
 
         // Clone the canvas to get a fresh context when switching context types,
         // or when the previous preset grabbed its own context (managesOwnContext)
-        const needsClone =
+        const needsClone = (this.ctx && currentType !== type) || (!this.ctx && currentType && currentType !== type);
-            (this.ctx && currentType !== type) ||
-            (!this.ctx && currentType && currentType !== type);
 
         if (needsClone) {
             const parent = this.canvas.parentElement;
@@ -287,19 +285,30 @@ export class Visualizer {
     setPreset(key) {
         if (!this.presets[key]) return;
 
+        const webglPresets = ['butterchurn', 'kawarp'];
+        const fromPreset = this.activePresetKey;
+        const toPreset = key;
+
+        if (webglPresets.includes(fromPreset) && webglPresets.includes(toPreset) && fromPreset !== toPreset) {
+            visualizerSettings.setPreset(key);
+            window.location.reload();
+            return;
+        }
+
         if (this.activePreset?.destroy) {
             this.activePreset.destroy();
         }
 
+        this._currentContextType = undefined;
+        this.ctx = null;
+
         this.activePresetKey = key;
         this.initContext();
         this.resize();
 
-        // Initialize presets that need lazy init (Butterchurn, Kawarp)
         if (this.presets[key].lazyInit && this.audioContext) {
             const sourceNode = audioContextManager.getSourceNode();
             this.presets[key].lazyInit(this.canvas, this.audioContext, sourceNode).then(() => {
-                // Re-resize after async init so framebuffers match canvas size
                 this.resize();
             });
         }

js/visualizers/butterchurn.js

@@ -493,15 +493,22 @@ export class ButterchurnPreset {
      * Cleanup resources
      */
     destroy() {
-        // Unregister graph change listener
         if (this._unregisterGraphChange) {
             this._unregisterGraphChange();
             this._unregisterGraphChange = null;
         }
 
-        if (this.visualizer) {
+        if (this.visualizer && this.canvas) {
+            const gl = this.canvas.getContext('webgl2') || this.canvas.getContext('webgl');
+            if (gl) {
+                const ext = gl.getExtension('WEBGL_lose_context');
+                if (ext) {
+                    ext.loseContext();
+                }
+            }
             this.visualizer = null;
         }
+
         this.isInitialized = false;
         this.canvas = null;
         this.audioContext = null;