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

@@ -1317,6 +1317,9 @@ function showHint(msg, duration) {
   powerHint.textContent = msg;
   if (hintTimer) clearTimeout(hintTimer);
   if (duration) hintTimer = setTimeout(() => { powerHint.textContent = readyText(); }, duration);
+  if (/failed|missing|unavailable|unknown|lost|required/i.test(msg)) {
+    window.trxUi?.notify(msg, { kind: "error" });
+  }
 }
 let supportedModes = [];
 let supportedBands = [];
@@ -2831,7 +2834,7 @@ function showUnsupportedFreqPopup(hz) {
   const now = Date.now();
   if (now - lastUnsupportedFreqPopupAt < 1200) return;
   lastUnsupportedFreqPopupAt = now;
-  window.alert(message);
+  window.trxUi?.notify(message.replaceAll("\n", " "), { kind: "error", duration: 7000 });
 }
 
 // Convert dBm (wire format) to S-units (S1=-121dBm, S9=-73dBm, 6dB/S-unit).
@@ -3429,7 +3432,11 @@ function render(update) {
   if (update.status && typeof update.status.tx_en === "boolean" && update.status.tx_en !== prevRenderData.txEn) {
     prevRenderData.txEn = update.status.tx_en;
     lastTxEn = update.status.tx_en;
-    pttBtn.textContent = update.status.tx_en ? "PTT On" : "PTT Off";
+    window.trxUi?.setButtonState(pttBtn, {
+      active: update.status.tx_en,
+      activeLabel: "Stop TX",
+      inactiveLabel: "Start TX",
+    });
     if (update.status.tx_en) {
       pttBtn.style.background = "var(--accent-red)";
       pttBtn.style.borderColor = "var(--accent-red)";
@@ -3538,11 +3545,15 @@ function render(update) {
     bandLabel.textContent = typeof update.band === "string" ? update.band : "--";
   }
   if (typeof update.enabled === "boolean") {
-    powerBtn.disabled = false;
-    powerBtn.textContent = update.enabled ? "Power Off" : "Power On";
+    window.trxUi?.setButtonState(powerBtn, {
+      active: update.enabled,
+      activeLabel: "Power Off",
+      inactiveLabel: "Power On",
+    });
   } else {
     powerBtn.disabled = true;
-    powerBtn.textContent = "Toggle Power";
+    powerBtn.textContent = "Power unavailable";
+    powerBtn.setAttribute("aria-pressed", "false");
     powerHint.textContent = "State unknown";
   }
   lastControl = update.enabled;
@@ -3657,7 +3668,11 @@ function render(update) {
   }
   powerHint.textContent = readyText();
   lastLocked = update.status && update.status.lock === true;
-  lockBtn.textContent = lastLocked ? "Unlock" : "Lock";
+  window.trxUi?.setButtonState(lockBtn, {
+    active: lastLocked,
+    activeLabel: "Unlock Tuning",
+    inactiveLabel: "Lock Tuning",
+  });
 
   const tx = update.status && update.status.tx ? update.status.tx : null;
   txMeters.style.display = lastHasTx ? "" : "none";
@@ -3930,8 +3945,15 @@ if (headerRigSwitchSelect) {
   headerRigSwitchSelect.addEventListener("change", () => { switchRigFromSelect(headerRigSwitchSelect); });
 }
 
+function setControlPending(control, pending) {
+  if (!control) return;
+  control.disabled = pending;
+  control.classList.toggle("is-busy", pending);
+  control.setAttribute("aria-busy", String(pending));
+}
+
 powerBtn.addEventListener("click", async () => {
-  powerBtn.disabled = true;
+  setControlPending(powerBtn, true);
   showHint("Sending...");
   try {
     await postPath("/toggle_power");
@@ -3940,12 +3962,12 @@ powerBtn.addEventListener("click", async () => {
     showHint("Toggle failed", 2000);
     console.error(err);
   } finally {
-    powerBtn.disabled = false;
+    setControlPending(powerBtn, false);
   }
 });
 
 pttBtn.addEventListener("click", async () => {
-  pttBtn.disabled = true;
+  setControlPending(pttBtn, true);
   showHint("Toggling PTT…");
   try {
     const desired = lastTxEn ? "false" : "true";
@@ -3955,7 +3977,7 @@ pttBtn.addEventListener("click", async () => {
     showHint("PTT toggle failed", 2000);
     console.error(err);
   } finally {
-    pttBtn.disabled = false;
+    setControlPending(pttBtn, false);
   }
 });
 
@@ -3988,7 +4010,7 @@ async function applyCenterFreqFromInput() {
     return;
   }
   centerFreqDirty = false;
-  centerFreqEl.disabled = true;
+  setControlPending(centerFreqEl, true);
   showHint("Setting central frequency…");
   try {
     await postPath(`/set_center_freq?hz=${parsed}`);
@@ -3997,7 +4019,7 @@ async function applyCenterFreqFromInput() {
     showHint("Set central freq failed", 2000);
     console.error(err);
   } finally {
-    centerFreqEl.disabled = false;
+    setControlPending(centerFreqEl, false);
   }
 }
 
@@ -4198,7 +4220,7 @@ async function applyModeFromPicker() {
     return;
   }
   updateWfmControls();
-  modeEl.disabled = true;
+  setControlPending(modeEl, true);
   showHint("Setting mode…");
   try {
     if (typeof vchanInterceptMode === "function" && await vchanInterceptMode(mode)) {
@@ -4216,7 +4238,7 @@ async function applyModeFromPicker() {
     showHint("Set mode failed", 2000);
     console.error(err);
   } finally {
-    modeEl.disabled = false;
+    setControlPending(modeEl, false);
   }
 }
 
@@ -4235,7 +4257,7 @@ txLimitBtn.addEventListener("click", async () => {
     showHint("Limit missing", 1500);
     return;
   }
-  txLimitBtn.disabled = true;
+  setControlPending(txLimitBtn, true);
   showHint("Setting TX limit…");
   try {
     await postPath(`/set_tx_limit?limit=${encodeURIComponent(limit)}`);
@@ -4244,22 +4266,22 @@ txLimitBtn.addEventListener("click", async () => {
     showHint("TX limit failed", 2000);
     console.error(err);
   } finally {
-    txLimitBtn.disabled = false;
+    setControlPending(txLimitBtn, false);
   }
 });
 
 lockBtn.addEventListener("click", async () => {
-  lockBtn.disabled = true;
+  setControlPending(lockBtn, true);
   showHint("Toggling lock…");
   try {
-    const nextLock = lockBtn.textContent === "Lock";
+    const nextLock = !lastLocked;
     await postPath(nextLock ? "/lock" : "/unlock");
     showHint("Lock toggled", 1500);
   } catch (err) {
     showHint("Lock toggle failed", 2000);
     console.error(err);
   } finally {
-    lockBtn.disabled = false;
+    setControlPending(lockBtn, false);
   }
 });
 
@@ -4326,7 +4348,8 @@ async function applyBwDefaultForMode(mode, sendToServer) {
     scheduleSpectrumDraw();
   }
   if (sendToServer) {
-    try { await postPath(`/set_bandwidth?hz=${def}`); } catch (_) {}
+    try { await postPath(`/set_bandwidth?hz=${def}`); }
+    catch (error) { window.trxUi?.notify("Default bandwidth could not be applied", { kind: "error", action: { label: "Retry", run: () => applyBwDefaultForMode(mode, true) } }); }
   }
 }
 
@@ -4353,7 +4376,9 @@ async function applyBandwidthFromInput() {
     if (Number.isFinite(lastFreqHz)) {
       await ensureTunedBandwidthCoverage(lastFreqHz);
     }
-  } catch (_) {}
+  } catch (error) {
+    window.trxUi?.notify("Bandwidth could not be changed", { kind: "error", action: { label: "Retry", run: applyBandwidthFromInput } });
+  }
 }
 
 function estimateOccupiedBandwidth(data, centerHz, interference = {}) {
@@ -4471,13 +4496,24 @@ async function applyAutoBandwidth() {
   if (lastSpectrumData) {
     scheduleSpectrumDraw();
   }
+  const mode = (modeEl?.value || "").toUpperCase();
+  let reason = "measured occupied spectrum";
+  if (mode === "WFM") {
+    if (estimated === 60_000 && lastWfmAci >= 20) reason = `high adjacent-channel interference (${Math.round(lastWfmAci)}% ACI)`;
+    else if (estimated === 60_000) reason = "weak-signal noise rejection";
+    else if (lastWfmAci >= lastWfmCci && lastWfmAci >= 10) reason = `${Math.round(lastWfmAci)}% ACI cap`;
+    else if (lastWfmCci >= 10) reason = `${Math.round(lastWfmCci)}% CCI confidence cap`;
+  }
+  window.trxUi?.notify(`Auto BW: ${formatBwLabel(estimated)} — ${reason}`, { kind: "success", duration: 5000 });
   try {
     if (typeof vchanInterceptBandwidth === "function" && await vchanInterceptBandwidth(estimated)) return;
     await postPath(`/set_bandwidth?hz=${estimated}`);
     if (Number.isFinite(lastFreqHz)) {
       await ensureTunedBandwidthCoverage(lastFreqHz);
     }
-  } catch (_) {}
+  } catch (error) {
+    window.trxUi?.notify("Automatic bandwidth could not be applied", { kind: "error", action: { label: "Retry", run: applyAutoBandwidth } });
+  }
 }
 
 if (spectrumBwInput) {
@@ -4576,6 +4612,7 @@ function navigateToTab(name, options = {}) {
   _activeTab = name;
   document.querySelectorAll(".tab-bar .tab").forEach((t) => t.classList.remove("active"));
   btn.classList.add("active");
+  window.trxUi?.syncSelectedTab(document.querySelector(".tab-bar-nav"), btn);
   document.querySelectorAll(".tab-panel").forEach((p) => p.style.display = "none");
   const panel = document.getElementById(`tab-${name}`);
   panel.style.display = "";
@@ -4604,6 +4641,7 @@ function navigateToTab(name, options = {}) {
     refreshRecorderStatus();
   }
 }
+window.navigateToTab = navigateToTab;
 
 document.querySelector(".tab-bar").addEventListener("click", (e) => {
   const btn = e.target.closest(".tab[data-tab]");
@@ -4762,7 +4800,7 @@ if (headerAuthBtn) {
   headerAuthBtn.addEventListener("click", async () => {
     if (authRole) {
       // Logged in - show logout confirmation
-      if (confirm("Are you sure you want to logout?")) {
+      if (await window.trxUi.confirm({ title: "Log out?", message: "Audio and control access for this browser session will end.", confirmLabel: "Log out", danger: false })) {
         await authLogout();
       }
     } else {
@@ -4963,11 +5001,15 @@ function latLonToMaidenhead(lat, lon) {
 function _wireSubTabBar(bar) {
   if (bar._subtabWired) return;
   bar._subtabWired = true;
+  window.trxUi?.prepareTabList(bar, "secondary");
   bar.addEventListener("click", (e) => {
     const btn = e.target.closest(".sub-tab[data-subtab]");
     if (!btn) return;
     bar.querySelectorAll(".sub-tab").forEach((t) => t.classList.remove("active"));
     btn.classList.add("active");
+    window.trxUi?.syncSelectedTab(bar, btn);
+    const decoderPicker = document.getElementById("decoder-tab-select");
+    if (decoderPicker && btn.closest("#tab-digital-modes")) decoderPicker.value = btn.dataset.subtab;
     const parent = bar.parentElement;
     parent.querySelectorAll(".sub-tab-panel").forEach((p) => p.style.display = "none");
     const nextPanel = parent.querySelector(`#subtab-${btn.dataset.subtab}`);
@@ -5458,6 +5500,7 @@ function configureRxStream(nextInfo) {
   ensureRxAudioContext(nextSampleRate);
   rxGainNode.gain.value = rxVolSlider.value / 100;
   rxActive = true;
+  window.trxUi?.setButtonState(rxAudioBtn, { active: true, activeLabel: "Stop Audio", inactiveLabel: "Play Audio" });
   setAudioLevel(0);
   rxAudioBtn.style.borderColor = "#00d17f";
   rxAudioBtn.style.color = "#00d17f";
@@ -5659,6 +5702,7 @@ function startRxAudio() {
     // If TX was active when WS closed, release PTT
     if (txActive) { stopTxAudio(); }
     rxActive = false;
+    window.trxUi?.setButtonState(rxAudioBtn, { active: false, activeLabel: "Stop Audio", inactiveLabel: "Play Audio" });
     streamInfo = null;
     updateWfmControls();
     rxAudioBtn.style.borderColor = "";
@@ -5685,6 +5729,7 @@ function startRxAudio() {
 
 function stopRxAudio() {
   rxActive = false;
+  window.trxUi?.setButtonState(rxAudioBtn, { active: false, activeLabel: "Stop Audio", inactiveLabel: "Play Audio" });
   streamInfo = null;
   if (audioWs) { audioWs.close(); audioWs = null; }
   if (audioCtx) { audioCtx.close(); audioCtx = null; }
@@ -5723,6 +5768,7 @@ function startTxAudio() {
   }).then(async (stream) => {
     txStream = stream;
     txActive = true;
+    window.trxUi?.setButtonState(txAudioBtn, { active: true, activeLabel: "Stop Transmitting", inactiveLabel: "Transmit Audio" });
     txAudioBtn.style.borderColor = "#e55353";
     txAudioBtn.style.color = "#e55353";
     audioStatus.textContent = "RX+TX";
@@ -5800,6 +5846,7 @@ function startTxAudio() {
 async function stopTxAudio() {
   if (!txActive) return;
   txActive = false;
+  window.trxUi?.setButtonState(txAudioBtn, { active: false, activeLabel: "Stop Transmitting", inactiveLabel: "Transmit Audio" });
   clearTxTimeout();
 
   // Release PTT automatically
@@ -6045,7 +6092,7 @@ function renderRecorderFiles() {
   el.querySelectorAll(".rec-delete-btn").forEach(function (btn) {
     btn.addEventListener("click", async function () {
       const name = btn.dataset.name;
-      if (!confirm("Delete recording " + name + "?")) return;
+      if (!await window.trxUi.confirm({ title: "Delete recording?", message: `${name} will be permanently removed.`, confirmLabel: "Delete" })) return;
       try {
         const resp = await fetch("/api/recorder/files/" + encodeURIComponent(name), { method: "DELETE" });
         if (!resp.ok) throw new Error("HTTP " + resp.status);
@@ -6053,6 +6100,7 @@ function renderRecorderFiles() {
         renderRecorderFiles();
       } catch (e) {
         console.error("Delete failed", e);
+        window.trxUi?.notify("Recording could not be deleted", { kind: "error" });
       }
     });
   });
@@ -6989,6 +7037,13 @@ function startSpectrumStreaming() {
       const rds = lastSpectrumData?.rds;
       lastSpectrumData = { bins, center_hz: centerHz, sample_rate: sampleRate, rds };
       window.lastSpectrumData = lastSpectrumData;
+      const spectrumSummary = document.getElementById("spectrum-text-summary");
+      if (spectrumSummary && bins.length) {
+        let peakIndex = 0;
+        for (let i = 1; i < bins.length; i += 1) if (bins[i] > bins[peakIndex]) peakIndex = i;
+        const peakHz = centerHz - sampleRate / 2 + (peakIndex / Math.max(1, bins.length - 1)) * sampleRate;
+        spectrumSummary.textContent = `Spectrum centered at ${formatFreqForHumans(centerHz)}, spanning ${formatFreqForHumans(sampleRate)}. Strongest visible bin near ${formatFreqForHumans(peakHz)} at ${bins[peakIndex]} dB.`;
+      }
       // Server confirmed a new center — clear optimistic pending value.
       if (spectrumCenterPendingHz !== null && Math.abs(centerHz - spectrumCenterPendingHz) < 1000) {
         spectrumCenterPendingHz = null;
@@ -8451,7 +8506,12 @@ if (spectrumCanvas || overviewCanvas) {
             await ensureTunedBandwidthCoverage(lastFreqHz, currentBandwidthHz);
           }
         }
-      } catch (_) {}
+      } catch (error) {
+        window.trxUi?.notify("Bandwidth could not be changed", {
+          kind: "error",
+          action: { label: "Retry", run: () => postPath(`/set_bandwidth?hz=${Math.round(currentBandwidthHz)}`) },
+        });
+      }
       _bwDragEdge = null;
       _bwDragCanvas = null;
       return;

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

@@ -43,7 +43,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
             <div class="subtitle" id="location-subtitle" style="display:none;"></div>
           </div>
         </div>
-        <div class="tab-bar-nav">
+        <div class="tab-bar-nav" aria-label="Primary navigation">
           <button class="tab active" data-tab="main">
             <svg class="tab-icon" aria-hidden="true"><use href="#icon-home"/></svg>
             <span class="tab-label">Main</span>
@@ -140,13 +140,14 @@ SPDX-License-Identifier: GPL-2.0-or-later
         <div class="spectrum-wrap">
           <div id="spectrum-bookmark-axis"></div>
           <div id="spectrum-bookmark-side-left" class="spectrum-bookmark-side spectrum-bookmark-side-left" aria-hidden="true"></div>
-          <canvas id="spectrum-canvas" tabindex="0" role="img" aria-label="Spectrum display"></canvas>
+          <canvas id="spectrum-canvas" tabindex="0" role="img" aria-label="Spectrum display" aria-describedby="spectrum-text-summary"></canvas>
+          <p id="spectrum-text-summary" class="visually-hidden">Spectrum data is waiting for the receiver.</p>
           <div id="spectrum-zoom-indicator" aria-hidden="true"></div>
           <div id="spectrum-minimap" aria-hidden="true"><div class="minimap-view"></div></div>
           <div id="spectrum-db-axis" aria-hidden="true"></div>
           <div id="spectrum-bookmark-side-right" class="spectrum-bookmark-side spectrum-bookmark-side-right" aria-hidden="true"></div>
           <div id="spectrum-tooltip"></div>
-          <canvas id="spectrum-waterfall-canvas" tabindex="0" role="img" aria-label="Waterfall display" style="display:none;"></canvas>
+          <canvas id="spectrum-waterfall-canvas" tabindex="0" role="img" aria-label="Waterfall display" aria-describedby="spectrum-text-summary" style="display:none;"></canvas>
           <div id="spectrum-freq-axis">
             <button id="spectrum-center-left-btn" class="spectrum-edge-shift spectrum-edge-shift-left" type="button" aria-label="Shift spectrum center left">&lsaquo;</button>
             <button id="spectrum-center-right-btn" class="spectrum-edge-shift spectrum-edge-shift-right" type="button" aria-label="Shift spectrum center right">&rsaquo;</button>
@@ -204,12 +205,12 @@ SPDX-License-Identifier: GPL-2.0-or-later
             <div class="label"><span>Signal strength</span></div>
           </div>
           <div class="freq-field frequency-col">
-            <input class="status-input" id="freq" type="text" value="--" />
-            <div class="label"><span>Frequency</span></div>
+            <input class="status-input" id="freq" type="text" value="--" aria-describedby="freq-label" aria-label="Tuned frequency" />
+            <div class="label" id="freq-label"><span>Frequency</span></div>
           </div>
           <div class="freq-field frequency-col center-frequency-col" id="center-freq-field" style="display:none;">
-            <input class="status-input" id="center-freq" type="text" value="--" />
-            <div class="label"><span>Center Frequency</span></div>
+            <input class="status-input" id="center-freq" type="text" value="--" aria-describedby="center-freq-label" aria-label="SDR center frequency" />
+            <div class="label" id="center-freq-label"><span>Center Frequency</span></div>
           </div>
           <div class="freq-field unit-col">
             <div class="jog-step" id="jog-step">
@@ -235,7 +236,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
               <div class="controls-col label-below-col">
                 <div class="label"><span>Mode</span></div>
                 <div class="inline">
-                  <select class="status-input" id="mode"></select>
+                  <select class="status-input" id="mode" aria-label="Demodulation mode"></select>
                 </div>
               </div>
               <div class="controls-col controls-col-center">
@@ -307,9 +308,9 @@ SPDX-License-Identifier: GPL-2.0-or-later
               <div class="controls-col controls-col-power label-below-col" id="tx-power-col">
                 <div class="label"><span>Transmit / Power</span></div>
                 <div class="btn-grid">
-                  <button id="ptt-btn" type="button">Toggle PTT</button>
-                  <button id="power-btn" type="button">Toggle Power</button>
-                  <button id="lock-btn" type="button">Lock</button>
+                  <button id="ptt-btn" type="button" aria-pressed="false">Start TX</button>
+                  <button id="power-btn" type="button" aria-pressed="false">Power On</button>
+                  <button id="lock-btn" type="button" aria-pressed="false">Lock Tuning</button>
                 </div>
               </div>
             </div>
@@ -495,6 +496,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
             </label>
           </div>
           <div class="bm-form-actions">
+            <div id="bm-form-error" class="form-error" role="alert" aria-live="polite"></div>
             <button type="submit" class="bm-save-btn">Save</button>
             <button type="button" id="bm-form-cancel">Cancel</button>
           </div>
@@ -530,7 +532,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
       </div>
     </div>
     <div id="tab-digital-modes" class="tab-panel" style="display:none;">
-      <div class="sub-tab-bar">
+      <div class="sub-tab-bar" aria-label="Decoder views">
         <button class="sub-tab active" data-subtab="overview">Overview</button>
         <button class="sub-tab" data-subtab="ais">AIS</button>
         <button class="sub-tab" data-subtab="vdes">VDES</button>
@@ -1627,6 +1629,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
   <script defer src="/vendor/leaflet.js"></script>
   <script defer src="/leaflet-ais-tracksymbol.js"></script>
   <script defer src="/webgl-renderer.js"></script>
+  <script defer src="/ui-core.js"></script>
   <script defer src="/app.js"></script>
   <script>
 // Lazy plugin loader: loads plugin scripts when their tab/feature is first activated

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ais.js

@@ -382,7 +382,7 @@ window.pruneAisHistoryView = function() {
 };
 
 document.getElementById("settings-clear-ais-history")?.addEventListener("click", async () => {
-  if (!confirm("Clear all AIS decode history? This cannot be undone.")) return;
+  if (!await window.trxUi.confirm({ title: "Clear AIS history?", message: "All stored AIS messages will be permanently removed.", confirmLabel: "Clear history" })) return;
   try {
     await postPath("/clear_ais_decode");
     window.resetAisHistoryView();

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/aprs.js

@@ -442,7 +442,7 @@ window.restoreAprsHistory = function(packets) {
 };
 
 document.getElementById("settings-clear-aprs-history")?.addEventListener("click", async () => {
-  if (!confirm("Clear all APRS decode history? This cannot be undone.")) return;
+  if (!await window.trxUi.confirm({ title: "Clear APRS history?", message: "All stored APRS packets will be permanently removed.", confirmLabel: "Clear history" })) return;
   try {
     await postPath("/clear_aprs_decode");
     window.resetAprsHistoryView();

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/background-decode.js

@@ -215,10 +215,10 @@
       });
   }
 
-  function resetBackgroundDecode() {
+  async function resetBackgroundDecode() {
     const rigId = currentRigId;
     if (!rigId) return;
-    if (!confirm("Reset background decode configuration? This cannot be undone.")) return;
+    if (!await window.trxUi.confirm({ title: "Reset background decoding?", message: "The current background decode configuration will be permanently reset.", confirmLabel: "Reset" })) return;
     apiResetConfig(rigId)
       .then(function (saved) {
         currentConfig = saved;

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/bookmarks.js

@@ -331,8 +331,13 @@ async function bmSave(e) {
   const comment = document.getElementById("bm-comment").value.trim();
   const decoders = bmReadDecoders();
 
+  const formError = document.getElementById("bm-form-error");
+  if (formError) formError.textContent = "";
   if (!name || !Number.isFinite(freq_hz) || !mode) {
-    alert("Name, Frequency, and Mode are required.");
+    if (formError) formError.textContent = "Enter a name, a valid frequency, and a mode.";
+    const invalid = !name ? document.getElementById("bm-name")
+      : !Number.isFinite(freq_hz) ? document.getElementById("bm-freq") : document.getElementById("bm-mode");
+    invalid?.focus();
     return;
   }
 
@@ -373,12 +378,13 @@ async function bmSave(e) {
     await bmFetch(document.getElementById("bm-category-filter").value);
   } catch (err) {
     console.error("Failed to save bookmark:", err);
-    alert("Failed to save bookmark: " + err.message);
+    if (formError) formError.textContent = "Failed to save bookmark: " + err.message;
+    window.trxUi?.notify("Bookmark could not be saved", { kind: "error" });
   }
 }
 
 async function bmDelete(id) {
-  if (!confirm("Delete this bookmark?")) return;
+  if (!await window.trxUi.confirm({ title: "Delete bookmark?", message: "This bookmark will be permanently removed.", confirmLabel: "Delete" })) return;
   const bm = bmList.find((b) => b.id === id);
   const scope = bm ? bm.scope : undefined;
   try {
@@ -389,7 +395,7 @@ async function bmDelete(id) {
     await bmFetch(document.getElementById("bm-category-filter").value);
   } catch (err) {
     console.error("Failed to delete bookmark:", err);
-    alert("Failed to delete bookmark: " + err.message);
+    window.trxUi?.notify("Failed to delete bookmark: " + err.message, { kind: "error" });
   }
 }
 
@@ -555,7 +561,12 @@ async function bmMoveSelected() {
   const target = document.getElementById("bm-move-target")?.value;
   if (!target) return;
   const targetLabel = document.getElementById("bm-move-target")?.selectedOptions[0]?.textContent || target;
-  if (!confirm(`Move ${ids.length} bookmark${ids.length > 1 ? "s" : ""} to "${targetLabel}"?`)) return;
+  if (!await window.trxUi.confirm({
+    title: "Move selected bookmarks?",
+    message: `${ids.length} bookmark${ids.length > 1 ? "s" : ""} will move to “${targetLabel}”.`,
+    confirmLabel: "Move",
+    danger: false,
+  })) return;
   try {
     // Group selected IDs by their owning scope (skip if already in target).
     const byScope = {};
@@ -577,7 +588,7 @@ async function bmMoveSelected() {
     await bmFetch(document.getElementById("bm-category-filter").value);
   } catch (err) {
     console.error("Failed to move bookmarks:", err);
-    alert("Failed to move bookmarks: " + err.message);
+    window.trxUi?.notify("Failed to move bookmarks: " + err.message, { kind: "error" });
   }
 }
 
@@ -598,7 +609,11 @@ function bmSyncSelectAllCheckbox() {
 async function bmDeleteSelected() {
   const ids = Array.from(bmSelected);
   if (ids.length === 0) return;
-  if (!confirm(`Delete ${ids.length} selected bookmark${ids.length > 1 ? "s" : ""}?`)) return;
+  if (!await window.trxUi.confirm({
+    title: "Delete selected bookmarks?",
+    message: `${ids.length} bookmark${ids.length > 1 ? "s" : ""} will be permanently removed.`,
+    confirmLabel: "Delete",
+  })) return;
   try {
     // Group selected IDs by their owning scope.
     const byScope = {};
@@ -619,7 +634,7 @@ async function bmDeleteSelected() {
     await bmFetch(document.getElementById("bm-category-filter").value);
   } catch (err) {
     console.error("Failed to delete bookmarks:", err);
-    alert("Failed to delete bookmarks: " + err.message);
+    window.trxUi?.notify("Failed to delete bookmarks: " + err.message, { kind: "error" });
   }
 }
 

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/cw.js

@@ -364,7 +364,7 @@ window.resetCwHistoryView = function() {
 };
 
 document.getElementById("settings-clear-cw-history")?.addEventListener("click", async () => {
-  if (!confirm("Clear all CW decode history? This cannot be undone.")) return;
+  if (!await window.trxUi.confirm({ title: "Clear CW history?", message: "All stored CW decodes will be permanently removed.", confirmLabel: "Clear history" })) return;
   try {
     await postPath("/clear_cw_decode");
     window.resetCwHistoryView();

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ft2.js

@@ -190,7 +190,7 @@ ft2DecodeToggleBtn?.addEventListener("click", async () => {
 });
 
 document.getElementById("settings-clear-ft2-history")?.addEventListener("click", async () => {
-  if (!confirm("Clear all FT2 decode history? This cannot be undone.")) return;
+  if (!await window.trxUi.confirm({ title: "Clear FT2 history?", message: "All stored FT2 decodes will be permanently removed.", confirmLabel: "Clear history" })) return;
   try {
     await postPath("/clear_ft2_decode");
     window.resetFt2HistoryView();

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ft4.js

@@ -190,7 +190,7 @@ ft4DecodeToggleBtn?.addEventListener("click", async () => {
 });
 
 document.getElementById("settings-clear-ft4-history")?.addEventListener("click", async () => {
-  if (!confirm("Clear all FT4 decode history? This cannot be undone.")) return;
+  if (!await window.trxUi.confirm({ title: "Clear FT4 history?", message: "All stored FT4 decodes will be permanently removed.", confirmLabel: "Clear history" })) return;
   try {
     await postPath("/clear_ft4_decode");
     window.resetFt4HistoryView();

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ft8.js

@@ -462,7 +462,7 @@ ft8DecodeToggleBtn?.addEventListener("click", async () => {
 });
 
 document.getElementById("settings-clear-ft8-history")?.addEventListener("click", async () => {
-  if (!confirm("Clear all FT8 decode history? This cannot be undone.")) return;
+  if (!await window.trxUi.confirm({ title: "Clear FT8 history?", message: "All stored FT8 decodes will be permanently removed.", confirmLabel: "Clear history" })) return;
   try {
     await postPath("/clear_ft8_decode");
     window.resetFt8HistoryView();

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/hf-aprs.js

@@ -388,7 +388,7 @@ hfAprsDecodeToggleBtn?.addEventListener("click", async () => {
 });
 
 document.getElementById("settings-clear-hf-aprs-history")?.addEventListener("click", async () => {
-  if (!confirm("Clear all HF APRS decode history? This cannot be undone.")) return;
+  if (!await window.trxUi.confirm({ title: "Clear HF APRS history?", message: "All stored HF APRS packets will be permanently removed.", confirmLabel: "Clear history" })) return;
   try {
     await postPath("/clear_hf_aprs_decode");
     window.resetHfAprsHistoryView();

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/sat-scheduler.js

@@ -250,9 +250,9 @@
     var noradId = dom.norad ? parseInt(dom.norad.value, 10) : NaN;
     var bmId = dom.bookmark ? dom.bookmark.value : "";
 
-    if (!satellite)                    { alert("Please enter a satellite name."); return; }
-    if (isNaN(noradId) || noradId <= 0) { alert("Please enter a valid NORAD catalog number."); return; }
-    if (!bmId)                         { alert("Please select a bookmark."); return; }
+    if (!satellite) { window.trxUi?.notify("Enter a satellite name.", { kind: "error" }); document.getElementById("scheduler-sat-name")?.focus(); return; }
+    if (isNaN(noradId) || noradId <= 0) { window.trxUi?.notify("Enter a valid NORAD catalog number.", { kind: "error" }); document.getElementById("scheduler-sat-norad")?.focus(); return; }
+    if (!bmId) { window.trxUi?.notify("Select a bookmark.", { kind: "error" }); document.getElementById("scheduler-sat-bookmark")?.focus(); return; }
 
     var minEl = dom.minEl ? parseFloat(dom.minEl.value) : 5;
     var prio = dom.priority ? parseInt(dom.priority.value, 10) : 0;

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/sat.js

@@ -295,7 +295,7 @@ satDom.typeFilter?.addEventListener("change", () => renderSatHistoryTable());
 document
   .getElementById("settings-clear-sat-history")
   ?.addEventListener("click", async () => {
-    if (!confirm("Clear all satellite decode history? This cannot be undone.")) return;
+  if (!await window.trxUi.confirm({ title: "Clear satellite history?", message: "All stored satellite decodes will be permanently removed.", confirmLabel: "Clear history" })) return;
     try {
       await postPath("/clear_lrpt_decode");
       window.resetSatHistoryView();

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/scheduler.js

@@ -599,7 +599,7 @@
 
     const bmId = bmEl.value;
     if (!bmId) {
-      alert("Please select a primary bookmark.");
+      window.trxUi?.notify("Select a primary bookmark before saving.", { kind: "error" });
       return;
     }
 
@@ -887,7 +887,7 @@
       var recEl = tr.querySelector('[data-field="record"]');
       var exEl = tr.querySelector('[data-field="exclusive"]');
 
-      if (bmEl && !bmEl.value) { alert('Please select a bookmark.'); return; }
+      if (bmEl && !bmEl.value) { window.trxUi?.notify("Select a bookmark before saving.", { kind: "error" }); bmEl.focus(); return; }
 
       entry.start_min = hhmmToMin(startEl.value);
       entry.end_min = hhmmToMin(endEl.value);
@@ -1236,10 +1236,10 @@
     return el ? el.value : "";
   }
 
-  function resetScheduler() {
+  async function resetScheduler() {
     const rig = currentRigId;
     if (!rig) return;
-    if (!confirm("Reset scheduler for this rig to Disabled?")) return;
+    if (!await window.trxUi.confirm({ title: "Reset scheduler?", message: "This rig's scheduler configuration will be reset to Disabled.", confirmLabel: "Reset" })) return;
 
     apiDeleteScheduler(rig)
       .then(function () {

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/vdes.js

@@ -317,7 +317,7 @@ window.restoreVdesHistory = function(messages) {
 };
 
 document.getElementById("settings-clear-vdes-history")?.addEventListener("click", async () => {
-  if (!confirm("Clear all VDES decode history? This cannot be undone.")) return;
+  if (!await window.trxUi.confirm({ title: "Clear VDES history?", message: "All stored VDES decodes will be permanently removed.", confirmLabel: "Clear history" })) return;
   try {
     await postPath("/clear_vdes_decode");
     window.resetVdesHistoryView();

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/wspr.js

@@ -270,7 +270,7 @@ wsprDecodeToggleBtn?.addEventListener("click", async () => {
 });
 
 document.getElementById("settings-clear-wspr-history")?.addEventListener("click", async () => {
-  if (!confirm("Clear all WSPR decode history? This cannot be undone.")) return;
+  if (!await window.trxUi.confirm({ title: "Clear WSPR history?", message: "All stored WSPR decodes will be permanently removed.", confirmLabel: "Clear history" })) return;
   try {
     await postPath("/clear_wspr_decode");
     window.resetWsprHistoryView();

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

@@ -2839,6 +2839,61 @@ canvas:focus-visible, [tabindex]:focus-visible {
   outline-offset: 2px;
 }
 
+/* ── Shared interaction primitives ───────────────────────────────────── */
+.visually-hidden {
+  position: absolute !important;
+  width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+}
+.toast-region {
+  position: fixed; z-index: 120; right: 1rem; bottom: 1rem;
+  display: flex; flex-direction: column; gap: 0.55rem;
+  width: min(26rem, calc(100vw - 2rem)); pointer-events: none;
+}
+.toast {
+  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
+  padding: 0.75rem 0.85rem; border: 1px solid var(--border-light); border-radius: 8px;
+  background: color-mix(in srgb, var(--card-bg) 96%, transparent); color: var(--text);
+  box-shadow: 0 10px 28px color-mix(in srgb, #000 30%, transparent);
+  opacity: 0; transform: translateY(0.5rem); transition: opacity 140ms ease, transform 140ms ease;
+  pointer-events: auto;
+}
+.toast-visible { opacity: 1; transform: translateY(0); }
+.toast-error { border-left: 4px solid var(--accent-red); }
+.toast-success { border-left: 4px solid var(--accent-green); }
+.toast button { min-height: 2rem; padding: 0.25rem 0.55rem; }
+.ui-dialog { border: 0; padding: 0; border-radius: 10px; color: var(--text); background: transparent; }
+.ui-dialog::backdrop { background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(2px); }
+.ui-dialog-card { width: min(28rem, calc(100vw - 2rem)); padding: 1.1rem; border: 1px solid var(--border-light); border-radius: 10px; background: var(--card-bg); }
+.ui-dialog-card h2 { margin: 0 0 0.55rem; font-size: 1.05rem; }
+.ui-dialog-card p { color: var(--text-muted); line-height: 1.45; }
+.ui-dialog-actions { display: flex; justify-content: flex-end; gap: 0.55rem; margin-top: 1rem; }
+.ui-dialog-actions .danger { background: var(--accent-red); border-color: var(--accent-red); color: white; }
+.form-error { flex: 1 1 100%; min-height: 1.2em; color: var(--accent-red); font-size: 0.82rem; }
+button.is-active { border-color: var(--accent-green); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-green) 40%, transparent); }
+#ptt-btn.is-active { background: var(--accent-red) !important; border-color: var(--accent-red) !important; color: white !important; }
+button.is-busy { cursor: progress; opacity: 0.72; }
+.operator-layout-picker select { min-height: 2rem; max-width: 8.5rem; border: 1px solid var(--border-light); border-radius: 6px; background: var(--input-bg); color: var(--text); }
+.advanced-radio-controls { margin-top: 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--input-bg) 55%, transparent); }
+.advanced-radio-controls summary { cursor: pointer; padding: 0.65rem 0.75rem; color: var(--text-heading); font-weight: 600; }
+.advanced-radio-body { display: grid; gap: 0.65rem; padding: 0 0.75rem 0.75rem; }
+body[data-operator-layout="digital"] .controls-col-wfm { display: none !important; }
+.mobile-more-btn, .mobile-more-menu, .decoder-tab-select { display: none; }
+.mobile-more-menu {
+  position: fixed; right: 0.8rem; bottom: 5.3rem; z-index: 80;
+  min-width: 11rem; padding: 0.4rem; border: 1px solid var(--border-light); border-radius: 8px;
+  background: var(--card-bg); box-shadow: 0 10px 28px rgba(0,0,0,.3);
+}
+.mobile-more-menu.is-open { display: grid; }
+.mobile-more-menu button { text-align: left; }
+.decoder-state-dot { display: inline-block; width: 0.48rem; height: 0.48rem; margin-left: 0.35rem; border-radius: 50%; background: var(--text-muted); vertical-align: middle; }
+.decoder-state-dot[data-state="active"] { background: var(--accent-green); box-shadow: 0 0 0.35rem color-mix(in srgb, var(--accent-green) 65%, transparent); }
+.decoder-state-dot[data-state="error"] { background: var(--accent-red); }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
+}
+
 /* ── Scrollbars ───────────────────────────────────────────────────────── */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }
@@ -2953,7 +3008,7 @@ canvas:focus-visible, [tabindex]:focus-visible {
     bottom: calc(0.55rem + env(safe-area-inset-bottom));
     z-index: 30;
     display: grid;
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-template-columns: repeat(5, minmax(0, 1fr));
     gap: 0.25rem;
     padding: 0.38rem;
     border: 1px solid color-mix(in srgb, var(--border-light) 82%, transparent);
@@ -2993,6 +3048,16 @@ canvas:focus-visible, [tabindex]:focus-visible {
   .tab[data-tab="bookmarks"] .tab-label { font-size: 0.6rem; }
   .tab[data-tab="digital-modes"] .tab-label  { font-size: 0.6rem; }
   .tab[data-tab="statistics"] .tab-label { font-size: 0.6rem; }
+  .tab[data-tab="statistics"], .tab[data-tab="recorder"],
+  .tab[data-tab="settings"], .tab[data-tab="about"] { display: none; }
+  .mobile-more-btn { display: flex; }
+  .tab .tab-label, .tab[data-tab] .tab-label { font-size: 0.75rem; }
+  .decoder-tab-select {
+    display: block; width: 100%; min-height: 2.8rem; margin-bottom: 0.7rem;
+    border: 1px solid var(--border-light); border-radius: 6px; background: var(--input-bg); color: var(--text); font-size: 1rem;
+  }
+  #tab-digital-modes > .sub-tab-bar { display: none; }
+  .toast-region { bottom: calc(5.7rem + env(safe-area-inset-bottom)); }
   .top-bar-actions {
     width: 100%;
     justify-content: flex-start;
@@ -3910,6 +3975,15 @@ canvas:focus-visible, [tabindex]:focus-visible {
   }
 }
 
+/* Preserve legibility after the component-specific compact-mobile rules. */
+@media (max-width: 640px) {
+  button, input, select, textarea, .tab-label, .sub-tab,
+  .label, .hint, .subtitle, .wfm-control-label, .wfm-intf-val,
+  .ft8-header, .ft8-message, .aprs-packet, .ais-message, .vdes-message {
+    font-size: max(0.75rem, 12px);
+  }
+}
+
 /* Theme styles have been moved to themes.css */
 
 
@@ -5061,3 +5135,11 @@ canvas:focus-visible, [tabindex]:focus-visible {
   from { opacity: 0; }
   to   { opacity: 1; }
 }
+
+@media (max-width: 640px) {
+  button, input, select, textarea, .tab-label, .sub-tab,
+  .label, .hint, .subtitle, .wfm-control-label, .wfm-intf-val,
+  .ft8-header, .ft8-message, .aprs-packet, .ais-message, .vdes-message {
+    font-size: max(0.75rem, 12px);
+  }
+}

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

@@ -0,0 +1,276 @@
+// SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
+//
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+"use strict";
+
+// Shared UI primitives. Keeping these outside app.js prevents navigation,
+// feedback, dialogs, and layout preferences from growing separate state models.
+(function initUiCore() {
+  const api = window.trxUi = window.trxUi || {};
+
+  function ensureLiveRegions() {
+    if (!document.getElementById("toast-region")) {
+      const region = document.createElement("div");
+      region.id = "toast-region";
+      region.className = "toast-region";
+      region.setAttribute("aria-live", "polite");
+      region.setAttribute("aria-atomic", "false");
+      document.body.appendChild(region);
+    }
+    if (!document.getElementById("ui-confirm-dialog")) {
+      const dialog = document.createElement("dialog");
+      dialog.id = "ui-confirm-dialog";
+      dialog.className = "ui-dialog";
+      dialog.innerHTML = `
+        <form method="dialog" class="ui-dialog-card">
+          <h2 id="ui-confirm-title">Confirm action</h2>
+          <p id="ui-confirm-message"></p>
+          <div class="ui-dialog-actions">
+            <button value="cancel" type="submit">Cancel</button>
+            <button value="confirm" type="submit" class="danger">Confirm</button>
+          </div>
+        </form>`;
+      document.body.appendChild(dialog);
+    }
+  }
+
+  api.notify = function notify(message, options = {}) {
+    ensureLiveRegions();
+    const { kind = "info", duration = kind === "error" ? 7000 : 3200, action = null } = options;
+    const toast = document.createElement("div");
+    toast.className = `toast toast-${kind}`;
+    toast.setAttribute("role", kind === "error" ? "alert" : "status");
+    const text = document.createElement("span");
+    text.textContent = message;
+    toast.appendChild(text);
+    if (action && typeof action.run === "function") {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.textContent = action.label || "Retry";
+      button.addEventListener("click", () => { action.run(); toast.remove(); });
+      toast.appendChild(button);
+    }
+    document.getElementById("toast-region").appendChild(toast);
+    requestAnimationFrame(() => toast.classList.add("toast-visible"));
+    if (duration > 0) setTimeout(() => toast.remove(), duration);
+    return toast;
+  };
+
+  api.confirm = function confirmAction(options = {}) {
+    ensureLiveRegions();
+    const dialog = document.getElementById("ui-confirm-dialog");
+    document.getElementById("ui-confirm-title").textContent = options.title || "Confirm action";
+    document.getElementById("ui-confirm-message").textContent = options.message || "Continue?";
+    const confirmButton = dialog.querySelector('[value="confirm"]');
+    confirmButton.textContent = options.confirmLabel || "Confirm";
+    confirmButton.classList.toggle("danger", options.danger !== false);
+    return new Promise((resolve) => {
+      const finish = () => resolve(dialog.returnValue === "confirm");
+      dialog.addEventListener("close", finish, { once: true });
+      dialog.showModal();
+    });
+  };
+
+  api.setButtonState = function setButtonState(button, options = {}) {
+    if (!button) return;
+    const { active = false, activeLabel, inactiveLabel, busy = false, disabled = false } = options;
+    button.classList.toggle("is-active", active);
+    button.classList.toggle("is-busy", busy);
+    button.setAttribute("aria-pressed", String(active));
+    button.setAttribute("aria-busy", String(busy));
+    button.disabled = disabled || busy;
+    const label = active ? activeLabel : inactiveLabel;
+    if (label) button.textContent = label;
+  };
+
+  api.prepareTabList = function prepareTabList(bar, kind = "primary") {
+    if (!bar) return;
+    if (bar._accessibleTabsPrepared) return;
+    bar._accessibleTabsPrepared = true;
+    const selector = kind === "primary" ? ".tab[data-tab]" : ".sub-tab[data-subtab]";
+    const buttons = Array.from(bar.querySelectorAll(selector));
+    bar.setAttribute("role", "tablist");
+    buttons.forEach((button, index) => {
+      button.setAttribute("role", "tab");
+      button.setAttribute("aria-selected", String(button.classList.contains("active")));
+      button.tabIndex = button.classList.contains("active") || (!buttons.some(b => b.classList.contains("active")) && index === 0) ? 0 : -1;
+      const key = button.dataset.tab || button.dataset.subtab;
+      button.setAttribute("aria-controls", `${kind === "primary" ? "tab-" : "subtab-"}${key}`);
+      const panel = document.getElementById(`${kind === "primary" ? "tab-" : "subtab-"}${key}`);
+      if (panel) {
+        if (!button.id) button.id = `${kind}-tab-${key}`;
+        panel.setAttribute("role", "tabpanel");
+        panel.setAttribute("aria-labelledby", button.id);
+      }
+    });
+    bar.addEventListener("keydown", (event) => {
+      if (!buttons.includes(event.target)) return;
+      const direction = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1
+        : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+      if (!direction) return;
+      event.preventDefault();
+      const next = buttons[(buttons.indexOf(event.target) + direction + buttons.length) % buttons.length];
+      next.focus();
+      next.click();
+    });
+  };
+
+  api.syncSelectedTab = function syncSelectedTab(bar, selected) {
+    if (!bar) return;
+    bar.querySelectorAll('[role="tab"]').forEach((tab) => {
+      const active = tab === selected;
+      tab.setAttribute("aria-selected", String(active));
+      tab.tabIndex = active ? 0 : -1;
+    });
+  };
+
+  const layouts = {
+    compact: { label: "Compact", advanced: false, preferredTab: "main" },
+    broadcast: { label: "Broadcast", advanced: false, preferredTab: "main" },
+    digital: { label: "Digital", advanced: false, preferredTab: "digital-modes" },
+    full: { label: "Full controls", advanced: true, preferredTab: "main" },
+  };
+
+  api.applyLayout = function applyLayout(name, options = {}) {
+    const layout = layouts[name] || layouts.compact;
+    document.body.dataset.operatorLayout = name in layouts ? name : "compact";
+    localStorage.setItem("trxOperatorLayout", document.body.dataset.operatorLayout);
+    const details = document.getElementById("advanced-radio-controls");
+    if (details) details.open = layout.advanced;
+    if (options.navigate && typeof window.navigateToTab === "function") {
+      window.navigateToTab(layout.preferredTab);
+    }
+  };
+
+  function installLayoutControls() {
+    const actions = document.querySelector(".top-bar-actions");
+    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>';
+      const select = label.querySelector("select");
+      Object.entries(layouts).forEach(([value, layout]) => select.add(new Option(layout.label, value)));
+      select.value = localStorage.getItem("trxOperatorLayout") || "compact";
+      select.addEventListener("change", () => api.applyLayout(select.value, { navigate: true }));
+      actions.insertBefore(label, actions.firstChild);
+      api.applyLayout(select.value);
+    }
+
+    const tray = document.querySelector(".controls-tray");
+    if (tray && !document.getElementById("advanced-radio-controls")) {
+      const details = document.createElement("details");
+      details.id = "advanced-radio-controls";
+      details.className = "advanced-radio-controls";
+      details.innerHTML = '<summary>Advanced radio controls</summary><div class="advanced-radio-body"></div>';
+      const body = details.querySelector(".advanced-radio-body");
+      ["sdr-settings-row", "vchan-row", "tx-limit-row"].forEach((id) => {
+        const element = document.getElementById(id);
+        if (element) body.appendChild(element);
+      });
+      tray.appendChild(details);
+      api.applyLayout(localStorage.getItem("trxOperatorLayout") || "compact");
+    }
+  }
+
+  function installMobileMore() {
+    const nav = document.querySelector(".tab-bar-nav");
+    if (!nav || document.getElementById("mobile-more-btn")) return;
+    const more = document.createElement("button");
+    more.id = "mobile-more-btn";
+    more.className = "tab mobile-more-btn";
+    more.type = "button";
+    more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">More</span>';
+    more.setAttribute("aria-haspopup", "menu");
+    more.setAttribute("aria-expanded", "false");
+    const menu = document.createElement("div");
+    menu.id = "mobile-more-menu";
+    menu.className = "mobile-more-menu";
+    menu.setAttribute("role", "menu");
+    ["statistics", "recorder", "settings", "about"].forEach((tabName) => {
+      const source = nav.querySelector(`[data-tab="${tabName}"]`);
+      if (!source) return;
+      const item = document.createElement("button");
+      item.type = "button";
+      item.setAttribute("role", "menuitem");
+      item.dataset.navigateTab = tabName;
+      item.textContent = source.textContent.trim();
+      item.addEventListener("click", () => {
+        if (typeof window.navigateToTab === "function") window.navigateToTab(tabName);
+        menu.classList.remove("is-open");
+        more.setAttribute("aria-expanded", "false");
+      });
+      menu.appendChild(item);
+    });
+    more.addEventListener("click", () => {
+      const open = menu.classList.toggle("is-open");
+      more.setAttribute("aria-expanded", String(open));
+    });
+    nav.append(more, menu);
+  }
+
+  function installDecoderPicker() {
+    const bar = document.querySelector("#tab-digital-modes > .sub-tab-bar");
+    if (!bar || document.getElementById("decoder-tab-select")) return;
+    const select = document.createElement("select");
+    select.id = "decoder-tab-select";
+    select.className = "decoder-tab-select";
+    select.setAttribute("aria-label", "Decoder view");
+    const groups = [
+      ["Overview", ["overview"]], ["Marine & packet", ["ais", "vdes", "aprs", "hf-aprs"]],
+      ["Weak signal", ["cw", "ft8", "ft4", "ft2", "wspr"]], ["Broadcast & images", ["rds", "sat", "wefax"]],
+    ];
+    groups.forEach(([label, ids]) => {
+      const group = document.createElement("optgroup");
+      group.label = label;
+      ids.forEach((id) => {
+        const button = bar.querySelector(`[data-subtab="${id}"]`);
+        if (button) group.appendChild(new Option(button.textContent.trim(), id));
+      });
+      select.appendChild(group);
+    });
+    select.addEventListener("change", () => bar.querySelector(`[data-subtab="${select.value}"]`)?.click());
+    bar.insertAdjacentElement("afterend", select);
+  }
+
+  function installDecoderBadges() {
+    const bar = document.querySelector("#tab-digital-modes > .sub-tab-bar");
+    if (!bar) return;
+    bar.querySelectorAll(".sub-tab[data-subtab]").forEach((button) => {
+      const id = button.dataset.subtab;
+      if (id === "overview" || button.querySelector(".decoder-state-dot")) return;
+      const dot = document.createElement("span");
+      dot.className = "decoder-state-dot";
+      dot.setAttribute("aria-hidden", "true");
+      button.appendChild(dot);
+      const status = document.getElementById(`${id}-status`);
+      if (!status) return;
+      const sync = () => {
+        const value = status.textContent.toLowerCase();
+        const state = /receiv|decod|connected|listening/.test(value) ? "active"
+          : /error|fail|disconnected/.test(value) ? "error" : "idle";
+        dot.dataset.state = state;
+        button.title = `${button.childNodes[0]?.textContent?.trim() || id}: ${status.textContent.trim()}`;
+      };
+      new MutationObserver(sync).observe(status, { childList: true, characterData: true, subtree: true });
+      sync();
+    });
+  }
+
+  api.init = function init() {
+    ensureLiveRegions();
+    installLayoutControls();
+    installMobileMore();
+    installDecoderPicker();
+    installDecoderBadges();
+    api.prepareTabList(document.querySelector(".tab-bar-nav"), "primary");
+    document.querySelectorAll(".sub-tab-bar").forEach(bar => api.prepareTabList(bar, "secondary"));
+    window.addEventListener("unhandledrejection", (event) => {
+      const message = event.reason?.message || "An operation failed unexpectedly";
+      api.notify(message, { kind: "error" });
+    });
+  };
+
+  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", api.init, { once: true });
+  else api.init();
+})();

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

@@ -29,6 +29,7 @@ define_gz_cache!(gz_index_html, status::index_html(), "index.html");
 define_gz_cache!(gz_style_css, status::STYLE_CSS, "style.css");
 define_gz_cache!(gz_themes_css, status::THEMES_CSS, "themes.css");
 define_gz_cache!(gz_app_js, status::APP_JS, "app.js");
+define_gz_cache!(gz_ui_core_js, status::UI_CORE_JS, "ui-core.js");
 define_gz_cache!(gz_map_core_js, status::MAP_CORE_JS, "map-core.js");
 define_gz_cache!(gz_screenshot_js, status::SCREENSHOT_JS, "screenshot.js");
 define_gz_cache!(
@@ -180,6 +181,12 @@ pub(crate) async fn app_js(req: HttpRequest) -> impl Responder {
     static_asset_response(&req, "application/javascript; charset=utf-8", c)
 }
 
+#[get("/ui-core.js")]
+pub(crate) async fn ui_core_js(req: HttpRequest) -> impl Responder {
+    let c = gz_ui_core_js();
+    static_asset_response(&req, "application/javascript; charset=utf-8", c)
+}
+
 #[get("/map-core.js")]
 pub(crate) async fn map_core_js(req: HttpRequest) -> impl Responder {
     let c = gz_map_core_js();

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

@@ -643,6 +643,7 @@ pub fn configure(cfg: &mut web::ServiceConfig) {
         .service(assets::style_css)
         .service(assets::themes_css)
         .service(assets::app_js)
+        .service(assets::ui_core_js)
         .service(assets::map_core_js)
         .service(assets::screenshot_js)
         .service(assets::decode_history_worker_js)

src/trx-client/trx-frontend/trx-frontend-http/src/status.rs

@@ -12,6 +12,7 @@ const INDEX_HTML: &str = include_str!("../assets/web/index.html");
 pub const STYLE_CSS: &str = include_str!("../assets/web/style.css");
 pub const THEMES_CSS: &str = include_str!("../assets/web/themes.css");
 pub const APP_JS: &str = include_str!("../assets/web/app.js");
+pub const UI_CORE_JS: &str = include_str!("../assets/web/ui-core.js");
 pub const MAP_CORE_JS: &str = include_str!("../assets/web/map-core.js");
 pub const SCREENSHOT_JS: &str = include_str!("../assets/web/screenshot.js");
 pub const DECODE_HISTORY_WORKER_JS: &str = include_str!("../assets/web/decode-history-worker.js");
@@ -71,3 +72,21 @@ pub fn index_html() -> &'static str {
             .replace("{client_build_date}", CLIENT_BUILD_DATE)
     })
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn shared_ui_core_is_embedded_and_loaded_before_app() {
+        let html = index_html();
+        let ui_core = html.find("/ui-core.js").expect("ui-core script is loaded");
+        let app = html.find("/app.js").expect("application script is loaded");
+
+        assert!(
+            ui_core < app,
+            "UI primitives must load before application code"
+        );
+        assert!(UI_CORE_JS.contains("window.trxUi"));
+    }
+}