From b6692b759e4c0b44be906f2d10496322ffa22256 Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Mon, 2 Mar 2026 21:54:56 +0100
Subject: [PATCH] [style](trx-frontend): dim placeholder gaps in RDS PS

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/app.js       | 24 +++++++++++++++++--
 .../trx-frontend-http/assets/web/style.css    |  3 +++
 2 files changed, 25 insertions(+), 2 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 1aed96c..6573dc9 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
@@ -4445,6 +4445,20 @@ function formatOverlayPs(ps) {
     .replaceAll(" ", "_");
 }
 
+function formatPsHtml(ps) {
+  const clipped = String(ps ?? "").slice(0, 8);
+  let html = "";
+  for (let i = 0; i < 8; i += 1) {
+    const ch = clipped[i];
+    if (ch == null || ch === " ") {
+      html += `<span class="rds-ps-gap">_</span>`;
+    } else {
+      html += escapeMapHtml(ch);
+    }
+  }
+  return html;
+}
+
 function formatOverlayPi(pi) {
   return pi != null
     ? `PI 0x${pi.toString(16).toUpperCase().padStart(4, "0")}`
@@ -4611,7 +4625,7 @@ function updateRdsPsOverlay(rds) {
         `${overlayTrafficFlagHtml("TA", rds?.traffic_announcement)}` +
         `</span>`;
       rdsPsOverlay.innerHTML =
-        `<span class="${mainClass}">${escapeMapHtml(mainText)}</span>` +
+        `<span class="${mainClass}">${hasPs ? formatPsHtml(ps) : escapeMapHtml(mainText)}</span>` +
         `<span class="rds-ps-meta">` +
         `<span class="rds-ps-meta-text">${escapeMapHtml(metaText)}</span>` +
         `${trafficFlags}` +
@@ -4678,7 +4692,13 @@ function updateRdsPsOverlay(rds) {
   statusEl.textContent = "Decoding";
   statusEl.className = "rds-value rds-decoding";
   piEl.textContent = rds.pi != null ? `0x${rds.pi.toString(16).toUpperCase().padStart(4, "0")}` : "--";
-  psEl.textContent = rds.program_service ?? "--";
+  if (psEl) {
+    if (rds.program_service) {
+      psEl.innerHTML = formatPsHtml(rds.program_service);
+    } else {
+      psEl.textContent = "--";
+    }
+  }
   ptyEl.textContent = rds.pty_name ?? (rds.pty != null ? String(rds.pty) : "--");
   ptyNameEl.textContent = rds.pty != null ? String(rds.pty) : "--";
   if (ptynEl) ptynEl.textContent = rds.program_type_name_long ?? "--";
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 66d588d..7172a15 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
@@ -577,6 +577,9 @@ small { color: var(--text-muted); }
   letter-spacing: 0.08em;
   white-space: pre;
 }
+.rds-ps-gap {
+  color: color-mix(in srgb, currentColor 34%, var(--text-muted));
+}
 .rds-ps-fallback {
   display: block;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;