[feat](trx-frontend-http): refine rds overlay interactions

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

@@ -3181,15 +3181,57 @@ function clearSpectrumCanvas() {
   ctx.fillRect(0, 0, spectrumCanvas.width, spectrumCanvas.height);
 }
 
+function formatOverlayPs(ps) {
+  const padded = String(ps ?? "")
+    .slice(0, 8)
+    .padEnd(8, " ");
+  return padded.replaceAll(" ", "_");
+}
+
+function formatOverlayPi(pi) {
+  return pi != null
+    ? `PI 0x${pi.toString(16).toUpperCase().padStart(4, "0")}`
+    : "PI --";
+}
+
+function formatOverlayPty(pty) {
+  return pty != null ? `PTY ${pty}` : "PTY --";
+}
+
+async function copyRdsPsToClipboard() {
+  const ps = lastSpectrumData?.rds?.program_service?.trim();
+  if (!ps) {
+    showHint("No RDS PS", 1200);
+    return;
+  }
+  try {
+    await navigator.clipboard.writeText(ps);
+    showHint(`Copied ${ps}`, 1200);
+  } catch (_) {
+    showHint("Clipboard failed", 1500);
+  }
+}
+
+if (rdsPsOverlay) {
+  rdsPsOverlay.addEventListener("click", () => { copyRdsPsToClipboard(); });
+}
+const rdsPsValueEl = document.getElementById("rds-ps");
+if (rdsPsValueEl) {
+  rdsPsValueEl.addEventListener("click", () => { copyRdsPsToClipboard(); });
+}
+
 function updateRdsPsOverlay(rds) {
   // Overview strip overlay
   if (rdsPsOverlay) {
     const ps = rds?.program_service?.trim();
     if (ps) {
-      rdsPsOverlay.textContent = ps;
+      rdsPsOverlay.innerHTML =
+        `<span class="rds-ps-main">${escapeMapHtml(formatOverlayPs(ps))}</span>` +
+        `<span class="rds-ps-meta">${escapeMapHtml(formatOverlayPi(rds?.pi))} · ${escapeMapHtml(formatOverlayPty(rds?.pty))}</span>`;
       positionRdsPsOverlay();
-      rdsPsOverlay.style.display = "block";
+      rdsPsOverlay.style.display = "flex";
     } else {
+      rdsPsOverlay.innerHTML = "";
       rdsPsOverlay.style.display = "none";
     }
   }

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

@@ -418,7 +418,7 @@ small { color: var(--text-muted); }
   margin-bottom: 0;
   padding: 0.25rem 0 0.15rem;
   position: relative;
-  z-index: 3;
+  z-index: 6;
 }
 .header-main {
   display: inline-flex;
@@ -427,7 +427,7 @@ small { color: var(--text-muted); }
   max-width: min(100%, 46rem);
   padding: 0.35rem 0.8rem 0.4rem 0.45rem;
   margin-left: -0.3rem;
-  transform: translateY(-2px);
+  transform: translateY(-10px);
   border-radius: 0.95rem;
   background: color-mix(in srgb, var(--card-bg) 56%, transparent);
   backdrop-filter: blur(12px) saturate(125%);
@@ -455,10 +455,8 @@ small { color: var(--text-muted); }
   left: 50%;
   transform: translate(-50%, 0);
   z-index: 5;
-  pointer-events: none;
+  pointer-events: auto;
-  font-family: 'DSEG14 Classic', monospace;
+  cursor: pointer;
-  font-size: clamp(1rem, 2.2vw, 1.45rem);
-  letter-spacing: 0.08em;
   color: var(--text-heading);
   padding: 0.22rem 0.6rem 0.16rem;
   border: 1px solid color-mix(in srgb, var(--border-light) 72%, transparent);
@@ -470,11 +468,33 @@ small { color: var(--text-muted); }
     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;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.08rem;
+  text-align: center;
   max-width: min(88vw, 22rem);
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.rds-ps {
+  cursor: pointer;
+}
+.rds-ps-main {
+  display: block;
+  font-family: 'DSEG14 Classic', monospace;
+  font-size: clamp(1rem, 2.2vw, 1.45rem);
+  letter-spacing: 0.08em;
+  white-space: pre;
+}
+.rds-ps-meta {
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: clamp(0.58rem, 1.1vw, 0.78rem);
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
 .overview-toolbar {
   display: flex;
   align-items: center;