feat(mq_editor): partial spectrum viewer — synth+FFT power display

Adds a 200×100 canvas (left of the main spectrum overlay) that shows
the synthesised power spectrum of the selected partial at the time
under the mouse (or playhead).

Pipeline: synthesizeMQ → Hann window → FFT (2048-pt) → dB power bars.
- freqCurve times are shifted so the synthesis window is centred on t
- X-axis: log-frequency (same scale as main view)
- Y-axis: dB, normalised to peak of the synthesised frame
- Cache: {partialIndex, time} → avoids re-synthesis on mouse move;
  bypassed (force=true) from render() so param changes always redraw

handoff(Claude): partial spectrum viewer complete

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

3 files changed, 137 insertions, 0 deletions

diff --git a/tools/mq_editor/index.html b/tools/mq_editor/index.html
index 605d91a..efbd73d 100644
--- a/tools/mq_editor/index.html
+++ b/tools/mq_editor/index.html
@@ -82,6 +82,10 @@
         <canvas id="cursorCanvas" width="1400" height="600"></canvas>
         <canvas id="playheadCanvas" width="1400" height="600"></canvas>
 
+        <!-- Partial spectrum viewer (bottom-right overlay, left of main spectrum) -->
+        <div id="partialSpectrumViewer">
+          <canvas id="partialSpectrumCanvas" width="200" height="100"></canvas>
+        </div>
         <!-- Mini spectrum viewer (bottom-right overlay) -->
         <div id="spectrumViewer">
           <canvas id="spectrumCanvas" width="400" height="100"></canvas>
diff --git a/tools/mq_editor/style.css b/tools/mq_editor/style.css
index ed518f5..07a404a 100644
--- a/tools/mq_editor/style.css
+++ b/tools/mq_editor/style.css
@@ -39,6 +39,7 @@ button.contour-active { background: #145; border-color: #0cc; color: #aff; }
 /* === Canvas & overlays === */
 #canvas { border: 1px solid #555; background: #000; cursor: crosshair; display: block; flex-shrink: 0; }
 #cursorCanvas, #playheadCanvas { position: absolute; top: 0; left: 0; pointer-events: none; }
+#partialSpectrumViewer { position: absolute; bottom: 10px; right: 420px; width: 200px; height: 100px; background: rgba(30,30,30,.9); border: 1px solid #555; border-radius: 3px; pointer-events: none; }
 #spectrumViewer { position: absolute; bottom: 10px; right: 10px; width: 400px; height: 100px; background: rgba(30,30,30,.9); border: 1px solid #555; border-radius: 3px; pointer-events: none; }
 #keepOverlay { position: absolute; bottom: 10px; left: 10px; background: rgba(30,30,30,.88); border: 1px solid #555; border-radius: 3px; padding: 4px 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: #aaa; user-select: none; }
 #keepOverlay input[type="range"] { width: 90px; }
diff --git a/tools/mq_editor/viewer.js b/tools/mq_editor/viewer.js
index 677e5b5..82e9c24 100644
--- a/tools/mq_editor/viewer.js
+++ b/tools/mq_editor/viewer.js
@@ -50,6 +50,11 @@ class SpectrogramViewer {
     this.showSynthFFT = false; // Toggle: false=original, true=synth
     this.synthStftCache = null;
 
+    // Partial spectrum viewer
+    this.partialSpectrumCanvas = document.getElementById('partialSpectrumCanvas');
+    this.partialSpectrumCtx = this.partialSpectrumCanvas ? this.partialSpectrumCanvas.getContext('2d') : null;
+    this._partialSpecCache = null; // {partialIndex, time, specData?} — see renderPartialSpectrum
+
     // Selection and editing
     this.selectedPartial = -1;
     this.dragState = null; // {pointIndex: 0-3}
@@ -128,6 +133,7 @@ class SpectrogramViewer {
     if (time >= 0) {
       this.spectrumTime = time;
       this.renderSpectrum();
+      this.renderPartialSpectrum(time);
     } else if (this.mouseX >= 0) {
       this.spectrumTime = this.canvasToTime(this.mouseX);
     }
@@ -170,6 +176,7 @@ class SpectrogramViewer {
   }
 
   selectPartial(index) {
+    this._partialSpecCache = null;
     this.selectedPartial = index;
     this.render();
     if (this.onPartialSelect) this.onPartialSelect(index);
@@ -219,6 +226,7 @@ class SpectrogramViewer {
     this.drawAxes();
     this.drawPlayhead();
     this.renderSpectrum();
+    this.renderPartialSpectrum(this.spectrumTime, true);
     if (this.onRender) this.onRender();
   }
 
@@ -638,6 +646,129 @@ class SpectrogramViewer {
     ctx.fillText(useSynth ? 'SYNTH [a]' : 'ORIG [a]', 4, 10);
   }
 
+  // Draw synthesized power spectrum of the selected partial at `time` into partialSpectrumCanvas.
+  // X-axis: log frequency (same scale as main view). Y-axis: dB (normalised to peak).
+  // force=true bypasses cache — used by render() when params change.
+  // Otherwise cached on {partialIndex, time} for mouse-move performance.
+  renderPartialSpectrum(time, force = false) {
+    const ctx = this.partialSpectrumCtx;
+    if (!ctx) return;
+
+    const canvas = this.partialSpectrumCanvas;
+    const width  = canvas.width;
+    const height = canvas.height;
+    const p      = this.selectedPartial;
+
+    // Cache check — skip if same partial+time unless forced by param change
+    if (!force && this._partialSpecCache &&
+        this._partialSpecCache.partialIndex === p &&
+        this._partialSpecCache.time === time) return;
+
+    ctx.fillStyle = '#1e1e1e';
+    ctx.fillRect(0, 0, width, height);
+    ctx.font = '9px monospace';
+
+    if (p < 0 || !this.partials || p >= this.partials.length) {
+      ctx.fillStyle = '#333';
+      ctx.fillText('no partial', 4, height / 2 + 4);
+      this._partialSpecCache = {partialIndex: p, time};
+      return;
+    }
+
+    const partial = this.partials[p];
+    const curve   = partial.freqCurve;
+    if (!curve || time < curve.t0 || time > curve.t3) {
+      ctx.fillStyle = '#333';
+      ctx.fillText('out of range', 4, height / 2 + 4);
+      this._partialSpecCache = {partialIndex: p, time};
+      return;
+    }
+
+    // Synthesize window → FFT → power spectrum
+    const specData = this._computePartialSpectrum(partial, time);
+    this._partialSpecCache = {partialIndex: p, time, specData};
+
+    const {squaredAmp, maxDB, sampleRate, fftSize} = specData;
+    const numBins  = fftSize / 2;
+    const binWidth = sampleRate / fftSize;
+    const color    = this.partialColor(p);
+    const cr       = parseInt(color[1] + color[1], 16);
+    const cg       = parseInt(color[2] + color[2], 16);
+    const cb       = parseInt(color[3] + color[3], 16);
+
+    for (let px = 0; px < width; ++px) {
+      const fStart = this.normToFreq(px / width);
+      const fEnd   = this.normToFreq((px + 1) / width);
+      const bStart = Math.max(0, Math.floor(fStart / binWidth));
+      const bEnd   = Math.min(numBins - 1, Math.ceil(fEnd / binWidth));
+      if (bStart > bEnd) continue;
+
+      let maxSq = 0;
+      for (let b = bStart; b <= bEnd; ++b) if (squaredAmp[b] > maxSq) maxSq = squaredAmp[b];
+
+      const magDB = 10 * Math.log10(Math.max(maxSq, 1e-20));
+      const barH  = Math.round(this.normalizeDB(magDB, maxDB) * (height - 12));
+      if (barH <= 0) continue;
+
+      const grad = ctx.createLinearGradient(0, height - barH, 0, height);
+      grad.addColorStop(0, color);
+      grad.addColorStop(1, `rgba(${cr},${cg},${cb},0.53)`);
+      ctx.fillStyle = grad;
+      ctx.fillRect(px, height - barH, 1, barH);
+    }
+
+    ctx.fillStyle = color;
+    ctx.fillText('P#' + p + ' @' + time.toFixed(3) + 's', 4, 10);
+  }
+
+  // Synthesise a 2048-sample Hann-windowed frame of `partial` centred on `time`,
+  // run FFT, and return {squaredAmp, maxDB, sampleRate, fftSize}.
+  // freqCurve times are shifted so synthesizeMQ's t=0 aligns with tStart = time - window/2.
+  _computePartialSpectrum(partial, time) {
+    const sampleRate     = this.audioBuffer.sampleRate;
+    const FFT_SIZE       = 2048;
+    const windowDuration = FFT_SIZE / sampleRate;
+    const tStart         = time - windowDuration / 2;
+
+    // Shift curve times so synthesis window [0, windowDuration] maps to [tStart, tStart+windowDuration]
+    const fc = partial.freqCurve;
+    const shiftedPartial = {
+      ...partial,
+      freqCurve: {
+        t0: fc.t0 - tStart, t1: fc.t1 - tStart,
+        t2: fc.t2 - tStart, t3: fc.t3 - tStart,
+        v0: fc.v0, v1: fc.v1, v2: fc.v2, v3: fc.v3,
+        a0: fc.a0, a1: fc.a1, a2: fc.a2, a3: fc.a3,
+      },
+    };
+
+    const pcm = synthesizeMQ([shiftedPartial], sampleRate, windowDuration, true, {});
+
+    // Hann window
+    for (let i = 0; i < FFT_SIZE; ++i) {
+      pcm[i] *= 0.5 * (1 - Math.cos(2 * Math.PI * i / (FFT_SIZE - 1)));
+    }
+
+    // FFT
+    const real = new Float32Array(FFT_SIZE);
+    const imag = new Float32Array(FFT_SIZE);
+    for (let i = 0; i < FFT_SIZE; ++i) real[i] = pcm[i];
+    fftRadix2(real, imag, FFT_SIZE, 1);
+
+    // Power spectrum
+    const squaredAmp = new Float32Array(FFT_SIZE / 2);
+    for (let i = 0; i < FFT_SIZE / 2; ++i) {
+      squaredAmp[i] = (real[i] * real[i] + imag[i] * imag[i]) / (FFT_SIZE * FFT_SIZE);
+    }
+
+    // maxDB for normalizing the display
+    let maxSq = 1e-20;
+    for (let i = 0; i < squaredAmp.length; ++i) if (squaredAmp[i] > maxSq) maxSq = squaredAmp[i];
+    const maxDB = 10 * Math.log10(maxSq);
+
+    return {squaredAmp, maxDB, sampleRate, fftSize: FFT_SIZE};
+  }
+
   // --- View management ---
 
   updateViewBounds() {
@@ -731,6 +862,7 @@ class SpectrogramViewer {
       if (this.playheadTime < 0) {
         this.spectrumTime = time;
         this.renderSpectrum();
+        this.renderPartialSpectrum(time);
       }
 
       // Cursor hint for control points (skip in explore mode)