[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>

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) {
+  if (update.info && update.info.model) rigName = update.info.model;
-    rigName = update.info.model;
+  if (update.server_version) serverVersion = update.server_version;
-  }
+  if (update.server_callsign) serverCallsign = update.server_callsign;
-  document.getElementById("rig-title").textContent = `${rigName} status`;
+  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");
+      const color = vfoColor(idx);
-      else btn.addEventListener("click", async () => {
+      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 {

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>

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 {