fix(05-03): show backing track section immediately when player opens

Fixes issue where backing track wasn't appearing because mixerHelper
data hadn't arrived yet via WebSocket. Now shows section immediately
with loading state until mixer data arrives.

Changes:
- Removed dependency on mixerHelper.backingTracks for initial display
- Section now shows when showBackingTrackPlayer is true
- Header shows filename from backingTrackData.backingTrack immediately
- Displays "Loading backing track controls..." until mixer data arrives
- Once MIXER_CHANGES WebSocket message arrives, shows full track with VU/gain

Display flow:
1. Player opens → showBackingTrackPlayer = true
2. Section immediately appears with header and filename
3. Shows loading message for controls
4. WebSocket MIXER_CHANGES arrives → mixerHelper.backingTracks populated
5. Full track controls appear (VU meter, gain, pan menu)

This provides immediate visual feedback while waiting for server data.

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

jam-ui/src/components/client/JKSessionScreen.js

@@ -189,6 +189,9 @@ const JKSessionScreen = () => {
   // Redux backing track state (modal visibility and data)
   const backingTrackData = useSelector(selectBackingTrackData);
   const showBackingTrackPlayer = Boolean(backingTrackData);
+  
+  console.log('Backing Track Data:', backingTrackData);
+  console.log('mixerHelper.backingTracks:', mixerHelper.backingTracks);
 
   // Stable callback for backing track popup close
   const handleBackingTrackClose = useCallback(() => {
@@ -1102,12 +1105,16 @@ const JKSessionScreen = () => {
           )}
 
           {/* Backing Track Section - Show track when player is open */}
-          {showBackingTrackPlayer && mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0 && (
+          {showBackingTrackPlayer && (
             <>
               <div style={{ borderLeft: '1px solid #ddd', paddingLeft: '1rem' }}></div>
               <div className='backingTrack'>
                 <h5>
-                  Backing Track: {mixerHelper.backingTracks[0].shortFilename || 'Audio File'}
+                  Backing Track: {
+                    mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0
+                      ? (mixerHelper.backingTracks[0].shortFilename || 'Audio File')
+                      : (backingTrackData.backingTrack?.split('/').pop().split('\\').pop() || 'Loading...')
+                  }
                   <a
                     href="#"
                     className="text-muted ml-2"
@@ -1121,11 +1128,17 @@ const JKSessionScreen = () => {
                     <FontAwesomeIcon icon="times" /> Close
                   </a>
                 </h5>
-                <JKSessionBackingTrack
-                  backingTrack={mixerHelper.backingTracks[0]}
-                  mixers={mixerHelper.backingTracks[0].mixers}
-                  onClose={handleBackingTrackMainClose}
-                />
+                {mixerHelper.backingTracks && mixerHelper.backingTracks.length > 0 ? (
+                  <JKSessionBackingTrack
+                    backingTrack={mixerHelper.backingTracks[0]}
+                    mixers={mixerHelper.backingTracks[0].mixers}
+                    onClose={handleBackingTrackMainClose}
+                  />
+                ) : (
+                  <div style={{ textAlign: 'center', padding: '20px', color: '#6c757d' }}>
+                    Loading backing track controls...
+                  </div>
+                )}
               </div>
             </>
           )}