Synchronize realtime data with display frames

www/main.js

@@ -23,7 +23,7 @@ try {
 import { CONFIG, applyRtaBpoSelection, loadConfig, saveConfig, loadLayoutPreset } from './core/config.js';
 import * as utils from './core/utils.js';
 import { meterFacade, registerMeter } from './core/registry.js';
-import { initAudio, audioLost, reloadAudio } from './core/audio.js';
+import { initAudio, audioLost, reloadAudio, flushPendingPhoenixData } from './core/audio.js';
 import { createScreensaver } from './core/screensaver.js';
 
 // Views
@@ -2675,6 +2675,10 @@ async function maybeRecoverAudio(reason) {
 
 async function loop(now){
   const elapsed = now - lastFrameTime;
+  // Apply all newest transport states once, immediately before this display
+  // frame reads them. WebSocket callbacks only buffer; this is the sole
+  // presentation pump for metrics, visuals and spectrogram data.
+  await flushPendingPhoenixData(env, CONFIG);
   const audioOk = env.audio.alive && !audioLost(env);
   const renderStyle = getRenderableStyle();
   if (processingProfileDirty || appliedProcessingProfileView !== renderStyle) {