From b5f40fc58a51aae4e459f97e55ca2b9410d456ea Mon Sep 17 00:00:00 2001
From: Stanislaw Grams <stanislawgrams@gmail.com>
Date: Sun, 8 Feb 2026 14:44:45 +0100
Subject: [PATCH] [feat](trx-frontend-http): color VFOs and rework header title

Assign green to VFO A, yellow to VFO B, and deterministic hues
to additional VFOs. The active VFO color is also applied to the
main frequency display. Rework the header title to show
"trx-rs <version> @ <callsign>'s <rig>" instead of "<rig> status".

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>
---
 .../trx-frontend-http/assets/web/app.js       | 34 +++++++++++++++----
 .../trx-frontend-http/assets/web/index.html   |  2 +-
 .../trx-frontend-http/assets/web/style.css    |  1 -
 3 files changed, 29 insertions(+), 8 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 6247c80..b66e7da 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
@@ -33,6 +33,13 @@ let sigMeasuring = false;
 let sigSamples = [];
 let lastFreqHz = null;
 let jogStep = 1000; // default 1 kHz
+const VFO_COLORS = ["var(--accent-green)", "var(--accent-yellow)"];
+function vfoColor(idx) {
+  if (idx < VFO_COLORS.length) return VFO_COLORS[idx];
+  // Deterministic pseudo-random hue for extra VFOs
+  const hue = ((idx * 137) % 360);
+  return `hsl(${hue}, 70%, 55%)`;
+}
 let jogAngle = 0;
 let lastClientCount = null;
 let lastLocked = false;
@@ -143,12 +150,23 @@ function setDisabled(disabled) {
   });
 }
 
+let serverVersion = null;
+let serverCallsign = null;
+
+function updateTitle() {
+  let title = "trx-rs";
+  if (serverVersion) title += ` v${serverVersion}`;
+  if (serverCallsign) title += ` @ ${serverCallsign}'s`;
+  title += ` ${rigName}`;
+  document.getElementById("rig-title").textContent = title;
+}
+
 function render(update) {
   if (!update) return;
-  if (update.info && update.info.model) {
-    rigName = update.info.model;
-  }
-  document.getElementById("rig-title").textContent = `${rigName} status`;
+  if (update.info && update.info.model) rigName = update.info.model;
+  if (update.server_version) serverVersion = update.server_version;
+  if (update.server_callsign) serverCallsign = update.server_callsign;
+  updateTitle();
 
   initialized = !!update.initialized;
   if (!initialized) {
@@ -237,8 +255,12 @@ function render(update) {
       const btn = document.createElement("button");
       btn.type = "button";
       btn.textContent = label;
-      if (activeIdx === idx) btn.classList.add("active");
-      else btn.addEventListener("click", async () => {
+      const color = vfoColor(idx);
+      if (activeIdx === idx) {
+        btn.classList.add("active");
+        btn.style.color = color;
+        freqEl.style.color = color;
+      } else btn.addEventListener("click", async () => {
         btn.disabled = true;
         showHint("Toggling VFO…");
         try {
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 c532fd6..cb548e0 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
@@ -11,7 +11,7 @@
   <div class="card" id="card">
     <div class="header">
       <div>
-        <div class="title"><span id="rig-title">Rig status</span></div>
+        <div class="title"><span id="rig-title">trx-rs</span></div>
         <div class="subtitle" id="server-subtitle"></div>
         <div class="subtitle">{pkg} v{ver}</div>
       </div>
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 c2d5d1b..fc4ae09 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
@@ -119,7 +119,6 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
 .vfo-picker button:last-child { border-right: none; }
 .vfo-picker button.active {
   background: var(--btn-bg);
-  color: var(--accent-green);
   font-weight: 600;
 }
 .signal-measure {