feat: Add real-time operator level metering to the UI, driven by audio worklet output.

Author: acidsound

App.tsx

@@ -30,9 +30,15 @@ const App: React.FC = () => {
   const engineRef = useRef<DX7Engine | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const lastSyncTimeRef = useRef<number>(0);
+  const [opLevels, setOpLevels] = useState<Float32Array>(new Float32Array(6));
 
   useEffect(() => {
     engineRef.current = new DX7Engine(PRESETS[0]);
+    engineRef.current.onOpLevels((levels) => {
+      // requestAnimationFrame to throttle UI updates if needed, but react set state is already batched usually.
+      // However, 50ms updates are fine.
+      setOpLevels(levels);
+    });
   }, []);
 
   useEffect(() => {
@@ -279,7 +285,7 @@ const App: React.FC = () => {
               </div>
               <div className="flex flex-col">
                 {patch.operators.map((op, i) => (
-                  <OperatorPanel key={i + 1} index={i + 1} params={op} onChange={p => {
+                  <OperatorPanel key={i + 1} index={i + 1} params={op} level={opLevels[i]} onChange={p => {
                     const next = [...patch.operators]; next[i] = p; updatePatch({ operators: next });
                   }} />
                 ))}

components/OperatorPanel.tsx

@@ -7,6 +7,7 @@ interface OperatorPanelProps {
   key?: React.Key;
   index: number;
   params: OperatorParams;
+  level?: number;
   onChange: (newParams: OperatorParams) => void;
 }
 
@@ -39,7 +40,7 @@ const CurveIcon: React.FC<{ type: number; mirrored?: boolean }> = ({ type, mirro
   );
 };
 
-const OperatorPanel: React.FC<OperatorPanelProps> = ({ index, params, onChange }) => {
+const OperatorPanel: React.FC<OperatorPanelProps> = ({ index, params, level, onChange }) => {
   const update = (field: keyof OperatorParams, value: any) => {
     onChange({ ...params, [field]: value });
   };
@@ -86,13 +87,22 @@ const OperatorPanel: React.FC<OperatorPanelProps> = ({ index, params, onChange }
     <div className={`flex items-center border-b border-white/10 transition-all relative w-full ${isActive ? 'bg-[#1a1a1a]' : 'bg-[#0f0f0f] opacity-60'}`}>
 
       {/* Sidebar Toggle Section */}
-      <div className="flex flex-col items-center justify-center min-w-[80px] w-[80px] lg:min-w-[40px] lg:w-[40px] h-full border-r border-white/5 bg-black/40 shrink-0 z-10">
+      <div className="flex flex-col items-center justify-center min-w-[80px] w-[80px] lg:min-w-[40px] lg:w-[40px] h-full border-r border-white/5 bg-black/40 shrink-0 z-10 relative overflow-hidden">
+        
         <button
           onClick={toggleOperator}
-          className={`w-10 h-10 lg:w-7 lg:h-7 rounded-sm flex items-center justify-center border transition-all font-orbitron font-bold text-sm lg:text-[10px] active:scale-90 select-none ${isActive ? 'bg-black text-dx7-teal border-dx7-teal shadow-[0_0_15px_rgba(0,212,193,0.3)]' : 'bg-[#080808] text-gray-700 border-[#1a1a1a]'}`}
+          className={`relative z-10 w-10 h-10 lg:w-7 lg:h-7 rounded-sm flex items-center justify-center border transition-all font-orbitron font-bold text-sm lg:text-[10px] active:scale-90 select-none ${isActive ? 'bg-black text-dx7-teal border-dx7-teal shadow-[0_0_15px_rgba(0,212,193,0.3)]' : 'bg-[#080808] text-gray-700 border-[#1a1a1a]'}`}
         >
           {index}
         </button>
+
+        {/* High Visibility Level Meter (Right Edge) */}
+        <div className="absolute right-0 top-0 bottom-0 w-[3px] bg-black/50">
+           <div 
+             className="absolute bottom-0 left-0 right-0 bg-dx7-teal shadow-[0_0_8px_#00d4c1] transition-all duration-75 ease-out" 
+             style={{ height: `${Math.min(100, (level || 0) * 150)}%` }} // Increased sensitivity (1.5x)
+           />
+        </div>
       </div>
 
       {/* Control Surface */}

public/dx7-processor.js

@@ -440,6 +440,7 @@ class DX7Processor extends AudioWorkletProcessor {
         this.sustain = false;
         this.lfo = null;
         this.algorithms = null; // Received via message
+        this.counter = 0; // For metering timing
 
         this.port.onmessage = e => {
             const { type, data, algorithms } = e.data;
@@ -500,6 +501,21 @@ class DX7Processor extends AudioWorkletProcessor {
             }
             outL[i] = l; outR[i] = r;
         }
+
+        // Metering: Send operator levels every ~46ms (2048 samples)
+        if (this.counter % 2048 === 0) {
+            const levels = new Float32Array(6);
+            // Find max level for each operator across all active voices
+            for (const v of this.voices) {
+                for (let op = 0; op < 6; op++) {
+                    const val = Math.abs(v.opOutputs[op]);
+                    if (val > levels[op]) levels[op] = val;
+                }
+            }
+            this.port.postMessage({ type: 'opLevels', data: levels });
+        }
+        this.counter += outL.length;
+
         return true;
     }
 }

services/engine.ts

@@ -19,15 +19,21 @@ export class DX7Engine {
         alert(msg); throw new Error(msg);
       }
 
-      // Use relative path for better compatibility
-      await this.context.audioWorklet.addModule('dx7-processor.js');
+      // Use relative path with cache busting
+      await this.context.audioWorklet.addModule(`dx7-processor.js?v=${Date.now()}`);
 
       this.node = new AudioWorkletNode(this.context, 'dx7-processor', {
         outputChannelCount: [2],
         numberOfInputs: 0,
         numberOfOutputs: 1
       });
 
+      this.node.port.onmessage = (e) => {
+        if (e.data.type === 'opLevels' && this.opLevelsHandler) {
+          this.opLevelsHandler(e.data.data);
+        }
+      };
+
       this.node.connect(this.context.destination);
 
       // Initialize algorithms data in the worklet
@@ -49,8 +55,14 @@ export class DX7Engine {
   noteOff(note: number) { this.node?.port.postMessage({ type: 'noteOff', data: { note } }); }
   panic() { this.node?.port.postMessage({ type: 'panic' }); }
 
+  private opLevelsHandler: ((levels: Float32Array) => void) | null = null;
+
   setPitchBend(val: number) { this.node?.port.postMessage({ type: 'pitchBend', data: val }); }
   setModWheel(val: number) { this.node?.port.postMessage({ type: 'modWheel', data: val }); }
   setAftertouch(val: number) { this.node?.port.postMessage({ type: 'aftertouch', data: val }); }
   setSustain(val: boolean) { this.node?.port.postMessage({ type: 'sustain', data: val }); }
+
+  public onOpLevels(callback: (levels: Float32Array) => void) {
+    this.opLevelsHandler = callback;
+  }
 }