Auto VJ: a director that adapts the visuals to the playing track in real time

The audio engine now tracks musical features: fast/slow energy EMAs, BPM
(median of beat intervals), a quiet/groove/peak mood with hysteresis, and
drop detection (fast energy diverging from slow right after a lull). An
output-side director, toggled from the control UI, switches presets every
16 beats (or ~14s without beats) and immediately on a drop, drawing from
mood-matched family pools (scenic for quiet, fluid/geometry for groove,
fractals/tunnels/fire for peak) while avoiding recent repeats. A manual
effect pick takes over and turns the director off.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/control.js

@@ -16,6 +16,10 @@ function applyEffect(effect) {
   renderLibrary();
 }
 
+// Auto VJ: the output-side director picks presets in time with the music.
+let autoVjOn = false;
+$('#auto-vj').addEventListener('click', () => send({ type: 'autoVj', on: !autoVjOn }));
+
 // --- Library browser (hundreds of presets, filterable) ---
 const familySel = $('#effect-family');
 EFFECTS.families.forEach((name, i) => {
@@ -1322,6 +1326,14 @@ window.addEventListener('keydown', (e) => {
 // ---------------------------------------------------------------- reports in
 djv.onReport((m) => {
   switch (m.type) {
+    case 'autoVj':
+      autoVjOn = !!m.on;
+      $('#auto-vj').classList.toggle('vj-on', autoVjOn);
+      $('#auto-vj').textContent = autoVjOn ? '🤖 Auto VJ ●' : '🤖 Auto VJ';
+      if (autoVjOn && m.name) {
+        $('#scene-name').textContent = m.name + (m.bpm ? ' · ' + m.bpm + ' BPM' : '');
+      }
+      break;
     case 'devices': {
       const sel = $('#device-select');
       const cur = sel.value;