From 9dbf6fc64e6a42dcb7cfde12214b385654e93ab7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 08:10:48 +0000
Subject: [PATCH] [feat](trx-frontend-http): move band plan overlay to top of
 spectrum view

Repositions the bandplan strip from the bottom of the combined spectrum
canvas to the top. Updates HTML element order, CSS bp-webgl absolute
positioning, and WebGL rendering Y coordinates.

https://claude.ai/code/session_015sRhGsk7ggRYoxJANDY72S
Signed-off-by: Claude <noreply@anthropic.com>
---
 .../trx-frontend/trx-frontend-http/assets/web/app.js        | 6 +++---
 .../trx-frontend/trx-frontend-http/assets/web/index.html    | 2 +-
 .../trx-frontend/trx-frontend-http/assets/web/style.css     | 5 ++---
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
index 4fb3702..44c5f73 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js
@@ -10189,16 +10189,16 @@ function drawSpectrum(data) {
     spectrumGl.drawPoints(spectrumTmpMarkerPoints, Math.max(2, dpr * 1.6), cssColorToRgba(pal.waveformPeak));
   }
 
-  // ── Bandplan WebGL strip (bottom of spectrum, above waterfall) ──
+  // ── Bandplan WebGL strip (top of spectrum) ──
   if (bandplanRegion !== "off" && bandplanData) {
     const bpSegs = bandplanVisibleSegments(bandplanRegion, range.visLoHz, range.visHiHz);
     if (bpSegs.length > 0) {
       const bpH = Math.round(BANDPLAN_STRIP_CSS_HEIGHT * dpr);
-      const bpY = H - bpH;
+      const bpY = 0;
       // Dark backdrop so segments are readable over the spectrum fill.
       spectrumGl.fillRect(0, bpY, W, bpH, [0.07, 0.09, 0.15, 0.82]);
       // Thin separator line at bottom of bandplan strip.
-      spectrumGl.drawSegments([0, bpY + bpH, W, bpY + bpH],
+      spectrumGl.drawSegments([0, bpH, W, bpH],
         [1, 1, 1, 0.08], Math.max(1, dpr * 0.5));
       const bpVerts = [];
       for (const seg of bpSegs) {
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index 816dc05..16c3d60 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -119,6 +119,7 @@
       </div>
       <div id="spectrum-panel" style="display:none;">
         <div class="spectrum-wrap">
+          <div id="spectrum-bandplan-strip" aria-label="Band plan allocations"></div>
           <div id="spectrum-bookmark-axis"></div>
           <div id="spectrum-bookmark-side-left" class="spectrum-bookmark-side spectrum-bookmark-side-left" aria-hidden="true"></div>
           <canvas id="spectrum-canvas"></canvas>
@@ -127,7 +128,6 @@
           <div id="spectrum-db-axis" aria-hidden="true"></div>
           <div id="spectrum-bookmark-side-right" class="spectrum-bookmark-side spectrum-bookmark-side-right" aria-hidden="true"></div>
           <div id="spectrum-tooltip"></div>
-          <div id="spectrum-bandplan-strip" aria-label="Band plan allocations"></div>
           <canvas id="spectrum-waterfall-canvas" style="display:none;"></canvas>
           <div id="spectrum-freq-axis">
             <button id="spectrum-center-left-btn" class="spectrum-edge-shift spectrum-edge-shift-left" type="button" aria-label="Shift spectrum center left">&lsaquo;</button>
diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
index b804bb6..9438b56 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css
@@ -3303,11 +3303,10 @@ button:focus-visible, input:focus-visible, select:focus-visible {
 
 /* ── WebGL overlay mode ── When the spectrum canvas is visible the coloured
    segments are rendered via WebGL.  The DOM strip repositions itself as a
-   transparent label overlay at the bottom of the spectrum canvas, just above
-   the waterfall. */
+   transparent label overlay at the top of the spectrum canvas. */
 #spectrum-bandplan-strip.bp-webgl {
   position: absolute;
-  top: calc(var(--spectrum-plot-height) - 18px);
+  top: 0;
   left: 0;
   right: 0;
   background: transparent;