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

@@ -23,6 +23,7 @@ window.onDecoderRegistryReady = function (fn) {
       for (const fn of _decoderRegistryReadyCallbacks) fn();
       _decoderRegistryReadyCallbacks.length = 0;
       hideUnsupportedDecoderTabs();
+      refreshOperatorLayoutCapabilities();
     }
   } catch (e) {
     console.error("Failed to fetch decoder registry:", e);
@@ -333,8 +334,14 @@ function applyCapabilities(caps) {
   const txAudioBtn = document.getElementById("tx-audio-btn");
   const txVolSlider = document.getElementById("tx-vol");
   const txVolControl = txVolSlider ? txVolSlider.closest(".vol-label") : null;
-  if (txPowerCol) txPowerCol.style.display = caps.tx ? "" : "none";
+  if (txPowerCol) {
+    txPowerCol.style.display = "";
+    const label = txPowerCol.querySelector(".label span");
+    if (label) label.textContent = caps.tx ? "Transmit / Power" : "Power / Tuning";
+  }
   if (pttBtn) pttBtn.style.display = caps.tx ? "" : "none";
+  if (powerBtn) powerBtn.style.display = "";
+  if (lockBtn) lockBtn.style.display = caps.lockable ? "" : "none";
   if (txMetersRow) txMetersRow.style.display = caps.tx ? "" : "none";
   if (txAudioBtn) txAudioBtn.style.display = caps.tx ? "" : "none";
   if (txVolControl) txVolControl.style.display = caps.tx ? "" : "none";
@@ -344,7 +351,7 @@ function applyCapabilities(caps) {
 
   // TX limit row
   const txLimitRow = document.getElementById("tx-limit-row");
-  if (txLimitRow && !caps.tx_limit) txLimitRow.style.display = "none";
+  if (txLimitRow) txLimitRow.style.display = caps.tx_limit ? "" : "none";
 
   // VFO row
   const vfoRow = document.getElementById("vfo-row");
@@ -436,6 +443,7 @@ const signalSplitValueEl = document.getElementById("signal-split-value");
 const overviewPeakHoldEl = document.getElementById("overview-peak-hold");
 const themeToggleBtn = document.getElementById("theme-toggle");
 const headerRigSwitchSelect = document.getElementById("header-rig-switch-select");
+const headerRigSummary = document.getElementById("header-rig-summary");
 const headerStylePickSelect = document.getElementById("header-style-pick-select");
 const rdsPsOverlay = document.getElementById("rds-ps-overlay");
 const tabMainEl = document.getElementById("tab-main");
@@ -895,6 +903,7 @@ async function restorePreviousTuneState() {
 let lastRigIds = [];
 let lastRigDisplayNames = {};
 let lastActiveRigId = null;
+let rigSwitchInProgress = false;
 let lastCityLabel = "";
 let sseSessionId = null;
 const originalTitle = document.title;
@@ -1239,6 +1248,20 @@ function populateRigPicker(selectEl, rigIds, activeRigId, disabled) {
   selectEl.disabled = disabled;
 }
 
+function updateRigIdentitySummary(rigId, pending = false) {
+  if (!headerRigSummary) return;
+  const rig = serverRigs.find((entry) => entry?.remote === rigId);
+  if (!rig) {
+    headerRigSummary.textContent = pending ? "Switching rigs…" : "No rig details available";
+    return;
+  }
+  const hardware = [rig.manufacturer, rig.model].map(value => String(value || "").trim()).filter(Boolean).join(" ") || rig.remote;
+  const modes = Array.isArray(rig.supported_modes) ? rig.supported_modes.map(normalizeMode).filter(Boolean) : [];
+  const features = [rig.tx ? "TX" : "RX", rig.filter_controls ? "SDR filters" : null, ...modes.slice(0, 5)];
+  if (modes.length > 5) features.push(`+${modes.length - 5} modes`);
+  headerRigSummary.textContent = `${pending ? "Switching to " : ""}${hardware} · ${features.filter(Boolean).join(" · ")}`;
+}
+
 function updateRigSubtitle(activeRigId) {
   if (!rigSubtitle) return;
   const name = (activeRigId && lastRigDisplayNames[activeRigId]) || activeRigId || "--";
@@ -1275,6 +1298,8 @@ function applyRigList(activeRigId, rigIds, displayNames) {
   const disableSwitch = lastRigIds.length === 0 || !authRole || authRole === "rx";
   populateRigPicker(headerRigSwitchSelect, lastRigIds, lastActiveRigId, disableSwitch);
   updateRigSubtitle(lastActiveRigId);
+  updateRigIdentitySummary(lastActiveRigId);
+  window.trxUi?.setActiveRig(lastActiveRigId);
   if (rigListChanged) {
     if (typeof setSchedulerRig === "function") setSchedulerRig(lastActiveRigId);
     if (typeof setBackgroundDecodeRig === "function") setBackgroundDecodeRig(lastActiveRigId);
@@ -1305,10 +1330,7 @@ async function refreshRigList() {
       }
     });
     serverRigs = rigs;
-    window.trxUi?.setBroadcastLayoutAvailable(rigs.some((rig) =>
+    refreshOperatorLayoutCapabilities();
-      Array.isArray(rig?.supported_modes)
-      && rig.supported_modes.map(normalizeMode).includes("WFM")
-    ));
     serverActiveRigId = data.active_remote || null;
     applyRigList(data.active_remote, rigIds, displayNames);
     window.trx.modules.map?.syncAprsReceiverMarker();
@@ -1317,6 +1339,19 @@ async function refreshRigList() {
   }
 }
 
+function refreshOperatorLayoutCapabilities() {
+  const rigModes = serverRigs.map((rig) =>
+    Array.isArray(rig?.supported_modes) ? rig.supported_modes.map(normalizeMode).filter(Boolean) : []
+  );
+  const decoderModes = new Set(decoderRegistry.flatMap((decoder) =>
+    Array.isArray(decoder?.active_modes) ? decoder.active_modes.map(normalizeMode).filter(Boolean) : []
+  ));
+  window.trxUi?.setLayoutCapabilities({
+    broadcast: rigModes.some((modes) => modes.includes("WFM")),
+    digital: decoderModes.size > 0 && rigModes.some((modes) => modes.some((mode) => decoderModes.has(mode))),
+  });
+}
+
 function showHint(msg, duration) {
   powerHint.textContent = msg;
   if (hintTimer) clearTimeout(hintTimer);
@@ -3863,12 +3898,16 @@ function scheduleUiFrameJob(key, job) {
 
 window.trxScheduleUiFrameJob = scheduleUiFrameJob;
 
-async function postPath(path) {
+async function postPath(path, options = {}) {
+  if (rigSwitchInProgress && !options.allowDuringRigSwitch) {
+    throw new Error("Wait for the rig switch to finish");
+  }
+  const targetRigId = options.remote === undefined ? lastActiveRigId : options.remote;
   // Auto-append remote so each tab targets its own rig.
   // Skip when the caller already included remote (e.g. /select_rig).
-  if (lastActiveRigId && !path.includes("remote=")) {
+  if (targetRigId && !path.includes("remote=")) {
     const sep = path.includes("?") ? "&" : "?";
-    path = `${path}${sep}remote=${encodeURIComponent(lastActiveRigId)}`;
+    path = `${path}${sep}remote=${encodeURIComponent(targetRigId)}`;
   }
   const resp = await fetch(path, { method: "POST" });
   if (authEnabled && resp.status === 401) {
@@ -3913,36 +3952,45 @@ async function switchRigFromSelect(selectEl) {
     return;
   }
   const prevRig = lastActiveRigId;
-  lastActiveRigId = selectEl.value;
+  const nextRig = selectEl.value;
-  if (prevRig && prevRig !== lastActiveRigId) {
+  if (nextRig === prevRig || rigSwitchInProgress) return;
-    resetDecoderStateOnRigSwitch();
+  rigSwitchInProgress = true;
-  }
+  setControlPending(selectEl, true);
-  updateRigSubtitle(lastActiveRigId);
+  selectEl.closest(".header-rig-switch")?.classList.add("is-switching");
-  if (typeof setSchedulerRig === "function") setSchedulerRig(lastActiveRigId);
+  updateRigIdentitySummary(nextRig, true);
-  if (typeof setBackgroundDecodeRig === "function") setBackgroundDecodeRig(lastActiveRigId);
+  showHint(`Switching to ${lastRigDisplayNames[nextRig] || nextRig}…`);
-  if (typeof bmFetch === "function") bmFetch(document.getElementById("bm-category-filter")?.value || "");
-  window.trx.modules.map?.syncAprsReceiverMarker();
-  // Switch this session's rig and reconnect SSE to the new rig's
-  // state channel.
   try {
     const sidParam = sseSessionId ? `&session_id=${encodeURIComponent(sseSessionId)}` : "";
-    await postPath(`/select_rig?remote=${encodeURIComponent(selectEl.value)}${sidParam}`);
+    await postPath(`/select_rig?remote=${encodeURIComponent(nextRig)}${sidParam}`, { allowDuringRigSwitch: true, remote: null });
+    lastActiveRigId = nextRig;
+    resetDecoderStateOnRigSwitch();
+    updateRigSubtitle(lastActiveRigId);
+    updateRigIdentitySummary(lastActiveRigId);
+    window.trxUi?.setActiveRig(lastActiveRigId);
+    if (typeof setSchedulerRig === "function") setSchedulerRig(lastActiveRigId);
+    if (typeof setBackgroundDecodeRig === "function") setBackgroundDecodeRig(lastActiveRigId);
+    if (typeof bmFetch === "function") bmFetch(document.getElementById("bm-category-filter")?.value || "");
+    window.trx.modules.map?.syncAprsReceiverMarker();
     connect();
+    stopSpectrumStreaming();
+    startSpectrumStreaming();
+    stopMeterStreaming();
+    startMeterStreaming();
+    if (rxActive) {
+      stopRxAudio();
+      startRxAudio();
+    }
+    showHint(`Rig: ${lastRigDisplayNames[lastActiveRigId] || lastActiveRigId}`, 1500);
   } catch (err) {
     console.error("select_rig failed:", err);
+    selectEl.value = prevRig || "";
+    updateRigIdentitySummary(prevRig);
+    window.trxUi?.notify("Rig could not be switched", { kind: "error" });
+  } finally {
+    rigSwitchInProgress = false;
+    setControlPending(selectEl, false);
+    selectEl.closest(".header-rig-switch")?.classList.remove("is-switching");
   }
-  // Reconnect spectrum SSE to the new rig's spectrum channel.
-  stopSpectrumStreaming();
-  startSpectrumStreaming();
-  // Reconnect meter SSE to the new rig's meter channel.
-  stopMeterStreaming();
-  startMeterStreaming();
-  // Reconnect audio to the new rig if audio is active.
-  if (rxActive) {
-    stopRxAudio();
-    startRxAudio();
-  }
-  showHint(`Rig: ${lastActiveRigId}`, 1500);
 }
 
 if (headerRigSwitchSelect) {
@@ -4606,6 +4654,7 @@ function _initMapWhenReady() {
 }
 
 function navigateToTab(name, options = {}) {
+  window.trxUi?.closeMobileOverlays?.();
   const { updateHistory = true, replaceHistory = false } = options;
   if (authEnabled && !authRole && name !== "main") {
     showAuthGate(false);

src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html

@@ -85,6 +85,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
         <button id="header-rec-btn" class="header-bar-btn header-rec-btn" type="button" aria-label="Toggle recording" title="Toggle recording">REC</button>
         <div class="header-rig-switch">
           <select id="header-rig-switch-select" aria-label="Select active rig"></select>
+          <span id="header-rig-summary" class="header-rig-summary" aria-live="polite"></span>
         </div>
         <div class="header-style-pick">
           <select id="header-style-pick-select" aria-label="Select UI style">

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

@@ -1404,10 +1404,21 @@ small { color: var(--text-muted); }
   padding: 0.9rem 0.2rem 0;
 }
 .header-rig-switch {
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
   align-items: center;
   gap: 0.35rem;
 }
+.header-rig-summary {
+  display: block;
+  max-width: 20rem;
+  color: var(--text-muted);
+  font-size: var(--fs-xs);
+  line-height: 1.35;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .header-rig-switch select {
   min-width: 8rem;
   height: 2rem;
@@ -2937,9 +2948,10 @@ button.is-active {
 #ptt-btn.is-active { background: var(--accent-red) !important; border-color: var(--accent-red) !important; color: white !important; }
 .is-busy { cursor: progress !important; opacity: 0.68; }
 .operator-layout-picker {
-  display: inline-flex;
+  display: inline-grid;
+  grid-template-columns: auto auto;
   align-items: center;
-  height: 2rem;
+  min-height: 2rem;
   padding-left: 0.6rem;
   border: 1px solid var(--border-light);
   border-radius: var(--radius-md);
@@ -2949,7 +2961,7 @@ button.is-active {
   font-weight: 700;
   letter-spacing: 0.04em;
   text-transform: uppercase;
-  overflow: hidden;
+  overflow: visible;
 }
 .operator-layout-picker::before { content: "Layout"; }
 .operator-layout-picker select {
@@ -2967,6 +2979,17 @@ button.is-active {
 }
 .operator-layout-picker:focus-within { border-color: var(--accent-green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-green) 20%, transparent); }
 .operator-layout-picker select:focus-visible { outline: 0; }
+.operator-layout-description {
+  grid-column: 1 / -1;
+  max-width: 22rem;
+  padding: 0 0.55rem 0.35rem 0;
+  color: var(--text-muted);
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 1.35;
+  text-transform: none;
+}
 .advanced-radio-controls {
   margin-top: var(--space-3);
   border: 1px solid color-mix(in srgb, var(--border-light) 75%, transparent);
@@ -3003,6 +3026,50 @@ button.is-active {
 .advanced-radio-body { display: grid; gap: var(--space-3); padding: var(--space-3); }
 .advanced-radio-body > * { margin: 0; }
 body[data-operator-layout="digital"] .controls-col-wfm { display: none !important; }
+body[data-operator-layout="broadcast"] #tx-power-col,
+body[data-operator-layout="broadcast"] #tx-meters,
+body[data-operator-layout="broadcast"] #tx-limit-row,
+body[data-operator-layout="broadcast"] #vfo-row,
+body[data-operator-layout="broadcast"] #sam-controls-col,
+body[data-operator-layout="broadcast"] .advanced-radio-controls {
+  display: none !important;
+}
+body[data-operator-layout="broadcast"] .controls-row {
+  grid-template-columns: minmax(8rem, 0.65fr) auto minmax(20rem, 2fr);
+}
+body[data-operator-layout="broadcast"] #wfm-controls-col,
+body[data-operator-layout="broadcast"] #audio-row,
+body[data-operator-layout="broadcast"] #spectrum-bw-row {
+  border-color: color-mix(in srgb, var(--accent-green) 42%, var(--border-light));
+  background: color-mix(in srgb, var(--accent-green) 7%, transparent);
+}
+body[data-operator-layout="broadcast"] #wfm-controls-col {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid color-mix(in srgb, var(--accent-green) 42%, var(--border-light));
+  border-radius: var(--radius-md);
+}
+body[data-operator-layout="broadcast"] #audio-row {
+  padding: var(--space-3);
+  border: 1px solid color-mix(in srgb, var(--accent-green) 42%, var(--border-light));
+  border-radius: var(--radius-md);
+}
+body[data-operator-layout="broadcast"] #spectrum-bw-row {
+  padding: var(--space-2);
+  border: 1px solid color-mix(in srgb, var(--accent-green) 42%, var(--border-light));
+  border-radius: var(--radius-sm);
+}
+body[data-operator-layout="broadcast"] #ais-bar-overlay,
+body[data-operator-layout="broadcast"] #vdes-bar-overlay,
+body[data-operator-layout="broadcast"] #ft8-bar-overlay,
+body[data-operator-layout="broadcast"] #aprs-bar-overlay,
+body[data-operator-layout="broadcast"] #hf-aprs-bar-overlay,
+body[data-operator-layout="broadcast"] #cw-bar-overlay {
+  display: none !important;
+}
+@media (max-width: 760px) {
+  body[data-operator-layout="broadcast"] .controls-row { grid-template-columns: 1fr auto; }
+  body[data-operator-layout="broadcast"] #wfm-controls-col { grid-column: 1 / -1; }
+}
 .mobile-more-btn, .mobile-more-menu, .decoder-tab-select { display: none; }
 .mobile-more-menu {
   position: fixed;

src/trx-client/trx-frontend/trx-frontend-http/assets/web/tests/ui-core.test.mjs

@@ -0,0 +1,144 @@
+// SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
+//
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import vm from "node:vm";
+
+class ClassList {
+  constructor() { this.values = new Set(); }
+  add(...names) { names.forEach(name => this.values.add(name)); }
+  remove(...names) { names.forEach(name => this.values.delete(name)); }
+  contains(name) { return this.values.has(name); }
+  toggle(name, force) {
+    const enabled = force === undefined ? !this.contains(name) : force;
+    if (enabled) this.add(name); else this.remove(name);
+    return enabled;
+  }
+}
+
+class Element {
+  constructor(tagName, document) {
+    this.tagName = tagName.toUpperCase();
+    this.ownerDocument = document;
+    this.children = [];
+    this.dataset = {};
+    this.attributes = new Map();
+    this.classList = new ClassList();
+    this.listeners = new Map();
+    this.style = {};
+    this.options = [];
+    this.value = "";
+    this.textContent = "";
+  }
+  set id(value) { this._id = value; if (value) this.ownerDocument.elements.set(value, this); }
+  get id() { return this._id || ""; }
+  set className(value) { this.classList = new ClassList(); value.split(/\s+/).filter(Boolean).forEach(name => this.classList.add(name)); }
+  set innerHTML(value) {
+    this._innerHTML = value;
+    if (value.includes('value="confirm"')) {
+      const title = new Element("h2", this.ownerDocument); title.id = "ui-confirm-title";
+      const message = new Element("p", this.ownerDocument); message.id = "ui-confirm-message";
+      const confirm = new Element("button", this.ownerDocument); confirm.value = "confirm";
+      this.append(title, message, confirm);
+      this._confirmButton = confirm;
+    }
+  }
+  get innerHTML() { return this._innerHTML || ""; }
+  appendChild(child) { this.children.push(child); child.parentElement = this; return child; }
+  append(...children) { children.forEach(child => this.appendChild(child)); }
+  insertBefore(child) { return this.appendChild(child); }
+  remove() { if (this.parentElement) this.parentElement.children = this.parentElement.children.filter(child => child !== this); }
+  replaceChildren(...children) { this.children = []; this.options = []; this.append(...children); }
+  setAttribute(name, value) { this.attributes.set(name, String(value)); }
+  getAttribute(name) { return this.attributes.get(name); }
+  addEventListener(type, listener) { this.listeners.set(type, listener); }
+  dispatch(type, event = {}) { this.listeners.get(type)?.({ target: this, preventDefault() {}, ...event }); }
+  querySelector(selector) {
+    if (selector === '[value="confirm"]') return this._confirmButton || null;
+    return null;
+  }
+  querySelectorAll(selector) {
+    if (selector === ".tab[data-tab]") return this.children.filter(child => child.dataset.tab);
+    if (selector === ".sub-tab[data-subtab]") return this.children.filter(child => child.dataset.subtab);
+    if (selector === '[role="tab"]') return this.children.filter(child => child.getAttribute("role") === "tab");
+    return [];
+  }
+  add(option) { this.options.push(option); if (!this.value) this.value = option.value; }
+  showModal() { this.open = true; }
+  close(value) { this.returnValue = value; this.open = false; this.dispatch("close"); }
+  focus() { this.focused = true; }
+  click() { this.clicked = true; }
+}
+
+class DocumentFixture {
+  constructor() {
+    this.readyState = "loading";
+    this.elements = new Map();
+    this.body = new Element("body", this);
+  }
+  createElement(tagName) { return new Element(tagName, this); }
+  getElementById(id) { return this.elements.get(id) || null; }
+  querySelector() { return null; }
+  querySelectorAll() { return []; }
+  addEventListener() {}
+}
+
+const document = new DocumentFixture();
+const storage = new Map();
+const localStorage = {
+  getItem(key) { return storage.has(key) ? storage.get(key) : null; },
+  setItem(key, value) { storage.set(key, String(value)); },
+};
+const window = { document, localStorage, addEventListener() {} };
+const context = vm.createContext({
+  window, document, localStorage,
+  Option: class Option { constructor(label, value) { this.label = label; this.value = value; } },
+  MutationObserver: class MutationObserver { observe() {} },
+  requestAnimationFrame(callback) { callback(); },
+  setTimeout() { return 1; },
+  clearTimeout() {},
+  console,
+});
+
+const source = await readFile(new URL("../ui-core.js", import.meta.url), "utf8");
+new vm.Script(source, { filename: "ui-core.js" }).runInContext(context);
+const ui = window.trxUi;
+
+const toast = ui.notify("Saved", { kind: "success" });
+assert.equal(toast.getAttribute("role"), "status");
+assert.equal(toast.classList.contains("toast-success"), true);
+assert.equal(document.getElementById("toast-region").children.length, 1);
+
+const confirmation = ui.confirm({ title: "Delete?", message: "Permanent", confirmLabel: "Delete" });
+const dialog = document.getElementById("ui-confirm-dialog");
+assert.equal(dialog.open, true);
+assert.equal(document.getElementById("ui-confirm-title").textContent, "Delete?");
+dialog.close("confirm");
+assert.equal(await confirmation, true);
+
+const tabBar = new Element("div", document);
+const firstTab = new Element("button", document); firstTab.dataset.tab = "main"; firstTab.classList.add("active");
+const secondTab = new Element("button", document); secondTab.dataset.tab = "map";
+tabBar.append(firstTab, secondTab);
+const mainPanel = new Element("section", document); mainPanel.id = "tab-main";
+const mapPanel = new Element("section", document); mapPanel.id = "tab-map";
+ui.prepareTabList(tabBar, "primary");
+assert.equal(firstTab.getAttribute("aria-selected"), "true");
+tabBar.dispatch("keydown", { target: firstTab, key: "ArrowRight" });
+assert.equal(secondTab.focused, true);
+assert.equal(secondTab.clicked, true);
+
+localStorage.setItem("trxOperatorLayout:rig-a", "broadcast");
+ui.setActiveRig("rig-a");
+assert.equal(document.body.dataset.operatorLayout, "compact");
+ui.setLayoutCapabilities({ broadcast: true });
+ui.setActiveRig("rig-a");
+assert.equal(document.body.dataset.operatorLayout, "broadcast");
+ui.setActiveRig("rig-b");
+ui.applyLayout("digital");
+assert.equal(document.body.dataset.operatorLayout, "compact");
+assert.equal(localStorage.getItem("trxOperatorLayout:rig-b"), "compact");
+
+console.log("ui-core component tests passed");

src/trx-client/trx-frontend/trx-frontend-http/assets/web/ui-core.js

@@ -126,15 +126,35 @@
   };
 
   const layouts = {
-    compact: { label: "Compact", advanced: false, preferredTab: "main" },
+    compact: { label: "Compact", description: "Essential tuning and audio controls", advanced: false, preferredTab: "main" },
-    broadcast: { label: "Broadcast", advanced: false, preferredTab: "main", capability: "broadcast" },
+    broadcast: { label: "Broadcast", description: "WFM, RDS, stereo and interference monitoring", unavailable: "Broadcast requires an enumerated WFM-capable receiver", advanced: false, preferredTab: "main", capability: "broadcast" },
-    digital: { label: "Digital", advanced: false, preferredTab: "digital-modes" },
+    digital: { label: "Digital", description: "Decoder status, messages and background decoding", unavailable: "Digital requires a compatible rig mode and an available decoder", advanced: false, preferredTab: "digital-modes", capability: "digital" },
-    full: { label: "Full controls", advanced: true, preferredTab: "main" },
+    full: { label: "Full controls", description: "Every control supported by the selected rig", advanced: true, preferredTab: "main" },
   };
-  let hasBroadcastRig = false;
+  const layoutCapabilities = { broadcast: false, digital: false };
+  let activeRigId = null;
 
-  function broadcastLayoutAvailable() {
+  function layoutStorageKey() {
-    return hasBroadcastRig;
+    return activeRigId ? `trxOperatorLayout:${activeRigId}` : "trxOperatorLayout";
+  }
+
+  function savedLayoutName() {
+    return localStorage.getItem(layoutStorageKey()) || localStorage.getItem("trxOperatorLayout") || "compact";
+  }
+
+  function layoutAvailable(layout) {
+    return !layout.capability || layoutCapabilities[layout.capability] === true;
+  }
+
+  function unavailableLayoutMessage() {
+    const unavailable = Object.values(layouts).filter(layout => !layoutAvailable(layout) && layout.unavailable);
+    return unavailable.length ? `Unavailable: ${unavailable.map(layout => layout.unavailable).join("; ")}.` : "";
+  }
+
+  function updateLayoutDescription(layout) {
+    const description = document.getElementById("operator-layout-description");
+    if (!description) return;
+    description.textContent = [layout.description, unavailableLayoutMessage()].filter(Boolean).join(" · ");
   }
 
   function refreshLayoutOptions() {
@@ -143,26 +163,46 @@
     const previous = select.value || document.body.dataset.operatorLayout || "compact";
     select.replaceChildren();
     Object.entries(layouts).forEach(([value, layout]) => {
-      if (layout.capability === "broadcast" && !broadcastLayoutAvailable()) return;
+      if (!layoutAvailable(layout)) return;
       select.add(new Option(layout.label, value));
     });
     const available = Array.from(select.options).some(option => option.value === previous);
     select.value = available ? previous : "compact";
-    if (!available && previous === "broadcast") api.applyLayout("compact");
+    if (!available && previous !== "compact") api.applyLayout("compact", { persist: false });
+    select.title = unavailableLayoutMessage();
+    updateLayoutDescription(layouts[select.value] || layouts.compact);
   }
 
-  api.setBroadcastLayoutAvailable = function setBroadcastLayoutAvailable(available) {
+  api.setLayoutCapabilities = function setLayoutCapabilities(capabilities = {}) {
-    hasBroadcastRig = Boolean(available);
+    Object.keys(layoutCapabilities).forEach((name) => {
+      if (name in capabilities) layoutCapabilities[name] = Boolean(capabilities[name]);
+    });
     refreshLayoutOptions();
+    const select = document.getElementById("operator-layout-select");
+    const saved = savedLayoutName();
+    if (select && Array.from(select.options).some(option => option.value === saved)) {
+      select.value = saved;
+      api.applyLayout(saved, { persist: false });
+    }
+  };
+
+  api.setActiveRig = function setActiveRig(rigId) {
+    activeRigId = typeof rigId === "string" && rigId ? rigId : null;
+    const saved = savedLayoutName();
+    const select = document.getElementById("operator-layout-select");
+    if (select) select.value = Array.from(select.options).some(option => option.value === saved) ? saved : "compact";
+    api.applyLayout(select?.value || saved, { persist: false });
   };
 
   api.applyLayout = function applyLayout(name, options = {}) {
-    const permittedName = name === "broadcast" && !broadcastLayoutAvailable() ? "compact" : name;
+    const requestedLayout = layouts[name];
-    const layout = layouts[permittedName] || layouts.compact;
+    const permittedName = requestedLayout && layoutAvailable(requestedLayout) ? name : "compact";
+    const layout = layouts[permittedName];
     document.body.dataset.operatorLayout = permittedName in layouts ? permittedName : "compact";
-    localStorage.setItem("trxOperatorLayout", document.body.dataset.operatorLayout);
+    if (options.persist !== false) localStorage.setItem(layoutStorageKey(), document.body.dataset.operatorLayout);
     const details = document.getElementById("advanced-radio-controls");
     if (details) details.open = layout.advanced;
+    updateLayoutDescription(layout);
     if (options.navigate && typeof window.navigateToTab === "function") {
       window.navigateToTab(layout.preferredTab);
     }
@@ -173,9 +213,9 @@
     if (actions && !document.getElementById("operator-layout-select")) {
       const label = document.createElement("label");
       label.className = "operator-layout-picker";
-      label.innerHTML = '<span class="visually-hidden">Operator layout</span><select id="operator-layout-select" aria-label="Operator layout"></select>';
+      label.innerHTML = '<span class="visually-hidden">Operator layout</span><select id="operator-layout-select" aria-label="Operator layout" aria-describedby="operator-layout-description"></select><span id="operator-layout-description" class="operator-layout-description"></span>';
       const select = label.querySelector("select");
-      const savedLayout = localStorage.getItem("trxOperatorLayout") || "compact";
+      const savedLayout = savedLayoutName();
       actions.insertBefore(label, actions.firstChild);
       select.value = savedLayout;
       refreshLayoutOptions();
@@ -196,7 +236,7 @@
         if (element) body.appendChild(element);
       });
       tray.appendChild(details);
-      api.applyLayout(localStorage.getItem("trxOperatorLayout") || "compact");
+      api.applyLayout(savedLayoutName(), { persist: false });
     }
   }
 
@@ -214,6 +254,14 @@
     menu.id = "mobile-more-menu";
     menu.className = "mobile-more-menu";
     menu.setAttribute("role", "menu");
+    more.setAttribute("aria-controls", menu.id);
+    const closeMore = (restoreFocus = false) => {
+      if (!menu.classList.contains("is-open")) return;
+      menu.classList.remove("is-open");
+      more.setAttribute("aria-expanded", "false");
+      if (restoreFocus) more.focus();
+    };
+    api.closeMobileOverlays = closeMore;
     ["statistics", "recorder", "settings", "about"].forEach((tabName) => {
       const source = nav.querySelector(`[data-tab="${tabName}"]`);
       if (!source) return;
@@ -224,15 +272,23 @@
       item.textContent = source.textContent.trim();
       item.addEventListener("click", () => {
         if (typeof window.navigateToTab === "function") window.navigateToTab(tabName);
-        menu.classList.remove("is-open");
+        closeMore();
-        more.setAttribute("aria-expanded", "false");
       });
       menu.appendChild(item);
     });
     more.addEventListener("click", () => {
       const open = menu.classList.toggle("is-open");
       more.setAttribute("aria-expanded", String(open));
+      if (open) menu.querySelector('[role="menuitem"]')?.focus();
     });
+    document.addEventListener("click", (event) => {
+      if (!menu.contains(event.target) && !more.contains(event.target)) closeMore();
+    });
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") closeMore(true);
+    });
+    window.addEventListener("resize", () => closeMore());
+    window.addEventListener("popstate", () => closeMore());
     nav.append(more, menu);
   }
 

src/trx-client/trx-frontend/trx-frontend-http/src/api/rig.rs

@@ -389,6 +389,8 @@ struct RigListItem {
     manufacturer: String,
     model: String,
     supported_modes: Vec<trx_core::RigMode>,
+    tx: bool,
+    filter_controls: bool,
     initialized: bool,
     #[serde(skip_serializing_if = "Option::is_none")]
     latitude: Option<f64>,
@@ -424,6 +426,8 @@ fn map_rig_entry(entry: &RemoteRigEntry) -> RigListItem {
         manufacturer: entry.state.info.manufacturer.clone(),
         model: entry.state.info.model.clone(),
         supported_modes: entry.state.info.capabilities.supported_modes.clone(),
+        tx: entry.state.info.capabilities.tx,
+        filter_controls: entry.state.info.capabilities.filter_controls,
         initialized: entry.state.initialized,
         latitude: entry.state.server_latitude,
         longitude: entry.state.server_longitude,