[feat](trx-rds,trx-frontend-http): reset rds on tune changes

Co-authored-by: Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js

@@ -671,6 +671,7 @@ function resizeHeaderSignalCanvas() {
     _wfResetOffscreen();
     trimOverviewWaterfallRows();
   }
+  positionRdsPsOverlay();
   drawHeaderSignalGraph();
 }
 
@@ -751,6 +752,7 @@ function drawHeaderSignalGraph() {
     drawOverviewSignalHistory(ctx, w, h, pal);
   }
   ctx.restore();
+  positionRdsPsOverlay();
 }
 
 function _wfDrawRows(oct, rows, startRowIdx, endRowIdx, iW, iH, pal) {
@@ -927,8 +929,32 @@ function refreshFreqDisplay() {
   refreshWavelengthDisplay(lastFreqHz);
 }
 
+function positionRdsPsOverlay() {
+  if (!rdsPsOverlay || !lastSpectrumData || lastFreqHz == null || !overviewCanvas) return;
+  const width = overviewCanvas.clientWidth || overviewCanvas.width || 0;
+  if (width <= 0) {
+    return;
+  }
+  const range = spectrumVisibleRange(lastSpectrumData);
+  if (!Number.isFinite(range.visLoHz) || !Number.isFinite(range.visSpanHz) || range.visSpanHz <= 0) {
+    return;
+  }
+  const rel = (lastFreqHz - range.visLoHz) / range.visSpanHz;
+  const clamped = Math.max(0.06, Math.min(0.94, rel));
+  rdsPsOverlay.style.left = `${clamped * width}px`;
+}
+
+function resetRdsDisplay() {
+  rdsFrameCount = 0;
+  updateRdsPsOverlay(null);
+}
+
 function applyLocalTunedFrequency(hz) {
   if (!Number.isFinite(hz)) return;
+  const freqChanged = lastFreqHz !== hz;
+  if (freqChanged) {
+    resetRdsDisplay();
+  }
   lastFreqHz = hz;
   refreshWavelengthDisplay(lastFreqHz);
   if (!freqDirty) {
@@ -941,6 +967,7 @@ function applyLocalTunedFrequency(hz) {
   if (lastSpectrumData) {
     scheduleSpectrumDraw();
   }
+  positionRdsPsOverlay();
 }
 
 function refreshCenterFreqDisplay() {
@@ -3150,6 +3177,7 @@ function updateRdsPsOverlay(rds) {
     const ps = rds?.program_service?.trim();
     if (ps) {
       rdsPsOverlay.textContent = ps;
+      positionRdsPsOverlay();
       rdsPsOverlay.style.display = "";
     } else {
       rdsPsOverlay.style.display = "none";

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -451,18 +451,29 @@ small { color: var(--text-muted); }
 #rds-ps-overlay {
   display: none;
   position: absolute;
-  top: calc(var(--header-waterfall-overlap) + clamp(4.2rem, 11vh, 6.25rem) / 2);
+  top: 0.35rem;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, 0);
   z-index: 2;
   pointer-events: none;
   font-family: 'DSEG14 Classic', monospace;
-  font-size: 2rem;
-  letter-spacing: 0.05em;
+  font-size: clamp(1rem, 2.2vw, 1.45rem);
+  letter-spacing: 0.08em;
   color: var(--text-heading);
-  opacity: 0.88;
-  text-shadow: 0 1px 8px color-mix(in srgb, var(--bg) 60%, transparent);
+  padding: 0.22rem 0.6rem 0.16rem;
+  border: 1px solid color-mix(in srgb, var(--border-light) 72%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--card-bg) 52%, transparent);
+  backdrop-filter: blur(14px) saturate(135%);
+  -webkit-backdrop-filter: blur(14px) saturate(135%);
+  box-shadow:
+    0 8px 18px color-mix(in srgb, #000000 16%, transparent),
+    inset 0 1px 0 color-mix(in srgb, #ffffff 10%, transparent);
+  text-shadow: 0 1px 10px color-mix(in srgb, var(--bg) 68%, transparent);
   white-space: nowrap;
+  max-width: min(88vw, 22rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .overview-toolbar {
   display: flex;