feat: piano roll loads track instrument + multi-track play select

app/static/js/app.jsx

@@ -5918,7 +5918,7 @@ const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, activeTracks, onClos
 
   const [showGhostNotes, setShowGhostNotes] = React.useState(true);
   const [sessionSyncMode, setSessionSyncMode] = React.useState(true);
-  const [activePlayTrackIds, setActivePlayTrackIds] = React.useState(null);
+  const [activePlayTrackIds, setActivePlayTrackIds] = React.useState([]);
 
   const allMidiItems = React.useMemo(() => {
     const result = [];
@@ -6422,7 +6422,7 @@ const PianoRollTabEditor = ({ st, zoom, bpm, viewportWidth, activeTracks, onClos
     }
     var layers = [];
     ghostLayers.forEach(function(layer) {
-      if (activePlayTrackIds === null || activePlayTrackIds !== layer.track_id) return;
+      if (!activePlayTrackIds || activePlayTrackIds.indexOf(layer.track_id) === -1) return;
       var trk = (activeTracks || []).find(function(t) { return t.id === layer.track_id; });
       layers.push({
         trackId: layer.track_id,
@@ -7577,13 +7577,13 @@ const beatSec = 60.0 / (parseInt(bpm) || 120);
         seenTracks[m._trackId] = true;
         var track = (activeTracks || []).find(function(t) { return t.id === m._trackId; });
         var isActive = m._trackId === st.trackId && m.id === st.target_id;
-        var isPlayOn = activePlayTrackIds === m._trackId;
+        var isPlayOn = activePlayTrackIds && activePlayTrackIds.indexOf(m._trackId) !== -1;
         els.push(React.createElement("button", {
           key: m._trackId,
           onClick: function() {
-            if (isActive) return;
             setActivePlayTrackIds(function(prev) {
-              return prev === m._trackId ? null : m._trackId;
+              var list = prev || [];
+              return list.indexOf(m._trackId) !== -1 ? list.filter(function(id) { return id !== m._trackId; }) : list.concat([m._trackId]);
             });
           },
           className: "flex items-center justify-center h-[20px] border border-zinc-600 rounded-md cursor-pointer outline-none mx-1 my-[2px] " + (isActive ? 'bg-yellow-600 text-black font-bold' : (isPlayOn ? 'bg-red-700 text-white font-semibold' : 'bg-zinc-700 text-zinc-300 hover:bg-zinc-600'))
@@ -11341,8 +11341,10 @@ const App = () => {
       notes: midiItem.notes || [],
       duration: midiItem.duration || 4,
       buffer: silentBuffer,
-      instrumentProgram: track.instrumentProgram,
+      instrumentProgram: track.instrumentProgram !== undefined ? track.instrumentProgram : (track.synth_engine ? track.synth_engine.soundfont_program : undefined),
       instrumentName: track.instrumentName,
+      instrumentId: track.instrumentId,
+      synth_engine: track.synth_engine,
       currentTime: 0,
       isPlaying: false,
       isLooping: true,
@@ -11356,6 +11358,17 @@ const App = () => {
     };
     setSubTabs(prev => [...prev, newTab]);
     setActiveTab(tabId);
+    if (track.synth_engine && window.SonicSF && window.SonicSF.selectInstrument) {
+      var se = track.synth_engine;
+      var sfId = se.soundfont_id;
+      if (sfId) {
+        var allTrks = activeTracksRef.current || activeTracks;
+        var trkIdx = 0;
+        for (var ti = 0; ti < allTrks.length; ti++) { if (allTrks[ti].id === trackId) { trkIdx = ti; break; } }
+        var seCh = (se.soundfont_bank === 128 ? 9 : (trkIdx % 16));
+        window.SonicSF.selectInstrument(seCh, se.soundfont_bank || 0, se.soundfont_program || 0, sfId);
+      }
+    }
   };
 
   const handleUpdateMidiNotes = (tabId, notes) => {