perf(mq_editor): move playhead to overlay canvas, avoid full render on tick

setPlayheadTime() now updates only the playhead overlay and spectrum panel
instead of triggering a full renderSpectrogram() every rAF tick.

handoff(Gemini): playhead is now an overlay canvas (like cursorCanvas),
no more O(n_frames) redraw during playback.

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

2 files changed, 12 insertions, 5 deletions

diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html
index 4292a5f..49a9869 100644
--- a/tools/mq_editor/index.html
+++ b/tools/mq_editor/index.html
@@ -332,6 +332,7 @@
       <div style="position: relative;">
         <canvas id="canvas" width="1400" height="600"></canvas>
         <canvas id="cursorCanvas" width="1400" height="600" style="position:absolute;top:0;left:0;pointer-events:none;"></canvas>
+        <canvas id="playheadCanvas" width="1400" height="600" style="position:absolute;top:0;left:0;pointer-events:none;"></canvas>
 
         <!-- Mini spectrum viewer (bottom-right overlay) -->
         <div id="spectrumViewer" style="position: absolute; bottom: 10px; right: 10px; width: 400px; height: 100px; background: rgba(30, 30, 30, 0.9); border: 1px solid #555; border-radius: 3px; pointer-events: none;">
diff --git a/tools/mq_editor/viewer.js b/tools/mq_editor/viewer.js
index 46876c1..fea5cd0 100644
--- a/tools/mq_editor/viewer.js
+++ b/tools/mq_editor/viewer.js
@@ -38,7 +38,9 @@ class SpectrogramViewer {
     this.cursorCtx = this.cursorCanvas ? this.cursorCanvas.getContext('2d') : null;
     this.mouseX = -1;
 
-    // Playhead
+    // Playhead overlay
+    this.playheadCanvas = document.getElementById('playheadCanvas');
+    this.playheadCtx = this.playheadCanvas ? this.playheadCanvas.getContext('2d') : null;
     this.playheadTime = -1; // -1 = not playing
 
     // Spectrum viewer
@@ -119,10 +121,11 @@ class SpectrogramViewer {
     this.playheadTime = time;
     if (time >= 0) {
       this.spectrumTime = time;
+      this.renderSpectrum();
     } else if (this.mouseX >= 0) {
       this.spectrumTime = this.canvasToTime(this.mouseX);
     }
-    this.render();
+    this.drawPlayhead();
   }
 
   setPartials(partials) {
@@ -384,15 +387,18 @@ class SpectrogramViewer {
   }
 
   drawPlayhead() {
+    if (!this.playheadCtx) return;
+    const ctx = this.playheadCtx;
+    const h = this.playheadCanvas.height;
+    ctx.clearRect(0, 0, this.playheadCanvas.width, h);
     if (this.playheadTime < 0) return;
     if (this.playheadTime < this.t_view_min || this.playheadTime > this.t_view_max) return;
-    const {ctx, canvas} = this;
     const x = this.timeToX(this.playheadTime);
-    ctx.strokeStyle = '#f00';
+    ctx.strokeStyle = 'rgba(255, 80, 80, 0.9)';
     ctx.lineWidth = 2;
     ctx.beginPath();
     ctx.moveTo(x, 0);
-    ctx.lineTo(x, canvas.height);
+    ctx.lineTo(x, h);
     ctx.stroke();
   }