diff --git a/CMakeLists.txt b/CMakeLists.txt
index 853d078..a1d8d7c 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -177,6 +177,7 @@ target_sources(OpenStudio PRIVATE
     Source/MainComponent.cpp
     Source/MixerWindowManager.cpp
     Source/AppUpdater.cpp
+    Source/CrashDiagnostics.cpp
     Source/AudioEngine.cpp
     Source/AudioRecorder.cpp
     Source/PlaybackEngine.cpp
@@ -370,6 +371,7 @@ if(WIN32)
     if(MSVC)
         target_link_libraries(OpenStudio PRIVATE
             "${webview2_SOURCE_DIR}/build/native/x64/WebView2LoaderStatic.lib"
+            dbghelp
             dwmapi
         )
     endif()
diff --git a/Source/AudioEngine.cpp b/Source/AudioEngine.cpp
index 3df4e85..4226206 100644
--- a/Source/AudioEngine.cpp
+++ b/Source/AudioEngine.cpp
@@ -5,6 +5,7 @@
 #include "S13PitchCorrector.h"
 #include "PitchAnalyzer.h"
 #include "PitchResynthesizer.h"
+#include "CrashDiagnostics.h"
 
 namespace
 {
@@ -2535,6 +2536,13 @@ static float peakFromDoubleBuffer(const juce::AudioBuffer<double>& buffer, int n
 }
 
 static std::unique_ptr<juce::AudioProcessor> createBuiltInEffect(const juce::String& name);
+static constexpr int kMinimumHostedPluginBlockSize = 512;
+
+static int getSafeHostedPluginBlockSize(int requestedBlockSize)
+{
+    return juce::jmax(kMinimumHostedPluginBlockSize,
+                      requestedBlockSize > 0 ? requestedBlockSize : kMinimumHostedPluginBlockSize);
+}
 
 static void prepareHostedProcessorForPrecision(juce::AudioProcessor* proc, double sampleRate,
                                                int blockSize, ProcessingPrecisionMode precisionMode)
@@ -2552,7 +2560,7 @@ static void prepareHostedProcessorForPrecision(juce::AudioProcessor* proc, doubl
                 : juce::AudioProcessor::singlePrecision);
     }
 
-    proc->prepareToPlay(sampleRate, blockSize);
+    proc->prepareToPlay(sampleRate, getSafeHostedPluginBlockSize(blockSize));
 }
 
 static void prepareHostedProcessorPreservingLayout(juce::AudioProcessor* proc, double sampleRate,
@@ -2571,13 +2579,23 @@ static void prepareHostedProcessorPreservingLayout(juce::AudioProcessor* proc, d
                 : juce::AudioProcessor::singlePrecision);
     }
 
+    const int safeBlockSize = getSafeHostedPluginBlockSize(blockSize);
     auto savedLayout = proc->getBusesLayout();
-    proc->prepareToPlay(sampleRate, blockSize);
+    proc->prepareToPlay(sampleRate, safeBlockSize);
 
     if (proc->getBusesLayout() != savedLayout)
     {
-        proc->setBusesLayout(savedLayout);
-        proc->prepareToPlay(sampleRate, blockSize);
+        if (proc->setBusesLayout(savedLayout))
+        {
+            proc->prepareToPlay(sampleRate, safeBlockSize);
+        }
+        else
+        {
+            juce::Logger::writeToLog("AudioEngine: Plugin refused saved bus layout during stage prepare: "
+                                     + proc->getName()
+                                     + " requestedBlock=" + juce::String(blockSize)
+                                     + " safeBlock=" + juce::String(safeBlockSize));
+        }
     }
 }
 
@@ -2728,6 +2746,9 @@ static float findPeakInDoubleBuffer(const juce::AudioBuffer<double>& buffer, int
 
 AudioEngine::AudioEngine()
 {
+    OpenStudioCrashDiagnostics::installCrashHandlers();
+    OpenStudioCrashDiagnostics::recordBreadcrumb("audio_engine_constructed");
+
     // Initialize graphs and managers BEFORE opening the audio device.
     // addAudioCallback() (below) triggers audioDeviceAboutToStart() synchronously
     // on an already-running device. audioDeviceAboutToStart() checks
@@ -3003,7 +3024,7 @@ void AudioEngine::rebindStageEditors(const std::shared_ptr<const ActiveFXStage>&
 bool AudioEngine::publishMasterStageSpec(const DesiredFXStageSpec& spec)
 {
     const double sr = currentSampleRate > 0.0 ? currentSampleRate : 44100.0;
-    const int preparedBlockSize = currentBlockSize > 0 ? currentBlockSize : 512;
+    const int preparedBlockSize = getSafeHostedPluginBlockSize(currentBlockSize);
     const double buildStart = juce::Time::getMillisecondCounterHiRes();
     juce::String errorMessage;
     auto stage = buildActiveFXStage(spec, sr, preparedBlockSize, processingPrecisionMode, false, errorMessage);
@@ -3034,7 +3055,7 @@ bool AudioEngine::publishMasterStageSpec(const DesiredFXStageSpec& spec)
 bool AudioEngine::publishMonitoringStageSpec(const DesiredFXStageSpec& spec)
 {
     const double sr = currentSampleRate > 0.0 ? currentSampleRate : 44100.0;
-    const int preparedBlockSize = currentBlockSize > 0 ? currentBlockSize : 512;
+    const int preparedBlockSize = getSafeHostedPluginBlockSize(currentBlockSize);
     const double buildStart = juce::Time::getMillisecondCounterHiRes();
     juce::String errorMessage;
     auto stage = buildActiveFXStage(spec, sr, preparedBlockSize, processingPrecisionMode, true, errorMessage);
@@ -3421,6 +3442,9 @@ void AudioEngine::updateSpectrumAnalyzer (const float* const* outputChannelData,
         if (spectrumWritePos >= FFT_SIZE)
         {
             spectrumWritePos = 0;
+            spectrumFftDecimationCounter = (spectrumFftDecimationCounter + 1) & 3;
+            if (spectrumFftDecimationCounter != 0)
+                continue;
 
             float fftData[FFT_SIZE * 2] = {};
             std::memcpy (fftData, spectrumInputBuffer, sizeof (float) * static_cast<size_t> (FFT_SIZE));
@@ -3469,6 +3493,13 @@ void AudioEngine::processMasterFXChain (const std::shared_ptr<const ActiveFXStag
             continue;
 
         auto* proc = slot.processor.get();
+        juce::ScopedTryLock pluginProcessLock(proc->getCallbackLock());
+        if (!pluginProcessLock.isLocked())
+        {
+            masterFXBusySkipCount.fetch_add(1, std::memory_order_relaxed);
+            continue;
+        }
+
         const bool canProcessDouble = useHybrid64Summing
                                    && !slot.forceFloat
                                    && slot.supportsDouble
@@ -3557,6 +3588,13 @@ void AudioEngine::processMonitoringFXChain (const std::shared_ptr<const ActiveFX
             continue;
 
         auto* proc = slot.processor.get();
+        juce::ScopedTryLock pluginProcessLock(proc->getCallbackLock());
+        if (!pluginProcessLock.isLocked())
+        {
+            monitoringFXBusySkipCount.fetch_add(1, std::memory_order_relaxed);
+            continue;
+        }
+
         const bool canProcessDouble = hybrid64PostChainActive
                                    && !slot.forceFloat
                                    && slot.supportsDouble
@@ -4417,7 +4455,7 @@ juce::String AudioEngine::addTrack(const juce::String& explicitId)
         trackOrder.push_back(trackId);
 
         // Pre-allocate sidechain output buffer for this track (avoids heap alloc on audio thread)
-        int scBlockSize = currentBlockSize > 0 ? currentBlockSize : 512;
+        int scBlockSize = getSafeHostedPluginBlockSize(currentBlockSize);
         auto sidechainBuffer = std::make_shared<juce::AudioBuffer<float>>();
         sidechainBuffer->setSize(2, scBlockSize);
         sidechainOutputBuffers[trackId] = sidechainBuffer;
@@ -4809,10 +4847,13 @@ bool AudioEngine::loadInstrument(const juce::String& trackId, const juce::String
     
     // Load the VST instrument using PluginManager with actual device rate
     double sr = currentSampleRate > 0 ? currentSampleRate : 44100.0;
-    int bs = currentBlockSize > 0 ? currentBlockSize : 512;
+    int bs = getSafeHostedPluginBlockSize(currentBlockSize);
+    OpenStudioCrashDiagnostics::recordBreadcrumb("load_instrument_begin",
+        "trackId=" + trackId + " path=" + vstPath + " sr=" + juce::String(sr) + " block=" + juce::String(bs));
     auto plugin = pluginManager.loadPluginFromFile(vstPath, sr, bs);
     if (!plugin)
     {
+        OpenStudioCrashDiagnostics::recordBreadcrumb("load_instrument_failed", "trackId=" + trackId + " path=" + vstPath);
         juce::Logger::writeToLog("AudioEngine: Failed to load instrument: " + vstPath);
         return false;
     }
@@ -4821,6 +4862,7 @@ bool AudioEngine::loadInstrument(const juce::String& trackId, const juce::String
     auto* pluginInstance = dynamic_cast<juce::AudioPluginInstance*>(plugin.get());
     if (!pluginInstance)
     {
+        OpenStudioCrashDiagnostics::recordBreadcrumb("load_instrument_not_audio_plugin", "trackId=" + trackId + " path=" + vstPath);
         juce::Logger::writeToLog("AudioEngine: Plugin is not an AudioPluginInstance: " + vstPath);
         return false;
     }
@@ -4836,6 +4878,8 @@ bool AudioEngine::loadInstrument(const juce::String& trackId, const juce::String
     trackMap[trackId]->setInstrument(std::move(instrumentPtr), sr, bs);
     trackMap[trackId]->setTrackType(TrackType::Instrument);
     
+    OpenStudioCrashDiagnostics::recordBreadcrumb("load_instrument_success",
+        "trackId=" + trackId + " path=" + vstPath + " block=" + juce::String(bs));
     juce::Logger::writeToLog("AudioEngine: Loaded instrument on track " + trackId + ": " + vstPath);
     return true;
 }
@@ -4874,26 +4918,57 @@ void AudioEngine::handleMIDIMessage(const juce::String& deviceName, int channel,
     // Apply MIDI CC mappings: route incoming CC values to mapped plugin parameters
     if (message.isController())
     {
-        const juce::ScopedLock sl(midiLearnLock);
-        int ccNum = message.getControllerNumber();
-        float normalizedValue = message.getControllerValue() / 127.0f;
+        struct PendingMappedParameterUpdate
+        {
+            juce::String trackId;
+            int pluginIndex = -1;
+            int paramIndex = -1;
+            float normalizedValue = 0.0f;
+        };
+
+        juce::Array<PendingMappedParameterUpdate> updates;
+        {
+            const juce::ScopedLock sl(midiLearnLock);
+            const int ccNum = message.getControllerNumber();
+            const float normalizedValue = message.getControllerValue() / 127.0f;
+
+            for (const auto& mapping : midiLearnMappings)
+            {
+                if (mapping.ccNumber == ccNum)
+                {
+                    PendingMappedParameterUpdate update;
+                    update.trackId = mapping.trackId;
+                    update.pluginIndex = mapping.pluginIndex;
+                    update.paramIndex = mapping.paramIndex;
+                    update.normalizedValue = normalizedValue;
+                    updates.add(update);
+                }
+            }
+        }
 
-        for (const auto& mapping : midiLearnMappings)
+        if (!updates.isEmpty())
         {
-            if (mapping.ccNumber == ccNum)
+            midiMappedParameterUpdateCount.fetch_add(updates.size(), std::memory_order_relaxed);
+            juce::MessageManager::callAsync([this, updates]()
             {
-                auto it = trackMap.find(mapping.trackId);
-                if (it != trackMap.end() && it->second)
+                for (const auto& update : updates)
                 {
-                    auto* processor = it->second->getTrackFXProcessor(mapping.pluginIndex);
-                    if (processor)
+                    auto it = trackMap.find(update.trackId);
+                    if (it == trackMap.end() || it->second == nullptr)
+                        continue;
+
+                    auto processor = it->second->getTrackFXProcessorShared(update.pluginIndex);
+                    if (!processor)
+                        continue;
+
+                    const juce::ScopedLock processorLock(processor->getCallbackLock());
+                    const auto& params = processor->getParameters();
+                    if (update.paramIndex >= 0 && params.size() > update.paramIndex)
                     {
-                        const auto& params = processor->getParameters();
-                        if (params.size() > mapping.paramIndex)
-                            params[mapping.paramIndex]->setValueNotifyingHost(normalizedValue);
+                        params[update.paramIndex]->setValueNotifyingHost(update.normalizedValue);
                     }
                 }
-            }
+            });
         }
     }
 
@@ -4922,6 +4997,7 @@ void AudioEngine::handleMIDIMessage(const juce::String& deviceName, int channel,
     }
 
     // Route MIDI to appropriate tracks
+    int fanoutCount = 0;
     for (auto const& [id, track] : trackMap)
     {
         if (!track) continue;
@@ -4946,7 +5022,10 @@ void AudioEngine::handleMIDIMessage(const juce::String& deviceName, int channel,
         // Audio/MIDI tracks require explicit input monitoring toggle.
         if (track->getInputMonitoring()
             || track->getTrackType() == TrackType::Instrument)
-            track->enqueueMidiMessage(message, sampleOffset);
+        {
+            if (track->enqueueMidiMessage(message, sampleOffset))
+                ++fanoutCount;
+        }
         
         // Record MIDI event if armed and in record mode
         if (isPlaying && isRecordMode && track->getRecordArmed())
@@ -4955,6 +5034,14 @@ void AudioEngine::handleMIDIMessage(const juce::String& deviceName, int channel,
             midiRecorder.recordEvent(id, timestamp, message);
         }
     }
+
+    midiLastInputFanoutCount.store(fanoutCount, std::memory_order_relaxed);
+    int prevFanoutMax = midiMaxInputFanoutCount.load(std::memory_order_relaxed);
+    while (fanoutCount > prevFanoutMax
+           && !midiMaxInputFanoutCount.compare_exchange_weak(prevFanoutMax, fanoutCount,
+                                                             std::memory_order_relaxed))
+    {
+    }
 }
 
 juce::MidiBuffer AudioEngine::buildTrackMidiBlock(const juce::String& trackId, double blockStartTimeSeconds,
@@ -5654,7 +5741,7 @@ juce::var AudioEngine::getPluginCapabilities(const juce::String& pluginPath)
     obj->setProperty("fileOrIdentifier", pluginPath);
 
     double sr = currentSampleRate > 0 ? currentSampleRate : 44100.0;
-    int bs = currentBlockSize > 0 ? currentBlockSize : 512;
+    int bs = getSafeHostedPluginBlockSize(currentBlockSize);
     auto plugin = pluginManager.loadPluginFromFile(pluginPath, sr, bs);
     if (!plugin)
     {
@@ -6295,10 +6382,15 @@ bool AudioEngine::addTrackInputFX(const juce::String& trackId, const juce::Strin
     // crackling and distortion.  The plugin can still process 32-sample blocks fine when
     // prepared with a larger maximumExpectedSamplesPerBlock.
     double sr = currentSampleRate > 0 ? currentSampleRate : 44100.0;
-    int bs = currentBlockSize > 0 ? currentBlockSize : 512;
+    int bs = getSafeHostedPluginBlockSize(currentBlockSize);
+    OpenStudioCrashDiagnostics::recordBreadcrumb("add_track_input_fx_begin",
+        "trackId=" + trackId + " path=" + pluginPath + " sr=" + juce::String(sr) + " block=" + juce::String(bs));
     auto plugin = pluginManager.loadPluginFromFile(pluginPath, sr, bs);
     if (!plugin)
+    {
+        OpenStudioCrashDiagnostics::recordBreadcrumb("add_track_input_fx_failed", "trackId=" + trackId + " path=" + pluginPath);
         return false;
+    }
 
     // Provide tempo/position info to the plugin
     plugin->setPlayHead (this);
@@ -6323,6 +6415,8 @@ bool AudioEngine::addTrackInputFX(const juce::String& trackId, const juce::Strin
         if (openEditor)
             openPluginEditor(trackId, fxIndex, true);
         juce::Logger::writeToLog("AudioEngine: Added input FX" + juce::String(openEditor ? " and opened editor" : ""));
+        OpenStudioCrashDiagnostics::recordBreadcrumb("add_track_input_fx_success",
+            "trackId=" + trackId + " fxIndex=" + juce::String(fxIndex) + " block=" + juce::String(bs));
         recalculatePDC();
     }
     return success;
@@ -6334,16 +6428,21 @@ bool AudioEngine::addTrackFX(const juce::String& trackId, const juce::String& pl
     // Use actual device sample rate so the plugin initialises at the correct rate.
     // IMPORTANT: Clamp max-block-size to at least 512 — same rationale as addTrackInputFX.
     double sr = currentSampleRate > 0 ? currentSampleRate : 44100.0;
-    int bs = currentBlockSize > 0 ? currentBlockSize : 512;
+    int bs = getSafeHostedPluginBlockSize(currentBlockSize);
 
     logToDisk("AudioEngine::addTrackFX DIAGNOSTIC");
     logToDisk("  currentSampleRate=" + juce::String(currentSampleRate) +
               " currentBlockSize=" + juce::String(currentBlockSize));
     logToDisk("  creating plugin at sr=" + juce::String(sr) + " bs=" + juce::String(bs));
 
+    OpenStudioCrashDiagnostics::recordBreadcrumb("add_track_fx_begin",
+        "trackId=" + trackId + " path=" + pluginPath + " sr=" + juce::String(sr) + " block=" + juce::String(bs));
     auto plugin = pluginManager.loadPluginFromFile(pluginPath, sr, bs);
     if (!plugin)
+    {
+        OpenStudioCrashDiagnostics::recordBreadcrumb("add_track_fx_failed", "trackId=" + trackId + " path=" + pluginPath);
         return false;
+    }
 
     logToDisk("  plugin created: " + plugin->getName() +
               " inCh=" + juce::String(plugin->getTotalNumInputChannels()) +
@@ -6390,7 +6489,7 @@ bool AudioEngine::addTrackFX(const juce::String& trackId, const juce::String& pl
         {
             logToDisk("  Trying ARA init for plugin at index " + juce::String(fxIndex));
             it2->second->initializeARA(fxIndex, currentSampleRate > 0 ? currentSampleRate : 44100.0,
-                currentBlockSize > 0 ? currentBlockSize : 512,
+                getSafeHostedPluginBlockSize(currentBlockSize),
                 [this, trackIdCopy, fxIndexCopy, openEditorCopy] (bool araSuccess, bool pluginSupportsARA, const juce::String& errorMessage) {
                     if (araSuccess)
                     {
@@ -6425,6 +6524,8 @@ bool AudioEngine::addTrackFX(const juce::String& trackId, const juce::String& pl
         }
 
         logToDisk("  addTrackFX complete (ARA check pending)");
+        OpenStudioCrashDiagnostics::recordBreadcrumb("add_track_fx_success",
+            "trackId=" + trackId + " fxIndex=" + juce::String(fxIndex) + " block=" + juce::String(bs));
     }
     return success;
 }
@@ -6456,7 +6557,7 @@ bool AudioEngine::addTrackBuiltInFX(const juce::String& trackId, const juce::Str
     }
 
     double sr = currentSampleRate > 0 ? currentSampleRate : 44100.0;
-    int bs = currentBlockSize > 0 ? currentBlockSize : 512;
+    int bs = getSafeHostedPluginBlockSize(currentBlockSize);
     plugin->setPlayHead(this);
     prepareHostedProcessorForPrecision(plugin.get(), sr, bs, processingPrecisionMode);
 
@@ -6497,7 +6598,7 @@ bool AudioEngine::addMasterBuiltInFX(const juce::String& effectName)
         return false;
 
     double sr = currentSampleRate > 0 ? currentSampleRate : 44100.0;
-    int bs = currentBlockSize > 0 ? currentBlockSize : 512;
+    int bs = getSafeHostedPluginBlockSize(currentBlockSize);
     plugin->setPlayHead(this);
     prepareHostedProcessorForPrecision(plugin.get(), sr, bs, processingPrecisionMode);
 
@@ -6555,7 +6656,7 @@ bool AudioEngine::addTrackS13FX(const juce::String& trackId, const juce::String&
     s13fx->setPlayHead(this);
 
     double sr = currentSampleRate > 0 ? currentSampleRate : 44100.0;
-    int bs = currentBlockSize > 0 ? currentBlockSize : 512;
+    int bs = getSafeHostedPluginBlockSize(currentBlockSize);
 
     bool success = false;
     {
@@ -6591,7 +6692,7 @@ bool AudioEngine::addMasterS13FX(const juce::String& scriptPath)
     s13fx->setPlayHead(this);
 
     double sr = currentSampleRate > 0 ? currentSampleRate : 44100.0;
-    int bs = currentBlockSize > 0 ? currentBlockSize : 512;
+    int bs = getSafeHostedPluginBlockSize(currentBlockSize);
 
     prepareHostedProcessorForPrecision(s13fx.get(), sr, bs, processingPrecisionMode);
 
@@ -6822,6 +6923,7 @@ void AudioEngine::openPluginEditor(const juce::String& trackId, int fxIndex, boo
         return;
     
     juce::AudioProcessor* processor = nullptr;
+    std::shared_ptr<juce::AudioProcessor> processorOwner;
     juce::String windowTitle;
     
     // Calculate display index (1-based)
@@ -6831,21 +6933,29 @@ void AudioEngine::openPluginEditor(const juce::String& trackId, int fxIndex, boo
     {
         if (fxIndex >= 0 && fxIndex < track->getNumInputFX())
         {
-            processor = track->getInputFXProcessor(fxIndex);
-            windowTitle = "Track " + juce::String(displayIndex) + " - " + processor->getName();
+            processorOwner = track->getInputFXProcessorShared(fxIndex);
+            processor = processorOwner.get();
+            if (processor != nullptr)
+                windowTitle = "Track " + juce::String(displayIndex) + " - " + processor->getName();
         }
     }
     else
     {
         if (fxIndex >= 0 && fxIndex < track->getNumTrackFX())
         {
-            processor = track->getTrackFXProcessor(fxIndex);
-            windowTitle = "Track " + juce::String(displayIndex) + " - " + processor->getName();
+            processorOwner = track->getTrackFXProcessorShared(fxIndex);
+            processor = processorOwner.get();
+            if (processor != nullptr)
+                windowTitle = "Track " + juce::String(displayIndex) + " - " + processor->getName();
         }
     }
 
     if (processor)
     {
+        OpenStudioCrashDiagnostics::recordBreadcrumb("open_plugin_editor_requested",
+            "trackId=" + trackId + " fxIndex=" + juce::String(fxIndex)
+                + " inputFX=" + juce::String(isInputFX ? "true" : "false")
+                + " plugin=" + processor->getName());
         // Defer window creation to next message-loop cycle — creating a native
         // DocumentWindow from inside a WebView2 NativeFunction callback can cause
         // re-entrancy crashes with the Windows message pump.
@@ -6855,7 +6965,7 @@ void AudioEngine::openPluginEditor(const juce::String& trackId, int fxIndex, boo
             : PluginWindowManager::PluginEditorTarget::Scope::TrackFX;
         target.trackId = trackId;
         target.fxIndex = fxIndex;
-        auto* proc = processor;
+        auto proc = processorOwner;
         auto title = windowTitle;
         juce::MessageManager::callAsync([this, proc, title, target]()
         {
@@ -6878,13 +6988,15 @@ void AudioEngine::openInstrumentEditor(const juce::String& trackId)
     if (!track)
         return;
 
-    auto* instrument = track->getInstrument();
+    std::shared_ptr<juce::AudioProcessor> instrument = track->getInstrumentShared();
     if (instrument)
     {
         int displayIndex = getTrackIndex(trackId) + 1;
         juce::String windowTitle = "Track " + juce::String(displayIndex) + " - " + instrument->getName();
-        auto* proc = instrument;
+        auto proc = instrument;
         auto title = windowTitle;
+        OpenStudioCrashDiagnostics::recordBreadcrumb("open_instrument_editor_requested",
+            "trackId=" + trackId + " plugin=" + instrument->getName());
         PluginWindowManager::PluginEditorTarget target;
         target.scope = PluginWindowManager::PluginEditorTarget::Scope::Instrument;
         target.trackId = trackId;
@@ -7333,7 +7445,7 @@ bool AudioEngine::addMasterFX(const juce::String& pluginPath)
     
     // Load the plugin with actual device sample rate & block size
     double sr = currentSampleRate > 0 ? currentSampleRate : 44100.0;
-    int bs = currentBlockSize > 0 ? currentBlockSize : 512;
+    int bs = getSafeHostedPluginBlockSize(currentBlockSize);
     auto plugin = pluginManager.loadPluginFromFile(pluginPath, sr, bs);
     if (!plugin)
     {
@@ -7353,7 +7465,7 @@ bool AudioEngine::addMasterFX(const juce::String& pluginPath)
         prepareHostedProcessorForPrecision(
             plugin.get(),
             device->getCurrentSampleRate(),
-            device->getCurrentBufferSizeSamples(),
+            getSafeHostedPluginBlockSize(device->getCurrentBufferSizeSamples()),
             processingPrecisionMode);
     }
 
@@ -7471,7 +7583,7 @@ void AudioEngine::openMasterFXEditor(int fxIndex)
             juce::MessageManager::callAsync([this, processor, title, target]()
             {
                 if (processor)
-                    pluginWindowManager.openEditor(processor.get(), title, target);
+                    pluginWindowManager.openEditor(processor, title, target);
             });
         }
     }
@@ -7519,7 +7631,7 @@ bool AudioEngine::addMonitoringFX(const juce::String& pluginPath)
     juce::Logger::writeToLog("AudioEngine: addMonitoringFX called with: " + pluginPath);
 
     double sr = currentSampleRate > 0 ? currentSampleRate : 44100.0;
-    int bs = currentBlockSize > 0 ? currentBlockSize : 512;
+    int bs = getSafeHostedPluginBlockSize(currentBlockSize);
     auto plugin = pluginManager.loadPluginFromFile(pluginPath, sr, bs);
     if (!plugin)
     {
@@ -7535,7 +7647,7 @@ bool AudioEngine::addMonitoringFX(const juce::String& pluginPath)
         prepareHostedProcessorForPrecision(
             plugin.get(),
             device->getCurrentSampleRate(),
-            device->getCurrentBufferSizeSamples(),
+            getSafeHostedPluginBlockSize(device->getCurrentBufferSizeSamples()),
             processingPrecisionMode);
     }
 
@@ -7654,7 +7766,7 @@ void AudioEngine::openMonitoringFXEditor(int fxIndex)
             juce::MessageManager::callAsync([this, processor, title, target]()
             {
                 if (processor)
-                    pluginWindowManager.openEditor(processor.get(), title, target);
+                    pluginWindowManager.openEditor(processor, title, target);
             });
         }
     }
@@ -8370,10 +8482,21 @@ juce::var AudioEngine::getAudioDebugSnapshot() const
     juce::Array<juce::var> playbackTracks;
     for (const auto& [trackId, track] : trackMap)
     {
-        juce::ignoreUnused(track);
         auto* trackObj = new juce::DynamicObject();
         trackObj->setProperty("trackId", trackId);
         trackObj->setProperty("clipCount", playbackEngine.getNumClipsForTrack(trackId));
+        if (track != nullptr)
+        {
+            trackObj->setProperty("pluginBusySkipCount", track->getPluginBusySkipCount());
+            trackObj->setProperty("midiOverflowCount", track->getMidiOverflowCount());
+            trackObj->setProperty("lastBuiltMidiEventCount", track->getLastBuiltMidiEventCount());
+            trackObj->setProperty("maxBuiltMidiEventCount", track->getMaxBuiltMidiEventCount());
+            trackObj->setProperty("inputFXCount", track->getNumInputFX());
+            trackObj->setProperty("trackFXCount", track->getNumTrackFX());
+            trackObj->setProperty("isInstrument", track->getTrackType() == TrackType::Instrument);
+            trackObj->setProperty("recordArmed", track->getRecordArmed());
+            trackObj->setProperty("inputMonitoring", track->getInputMonitoring());
+        }
         playbackTracks.add(juce::var(trackObj));
     }
 
@@ -8395,6 +8518,8 @@ juce::var AudioEngine::getAudioDebugSnapshot() const
     root->setProperty("audioCallbackTrackBufferResizeCount", audioCallbackTrackBufferResizeCount.load(std::memory_order_relaxed));
     root->setProperty("audioCallbackPitchScrubBufferResizeCount", audioCallbackPitchScrubBufferResizeCount.load(std::memory_order_relaxed));
     root->setProperty("audioCallbackSidechainBufferResizeCount", audioCallbackSidechainBufferResizeCount.load(std::memory_order_relaxed));
+    root->setProperty("crashBreadcrumbLogPath", OpenStudioCrashDiagnostics::getBreadcrumbLogFile().getFullPathName());
+    root->setProperty("lastCrashDumpPath", OpenStudioCrashDiagnostics::getLastCrashDumpFile().getFullPathName());
     root->setProperty("spectrumFftPublishCount", static_cast<int64>(spectrumFftPublishCount.load(std::memory_order_relaxed)));
     root->setProperty("spectrumFftLockMissCount", static_cast<int64>(spectrumFftLockMissCount.load(std::memory_order_relaxed)));
     root->setProperty("postTrackPlaybackPeak", lastPostTrackPlaybackPeak.load(std::memory_order_relaxed));
@@ -8403,6 +8528,9 @@ juce::var AudioEngine::getAudioDebugSnapshot() const
     root->setProperty("postMonitoringFxPeak", lastPostMonitoringFXPeak.load(std::memory_order_relaxed));
     root->setProperty("finalOutputPeak", lastFinalOutputPeak.load(std::memory_order_relaxed));
     root->setProperty("lastRecordingClipCountReturned", lastReturnedRecordingClipCount.load(std::memory_order_relaxed));
+    root->setProperty("midiLastInputFanoutCount", midiLastInputFanoutCount.load(std::memory_order_relaxed));
+    root->setProperty("midiMaxInputFanoutCount", midiMaxInputFanoutCount.load(std::memory_order_relaxed));
+    root->setProperty("midiMappedParameterUpdateCount", midiMappedParameterUpdateCount.load(std::memory_order_relaxed));
     root->setProperty("playbackTryLockFailureCount", playbackEngine.getTryLockFailureCount());
     root->setProperty("playbackMissingReaderCount", playbackEngine.getMissingReaderCount());
     root->setProperty("lastOverlappingClipCount", playbackEngine.getLastOverlappingClipCount());
@@ -8412,6 +8540,8 @@ juce::var AudioEngine::getAudioDebugSnapshot() const
     root->setProperty("playbackPitchShiftWorkBufferResizeCount", playbackEngine.getPitchShiftWorkBufferResizeCount());
     root->setProperty("playbackRenderResampleScratchResizeCount", playbackEngine.getRenderResampleScratchResizeCount());
     root->setProperty("playbackChunkBoundaryReserveCount", playbackEngine.getChunkBoundaryReserveCount());
+    root->setProperty("playbackAudioDataCacheMissCount", playbackEngine.getAudioDataCacheMissCount());
+    root->setProperty("playbackAudioDataCachedFileCount", playbackEngine.getAudioDataCachedFileCount());
     const auto pitchRouting = playbackEngine.getPitchPreviewRoutingStatus({});
     root->setProperty("pitchRouteMonitorMode", pitchRouting.monitorMode);
     root->setProperty("pitchRouteRenderedSegmentActive", pitchRouting.renderedSegmentActive);
@@ -13887,7 +14017,7 @@ juce::var AudioEngine::initializeARAForTrack(const juce::String& trackId, int fx
     }
 
     auto* track = it->second;
-    bool success = track->initializeARA(fxIndex, currentSampleRate, currentBlockSize);
+    bool success = track->initializeARA(fxIndex, currentSampleRate, getSafeHostedPluginBlockSize(currentBlockSize));
 
     obj->setProperty("success", success);
     if (!success)
@@ -13958,7 +14088,7 @@ juce::var AudioEngine::addARAClip(const juce::String& trackId, const juce::Strin
     {
         const juce::ScopedLock sl(mainProcessorGraph->getCallbackLock());
         double sr = currentSampleRate > 0 ? currentSampleRate : 44100.0;
-        int bs = currentBlockSize > 0 ? currentBlockSize : 512;
+        int bs = getSafeHostedPluginBlockSize(currentBlockSize);
         const bool forceFloat = it->second->getTrackFXPrecisionOverride(araFxIdx);
         prepareHostedProcessorPreservingLayout(araPlugin, sr, bs,
             forceFloat ? ProcessingPrecisionMode::Float32 : processingPrecisionMode);
diff --git a/Source/AudioEngine.h b/Source/AudioEngine.h
index 2ef363b..2343c43 100644
--- a/Source/AudioEngine.h
+++ b/Source/AudioEngine.h
@@ -708,6 +708,9 @@ class AudioEngine  : public juce::AudioIODeviceCallback,
     std::atomic<int> midiLateEventCount { 0 };
     std::atomic<int> midiMaxEventsPerBlock { 0 };
     std::atomic<int> midiLastComputedSampleOffset { 0 };
+    std::atomic<int> midiLastInputFanoutCount { 0 };
+    std::atomic<int> midiMaxInputFanoutCount { 0 };
+    std::atomic<int> midiMappedParameterUpdateCount { 0 };
     ProcessingPrecisionMode processingPrecisionMode { ProcessingPrecisionMode::Float32 };
     
     // Master FX (Phase 5)
@@ -840,6 +843,7 @@ class AudioEngine  : public juce::AudioIODeviceCallback,
     float spectrumInputBuffer[FFT_SIZE * 2] = {};  // ring buffer for FFT input
     float spectrumOutputBuffer[FFT_SIZE] = {};      // magnitude spectrum
     int spectrumWritePos { 0 };
+    int spectrumFftDecimationCounter { 0 };
     bool spectrumReady { false };
     juce::CriticalSection spectrumLock;
     std::atomic<uint64> spectrumFftPublishCount { 0 };
diff --git a/Source/CrashDiagnostics.cpp b/Source/CrashDiagnostics.cpp
new file mode 100644
index 0000000..7561d3b
--- /dev/null
+++ b/Source/CrashDiagnostics.cpp
@@ -0,0 +1,109 @@
+#include "CrashDiagnostics.h"
+
+#include <mutex>
+
+#if JUCE_WINDOWS
+ #include <windows.h>
+ #include <dbghelp.h>
+#endif
+
+namespace
+{
+std::once_flag installOnce;
+
+juce::File getDiagnosticsDirectory()
+{
+    auto dir = juce::File::getSpecialLocation(juce::File::userDocumentsDirectory)
+        .getChildFile("OpenStudio");
+    dir.createDirectory();
+    return dir;
+}
+
+void rotateIfLarge(const juce::File& file)
+{
+    constexpr juce::int64 maxBytes = 512 * 1024;
+    if (!file.existsAsFile() || file.getSize() <= maxBytes)
+        return;
+
+    const auto archived = file.getSiblingFile(file.getFileNameWithoutExtension() + ".1." + file.getFileExtension());
+    archived.deleteFile();
+    file.moveFileTo(archived);
+}
+
+#if JUCE_WINDOWS
+LONG WINAPI openStudioUnhandledExceptionFilter(EXCEPTION_POINTERS* exceptionInfo)
+{
+    const auto dumpFile = OpenStudioCrashDiagnostics::getLastCrashDumpFile();
+    HANDLE dumpHandle = CreateFileW(dumpFile.getFullPathName().toWideCharPointer(),
+                                    GENERIC_WRITE,
+                                    0,
+                                    nullptr,
+                                    CREATE_ALWAYS,
+                                    FILE_ATTRIBUTE_NORMAL,
+                                    nullptr);
+
+    if (dumpHandle != INVALID_HANDLE_VALUE)
+    {
+        MINIDUMP_EXCEPTION_INFORMATION dumpExceptionInfo {};
+        dumpExceptionInfo.ThreadId = GetCurrentThreadId();
+        dumpExceptionInfo.ExceptionPointers = exceptionInfo;
+        dumpExceptionInfo.ClientPointers = FALSE;
+
+        MiniDumpWriteDump(GetCurrentProcess(),
+                          GetCurrentProcessId(),
+                          dumpHandle,
+                          MiniDumpNormal,
+                          exceptionInfo != nullptr ? &dumpExceptionInfo : nullptr,
+                          nullptr,
+                          nullptr);
+        CloseHandle(dumpHandle);
+    }
+
+    juce::String detail = "dump=" + dumpFile.getFullPathName();
+    if (exceptionInfo != nullptr && exceptionInfo->ExceptionRecord != nullptr)
+    {
+        detail += " code=0x" + juce::String::toHexString(
+            static_cast<juce::int64>(exceptionInfo->ExceptionRecord->ExceptionCode));
+    }
+    OpenStudioCrashDiagnostics::recordBreadcrumb("unhandled_exception", detail);
+    return EXCEPTION_CONTINUE_SEARCH;
+}
+#endif
+}
+
+namespace OpenStudioCrashDiagnostics
+{
+juce::File getBreadcrumbLogFile()
+{
+    return getDiagnosticsDirectory().getChildFile("crash_breadcrumbs.log");
+}
+
+juce::File getLastCrashDumpFile()
+{
+    return getDiagnosticsDirectory().getChildFile("last_crash.dmp");
+}
+
+void recordBreadcrumb(const juce::String& stage, const juce::String& detail)
+{
+    const auto logFile = getBreadcrumbLogFile();
+    rotateIfLarge(logFile);
+
+    juce::String line = juce::Time::getCurrentTime().toString(true, true)
+        + " | " + stage;
+    if (detail.isNotEmpty())
+        line += " | " + detail;
+
+    logFile.appendText(line + "\n");
+}
+
+void installCrashHandlers()
+{
+    std::call_once(installOnce, []
+    {
+#if JUCE_WINDOWS
+        SetUnhandledExceptionFilter(openStudioUnhandledExceptionFilter);
+#endif
+        recordBreadcrumb("crash_handlers_installed");
+    });
+}
+}
diff --git a/Source/CrashDiagnostics.h b/Source/CrashDiagnostics.h
new file mode 100644
index 0000000..b820361
--- /dev/null
+++ b/Source/CrashDiagnostics.h
@@ -0,0 +1,11 @@
+#pragma once
+
+#include <JuceHeader.h>
+
+namespace OpenStudioCrashDiagnostics
+{
+    void installCrashHandlers();
+    void recordBreadcrumb(const juce::String& stage, const juce::String& detail = {});
+    juce::File getBreadcrumbLogFile();
+    juce::File getLastCrashDumpFile();
+}
diff --git a/Source/PeakCache.cpp b/Source/PeakCache.cpp
index 0727504..8dabb20 100644
--- a/Source/PeakCache.cpp
+++ b/Source/PeakCache.cpp
@@ -64,95 +64,83 @@ juce::var PeakCache::getPeaks(const juce::File& audioFile,
                                int startSample,
                                int numPixels) const
 {
-    juce::Array<juce::var> peakData;
-
-    CacheEntry entry;
-    bool loaded = false;
-
-    // Try memory cache
-    {
-        const juce::ScopedLock sl(cacheLock);
-        auto it = memoryCache.find(audioFile.getFullPathName());
-        if (it != memoryCache.end())
-        {
-            entry = it->second;
-            loaded = true;
-        }
-    }
-
-    // Try loading from disk
-    if (!loaded)
+    auto buildResult = [samplesPerPixel, startSample, numPixels](const CacheEntry& entry)
     {
-        auto peakFile = getPeakFilePath(audioFile);
-        if (!peakFile.existsAsFile())
-            peakFile = getLegacyPeakFilePath(audioFile);
+        juce::Array<juce::var> peakData;
+        if (entry.levels.empty())
+            return juce::var(peakData);
 
-        if (peakFile.existsAsFile() && loadFromFile(peakFile, audioFile, entry))
+        // Find the best mipmap level (closest stride <= samplesPerPixel)
+        const MipmapLevel* bestLevel = &entry.levels[0];
+        for (const auto& level : entry.levels)
         {
-            loaded = true;
-            // Store in memory cache for next time
-            const juce::ScopedLock sl(cacheLock);
-            memoryCache[audioFile.getFullPathName()] = entry;
+            if (level.stride <= samplesPerPixel)
+                bestLevel = &level;
         }
-    }
-
-    if (!loaded || entry.levels.empty())
-        return peakData;
-
-    // Find the best mipmap level (closest stride <= samplesPerPixel)
-    const MipmapLevel* bestLevel = &entry.levels[0];
-    for (const auto& level : entry.levels)
-    {
-        if (level.stride <= samplesPerPixel)
-            bestLevel = &level;
-    }
 
-    // Calculate how many source peaks we need per output pixel
-    int ratio = samplesPerPixel / bestLevel->stride;
-    if (ratio < 1) ratio = 1;
+        int ratio = samplesPerPixel / bestLevel->stride;
+        if (ratio < 1) ratio = 1;
 
-    int numChannels = bestLevel->numChannels;
+        const int numChannels = bestLevel->numChannels;
+        const int startPeak = (startSample > 0) ? std::min(startSample / bestLevel->stride, bestLevel->numPeaks - 1) : 0;
+        const int remainingMipmapPeaks = std::max(0, bestLevel->numPeaks - startPeak);
+        const int actualPeaks = std::min(numPixels, remainingMipmapPeaks / std::max(1, ratio));
 
-    // Convert startSample to an index in this mipmap level, clamped to valid range
-    int startPeak = (startSample > 0) ? std::min(startSample / bestLevel->stride, bestLevel->numPeaks - 1) : 0;
-    // remainingPeaks: mipmap-level peaks left after startPeak.
-    // Divide by ratio to get output pixels. (startPeak is in mipmap units, NOT output-pixel units.)
-    int remainingMipmapPeaks = std::max(0, bestLevel->numPeaks - startPeak);
-    int actualPeaks = std::min(numPixels, remainingMipmapPeaks / std::max(1, ratio));
+        peakData.ensureStorageAllocated(1 + actualPeaks * numChannels * 2);
+        peakData.add(juce::var(numChannels));
 
-    peakData.ensureStorageAllocated(1 + actualPeaks * numChannels * 2);
-    peakData.add(juce::var(numChannels));  // Header
-
-    int stride2 = numChannels * 2;  // Floats per peak entry in the data array
-
-    for (int pixel = 0; pixel < actualPeaks; ++pixel)
-    {
-        int srcStart = startPeak + pixel * ratio;
-        int srcEnd = std::min(srcStart + ratio, bestLevel->numPeaks);
-
-        for (int ch = 0; ch < numChannels; ++ch)
+        const int stride2 = numChannels * 2;
+        for (int pixel = 0; pixel < actualPeaks; ++pixel)
         {
-            float minVal = 0.0f;
-            float maxVal = 0.0f;
+            const int srcStart = startPeak + pixel * ratio;
+            const int srcEnd = std::min(srcStart + ratio, bestLevel->numPeaks);
 
-            for (int s = srcStart; s < srcEnd; ++s)
+            for (int ch = 0; ch < numChannels; ++ch)
             {
-                int dataIdx = s * stride2 + ch * 2;
-                if (dataIdx + 1 < (int)bestLevel->data.size())
+                float minVal = 0.0f;
+                float maxVal = 0.0f;
+
+                for (int s = srcStart; s < srcEnd; ++s)
                 {
-                    float mn = bestLevel->data[static_cast<size_t>(dataIdx)];
-                    float mx = bestLevel->data[static_cast<size_t>(dataIdx) + 1];
-                    if (s == srcStart || mn < minVal) minVal = mn;
-                    if (s == srcStart || mx > maxVal) maxVal = mx;
+                    const int dataIdx = s * stride2 + ch * 2;
+                    if (dataIdx + 1 < static_cast<int>(bestLevel->data.size()))
+                    {
+                        const float mn = bestLevel->data[static_cast<size_t>(dataIdx)];
+                        const float mx = bestLevel->data[static_cast<size_t>(dataIdx) + 1];
+                        if (s == srcStart || mn < minVal) minVal = mn;
+                        if (s == srcStart || mx > maxVal) maxVal = mx;
+                    }
                 }
-            }
 
-            peakData.add(juce::var(minVal));
-            peakData.add(juce::var(maxVal));
+                peakData.add(juce::var(minVal));
+                peakData.add(juce::var(maxVal));
+            }
         }
+
+        return juce::var(peakData);
+    };
+
+    {
+        const juce::ScopedLock sl(cacheLock);
+        auto it = memoryCache.find(audioFile.getFullPathName());
+        if (it != memoryCache.end())
+            return buildResult(it->second);
     }
 
-    return peakData;
+    CacheEntry entry;
+    auto peakFile = getPeakFilePath(audioFile);
+    if (!peakFile.existsAsFile())
+        peakFile = getLegacyPeakFilePath(audioFile);
+
+    if (!peakFile.existsAsFile() || !loadFromFile(peakFile, audioFile, entry))
+        return juce::var(juce::Array<juce::var>());
+
+    auto result = buildResult(entry);
+    {
+        const juce::ScopedLock sl(cacheLock);
+        memoryCache[audioFile.getFullPathName()] = std::move(entry);
+    }
+    return result;
 }
 
 bool PeakCache::loadFromFile(const juce::File& peakFile, const juce::File& audioFile, CacheEntry& entry) const
diff --git a/Source/PeakCache.h b/Source/PeakCache.h
index 35f0a07..d6b5616 100644
--- a/Source/PeakCache.h
+++ b/Source/PeakCache.h
@@ -119,8 +119,9 @@ class PeakCache
     std::set<juce::String> pendingGenerations;
     juce::CriticalSection pendingLock;
 
-    // Background thread pool for concurrent peak generation
-    juce::ThreadPool backgroundPool { juce::jmax(2, juce::SystemStats::getNumCpus() / 2) };
+    // Keep waveform generation serialized and low-impact; concurrent full-file
+    // peak scans can steal disk/CPU from 32/64-sample monitoring callbacks.
+    juce::ThreadPool backgroundPool { 1 };
 
     JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR(PeakCache)
 };
diff --git a/Source/PlaybackEngine.cpp b/Source/PlaybackEngine.cpp
index cc24f82..10b4252 100644
--- a/Source/PlaybackEngine.cpp
+++ b/Source/PlaybackEngine.cpp
@@ -4,11 +4,7 @@
 
 namespace
 {
-#if JUCE_DEBUG
-constexpr bool kAudioPlaybackDebugLogs = true;
-#else
 constexpr bool kAudioPlaybackDebugLogs = false;
-#endif
 
 static void logAudioPlayback(const juce::String& message)
 {
@@ -149,6 +145,7 @@ PlaybackEngine::~PlaybackEngine()
 {
     juce::ScopedLock sl(lock);
     readers.clear();
+    audioDataCache.clear();
     clips.clear();
 }
 
@@ -166,6 +163,7 @@ void PlaybackEngine::preloadReader(const juce::File& file)
     std::unique_ptr<juce::AudioFormatReader> newReader(formatManager.createReaderFor(file));
     if (newReader)
     {
+        preloadAudioData(file, *newReader);
         readers[filePath] = std::move(newReader);
         readerAccessTimes[filePath] = juce::Time::currentTimeMillis();
         evictOldReaders();
@@ -173,15 +171,42 @@ void PlaybackEngine::preloadReader(const juce::File& file)
     }
 }
 
+void PlaybackEngine::preloadAudioData(const juce::File& file, juce::AudioFormatReader& reader)
+{
+    constexpr juce::int64 maxCachedAudioBytesPerFile = 256LL * 1024LL * 1024LL;
+    const auto filePath = file.getFullPathName();
+    const int channels = static_cast<int>(reader.numChannels);
+    const auto length = reader.lengthInSamples;
+    if (channels <= 0 || length <= 0 || length > std::numeric_limits<int>::max())
+    {
+        audioDataCache.erase(filePath);
+        return;
+    }
+
+    const juce::int64 requiredBytes = length * static_cast<juce::int64>(channels) * static_cast<juce::int64>(sizeof(float));
+    if (requiredBytes > maxCachedAudioBytesPerFile)
+    {
+        audioDataCache.erase(filePath);
+        return;
+    }
+
+    auto cached = std::make_shared<CachedAudioData>();
+    cached->sampleRate = reader.sampleRate;
+    cached->lengthInSamples = length;
+    cached->numChannels = channels;
+    cached->buffer.setSize(channels, static_cast<int>(length));
+    if (reader.read(&cached->buffer, 0, static_cast<int>(length), 0, true, true))
+        audioDataCache[filePath] = std::move(cached);
+    else
+        audioDataCache.erase(filePath);
+}
+
 juce::AudioFormatReader* PlaybackEngine::getCachedReader(const juce::File& file)
 {
     // Audio-thread safe: only looks up, never creates readers
     auto it = readers.find(file.getFullPathName());
     if (it != readers.end() && it->second != nullptr)
-    {
-        readerAccessTimes[file.getFullPathName()] = juce::Time::currentTimeMillis();
         return it->second.get();
-    }
     return nullptr;
 }
 
@@ -205,6 +230,7 @@ void PlaybackEngine::evictOldReaders()
     {
         const auto& path = entries[i].second;
         readers.erase(path);
+        audioDataCache.erase(path);
         readerAccessTimes.erase(path);
     }
 
@@ -358,6 +384,7 @@ void PlaybackEngine::replaceClipAudioFile(const juce::String& clipId, const juce
         {
             // Evict old reader so the audio thread stops reading the old file
             readers.erase(clip.audioFile.getFullPathName());
+            audioDataCache.erase(clip.audioFile.getFullPathName());
             readerAccessTimes.erase(clip.audioFile.getFullPathName());
             // Swap in the new file. Corrected files start at sample 0, but restoring
             // the original file should also restore the original trim offset.
@@ -689,6 +716,7 @@ void PlaybackEngine::clearAllClips()
     const int preservedCorrectedCount = static_cast<int>(pitchCorrectedFiles.size());
     clips.clear();
     readers.clear();
+    audioDataCache.clear();
     readerAccessTimes.clear();
     // NOTE: clipPitchPreviews is NOT cleared here — it must survive sync cycles.
     // syncClipsWithBackend calls clearAllClips + re-adds clips, and the preview
@@ -792,6 +820,7 @@ void PlaybackEngine::setClipPitchPreview (const juce::String& clipId,
             if (! usingOriginalAlready)
             {
                 readers.erase (clip.audioFile.getFullPathName());
+                audioDataCache.erase (clip.audioFile.getFullPathName());
                 readerAccessTimes.erase (clip.audioFile.getFullPathName());
                 clip.audioFile = clip.originalAudioFile;
                 clip.offset = clip.originalOffset;
@@ -1222,8 +1251,10 @@ void PlaybackEngine::fillTrackBuffer(const juce::String& trackId,
             if (requestedOutputSamples <= 0)
                 return false;
 
-            auto* reader = getCachedReader (playbackFile);
-            if (reader == nullptr)
+            const auto cacheIt = audioDataCache.find(playbackFile.getFullPathName());
+            const auto cachedAudio = cacheIt != audioDataCache.end() ? cacheIt->second : nullptr;
+            auto* reader = cachedAudio ? nullptr : getCachedReader (playbackFile);
+            if (cachedAudio == nullptr && reader == nullptr)
             {
                 const int missingReaders = missingReaderCount.fetch_add (1, std::memory_order_relaxed) + 1;
                 logAudioPlayback ("fillTrackBuffer missingReader track=" + trackId
@@ -1234,7 +1265,10 @@ void PlaybackEngine::fillTrackBuffer(const juce::String& trackId,
                 return false;
             }
 
-            const double fileSampleRate = reader->sampleRate;
+            if (cachedAudio == nullptr)
+                audioDataCacheMissCount.fetch_add(1, std::memory_order_relaxed);
+
+            const double fileSampleRate = cachedAudio ? cachedAudio->sampleRate : reader->sampleRate;
             const double ratio = fileSampleRate / sampleRate;
             double exactFileStart = juce::jmax (0.0, playbackOffset) * fileSampleRate;
             const double roundedFileStart = std::round (exactFileStart);
@@ -1248,7 +1282,8 @@ void PlaybackEngine::fillTrackBuffer(const juce::String& trackId,
             const double bufferStartPosition = static_cast<double> (readStartOffset) + fileStartFraction;
             int outputSamples = requestedOutputSamples;
             int fileSamplesToRead = static_cast<int> (std::ceil (bufferStartPosition + outputSamples * ratio)) + 3;
-            const juce::int64 fileSamplesAvailable = reader->lengthInSamples - readStartSample;
+            const juce::int64 sourceLengthInSamples = cachedAudio ? cachedAudio->lengthInSamples : reader->lengthInSamples;
+            const juce::int64 fileSamplesAvailable = sourceLengthInSamples - readStartSample;
             if (fileSamplesAvailable <= 0)
                 return false;
             if (fileSamplesAvailable < fileSamplesToRead)
@@ -1260,7 +1295,7 @@ void PlaybackEngine::fillTrackBuffer(const juce::String& trackId,
             if (outputSamples <= 0 || fileSamplesToRead <= 0)
                 return false;
 
-            const int readerChannels = static_cast<int> (reader->numChannels);
+            const int readerChannels = cachedAudio ? cachedAudio->numChannels : static_cast<int> (reader->numChannels);
             if (reusableFileBuffer.getNumChannels() < readerChannels
                 || reusableFileBuffer.getNumSamples() < fileSamplesToRead)
             {
@@ -1269,7 +1304,16 @@ void PlaybackEngine::fillTrackBuffer(const juce::String& trackId,
                 fileBufferResizeCount.fetch_add (1, std::memory_order_relaxed);
             }
             reusableFileBuffer.clear (0, fileSamplesToRead);
-            reader->read (&reusableFileBuffer, 0, fileSamplesToRead, readStartSample, true, true);
+            if (cachedAudio)
+            {
+                const int sourceStart = static_cast<int>(readStartSample);
+                for (int ch = 0; ch < readerChannels; ++ch)
+                    reusableFileBuffer.copyFrom(ch, 0, cachedAudio->buffer, ch, sourceStart, fileSamplesToRead);
+            }
+            else
+            {
+                reader->read (&reusableFileBuffer, 0, fileSamplesToRead, readStartSample, true, true);
+            }
 
             const bool allowLivePitchPreviewForChunk = ! usingRenderedPreviewSegment && ! usingCorrectedSource;
             const double chunkClipStart = currentTime + (static_cast<double> (outputStart) / sampleRate) - clip.startTime;
@@ -1717,10 +1761,16 @@ void PlaybackEngine::fillTrackBuffer(const juce::String& trackId,
         } // end real-time path
     }
 
-    const float playbackPeak = peakForBuffer(buffer, numSamples);
+    const bool shouldUpdatePlaybackPeak = mixedClipCount > 0 && ((fillCall & 15) == 0 || shouldLogDetailed);
+    const float playbackPeak = mixedClipCount == 0
+        ? 0.0f
+        : (shouldUpdatePlaybackPeak
+            ? peakForBuffer(buffer, numSamples)
+            : lastTrackPlaybackPeak.load(std::memory_order_relaxed));
     lastOverlappingClipCount.store(overlappingClipCount, std::memory_order_relaxed);
     lastMixedClipCount.store(mixedClipCount, std::memory_order_relaxed);
-    lastTrackPlaybackPeak.store(playbackPeak, std::memory_order_relaxed);
+    if (shouldUpdatePlaybackPeak || mixedClipCount == 0)
+        lastTrackPlaybackPeak.store(playbackPeak, std::memory_order_relaxed);
     if (shouldLogDetailed || (overlappingClipCount > 0 && mixedClipCount == 0))
     {
         logAudioPlayback("fillTrackBuffer summary track=" + trackId
diff --git a/Source/PlaybackEngine.h b/Source/PlaybackEngine.h
index d70cb26..1b163c7 100644
--- a/Source/PlaybackEngine.h
+++ b/Source/PlaybackEngine.h
@@ -234,6 +234,8 @@ class PlaybackEngine
     int getPitchShiftWorkBufferResizeCount() const { return pitchShiftWorkBufferResizeCount.load(std::memory_order_relaxed); }
     int getRenderResampleScratchResizeCount() const { return renderResampleScratchResizeCount.load(std::memory_order_relaxed); }
     int getChunkBoundaryReserveCount() const { return chunkBoundaryReserveCount.load(std::memory_order_relaxed); }
+    int getAudioDataCacheMissCount() const { return audioDataCacheMissCount.load(std::memory_order_relaxed); }
+    int getAudioDataCachedFileCount() const { const juce::ScopedLock sl(lock); return static_cast<int>(audioDataCache.size()); }
 
     // Thread-safe snapshot of all clips (for offline rendering)
     std::vector<ClipInfo> getClipSnapshot() const;
@@ -247,6 +249,14 @@ class PlaybackEngine
 private:
     std::vector<ClipInfo> clips;
     std::map<juce::String, std::unique_ptr<juce::AudioFormatReader>> readers;
+    struct CachedAudioData
+    {
+        juce::AudioBuffer<float> buffer;
+        double sampleRate = 0.0;
+        juce::int64 lengthInSamples = 0;
+        int numChannels = 0;
+    };
+    std::map<juce::String, std::shared_ptr<CachedAudioData>> audioDataCache;
     juce::AudioFormatManager formatManager;
     mutable juce::CriticalSection lock;
 
@@ -266,6 +276,7 @@ class PlaybackEngine
 
     // Pre-load reader on message thread so it's ready for audio thread
     void preloadReader(const juce::File& file);
+    void preloadAudioData(const juce::File& file, juce::AudioFormatReader& reader);
 
     // Legacy: get or create reader (only called from message thread now)
     juce::AudioFormatReader* getReader(const juce::File& file);
@@ -340,6 +351,7 @@ class PlaybackEngine
     std::atomic<int> pitchShiftWorkBufferResizeCount { 0 };
     std::atomic<int> renderResampleScratchResizeCount { 0 };
     std::atomic<int> chunkBoundaryReserveCount { 0 };
+    std::atomic<int> audioDataCacheMissCount { 0 };
 
     JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR(PlaybackEngine)
 };
diff --git a/Source/PluginWindowManager.cpp b/Source/PluginWindowManager.cpp
index c8c4a06..55b10e2 100644
--- a/Source/PluginWindowManager.cpp
+++ b/Source/PluginWindowManager.cpp
@@ -165,12 +165,14 @@ std::optional<PluginWindowManager::PluginEditorTarget> PluginWindowManager::Plug
 PluginWindowManager::PluginWindow::PluginWindow(PluginWindowManager& ownerIn,
                                                 juce::AudioProcessor& proc,
                                                 const juce::String& title,
-                                                const PluginEditorTarget& targetIn)
+                                                const PluginEditorTarget& targetIn,
+                                                std::shared_ptr<juce::AudioProcessor> keepAliveIn)
     : DocumentWindow(title,
                      juce::Colours::darkgrey,
                      DocumentWindow::allButtons),
       owner(ownerIn),
       processor(proc),
+      keepAlive(std::move(keepAliveIn)),
       target(targetIn)
 {
     setUsingNativeTitleBar(true);
@@ -290,6 +292,36 @@ void PluginWindowManager::openEditor(juce::AudioProcessor* processor, const juce
     activeWindows[processor] = std::move(window);
 }
 
+void PluginWindowManager::openEditor(std::shared_ptr<juce::AudioProcessor> processor, const juce::String& windowTitle,
+                                     const PluginEditorTarget& target)
+{
+    if (!processor)
+        return;
+
+    auto* rawProcessor = processor.get();
+    auto it = activeWindows.find(rawProcessor);
+    if (it != activeWindows.end())
+    {
+        if (it->second != nullptr)
+        {
+            it->second->setVisible(true);
+            positionWindow(*it->second);
+            it->second->toFront(true);
+            logWindowEvent(target, "editor_reopened_to_front");
+        }
+        return;
+    }
+
+    if (!rawProcessor->hasEditor())
+        return;
+
+    auto window = std::make_unique<PluginWindow>(*this, *rawProcessor, windowTitle, target, std::move(processor));
+    if (window->getContentComponent() == nullptr)
+        return;
+
+    activeWindows[rawProcessor] = std::move(window);
+}
+
 void PluginWindowManager::closeEditor(juce::AudioProcessor* processor)
 {
     if (processor == nullptr)
diff --git a/Source/PluginWindowManager.h b/Source/PluginWindowManager.h
index 533d1a8..109c94c 100644
--- a/Source/PluginWindowManager.h
+++ b/Source/PluginWindowManager.h
@@ -38,6 +38,8 @@ class PluginWindowManager : public juce::Timer
     // Open plugin editor for a specific processor
     void openEditor(juce::AudioProcessor* processor, const juce::String& windowTitle,
                     const PluginEditorTarget& target);
+    void openEditor(std::shared_ptr<juce::AudioProcessor> processor, const juce::String& windowTitle,
+                    const PluginEditorTarget& target);
     
     // Close editor for a specific processor (async, safe from any thread)
     void closeEditor(juce::AudioProcessor* processor);
@@ -75,7 +77,8 @@ class PluginWindowManager : public juce::Timer
     struct PluginWindow : public juce::DocumentWindow
     {
         PluginWindow(PluginWindowManager& ownerIn, juce::AudioProcessor& proc,
-                     const juce::String& title, const PluginEditorTarget& targetIn);
+                     const juce::String& title, const PluginEditorTarget& targetIn,
+                     std::shared_ptr<juce::AudioProcessor> keepAliveIn = {});
         ~PluginWindow() override;
         
         void closeButtonPressed() override;
@@ -84,6 +87,7 @@ class PluginWindowManager : public juce::Timer
         
         PluginWindowManager& owner;
         juce::AudioProcessor& processor;
+        std::shared_ptr<juce::AudioProcessor> keepAlive;
         PluginEditorTarget target;
     };
 
diff --git a/Source/S13PitchCorrector.h b/Source/S13PitchCorrector.h
index 2e5faf4..af8ea53 100644
--- a/Source/S13PitchCorrector.h
+++ b/Source/S13PitchCorrector.h
@@ -3,7 +3,14 @@
 #include <JuceHeader.h>
 #include "PitchDetector.h"
 #include "PitchMapper.h"
+#if defined(_MSC_VER)
+ #pragma warning(push)
+ #pragma warning(disable: 4244 4267 4305 4456)
+#endif
 #include "signalsmith-stretch.h"
+#if defined(_MSC_VER)
+ #pragma warning(pop)
+#endif
 #include <atomic>
 #include <vector>
 
diff --git a/Source/TrackProcessor.cpp b/Source/TrackProcessor.cpp
index bef65d6..f0088e7 100644
--- a/Source/TrackProcessor.cpp
+++ b/Source/TrackProcessor.cpp
@@ -3,6 +3,7 @@
 // Maximum channel count for the pre-allocated FX processing buffer.
 // Must be large enough for multi-output instruments (e.g. Komplete Kontrol = 32 out).
 static constexpr int kMaxFXChannels = 64;
+static constexpr int kMinimumHostedPluginBlockSize = 512;
 
 // Debug logging — always active for FX diagnostics
 static void logToDisk(const juce::String& msg)
@@ -15,6 +16,12 @@ static void logToDisk(const juce::String& msg)
     f.appendText(juce::Time::getCurrentTime().toString(true, true) + ": " + msg + "\n");
 }
 
+static int getSafeHostedPluginBlockSize(int requestedBlockSize)
+{
+    return juce::jmax(kMinimumHostedPluginBlockSize,
+                      requestedBlockSize > 0 ? requestedBlockSize : kMinimumHostedPluginBlockSize);
+}
+
 static void computePanLawGains(PanLaw panLaw, float pan, float volumeGain,
                                float& leftGain, float& rightGain)
 {
@@ -503,7 +510,8 @@ void TrackProcessor::changeProgramName (int index, const juce::String& newName)
 static void preparePluginPreservingLayout(juce::AudioProcessor* plugin, double sampleRate,
                                           int maxBlock, ProcessingPrecisionMode precisionMode)
 {
-    const juce::ScopedLock callbackLock(plugin->getCallbackLock());
+    const juce::ScopedLock pluginCallbackGuard(plugin->getCallbackLock());
+    const int safeMaxBlock = getSafeHostedPluginBlockSize(maxBlock);
 
     if (plugin->supportsDoublePrecisionProcessing())
     {
@@ -514,14 +522,23 @@ static void preparePluginPreservingLayout(juce::AudioProcessor* plugin, double s
     }
 
     auto savedLayout = plugin->getBusesLayout();
-    plugin->prepareToPlay(sampleRate, maxBlock);
+    plugin->prepareToPlay(sampleRate, safeMaxBlock);
 
     // If prepareToPlay changed the bus layout, restore and re-prepare so the
     // plugin operates with its original (createPluginInstance) channel config.
     if (plugin->getBusesLayout() != savedLayout)
     {
-        plugin->setBusesLayout(savedLayout);
-        plugin->prepareToPlay(sampleRate, maxBlock);
+        if (plugin->setBusesLayout(savedLayout))
+        {
+            plugin->prepareToPlay(sampleRate, safeMaxBlock);
+        }
+        else
+        {
+            juce::Logger::writeToLog("TrackProcessor: Plugin refused saved bus layout during prepare: "
+                                     + plugin->getName()
+                                     + " requestedBlock=" + juce::String(maxBlock)
+                                     + " safeBlock=" + juce::String(safeMaxBlock));
+        }
     }
 }
 
@@ -551,7 +568,7 @@ void TrackProcessor::prepareToPlay (double sampleRate, int samplesPerBlock)
 
     // Prepare plugins with the actual device block size so realtime hosting
     // matches the hardware callback configuration.
-    int pluginMaxBlock = samplesPerBlock > 0 ? samplesPerBlock : 512;
+    int pluginMaxBlock = getSafeHostedPluginBlockSize(samplesPerBlock);
 
     // Propagate new sample rate and buffer size to all internal FX plugins,
     // preserving each plugin's bus layout (see preparePluginPreservingLayout).
@@ -677,8 +694,9 @@ void TrackProcessor::processBlockInternal (juce::AudioBuffer<float>& buffer, juc
 
     // One-time diagnostic log on first processBlock call with FX loaded
     // (helps diagnose crashes — last log entry before crash shows where it stopped)
+    static bool enableRealtimeFirstFXLog = false;
     static bool loggedFirstFXProcess = false;
-    if (hasAnyFX && !loggedFirstFXProcess)
+    if (enableRealtimeFirstFXLog && hasAnyFX && !loggedFirstFXProcess)
     {
         loggedFirstFXProcess = true;
         logToDisk("TrackProcessor::processBlock FIRST CALL WITH FX");
@@ -734,6 +752,13 @@ void TrackProcessor::processBlockInternal (juce::AudioBuffer<float>& buffer, juc
     // Channel-safe FX processing helper
     auto safeProcessFX = [&](juce::AudioProcessor* proc, bool forceFloat, bool isInputFXChain, int fxIndex)
     {
+        juce::ScopedTryLock pluginProcessLock(proc->getCallbackLock());
+        if (!pluginProcessLock.isLocked())
+        {
+            pluginBusySkipCount.fetch_add(1, std::memory_order_relaxed);
+            return;
+        }
+
         applyPluginAutomationForProcessor(proc, isInputFXChain, fxIndex, blockTimeSeconds);
 
         // Compute isARAProcessor first so we can gate expensive QPC calls on it.
@@ -1036,6 +1061,13 @@ void TrackProcessor::processBlockInternal (juce::AudioBuffer<float>& buffer, juc
 
         if (hasSidechain)
         {
+            juce::ScopedTryLock pluginProcessLock(proc->getCallbackLock());
+            if (!pluginProcessLock.isLocked())
+            {
+                pluginBusySkipCount.fetch_add(1, std::memory_order_relaxed);
+                continue;
+            }
+
             applyPluginAutomationForProcessor(proc, false, fxIdx, blockTimeSeconds);
 
             // Sidechain path: expand buffer to include sidechain channels after
@@ -1393,7 +1425,7 @@ bool TrackProcessor::addInputFX(std::unique_ptr<juce::AudioProcessor> plugin, do
     if (!plugin)
         return false;
 
-    const juce::ScopedLock callbackLock(getCallbackLock());
+    const juce::ScopedLock processorCallbackGuard(getCallbackLock());
 
     // Only set stereo layout if the plugin has no channels configured
     // (some plugins start at 0-in/0-out and need explicit bus setup).
@@ -1412,9 +1444,9 @@ bool TrackProcessor::addInputFX(std::unique_ptr<juce::AudioProcessor> plugin, do
     // Prefer caller-supplied rate (from AudioEngine), fall back to our own,
     // then to 44100 as last resort. Use the realtime device block size when known.
     double sr = callerSampleRate > 0 ? callerSampleRate : getSampleRate();
-    int bs = callerBlockSize > 0 ? callerBlockSize : getBlockSize();
+    int bs = getSafeHostedPluginBlockSize(callerBlockSize > 0 ? callerBlockSize : getBlockSize());
     if (sr <= 0) sr = 44100.0;
-    if (bs <= 0) bs = 512;
+    if (bs <= 0) bs = kMinimumHostedPluginBlockSize;
 
     // Prepare while preserving bus layout (see preparePluginPreservingLayout).
     preparePluginPreservingLayout(plugin.get(), sr, bs,
@@ -1435,7 +1467,7 @@ bool TrackProcessor::addTrackFX(std::unique_ptr<juce::AudioProcessor> plugin, do
     if (!plugin)
         return false;
 
-    const juce::ScopedLock callbackLock(getCallbackLock());
+    const juce::ScopedLock processorCallbackGuard(getCallbackLock());
 
     // Only set stereo layout if the plugin has no channels configured
     // (same rationale as addInputFX — preserve the plugin's default layout).
@@ -1450,9 +1482,9 @@ bool TrackProcessor::addTrackFX(std::unique_ptr<juce::AudioProcessor> plugin, do
     // Prefer caller-supplied rate (from AudioEngine), fall back to our own,
     // then to 44100 as last resort. Use the realtime device block size when known.
     double sr = callerSampleRate > 0 ? callerSampleRate : getSampleRate();
-    int bs = callerBlockSize > 0 ? callerBlockSize : getBlockSize();
+    int bs = getSafeHostedPluginBlockSize(callerBlockSize > 0 ? callerBlockSize : getBlockSize());
     if (sr <= 0) sr = 44100.0;
-    if (bs <= 0) bs = 512;
+    if (bs <= 0) bs = kMinimumHostedPluginBlockSize;
 
     // Prepare while preserving bus layout (see preparePluginPreservingLayout).
     preparePluginPreservingLayout(plugin.get(), sr, bs,
@@ -1470,7 +1502,7 @@ bool TrackProcessor::addTrackFX(std::unique_ptr<juce::AudioProcessor> plugin, do
 
 void TrackProcessor::removeInputFX(int index)
 {
-    const juce::ScopedLock callbackLock(getCallbackLock());
+    const juce::ScopedLock processorCallbackGuard(getCallbackLock());
     if (index >= 0 && index < (int)inputFXPlugins.size())
     {
         inputFXPlugins.erase(inputFXPlugins.begin() + index);
@@ -1497,7 +1529,7 @@ void TrackProcessor::removeInputFX(int index)
 
 void TrackProcessor::removeTrackFX(int index)
 {
-    const juce::ScopedLock callbackLock(getCallbackLock());
+    const juce::ScopedLock processorCallbackGuard(getCallbackLock());
     if (index >= 0 && index < (int)trackFXPlugins.size())
     {
         if (index == araFXIndex)
@@ -1537,7 +1569,7 @@ void TrackProcessor::removeTrackFX(int index)
 
 void TrackProcessor::bypassInputFX(int index, bool bypassed)
 {
-    const juce::ScopedLock callbackLock(getCallbackLock());
+    const juce::ScopedLock processorCallbackGuard(getCallbackLock());
     if (index >= 0 && index < (int)inputFXPlugins.size())
     {
         if (bypassed)
@@ -1551,7 +1583,7 @@ void TrackProcessor::bypassInputFX(int index, bool bypassed)
 
 void TrackProcessor::bypassTrackFX(int index, bool bypassed)
 {
-    const juce::ScopedLock callbackLock(getCallbackLock());
+    const juce::ScopedLock processorCallbackGuard(getCallbackLock());
     if (index >= 0 && index < (int)trackFXPlugins.size())
     {
         if (bypassed)
@@ -1607,6 +1639,20 @@ const juce::AudioProcessor* TrackProcessor::getTrackFXProcessor(int index) const
     return nullptr;
 }
 
+std::shared_ptr<juce::AudioProcessor> TrackProcessor::getInputFXProcessorShared(int index) const
+{
+    if (index >= 0 && index < (int)inputFXPlugins.size())
+        return inputFXPlugins[static_cast<size_t>(index)];
+    return {};
+}
+
+std::shared_ptr<juce::AudioProcessor> TrackProcessor::getTrackFXProcessorShared(int index) const
+{
+    if (index >= 0 && index < (int)trackFXPlugins.size())
+        return trackFXPlugins[static_cast<size_t>(index)];
+    return {};
+}
+
 std::shared_ptr<const std::vector<std::shared_ptr<juce::AudioProcessor>>> TrackProcessor::getInputFXSnapshot() const
 {
     return std::atomic_load_explicit(&realtimeInputFXSnapshot, std::memory_order_acquire);
@@ -1639,7 +1685,7 @@ std::shared_ptr<const std::map<int, bool>> TrackProcessor::getTrackFXPrecisionOv
 
 bool TrackProcessor::reorderInputFX(int fromIndex, int toIndex)
 {
-    const juce::ScopedLock callbackLock(getCallbackLock());
+    const juce::ScopedLock processorCallbackGuard(getCallbackLock());
     if (fromIndex < 0 || fromIndex >= (int)inputFXPlugins.size() ||
         toIndex < 0 || toIndex >= (int)inputFXPlugins.size() ||
         fromIndex == toIndex)
@@ -1683,7 +1729,7 @@ bool TrackProcessor::reorderInputFX(int fromIndex, int toIndex)
 
 bool TrackProcessor::reorderTrackFX(int fromIndex, int toIndex)
 {
-    const juce::ScopedLock callbackLock(getCallbackLock());
+    const juce::ScopedLock processorCallbackGuard(getCallbackLock());
     if (fromIndex < 0 || fromIndex >= (int)trackFXPlugins.size() ||
         toIndex < 0 || toIndex >= (int)trackFXPlugins.size() ||
         fromIndex == toIndex)
@@ -1918,13 +1964,13 @@ void TrackProcessor::fillSendBuffer(int sendIndex, const juce::AudioBuffer<float
 void TrackProcessor::setInstrument(std::unique_ptr<juce::AudioPluginInstance> plugin,
                                    double callerSampleRate, int callerBlockSize)
 {
-    const juce::ScopedLock callbackLock(getCallbackLock());
+    const juce::ScopedLock processorCallbackGuard(getCallbackLock());
     if (plugin)
     {
         double sr = callerSampleRate > 0 ? callerSampleRate : getSampleRate();
-        int bs = callerBlockSize > 0 ? callerBlockSize : getBlockSize();
+        int bs = getSafeHostedPluginBlockSize(callerBlockSize > 0 ? callerBlockSize : getBlockSize());
         if (sr <= 0) sr = 44100.0;
-        if (bs <= 0) bs = 512;
+        if (bs <= 0) bs = kMinimumHostedPluginBlockSize;
 
         preparePluginPreservingLayout(plugin.get(), sr, bs,
                                       resolvePluginPrecisionMode(processingPrecisionMode,
@@ -2167,7 +2213,7 @@ void TrackProcessor::setInputFXPrecisionOverride(int index, bool forceFloat)
     if (auto* plugin = inputFXPlugins[static_cast<size_t>(index)].get())
     {
         double sr = getSampleRate() > 0 ? getSampleRate() : 44100.0;
-        int bs = getBlockSize() > 0 ? getBlockSize() : 512;
+        int bs = getSafeHostedPluginBlockSize(getBlockSize());
         preparePluginPreservingLayout(plugin, sr, bs,
                                       resolvePluginPrecisionMode(processingPrecisionMode, forceFloat));
     }
@@ -2184,7 +2230,7 @@ void TrackProcessor::setTrackFXPrecisionOverride(int index, bool forceFloat)
     if (auto* plugin = trackFXPlugins[static_cast<size_t>(index)].get())
     {
         double sr = getSampleRate() > 0 ? getSampleRate() : 44100.0;
-        int bs = getBlockSize() > 0 ? getBlockSize() : 512;
+        int bs = getSafeHostedPluginBlockSize(getBlockSize());
         preparePluginPreservingLayout(plugin, sr, bs,
                                       resolvePluginPrecisionMode(processingPrecisionMode, forceFloat));
     }
@@ -2198,7 +2244,7 @@ void TrackProcessor::setInstrumentPrecisionOverride(bool forceFloat)
     if (instrumentPlugin)
     {
         double sr = getSampleRate() > 0 ? getSampleRate() : 44100.0;
-        int bs = getBlockSize() > 0 ? getBlockSize() : 512;
+        int bs = getSafeHostedPluginBlockSize(getBlockSize());
         preparePluginPreservingLayout(instrumentPlugin.get(), sr, bs,
                                       resolvePluginPrecisionMode(processingPrecisionMode, forceFloat));
     }
@@ -2230,14 +2276,14 @@ bool TrackProcessor::getTrackFXBypassed(int index) const
 
 void TrackProcessor::setProcessingPrecisionMode(ProcessingPrecisionMode mode)
 {
-    const juce::ScopedLock callbackLock(getCallbackLock());
+    const juce::ScopedLock processorCallbackGuard(getCallbackLock());
     if (processingPrecisionMode == mode)
         return;
 
     processingPrecisionMode = mode;
 
     double sr = getSampleRate() > 0 ? getSampleRate() : 44100.0;
-    int bs = getBlockSize() > 0 ? getBlockSize() : 512;
+    int bs = getSafeHostedPluginBlockSize(getBlockSize());
 
     for (int index = 0; index < static_cast<int>(inputFXPlugins.size()); ++index)
         if (auto* plugin = inputFXPlugins[static_cast<size_t>(index)].get())
@@ -2341,7 +2387,7 @@ void TrackProcessor::setOutputChannels(int startChannel, int numChannels)
 
 void TrackProcessor::setMIDIOutputDevice(const juce::String& deviceName)
 {
-    const juce::ScopedLock callbackLock(getCallbackLock());
+    const juce::ScopedLock processorCallbackGuard(getCallbackLock());
     if (deviceName == midiOutputDeviceName)
         return;
 
diff --git a/Source/TrackProcessor.h b/Source/TrackProcessor.h
index 9c56aab..a4dab27 100644
--- a/Source/TrackProcessor.h
+++ b/Source/TrackProcessor.h
@@ -154,6 +154,8 @@ class TrackProcessor  : public juce::AudioProcessor
     const juce::AudioProcessor* getInputFXProcessor(int index) const;
     juce::AudioProcessor* getTrackFXProcessor(int index);
     const juce::AudioProcessor* getTrackFXProcessor(int index) const;
+    std::shared_ptr<juce::AudioProcessor> getInputFXProcessorShared(int index) const;
+    std::shared_ptr<juce::AudioProcessor> getTrackFXProcessorShared(int index) const;
     std::shared_ptr<const std::vector<std::shared_ptr<juce::AudioProcessor>>> getInputFXSnapshot() const;
     std::shared_ptr<const std::vector<std::shared_ptr<juce::AudioProcessor>>> getTrackFXSnapshot() const;
     std::shared_ptr<const std::map<int, bool>> getInputFXBypassSnapshot() const;
@@ -225,6 +227,7 @@ class TrackProcessor  : public juce::AudioProcessor
     // Instrument plugin (Phase 2)
     void setInstrument(std::unique_ptr<juce::AudioPluginInstance> plugin, double callerSampleRate = 0.0, int callerBlockSize = 0);
     juce::AudioPluginInstance* getInstrument() const { return instrumentPlugin.get(); }
+    std::shared_ptr<juce::AudioPluginInstance> getInstrumentShared() const { return instrumentPlugin; }
 
     // MIDI intake / scheduling
     bool enqueueMidiMessage(const juce::MidiMessage& message, int sampleOffset = 0);
@@ -239,6 +242,7 @@ class TrackProcessor  : public juce::AudioProcessor
     int getLastBuiltMidiEventCount() const { return lastBuiltMidiEventCount.load(std::memory_order_relaxed); }
     int getMaxBuiltMidiEventCount() const { return maxBuiltMidiEventCount.load(std::memory_order_relaxed); }
     int getRealtimeFallbackReuseCount() const { return realtimeFallbackReuseCount.load(std::memory_order_relaxed); }
+    int getPluginBusySkipCount() const { return pluginBusySkipCount.load(std::memory_order_relaxed); }
 
     void setProcessingPrecisionMode(ProcessingPrecisionMode mode);
     ProcessingPrecisionMode getProcessingPrecisionMode() const { return processingPrecisionMode; }
@@ -518,6 +522,7 @@ class TrackProcessor  : public juce::AudioProcessor
     std::unique_ptr<juce::MidiOutput> midiOutputDevice;
     juce::AudioBuffer<float> realtimeFallbackBuffer;
     std::atomic<int> realtimeFallbackReuseCount { 0 };
+    std::atomic<int> pluginBusySkipCount { 0 };
 
     struct PendingMIDIEvent
     {
diff --git a/docs/implemented_features.md b/docs/implemented_features.md
new file mode 100644
index 0000000..808be4a
--- /dev/null
+++ b/docs/implemented_features.md
@@ -0,0 +1,206 @@
+# Implemented DAW Features
+
+This audit treats the codebase as the source of truth: `CMakeLists.txt`, `Source/*`, `frontend/src/App.tsx`, `frontend/src/store/useDAWStore.ts`, store action modules, `frontend/src/store/actionRegistry.ts`, and mounted React panels/modals.
+
+Features are sorted by impact first, then complexity.
+
+Ratings:
+
+- `H`: High
+- `M`: Medium
+- `L`: Low
+
+## Core Engine / Transport
+
+| Feature | Impact | Complexity |
+|---|---:|---:|
+| JUCE audio engine with React/WebView2 frontend bridge | H | H |
+| Real-time playback engine with sample-rate-aware clip mixing | H | H |
+| Audio device setup: driver, I/O, sample rate, buffer, channels | H | H |
+| Multitrack audio recording with armed tracks, monitoring, punch range | H | H |
+| Transport: play, stop, pause, record, seek, loop, current time | H | M |
+| Tempo, time signature, tap tempo, tempo markers | H | M |
+| Metronome with accenting, volume, custom sounds, render-to-track | M | M |
+| Background waveform peak cache and recording waveform previews | H | H |
+| MIDI recording preview and completed MIDI clip handoff | H | M |
+
+## Arrangement / Editing
+
+| Feature | Impact | Complexity |
+|---|---:|---:|
+| Konva-based timeline with ruler, grid, zoom, scroll, snap | H | H |
+| Audio and MIDI clip creation, import, drag/drop, move, trim, resize | H | H |
+| Multi-clip and multi-track selection | H | M |
+| Split, cut, copy, paste, duplicate, delete, nudge, fine nudge | H | M |
+| Time selection editing: cut, copy, delete, insert silence | H | H |
+| Razor edit areas and razor content deletion | H | H |
+| Slip editing, free item positioning, ripple modes | H | H |
+| Clip fades, clip volume, gain envelopes, mute, lock, color | H | M |
+| Clip reverse, normalize, time stretch, pitch shift | H | H |
+| Auto-crossfade and crossfade editor | H | M |
+| Takes: explode, implode, active-take style state | M | M |
+| Markers, named markers, regions, region manager | H | M |
+| Tempo marker support | H | M |
+| Quantize selected clips | M | M |
+
+## Mixing / Routing / Metering
+
+| Feature | Impact | Complexity |
+|---|---:|---:|
+| Mixer panel, channel strips, master strip, detached mixer | H | H |
+| Track volume, pan, mute, solo, arm, monitor controls | H | M |
+| Master volume, pan, mute, mono, master automation | H | M |
+| Peak/RMS metering, master meter, clipping reset | H | H |
+| Track sends, send pan/level/phase, pre/post routing | H | H |
+| Routing matrix and track routing modal | H | H |
+| Bus tracks, folder tracks, create bus from selected tracks | H | M |
+| Track groups / linked group params | M | H |
+| Sidechain routing into plugins | H | H |
+| Phase invert, stereo width, pan law, DC offset handling | M | M |
+| Output channel selection, track channel count, playback offset | M | M |
+| LUFS measurement, phase correlation, spectrum data | M | H |
+| Channel strip EQ modal | M | M |
+
+## Plugins / FX / Scripting
+
+| Feature | Impact | Complexity |
+|---|---:|---:|
+| Plugin scanning/loading for hosted FX formats, primarily VST3 with CLAP/LV2 code paths | H | H |
+| Native plugin editor window management | H | H |
+| Input FX, track FX, master FX, monitoring FX chains | H | H |
+| Add, remove, bypass, reorder FX chains | H | M |
+| Plugin parameters, presets, state save/load, A/B compare | H | H |
+| Plugin MIDI learn and parameter mapping | H | H |
+| Processing precision override / hybrid precision support | M | H |
+| Plugin capability matrix, guardrails, release benchmark hooks | M | H |
+| Built-in EQ, compressor, gate, limiter, delay, reverb, chorus, saturator | H | H |
+| Built-in real-time pitch corrector FX | H | H |
+| Built-in FX editors and oversampling controls | M | H |
+| S13FX / JSFX-style script effects with sliders and reload | H | H |
+| S13FX `@gfx` native editor support | M | H |
+| Lua script execution, script listing, script editor UI | M | H |
+
+## MIDI / Instruments
+
+| Feature | Impact | Complexity |
+|---|---:|---:|
+| MIDI device enumeration, input open/close, output routing | H | H |
+| MIDI track type, instrument track type, MIDI channel routing | H | M |
+| MIDI clips with note storage and playback scheduling | H | H |
+| MIDI recording into clips with live preview | H | H |
+| Piano roll editor | H | H |
+| MIDI note draw/edit/select, velocity, CC editing | H | H |
+| Virtual piano keyboard | M | M |
+| Step sequencer and step input state/actions | M | M |
+| MIDI transforms: transpose, velocity scale, reverse, invert | M | M |
+| MIDI import/export and project MIDI export | H | M |
+| Load/open virtual instrument on instrument tracks | H | H |
+
+## Pitch / Audio Analysis
+
+| Feature | Impact | Complexity |
+|---|---:|---:|
+| Monophonic pitch analysis with YIN contour and note segmentation | H | H |
+| Graphical pitch editor with blobs, contour, piano grid, zoom/scroll | H | H |
+| Pitch tools: pitch, drift, vibrato, transition, draw, split | H | H |
+| Scale/key snapping, chromatic snap, correct-pitch macro, scale detection | H | H |
+| Offline monophonic pitch correction render/apply path | H | H |
+| Pitch preview, scrub preview, HQ note/full-clip render states | H | H |
+| Real-time auto-tune style pitch corrector plugin | H | H |
+| Pitch editor undo/redo and A/B style comparison state | M | M |
+| Transient detection and silent-region detection | M | M |
+| Polyphonic pitch detection and MIDI extraction via Basic Pitch / ONNX | H | H |
+| Stem-aware / AI-adjacent audio analysis plumbing | M | H |
+
+## Rendering / Export / Interchange
+
+| Feature | Impact | Complexity |
+|---|---:|---:|
+| Offline project render through the same playback/FX engine | H | H |
+| Render formats: WAV, AIFF, FLAC, MP3, OGG | H | H |
+| Render options: sample rate, bit depth/quality, mono/stereo, normalize, tail | H | M |
+| Dithered render path | M | H |
+| Stem/track render code path and region render matrix UI | H | H |
+| Render queue | M | M |
+| Add rendered output back into project | M | M |
+| Render metadata and filename wildcards | M | M |
+| Render in place, consolidate track, freeze/unfreeze | H | H |
+| Batch audio converter | M | M |
+| DDP export | M | H |
+| Session archive/unarchive | M | H |
+| RPP import and RPP/EDL export | M | H |
+
+## Project / Media Management
+
+| Feature | Impact | Complexity |
+|---|---:|---:|
+| Project new/open/save/save as/close, unsaved changes flow | H | H |
+| Recent projects and startup recovery/diagnostics | M | M |
+| Project tabs | M | M |
+| Project settings, notes, author/revision metadata | M | M |
+| Project templates and save-from-template flow | M | M |
+| Safe-mode project open / FX bypass recovery path | H | M |
+| Media import and drag/drop handling | H | M |
+| Missing media resolver | H | M |
+| Media explorer browse/import | M | M |
+| Clean project directory tool | M | M |
+| Project compare | M | M |
+| Preferences, autosave/backup/display/editing settings | M | M |
+
+## AI / Assisted Audio
+
+| Feature | Impact | Complexity |
+|---|---:|---:|
+| AI tools runtime status, install, cancel, reset flow | H | H |
+| Stem separation workflow with selectable stems and progress polling | H | H |
+| Stem separation result import into new tracks/clips | H | H |
+| AI track type and AI track header controls | M | H |
+| Text-to-music generation workflow | H | H |
+| Lyrics + style music generation workflow | H | H |
+| AI generation progress/cancel handling | M | H |
+
+## Workflow / UI Customization
+
+| Feature | Impact | Complexity |
+|---|---:|---:|
+| Central action registry powering menus, shortcuts, command palette | H | H |
+| Menu bar, main toolbar, custom toolbar strip/editor | H | M |
+| Keyboard shortcuts modal and global shortcut handling | H | M |
+| Command palette | H | M |
+| Screensets/layout state | M | M |
+| Theme editor and custom theme state | M | M |
+| Mouse modifier preferences | M | M |
+| Big clock and timecode display settings | M | M |
+| Help overlay and getting started guide | L | M |
+| App updater hooks | M | M |
+| Crash diagnostics source/module present | M | M |
+
+## Sync / Control / Video / Pro Tools
+
+| Feature | Impact | Complexity |
+|---|---:|---:|
+| MIDI clock output/input | M | H |
+| MTC output/input and sync status/source management | M | H |
+| Control surface manager with MIDI learn/mappings | M | H |
+| OSC connection support | M | H |
+| MCU-style control surface support | M | H |
+| Video window, video metadata/frame extraction, audio extraction path | M | H |
+| Surround/channel layout and VBAP panner code paths | M | H |
+| ARA host controller lifecycle and track ARA status plumbing | H | H |
+
+## Implemented But Partial / Caveated
+
+These have real code surfaces, but should not be counted as fully delivered DAW features yet.
+
+| Feature | Status |
+|---|---|
+| Polyphonic pitch correction / solo-note resynthesis | Detection and MIDI extraction exist; `PolyResynthesizer` is still stub-like |
+| AAF import | Stubbed in session interchange |
+| LTC output | Bridge stub exists, not a real implementation |
+| Live capture start/stop | Bridge stubs exist |
+| Media Explorer audio preview | UI exists; backend preview function appears to only acknowledge/log |
+| AI continuation workflow | Present in workflow list but marked unavailable |
+| Drum editor / media pool | Store toggles/actions exist, but no mounted full UI components were found |
+| Master FX reorder | Track/input reorder exists; master reorder is noted as unsupported in UI |
+| Legacy `executeScript/loadScriptFile` bridge names | Stubbed, but newer `runScript/runScriptCode` paths are implemented |
+
diff --git a/frontend/src/components/ChannelStrip.tsx b/frontend/src/components/ChannelStrip.tsx
index 774d68a..d320fd7 100644
--- a/frontend/src/components/ChannelStrip.tsx
+++ b/frontend/src/components/ChannelStrip.tsx
@@ -128,7 +128,8 @@ export const ChannelStrip = React.memo(function ChannelStrip({
   }, [track.id]);
 
   const [showFXChain, setShowFXChain] = useState(false);
-  const hasFx = track.inputFxCount + track.trackFxCount > 0;
+  const hasBypassableFx = track.inputFxCount + track.trackFxCount > 0;
+  const hasFx = hasBypassableFx || Boolean(track.instrumentPlugin);
 
   // Find the clip under the playhead for gain staging display.
   // Reads currentTime from a snapshot (not a selector) to avoid 60fps re-renders.
@@ -424,7 +425,7 @@ export const ChannelStrip = React.memo(function ChannelStrip({
                 className={classNames(
                   "h-4 w-4 rounded rounded-r-none text-[7px] flex items-center justify-center cursor-pointer transition-colors p-0",
                   hasFx
-                    ? track.fxBypassed
+                    ? hasBypassableFx && track.fxBypassed
                       ? "bg-neutral-800 border border-red-500 text-red-400 shadow-[0_0_6px_rgba(239,68,68,0.4)]"
                       : "bg-neutral-800 border border-green-500 text-green-400 shadow-[0_0_6px_rgba(34,197,94,0.4)]"
                     : "bg-neutral-800 border border-dashed border-neutral-600 text-neutral-500 hover:border-green-500 hover:text-green-500",
@@ -434,7 +435,7 @@ export const ChannelStrip = React.memo(function ChannelStrip({
               </button>
               <button
                 onClick={() => {
-                  if (!hasFx) {
+                  if (!hasBypassableFx) {
                     setShowFXChain(true);
                   } else {
                     toggleTrackFXBypass(track.id);
@@ -442,13 +443,15 @@ export const ChannelStrip = React.memo(function ChannelStrip({
                 }}
                 title={
                   hasFx
-                    ? track.fxBypassed
-                      ? "Enable FX"
-                      : "Bypass FX"
+                    ? hasBypassableFx
+                      ? track.fxBypassed
+                        ? "Enable FX"
+                        : "Bypass FX"
+                      : "Instrument loaded"
                     : "No FX loaded"
                 }
                 aria-label={
-                  hasFx
+                  hasBypassableFx
                     ? track.fxBypassed
                       ? `Enable FX on ${track.name}`
                       : `Bypass FX on ${track.name}`
@@ -459,9 +462,9 @@ export const ChannelStrip = React.memo(function ChannelStrip({
                   !hasFx &&
                     "border-neutral-700 text-neutral-600 bg-neutral-800",
                   hasFx &&
-                    !track.fxBypassed &&
+                    !(hasBypassableFx && track.fxBypassed) &&
                     "border-green-500 text-green-400 bg-neutral-800",
-                  hasFx &&
+                  hasBypassableFx &&
                     track.fxBypassed &&
                     "border-red-500 text-red-400 bg-neutral-800",
                 )}
diff --git a/frontend/src/components/FXChainPanel.tsx b/frontend/src/components/FXChainPanel.tsx
index 6d846e2..f151dcc 100644
--- a/frontend/src/components/FXChainPanel.tsx
+++ b/frontend/src/components/FXChainPanel.tsx
@@ -127,6 +127,15 @@ function getCategoryIcon(category: string) {
   return { match: "Other", Icon: Box, color: "#6b7280" };
 }
 
+function getPluginDisplayName(pluginPath: string | undefined, plugins: Plugin[]) {
+  if (!pluginPath) return "Instrument";
+  const knownPlugin = plugins.find((plugin) => plugin.fileOrIdentifier === pluginPath);
+  if (knownPlugin) return knownPlugin.name;
+
+  const fileName = pluginPath.split(/[\\/]/).pop() || pluginPath;
+  return fileName.replace(/\.(vst3|dll|clap|lv2)$/i, "");
+}
+
 export function FXChainPanel({
   trackId,
   trackName,
@@ -261,6 +270,12 @@ export function FXChainPanel({
   const [pluginsLoading, setPluginsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [categoryFilter, setCategoryFilter] = useState("All");
+  const currentTrack = tracks.find((track) => track.id === trackId);
+  const instrumentPluginPath =
+    chainType === "track" ? currentTrack?.instrumentPlugin : undefined;
+  const hasLoadedInstrument = Boolean(instrumentPluginPath);
+  const loadedPluginCount = fxSlots.length + (hasLoadedInstrument ? 1 : 0);
+  const instrumentDisplayName = getPluginDisplayName(instrumentPluginPath, plugins);
 
   const applyLoadedPlugins = useCallback((loadedPlugins: FXSlot[]) => {
     setFxSlots(loadedPlugins);
@@ -388,7 +403,7 @@ export function FXChainPanel({
     try {
       let success = false;
       const expectedLength =
-        chainType === "master"
+        chainType === "master" || (plugin.isInstrument && chainType === "track")
           ? null
           : (await getFXChainSlots(trackId, chainType)).length + 1;
 
@@ -413,7 +428,10 @@ export function FXChainPanel({
         // track is set to Instrument type and receives MIDI for synthesis.
         success = await nativeBridge.loadInstrument(trackId, plugin.fileOrIdentifier);
         if (success) {
-          updateTrack(trackId, { instrumentPlugin: plugin.fileOrIdentifier });
+          updateTrack(trackId, {
+            type: "instrument",
+            instrumentPlugin: plugin.fileOrIdentifier,
+          });
           notifyInstrumentChanged({
             trackId,
             instrumentPlugin: plugin.fileOrIdentifier,
@@ -537,6 +555,15 @@ export function FXChainPanel({
     }
   };
 
+  const handleOpenInstrumentEditor = async () => {
+    try {
+      await nativeBridge.openInstrumentEditor(trackId);
+      console.log(`[FXChain] Opened instrument editor on track ${trackId}`);
+    } catch (e) {
+      console.error("[FXChain] Failed to open instrument editor:", e);
+    }
+  };
+
   const handleRemove = async (fxIndex: number) => {
     try {
       let success = false;
@@ -808,7 +835,7 @@ export function FXChainPanel({
               <h4>Loaded FX</h4>
               <div className="flex items-center gap-1.5">
                 <span className="fx-count">
-                  {fxSlots.length} plugin{fxSlots.length !== 1 ? "s" : ""}
+                  {loadedPluginCount} plugin{loadedPluginCount !== 1 ? "s" : ""}
                 </span>
                 <button
                   onClick={() => setShowPresetMenu(!showPresetMenu)}
@@ -904,13 +931,61 @@ export function FXChainPanel({
                 <div className="fx-empty-state">
                   <p>Loading plugins...</p>
                 </div>
-              ) : fxSlots.length === 0 ? (
+              ) : loadedPluginCount === 0 ? (
                 <div className="fx-empty-state">
                   <p>No plugins loaded</p>
                   <p className="hint">Add plugins from the browser →</p>
                 </div>
               ) : (
-                fxSlots.map((fx, index) => {
+                <>
+                  {hasLoadedInstrument && (
+                    <div>
+                      <div
+                        className="fx-slot-item border-l-2 border-l-purple-500"
+                        onClick={handleOpenInstrumentEditor}
+                        role="button"
+                        tabIndex={0}
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            void handleOpenInstrumentEditor();
+                          }
+                        }}
+                      >
+                        <div className="fx-drag-handle" title="Instrument slot">
+                          <Music size={14} className="text-purple-400" />
+                        </div>
+                        <div className="fx-slot-info">
+                          <div className="fx-slot-number">
+                            <Music size={12} className="text-purple-400" />
+                          </div>
+                          <div
+                            className="fx-slot-name"
+                            title={instrumentPluginPath || "Click to open instrument editor"}
+                          >
+                            {instrumentDisplayName}
+                          </div>
+                        </div>
+                        <span className="text-[10px] text-purple-300 border border-purple-500/40 rounded px-1.5 py-0.5">
+                          Instrument
+                        </span>
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void handleOpenInstrumentEditor();
+                          }}
+                          title="Open instrument editor"
+                          aria-label={`Open instrument editor for ${instrumentDisplayName}`}
+                          className="fx-remove-btn"
+                        >
+                          <ExternalLink size={12} />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                  {fxSlots.map((fx, index) => {
                   const isS13FX = fx.type === "s13fx";
                   const isBuiltIn = fx.type === "builtin";
                   return (
@@ -1280,7 +1355,8 @@ export function FXChainPanel({
                       )}
                     </div>
                   );
-                })
+                  })}
+                </>
               )}
             </div>
           </div>
diff --git a/frontend/src/components/MainToolbar.tsx b/frontend/src/components/MainToolbar.tsx
index 9ff21a8..8170e34 100644
--- a/frontend/src/components/MainToolbar.tsx
+++ b/frontend/src/components/MainToolbar.tsx
@@ -13,7 +13,6 @@ import {
   Scissors,
   VolumeX,
   Wand2,
-  Cpu,
 } from "lucide-react";
 import { usePitchEditorStore } from "../store/pitchEditorStore";
 import { getDisplayShortcut, getActionShortcutScopeLabel } from "../store/actionRegistry";
@@ -352,7 +351,7 @@ export function MainToolbar({
           aria-label="AI Tools"
           style={aiButtonHaloStyle}
         >
-          <Cpu size={16} />
+          <span className="text-[10px] font-black leading-none tracking-normal">AI</span>
         </Button>
         <Button
           variant="default"
diff --git a/frontend/src/components/PeakMeter.tsx b/frontend/src/components/PeakMeter.tsx
index 8b43834..69ee1ff 100644
--- a/frontend/src/components/PeakMeter.tsx
+++ b/frontend/src/components/PeakMeter.tsx
@@ -134,8 +134,8 @@ export function PeakMeter({
       const ctx = canvas.getContext("2d");
       if (!ctx) { animFrameRef.current = requestAnimationFrame(draw); return; }
 
-      // Throttle to ~30fps to reduce CPU
-      if (timestamp - lastDrawTimeRef.current < 33) {
+      // Throttle to ~20fps; backend meter events arrive around 10Hz.
+      if (timestamp - lastDrawTimeRef.current < 50) {
         animFrameRef.current = requestAnimationFrame(draw);
         return;
       }
diff --git a/frontend/src/components/PianoRoll.css b/frontend/src/components/PianoRoll.css
index 30f6952..b9608e8 100644
--- a/frontend/src/components/PianoRoll.css
+++ b/frontend/src/components/PianoRoll.css
@@ -10,10 +10,14 @@
 .piano-roll-toolbar {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
-  padding: 8px 12px;
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: 6px 12px;
   background: rgba(0, 0, 0, 0.3);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: visible;
 }
 
 .tool-btn {
@@ -52,7 +56,7 @@
 }
 
 .zoom-slider {
-  width: 100px;
+  width: 112px;
   height: 4px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 2px;
@@ -101,6 +105,59 @@
   min-width: 60px;
 }
 
+.piano-roll-horizontal-scroll {
+  height: 16px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background: #111;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  scrollbar-color: #5a5a5a #151515;
+  scrollbar-width: thin;
+}
+
+.piano-roll-horizontal-scroll::-webkit-scrollbar {
+  height: 12px;
+}
+
+.piano-roll-horizontal-scroll::-webkit-scrollbar-track {
+  background: #151515;
+}
+
+.piano-roll-horizontal-scroll::-webkit-scrollbar-thumb {
+  background: #5a5a5a;
+  border: 2px solid #151515;
+  border-radius: 8px;
+}
+
+.piano-roll-horizontal-scroll::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+.piano-roll-transform-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 100;
+  min-width: 200px;
+  padding: 4px 0;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+.piano-roll-transform-separator {
+  height: 1px;
+  margin: 4px 0;
+  background: #444;
+}
+
+.piano-roll-step-octave,
+.piano-roll-multi-clip {
+  font-size: 10px;
+  color: #aaa;
+}
+
 .piano-roll-select:hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: rgba(255, 255, 255, 0.25);
diff --git a/frontend/src/components/PianoRoll.tsx b/frontend/src/components/PianoRoll.tsx
index f8070c1..13ef475 100644
--- a/frontend/src/components/PianoRoll.tsx
+++ b/frontend/src/components/PianoRoll.tsx
@@ -1,32 +1,78 @@
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { Stage, Layer, Rect, Line, Text, Group } from "react-konva";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type KonvaEvent = any; // Konva event handlers — full typing deferred to avoid 30+ null guards
-import { useDAWStore, MIDIEvent, MIDICCEvent } from "../store/useDAWStore";
 import { useShallow } from "zustand/react/shallow";
+import { nativeBridge } from "../services/NativeBridge";
+import { useDAWStore, MIDIEvent, MIDICCEvent } from "../store/useDAWStore";
 import { Button } from "./ui";
 import "./PianoRoll.css";
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type KonvaEvent = any;
+
 interface PianoRollProps {
   readonly clipId: string;
   readonly trackId: string;
-  /** Additional MIDI clip IDs to show simultaneously (multi-clip editing) */
   readonly additionalClipIds?: string[];
 }
 
-// Per-clip color tints for multi-clip editing (hue shifts)
+interface NotePair {
+  noteOn: MIDIEvent;
+  noteOff: MIDIEvent;
+  noteNumber: number;
+  velocity: number;
+  startTime: number;
+  duration: number;
+  pitchBend?: number;
+  pressure?: number;
+  slide?: number;
+}
+
+interface MultiClipNotePair extends NotePair {
+  clipId: string;
+  clipIndex: number;
+  timeOffset: number;
+}
+
+type DragMode = "move" | "resize-start" | "resize-end";
+
+interface NoteDragState {
+  mode: DragMode;
+  noteIds: string[];
+  originalEvents: MIDIEvent[];
+  startPointerTime: number;
+  startPointerNote: number;
+  activeNoteId: string;
+}
+
+interface DrawingState {
+  startTime: number;
+  endTime: number;
+  noteNumber: number;
+  velocity: number;
+}
+
+interface VelocityEditState {
+  noteId: string;
+  timestamp: number;
+  noteNumber: number;
+  originalEvents: MIDIEvent[];
+}
+
+interface CCDrawState {
+  originalCCEvents: MIDICCEvent[];
+}
+
 const MULTI_CLIP_TINTS = [
-  null,          // Primary clip: use default velocity colors
-  "#ff6b9d",     // Pink
-  "#51cf66",     // Green
-  "#ffd43b",     // Yellow
-  "#748ffc",     // Indigo
-  "#f06595",     // Hot pink
-  "#20c997",     // Teal
-  "#ff922b",     // Orange
+  null,
+  "#ff6b9d",
+  "#51cf66",
+  "#ffd43b",
+  "#748ffc",
+  "#f06595",
+  "#20c997",
+  "#ff922b",
 ];
 
-// Step size options for step input mode
 const STEP_SIZE_OPTIONS = [
   { label: "1/4", beats: 1 },
   { label: "1/8", beats: 0.5 },
@@ -34,41 +80,35 @@ const STEP_SIZE_OPTIONS = [
   { label: "1/32", beats: 0.125 },
 ];
 
-// Key-to-note mapping for step input (C major by default, octave set separately)
 const KEY_TO_NOTE: Record<string, number> = {
-  c: 0, d: 2, e: 4, f: 5, g: 7, a: 9, b: 11,
+  c: 0,
+  d: 2,
+  e: 4,
+  f: 5,
+  g: 7,
+  a: 9,
+  b: 11,
 };
 
 const NOTES_PER_OCTAVE = 12;
-const TOTAL_NOTES = 128; // MIDI range 0-127
+const TOTAL_NOTES = 128;
 const NOTE_HEIGHT = 12;
 const PIANO_WIDTH = 60;
-const GRID_SNAP = 0.25; // 1/16 note
-
-// Lane heights
+const GRID_SNAP = 0.25;
 const VELOCITY_LANE_HEIGHT = 60;
 const CC_LANE_HEIGHT = 80;
 const LANE_DIVIDER_HEIGHT = 1;
 const TOOLBAR_HEIGHT = 40;
+const HORIZONTAL_SCROLLBAR_HEIGHT = 16;
+const NOTE_EDGE_HIT_WIDTH = 7;
+const AUDITION_DURATION_MS = 180;
+const AUDITION_THROTTLE_MS = 120;
+const MIN_ZOOM = 50;
+const MAX_ZOOM = 240;
+const WHEEL_ZOOM_SENSITIVITY = 0.002;
 
-const NOTE_NAMES = [
-  "C",
-  "C#",
-  "D",
-  "D#",
-  "E",
-  "F",
-  "F#",
-  "G",
-  "G#",
-  "A",
-  "A#",
-  "B",
-];
+const NOTE_NAMES = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
 
-// ============================================
-// Scale Definitions
-// ============================================
 const SCALE_DEFINITIONS: Record<string, number[]> = {
   chromatic: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
   major: [0, 2, 4, 5, 7, 9, 11],
@@ -91,7 +131,6 @@ const SCALE_DISPLAY_NAMES: Record<string, string> = {
   blues: "Blues",
 };
 
-// CC lane presets
 const CC_PRESETS = [
   { cc: 1, name: "CC#1 Modulation" },
   { cc: 7, name: "CC#7 Volume" },
@@ -100,18 +139,36 @@ const CC_PRESETS = [
   { cc: 64, name: "CC#64 Sustain" },
 ];
 
-/** Convert MIDI pitch number to note name string, e.g. 60 -> "C4" */
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function sortEvents(events: MIDIEvent[]): MIDIEvent[] {
+  return events
+    .map((event) => ({ ...event }))
+    .sort((a, b) => {
+      if (a.timestamp !== b.timestamp) return a.timestamp - b.timestamp;
+      if (a.type === b.type) return 0;
+      return a.type === "noteOff" ? 1 : -1;
+    });
+}
+
+function noteIdFor(clipId: string, timestamp: number, noteNumber: number): string {
+  return `${clipId}:${timestamp.toFixed(6)}:${noteNumber}`;
+}
+
 function getNoteNameFromPitch(pitch: number): string {
-  const noteName = NOTE_NAMES[pitch % NOTES_PER_OCTAVE];
+  const noteName = NOTE_NAMES[((pitch % NOTES_PER_OCTAVE) + NOTES_PER_OCTAVE) % NOTES_PER_OCTAVE];
   const octave = Math.floor(pitch / 12) - 2;
   return `${noteName}${octave}`;
 }
 
-/** Velocity-based color: blue (quiet) -> cyan -> yellow -> red (loud) */
 function velocityColor(velocity: number): string {
-  const v = Math.max(0, Math.min(127, velocity));
-  const t = v / 127; // 0..1
-  let r: number, g: number, b: number;
+  const v = clamp(velocity, 0, 127);
+  const t = v / 127;
+  let r: number;
+  let g: number;
+  let b: number;
   if (t < 0.25) {
     const s = t / 0.25;
     r = 60;
@@ -136,16 +193,13 @@ function velocityColor(velocity: number): string {
   return `rgb(${r}, ${g}, ${b})`;
 }
 
-/** Velocity-based stroke color (slightly darker version) */
 function velocityStrokeColor(velocity: number): string {
-  const v = Math.max(0, Math.min(127, velocity));
-  const t = v / 127;
+  const t = clamp(velocity, 0, 127) / 127;
   if (t < 0.5) return "#3b82f6";
   if (t < 0.75) return "#22c55e";
   return "#ef4444";
 }
 
-/** Check if a MIDI note number is in the given scale */
 function isNoteInScale(noteNumber: number, scaleRoot: number, scaleType: string): boolean {
   if (scaleType === "chromatic") return true;
   const intervals = SCALE_DEFINITIONS[scaleType];
@@ -154,53 +208,145 @@ function isNoteInScale(noteNumber: number, scaleRoot: number, scaleType: string)
   return intervals.includes(degree);
 }
 
-// ============================================
-// Parsed note pair: noteOn + noteOff matched
-// ============================================
-interface NotePair {
-  noteOn: MIDIEvent;
-  noteOff: MIDIEvent;
-  noteNumber: number;
-  velocity: number;
-  startTime: number;
-  duration: number;
-  pitchBend?: number;
-  pressure?: number;
-  slide?: number;
+function parseNotePairs(events?: MIDIEvent[]): NotePair[] {
+  if (!events) return [];
+  const pairs: NotePair[] = [];
+  const usedNoteOffs = new Set<number>();
+
+  for (const noteOn of events.filter((event) => event.type === "noteOn")) {
+    if (noteOn.note === undefined) continue;
+    let noteOff: MIDIEvent | undefined;
+    let noteOffIndex = -1;
+    events.forEach((event, index) => {
+      if (
+        usedNoteOffs.has(index) ||
+        event.type !== "noteOff" ||
+        event.note !== noteOn.note ||
+        event.timestamp <= noteOn.timestamp
+      ) {
+        return;
+      }
+      if (!noteOff || event.timestamp < noteOff.timestamp) {
+        noteOff = event;
+        noteOffIndex = index;
+      }
+    });
+    if (!noteOff || noteOffIndex < 0) continue;
+    usedNoteOffs.add(noteOffIndex);
+    pairs.push({
+      noteOn,
+      noteOff,
+      noteNumber: noteOn.note,
+      velocity: noteOn.velocity || 80,
+      startTime: noteOn.timestamp,
+      duration: Math.max(0.01, noteOff.timestamp - noteOn.timestamp),
+      pitchBend: noteOn.pitchBend,
+      pressure: noteOn.pressure,
+      slide: noteOn.slide,
+    });
+  }
+
+  return pairs;
 }
 
-/** Extended note pair with clip ownership info for multi-clip editing */
-interface MultiClipNotePair extends NotePair {
-  clipId: string;
-  clipIndex: number; // 1-based index into additionalClips (0 = primary)
-  timeOffset: number; // time offset relative to primary clip
+function transformSelectedEvents(
+  events: MIDIEvent[],
+  clipId: string,
+  noteIds: string[],
+  transform: (pair: NotePair) => NotePair | null,
+): { events: MIDIEvent[]; nextIds: string[]; auditionPair?: NotePair } {
+  const selected = new Set(noteIds);
+  const pairs = parseNotePairs(events);
+  const consumed = new Set<MIDIEvent>();
+  const additions: MIDIEvent[] = [];
+  const nextIds: string[] = [];
+  let auditionPair: NotePair | undefined;
+
+  pairs.forEach((pair) => {
+    const id = noteIdFor(clipId, pair.startTime, pair.noteNumber);
+    if (!selected.has(id)) return;
+    consumed.add(pair.noteOn);
+    consumed.add(pair.noteOff);
+    const nextPair = transform(pair);
+    if (!nextPair) return;
+
+    const startTime = Math.max(0, nextPair.startTime);
+    const duration = Math.max(0.01, nextPair.duration);
+    const noteNumber = clamp(Math.round(nextPair.noteNumber), 0, 127);
+    const velocity = clamp(Math.round(nextPair.velocity), 1, 127);
+    const nextNoteOn = {
+      ...pair.noteOn,
+      timestamp: startTime,
+      type: "noteOn" as const,
+      note: noteNumber,
+      velocity,
+    };
+    const nextNoteOff = {
+      ...pair.noteOff,
+      timestamp: startTime + duration,
+      type: "noteOff" as const,
+      note: noteNumber,
+      velocity: 0,
+    };
+
+    additions.push(nextNoteOn, nextNoteOff);
+    nextIds.push(noteIdFor(clipId, startTime, noteNumber));
+    auditionPair ||= {
+      ...nextPair,
+      noteOn: nextNoteOn,
+      noteOff: nextNoteOff,
+      startTime,
+      duration,
+      noteNumber,
+      velocity,
+    };
+  });
+
+  return {
+    events: sortEvents([...events.filter((event) => !consumed.has(event)), ...additions]),
+    nextIds,
+    auditionPair,
+  };
 }
 
 export function PianoRoll({ clipId, trackId, additionalClipIds = [] }: PianoRollProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  const scrollbarRef = useRef<HTMLDivElement>(null);
+  const auditionRef = useRef<{ note: number | null; timeoutId: number | null; lastAt: number }>({
+    note: null,
+    timeoutId: null,
+    lastAt: 0,
+  });
+  const latestDragAuditionRef = useRef<{ noteNumber: number; velocity: number } | null>(null);
+
   const [dimensions, setDimensions] = useState({ width: 800, height: 600 });
+  const [toolbarHeight, setToolbarHeight] = useState(TOOLBAR_HEIGHT);
   const [tool, setTool] = useState<"draw" | "select" | "erase">("draw");
-  const [zoom, setZoom] = useState(100); // pixels per beat
+  const [zoom, setZoom] = useState(100);
   const [scrollX, setScrollX] = useState(0);
   const [scrollY, setScrollY] = useState(TOTAL_NOTES * NOTE_HEIGHT / 2 - 300);
+  const [selectedNoteIds, setSelectedNoteIds] = useState<string[]>([]);
+  const [stepInputOctave, setStepInputOctave] = useState(4);
+  const [selectedCC, setSelectedCC] = useState(1);
+  const [showTransformMenu, setShowTransformMenu] = useState(false);
+  const [dragState, setDragState] = useState<NoteDragState | null>(null);
+  const [drawingState, setDrawingState] = useState<DrawingState | null>(null);
+  const [velocityEdit, setVelocityEdit] = useState<VelocityEditState | null>(null);
+  const [ccDrawState, setCCDrawState] = useState<CCDrawState | null>(null);
+  const transformMenuRef = useRef<HTMLDivElement>(null);
 
-  // Step input: octave for keyboard input
-  const [stepInputOctave, setStepInputOctave] = useState(4); // C4 = middle C
-
-  // Velocity editing state
-  const [velocityEditingNote, setVelocityEditingNote] = useState<{ timestamp: number; note: number } | null>(null);
-
-  // CC lane state
-  const [selectedCC, setSelectedCC] = useState(1); // CC#1 Modulation by default
-  const [ccDrawing, setCCDrawing] = useState(false);
-
-  // Store selectors — consolidated into useShallow to prevent unnecessary re-renders
   const {
-    track, tempo, scaleRoot, scaleType,
-    stepInputEnabled, stepInputSize, stepInputPosition,
+    track,
+    tempo,
+    scaleRoot,
+    scaleType,
+    stepInputEnabled,
+    stepInputSize,
+    stepInputPosition,
   } = useDAWStore(
     useShallow((state) => ({
-      track: state.tracks.find((t) => t.id === trackId),
+      track: state.tracks.find((candidate) => candidate.id === trackId),
       tempo: state.transport.tempo,
       scaleRoot: state.pianoRollScaleRoot,
       scaleType: state.pianoRollScaleType,
@@ -210,46 +356,19 @@ export function PianoRoll({ clipId, trackId, additionalClipIds = [] }: PianoRoll
     })),
   );
 
-  // Step input actions
-  const toggleStepInput = useDAWStore((s) => s.toggleStepInput);
-  const setStepInputSize = useDAWStore((s) => s.setStepInputSize);
-  const advanceStepInput = useDAWStore((s) => s.advanceStepInput);
-  const setStepInputPosition = useDAWStore((s) => s.setStepInputPosition);
-
-  const clip = track?.midiClips.find((c) => c.id === clipId);
-  const clipEvents = clip?.events;
-  const clipCCEvents = clip?.ccEvents;
-  const clipDuration = clip?.duration ?? 0;
-  const clipStartTime = clip?.startTime ?? 0;
-
-  // Multi-clip editing: gather additional clips from the same track
-  const additionalClips = useMemo(() => {
-    if (!track || additionalClipIds.length === 0) return [];
-    return additionalClipIds
-      .map((id) => track.midiClips.find((c) => c.id === id))
-      .filter((c): c is NonNullable<typeof c> => c != null);
-  }, [track, additionalClipIds]);
-
-  // Transform dropdown state
-  const [showTransformMenu, setShowTransformMenu] = useState(false);
-  const transformMenuRef = useRef<HTMLDivElement>(null);
-
-  // Close transform menu on outside click
-  useEffect(() => {
-    if (!showTransformMenu) return;
-    const handleClickOutside = (e: MouseEvent) => {
-      if (transformMenuRef.current && !transformMenuRef.current.contains(e.target as Node)) {
-        setShowTransformMenu(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [showTransformMenu]);
-
-  // Store actions — consolidated into useShallow to reduce subscription overhead
   const {
+    toggleStepInput,
+    setStepInputSize,
+    advanceStepInput,
+    setStepInputPosition,
     updateMIDINoteVelocity,
     updateMIDICCEvents,
+    commitMIDICCEvents,
+    previewMIDIClipEvents,
+    commitMIDIClipEvents,
+    addMIDINote,
+    removeMIDINotes,
+    moveMIDINotes,
     setPianoRollScaleRoot,
     setPianoRollScaleType,
     transposeMIDINotes,
@@ -257,489 +376,768 @@ export function PianoRoll({ clipId, trackId, additionalClipIds = [] }: PianoRoll
     reverseMIDINotes,
     invertMIDINotes,
   } = useDAWStore(
-    useShallow((s) => ({
-      updateMIDINoteVelocity: s.updateMIDINoteVelocity,
-      updateMIDICCEvents: s.updateMIDICCEvents,
-      setPianoRollScaleRoot: s.setPianoRollScaleRoot,
-      setPianoRollScaleType: s.setPianoRollScaleType,
-      transposeMIDINotes: s.transposeMIDINotes,
-      scaleMIDINoteVelocity: s.scaleMIDINoteVelocity,
-      reverseMIDINotes: s.reverseMIDINotes,
-      invertMIDINotes: s.invertMIDINotes,
+    useShallow((state) => ({
+      toggleStepInput: state.toggleStepInput,
+      setStepInputSize: state.setStepInputSize,
+      advanceStepInput: state.advanceStepInput,
+      setStepInputPosition: state.setStepInputPosition,
+      updateMIDINoteVelocity: state.updateMIDINoteVelocity,
+      updateMIDICCEvents: state.updateMIDICCEvents,
+      commitMIDICCEvents: state.commitMIDICCEvents,
+      previewMIDIClipEvents: state.previewMIDIClipEvents,
+      commitMIDIClipEvents: state.commitMIDIClipEvents,
+      addMIDINote: state.addMIDINote,
+      removeMIDINotes: state.removeMIDINotes,
+      moveMIDINotes: state.moveMIDINotes,
+      setPianoRollScaleRoot: state.setPianoRollScaleRoot,
+      setPianoRollScaleType: state.setPianoRollScaleType,
+      transposeMIDINotes: state.transposeMIDINotes,
+      scaleMIDINoteVelocity: state.scaleMIDINoteVelocity,
+      reverseMIDINotes: state.reverseMIDINotes,
+      invertMIDINotes: state.invertMIDINotes,
     })),
   );
 
-  // Derived values (computed before hooks that depend on them)
+  const clip = track?.midiClips.find((candidate) => candidate.id === clipId);
+  const clipEvents = clip?.events;
+  const clipCCEvents = clip?.ccEvents;
+  const clipDuration = clip?.duration ?? 0;
+  const clipStartTime = clip?.startTime ?? 0;
   const beatsPerSecond = tempo / 60;
   const pixelsPerSecond = zoom * beatsPerSecond;
-  const bottomLanesHeight = VELOCITY_LANE_HEIGHT + LANE_DIVIDER_HEIGHT + CC_LANE_HEIGHT + LANE_DIVIDER_HEIGHT;
-  const stageHeight = dimensions.height - TOOLBAR_HEIGHT;
-  const noteGridHeight = stageHeight - bottomLanesHeight;
+  const stepDurationSeconds = stepInputSize / beatsPerSecond;
+  const snapDuration = GRID_SNAP / beatsPerSecond;
+  const bottomLanesHeight = VELOCITY_LANE_HEIGHT + CC_LANE_HEIGHT + LANE_DIVIDER_HEIGHT * 2;
+  const stageHeight = Math.max(0, dimensions.height - toolbarHeight - HORIZONTAL_SCROLLBAR_HEIGHT);
+  const noteGridHeight = Math.max(NOTE_HEIGHT * 4, stageHeight - bottomLanesHeight);
   const velocityLaneY = noteGridHeight;
   const ccLaneY = velocityLaneY + VELOCITY_LANE_HEIGHT + LANE_DIVIDER_HEIGHT;
+  const visibleGridWidth = Math.max(1, dimensions.width - PIANO_WIDTH);
+
+  const notePairs = useMemo(() => parseNotePairs(clipEvents), [clipEvents]);
+  const additionalClips = useMemo(() => {
+    if (!track || additionalClipIds.length === 0) return [];
+    return additionalClipIds
+      .map((id) => track.midiClips.find((candidate) => candidate.id === id))
+      .filter((candidate): candidate is NonNullable<typeof candidate> => candidate != null);
+  }, [track, additionalClipIds]);
+
+  const additionalClipNotePairs: MultiClipNotePair[] = useMemo(() => {
+    const allPairs: MultiClipNotePair[] = [];
+    additionalClips.forEach((additionalClip, clipIndex) => {
+      const timeOffset = additionalClip.startTime - clipStartTime;
+      parseNotePairs(additionalClip.events).forEach((pair) => {
+        allPairs.push({
+          ...pair,
+          startTime: pair.startTime + timeOffset,
+          clipId: additionalClip.id,
+          clipIndex: clipIndex + 1,
+          timeOffset,
+        });
+      });
+    });
+    return allPairs;
+  }, [additionalClips, clipStartTime]);
+
+  const ccEventsForLane: MIDICCEvent[] = useMemo(() => {
+    if (!clipCCEvents) return [];
+    return clipCCEvents.filter((event) => event.cc === selectedCC);
+  }, [clipCCEvents, selectedCC]);
+
+  const contentDuration = useMemo(() => {
+    const noteEnd = notePairs.reduce((max, pair) => Math.max(max, pair.startTime + pair.duration), 0);
+    const ccEnd = (clipCCEvents || []).reduce((max, event) => Math.max(max, event.time), 0);
+    const drawEnd = drawingState ? Math.max(drawingState.startTime, drawingState.endTime) : 0;
+    return Math.max(clipDuration, noteEnd, ccEnd, drawEnd, stepInputPosition + stepDurationSeconds, 1);
+  }, [clipDuration, notePairs, clipCCEvents, drawingState, stepInputPosition, stepDurationSeconds]);
+
+  const contentWidth = Math.max(visibleGridWidth, contentDuration * pixelsPerSecond);
+  const maxScrollX = Math.max(0, contentWidth - visibleGridWidth);
+  const maxScrollY = Math.max(0, TOTAL_NOTES * NOTE_HEIGHT - noteGridHeight);
+
+  const stopAudition = useCallback(() => {
+    const current = auditionRef.current;
+    if (current.timeoutId !== null) {
+      window.clearTimeout(current.timeoutId);
+      current.timeoutId = null;
+    }
+    if (current.note !== null) {
+      void nativeBridge.sendMidiNote(trackId, current.note, 0, false).catch(() => undefined);
+      current.note = null;
+    }
+  }, [trackId]);
+
+  const auditionNote = useCallback((note: number, velocity = 90, options?: { throttle?: boolean; durationMs?: number }) => {
+    const now = performance.now();
+    if (options?.throttle && now - auditionRef.current.lastAt < AUDITION_THROTTLE_MS) return;
+    auditionRef.current.lastAt = now;
+    stopAudition();
+    const safeNote = clamp(Math.round(note), 0, 127);
+    const safeVelocity = clamp(Math.round(velocity), 1, 127);
+    auditionRef.current.note = safeNote;
+    void nativeBridge.sendMidiNote(trackId, safeNote, safeVelocity, true).catch(() => undefined);
+    auditionRef.current.timeoutId = window.setTimeout(() => {
+      stopAudition();
+    }, options?.durationMs ?? AUDITION_DURATION_MS);
+  }, [stopAudition, trackId]);
+
+  const getNoteY = useCallback((noteNumber: number) => {
+    return (TOTAL_NOTES - 1 - noteNumber) * NOTE_HEIGHT - scrollY;
+  }, [scrollY]);
+
+  const getNoteFromY = useCallback((y: number): number => {
+    return clamp(TOTAL_NOTES - 1 - Math.floor((y + scrollY) / NOTE_HEIGHT), 0, 127);
+  }, [scrollY]);
+
+  const snapTime = useCallback((time: number): number => {
+    return Math.max(0, Math.round(time / snapDuration) * snapDuration);
+  }, [snapDuration]);
+
+  const getTimeFromX = useCallback((x: number) => {
+    return Math.max(0, (x - PIANO_WIDTH + scrollX) / pixelsPerSecond);
+  }, [pixelsPerSecond, scrollX]);
+
+  const getPointer = (event: KonvaEvent) => {
+    const stage = event.target.getStage();
+    return stage?.getPointerPosition() ?? null;
+  };
+
+  const getLatestClipEvents = useCallback(() => {
+    const latestTrack = useDAWStore.getState().tracks.find((candidate) => candidate.id === trackId);
+    const latestClip = latestTrack?.midiClips.find((candidate) => candidate.id === clipId);
+    return latestClip?.events ? latestClip.events.map((event) => ({ ...event })) : [];
+  }, [trackId, clipId]);
+
+  const getLatestCCEvents = useCallback(() => {
+    const latestTrack = useDAWStore.getState().tracks.find((candidate) => candidate.id === trackId);
+    const latestClip = latestTrack?.midiClips.find((candidate) => candidate.id === clipId);
+    return latestClip?.ccEvents ? latestClip.ccEvents.map((event) => ({ ...event })) : [];
+  }, [trackId, clipId]);
 
   useEffect(() => {
     const updateDimensions = () => {
-      if (containerRef.current) {
-        setDimensions({
-          width: containerRef.current.clientWidth,
-          height: containerRef.current.clientHeight,
-        });
-      }
+      if (!containerRef.current) return;
+      setDimensions({
+        width: containerRef.current.clientWidth,
+        height: containerRef.current.clientHeight,
+      });
+      setToolbarHeight(toolbarRef.current?.offsetHeight || TOOLBAR_HEIGHT);
     };
 
     updateDimensions();
     window.addEventListener("resize", updateDimensions);
-    return () => window.removeEventListener("resize", updateDimensions);
+    const resizeObserver = typeof ResizeObserver !== "undefined"
+      ? new ResizeObserver(updateDimensions)
+      : null;
+    if (toolbarRef.current && resizeObserver) {
+      resizeObserver.observe(toolbarRef.current);
+    }
+    return () => {
+      window.removeEventListener("resize", updateDimensions);
+      resizeObserver?.disconnect();
+    };
   }, []);
 
-  // Handle wheel scrolling
+  useEffect(() => {
+    setScrollX((previous) => clamp(previous, 0, maxScrollX));
+  }, [maxScrollX]);
+
+  useEffect(() => {
+    setScrollY((previous) => clamp(previous, 0, maxScrollY));
+  }, [maxScrollY]);
+
+  useEffect(() => {
+    const scrollbar = scrollbarRef.current;
+    if (scrollbar && Math.abs(scrollbar.scrollLeft - scrollX) > 1) {
+      scrollbar.scrollLeft = scrollX;
+    }
+  }, [scrollX]);
+
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
 
-    const handleWheel = (e: WheelEvent) => {
-      e.preventDefault();
-      if (e.shiftKey) {
-        setScrollX((prev) => Math.max(0, prev + e.deltaY));
+    const handleWheel = (event: WheelEvent) => {
+      event.preventDefault();
+      if (event.ctrlKey || event.metaKey) {
+        event.stopPropagation();
+        const rect = container.getBoundingClientRect();
+        const cursorGridX = clamp(event.clientX - rect.left - PIANO_WIDTH, 0, visibleGridWidth);
+        const timeAtCursor = (cursorGridX + scrollX) / pixelsPerSecond;
+        const nextZoom = clamp(
+          zoom * Math.exp(-event.deltaY * WHEEL_ZOOM_SENSITIVITY),
+          MIN_ZOOM,
+          MAX_ZOOM,
+        );
+        const nextPixelsPerSecond = nextZoom * beatsPerSecond;
+        const nextContentWidth = Math.max(visibleGridWidth, contentDuration * nextPixelsPerSecond);
+        const nextMaxScrollX = Math.max(0, nextContentWidth - visibleGridWidth);
+
+        setZoom(nextZoom);
+        setScrollX(clamp(timeAtCursor * nextPixelsPerSecond - cursorGridX, 0, nextMaxScrollX));
+        return;
+      }
+
+      const horizontalIntent = Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.shiftKey;
+      if (horizontalIntent) {
+        const delta = event.deltaX + (event.shiftKey ? event.deltaY : 0);
+        setScrollX((previous) => clamp(previous + delta, 0, maxScrollX));
       } else {
-        const maxScrollY = TOTAL_NOTES * NOTE_HEIGHT - (dimensions.height - TOOLBAR_HEIGHT);
-        setScrollY((prev) => Math.max(0, Math.min(maxScrollY, prev + e.deltaY)));
+        setScrollY((previous) => clamp(previous + event.deltaY, 0, maxScrollY));
       }
     };
 
     container.addEventListener("wheel", handleWheel, { passive: false });
     return () => container.removeEventListener("wheel", handleWheel);
-  }, [dimensions.height]);
+  }, [beatsPerSecond, contentDuration, maxScrollX, maxScrollY, pixelsPerSecond, scrollX, visibleGridWidth, zoom]);
 
-  // Step input keyboard handler
   useEffect(() => {
-    if (!stepInputEnabled) return;
+    if (!showTransformMenu) return;
+    const handleClickOutside = (event: MouseEvent) => {
+      if (transformMenuRef.current && !transformMenuRef.current.contains(event.target as Node)) {
+        setShowTransformMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showTransformMenu]);
 
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Ignore when typing in inputs/selects
-      const tag = (e.target as HTMLElement).tagName;
-      if (tag === "INPUT" || tag === "SELECT" || tag === "TEXTAREA") return;
+  useEffect(() => {
+    return () => {
+      stopAudition();
+    };
+  }, [stopAudition]);
 
-      const key = e.key.toLowerCase();
+  useEffect(() => {
+    const handleBlur = () => stopAudition();
+    window.addEventListener("blur", handleBlur);
+    return () => window.removeEventListener("blur", handleBlur);
+  }, [stopAudition]);
 
-      // Octave shift with up/down arrows
-      if (key === "arrowup") {
-        e.preventDefault();
-        setStepInputOctave((prev) => Math.min(8, prev + 1));
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement;
+      if (["INPUT", "SELECT", "TEXTAREA"].includes(target.tagName)) return;
+
+      const key = event.key.toLowerCase();
+      const isStepInputNoteKey =
+        stepInputEnabled
+        && selectedNoteIds.length === 0
+        && KEY_TO_NOTE[key] !== undefined;
+      if (isStepInputNoteKey) return;
+
+      if (key === "d") {
+        event.preventDefault();
+        setTool("draw");
         return;
       }
-      if (key === "arrowdown") {
-        e.preventDefault();
-        setStepInputOctave((prev) => Math.max(-2, prev - 1));
+      if (key === "v") {
+        event.preventDefault();
+        setTool("select");
         return;
       }
-
-      // Left/Right arrows to manually move step cursor
-      if (key === "arrowleft") {
-        e.preventDefault();
-        const bps = tempo / 60;
-        const stepSeconds = stepInputSize / bps;
-        setStepInputPosition(Math.max(0, stepInputPosition - stepSeconds));
+      if (key === "e") {
+        event.preventDefault();
+        setTool("erase");
         return;
       }
-      if (key === "arrowright") {
-        e.preventDefault();
-        advanceStepInput();
+
+      if ((key === "delete" || key === "backspace") && selectedNoteIds.length > 0) {
+        event.preventDefault();
+        removeMIDINotes(trackId, clipId, selectedNoteIds);
+        setSelectedNoteIds([]);
+        stopAudition();
         return;
       }
 
-      // Note input: C, D, E, F, G, A, B keys
-      const semitone = KEY_TO_NOTE[key];
-      if (semitone !== undefined) {
-        e.preventDefault();
-        // Shift key adds sharp (+1 semitone)
-        const sharpOffset = e.shiftKey ? 1 : 0;
-        const noteNumber = (stepInputOctave + 2) * 12 + semitone + sharpOffset;
-        if (noteNumber < 0 || noteNumber > 127) return;
-
-        const bps = tempo / 60;
-        const durationSeconds = stepInputSize / bps;
-
-        // Add the note at stepInputPosition (direct setState to avoid closure issues)
-        const noteOnEvent: MIDIEvent = { timestamp: stepInputPosition, type: "noteOn", note: noteNumber, velocity: 80 };
-        const noteOffEvent: MIDIEvent = { timestamp: stepInputPosition + durationSeconds, type: "noteOff", note: noteNumber, velocity: 0 };
-        useDAWStore.setState((state) => ({
-          tracks: state.tracks.map((t) =>
-            t.id === trackId
-              ? {
-                  ...t,
-                  midiClips: t.midiClips.map((c) =>
-                    c.id === clipId
-                      ? { ...c, events: [...c.events, noteOnEvent, noteOffEvent].sort((a, b) => a.timestamp - b.timestamp) }
-                      : c,
-                  ),
-                }
-              : t,
-          ),
-        }));
-
-        // Advance cursor
-        advanceStepInput();
+      if (selectedNoteIds.length > 0 && key.startsWith("arrow")) {
+        event.preventDefault();
+        const timeStep = event.shiftKey ? stepDurationSeconds : snapDuration;
+        let deltaTime = 0;
+        let deltaNote = 0;
+        if (key === "arrowleft") deltaTime = -timeStep;
+        if (key === "arrowright") deltaTime = timeStep;
+        if (key === "arrowup") deltaNote = event.shiftKey ? 12 : 1;
+        if (key === "arrowdown") deltaNote = event.shiftKey ? -12 : -1;
+        const nextIds = moveMIDINotes(trackId, clipId, selectedNoteIds, deltaTime, deltaNote);
+        if (nextIds.length > 0) {
+          setSelectedNoteIds(nextIds);
+          const nextPair = parseNotePairs(getLatestClipEvents()).find((pair) =>
+            nextIds.includes(noteIdFor(clipId, pair.startTime, pair.noteNumber)),
+          );
+          if (nextPair) auditionNote(nextPair.noteNumber, nextPair.velocity);
+        }
       }
     };
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [stepInputEnabled, stepInputOctave, stepInputSize, stepInputPosition, tempo, clipId, trackId]);
-
-  // Parse noteOn/noteOff pairs (must be before early return)
-  const notePairs: NotePair[] = useMemo(() => {
-    if (!clipEvents) return [];
-    const pairs: NotePair[] = [];
-    const noteOns = clipEvents.filter((e) => e.type === "noteOn");
-    for (const noteOn of noteOns) {
-      const noteOff = clipEvents.find(
-        (e) =>
-          e.type === "noteOff" &&
-          e.note === noteOn.note &&
-          e.timestamp > noteOn.timestamp,
-      );
-      if (!noteOff || noteOn.note === undefined) continue;
-      pairs.push({
-        noteOn,
-        noteOff,
-        noteNumber: noteOn.note,
-        velocity: noteOn.velocity || 80,
-        startTime: noteOn.timestamp,
-        duration: noteOff.timestamp - noteOn.timestamp,
-        pitchBend: noteOn.pitchBend,
-        pressure: noteOn.pressure,
-        slide: noteOn.slide,
-      });
-    }
-    return pairs;
-  }, [clipEvents]);
+  }, [
+    auditionNote,
+    clipId,
+    getLatestClipEvents,
+    moveMIDINotes,
+    removeMIDINotes,
+    selectedNoteIds,
+    snapDuration,
+    stepDurationSeconds,
+    stepInputEnabled,
+    stopAudition,
+    trackId,
+  ]);
 
-  // Parse note pairs for additional clips (multi-clip editing)
-  const additionalClipNotePairs: MultiClipNotePair[] = useMemo(() => {
-    if (additionalClips.length === 0) return [];
-    const allPairs: MultiClipNotePair[] = [];
-    for (let ci = 0; ci < additionalClips.length; ci++) {
-      const ac = additionalClips[ci];
-      const timeOffset = ac.startTime - clipStartTime;
-      const noteOns = ac.events.filter((e) => e.type === "noteOn");
-      for (const noteOn of noteOns) {
-        const noteOff = ac.events.find(
-          (e) => e.type === "noteOff" && e.note === noteOn.note && e.timestamp > noteOn.timestamp,
-        );
-        if (!noteOff || noteOn.note === undefined) continue;
-        allPairs.push({
-          noteOn,
-          noteOff,
-          noteNumber: noteOn.note,
-          velocity: noteOn.velocity || 80,
-          startTime: noteOn.timestamp + timeOffset,
-          duration: noteOff.timestamp - noteOn.timestamp,
-          clipId: ac.id,
-          clipIndex: ci + 1,
-          timeOffset,
-        });
-      }
-    }
-    return allPairs;
-  }, [additionalClips, clipStartTime]);
+  useEffect(() => {
+    if (!stepInputEnabled) return;
 
-  // Get CC events for the selected CC number (must be before early return)
-  const ccEventsForLane: MIDICCEvent[] = useMemo(() => {
-    if (!clipCCEvents) return [];
-    return clipCCEvents.filter((e) => e.cc === selectedCC);
-  }, [clipCCEvents, selectedCC]);
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement;
+      if (["INPUT", "SELECT", "TEXTAREA"].includes(target.tagName)) return;
+      if (selectedNoteIds.length > 0) return;
 
-  // ============================================
-  // Velocity Lane Mouse Handlers (must be before early return)
-  // ============================================
-  const handleVelocityMouseDown = useCallback((e: KonvaEvent) => {
-    const stage = e.target.getStage();
-    const pos = stage.getPointerPosition();
-    if (!pos) return;
-    const y = pos.y;
-
-    if (y < velocityLaneY || y >= velocityLaneY + VELOCITY_LANE_HEIGHT) return;
-
-    const x = pos.x;
-    for (const pair of notePairs) {
-      const barX = PIANO_WIDTH + pair.startTime * pixelsPerSecond - scrollX;
-      const barWidth = Math.max(4, pair.duration * pixelsPerSecond);
-      if (x >= barX && x <= barX + barWidth) {
-        const relY = y - velocityLaneY;
-        const newVelocity = Math.round(127 * (1 - relY / VELOCITY_LANE_HEIGHT));
-        const clamped = Math.max(1, Math.min(127, newVelocity));
-        setVelocityEditingNote({ timestamp: pair.startTime, note: pair.noteNumber });
-        updateMIDINoteVelocity(trackId, clipId, pair.startTime, pair.noteNumber, clamped);
+      const key = event.key.toLowerCase();
+      if (key === "arrowup") {
+        event.preventDefault();
+        setStepInputOctave((previous) => Math.min(8, previous + 1));
+        return;
+      }
+      if (key === "arrowdown") {
+        event.preventDefault();
+        setStepInputOctave((previous) => Math.max(-2, previous - 1));
+        return;
+      }
+      if (key === "arrowleft") {
+        event.preventDefault();
+        setStepInputPosition(Math.max(0, stepInputPosition - stepDurationSeconds));
+        setScrollX((previous) => clamp(previous - stepDurationSeconds * pixelsPerSecond, 0, maxScrollX));
+        return;
+      }
+      if (key === "arrowright") {
+        event.preventDefault();
+        advanceStepInput();
+        setScrollX((previous) => clamp(previous + stepDurationSeconds * pixelsPerSecond, 0, maxScrollX));
         return;
       }
-    }
-  }, [notePairs, velocityLaneY, pixelsPerSecond, scrollX, trackId, clipId, updateMIDINoteVelocity]);
-
-  const handleVelocityMouseMove = useCallback((e: KonvaEvent) => {
-    if (!velocityEditingNote) return;
-    const stage = e.target.getStage();
-    const pos = stage.getPointerPosition();
-    if (!pos) return;
-    const relY = pos.y - velocityLaneY;
-    const newVelocity = Math.round(127 * (1 - Math.max(0, Math.min(VELOCITY_LANE_HEIGHT, relY)) / VELOCITY_LANE_HEIGHT));
-    const clamped = Math.max(1, Math.min(127, newVelocity));
-    updateMIDINoteVelocity(trackId, clipId, velocityEditingNote.timestamp, velocityEditingNote.note, clamped);
-  }, [velocityEditingNote, velocityLaneY, trackId, clipId, updateMIDINoteVelocity]);
-
-  const handleVelocityMouseUp = useCallback(() => {
-    setVelocityEditingNote(null);
-  }, []);
-
-  // ============================================
-  // CC Lane Mouse Handlers (must be before early return)
-  // ============================================
-  const handleCCMouseDown = useCallback((e: KonvaEvent) => {
-    const stage = e.target.getStage();
-    const pos = stage.getPointerPosition();
-    if (!pos) return;
-    const y = pos.y;
-
-    if (y < ccLaneY || y >= ccLaneY + CC_LANE_HEIGHT) return;
-
-    setCCDrawing(true);
 
-    const x = pos.x - PIANO_WIDTH + scrollX;
-    const time = Math.max(0, x / pixelsPerSecond);
-    const relY = y - ccLaneY;
-    const value = Math.round(127 * (1 - relY / CC_LANE_HEIGHT));
-    const clamped = Math.max(0, Math.min(127, value));
+      const semitone = KEY_TO_NOTE[key];
+      if (semitone === undefined) return;
+      event.preventDefault();
+      const noteNumber = (stepInputOctave + 2) * 12 + semitone + (event.shiftKey ? 1 : 0);
+      if (noteNumber < 0 || noteNumber > 127) return;
+
+      const newId = addMIDINote(trackId, clipId, stepInputPosition, noteNumber, stepDurationSeconds, 80);
+      setSelectedNoteIds(newId ? [newId] : []);
+      auditionNote(noteNumber, 80);
+      advanceStepInput();
+    };
 
-    const existingEvents = clipCCEvents || [];
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    addMIDINote,
+    advanceStepInput,
+    auditionNote,
+    clipId,
+    maxScrollX,
+    pixelsPerSecond,
+    selectedNoteIds.length,
+    setStepInputPosition,
+    stepDurationSeconds,
+    stepInputEnabled,
+    stepInputOctave,
+    stepInputPosition,
+    trackId,
+  ]);
+
+  const handleScrollbarScroll = useCallback(() => {
+    const scrollbar = scrollbarRef.current;
+    if (!scrollbar) return;
+    setScrollX(clamp(scrollbar.scrollLeft, 0, maxScrollX));
+  }, [maxScrollX]);
+
+  const getVelocityFromLaneY = useCallback((y: number) => {
+    const relY = clamp(y - velocityLaneY, 0, VELOCITY_LANE_HEIGHT);
+    return clamp(Math.round(127 * (1 - relY / VELOCITY_LANE_HEIGHT)), 1, 127);
+  }, [velocityLaneY]);
+
+  const upsertCCEvent = useCallback((eventX: number, eventY: number, existingEvents: MIDICCEvent[]) => {
+    const time = Math.min(clipDuration, snapTime(getTimeFromX(eventX)));
+    const relY = clamp(eventY - ccLaneY, 0, CC_LANE_HEIGHT);
+    const value = clamp(Math.round(127 * (1 - relY / CC_LANE_HEIGHT)), 0, 127);
     const filtered = existingEvents.filter(
-      (ev) => !(ev.cc === selectedCC && Math.abs(ev.time - time) < 0.01),
+      (event) => !(event.cc === selectedCC && Math.abs(event.time - time) < snapDuration * 0.5),
     );
-    const newEvents = [...filtered, { cc: selectedCC, time, value: clamped }]
-      .sort((a, b) => a.time - b.time);
-    updateMIDICCEvents(trackId, clipId, newEvents);
-  }, [ccLaneY, scrollX, pixelsPerSecond, selectedCC, clipCCEvents, trackId, clipId, updateMIDICCEvents]);
-
-  const handleCCMouseMove = useCallback((e: KonvaEvent) => {
-    if (!ccDrawing) return;
-    const stage = e.target.getStage();
-    const pos = stage.getPointerPosition();
+    return [...filtered, { cc: selectedCC, time, value }].sort((a, b) => a.time - b.time);
+  }, [ccLaneY, clipDuration, getTimeFromX, selectedCC, snapDuration, snapTime]);
+
+  const handleVelocityMouseDown = useCallback((event: KonvaEvent) => {
+    const pos = getPointer(event);
+    if (!pos || pos.y < velocityLaneY || pos.y >= velocityLaneY + VELOCITY_LANE_HEIGHT) return;
+
+    const pair = notePairs.find((candidate) => {
+      const barX = PIANO_WIDTH + candidate.startTime * pixelsPerSecond - scrollX;
+      const barWidth = Math.max(4, candidate.duration * pixelsPerSecond);
+      return pos.x >= barX && pos.x <= barX + barWidth;
+    });
+    if (!pair) return;
+
+    const id = noteIdFor(clipId, pair.startTime, pair.noteNumber);
+    const velocity = getVelocityFromLaneY(pos.y);
+    setSelectedNoteIds([id]);
+    setVelocityEdit({
+      noteId: id,
+      timestamp: pair.startTime,
+      noteNumber: pair.noteNumber,
+      originalEvents: getLatestClipEvents(),
+    });
+    updateMIDINoteVelocity(trackId, clipId, pair.startTime, pair.noteNumber, velocity, { transient: true });
+    auditionNote(pair.noteNumber, velocity, { throttle: true });
+  }, [
+    auditionNote,
+    clipId,
+    getLatestClipEvents,
+    getVelocityFromLaneY,
+    notePairs,
+    pixelsPerSecond,
+    scrollX,
+    trackId,
+    updateMIDINoteVelocity,
+    velocityLaneY,
+  ]);
+
+  const handleCCMouseDown = useCallback((event: KonvaEvent) => {
+    const pos = getPointer(event);
+    if (!pos || pos.y < ccLaneY || pos.y >= ccLaneY + CC_LANE_HEIGHT) return;
+    const originalCCEvents = getLatestCCEvents();
+    const newEvents = upsertCCEvent(pos.x, pos.y, originalCCEvents);
+    setCCDrawState({ originalCCEvents });
+    updateMIDICCEvents(trackId, clipId, newEvents, { transient: true });
+  }, [ccLaneY, clipId, getLatestCCEvents, trackId, updateMIDICCEvents, upsertCCEvent]);
+
+  const updateDragPreview = useCallback((event: KonvaEvent) => {
+    if (!dragState) return;
+    const pos = getPointer(event);
     if (!pos) return;
 
-    const x = pos.x - PIANO_WIDTH + scrollX;
-    const time = Math.max(0, x / pixelsPerSecond);
-    const relY = pos.y - ccLaneY;
-    const value = Math.round(127 * (1 - Math.max(0, Math.min(CC_LANE_HEIGHT, relY)) / CC_LANE_HEIGHT));
-    const clamped = Math.max(0, Math.min(127, value));
-
-    // Read current state directly for continuous drawing
-    const currentTrack = useDAWStore.getState().tracks.find((t) => t.id === trackId);
-    const currentClip = currentTrack?.midiClips.find((c) => c.id === clipId);
-    const existingEvents = currentClip?.ccEvents || [];
-    const filtered = existingEvents.filter(
-      (ev) => !(ev.cc === selectedCC && Math.abs(ev.time - time) < 0.02),
+    const pointerTime = snapTime(getTimeFromX(pos.x));
+    const pointerNote = getNoteFromY(pos.y);
+    const deltaTime = pointerTime - dragState.startPointerTime;
+    const deltaNote = pointerNote - dragState.startPointerNote;
+    const clipLimit = Math.max(0.01, clipDuration);
+
+    const { events: nextEvents, nextIds, auditionPair } = transformSelectedEvents(
+      dragState.originalEvents,
+      clipId,
+      dragState.noteIds,
+      (pair) => {
+        if (dragState.mode === "move") {
+          const maxStart = Math.max(0, clipLimit - pair.duration);
+          return {
+            ...pair,
+            startTime: clamp(pair.startTime + deltaTime, 0, maxStart),
+            noteNumber: clamp(pair.noteNumber + deltaNote, 0, 127),
+          };
+        }
+
+        if (dragState.mode === "resize-start") {
+          const oldEnd = pair.startTime + pair.duration;
+          const nextStart = clamp(pointerTime, 0, oldEnd - snapDuration);
+          return {
+            ...pair,
+            startTime: nextStart,
+            duration: oldEnd - nextStart,
+          };
+        }
+
+        const nextEnd = clamp(pointerTime, pair.startTime + snapDuration, clipLimit);
+        return {
+          ...pair,
+          duration: nextEnd - pair.startTime,
+        };
+      },
     );
-    const newEvents = [...filtered, { cc: selectedCC, time, value: clamped }]
-      .sort((a, b) => a.time - b.time);
-    // Direct setState to avoid pushing undo for every mousemove
-    useDAWStore.setState((s) => ({
-      tracks: s.tracks.map((t) =>
-        t.id === trackId
-          ? { ...t, midiClips: t.midiClips.map((c) => c.id === clipId ? { ...c, ccEvents: newEvents } : c) }
-          : t,
-      ),
-    }));
-  }, [ccDrawing, ccLaneY, scrollX, pixelsPerSecond, selectedCC, trackId, clipId]);
-
-  const handleCCMouseUp = useCallback(() => {
-    if (ccDrawing) {
-      setCCDrawing(false);
-      // Push final undo on mouse up
-      const currentClip = useDAWStore.getState().tracks
-        .find((t) => t.id === trackId)?.midiClips.find((c) => c.id === clipId);
-      if (currentClip?.ccEvents) {
-        updateMIDICCEvents(trackId, clipId, currentClip.ccEvents);
-      }
+
+    previewMIDIClipEvents(trackId, clipId, nextEvents);
+    if (nextIds.length > 0) setSelectedNoteIds(nextIds);
+    if (auditionPair) {
+      latestDragAuditionRef.current = {
+        noteNumber: auditionPair.noteNumber,
+        velocity: auditionPair.velocity,
+      };
+      auditionNote(auditionPair.noteNumber, auditionPair.velocity, { throttle: true, durationMs: 120 });
+    }
+  }, [
+    auditionNote,
+    clipDuration,
+    clipId,
+    dragState,
+    getNoteFromY,
+    getTimeFromX,
+    previewMIDIClipEvents,
+    snapDuration,
+    snapTime,
+    trackId,
+  ]);
+
+  const handleNoteMouseDown = useCallback((event: KonvaEvent, pair: NotePair) => {
+    event.cancelBubble = true;
+    const nativeEvent = event.evt as MouseEvent;
+    const id = noteIdFor(clipId, pair.startTime, pair.noteNumber);
+
+    if (tool === "erase") {
+      removeMIDINotes(trackId, clipId, [id]);
+      setSelectedNoteIds((previous) => previous.filter((noteId) => noteId !== id));
+      stopAudition();
+      return;
     }
-  }, [ccDrawing, trackId, clipId, updateMIDICCEvents]);
 
-  // Combined stage mouse handlers (must be before early return)
-  const handleStageMouseDown = useCallback((e: KonvaEvent) => {
-    const stage = e.target.getStage();
-    const pos = stage.getPointerPosition();
+    const modifier = nativeEvent.ctrlKey || nativeEvent.metaKey || nativeEvent.shiftKey;
+    let nextSelection = selectedNoteIds;
+    if (modifier) {
+      nextSelection = selectedNoteIds.includes(id)
+        ? selectedNoteIds.filter((noteId) => noteId !== id)
+        : [...selectedNoteIds, id];
+    } else if (!selectedNoteIds.includes(id)) {
+      nextSelection = [id];
+    }
+
+    setSelectedNoteIds(nextSelection);
+    auditionNote(pair.noteNumber, pair.velocity);
+
+    if (tool !== "select" || !nextSelection.includes(id)) return;
+
+    const pos = getPointer(event);
+    if (!pos) return;
+    const noteX = PIANO_WIDTH + pair.startTime * pixelsPerSecond - scrollX;
+    const noteWidth = Math.max(4, pair.duration * pixelsPerSecond);
+    const relX = pos.x - noteX;
+    const mode: DragMode =
+      relX <= NOTE_EDGE_HIT_WIDTH
+        ? "resize-start"
+        : noteWidth - relX <= NOTE_EDGE_HIT_WIDTH
+          ? "resize-end"
+          : "move";
+
+    setDragState({
+      mode,
+      noteIds: mode === "move" ? nextSelection : [id],
+      originalEvents: getLatestClipEvents(),
+      startPointerTime: snapTime(getTimeFromX(pos.x)),
+      startPointerNote: pair.noteNumber,
+      activeNoteId: id,
+    });
+    latestDragAuditionRef.current = {
+      noteNumber: pair.noteNumber,
+      velocity: pair.velocity,
+    };
+  }, [
+    auditionNote,
+    clipId,
+    getLatestClipEvents,
+    getTimeFromX,
+    pixelsPerSecond,
+    removeMIDINotes,
+    scrollX,
+    selectedNoteIds,
+    snapTime,
+    stopAudition,
+    tool,
+    trackId,
+  ]);
+
+  const handleStageMouseDown = useCallback((event: KonvaEvent) => {
+    const pos = getPointer(event);
     if (!pos) return;
 
     if (pos.y >= ccLaneY && pos.y < ccLaneY + CC_LANE_HEIGHT) {
-      handleCCMouseDown(e);
-    } else if (pos.y >= velocityLaneY && pos.y < velocityLaneY + VELOCITY_LANE_HEIGHT) {
-      handleVelocityMouseDown(e);
+      handleCCMouseDown(event);
+      return;
     }
-  }, [ccLaneY, velocityLaneY, handleCCMouseDown, handleVelocityMouseDown]);
-
-  const handleStageMouseMove = useCallback((e: KonvaEvent) => {
-    if (velocityEditingNote) {
-      handleVelocityMouseMove(e);
-    } else if (ccDrawing) {
-      handleCCMouseMove(e);
+    if (pos.y >= velocityLaneY && pos.y < velocityLaneY + VELOCITY_LANE_HEIGHT) {
+      handleVelocityMouseDown(event);
+      return;
     }
-  }, [velocityEditingNote, ccDrawing, handleVelocityMouseMove, handleCCMouseMove]);
+    if (pos.x < PIANO_WIDTH || pos.y >= noteGridHeight) return;
 
-  const handleStageMouseUp = useCallback(() => {
-    handleVelocityMouseUp();
-    handleCCMouseUp();
-  }, [handleVelocityMouseUp, handleCCMouseUp]);
+    const time = Math.min(clipDuration, snapTime(getTimeFromX(pos.x)));
+    const note = getNoteFromY(pos.y);
 
-  // ============================================
-  // Early return AFTER all hooks
-  // ============================================
-  if (!clip || !track) {
-    return <div className="piano-roll-empty">No MIDI clip selected</div>;
-  }
-
-  const getNoteY = (noteNumber: number) => {
-    return (TOTAL_NOTES - 1 - noteNumber) * NOTE_HEIGHT - scrollY;
-  };
-
-  const getNoteFromY = (y: number): number => {
-    return TOTAL_NOTES - 1 - Math.floor((y + scrollY) / NOTE_HEIGHT);
-  };
+    if (tool === "draw") {
+      setSelectedNoteIds([]);
+      setDrawingState({
+        startTime: time,
+        endTime: Math.min(clipDuration, time + snapDuration),
+        noteNumber: note,
+        velocity: 80,
+      });
+      return;
+    }
 
-  const snapTime = (time: number): number => {
-    const beatTime = GRID_SNAP / beatsPerSecond;
-    return Math.round(time / beatTime) * beatTime;
-  };
+    if (tool === "select") {
+      setSelectedNoteIds([]);
+    }
+  }, [
+    ccLaneY,
+    clipDuration,
+    getNoteFromY,
+    getTimeFromX,
+    handleCCMouseDown,
+    handleVelocityMouseDown,
+    noteGridHeight,
+    snapDuration,
+    snapTime,
+    tool,
+    velocityLaneY,
+  ]);
+
+  const handleStageMouseMove = useCallback((event: KonvaEvent) => {
+    const pos = getPointer(event);
+    if (!pos) return;
 
-  /** Add a note to a specific clip (used by both draw tool and step input) */
-  const addNoteToClip = (
-    targetClipId: string,
-    targetTrackId: string,
-    time: number,
-    note: number,
-    duration: number,
-    velocity: number,
-  ) => {
-    const noteOnEvent: MIDIEvent = {
-      timestamp: time,
-      type: "noteOn",
-      note,
-      velocity,
-    };
-    const noteOffEvent: MIDIEvent = {
-      timestamp: time + duration,
-      type: "noteOff",
-      note,
-      velocity: 0,
-    };
-    useDAWStore.setState((state) => ({
-      tracks: state.tracks.map((t) =>
-        t.id === targetTrackId
-          ? {
-              ...t,
-              midiClips: t.midiClips.map((c) =>
-                c.id === targetClipId
-                  ? {
-                      ...c,
-                      events: [...c.events, noteOnEvent, noteOffEvent].sort(
-                        (a, b) => a.timestamp - b.timestamp,
-                      ),
-                    }
-                  : c,
-              ),
-            }
-          : t,
-      ),
-    }));
-  };
+    if (dragState) {
+      updateDragPreview(event);
+      return;
+    }
 
-  /** Remove a note from a specific clip */
-  const removeNoteFromClip = (
-    targetClipId: string,
-    targetTrackId: string,
-    time: number,
-    note: number,
-  ) => {
-    useDAWStore.setState((state) => ({
-      tracks: state.tracks.map((t) =>
-        t.id === targetTrackId
-          ? {
-              ...t,
-              midiClips: t.midiClips.map((c) =>
-                c.id === targetClipId
-                  ? {
-                      ...c,
-                      events: c.events.filter(
-                        (e) =>
-                          !(
-                            e.note === note &&
-                            Math.abs(e.timestamp - time) < 0.01
-                          ),
-                      ),
-                    }
-                  : c,
-              ),
-            }
-          : t,
-      ),
-    }));
-  };
+    if (drawingState) {
+      setDrawingState((current) => {
+        if (!current) return null;
+        return {
+          ...current,
+          endTime: Math.min(clipDuration, Math.max(0, snapTime(getTimeFromX(pos.x)))),
+          noteNumber: getNoteFromY(pos.y),
+        };
+      });
+      return;
+    }
 
-  const handleStageClick = (e: KonvaEvent) => {
-    const stage = e.target.getStage();
-    const pos = stage.getPointerPosition();
-    const x = pos.x - PIANO_WIDTH + scrollX;
-    const y = pos.y;
+    if (velocityEdit) {
+      const velocity = getVelocityFromLaneY(pos.y);
+      updateMIDINoteVelocity(trackId, clipId, velocityEdit.timestamp, velocityEdit.noteNumber, velocity, { transient: true });
+      auditionNote(velocityEdit.noteNumber, velocity, { throttle: true, durationMs: 120 });
+      return;
+    }
 
-    // Ignore clicks in velocity lane and CC lane (handled separately)
-    if (y >= velocityLaneY) return;
+    if (ccDrawState) {
+      const currentEvents = getLatestCCEvents();
+      const nextEvents = upsertCCEvent(pos.x, pos.y, currentEvents);
+      updateMIDICCEvents(trackId, clipId, nextEvents, { transient: true });
+    }
+  }, [
+    auditionNote,
+    ccDrawState,
+    clipDuration,
+    clipId,
+    dragState,
+    drawingState,
+    getLatestCCEvents,
+    getNoteFromY,
+    getTimeFromX,
+    getVelocityFromLaneY,
+    snapTime,
+    trackId,
+    updateDragPreview,
+    updateMIDICCEvents,
+    updateMIDINoteVelocity,
+    upsertCCEvent,
+    velocityEdit,
+  ]);
 
-    if (pos.x < PIANO_WIDTH) return;
+  const handleStageMouseUp = useCallback(() => {
+    const hadEdit = dragState || drawingState || velocityEdit || ccDrawState;
+    if (hadEdit) stopAudition();
+
+    if (dragState) {
+      const finalEvents = getLatestClipEvents();
+      const description = dragState.mode === "move"
+        ? "Move MIDI notes"
+        : "Resize MIDI note";
+      commitMIDIClipEvents(trackId, clipId, dragState.originalEvents, finalEvents, description);
+      const preview = latestDragAuditionRef.current;
+      if (preview) auditionNote(preview.noteNumber, preview.velocity, { durationMs: 140 });
+      latestDragAuditionRef.current = null;
+      setDragState(null);
+    }
 
-    const time = snapTime(x / pixelsPerSecond);
-    const note = getNoteFromY(y);
+    if (drawingState) {
+      const start = Math.min(drawingState.startTime, drawingState.endTime);
+      const end = Math.max(drawingState.startTime, drawingState.endTime);
+      const duration = Math.max(snapDuration, end - start || snapDuration);
+      const newId = addMIDINote(trackId, clipId, start, drawingState.noteNumber, Math.min(duration, clipDuration - start), drawingState.velocity);
+      setSelectedNoteIds(newId ? [newId] : []);
+      auditionNote(drawingState.noteNumber, drawingState.velocity);
+      setDrawingState(null);
+    }
 
-    if (note < 0 || note >= TOTAL_NOTES) return;
+    if (velocityEdit) {
+      const finalPair = parseNotePairs(getLatestClipEvents()).find((pair) =>
+        noteIdFor(clipId, pair.startTime, pair.noteNumber) === velocityEdit.noteId
+        || (Math.abs(pair.startTime - velocityEdit.timestamp) < 0.001 && pair.noteNumber === velocityEdit.noteNumber),
+      );
+      commitMIDIClipEvents(trackId, clipId, velocityEdit.originalEvents, getLatestClipEvents(), "Edit MIDI velocity");
+      if (finalPair) auditionNote(finalPair.noteNumber, finalPair.velocity, { durationMs: 140 });
+      setVelocityEdit(null);
+    }
 
-    if (tool === "draw") {
-      addNoteToClip(clipId, trackId, time, note, 0.25, 80);
-    } else if (tool === "erase") {
-      // Try to remove from primary clip first, then additional clips
-      removeNoteFromClip(clipId, trackId, time, note);
-      for (const ac of additionalClips) {
-        removeNoteFromClip(ac.id, trackId, time, note);
-      }
+    if (ccDrawState) {
+      commitMIDICCEvents(trackId, clipId, ccDrawState.originalCCEvents, getLatestCCEvents(), "Draw MIDI CC");
+      setCCDrawState(null);
     }
-  };
+  }, [
+    addMIDINote,
+    auditionNote,
+    ccDrawState,
+    clipDuration,
+    clipId,
+    commitMIDICCEvents,
+    commitMIDIClipEvents,
+    dragState,
+    drawingState,
+    getLatestCCEvents,
+    getLatestClipEvents,
+    snapDuration,
+    stopAudition,
+    trackId,
+    velocityEdit,
+  ]);
+
+  useEffect(() => {
+    window.addEventListener("mouseup", handleStageMouseUp);
+    return () => window.removeEventListener("mouseup", handleStageMouseUp);
+  }, [handleStageMouseUp]);
 
-  // ============================================
-  // Render Functions
-  // ============================================
+  if (!clip || !track) {
+    return <div className="piano-roll-empty">No MIDI clip selected</div>;
+  }
 
   const renderPianoKeyboard = () => {
     const keys = [];
-    for (let i = 0; i < TOTAL_NOTES; i++) {
-      const y = getNoteY(i);
-      const noteName = NOTE_NAMES[i % NOTES_PER_OCTAVE];
+    const firstRow = Math.max(0, Math.floor(scrollY / NOTE_HEIGHT) - 1);
+    const lastRow = Math.min(TOTAL_NOTES, Math.ceil((scrollY + noteGridHeight) / NOTE_HEIGHT) + 1);
+    for (let row = firstRow; row < lastRow; row += 1) {
+      const noteNumber = TOTAL_NOTES - 1 - row;
+      const y = row * NOTE_HEIGHT - scrollY;
+      const noteName = NOTE_NAMES[noteNumber % NOTES_PER_OCTAVE];
       const isBlackKey = noteName.includes("#");
       const isC = noteName === "C";
-
       keys.push(
-        <Group key={`pk-${i}`}>
+        <Group key={`pk-${noteNumber}`}>
           <Rect
             x={0}
             y={y}
             width={PIANO_WIDTH}
             height={NOTE_HEIGHT}
-            fill={isBlackKey ? "#333" : "#fff"}
-            stroke="#000"
+            fill={isBlackKey ? "#27272a" : "#f4f4f5"}
+            stroke="#0a0a0a"
             strokeWidth={0.5}
           />
           {isC && (
             <Text
               x={5}
               y={y + 2}
-              text={`C${Math.floor(i / 12) - 2}`}
+              text={`C${Math.floor(noteNumber / 12) - 2}`}
               fontSize={9}
-              fill={isBlackKey ? "#fff" : "#000"}
+              fill="#0a0a0a"
+              listening={false}
             />
           )}
         </Group>,
@@ -750,54 +1148,50 @@ export function PianoRoll({ clipId, trackId, additionalClipIds = [] }: PianoRoll
 
   const renderGrid = () => {
     const elements: React.ReactNode[] = [];
-    const gridWidth = clipDuration * pixelsPerSecond;
     const beatInterval = 1 / beatsPerSecond;
+    const firstRow = Math.max(0, Math.floor(scrollY / NOTE_HEIGHT) - 1);
+    const lastRow = Math.min(TOTAL_NOTES, Math.ceil((scrollY + noteGridHeight) / NOTE_HEIGHT) + 1);
 
-    // Beat grid shading: alternate beats
     let beatIndex = 0;
-    for (let t = 0; t < clipDuration; t += beatInterval) {
-      const bx = PIANO_WIDTH + t * pixelsPerSecond - scrollX;
-      const bw = beatInterval * pixelsPerSecond;
-
-      if (bx + bw < PIANO_WIDTH || bx > dimensions.width) {
-        beatIndex++;
+    for (let time = 0; time < contentDuration; time += beatInterval) {
+      const x = PIANO_WIDTH + time * pixelsPerSecond - scrollX;
+      const width = beatInterval * pixelsPerSecond;
+      if (x + width < PIANO_WIDTH || x > dimensions.width) {
+        beatIndex += 1;
         continue;
       }
-
       if (beatIndex % 2 === 1) {
         elements.push(
           <Rect
             key={`beat-shade-${beatIndex}`}
-            x={Math.max(PIANO_WIDTH, bx)}
+            x={Math.max(PIANO_WIDTH, x)}
             y={0}
-            width={Math.min(bw, dimensions.width - bx)}
-            height={TOTAL_NOTES * NOTE_HEIGHT}
+            width={Math.min(width, dimensions.width - x)}
+            height={noteGridHeight}
             fill="#ffffff"
-            opacity={0.04}
+            opacity={0.035}
             listening={false}
           />,
         );
       }
-      beatIndex++;
+      beatIndex += 1;
     }
 
-    // Horizontal lines (note rows) with scale highlighting
-    for (let i = 0; i <= TOTAL_NOTES; i++) {
-      const y = i * NOTE_HEIGHT - scrollY;
-      const noteNumber = TOTAL_NOTES - 1 - i;
+    for (let row = firstRow; row <= lastRow; row += 1) {
+      const y = row * NOTE_HEIGHT - scrollY;
+      const noteNumber = TOTAL_NOTES - 1 - row;
       const noteName = NOTE_NAMES[noteNumber >= 0 ? noteNumber % NOTES_PER_OCTAVE : 0];
       const isC = noteName === "C";
       const isBlackKey = noteName.includes("#");
       const inScale = noteNumber >= 0 && isNoteInScale(noteNumber, scaleRoot, scaleType);
 
-      // Scale highlighting: in-scale rows get a lighter tint
-      if (i < TOTAL_NOTES && scaleType !== "chromatic" && inScale) {
+      if (row < TOTAL_NOTES && scaleType !== "chromatic" && inScale) {
         elements.push(
           <Rect
-            key={`scale-bg-${i}`}
+            key={`scale-bg-${row}`}
             x={PIANO_WIDTH}
             y={y}
-            width={gridWidth}
+            width={contentWidth}
             height={NOTE_HEIGHT}
             fill="#4cc9f0"
             opacity={0.06}
@@ -805,15 +1199,13 @@ export function PianoRoll({ clipId, trackId, additionalClipIds = [] }: PianoRoll
           />,
         );
       }
-
-      // Black key row background tint
-      if (isBlackKey && i < TOTAL_NOTES) {
+      if (isBlackKey && row < TOTAL_NOTES) {
         elements.push(
           <Rect
-            key={`black-bg-${i}`}
+            key={`black-bg-${row}`}
             x={PIANO_WIDTH}
             y={y}
-            width={gridWidth}
+            width={contentWidth}
             height={NOTE_HEIGHT}
             fill="#000000"
             opacity={0.08}
@@ -824,27 +1216,26 @@ export function PianoRoll({ clipId, trackId, additionalClipIds = [] }: PianoRoll
 
       elements.push(
         <Line
-          key={`h-${i}`}
-          points={[PIANO_WIDTH, y, PIANO_WIDTH + gridWidth - scrollX, y]}
-          stroke={isC ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.05)"}
+          key={`h-${row}`}
+          points={[PIANO_WIDTH, y, dimensions.width, y]}
+          stroke={isC ? "rgba(255,255,255,0.22)" : "rgba(255,255,255,0.055)"}
           strokeWidth={isC ? 1 : 0.5}
+          listening={false}
         />,
       );
     }
 
-    // Vertical lines (beat grid)
-    for (let t = 0; t <= clipDuration; t += beatInterval * GRID_SNAP) {
-      const x = PIANO_WIDTH + t * pixelsPerSecond - scrollX;
-      const isBeat = Math.abs(t % beatInterval) < 0.001;
-
+    for (let time = 0; time <= contentDuration; time += beatInterval * GRID_SNAP) {
+      const x = PIANO_WIDTH + time * pixelsPerSecond - scrollX;
       if (x < PIANO_WIDTH || x > dimensions.width) continue;
-
+      const isBeat = Math.abs(time % beatInterval) < 0.001;
       elements.push(
         <Line
-          key={`v-${t.toFixed(4)}`}
-          points={[x, 0, x, TOTAL_NOTES * NOTE_HEIGHT - scrollY]}
-          stroke={isBeat ? "rgba(255,255,255,0.15)" : "rgba(255,255,255,0.05)"}
+          key={`v-${time.toFixed(4)}`}
+          points={[x, 0, x, noteGridHeight]}
+          stroke={isBeat ? "rgba(255,255,255,0.16)" : "rgba(255,255,255,0.055)"}
           strokeWidth={isBeat ? 1 : 0.5}
+          listening={false}
         />,
       );
     }
@@ -852,148 +1243,114 @@ export function PianoRoll({ clipId, trackId, additionalClipIds = [] }: PianoRoll
     return elements;
   };
 
-  // Ghost notes from other MIDI clips (excluding additional clips being edited)
   const renderGhostNotes = () => {
     const ghostElements: React.ReactNode[] = [];
     const editingClipIds = new Set([clipId, ...additionalClipIds]);
-    const otherClips = track.midiClips.filter((c) => !editingClipIds.has(c.id));
-
-    for (const otherClip of otherClips) {
-      const timeOffset = otherClip.startTime - clipStartTime;
-      const noteOns = otherClip.events.filter((e) => e.type === "noteOn");
-
-      for (const noteOn of noteOns) {
-        const noteOff = otherClip.events.find(
-          (e) =>
-            e.type === "noteOff" &&
-            e.note === noteOn.note &&
-            e.timestamp > noteOn.timestamp,
-        );
-
-        if (!noteOff || noteOn.note === undefined) continue;
-
-        const adjustedTime = noteOn.timestamp + timeOffset;
-        const x = PIANO_WIDTH + adjustedTime * pixelsPerSecond - scrollX;
-        const y = getNoteY(noteOn.note);
-        const width = (noteOff.timestamp - noteOn.timestamp) * pixelsPerSecond;
-
-        if (x + width < PIANO_WIDTH || x > dimensions.width) continue;
-
-        ghostElements.push(
-          <Rect
-            key={`ghost-${otherClip.id}-${noteOn.timestamp}-${noteOn.note}`}
-            x={x}
-            y={y}
-            width={width}
-            height={NOTE_HEIGHT - 1}
-            fill="#888888"
-            opacity={0.2}
-            cornerRadius={2}
-            listening={false}
-          />,
-        );
-      }
-    }
-
+    track.midiClips
+      .filter((candidate) => !editingClipIds.has(candidate.id))
+      .forEach((otherClip) => {
+        const timeOffset = otherClip.startTime - clipStartTime;
+        parseNotePairs(otherClip.events).forEach((pair) => {
+          const adjustedTime = pair.startTime + timeOffset;
+          const x = PIANO_WIDTH + adjustedTime * pixelsPerSecond - scrollX;
+          const y = getNoteY(pair.noteNumber);
+          const width = pair.duration * pixelsPerSecond;
+          if (x + width < PIANO_WIDTH || x > dimensions.width || y + NOTE_HEIGHT < 0 || y > noteGridHeight) return;
+          ghostElements.push(
+            <Rect
+              key={`ghost-${otherClip.id}-${pair.startTime}-${pair.noteNumber}`}
+              x={x}
+              y={y}
+              width={Math.max(3, width)}
+              height={NOTE_HEIGHT - 1}
+              fill="#9ca3af"
+              opacity={0.2}
+              cornerRadius={2}
+              listening={false}
+            />,
+          );
+        });
+      });
     return ghostElements;
   };
 
-  const renderNotes = () => {
-    const noteElements: React.ReactNode[] = [];
-
-    // Render primary clip notes
-    for (const pair of notePairs) {
+  const renderPrimaryNotes = () => {
+    return notePairs.map((pair) => {
+      const id = noteIdFor(clipId, pair.startTime, pair.noteNumber);
       const x = PIANO_WIDTH + pair.startTime * pixelsPerSecond - scrollX;
       const y = getNoteY(pair.noteNumber);
-      const width = pair.duration * pixelsPerSecond;
-
-      if (x + width < PIANO_WIDTH || x > dimensions.width) continue;
+      const width = Math.max(4, pair.duration * pixelsPerSecond);
+      if (x + width < PIANO_WIDTH || x > dimensions.width || y + NOTE_HEIGHT < 0 || y > noteGridHeight) return null;
 
+      const selected = selectedNoteIds.includes(id);
       const fillColor = velocityColor(pair.velocity);
-      const strokeColor = velocityStrokeColor(pair.velocity);
-      const hasPressure = pair.pressure !== undefined && pair.pressure > 0;
-      const hasPitchBend = pair.pitchBend !== undefined && pair.pitchBend !== 0;
-      const hasSlide = pair.slide !== undefined && pair.slide > 0;
-
-      const noteLabel = getNoteNameFromPitch(pair.noteNumber);
+      const strokeColor = selected ? "#ffffff" : velocityStrokeColor(pair.velocity);
       const showName = width > 40;
 
-      noteElements.push(
-        <Group key={`note-${pair.startTime}-${pair.noteNumber}`}>
+      return (
+        <Group key={`note-${id}`} onMouseDown={(event) => handleNoteMouseDown(event, pair)}>
           <Rect
             x={x}
             y={y}
             width={width}
             height={NOTE_HEIGHT - 1}
             fill={fillColor}
-            opacity={0.85}
+            opacity={selected ? 0.98 : 0.85}
             stroke={strokeColor}
-            strokeWidth={1}
+            strokeWidth={selected ? 1.5 : 1}
             cornerRadius={2}
+            shadowColor={selected ? "#ffffff" : undefined}
+            shadowBlur={selected ? 5 : 0}
+            shadowOpacity={selected ? 0.28 : 0}
           />
-          {hasPressure && (
-            <Rect
-              x={x}
-              y={y}
-              width={width}
-              height={NOTE_HEIGHT - 1}
-              fill="#ffffff"
-              opacity={pair.pressure! * 0.3}
-              cornerRadius={2}
-              listening={false}
-            />
+          {selected && width > 14 && (
+            <>
+              <Rect x={x + 2} y={y + 2} width={2} height={NOTE_HEIGHT - 5} fill="#ffffff" opacity={0.9} listening={false} />
+              <Rect x={x + width - 4} y={y + 2} width={2} height={NOTE_HEIGHT - 5} fill="#ffffff" opacity={0.9} listening={false} />
+            </>
+          )}
+          {pair.pressure !== undefined && pair.pressure > 0 && (
+            <Rect x={x} y={y} width={width} height={NOTE_HEIGHT - 1} fill="#ffffff" opacity={pair.pressure * 0.3} cornerRadius={2} listening={false} />
           )}
-          {hasPitchBend && width > 8 && (
+          {pair.pitchBend !== undefined && pair.pitchBend !== 0 && width > 8 && (
             <Line
-              points={
-                pair.pitchBend! > 0
-                  ? [x + width - 6, y + NOTE_HEIGHT - 4, x + width - 3, y + 2, x + width, y + NOTE_HEIGHT - 4]
-                  : [x + width - 6, y + 2, x + width - 3, y + NOTE_HEIGHT - 4, x + width, y + 2]
-              }
+              points={pair.pitchBend > 0
+                ? [x + width - 6, y + NOTE_HEIGHT - 4, x + width - 3, y + 2, x + width, y + NOTE_HEIGHT - 4]
+                : [x + width - 6, y + 2, x + width - 3, y + NOTE_HEIGHT - 4, x + width, y + 2]}
               fill="#ffffff"
               closed
               opacity={0.7}
               listening={false}
             />
           )}
-          {hasSlide && width > 8 && (
-            <Line
-              points={[x + width - 8, y + NOTE_HEIGHT - 3, x + width - 2, y + 2]}
-              stroke="#ffffff"
-              strokeWidth={1.5}
-              opacity={0.6}
-              listening={false}
-            />
+          {pair.slide !== undefined && pair.slide > 0 && width > 8 && (
+            <Line points={[x + width - 8, y + NOTE_HEIGHT - 3, x + width - 2, y + 2]} stroke="#ffffff" strokeWidth={1.5} opacity={0.6} listening={false} />
           )}
           {showName && (
             <Text
-              x={x + 3}
+              x={x + 4}
               y={y + 1}
-              text={noteLabel}
+              text={getNoteNameFromPitch(pair.noteNumber)}
               fontSize={8}
               fill="#000000"
               opacity={0.7}
-              width={width - 6}
+              width={width - 8}
               listening={false}
             />
           )}
-        </Group>,
+        </Group>
       );
-    }
+    });
+  };
 
-    // Render additional clip notes (multi-clip editing) with tinted colors
-    for (const pair of additionalClipNotePairs) {
+  const renderAdditionalClipNotes = () => {
+    return additionalClipNotePairs.map((pair) => {
       const x = PIANO_WIDTH + pair.startTime * pixelsPerSecond - scrollX;
       const y = getNoteY(pair.noteNumber);
-      const width = pair.duration * pixelsPerSecond;
-
-      if (x + width < PIANO_WIDTH || x > dimensions.width) continue;
-
+      const width = Math.max(4, pair.duration * pixelsPerSecond);
+      if (x + width < PIANO_WIDTH || x > dimensions.width || y + NOTE_HEIGHT < 0 || y > noteGridHeight) return null;
       const tintColor = MULTI_CLIP_TINTS[pair.clipIndex % MULTI_CLIP_TINTS.length] || "#ff6b9d";
-      const noteLabel = getNoteNameFromPitch(pair.noteNumber);
-      const showName = width > 40;
-
-      noteElements.push(
+      return (
         <Group key={`mcnote-${pair.clipId}-${pair.startTime}-${pair.noteNumber}`}>
           <Rect
             x={x}
@@ -1001,360 +1358,205 @@ export function PianoRoll({ clipId, trackId, additionalClipIds = [] }: PianoRoll
             width={width}
             height={NOTE_HEIGHT - 1}
             fill={tintColor}
-            opacity={0.7}
+            opacity={0.68}
             stroke={tintColor}
             strokeWidth={1}
             cornerRadius={2}
+            listening={false}
           />
-          {showName && (
-            <Text
-              x={x + 3}
-              y={y + 1}
-              text={noteLabel}
-              fontSize={8}
-              fill="#000000"
-              opacity={0.6}
-              width={width - 6}
-              listening={false}
-            />
+          {width > 40 && (
+            <Text x={x + 3} y={y + 1} text={getNoteNameFromPitch(pair.noteNumber)} fontSize={8} fill="#000000" opacity={0.6} width={width - 6} listening={false} />
           )}
-        </Group>,
+        </Group>
       );
-    }
+    });
+  };
 
-    return noteElements;
+  const renderDrawingPreview = () => {
+    if (!drawingState) return null;
+    const start = Math.min(drawingState.startTime, drawingState.endTime);
+    const end = Math.max(drawingState.startTime, drawingState.endTime);
+    const x = PIANO_WIDTH + start * pixelsPerSecond - scrollX;
+    const y = getNoteY(drawingState.noteNumber);
+    const width = Math.max(4, (end - start || snapDuration) * pixelsPerSecond);
+    return (
+      <Rect
+        x={x}
+        y={y}
+        width={width}
+        height={NOTE_HEIGHT - 1}
+        fill="#ffffff"
+        opacity={0.35}
+        stroke="#4cc9f0"
+        strokeWidth={1}
+        dash={[4, 2]}
+        cornerRadius={2}
+        listening={false}
+      />
+    );
   };
 
-  // Step input cursor line
   const renderStepInputCursor = () => {
     if (!stepInputEnabled) return null;
     const cursorX = PIANO_WIDTH + stepInputPosition * pixelsPerSecond - scrollX;
     if (cursorX < PIANO_WIDTH || cursorX > dimensions.width) return null;
-
     return (
       <Group>
-        {/* Vertical cursor line */}
-        <Line
-          key="step-cursor"
-          points={[cursorX, 0, cursorX, noteGridHeight]}
-          stroke="#ff4444"
-          strokeWidth={2}
-          opacity={0.9}
-          dash={[6, 3]}
-          listening={false}
-        />
-        {/* Small triangle indicator at top */}
-        <Line
-          key="step-cursor-arrow"
-          points={[cursorX - 5, 0, cursorX + 5, 0, cursorX, 8]}
-          fill="#ff4444"
-          closed
-          listening={false}
-        />
+        <Line points={[cursorX, 0, cursorX, noteGridHeight]} stroke="#ff4444" strokeWidth={2} opacity={0.9} dash={[6, 3]} listening={false} />
+        <Line points={[cursorX - 5, 0, cursorX + 5, 0, cursorX, 8]} fill="#ff4444" closed listening={false} />
       </Group>
     );
   };
 
-  // ============================================
-  // Velocity Lane Rendering
-  // ============================================
   const renderVelocityLane = () => {
-    const elements: React.ReactNode[] = [];
-
-    // Background + divider + label
-    elements.push(
+    const elements: React.ReactNode[] = [
       <Rect key="vel-bg" x={0} y={velocityLaneY} width={dimensions.width} height={VELOCITY_LANE_HEIGHT} fill="#161616" listening={false} />,
       <Line key="vel-divider" points={[0, velocityLaneY, dimensions.width, velocityLaneY]} stroke="rgba(255,255,255,0.15)" strokeWidth={1} listening={false} />,
-      <Text key="vel-label" x={4} y={velocityLaneY + 2} text="Vel" fontSize={9} fill="#666" listening={false} />,
-    );
-
-    // Horizontal guide lines at 25%, 50%, 75%
-    for (const frac of [0.25, 0.5, 0.75]) {
-      const gy = velocityLaneY + VELOCITY_LANE_HEIGHT * (1 - frac);
-      elements.push(
-        <Line key={`vel-guide-${frac}`} points={[PIANO_WIDTH, gy, dimensions.width, gy]} stroke="rgba(255,255,255,0.06)" strokeWidth={0.5} listening={false} />,
-      );
-    }
-
-    // Draw velocity bars for each note
-    for (const pair of notePairs) {
-      const barX = PIANO_WIDTH + pair.startTime * pixelsPerSecond - scrollX;
-      const barWidth = Math.max(4, pair.duration * pixelsPerSecond - 1);
-
-      if (barX + barWidth < PIANO_WIDTH || barX > dimensions.width) continue;
+      <Text key="vel-label" x={4} y={velocityLaneY + 2} text="Vel" fontSize={9} fill="#8a8a8a" listening={false} />,
+    ];
 
-      const velFrac = pair.velocity / 127;
-      const barHeight = velFrac * (VELOCITY_LANE_HEIGHT - 4);
-      const barY = velocityLaneY + VELOCITY_LANE_HEIGHT - barHeight - 2;
-      const color = velocityColor(pair.velocity);
+    [0.25, 0.5, 0.75].forEach((frac) => {
+      const y = velocityLaneY + VELOCITY_LANE_HEIGHT * (1 - frac);
+      elements.push(<Line key={`vel-guide-${frac}`} points={[PIANO_WIDTH, y, dimensions.width, y]} stroke="rgba(255,255,255,0.06)" strokeWidth={0.5} listening={false} />);
+    });
 
+    notePairs.forEach((pair) => {
+      const x = PIANO_WIDTH + pair.startTime * pixelsPerSecond - scrollX;
+      const width = Math.max(4, pair.duration * pixelsPerSecond - 1);
+      if (x + width < PIANO_WIDTH || x > dimensions.width) return;
+      const barHeight = (pair.velocity / 127) * (VELOCITY_LANE_HEIGHT - 4);
+      const y = velocityLaneY + VELOCITY_LANE_HEIGHT - barHeight - 2;
       elements.push(
         <Rect
           key={`vel-bar-${pair.startTime}-${pair.noteNumber}`}
-          x={barX}
-          y={barY}
-          width={barWidth}
+          x={x}
+          y={y}
+          width={width}
           height={barHeight}
-          fill={color}
-          opacity={0.8}
+          fill={velocityColor(pair.velocity)}
+          opacity={selectedNoteIds.includes(noteIdFor(clipId, pair.startTime, pair.noteNumber)) ? 1 : 0.8}
           cornerRadius={1}
         />,
       );
-    }
-
-    // Clickable overlay for the whole velocity lane
-    elements.push(
-      <Rect key="vel-overlay" x={PIANO_WIDTH} y={velocityLaneY} width={dimensions.width - PIANO_WIDTH} height={VELOCITY_LANE_HEIGHT} fill="transparent" />,
-    );
+    });
 
+    elements.push(<Rect key="vel-overlay" x={PIANO_WIDTH} y={velocityLaneY} width={dimensions.width - PIANO_WIDTH} height={VELOCITY_LANE_HEIGHT} fill="transparent" />);
     return elements;
   };
 
-  // ============================================
-  // CC Lane Rendering
-  // ============================================
   const renderCCLane = () => {
     const elements: React.ReactNode[] = [];
-    const ccPreset = CC_PRESETS.find((p) => p.cc === selectedCC);
-
-    // Background + divider + label
+    const ccPreset = CC_PRESETS.find((preset) => preset.cc === selectedCC);
     elements.push(
       <Rect key="cc-bg" x={0} y={ccLaneY} width={dimensions.width} height={CC_LANE_HEIGHT} fill="#141414" listening={false} />,
       <Line key="cc-divider" points={[0, ccLaneY, dimensions.width, ccLaneY]} stroke="rgba(255,255,255,0.15)" strokeWidth={1} listening={false} />,
-      <Text key="cc-label" x={4} y={ccLaneY + 2} text={ccPreset?.name || `CC#${selectedCC}`} fontSize={9} fill="#666" listening={false} />,
+      <Text key="cc-label" x={4} y={ccLaneY + 2} text={ccPreset?.name || `CC#${selectedCC}`} fontSize={9} fill="#8a8a8a" listening={false} />,
     );
 
-    // Horizontal guide lines
-    for (const frac of [0.25, 0.5, 0.75]) {
-      const gy = ccLaneY + CC_LANE_HEIGHT * (1 - frac);
-      elements.push(
-        <Line key={`cc-guide-${frac}`} points={[PIANO_WIDTH, gy, dimensions.width, gy]} stroke="rgba(255,255,255,0.06)" strokeWidth={0.5} listening={false} />,
-      );
+    [0.25, 0.5, 0.75].forEach((frac) => {
+      const y = ccLaneY + CC_LANE_HEIGHT * (1 - frac);
+      elements.push(<Line key={`cc-guide-${frac}`} points={[PIANO_WIDTH, y, dimensions.width, y]} stroke="rgba(255,255,255,0.06)" strokeWidth={0.5} listening={false} />);
+    });
+
+    const linePoints: number[] = [];
+    ccEventsForLane.forEach((event) => {
+      const x = PIANO_WIDTH + event.time * pixelsPerSecond - scrollX;
+      const y = ccLaneY + CC_LANE_HEIGHT * (1 - event.value / 127);
+      linePoints.push(x, y);
+    });
+    if (linePoints.length >= 4) {
+      elements.push(<Line key="cc-line" points={linePoints} stroke="#4cc9f0" strokeWidth={1.5} opacity={0.6} listening={false} />);
     }
 
-    // Draw CC events as vertical bars and connecting line
-    if (ccEventsForLane.length > 0) {
-      // Draw connecting line
-      const linePoints: number[] = [];
-      for (const ev of ccEventsForLane) {
-        const x = PIANO_WIDTH + ev.time * pixelsPerSecond - scrollX;
-        const y = ccLaneY + CC_LANE_HEIGHT * (1 - ev.value / 127);
-        linePoints.push(x, y);
-      }
-      if (linePoints.length >= 4) {
-        elements.push(
-          <Line key="cc-line" points={linePoints} stroke="#4cc9f0" strokeWidth={1.5} opacity={0.6} listening={false} />,
-        );
-      }
-
-      // Draw individual CC points
-      for (let i = 0; i < ccEventsForLane.length; i++) {
-        const ev = ccEventsForLane[i];
-        const x = PIANO_WIDTH + ev.time * pixelsPerSecond - scrollX;
-        if (x < PIANO_WIDTH || x > dimensions.width) continue;
-
-        const valFrac = ev.value / 127;
-        const barHeight = valFrac * (CC_LANE_HEIGHT - 4);
-        const barY = ccLaneY + CC_LANE_HEIGHT - barHeight - 2;
-
-        // Vertical stem + dot
-        elements.push(
-          <Rect key={`cc-bar-${i}`} x={x - 1} y={barY} width={3} height={barHeight} fill="#4cc9f0" opacity={0.5} listening={false} />,
-          <Rect key={`cc-dot-${i}`} x={x - 3} y={barY - 3} width={6} height={6} fill="#4cc9f0" cornerRadius={3} opacity={0.9} listening={false} />,
-        );
-      }
-    }
-
-    // Clickable overlay
-    elements.push(
-      <Rect key="cc-overlay" x={PIANO_WIDTH} y={ccLaneY} width={dimensions.width - PIANO_WIDTH} height={CC_LANE_HEIGHT} fill="transparent" />,
-    );
+    ccEventsForLane.forEach((event, index) => {
+      const x = PIANO_WIDTH + event.time * pixelsPerSecond - scrollX;
+      if (x < PIANO_WIDTH || x > dimensions.width) return;
+      const barHeight = (event.value / 127) * (CC_LANE_HEIGHT - 4);
+      const y = ccLaneY + CC_LANE_HEIGHT - barHeight - 2;
+      elements.push(
+        <Rect key={`cc-bar-${index}`} x={x - 1} y={y} width={3} height={barHeight} fill="#4cc9f0" opacity={0.5} listening={false} />,
+        <Rect key={`cc-dot-${index}`} x={x - 3} y={y - 3} width={6} height={6} fill="#4cc9f0" cornerRadius={3} opacity={0.9} listening={false} />,
+      );
+    });
 
+    elements.push(<Rect key="cc-overlay" x={PIANO_WIDTH} y={ccLaneY} width={dimensions.width - PIANO_WIDTH} height={CC_LANE_HEIGHT} fill="transparent" />);
     return elements;
   };
 
   return (
     <div className="piano-roll" ref={containerRef}>
-      <div className="piano-roll-toolbar">
-        <Button
-          variant="default"
-          size="sm"
-          active={tool === "draw"}
-          onClick={() => setTool("draw")}
-          title="Draw Tool (D)"
-        >
+      <div className="piano-roll-toolbar" ref={toolbarRef}>
+        <Button variant="default" size="sm" active={tool === "draw"} onClick={() => setTool("draw")} title="Draw Tool (D)">
           Draw
         </Button>
-        <Button
-          variant="default"
-          size="sm"
-          active={tool === "select"}
-          onClick={() => setTool("select")}
-          title="Select Tool (V)"
-        >
+        <Button variant="default" size="sm" active={tool === "select"} onClick={() => setTool("select")} title="Select Tool (V)">
           Select
         </Button>
-        <Button
-          variant="default"
-          size="sm"
-          active={tool === "erase"}
-          onClick={() => setTool("erase")}
-          title="Erase Tool (E)"
-        >
+        <Button variant="default" size="sm" active={tool === "erase"} onClick={() => setTool("erase")} title="Erase Tool (E)">
           Erase
         </Button>
         <div className="toolbar-divider" />
-        <label htmlFor="pr-zoom">Zoom:</label>
-        <input
-          id="pr-zoom"
-          type="range"
-          min="50"
-          max="200"
-          value={zoom}
-          onChange={(e) => setZoom(Number.parseInt(e.target.value))}
-          className="zoom-slider"
-        />
+        <label htmlFor="pr-zoom">Zoom</label>
+        <input id="pr-zoom" type="range" min={MIN_ZOOM} max={MAX_ZOOM} value={zoom} onChange={(event) => setZoom(Number.parseInt(event.target.value, 10))} className="zoom-slider" />
         <div className="toolbar-divider" />
-
-        {/* Scale Selector */}
-        <label htmlFor="pr-root">Root:</label>
-        <select
-          id="pr-root"
-          className="piano-roll-select"
-          value={scaleRoot}
-          onChange={(e) => setPianoRollScaleRoot(Number.parseInt(e.target.value))}
-        >
-          {NOTE_NAMES.map((name, idx) => (
-            <option key={name} value={idx}>
-              {name}
-            </option>
+        <label htmlFor="pr-root">Root</label>
+        <select id="pr-root" className="piano-roll-select" value={scaleRoot} onChange={(event) => setPianoRollScaleRoot(Number.parseInt(event.target.value, 10))}>
+          {NOTE_NAMES.map((name, index) => (
+            <option key={name} value={index}>{name}</option>
           ))}
         </select>
-        <label htmlFor="pr-scale">Scale:</label>
-        <select
-          id="pr-scale"
-          className="piano-roll-select"
-          value={scaleType}
-          onChange={(e) => setPianoRollScaleType(e.target.value)}
-        >
+        <label htmlFor="pr-scale">Scale</label>
+        <select id="pr-scale" className="piano-roll-select" value={scaleType} onChange={(event) => setPianoRollScaleType(event.target.value)}>
           {Object.entries(SCALE_DISPLAY_NAMES).map(([key, displayLabel]) => (
-            <option key={key} value={key}>
-              {displayLabel}
-            </option>
+            <option key={key} value={key}>{displayLabel}</option>
           ))}
         </select>
         <div className="toolbar-divider" />
-
-        {/* CC Lane Selector */}
-        <label htmlFor="pr-cc">CC:</label>
-        <select
-          id="pr-cc"
-          className="piano-roll-select"
-          value={selectedCC}
-          onChange={(e) => setSelectedCC(Number.parseInt(e.target.value))}
-        >
+        <label htmlFor="pr-cc">CC</label>
+        <select id="pr-cc" className="piano-roll-select" value={selectedCC} onChange={(event) => setSelectedCC(Number.parseInt(event.target.value, 10))}>
           {CC_PRESETS.map((preset) => (
-            <option key={preset.cc} value={preset.cc}>
-              {preset.name}
-            </option>
+            <option key={preset.cc} value={preset.cc}>{preset.name}</option>
           ))}
         </select>
         <div className="toolbar-divider" />
-
-        {/* Transform Dropdown */}
         <div ref={transformMenuRef} style={{ position: "relative", display: "inline-block" }}>
-          <Button
-            variant="default"
-            size="sm"
-            onClick={() => setShowTransformMenu((v) => !v)}
-            title="MIDI Transform"
-          >
+          <Button variant="default" size="sm" onClick={() => setShowTransformMenu((value) => !value)} title="MIDI Transform">
             Transform
           </Button>
           {showTransformMenu && (
-            <div
-              style={{
-                position: "absolute",
-                top: "100%",
-                left: 0,
-                zIndex: 100,
-                background: "#2a2a2a",
-                border: "1px solid #444",
-                borderRadius: 4,
-                padding: "4px 0",
-                minWidth: 200,
-                boxShadow: "0 4px 12px rgba(0,0,0,0.5)",
-              }}
-            >
-              <button className="piano-roll-transform-item" onClick={() => { transposeMIDINotes(clipId, 1); setShowTransformMenu(false); }}>
-                Transpose Up (+1)
-              </button>
-              <button className="piano-roll-transform-item" onClick={() => { transposeMIDINotes(clipId, -1); setShowTransformMenu(false); }}>
-                Transpose Down (-1)
-              </button>
-              <button className="piano-roll-transform-item" onClick={() => { transposeMIDINotes(clipId, 12); setShowTransformMenu(false); }}>
-                Transpose Octave Up (+12)
-              </button>
-              <button className="piano-roll-transform-item" onClick={() => { transposeMIDINotes(clipId, -12); setShowTransformMenu(false); }}>
-                Transpose Octave Down (-12)
-              </button>
-              <div style={{ height: 1, background: "#444", margin: "4px 0" }} />
-              <button className="piano-roll-transform-item" onClick={() => { scaleMIDINoteVelocity(clipId, 1.1); setShowTransformMenu(false); }}>
-                Velocity +10%
-              </button>
-              <button className="piano-roll-transform-item" onClick={() => { scaleMIDINoteVelocity(clipId, 0.9); setShowTransformMenu(false); }}>
-                Velocity -10%
-              </button>
-              <div style={{ height: 1, background: "#444", margin: "4px 0" }} />
-              <button className="piano-roll-transform-item" onClick={() => { reverseMIDINotes(clipId); setShowTransformMenu(false); }}>
-                Reverse
-              </button>
-              <button className="piano-roll-transform-item" onClick={() => { invertMIDINotes(clipId); setShowTransformMenu(false); }}>
-                Invert
-              </button>
+            <div className="piano-roll-transform-menu">
+              <button className="piano-roll-transform-item" onClick={() => { transposeMIDINotes(clipId, 1); setShowTransformMenu(false); }}>Transpose Up (+1)</button>
+              <button className="piano-roll-transform-item" onClick={() => { transposeMIDINotes(clipId, -1); setShowTransformMenu(false); }}>Transpose Down (-1)</button>
+              <button className="piano-roll-transform-item" onClick={() => { transposeMIDINotes(clipId, 12); setShowTransformMenu(false); }}>Transpose Octave Up (+12)</button>
+              <button className="piano-roll-transform-item" onClick={() => { transposeMIDINotes(clipId, -12); setShowTransformMenu(false); }}>Transpose Octave Down (-12)</button>
+              <div className="piano-roll-transform-separator" />
+              <button className="piano-roll-transform-item" onClick={() => { scaleMIDINoteVelocity(clipId, 1.1); setShowTransformMenu(false); }}>Velocity +10%</button>
+              <button className="piano-roll-transform-item" onClick={() => { scaleMIDINoteVelocity(clipId, 0.9); setShowTransformMenu(false); }}>Velocity -10%</button>
+              <div className="piano-roll-transform-separator" />
+              <button className="piano-roll-transform-item" onClick={() => { reverseMIDINotes(clipId); setShowTransformMenu(false); }}>Reverse</button>
+              <button className="piano-roll-transform-item" onClick={() => { invertMIDINotes(clipId); setShowTransformMenu(false); }}>Invert</button>
             </div>
           )}
         </div>
         <div className="toolbar-divider" />
-
-        {/* Step Input Mode */}
-        <Button
-          variant={stepInputEnabled ? "primary" : "default"}
-          size="sm"
-          active={stepInputEnabled}
-          onClick={toggleStepInput}
-          title="Step Input Mode - Type note letters (C-B) to enter notes"
-        >
+        <Button variant={stepInputEnabled ? "primary" : "default"} size="sm" active={stepInputEnabled} onClick={toggleStepInput} title="Step Input Mode - type C-B to enter notes">
           Step
         </Button>
         {stepInputEnabled && (
           <>
-            <label htmlFor="pr-step-size">Size:</label>
-            <select
-              id="pr-step-size"
-              className="piano-roll-select"
-              value={stepInputSize}
-              onChange={(e) => setStepInputSize(Number.parseFloat(e.target.value))}
-            >
-              {STEP_SIZE_OPTIONS.map((opt) => (
-                <option key={opt.label} value={opt.beats}>
-                  {opt.label}
-                </option>
+            <label htmlFor="pr-step-size">Size</label>
+            <select id="pr-step-size" className="piano-roll-select" value={stepInputSize} onChange={(event) => setStepInputSize(Number.parseFloat(event.target.value))}>
+              {STEP_SIZE_OPTIONS.map((option) => (
+                <option key={option.label} value={option.beats}>{option.label}</option>
               ))}
             </select>
-            <span style={{ fontSize: 10, color: "#888", marginLeft: 4 }}>
-              Oct: {stepInputOctave}
-            </span>
+            <span className="piano-roll-step-octave">Oct: {stepInputOctave}</span>
           </>
         )}
-
-        {/* Multi-clip indicator */}
         {additionalClips.length > 0 && (
           <>
             <div className="toolbar-divider" />
-            <span style={{ fontSize: 10, color: "#aaa" }}>
-              Editing {additionalClips.length + 1} clips
-            </span>
+            <span className="piano-roll-multi-clip">Editing {additionalClips.length + 1} clips</span>
           </>
         )}
       </div>
@@ -1362,44 +1564,27 @@ export function PianoRoll({ clipId, trackId, additionalClipIds = [] }: PianoRoll
       <Stage
         width={dimensions.width}
         height={stageHeight}
-        onClick={handleStageClick}
         onMouseDown={handleStageMouseDown}
         onMouseMove={handleStageMouseMove}
-        onMouseUp={handleStageMouseUp}
         pixelRatio={window.devicePixelRatio || 1}
       >
         <Layer>
-          {/* Background */}
-          <Rect
-            x={0}
-            y={0}
-            width={dimensions.width}
-            height={stageHeight}
-            fill="#1a1a1a"
-          />
-
-          {/* Grid with beat shading and scale highlighting */}
+          <Rect x={0} y={0} width={dimensions.width} height={stageHeight} fill="#1a1a1a" />
           {renderGrid()}
-
-          {/* Piano keyboard */}
           {renderPianoKeyboard()}
-
-          {/* Ghost notes from other MIDI clips on this track */}
           {renderGhostNotes()}
-
-          {/* MIDI notes with velocity coloring (includes multi-clip notes) */}
-          {renderNotes()}
-
-          {/* Step input cursor line */}
+          {renderAdditionalClipNotes()}
+          {renderPrimaryNotes()}
+          {renderDrawingPreview()}
           {renderStepInputCursor()}
-
-          {/* Velocity lane */}
           {renderVelocityLane()}
-
-          {/* CC lane */}
           {renderCCLane()}
         </Layer>
       </Stage>
+
+      <div className="piano-roll-horizontal-scroll" ref={scrollbarRef} onScroll={handleScrollbarScroll}>
+        <div style={{ width: PIANO_WIDTH + contentWidth, height: 1 }} />
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/PluginBrowser.tsx b/frontend/src/components/PluginBrowser.tsx
index cd72896..c311fa4 100644
--- a/frontend/src/components/PluginBrowser.tsx
+++ b/frontend/src/components/PluginBrowser.tsx
@@ -14,6 +14,7 @@ import {
   Code,
   Star,
   FolderOpen,
+  Search,
 } from "lucide-react";
 import { nativeBridge } from "../services/NativeBridge";
 import { useDAWStore } from "../store/useDAWStore";
@@ -396,6 +397,7 @@ export function PluginBrowser({
         );
         if (success) {
           store.updateTrack(trackId, {
+            type: "instrument",
             instrumentPlugin: plugin.fileOrIdentifier,
           });
           await waitForInstrumentPlugin(
@@ -516,26 +518,34 @@ export function PluginBrowser({
       <div
         className={
           embedded
-            ? "flex gap-2 p-2 bg-neutral-800"
-            : "flex gap-2 p-3 border-b border-neutral-700 bg-neutral-800 rounded-t-lg"
+            ? "flex flex-wrap items-center gap-2 p-2 bg-neutral-800"
+            : "flex flex-wrap items-center gap-2 p-3 border-b border-neutral-700 bg-neutral-800 rounded-t-lg"
         }
       >
-        <Input
-          type="text"
-          variant="default"
-          size="md"
-          placeholder="Search by name, manufacturer, or category..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-          className="flex-1"
-        />
+        <div className="relative flex-[2_1_360px] min-w-[280px]">
+          <Search
+            size={15}
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-300 pointer-events-none"
+          />
+          <Input
+            type="text"
+            variant="default"
+            size="md"
+            placeholder="Search plugins, makers, categories..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            fullWidth
+            className="block w-full"
+            inputClassName="w-full pl-9 bg-neutral-950 border-neutral-500 text-white placeholder:text-neutral-400 shadow-inner focus:border-blue-400 focus:ring-2 focus:ring-blue-500/30"
+          />
+        </div>
         <Select
           variant="default"
           size="md"
           value={categoryFilter}
           onChange={(val) => setCategoryFilter(val as string)}
           options={categories.map((cat) => ({ value: cat, label: cat }))}
-          className="min-w-[150px]"
+          className="min-w-[170px] flex-[1_1_180px]"
         />
         <Button
           variant={showFavoritesOnly ? "primary" : "default"}
diff --git a/frontend/src/components/Timeline.tsx b/frontend/src/components/Timeline.tsx
index 46a3024..16dfbb7 100644
--- a/frontend/src/components/Timeline.tsx
+++ b/frontend/src/components/Timeline.tsx
@@ -108,6 +108,8 @@ export function Timeline({
   const [dimensions, setDimensions] = useState({ width: 800, height: 400 });
   const [waveformCache, setWaveformCache] = useState<WaveformCache>(new Map());
   const [recordingWaveformCache, setRecordingWaveformCache] = useState<RecordingWaveformCache>(new Map());
+  const waveformCacheRef = useRef(waveformCache);
+  waveformCacheRef.current = waveformCache;
   const recordingWaveformCacheRef = useRef(recordingWaveformCache);
   recordingWaveformCacheRef.current = recordingWaveformCache;
   // Marks recording-waveform updates as low-priority so React won't interrupt
@@ -1552,7 +1554,7 @@ export function Timeline({
                tileSample < endSampleInFile;
                tileSample += tileSamples) {
             const cacheKey = `${clip.filePath}-${cacheSpp}-${tileSample}`;
-            if (!waveformCache.has(cacheKey) && !inFlightRef.current.has(cacheKey)) {
+            if (!waveformCacheRef.current.has(cacheKey) && !inFlightRef.current.has(cacheKey)) {
               const numPeaks = Math.min(8000, Math.ceil((endSampleInFile - tileSample) / cacheSpp) + 4096);
               fetchWaveformDataRef.current(clip.filePath, cacheSpp, tileSample, numPeaks);
             }
@@ -1571,7 +1573,7 @@ export function Timeline({
         prefetchIntervalRef.current = null;
       }
     };
-  }, [isPlaying, dimensions.width, waveformCache]);
+  }, [isPlaying, dimensions.width]);
 
   // Fetch recording waveforms on a short throttle while recording so short takes
   // also produce visible waveforms during record.
@@ -1581,20 +1583,9 @@ export function Timeline({
       if (recordingWaveformCache.size > 0) {
         setRecordingWaveformCache(new Map());
       }
-      console.log(`${AUDIO_RECORD_LOG_PREFIX} waveformFetch:stop`, {
-        isRecording,
-        activeRecordingClips: recordingClips.length,
-      });
       return;
     }
 
-    console.log(`${AUDIO_RECORD_LOG_PREFIX} waveformFetch:start`, {
-      recordingTracks: recordingClips.map((clip) => clip.trackId),
-      pixelsPerSecond,
-      tempo,
-      timeSignature,
-    });
-
     let cancelled = false;
     const fetchRecordingPeaks = async () => {
       const currentTime = useDAWStore.getState().transport.currentTime;
@@ -1609,21 +1600,11 @@ export function Timeline({
 
         const recordingDuration = currentTime - rc.startTime;
         if (recordingDuration <= 0) {
-          console.log(`${AUDIO_RECORD_LOG_PREFIX} waveformFetch:skipNotStarted`, {
-            trackId: rc.trackId,
-            currentTime,
-            startTime: rc.startTime,
-          });
           continue;
         }
 
         const widthPixels = Math.ceil(recordingDuration * pixelsPerSecond);
         if (widthPixels < 2) {
-          console.log(`${AUDIO_RECORD_LOG_PREFIX} waveformFetch:skipTinyWidth`, {
-            trackId: rc.trackId,
-            widthPixels,
-            recordingDuration,
-          });
           continue;
         }
 
@@ -1635,13 +1616,6 @@ export function Timeline({
             samplesPerPixel,
             widthPixels,
           );
-          console.log(`${AUDIO_RECORD_LOG_PREFIX} waveformFetch:result`, {
-            trackId: rc.trackId,
-            recordingDuration,
-            widthPixels,
-            samplesPerPixel,
-            peaksReturned: peaks.length,
-          });
 
           if (peaks && peaks.length > 0) {
             newCache.set(rc.trackId, { peaks, widthPixels });
@@ -1662,7 +1636,7 @@ export function Timeline({
     void fetchRecordingPeaks();
     const intervalId = window.setInterval(() => {
       void fetchRecordingPeaks();
-    }, 150);
+    }, 250);
 
     return () => {
       cancelled = true;
diff --git a/frontend/src/components/TrackHeader.tsx b/frontend/src/components/TrackHeader.tsx
index ec608ed..853b964 100644
--- a/frontend/src/components/TrackHeader.tsx
+++ b/frontend/src/components/TrackHeader.tsx
@@ -135,9 +135,10 @@ export const TrackHeader = React.memo(function TrackHeader({ track, isSelected }
     });
   }, [track.id]);
 
-  const hasFx = track.inputFxCount + track.trackFxCount > 0;
+  const hasBypassableFx = track.inputFxCount + track.trackFxCount > 0;
+  const hasFx = hasBypassableFx || Boolean(track.instrumentPlugin);
   let fxButtonClass = "hover:text-green-500 hover:border-green-500";
-  if (hasFx && track.fxBypassed)
+  if (hasBypassableFx && track.fxBypassed)
     fxButtonClass =
       "text-red-400! border-red-500! shadow-[0_0_6px_rgba(239,68,68,0.4)]";
   else if (hasFx)
@@ -145,13 +146,15 @@ export const TrackHeader = React.memo(function TrackHeader({ track, isSelected }
       "text-green-400! border-green-500! shadow-[0_0_6px_rgba(34,197,94,0.4)]";
 
   let fxBypassClass = "hover:text-green-500 hover:border-green-500";
-  if (hasFx && track.fxBypassed)
+  if (hasBypassableFx && track.fxBypassed)
     fxBypassClass = "text-red-400! border-red-500!";
   else if (hasFx) fxBypassClass = "text-green-400! border-green-500!";
   const fxBypassTitle = hasFx
-    ? track.fxBypassed
-      ? "Enable FX"
-      : "Bypass FX"
+    ? hasBypassableFx
+      ? track.fxBypassed
+        ? "Enable FX"
+        : "Bypass FX"
+      : "Instrument loaded"
     : "No FX loaded";
 
   const hasAutomation =
@@ -415,7 +418,7 @@ export const TrackHeader = React.memo(function TrackHeader({ track, isSelected }
               size="icon-xs"
               shape="square"
               onClick={() => {
-                if (!hasFx) {
+                if (!hasBypassableFx) {
                   setShowFXChain(true);
                 } else {
                   toggleTrackFXBypass(track.id);
diff --git a/frontend/src/services/NativeBridge.ts b/frontend/src/services/NativeBridge.ts
index fc6c9d7..43af554 100644
--- a/frontend/src/services/NativeBridge.ts
+++ b/frontend/src/services/NativeBridge.ts
@@ -860,6 +860,15 @@ export interface BenchmarkResults {
 export interface AudioDebugTrackSnapshot {
   trackId: string;
   clipCount: number;
+  pluginBusySkipCount?: number;
+  midiOverflowCount?: number;
+  lastBuiltMidiEventCount?: number;
+  maxBuiltMidiEventCount?: number;
+  inputFXCount?: number;
+  trackFXCount?: number;
+  isInstrument?: boolean;
+  recordArmed?: boolean;
+  inputMonitoring?: boolean;
 }
 
 export interface AudioDebugSnapshot {
@@ -876,6 +885,11 @@ export interface AudioDebugSnapshot {
   audioCallbackTrackBufferResizeCount?: number;
   audioCallbackPitchScrubBufferResizeCount?: number;
   audioCallbackSidechainBufferResizeCount?: number;
+  crashBreadcrumbLogPath?: string;
+  lastCrashDumpPath?: string;
+  midiLastInputFanoutCount?: number;
+  midiMaxInputFanoutCount?: number;
+  midiMappedParameterUpdateCount?: number;
   spectrumFftPublishCount?: number;
   spectrumFftLockMissCount?: number;
   postTrackPlaybackPeak: number;
@@ -2130,11 +2144,6 @@ class NativeBridge {
     numPixels: number,
   ): Promise<WaveformPeak[]> {
     if (this.isNative && window.__JUCE__?.backend.getRecordingPeaks) {
-      console.log("[audio.record] NativeBridge.getRecordingPeaks", {
-        trackId,
-        samplesPerPixel,
-        numPixels,
-      });
       const flat = await window.__JUCE__.backend.getRecordingPeaks(
         trackId,
         samplesPerPixel,
@@ -2160,13 +2169,7 @@ class NativeBridge {
 
   async getAudioDebugSnapshot(): Promise<AudioDebugSnapshot> {
     if (this.isNative && window.__JUCE__?.backend.getAudioDebugSnapshot) {
-      console.log("[audio.playback] NativeBridge.getAudioDebugSnapshot");
       const snapshot = await window.__JUCE__.backend.getAudioDebugSnapshot();
-      try {
-        console.log("[audio.playback] NativeBridge.getAudioDebugSnapshot result", snapshot, JSON.stringify(snapshot, null, 2));
-      } catch {
-        console.log("[audio.playback] NativeBridge.getAudioDebugSnapshot result", snapshot);
-      }
       return snapshot;
     }
     const fallbackSnapshot = {
@@ -2193,7 +2196,6 @@ class NativeBridge {
       lastRecordingClipCountReturned: 0,
       playbackTracks: [],
     };
-    console.log("[audio.playback] NativeBridge.getAudioDebugSnapshot fallback", fallbackSnapshot, JSON.stringify(fallbackSnapshot, null, 2));
     return fallbackSnapshot;
   }
 
diff --git a/frontend/src/store/actions/clips.ts b/frontend/src/store/actions/clips.ts
index be27dc6..7c4bfd0 100644
--- a/frontend/src/store/actions/clips.ts
+++ b/frontend/src/store/actions/clips.ts
@@ -8,6 +8,7 @@ import { nativeBridge } from "../../services/NativeBridge";
 import { commandManager } from "../commands";
 import { logBridgeError } from "../../utils/bridgeErrorHandler";
 import { syncTempoMarkersToBackend } from "./storeHelpers";
+import { serializeMIDIClipsForBackend } from "../../utils/midiClipSerialization";
 
 const AUDIO_PLAYBACK_LOG_PREFIX = "[audio.playback]";
 
@@ -163,29 +164,7 @@ export const clipActions = (set: SetFn, get: GetFn) => ({
       for (const track of tracks) {
         if (track.type !== "midi" && track.type !== "instrument") continue;
 
-        const midiClipsPayload = track.midiClips.map((clip) => ({
-          id: clip.id,
-          startTime: clip.startTime,
-          duration: clip.duration,
-          events: [
-            ...clip.events.map((e) => ({
-              type: e.type,
-              timestamp: e.timestamp,
-              note: e.note,
-              velocity: e.velocity,
-              controller: e.controller,
-              value: e.value,
-              channel: 1,
-            })),
-            ...(clip.ccEvents || []).map((e) => ({
-              type: "cc",
-              timestamp: e.time,
-              controller: e.cc,
-              value: e.value,
-              channel: 1,
-            })),
-          ].sort((a, b) => a.timestamp - b.timestamp),
-        }));
+        const midiClipsPayload = serializeMIDIClipsForBackend(track.midiClips);
 
         syncPromises.push(
           nativeBridge.setTrackMIDIClips(track.id, midiClipsPayload).catch(logBridgeError("sync")),
diff --git a/frontend/src/store/actions/midi.ts b/frontend/src/store/actions/midi.ts
index e69a8d9..e71bd18 100644
--- a/frontend/src/store/actions/midi.ts
+++ b/frontend/src/store/actions/midi.ts
@@ -1,19 +1,259 @@
 // @ts-nocheck
-import { nativeBridge } from "../../services/NativeBridge";
 import { commandManager } from "../commands";
 import { logBridgeError } from "../../utils/bridgeErrorHandler";
+import { syncTrackMIDIClipsToBackend } from "../../utils/midiClipSerialization";
 
-// @ts-nocheck
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type SetFn = (...args: any[]) => void;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type GetFn = () => any;
 
+const MIDI_SYNC_DEBOUNCE_MS = 120;
+const MIDI_NOTE_MIN_DURATION = 0.01;
+const midiSyncTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+function cloneEvents(events: any[] = []) {
+  return events.map((event) => ({ ...event }));
+}
+
+function cloneCCEvents(events: any[] = []) {
+  return events.map((event) => ({ ...event }));
+}
+
+function sortMIDIEvents(events: any[]) {
+  return cloneEvents(events).sort((a, b) => {
+    if (a.timestamp !== b.timestamp) return a.timestamp - b.timestamp;
+    if (a.type === b.type) return 0;
+    return a.type === "noteOff" ? 1 : -1;
+  });
+}
+
+function sortCCEvents(events: any[]) {
+  return cloneCCEvents(events).sort((a, b) => a.time - b.time);
+}
+
+function clampMidiNote(note: number) {
+  return Math.max(0, Math.min(127, Math.round(note)));
+}
+
+function clampVelocity(velocity: number) {
+  return Math.max(1, Math.min(127, Math.round(velocity)));
+}
+
+function noteIdFor(clipId: string, timestamp: number, note: number) {
+  return `${clipId}:${timestamp.toFixed(6)}:${note}`;
+}
+
+function parseNoteIdentity(noteId: string) {
+  const parts = String(noteId).split(":");
+  const note = Number.parseInt(parts[parts.length - 1], 10);
+  const timestamp = Number.parseFloat(parts[parts.length - 2]);
+  return Number.isFinite(timestamp) && Number.isFinite(note)
+    ? { timestamp, note }
+    : null;
+}
+
+function noteIdentityMatches(noteId: string, clipId: string, timestamp: number, note: number) {
+  const parsed = parseNoteIdentity(noteId);
+  if (!parsed) return false;
+  return Math.abs(parsed.timestamp - timestamp) < 0.001 && parsed.note === note;
+}
+
+function parseNotePairs(events: any[], clipId: string) {
+  const pairs: any[] = [];
+  const usedNoteOffs = new Set<number>();
+
+  for (let onIndex = 0; onIndex < events.length; onIndex += 1) {
+    const noteOn = events[onIndex];
+    if (noteOn.type !== "noteOn" || noteOn.note === undefined) continue;
+
+    let offIndex = -1;
+    for (let index = 0; index < events.length; index += 1) {
+      const candidate = events[index];
+      if (
+        usedNoteOffs.has(index) ||
+        candidate.type !== "noteOff" ||
+        candidate.note !== noteOn.note ||
+        candidate.timestamp <= noteOn.timestamp
+      ) {
+        continue;
+      }
+
+      if (offIndex === -1 || candidate.timestamp < events[offIndex].timestamp) {
+        offIndex = index;
+      }
+    }
+
+    if (offIndex === -1) continue;
+    usedNoteOffs.add(offIndex);
+    const noteOff = events[offIndex];
+    pairs.push({
+      id: noteIdFor(clipId, noteOn.timestamp, noteOn.note),
+      onIndex,
+      offIndex,
+      noteOn,
+      noteOff,
+      noteNumber: noteOn.note,
+      velocity: noteOn.velocity || 80,
+      startTime: noteOn.timestamp,
+      duration: Math.max(MIDI_NOTE_MIN_DURATION, noteOff.timestamp - noteOn.timestamp),
+    });
+  }
+
+  return pairs;
+}
+
+function rebuildEventsForNotes(events: any[], clipId: string, noteIds: string[], transform: (pair: any) => any | null) {
+  const selectedIds = new Set(noteIds);
+  const consumed = new Set<number>();
+  const additions: any[] = [];
+  const nextIds: string[] = [];
+
+  for (const pair of parseNotePairs(events, clipId)) {
+    const selected = selectedIds.has(pair.id)
+      || noteIds.some((id) => noteIdentityMatches(id, clipId, pair.startTime, pair.noteNumber));
+    if (!selected) continue;
+
+    consumed.add(pair.onIndex);
+    consumed.add(pair.offIndex);
+
+    const nextPair = transform(pair);
+    if (!nextPair) continue;
+
+    const nextStart = Math.max(0, nextPair.startTime);
+    const nextDuration = Math.max(MIDI_NOTE_MIN_DURATION, nextPair.duration);
+    const nextNote = clampMidiNote(nextPair.noteNumber);
+    const nextVelocity = clampVelocity(nextPair.velocity ?? pair.velocity);
+
+    additions.push(
+      {
+        ...pair.noteOn,
+        timestamp: nextStart,
+        type: "noteOn",
+        note: nextNote,
+        velocity: nextVelocity,
+      },
+      {
+        ...pair.noteOff,
+        timestamp: nextStart + nextDuration,
+        type: "noteOff",
+        note: nextNote,
+        velocity: 0,
+      },
+    );
+    nextIds.push(noteIdFor(clipId, nextStart, nextNote));
+  }
+
+  const retained = events.filter((_, index) => !consumed.has(index));
+  return {
+    events: sortMIDIEvents([...retained, ...additions]),
+    nextIds,
+  };
+}
+
+function getTrack(get: GetFn, trackId: string) {
+  return get().tracks.find((track: any) => track.id === trackId);
+}
+
+function getClip(get: GetFn, trackId: string, clipId: string) {
+  return getTrack(get, trackId)?.midiClips.find((clip: any) => clip.id === clipId);
+}
+
+function setClipPatch(set: SetFn, trackId: string, clipId: string, patch: any) {
+  set((state: any) => ({
+    tracks: state.tracks.map((track: any) =>
+      track.id === trackId
+        ? {
+            ...track,
+            midiClips: track.midiClips.map((clip: any) =>
+              clip.id === clipId ? { ...clip, ...patch } : clip,
+            ),
+          }
+        : track,
+    ),
+    isModified: true,
+  }));
+}
+
+async function syncMIDITrackNow(get: GetFn, trackId: string) {
+  const track = getTrack(get, trackId);
+  if (!track || (track.type !== "midi" && track.type !== "instrument")) return;
+  await syncTrackMIDIClipsToBackend(trackId, track.midiClips).catch(logBridgeError("midi sync"));
+}
+
+function scheduleMIDITrackSync(get: GetFn, trackId: string, debounce = true) {
+  const existingTimer = midiSyncTimers.get(trackId);
+  if (existingTimer) {
+    clearTimeout(existingTimer);
+    midiSyncTimers.delete(trackId);
+  }
+
+  if (!debounce) {
+    void syncMIDITrackNow(get, trackId);
+    return;
+  }
+
+  const timer = setTimeout(() => {
+    midiSyncTimers.delete(trackId);
+    void syncMIDITrackNow(get, trackId);
+  }, MIDI_SYNC_DEBOUNCE_MS);
+  midiSyncTimers.set(trackId, timer);
+}
+
+function eventsChanged(a: any[], b: any[]) {
+  return JSON.stringify(a) !== JSON.stringify(b);
+}
+
+function pushEventsUndoCommand(set: SetFn, get: GetFn, trackId: string, clipId: string, oldEvents: any[], newEvents: any[], description: string, type: string) {
+  if (!eventsChanged(oldEvents, newEvents)) return;
+
+  commandManager.push({
+    type,
+    description,
+    timestamp: Date.now(),
+    execute: () => {
+      setClipPatch(set, trackId, clipId, { events: cloneEvents(newEvents) });
+      scheduleMIDITrackSync(get, trackId, true);
+    },
+    undo: () => {
+      setClipPatch(set, trackId, clipId, { events: cloneEvents(oldEvents) });
+      scheduleMIDITrackSync(get, trackId, true);
+    },
+  });
+  set({ canUndo: commandManager.canUndo(), canRedo: commandManager.canRedo() });
+}
+
+function pushCCUndoCommand(set: SetFn, get: GetFn, trackId: string, clipId: string, oldCCEvents: any[], newCCEvents: any[], description: string) {
+  if (!eventsChanged(oldCCEvents, newCCEvents)) return;
+
+  commandManager.push({
+    type: "midi_cc",
+    description,
+    timestamp: Date.now(),
+    execute: () => {
+      setClipPatch(set, trackId, clipId, { ccEvents: cloneCCEvents(newCCEvents) });
+      scheduleMIDITrackSync(get, trackId, true);
+    },
+    undo: () => {
+      setClipPatch(set, trackId, clipId, { ccEvents: cloneCCEvents(oldCCEvents) });
+      scheduleMIDITrackSync(get, trackId, true);
+    },
+  });
+  set({ canUndo: commandManager.canUndo(), canRedo: commandManager.canRedo() });
+}
+
 export const midiActions = (set: SetFn, get: GetFn) => ({
     openPianoRoll: (trackId, clipId) =>
       set({ showPianoRoll: true, pianoRollTrackId: trackId, pianoRollClipId: clipId }),
     closePianoRoll: () =>
       set({ showPianoRoll: false, pianoRollTrackId: null, pianoRollClipId: null }),
+
+    syncMIDITrackToBackend: async (trackId, options = {}) => {
+      if (options.debounce === false) {
+        await syncMIDITrackNow(get, trackId);
+        return;
+      }
+      scheduleMIDITrackSync(get, trackId, true);
+    },
+
     addMIDIClip: (trackId, startTime, duration = 4) => {
       const clipId = crypto.randomUUID();
       const track = get().tracks.find((t) => t.id === trackId);
@@ -32,6 +272,7 @@ export const midiActions = (set: SetFn, get: GetFn) => ({
                     startTime,
                     duration,
                     events: [],
+                    ccEvents: [],
                     color: clipColor,
                   },
                 ],
@@ -40,18 +281,144 @@ export const midiActions = (set: SetFn, get: GetFn) => ({
         ),
         isModified: true,
       }));
+      scheduleMIDITrackSync(get, trackId, false);
 
       return clipId;
     },
 
+    previewMIDIClipEvents: (trackId, clipId, events) => {
+      setClipPatch(set, trackId, clipId, { events: sortMIDIEvents(events) });
+      scheduleMIDITrackSync(get, trackId, true);
+    },
+
+    commitMIDIClipEvents: (trackId, clipId, oldEvents, newEvents, description = "Edit MIDI notes") => {
+      const sortedOld = sortMIDIEvents(oldEvents);
+      const sortedNew = sortMIDIEvents(newEvents);
+      setClipPatch(set, trackId, clipId, { events: sortedNew });
+      pushEventsUndoCommand(set, get, trackId, clipId, sortedOld, sortedNew, description, "midi_notes_edit");
+      scheduleMIDITrackSync(get, trackId, true);
+    },
+
+    addMIDINote: (trackId, clipId, startTime, noteNumber, duration, velocity = 80) => {
+      const clip = getClip(get, trackId, clipId);
+      if (!clip) return "";
+
+      const note = clampMidiNote(noteNumber);
+      const start = Math.max(0, startTime);
+      const safeDuration = Math.max(MIDI_NOTE_MIN_DURATION, duration);
+      const oldEvents = cloneEvents(clip.events);
+      const newEvents = sortMIDIEvents([
+        ...oldEvents,
+        { timestamp: start, type: "noteOn", note, velocity: clampVelocity(velocity) },
+        { timestamp: start + safeDuration, type: "noteOff", note, velocity: 0 },
+      ]);
+
+      setClipPatch(set, trackId, clipId, { events: newEvents });
+      pushEventsUndoCommand(set, get, trackId, clipId, oldEvents, newEvents, "Add MIDI note", "midi_note_add");
+      scheduleMIDITrackSync(get, trackId, true);
+      return noteIdFor(clipId, start, note);
+    },
+
+    removeMIDINotes: (trackId, clipId, noteIds) => {
+      const clip = getClip(get, trackId, clipId);
+      if (!clip || noteIds.length === 0) return [];
+
+      const oldEvents = cloneEvents(clip.events);
+      const { events: newEvents } = rebuildEventsForNotes(oldEvents, clipId, noteIds, () => null);
+      setClipPatch(set, trackId, clipId, { events: newEvents });
+      pushEventsUndoCommand(set, get, trackId, clipId, oldEvents, newEvents, "Delete MIDI notes", "midi_note_delete");
+      scheduleMIDITrackSync(get, trackId, true);
+      return [];
+    },
+
+    moveMIDINotes: (trackId, clipId, noteIds, deltaTime, deltaNote) => {
+      const clip = getClip(get, trackId, clipId);
+      if (!clip || noteIds.length === 0) return [];
+
+      const oldEvents = cloneEvents(clip.events);
+      const clipDuration = Math.max(MIDI_NOTE_MIN_DURATION, clip.duration || 0);
+      const { events: newEvents, nextIds } = rebuildEventsForNotes(oldEvents, clipId, noteIds, (pair) => {
+        const duration = Math.max(MIDI_NOTE_MIN_DURATION, pair.duration);
+        const maxStart = Math.max(0, clipDuration - duration);
+        return {
+          ...pair,
+          startTime: Math.max(0, Math.min(maxStart, pair.startTime + deltaTime)),
+          noteNumber: clampMidiNote(pair.noteNumber + deltaNote),
+          duration,
+        };
+      });
+
+      setClipPatch(set, trackId, clipId, { events: newEvents });
+      pushEventsUndoCommand(set, get, trackId, clipId, oldEvents, newEvents, "Move MIDI notes", "midi_note_move");
+      scheduleMIDITrackSync(get, trackId, true);
+      return nextIds;
+    },
+
+    resizeMIDINote: (trackId, clipId, noteId, startTime, duration) => {
+      const clip = getClip(get, trackId, clipId);
+      if (!clip) return [];
+
+      const oldEvents = cloneEvents(clip.events);
+      const clipDuration = Math.max(MIDI_NOTE_MIN_DURATION, clip.duration || 0);
+      const nextStart = Math.max(0, Math.min(clipDuration - MIDI_NOTE_MIN_DURATION, startTime));
+      const nextDuration = Math.max(MIDI_NOTE_MIN_DURATION, Math.min(duration, clipDuration - nextStart));
+      const { events: newEvents, nextIds } = rebuildEventsForNotes(oldEvents, clipId, [noteId], (pair) => ({
+        ...pair,
+        startTime: nextStart,
+        duration: nextDuration,
+      }));
+
+      setClipPatch(set, trackId, clipId, { events: newEvents });
+      pushEventsUndoCommand(set, get, trackId, clipId, oldEvents, newEvents, "Resize MIDI note", "midi_note_resize");
+      scheduleMIDITrackSync(get, trackId, true);
+      return nextIds;
+    },
+
+    updateMIDINoteVelocity: (trackId, clipId, noteTimestamp, noteNumber, velocity, options = {}) => {
+      const clip = getClip(get, trackId, clipId);
+      if (!clip) return;
+
+      const noteId = noteIdFor(clipId, noteTimestamp, noteNumber);
+      const oldEvents = cloneEvents(options.oldEvents || clip.events);
+      const currentEvents = cloneEvents(clip.events);
+      const { events: newEvents } = rebuildEventsForNotes(currentEvents, clipId, [noteId], (pair) => ({
+        ...pair,
+        velocity: clampVelocity(velocity),
+      }));
+
+      setClipPatch(set, trackId, clipId, { events: newEvents });
+      if (!options.transient) {
+        pushEventsUndoCommand(set, get, trackId, clipId, oldEvents, newEvents, `Set velocity to ${clampVelocity(velocity)}`, "midi_velocity");
+      }
+      scheduleMIDITrackSync(get, trackId, true);
+    },
+
+    updateMIDICCEvents: (trackId, clipId, newCCEvents, options = {}) => {
+      const clip = getClip(get, trackId, clipId);
+      if (!clip) return;
+
+      const oldCCEvents = sortCCEvents(options.oldCCEvents || clip.ccEvents || []);
+      const sortedNewCCEvents = sortCCEvents(newCCEvents);
+      setClipPatch(set, trackId, clipId, { ccEvents: sortedNewCCEvents });
+      if (!options.transient) {
+        pushCCUndoCommand(set, get, trackId, clipId, oldCCEvents, sortedNewCCEvents, options.description || "Update MIDI CC events");
+      }
+      scheduleMIDITrackSync(get, trackId, true);
+    },
+
+    commitMIDICCEvents: (trackId, clipId, oldCCEvents, newCCEvents, description = "Update MIDI CC events") => {
+      const sortedOld = sortCCEvents(oldCCEvents);
+      const sortedNew = sortCCEvents(newCCEvents);
+      setClipPatch(set, trackId, clipId, { ccEvents: sortedNew });
+      pushCCUndoCommand(set, get, trackId, clipId, sortedOld, sortedNew, description);
+      scheduleMIDITrackSync(get, trackId, true);
+    },
 
     toggleStep: (pitch, step) => {
       const s = get();
       const oldSteps = s.stepSequencer.steps;
       const oldValue = oldSteps[pitch]?.[step] ?? false;
       const newValue = !oldValue;
-
-      // Build new steps array
       const newSteps = oldSteps.map((row, r) =>
         r === pitch ? row.map((v, c) => (c === step ? newValue : v)) : row,
       );
@@ -61,14 +428,12 @@ export const midiActions = (set: SetFn, get: GetFn) => ({
         isModified: true,
       });
 
-      // Undo support
-      const undoSteps = oldSteps;
       commandManager.push({
         type: "step_sequencer_toggle",
         description: `Toggle step [${pitch}, ${step}] ${newValue ? "on" : "off"}`,
         timestamp: Date.now(),
         execute: () => set({ stepSequencer: { ...get().stepSequencer, steps: newSteps } }),
-        undo: () => set({ stepSequencer: { ...get().stepSequencer, steps: undoSteps } }),
+        undo: () => set({ stepSequencer: { ...get().stepSequencer, steps: oldSteps } }),
       });
       set({ canUndo: commandManager.canUndo(), canRedo: commandManager.canRedo() });
     },
@@ -86,7 +451,6 @@ export const midiActions = (set: SetFn, get: GetFn) => ({
       const s = get();
       const { steps, velocities, pitchCount } = s.stepSequencer;
 
-      // Resize each row to the new step count
       const newSteps = Array.from({ length: pitchCount }, (_, r) => {
         const existing = steps[r] || [];
         return Array.from({ length: clamped }, (_, c) => existing[c] ?? false);
@@ -121,7 +485,6 @@ export const midiActions = (set: SetFn, get: GetFn) => ({
         isModified: true,
       });
 
-      // Undo support
       commandManager.push({
         type: "step_sequencer_clear",
         description: "Clear step sequencer",
@@ -136,94 +499,79 @@ export const midiActions = (set: SetFn, get: GetFn) => ({
       const s = get();
       const { steps, velocities, stepCount, stepSize, pitchCount } = s.stepSequencer;
       const tempo = s.transport.tempo;
-
-      // Calculate step duration in seconds
-      let beatsPerStep = 0.25; // default 1/16
+      let beatsPerStep = 0.25;
       if (stepSize === "1/8") beatsPerStep = 0.5;
       else if (stepSize === "1/4") beatsPerStep = 1;
       else if (stepSize === "1/16") beatsPerStep = 0.25;
       const stepDurationSec = (60 / tempo) * beatsPerStep;
-
-      // Generate MIDI events from the step grid
-      const events: MIDIEvent[] = [];
-      const basePitch = 60 - Math.floor(pitchCount / 2); // Center around middle C
+      const events: any[] = [];
+      const basePitch = 60 - Math.floor(pitchCount / 2);
 
       for (let row = 0; row < pitchCount; row++) {
         for (let col = 0; col < stepCount; col++) {
           if (steps[row]?.[col]) {
             const time = col * stepDurationSec;
-            const note = basePitch + (pitchCount - 1 - row); // Bottom row = lowest pitch
+            const note = basePitch + (pitchCount - 1 - row);
             const vel = velocities[row]?.[col] ?? 100;
-
-            events.push({
-              timestamp: time,
-              type: "noteOn",
-              note,
-              velocity: vel,
-            });
-            events.push({
-              timestamp: time + stepDurationSec * 0.9, // 90% gate
-              type: "noteOff",
-              note,
-              velocity: 0,
-            });
+            events.push({ timestamp: time, type: "noteOn", note, velocity: vel });
+            events.push({ timestamp: time + stepDurationSec * 0.9, type: "noteOff", note, velocity: 0 });
           }
         }
       }
 
       const totalDuration = stepCount * stepDurationSec;
-      console.log(
-        `[StepSequencer] Generated ${events.length} MIDI events, duration: ${totalDuration.toFixed(2)}s`,
-        events,
-      );
-
-      // If a MIDI track is selected, add the clip to it
       const selectedTrackId = s.selectedTrackId;
-      if (selectedTrackId) {
-        const track = s.tracks.find((t) => t.id === selectedTrackId);
-        if (track && (track.type === "midi" || track.type === "instrument")) {
-          const clipId = crypto.randomUUID();
-          const midiClip: MIDIClip = {
-            id: clipId,
-            name: "Step Pattern",
-            startTime: s.transport.currentTime,
-            duration: totalDuration,
-            events,
-            color: track.color || "#4361ee",
-          };
+      if (!selectedTrackId) return;
+
+      const track = s.tracks.find((t) => t.id === selectedTrackId);
+      if (!track || (track.type !== "midi" && track.type !== "instrument")) return;
+
+      const clipId = crypto.randomUUID();
+      const midiClip = {
+        id: clipId,
+        name: "Step Pattern",
+        startTime: s.transport.currentTime,
+        duration: totalDuration,
+        events,
+        ccEvents: [],
+        color: track.color || "#4361ee",
+      };
+      const newMidiClips = [...(track.midiClips || []), midiClip];
+      set({
+        tracks: s.tracks.map((t) =>
+          t.id === selectedTrackId ? { ...t, midiClips: newMidiClips } : t,
+        ),
+        isModified: true,
+      });
+      scheduleMIDITrackSync(get, selectedTrackId, false);
 
-          const newMidiClips = [...(track.midiClips || []), midiClip];
+      commandManager.push({
+        type: "step_sequencer_generate",
+        description: "Generate MIDI clip from step sequencer",
+        timestamp: Date.now(),
+        execute: () => {
           set({
-            tracks: s.tracks.map((t) =>
-              t.id === selectedTrackId ? { ...t, midiClips: newMidiClips } : t,
+            tracks: get().tracks.map((t) =>
+              t.id === selectedTrackId ? { ...t, midiClips: [...(t.midiClips || []), midiClip] } : t,
             ),
-            isModified: true,
           });
-
-          commandManager.push({
-            type: "step_sequencer_generate",
-            description: "Generate MIDI clip from step sequencer",
-            timestamp: Date.now(),
-            execute: () => set({
-              tracks: get().tracks.map((t) =>
-                t.id === selectedTrackId ? { ...t, midiClips: [...(t.midiClips || []), midiClip] } : t,
-              ),
-            }),
-            undo: () => set({
-              tracks: get().tracks.map((t) =>
-                t.id === selectedTrackId ? { ...t, midiClips: (t.midiClips || []).filter((c) => c.id !== clipId) } : t,
-              ),
-            }),
+          scheduleMIDITrackSync(get, selectedTrackId, false);
+        },
+        undo: () => {
+          set({
+            tracks: get().tracks.map((t) =>
+              t.id === selectedTrackId ? { ...t, midiClips: (t.midiClips || []).filter((c) => c.id !== clipId) } : t,
+            ),
           });
-          set({ canUndo: commandManager.canUndo(), canRedo: commandManager.canRedo() });
-        }
-      }
+          scheduleMIDITrackSync(get, selectedTrackId, false);
+        },
+      });
+      set({ canUndo: commandManager.canUndo(), canRedo: commandManager.canRedo() });
     },
 
     toggleStepSequencer: () =>
       set((s) => ({ showStepSequencer: !s.showStepSequencer })),
 
-
     toggleStepInput: () => set((s) => ({
       stepInputEnabled: !s.stepInputEnabled,
       stepInputPosition: !s.stepInputEnabled ? 0 : s.stepInputPosition,
@@ -237,233 +585,122 @@ export const midiActions = (set: SetFn, get: GetFn) => ({
       set({ stepInputPosition: stepInputPosition + advanceSeconds });
     },
 
-    // ========== MIDI Transform ==========
     transposeMIDINotes: (clipId, semitones) => {
       const { pianoRollTrackId } = get();
       if (!pianoRollTrackId) return;
-      const track = get().tracks.find((t) => t.id === pianoRollTrackId);
-      if (!track) return;
-      const clip = track.midiClips.find((c) => c.id === clipId);
+      const clip = getClip(get, pianoRollTrackId, clipId);
       if (!clip) return;
-      const oldEvents = [...clip.events];
-
-      // Transpose all noteOn/noteOff events in the clip by the given semitones.
-      // Operates on all notes (selectedNoteIds is not used for filtering since
-      // the piano roll events don't carry per-note IDs).
-      const newEvents = clip.events.map((e) => {
-        if ((e.type === "noteOn" || e.type === "noteOff") && e.note !== undefined) {
-          const newNote = Math.max(0, Math.min(127, e.note + semitones));
-          return { ...e, note: newNote };
+      const oldEvents = cloneEvents(clip.events);
+      const newEvents = sortMIDIEvents(clip.events.map((event) => {
+        if ((event.type === "noteOn" || event.type === "noteOff") && event.note !== undefined) {
+          return { ...event, note: clampMidiNote(event.note + semitones) };
         }
-        return e;
-      });
+        return { ...event };
+      }));
 
-      const applyEvents = (s: any, events: MIDIEvent[]) => ({
-        tracks: s.tracks.map((t: any) =>
-          t.id === pianoRollTrackId
-            ? { ...t, midiClips: t.midiClips.map((c: any) => c.id === clipId ? { ...c, events } : c) }
-            : t,
-        ),
-      });
-      set((s) => ({ ...applyEvents(s, newEvents), isModified: true }));
-      commandManager.push({
-        type: "midi_transpose",
-        description: `Transpose ${semitones > 0 ? "+" : ""}${semitones} semitones`,
-        timestamp: Date.now(),
-        execute: () => set((s) => applyEvents(s, newEvents)),
-        undo: () => set((s) => applyEvents(s, oldEvents)),
-      });
-      set({ canUndo: commandManager.canUndo(), canRedo: commandManager.canRedo() });
+      setClipPatch(set, pianoRollTrackId, clipId, { events: newEvents });
+      pushEventsUndoCommand(set, get, pianoRollTrackId, clipId, oldEvents, newEvents, `Transpose ${semitones > 0 ? "+" : ""}${semitones} semitones`, "midi_transpose");
+      scheduleMIDITrackSync(get, pianoRollTrackId, true);
     },
 
     scaleMIDINoteVelocity: (clipId, factor) => {
       const { pianoRollTrackId } = get();
       if (!pianoRollTrackId) return;
-      const track = get().tracks.find((t) => t.id === pianoRollTrackId);
-      if (!track) return;
-      const clip = track.midiClips.find((c) => c.id === clipId);
+      const clip = getClip(get, pianoRollTrackId, clipId);
       if (!clip) return;
-      const oldEvents = [...clip.events];
-
-      const newEvents = clip.events.map((e) => {
-        if (e.type === "noteOn" && e.velocity !== undefined) {
-          const newVel = Math.max(1, Math.min(127, Math.round(e.velocity * factor)));
-          return { ...e, velocity: newVel };
+      const oldEvents = cloneEvents(clip.events);
+      const newEvents = sortMIDIEvents(clip.events.map((event) => {
+        if (event.type === "noteOn" && event.velocity !== undefined) {
+          return { ...event, velocity: clampVelocity(event.velocity * factor) };
         }
-        return e;
-      });
+        return { ...event };
+      }));
 
-      const applyEvents = (s: any, events: MIDIEvent[]) => ({
-        tracks: s.tracks.map((t: any) =>
-          t.id === pianoRollTrackId
-            ? { ...t, midiClips: t.midiClips.map((c: any) => c.id === clipId ? { ...c, events } : c) }
-            : t,
-        ),
-      });
-      set((s) => ({ ...applyEvents(s, newEvents), isModified: true }));
-      commandManager.push({
-        type: "midi_velocity_scale",
-        description: `Scale velocity x${factor.toFixed(2)}`,
-        timestamp: Date.now(),
-        execute: () => set((s) => applyEvents(s, newEvents)),
-        undo: () => set((s) => applyEvents(s, oldEvents)),
-      });
-      set({ canUndo: commandManager.canUndo(), canRedo: commandManager.canRedo() });
+      setClipPatch(set, pianoRollTrackId, clipId, { events: newEvents });
+      pushEventsUndoCommand(set, get, pianoRollTrackId, clipId, oldEvents, newEvents, `Scale velocity x${factor.toFixed(2)}`, "midi_velocity_scale");
+      scheduleMIDITrackSync(get, pianoRollTrackId, true);
     },
 
     reverseMIDINotes: (clipId) => {
       const { pianoRollTrackId } = get();
       if (!pianoRollTrackId) return;
-      const track = get().tracks.find((t) => t.id === pianoRollTrackId);
-      if (!track) return;
-      const clip = track.midiClips.find((c) => c.id === clipId);
+      const clip = getClip(get, pianoRollTrackId, clipId);
       if (!clip) return;
-      const oldEvents = [...clip.events];
-
-      // Collect noteOn/noteOff pairs
-      const noteOns = clip.events.filter((e) => e.type === "noteOn");
-      const noteOffs = clip.events.filter((e) => e.type === "noteOff");
-      const otherEvents = clip.events.filter((e) => e.type !== "noteOn" && e.type !== "noteOff");
-
-      // Find the max end time of all notes
-      let maxTime = 0;
-      for (const on of noteOns) {
-        const off = noteOffs.find((e) => e.note === on.note && e.timestamp > on.timestamp);
-        if (off && off.timestamp > maxTime) maxTime = off.timestamp;
+      const oldEvents = cloneEvents(clip.events);
+      const pairs = parseNotePairs(oldEvents, clipId);
+      const consumed = new Set<number>();
+      const noteEvents: any[] = [];
+      const maxTime = Math.max(clip.duration || 0, ...pairs.map((pair) => pair.startTime + pair.duration));
+
+      for (const pair of pairs) {
+        consumed.add(pair.onIndex);
+        consumed.add(pair.offIndex);
+        const newStart = Math.max(0, maxTime - (pair.startTime + pair.duration));
+        noteEvents.push(
+          { ...pair.noteOn, timestamp: newStart },
+          { ...pair.noteOff, timestamp: newStart + pair.duration },
+        );
       }
-      if (maxTime === 0) maxTime = clip.duration;
-
-      // Reverse: mirror each note around the midpoint of the clip
-      const newNoteEvents: MIDIEvent[] = [];
-      for (const on of noteOns) {
-        const off = noteOffs.find((e) => e.note === on.note && e.timestamp > on.timestamp);
-        if (!off) continue;
-        const dur = off.timestamp - on.timestamp;
-        const newStart = maxTime - off.timestamp;
-        newNoteEvents.push({ ...on, timestamp: Math.max(0, newStart) });
-        newNoteEvents.push({ ...off, timestamp: Math.max(0, newStart + dur) });
-      }
-
-      const newEvents = [...otherEvents, ...newNoteEvents].sort((a, b) => a.timestamp - b.timestamp);
 
-      const applyEvents = (s: any, events: MIDIEvent[]) => ({
-        tracks: s.tracks.map((t: any) =>
-          t.id === pianoRollTrackId
-            ? { ...t, midiClips: t.midiClips.map((c: any) => c.id === clipId ? { ...c, events } : c) }
-            : t,
-        ),
-      });
-      set((s) => ({ ...applyEvents(s, newEvents), isModified: true }));
-      commandManager.push({
-        type: "midi_reverse",
-        description: "Reverse MIDI notes",
-        timestamp: Date.now(),
-        execute: () => set((s) => applyEvents(s, newEvents)),
-        undo: () => set((s) => applyEvents(s, oldEvents)),
-      });
-      set({ canUndo: commandManager.canUndo(), canRedo: commandManager.canRedo() });
+      const newEvents = sortMIDIEvents([...oldEvents.filter((_, index) => !consumed.has(index)), ...noteEvents]);
+      setClipPatch(set, pianoRollTrackId, clipId, { events: newEvents });
+      pushEventsUndoCommand(set, get, pianoRollTrackId, clipId, oldEvents, newEvents, "Reverse MIDI notes", "midi_reverse");
+      scheduleMIDITrackSync(get, pianoRollTrackId, true);
     },
 
     invertMIDINotes: (clipId) => {
       const { pianoRollTrackId } = get();
       if (!pianoRollTrackId) return;
-      const track = get().tracks.find((t) => t.id === pianoRollTrackId);
-      if (!track) return;
-      const clip = track.midiClips.find((c) => c.id === clipId);
+      const clip = getClip(get, pianoRollTrackId, clipId);
       if (!clip) return;
-      const oldEvents = [...clip.events];
-
-      // Find center pitch from noteOn events
+      const oldEvents = cloneEvents(clip.events);
       const noteOnPitches = clip.events
-        .filter((e) => e.type === "noteOn" && e.note !== undefined)
-        .map((e) => e.note!);
+        .filter((event) => event.type === "noteOn" && event.note !== undefined)
+        .map((event) => event.note);
       if (noteOnPitches.length === 0) return;
-      const minPitch = Math.min(...noteOnPitches);
-      const maxPitch = Math.max(...noteOnPitches);
-      const centerPitch = (minPitch + maxPitch) / 2;
-
-      const newEvents = clip.events.map((e) => {
-        if ((e.type === "noteOn" || e.type === "noteOff") && e.note !== undefined) {
-          const inverted = Math.round(2 * centerPitch - e.note);
-          const clamped = Math.max(0, Math.min(127, inverted));
-          return { ...e, note: clamped };
+      const centerPitch = (Math.min(...noteOnPitches) + Math.max(...noteOnPitches)) / 2;
+      const newEvents = sortMIDIEvents(clip.events.map((event) => {
+        if ((event.type === "noteOn" || event.type === "noteOff") && event.note !== undefined) {
+          return { ...event, note: clampMidiNote(Math.round(2 * centerPitch - event.note)) };
         }
-        return e;
-      });
+        return { ...event };
+      }));
 
-      const applyEvents = (s: any, events: MIDIEvent[]) => ({
-        tracks: s.tracks.map((t: any) =>
-          t.id === pianoRollTrackId
-            ? { ...t, midiClips: t.midiClips.map((c: any) => c.id === clipId ? { ...c, events } : c) }
-            : t,
-        ),
-      });
-      set((s) => ({ ...applyEvents(s, newEvents), isModified: true }));
-      commandManager.push({
-        type: "midi_invert",
-        description: "Invert MIDI note pitches",
-        timestamp: Date.now(),
-        execute: () => set((s) => applyEvents(s, newEvents)),
-        undo: () => set((s) => applyEvents(s, oldEvents)),
-      });
-      set({ canUndo: commandManager.canUndo(), canRedo: commandManager.canRedo() });
+      setClipPatch(set, pianoRollTrackId, clipId, { events: newEvents });
+      pushEventsUndoCommand(set, get, pianoRollTrackId, clipId, oldEvents, newEvents, "Invert MIDI note pitches", "midi_invert");
+      scheduleMIDITrackSync(get, pianoRollTrackId, true);
     },
 
     setNoteExpression: (clipId, noteId, expr) => {
       const { pianoRollTrackId } = get();
       if (!pianoRollTrackId) return;
-      const track = get().tracks.find((t) => t.id === pianoRollTrackId);
-      if (!track) return;
-      const clip = track.midiClips.find((c) => c.id === clipId);
+      const clip = getClip(get, pianoRollTrackId, clipId);
       if (!clip) return;
-      const [tsStr, noteStr] = noteId.split(":");
-      const noteTimestamp = parseFloat(tsStr);
-      const noteNumber = parseInt(noteStr, 10);
-      const noteIdx = clip.events.findIndex(
-        (e) => e.type === "noteOn" && e.note === noteNumber && Math.abs(e.timestamp - noteTimestamp) < 0.001,
-      );
-      if (noteIdx === -1) return;
-      const oldEvent = clip.events[noteIdx];
-      const oldExpr = { pitchBend: oldEvent.pitchBend, pressure: oldEvent.pressure, slide: oldEvent.slide };
-      const newExpr = {
-        pitchBend: expr.pitchBend !== undefined ? Math.max(-1, Math.min(1, expr.pitchBend)) : oldEvent.pitchBend,
-        pressure: expr.pressure !== undefined ? Math.max(0, Math.min(1, expr.pressure)) : oldEvent.pressure,
-        slide: expr.slide !== undefined ? Math.max(0, Math.min(1, expr.slide)) : oldEvent.slide,
-      };
-      const applyExpr = (s: any, ex: { pitchBend?: number; pressure?: number; slide?: number }) => ({
-        tracks: s.tracks.map((t: any) =>
-          t.id === pianoRollTrackId
-            ? {
-                ...t,
-                midiClips: t.midiClips.map((c: any) =>
-                  c.id === clipId
-                    ? {
-                        ...c,
-                        events: c.events.map((e: any) =>
-                          e.type === "noteOn" && e.note === noteNumber && Math.abs(e.timestamp - noteTimestamp) < 0.001
-                            ? { ...e, ...ex }
-                            : e,
-                        ),
-                      }
-                    : c,
-                ),
-              }
-            : t,
-        ),
-      });
-      set((s) => ({ ...applyExpr(s, newExpr), isModified: true }));
-      commandManager.push({
-        type: "note_expression",
-        description: "Set note expression",
-        timestamp: Date.now(),
-        execute: () => set((s) => applyExpr(s, newExpr)),
-        undo: () => set((s) => applyExpr(s, oldExpr)),
-      });
-      set({ canUndo: commandManager.canUndo(), canRedo: commandManager.canRedo() });
+      const parsed = parseNoteIdentity(noteId);
+      if (!parsed) return;
+
+      const oldEvents = cloneEvents(clip.events);
+      const newEvents = sortMIDIEvents(clip.events.map((event) => {
+        if (
+          event.type === "noteOn" &&
+          event.note === parsed.note &&
+          Math.abs(event.timestamp - parsed.timestamp) < 0.001
+        ) {
+          return {
+            ...event,
+            pitchBend: expr.pitchBend !== undefined ? Math.max(-1, Math.min(1, expr.pitchBend)) : event.pitchBend,
+            pressure: expr.pressure !== undefined ? Math.max(0, Math.min(1, expr.pressure)) : event.pressure,
+            slide: expr.slide !== undefined ? Math.max(0, Math.min(1, expr.slide)) : event.slide,
+          };
+        }
+        return { ...event };
+      }));
+
+      setClipPatch(set, pianoRollTrackId, clipId, { events: newEvents });
+      pushEventsUndoCommand(set, get, pianoRollTrackId, clipId, oldEvents, newEvents, "Set note expression", "note_expression");
+      scheduleMIDITrackSync(get, pianoRollTrackId, true);
     },
 
-    // Sprint 19: Plugin + Mixing
     toggleMediaPool: () =>
       set((s) => ({ showMediaPool: !s.showMediaPool })),
-
 });
diff --git a/frontend/src/store/actions/project.ts b/frontend/src/store/actions/project.ts
index 73cb829..dd40b9e 100644
--- a/frontend/src/store/actions/project.ts
+++ b/frontend/src/store/actions/project.ts
@@ -622,6 +622,17 @@ export const projectActions = (set: SetFn, get: GetFn) => ({
               inputChCount,
             );
 
+            let restoredInstrumentPlugin: string | undefined;
+            if (!bypassFX && trackData.instrumentPlugin) {
+              set({ projectLoadingMessage: `Restoring instrument for ${trackData.name}...` });
+              await new Promise((r) => setTimeout(r, 0));
+              const success = await nativeBridge.loadInstrument(trackData.id, trackData.instrumentPlugin);
+              console.log(`[DEBUG LOAD]   loadInstrument result: ${success}`);
+              if (success) {
+                restoredInstrumentPlugin = trackData.instrumentPlugin;
+              }
+            }
+
             if (trackData.clips) {
               for (const clip of trackData.clips) {
                 if (clip.filePath) {
@@ -683,6 +694,7 @@ export const projectActions = (set: SetFn, get: GetFn) => ({
 
             const frontendTrack: Track = {
               ...trackData,
+              type: restoredInstrumentPlugin ? "instrument" : trackData.type,
               aiWorkflow:
                 trackData.type === "ai"
                   ? trackData.aiWorkflow || "text-to-music"
@@ -804,6 +816,7 @@ export const projectActions = (set: SetFn, get: GetFn) => ({
               meterLevel: 0,
               peakLevel: 0,
               clipping: false,
+              instrumentPlugin: restoredInstrumentPlugin,
               suspendedAutomationState: null,
             };
 
diff --git a/frontend/src/store/actions/tracks.ts b/frontend/src/store/actions/tracks.ts
index 9560e4f..8b6fe73 100644
--- a/frontend/src/store/actions/tracks.ts
+++ b/frontend/src/store/actions/tracks.ts
@@ -239,10 +239,13 @@ async function syncDuplicatedTrackToBackend(sourceTrack: any, newTrack: any, ins
 
 export const trackActions = (set: SetFn, get: GetFn) => ({
     addTrack: (trackData) => {
+      const requestedType = trackData.type || "audio";
       const newTrack = createDefaultTrack(
         trackData.id,
         trackData.name,
         trackData.color,
+        requestedType,
+        get().tracks,
       );
       const fullTrack = { ...newTrack, ...trackData };
 
diff --git a/frontend/src/store/useDAWStore.ts b/frontend/src/store/useDAWStore.ts
index 02235be..eb94c20 100644
--- a/frontend/src/store/useDAWStore.ts
+++ b/frontend/src/store/useDAWStore.ts
@@ -1655,8 +1655,16 @@ interface DAWActions {
   updateMIDINotes: (clipId: string, notes: MIDIEvent[]) => void;
 
   // Piano Roll: Velocity & CC editing
-  updateMIDINoteVelocity: (trackId: string, clipId: string, noteTimestamp: number, noteNumber: number, velocity: number) => void;
-  updateMIDICCEvents: (trackId: string, clipId: string, ccEvents: MIDICCEvent[]) => void;
+  syncMIDITrackToBackend: (trackId: string, options?: { debounce?: boolean }) => Promise<void>;
+  previewMIDIClipEvents: (trackId: string, clipId: string, events: MIDIEvent[]) => void;
+  commitMIDIClipEvents: (trackId: string, clipId: string, oldEvents: MIDIEvent[], newEvents: MIDIEvent[], description?: string) => void;
+  addMIDINote: (trackId: string, clipId: string, startTime: number, noteNumber: number, duration: number, velocity?: number) => string;
+  removeMIDINotes: (trackId: string, clipId: string, noteIds: string[]) => string[];
+  moveMIDINotes: (trackId: string, clipId: string, noteIds: string[], deltaTime: number, deltaNote: number) => string[];
+  resizeMIDINote: (trackId: string, clipId: string, noteId: string, startTime: number, duration: number) => string[];
+  updateMIDINoteVelocity: (trackId: string, clipId: string, noteTimestamp: number, noteNumber: number, velocity: number, options?: { transient?: boolean; oldEvents?: MIDIEvent[] }) => void;
+  updateMIDICCEvents: (trackId: string, clipId: string, ccEvents: MIDICCEvent[], options?: { transient?: boolean; oldCCEvents?: MIDICCEvent[]; description?: string }) => void;
+  commitMIDICCEvents: (trackId: string, clipId: string, oldCCEvents: MIDICCEvent[], newCCEvents: MIDICCEvent[], description?: string) => void;
   setPianoRollScaleRoot: (root: number) => void;
   setPianoRollScaleType: (scaleType: string) => void;
 
@@ -1734,32 +1742,95 @@ export type PendingProjectAction =
 // Default Values
 // ============================================
 
-const DEFAULT_TRACK_COLORS = [
-  "#4361ee",
-  "#7209b7",
-  "#f72585",
-  "#4cc9f0",
-  "#4895ef",
-  "#560bad",
-  "#3a0ca3",
-  "#f77f00",
-];
+const TRACK_COLOR_PALETTES: Record<TrackType, string[]> = {
+  audio: [
+    "#38bdf8",
+    "#34d399",
+    "#f59e0b",
+    "#fb7185",
+    "#a78bfa",
+    "#22d3ee",
+    "#f97316",
+    "#84cc16",
+    "#60a5fa",
+    "#f472b6",
+  ],
+  midi: [
+    "#7dd3fc",
+    "#86efac",
+    "#fde68a",
+    "#c4b5fd",
+    "#67e8f9",
+    "#f9a8d4",
+    "#bef264",
+    "#93c5fd",
+    "#fcd34d",
+    "#5eead4",
+  ],
+  instrument: [
+    "#a7f3d0",
+    "#bfdbfe",
+    "#fbcfe8",
+    "#ddd6fe",
+    "#fed7aa",
+    "#bbf7d0",
+    "#bae6fd",
+    "#fecdd3",
+    "#fde68a",
+    "#ccfbf1",
+  ],
+  bus: [
+    "#94a3b8",
+    "#64748b",
+    "#38bdf8",
+    "#2dd4bf",
+    "#a3e635",
+    "#fbbf24",
+  ],
+  ai: [
+    "#f0abfc",
+    "#c084fc",
+    "#818cf8",
+    "#22d3ee",
+    "#2dd4bf",
+    "#fb7185",
+    "#facc15",
+    "#60a5fa",
+  ],
+};
 
-export const getRandomTrackColor = (): string => {
-  return DEFAULT_TRACK_COLORS[
-    Math.floor(Math.random() * DEFAULT_TRACK_COLORS.length)
-  ];
+export const getRandomTrackColor = (
+  type: TrackType = "audio",
+  existingTracks: Array<Pick<Track, "type" | "color">> = [],
+): string => {
+  const palette = TRACK_COLOR_PALETTES[type] || TRACK_COLOR_PALETTES.audio;
+  const sameTypeTracks = existingTracks.filter((track) => track.type === type && track.color);
+  const lastColor = sameTypeTracks[sameTypeTracks.length - 1]?.color;
+  const lastIndex = lastColor ? palette.indexOf(lastColor) : -1;
+  const recentlyUsed = new Set(sameTypeTracks.slice(-Math.min(4, palette.length)).map((track) => track.color));
+  const preferred = palette.filter((color, index) => {
+    if (recentlyUsed.has(color)) return false;
+    if (lastIndex < 0) return true;
+    return Math.abs(index - lastIndex) > 1;
+  });
+  const candidates = preferred.length > 0
+    ? preferred
+    : palette.filter((color) => color !== lastColor);
+  const pool = candidates.length > 0 ? candidates : palette;
+  return pool[Math.floor(Math.random() * pool.length)];
 };
 
 export const createDefaultTrack = (
   id: string,
   name: string,
   color?: string,
+  type: TrackType = "audio",
+  existingTracks: Array<Pick<Track, "type" | "color">> = [],
 ): Track => ({
   id,
   name,
-  color: color || getRandomTrackColor(),
-  type: "audio",
+  color: color || getRandomTrackColor(type, existingTracks),
+  type,
   inputType: "stereo",
   volume: 0.8,
   volumeDB: 0,
@@ -2879,7 +2950,7 @@ export const useDAWStore = create<DAWState & DAWActions>()(
     createVCAFader: (name, memberTrackIds) => {
       const vcaGroupId = crypto.randomUUID();
       const vcaTrackId = crypto.randomUUID();
-      const vcaTrack = createDefaultTrack(vcaTrackId, name);
+      const vcaTrack = createDefaultTrack(vcaTrackId, name, undefined, "bus", get().tracks);
       const faderTrack: Track = { ...vcaTrack, isVCALeader: true, vcaGroupId, type: "bus" as TrackType, icon: "bus" };
 
       const command: Command = {
@@ -4195,9 +4266,9 @@ export const useDAWStore = create<DAWState & DAWActions>()(
     ...automationActions(set, get),
     ...renderingActions(set, get),
     ...projectActions(set, get),
-    ...midiActions(set, get),
     ...routingActions(set, get),
     ...clipLauncherActions(set, get),
+    ...midiActions(set, get),
     ...markerActions(set, get),
     ...screensetActions(set, get),
     ...macroActions(set, get),
diff --git a/frontend/src/utils/midiClipSerialization.ts b/frontend/src/utils/midiClipSerialization.ts
new file mode 100644
index 0000000..0f5a1f0
--- /dev/null
+++ b/frontend/src/utils/midiClipSerialization.ts
@@ -0,0 +1,32 @@
+import { nativeBridge } from "../services/NativeBridge";
+import type { MIDIClip } from "../store/useDAWStore";
+
+export function serializeMIDIClipsForBackend(clips: MIDIClip[]) {
+  return clips.map((clip) => ({
+    id: clip.id,
+    startTime: clip.startTime,
+    duration: clip.duration,
+    events: [
+      ...clip.events.map((event) => ({
+        type: event.type,
+        timestamp: event.timestamp,
+        note: event.note,
+        velocity: event.velocity,
+        controller: event.controller,
+        value: event.value,
+        channel: 1,
+      })),
+      ...(clip.ccEvents || []).map((event) => ({
+        type: "cc",
+        timestamp: event.time,
+        controller: event.cc,
+        value: event.value,
+        channel: 1,
+      })),
+    ].sort((a, b) => a.timestamp - b.timestamp),
+  }));
+}
+
+export async function syncTrackMIDIClipsToBackend(trackId: string, clips: MIDIClip[]) {
+  return nativeBridge.setTrackMIDIClips(trackId, serializeMIDIClipsForBackend(clips));
+}