feat: complete Phase 10.3 - master metering with peak/RMS display

Added comprehensive master output level monitoring:
- Created MasterMeter component with dual vertical bars (peak + RMS)
- Implemented real-time level monitoring in useMultiTrackPlayer hook
- Added master analyser node connected to audio output
- Displays color-coded levels (green/yellow/red) based on dB thresholds
- Shows numerical dB readouts for both peak and RMS
- Includes clickable clip indicator with reset functionality
- Integrated into PlaybackControls next to master volume

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

lib/hooks/useMultiTrackPlayer.ts

@@ -29,6 +29,9 @@ export function useMultiTrackPlayer(
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
   const [trackLevels, setTrackLevels] = useState<Record<string, number>>({});
+  const [masterPeakLevel, setMasterPeakLevel] = useState(0);
+  const [masterRmsLevel, setMasterRmsLevel] = useState(0);
+  const [masterIsClipping, setMasterIsClipping] = useState(false);
 
   const audioContextRef = useRef<AudioContext | null>(null);
   const sourceNodesRef = useRef<AudioBufferSourceNode[]>([]);
@@ -37,6 +40,8 @@ export function useMultiTrackPlayer(
   const analyserNodesRef = useRef<AnalyserNode[]>([]);
   const effectNodesRef = useRef<EffectNodeInfo[][]>([]); // Effect nodes per track
   const masterGainNodeRef = useRef<GainNode | null>(null);
+  const masterAnalyserRef = useRef<AnalyserNode | null>(null);
+  const masterLevelMonitorFrameRef = useRef<number | null>(null);
   const startTimeRef = useRef<number>(0);
   const pausedAtRef = useRef<number>(0);
   const animationFrameRef = useRef<number | null>(null);
@@ -116,6 +121,46 @@ export function useMultiTrackPlayer(
     levelMonitorFrameRef.current = requestAnimationFrame(monitorPlaybackLevels);
   }, []);
 
+  // Monitor master output levels (peak and RMS)
+  const monitorMasterLevels = useCallback(() => {
+    if (!masterAnalyserRef.current) {
+      return;
+    }
+
+    const analyser = masterAnalyserRef.current;
+    const bufferLength = analyser.fftSize;
+    const dataArray = new Float32Array(bufferLength);
+
+    analyser.getFloatTimeDomainData(dataArray);
+
+    // Calculate peak level (max absolute value)
+    let peak = 0;
+    for (let i = 0; i < bufferLength; i++) {
+      const abs = Math.abs(dataArray[i]);
+      if (abs > peak) {
+        peak = abs;
+      }
+    }
+
+    // Calculate RMS level (root mean square)
+    let sumSquares = 0;
+    for (let i = 0; i < bufferLength; i++) {
+      sumSquares += dataArray[i] * dataArray[i];
+    }
+    const rms = Math.sqrt(sumSquares / bufferLength);
+
+    // Detect clipping (signal >= 1.0)
+    const isClipping = peak >= 1.0;
+
+    setMasterPeakLevel(peak);
+    setMasterRmsLevel(rms);
+    if (isClipping) {
+      setMasterIsClipping(true);
+    }
+
+    masterLevelMonitorFrameRef.current = requestAnimationFrame(monitorMasterLevels);
+  }, []);
+
   // Apply automation values during playback
   const applyAutomation = useCallback(() => {
     if (!audioContextRef.current) return;
@@ -303,11 +348,20 @@ export function useMultiTrackPlayer(
     analyserNodesRef.current = [];
     effectNodesRef.current = [];
 
-    // Create master gain node
+    // Create master gain node with analyser for metering
     const masterGain = audioContext.createGain();
     masterGain.gain.setValueAtTime(masterVolume, audioContext.currentTime);
-    masterGain.connect(audioContext.destination);
+
+    const masterAnalyser = audioContext.createAnalyser();
+    masterAnalyser.fftSize = 256;
+    masterAnalyser.smoothingTimeConstant = 0.8;
+
+    // Connect: masterGain -> analyser -> destination
+    masterGain.connect(masterAnalyser);
+    masterAnalyser.connect(audioContext.destination);
+
     masterGainNodeRef.current = masterGain;
+    masterAnalyserRef.current = masterAnalyser;
 
     // Create audio graph for each track
     for (const track of tracks) {
@@ -376,10 +430,11 @@ export function useMultiTrackPlayer(
     // Start level monitoring
     isMonitoringLevelsRef.current = true;
     monitorPlaybackLevels();
+    monitorMasterLevels();
 
     // Start automation
     applyAutomation();
-  }, [tracks, duration, masterVolume, updatePlaybackPosition, monitorPlaybackLevels, applyAutomation]);
+  }, [tracks, duration, masterVolume, updatePlaybackPosition, monitorPlaybackLevels, monitorMasterLevels, applyAutomation]);
 
   const pause = useCallback(() => {
     if (!audioContextRef.current || !isPlaying) return;
@@ -414,6 +469,11 @@ export function useMultiTrackPlayer(
       levelMonitorFrameRef.current = null;
     }
 
+    if (masterLevelMonitorFrameRef.current) {
+      cancelAnimationFrame(masterLevelMonitorFrameRef.current);
+      masterLevelMonitorFrameRef.current = null;
+    }
+
     if (automationFrameRef.current) {
       cancelAnimationFrame(automationFrameRef.current);
       automationFrameRef.current = null;
@@ -650,6 +710,10 @@ export function useMultiTrackPlayer(
               cancelAnimationFrame(levelMonitorFrameRef.current);
               levelMonitorFrameRef.current = null;
             }
+            if (masterLevelMonitorFrameRef.current) {
+              cancelAnimationFrame(masterLevelMonitorFrameRef.current);
+              masterLevelMonitorFrameRef.current = null;
+            }
             if (automationFrameRef.current) {
               cancelAnimationFrame(automationFrameRef.current);
               automationFrameRef.current = null;
@@ -662,12 +726,13 @@ export function useMultiTrackPlayer(
         };
         updatePosition();
         monitorPlaybackLevels();
+        monitorMasterLevels();
         applyAutomation();
       }, 10);
     }
 
     previousEffectStructureRef.current = currentStructure;
-  }, [tracks, isPlaying, duration, masterVolume, monitorPlaybackLevels, applyAutomation]);
+  }, [tracks, isPlaying, duration, masterVolume, monitorPlaybackLevels, monitorMasterLevels, applyAutomation]);
 
   // Stop playback when all tracks are deleted
   useEffect(() => {
@@ -730,6 +795,9 @@ export function useMultiTrackPlayer(
       if (levelMonitorFrameRef.current) {
         cancelAnimationFrame(levelMonitorFrameRef.current);
       }
+      if (masterLevelMonitorFrameRef.current) {
+        cancelAnimationFrame(masterLevelMonitorFrameRef.current);
+      }
       if (automationFrameRef.current) {
         cancelAnimationFrame(automationFrameRef.current);
       }
@@ -750,11 +818,19 @@ export function useMultiTrackPlayer(
     };
   }, []);
 
+  const resetClipIndicator = useCallback(() => {
+    setMasterIsClipping(false);
+  }, []);
+
   return {
     isPlaying,
     currentTime,
     duration,
     trackLevels,
+    masterPeakLevel,
+    masterRmsLevel,
+    masterIsClipping,
+    resetClipIndicator,
     play,
     pause,
     stop,