added a treatment for InstrumentSelection panel when selectedTrackId is empty or doesn't associate with a valid track.

src/components/InstrumentSelection.tsx

@@ -42,8 +42,9 @@ const InstrumentSelection: React.FC = () => {
   };
 
   const handleSelectInstrument = async (instrumentKey: string) => {
-    const instrument = instrumentKey as InstrumentType;
+    // If no valid target track, ignore user interaction
     if (!targetTrack || !(targetTrack instanceof KGMidiTrack)) return;
+    const instrument = instrumentKey as InstrumentType;
     try {
       await setTrackInstrument(targetTrack.getId(), instrument);
     } catch (err) {
@@ -53,16 +54,16 @@ const InstrumentSelection: React.FC = () => {
 
   const previewImage = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.image || 'piano.png';
   const previewAlt = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.displayName || currentInstrumentKey;
-
-  if (!targetTrack) return null;
+  const hasTargetTrack = !!targetTrack;
 
   return (
       <div className="instrument-selection">
       <div className="instrument-selection-header">
-        <h3>{`${previewAlt.toString()}`}</h3>
+        <h3>{hasTargetTrack ? `${previewAlt.toString()}` : ''}</h3>
         <button className="instrument-selection-close-btn" onClick={closeInstrumentSelection}>✕</button>
       </div>
       <div className="instrument-selection-top">
+        {hasTargetTrack && (
             <div className="instrument-preview">
               <img
                 src={`${import.meta.env.BASE_URL}resources/instruments/${previewImage}`}
@@ -71,7 +72,8 @@ const InstrumentSelection: React.FC = () => {
                 height={256}
               />
             </div>
-        <div className="instrument-name-overlay">{targetTrack.getName()}</div>
+          )}
+          <div className="instrument-name-overlay">{hasTargetTrack ? targetTrack.getName() : ''}</div>
       </div>
       <div className="instrument-selection-bottom">
         <div className="instrument-groups">