style(ui): polish shared interaction components

feat(ui): improve radio operator experience
[fix](trx-frontend): account for WFM interference in auto bandwidth
2026-08-01 10:43:29 +02:00 · 2026-08-01 02:24:47 +02:00 · 2026-08-01 02:07:32 +02:00 · 2026-08-01 02:04:14 +02:00 · 2026-08-01 02:04:14 +02:00 · 2026-08-01 01:55:33 +02:00
26 changed files with 1002 additions and 126 deletions
@@ -274,7 +274,8 @@ mod tests {

        // Pseudo-random noise vs gradient — correlation should be low.
        let noise: Vec<u8> = (0..256)
-            .map(|i| ((i * 1103515245 + 12345) as u32 >> 8 & 0xff) as u8)
+            .map(|i| (i as u32).wrapping_mul(1_103_515_245).wrapping_add(12_345))
+            .map(|value| ((value >> 8) & 0xff) as u8)
            .collect();
        let r = asm.correlation_with_last(&noise).expect("r");
        assert!(
@@ -840,6 +840,8 @@ let jogMult = loadSetting("jogMult", 1);      // divisor: 1, 10, 100
 let jogStep = Math.max(Math.round(jogUnit / jogMult), 1);
 let minFreqStepHz = 1;
 let lastModeName = "";
+let lastWfmCci = 0;
+let lastWfmAci = 0;
 const VFO_COLORS = ["var(--accent-green)", "var(--accent-yellow)"];
 function vfoColor(idx) {
  if (idx < VFO_COLORS.length) return VFO_COLORS[idx];
@@ -1315,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 = [];
@@ -2829,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).
@@ -3293,8 +3298,14 @@ function render(update) {
      wfmStFlagEl.classList.toggle("wfm-st-flag-stereo", detected);
      wfmStFlagEl.classList.toggle("wfm-st-flag-mono", !detected);
    }
-    if (typeof update.filter.wfm_cci === "number") updateIntfBar(wfmCciFillEl, wfmCciValEl, update.filter.wfm_cci);
-    if (typeof update.filter.wfm_aci === "number") updateIntfBar(wfmAciFillEl, wfmAciValEl, update.filter.wfm_aci);
+    if (typeof update.filter.wfm_cci === "number") {
+      lastWfmCci = Math.max(0, Math.min(100, update.filter.wfm_cci));
+      updateIntfBar(wfmCciFillEl, wfmCciValEl, lastWfmCci);
+    }
+    if (typeof update.filter.wfm_aci === "number") {
+      lastWfmAci = Math.max(0, Math.min(100, update.filter.wfm_aci));
+      updateIntfBar(wfmAciFillEl, wfmAciValEl, lastWfmAci);
+    }
    if (samStereoWidthEl && typeof update.filter.sam_stereo_width === "number") {
      samStereoWidthEl.value = String(Math.round(update.filter.sam_stereo_width * 100));
    }
@@ -3421,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)";
@@ -3530,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;
@@ -3649,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";
@@ -3922,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");
@@ -3932,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";
@@ -3947,7 +3977,7 @@ pttBtn.addEventListener("click", async () => {
    showHint("PTT toggle failed", 2000);
    console.error(err);
  } finally {
-    pttBtn.disabled = false;
+    setControlPending(pttBtn, false);
  }
 });

@@ -3980,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}`);
@@ -3989,7 +4019,7 @@ async function applyCenterFreqFromInput() {
    showHint("Set central freq failed", 2000);
    console.error(err);
  } finally {
-    centerFreqEl.disabled = false;
+    setControlPending(centerFreqEl, false);
  }
 }

@@ -4190,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)) {
@@ -4208,7 +4238,7 @@ async function applyModeFromPicker() {
    showHint("Set mode failed", 2000);
    console.error(err);
  } finally {
-    modeEl.disabled = false;
+    setControlPending(modeEl, false);
  }
 }

@@ -4227,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)}`);
@@ -4236,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);
  }
 });

@@ -4268,7 +4298,7 @@ const MODE_BW_DEFAULTS = {
  FM:     [12_500, 2_500, 25_000, 500],
  AIS:    [25_000, 12_500, 50_000, 500],
  VDES:   [100_000, 25_000, 200_000, 1_000],
-  WFM:    [180_000, 50_000,300_000,5_000],
+  WFM:    [180_000, 60_000,300_000,5_000],
  DIG:    [3_000,  300,   6_000,  100],
  PKT:    [25_000, 300,  50_000,  500],
 };
@@ -4318,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) } }); }
  }
 }

@@ -4345,67 +4376,115 @@ 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 estimateBandwidthAroundPeak(data, centerHz) {
+function estimateOccupiedBandwidth(data, centerHz, interference = {}) {
  if (!data || !isBinsArray(data.bins) || data.bins.length < 3 || !Number.isFinite(centerHz)) {
    return null;
  }

  const bins = data.bins;
  const maxIdx = bins.length - 1;
+  const hzPerBin = data.sample_rate / maxIdx;
  const fullLoHz = data.center_hz - data.sample_rate / 2;
  const centerIdx = Math.max(
    1,
    Math.min(maxIdx - 1, Math.round(((centerHz - fullLoHz) / data.sample_rate) * maxIdx)),
  );
-  const searchRadius = Math.max(6, Math.min(120, Math.round(maxIdx * 0.03)));
-  const searchLo = Math.max(1, centerIdx - searchRadius);
-  const searchHi = Math.min(maxIdx - 1, centerIdx + searchRadius);
-
-  let peakIdx = centerIdx;
-  for (let i = searchLo; i <= searchHi; i++) {
-    if (bins[i] > bins[peakIdx]) peakIdx = i;
-  }
+  const mode = (modeEl ? modeEl.value : "USB").toUpperCase();
+  const [defaultBw, minBw, maxBw, stepBw] = mwDefaultsForMode(mode);
+  const oneSided = mode === "USB" || mode === "DIG" || mode === "CW"
+    ? 1
+    : mode === "LSB" || mode === "CWR" ? -1 : 0;
+  const isWfm = mode === "WFM";

+  // Reduce single-bin peaks and holes before finding occupied-channel edges.
+  // WFM needs a wider smoothing window because its energy is noise-like and
+  // spread across the entire channel rather than concentrated at a carrier.
+  const smoothRadius = isWfm ? 3 : 1;
+  const smoothed = bins.map((_, i) => {
+    let sum = 0;
+    let count = 0;
+    for (let j = Math.max(0, i - smoothRadius); j <= Math.min(maxIdx, i + smoothRadius); j++) {
+      sum += bins[j];
+      count += 1;
+    }
+    return sum / count;
+  });
  const sorted = [...bins].sort((a, b) => a - b);
  const noise = sorted[Math.floor(sorted.length * 0.2)];
-  const peak = bins[peakIdx];
-  const threshold = Math.max(noise + 4, peak - Math.max(8, (peak - noise) * 0.35));
+  const maxSpanBins = Math.max(2, Math.ceil(maxBw / hzPerBin));
+  const searchHalfBins = oneSided === 0 ? Math.ceil(maxSpanBins / 2) : maxSpanBins;
+  const searchLo = Math.max(1, centerIdx - (oneSided > 0 ? 2 : searchHalfBins));
+  const searchHi = Math.min(maxIdx - 1, centerIdx + (oneSided < 0 ? 2 : searchHalfBins));
+  let peak = -Infinity;
+  for (let i = searchLo; i <= searchHi; i++) peak = Math.max(peak, smoothed[i]);
+  const snr = peak - noise;
+  if (!Number.isFinite(snr) || snr < (isWfm ? 5 : 4)) return isWfm ? minBw : defaultBw;

-  let left = peakIdx;
-  let right = peakIdx;
-  let belowCount = 0;
-  for (let i = peakIdx; i > 1; i--) {
-    if (bins[i] < threshold) belowCount += 1;
-    else belowCount = 0;
-    if (belowCount >= 2) break;
-    left = i;
+  // A threshold relative to the noise floor finds occupied bandwidth much
+  // more reliably than one relative to the peak.  The latter fails for WFM,
+  // whose multiplex spectrum has peaks, notches, and no narrow centre carrier.
+  const threshold = noise + Math.max(3, Math.min(isWfm ? 6 : 10, snr * (isWfm ? 0.18 : 0.28)));
+  const allowedGap = Math.max(isWfm ? 4 : 2, Math.ceil((isWfm ? 12_000 : stepBw) / hzPerBin));
+
+  function occupiedExtent(direction, limitBins) {
+    let lastOccupied = centerIdx;
+    let gap = 0;
+    for (let n = 0; n <= limitBins; n++) {
+      const i = centerIdx + direction * n;
+      if (i <= 0 || i >= maxIdx) break;
+      if (smoothed[i] >= threshold) {
+        lastOccupied = i;
+        gap = 0;
+      } else if (++gap > allowedGap) {
+        break;
+      }
+    }
+    return Math.abs(lastOccupied - centerIdx) * hzPerBin;
  }

-  belowCount = 0;
-  for (let i = peakIdx; i < maxIdx - 1; i++) {
-    if (bins[i] < threshold) belowCount += 1;
-    else belowCount = 0;
-    if (belowCount >= 2) break;
-    right = i;
+  let rawBw;
+  if (oneSided !== 0) {
+    rawBw = occupiedExtent(oneSided, maxSpanBins);
+  } else {
+    const leftHz = occupiedExtent(-1, searchHalfBins);
+    const rightHz = occupiedExtent(1, searchHalfBins);
+    // A symmetric RF filter must contain the larger of the two sidebands.
+    rawBw = 2 * Math.max(leftHz, rightHz);
  }

-  const shoulderPad = Math.max(1, Math.round((right - left) * 0.08));
-  left = Math.max(0, left - shoulderPad);
-  right = Math.min(maxIdx, right + shoulderPad);
-
-  const hzPerBin = data.sample_rate / maxIdx;
-  const rawBw = Math.max(hzPerBin, (right - left) * hzPerBin);
-  const [, minBw, maxBw, stepBw] = mwDefaultsForMode(modeEl ? modeEl.value : "USB");
+  // Add a transition-band margin.  Weak WFM deliberately falls back to the
+  // 60 kHz mode floor above: a narrower filter trades stereo/RDS content for
+  // a useful improvement in intelligibility when the signal is very poor.
+  rawBw *= isWfm ? 1.08 : 1.12;
+  if (isWfm) {
+    const aci = Math.max(0, Math.min(100, Number(interference.aci) || 0)) / 100;
+    const cci = Math.max(0, Math.min(100, Number(interference.cci) || 0)) / 100;
+    // Adjacent-channel energy is outside the wanted modulation, so ACI can
+    // safely drive the cap all the way from the 300 kHz ceiling to 60 kHz.
+    const aciCap = maxBw - (maxBw - minBw) * aci;
+    // CCI overlaps the wanted station and cannot be removed by an RF filter.
+    // Only distrust the widest edge estimates, retaining at least 65% of the
+    // useful range between the weak-signal floor and nominal WFM bandwidth.
+    const cciFloor = minBw + (defaultBw - minBw) * 0.65;
+    const cciCap = maxBw - (maxBw - cciFloor) * cci;
+    rawBw = Math.min(rawBw, aciCap, cciCap);
+  }
  const clamped = Math.max(minBw, Math.min(maxBw, rawBw));
  return Math.max(stepBw, Math.round(clamped / stepBw) * stepBw);
 }

 async function applyAutoBandwidth() {
  if (!lastSpectrumData || lastFreqHz == null) return;
-  const estimated = estimateBandwidthAroundPeak(lastSpectrumData, lastFreqHz);
+  // WFM interference telemetry belongs to the primary DSP channel. Do not
+  // apply it to a virtual channel, where it would describe the wrong signal.
+  const onVirtual = typeof vchanIsOnVirtual === "function" && vchanIsOnVirtual();
+  const interference = onVirtual ? {} : { cci: lastWfmCci, aci: lastWfmAci };
+  const estimated = estimateOccupiedBandwidth(lastSpectrumData, lastFreqHz, interference);
  if (!Number.isFinite(estimated) || estimated <= 0) {
    syncBandwidthInput(currentBandwidthHz);
    return;
@@ -4417,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) {
@@ -4522,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 = "";
@@ -4550,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]");
@@ -4708,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 {
@@ -4909,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}`);
@@ -5404,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";
@@ -5605,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 = "";
@@ -5631,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; }
@@ -5669,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";
@@ -5746,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
@@ -5991,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);
@@ -5999,6 +6100,7 @@ function renderRecorderFiles() {
        renderRecorderFiles();
      } catch (e) {
        console.error("Delete failed", e);
+        window.trxUi?.notify("Recording could not be deleted", { kind: "error" });
      }
    });
  });
@@ -6935,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;
@@ -8397,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;
@@ -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
@@ -1641,29 +1644,56 @@ SPDX-License-Identifier: GPL-2.0-or-later
    'settings': ['/vchan.js', '/scheduler.js']
  };
  var loaded = new Set();
-  function loadPlugins(tab) {
-    var scripts = pluginScripts[tab];
-    if (!scripts) return;
-    scripts.forEach(function(src) {
-      if (loaded.has(src)) return;
-      loaded.add(src);
+  var loading = new Map();
+
+  function loadScript(src) {
+    if (loaded.has(src)) return Promise.resolve();
+    if (loading.has(src)) return loading.get(src);
+
+    var request = new Promise(function(resolve, reject) {
      var s = document.createElement('script');
      s.src = src;
-      s.defer = true;
+      s.onload = function() {
+        loaded.add(src);
+        loading.delete(src);
+        resolve();
+      };
+      s.onerror = function() {
+        loading.delete(src);
+        reject(new Error('Failed to load plugin script: ' + src));
+      };
      document.body.appendChild(s);
    });
+    loading.set(src, request);
+    return request;
+  }
+
+  function loadPlugins(tab) {
+    var scripts = pluginScripts[tab];
+    if (!scripts) return Promise.resolve();
+    return scripts.reduce(function(sequence, src) {
+      return sequence.then(function() { return loadScript(src); });
+    }, Promise.resolve());
+  }
+
+  function requestPlugins(tab) {
+    return loadPlugins(tab).catch(function(err) {
+      console.error(err);
+    });
  }
  // Eager plugin loading is triggered by app.js (after window.trx is set up)
  // via window.loadEagerPlugins().  Dynamic scripts are effectively async, so
  // loading them before app.js would cause map-core.js to crash when
  // window.trx is not yet defined.
  window.loadEagerPlugins = function() {
-    ['digital-modes', 'map-data', 'bookmarks', 'settings'].forEach(loadPlugins);
+    return Promise.all(
+      ['digital-modes', 'map-data', 'bookmarks', 'settings'].map(requestPlugins)
+    );
  };
  // Load others on tab switch
  document.addEventListener('click', function(e) {
    var tab = e.target.closest('[data-tab]');
-    if (tab) loadPlugins(tab.dataset.tab);
+    if (tab) requestPlugins(tab.dataset.tab);
  });
  window.loadPluginsForTab = loadPlugins;
 })();
@@ -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();
@@ -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();
@@ -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;
@@ -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" });
  }
 }

@@ -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();
@@ -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();
@@ -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();
@@ -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();
@@ -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();
@@ -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;
@@ -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();
@@ -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 () {
@@ -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();
@@ -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();
@@ -2839,6 +2839,212 @@ 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: var(--space-4);
+  bottom: var(--space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: min(28rem, calc(100vw - 2rem));
+  pointer-events: none;
+}
+.toast {
+  --toast-accent: var(--accent-yellow);
+  position: relative;
+  display: grid;
+  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--space-3);
+  min-height: 3rem;
+  padding: 0.7rem 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--toast-accent) 35%, var(--border-light));
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--card-bg) 96%, var(--toast-accent) 4%);
+  color: var(--text);
+  box-shadow: 0 14px 38px color-mix(in srgb, #000 38%, transparent), inset 3px 0 0 var(--toast-accent);
+  opacity: 0;
+  transform: translateY(0.65rem) scale(0.98);
+  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
+  pointer-events: auto;
+}
+.toast::before {
+  display: grid;
+  place-items: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--radius-pill);
+  background: color-mix(in srgb, var(--toast-accent) 18%, transparent);
+  color: var(--toast-accent);
+  content: "i";
+  font-size: var(--fs-xs);
+  font-weight: 800;
+}
+.toast > span { min-width: 0; line-height: 1.35; }
+.toast-visible { opacity: 1; transform: translateY(0); }
+.toast-success { --toast-accent: var(--accent-green); }
+.toast-success::before { content: "✓"; }
+.toast-error { --toast-accent: var(--accent-red); }
+.toast-error::before { content: "!"; }
+.toast button {
+  width: auto;
+  min-height: 2rem;
+  height: 2rem;
+  padding: 0 var(--space-3);
+  border-color: color-mix(in srgb, var(--toast-accent) 55%, var(--btn-border));
+  color: var(--toast-accent);
+  font-size: var(--fs-sm);
+  font-weight: 700;
+}
+.ui-dialog {
+  max-width: none;
+  border: 0;
+  padding: 0;
+  border-radius: var(--radius-lg);
+  color: var(--text);
+  background: transparent;
+  box-shadow: 0 24px 70px color-mix(in srgb, #000 55%, transparent);
+}
+.ui-dialog::backdrop { background: rgba(3, 8, 18, 0.72); backdrop-filter: blur(5px); }
+.ui-dialog-card {
+  width: min(29rem, calc(100vw - 2rem));
+  margin: 0;
+  padding: var(--space-6);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg);
+  background: linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 94%, var(--text) 6%), var(--card-bg));
+  box-sizing: border-box;
+}
+.ui-dialog-card h2 { margin: 0 0 var(--space-2); color: var(--text-heading); font-size: var(--fs-md); line-height: 1.3; }
+.ui-dialog-card p { margin: 0; color: var(--text-muted); line-height: 1.55; }
+.ui-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
+.ui-dialog-actions button { min-width: 6rem; }
+.ui-dialog-actions .danger { background: var(--accent-red); border-color: var(--accent-red); color: #fff; font-weight: 700; }
+.ui-dialog-actions .danger:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-red) 82%, #fff); border-color: color-mix(in srgb, var(--accent-red) 82%, #fff); }
+.form-error { flex: 1 1 100%; min-height: 1.2em; color: var(--accent-red); font-size: var(--fs-sm); font-weight: 600; }
+button.is-active {
+  border-color: var(--accent-green);
+  background: color-mix(in srgb, var(--btn-bg) 82%, var(--accent-green) 18%);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-green) 32%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent-green) 12%, transparent);
+}
+#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;
+  align-items: center;
+  height: 2rem;
+  padding-left: 0.6rem;
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--input-bg) 88%, transparent);
+  color: var(--text-muted);
+  font-size: var(--fs-xs);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  overflow: hidden;
+}
+.operator-layout-picker::before { content: "Layout"; }
+.operator-layout-picker select {
+  width: auto;
+  min-height: 2rem;
+  max-width: 9rem;
+  padding: 0 1.75rem 0 0.45rem;
+  border: 0;
+  background-color: transparent;
+  color: var(--text);
+  font-size: var(--fs-sm);
+  font-weight: 600;
+  text-transform: none;
+  cursor: pointer;
+}
+.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; }
+.advanced-radio-controls {
+  margin-top: var(--space-3);
+  border: 1px solid color-mix(in srgb, var(--border-light) 75%, transparent);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--input-bg) 68%, transparent);
+  overflow: clip;
+  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
+}
+.advanced-radio-controls:hover { border-color: var(--border-light); }
+.advanced-radio-controls[open] { background: color-mix(in srgb, var(--surface) 86%, transparent); }
+.advanced-radio-controls summary {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0.65rem 0.75rem;
+  color: var(--text-heading);
+  font-size: var(--fs-sm);
+  font-weight: 700;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+.advanced-radio-controls summary::-webkit-details-marker { display: none; }
+.advanced-radio-controls summary::before {
+  content: "›";
+  color: var(--accent-text);
+  font-size: 1.2rem;
+  line-height: 1;
+  transform: rotate(0deg);
+  transition: transform var(--dur-base) var(--ease-standard);
+}
+.advanced-radio-controls[open] summary::before { transform: rotate(90deg); }
+.advanced-radio-controls[open] summary { border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
+.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; }
+.mobile-more-btn, .mobile-more-menu, .decoder-tab-select { display: none; }
+.mobile-more-menu {
+  position: fixed;
+  right: max(0.75rem, env(safe-area-inset-right));
+  bottom: calc(5.4rem + env(safe-area-inset-bottom));
+  z-index: 80;
+  min-width: 12rem;
+  padding: var(--space-2);
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--card-bg) 97%, transparent);
+  box-shadow: 0 18px 45px color-mix(in srgb, #000 42%, transparent);
+}
+.mobile-more-menu.is-open { display: grid; gap: 0.2rem; animation: trx-menu-in var(--dur-base) var(--ease-out); }
+.mobile-more-menu button {
+  justify-content: flex-start;
+  width: 100%;
+  height: 2.65rem;
+  padding: 0 var(--space-3);
+  border-color: transparent;
+  background: transparent;
+  text-align: left;
+}
+.mobile-more-menu button:hover { background: var(--btn-hover-bg); border-color: transparent; }
+.decoder-state-dot {
+  display: inline-block;
+  width: 0.45rem;
+  height: 0.45rem;
+  margin-left: 0.4rem;
+  border: 1px solid color-mix(in srgb, var(--text-muted) 70%, transparent);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--text-muted) 60%, transparent);
+  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); }
+@keyframes trx-menu-in { from { opacity: 0; transform: translateY(0.4rem) scale(0.98); } to { opacity: 1; transform: none; } }
+
+@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 +3159,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,12 +3199,38 @@ 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; }
+  .mobile-more-btn[aria-expanded="true"] {
+    color: var(--accent-text);
+    background: color-mix(in srgb, var(--accent-green) 10%, transparent);
+  }
+  .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: var(--space-3);
+    padding: 0 var(--space-3);
+    border: 1px solid var(--border-light);
+    border-radius: var(--radius-md);
+    background: color-mix(in srgb, var(--input-bg) 90%, var(--card-bg));
+    color: var(--text);
+    font-size: 1rem;
+    font-weight: 600;
+    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
+  }
+  #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;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
+  .operator-layout-picker { max-width: 100%; }
+  .operator-layout-picker select { max-width: 10rem; }
  .header-rig-switch,
  .header-style-pick {
    flex: 1 1 12rem;
@@ -3910,6 +4142,27 @@ canvas:focus-visible, [tabindex]:focus-visible {
  }
 }

+@media (max-width: 480px) {
+  .toast-region {
+    right: max(0.65rem, env(safe-area-inset-right));
+    width: calc(100vw - max(1.3rem, env(safe-area-inset-left) + env(safe-area-inset-right)));
+  }
+  .toast { grid-template-columns: 1.25rem minmax(0, 1fr); }
+  .toast button { grid-column: 2; justify-self: start; }
+  .ui-dialog-card { padding: var(--space-5); }
+  .ui-dialog-actions { flex-direction: column-reverse; }
+  .ui-dialog-actions button { width: 100%; }
+}
+
+/* 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 +5314,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);
+  }
+}
@@ -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();
+})();
@@ -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();
@@ -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)
@@ -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"));
+    }
+}
@@ -6,7 +6,9 @@

 #[cfg(feature = "ft2")]
 use std::collections::HashMap;
-use std::collections::{HashSet, VecDeque};
+use std::collections::HashSet;
+#[cfg(test)]
+use std::collections::VecDeque;
 use std::net::SocketAddr;
 use std::sync::atomic::{AtomicBool, Ordering};
 use std::sync::{Arc, Mutex};
@@ -33,10 +35,9 @@ use trx_core::audio::{
    AUDIO_MSG_VCHAN_MODE, AUDIO_MSG_VCHAN_REMOVE, AUDIO_MSG_VCHAN_SUB, AUDIO_MSG_VCHAN_UNSUB,
    AUDIO_MSG_VDES_DECODE, AUDIO_MSG_WEFAX_DECODE, AUDIO_MSG_WEFAX_PROGRESS, AUDIO_MSG_WSPR_DECODE,
 };
-use trx_core::decode::{
-    AisMessage, AprsPacket, CwEvent, DecodedMessage, Ft8Message, LrptImage, LrptProgress,
-    WsprMessage,
-};
+#[cfg(test)]
+use trx_core::decode::{AisMessage, AprsPacket, CwEvent};
+use trx_core::decode::{DecodedMessage, Ft8Message, LrptImage, LrptProgress, WsprMessage};
 use trx_core::rig::state::{RigMode, RigState};
 use trx_core::vchan::SharedVChanManager;
 use trx_cw::CwDecoder;
@@ -46,9 +47,9 @@ use trx_wspr::WsprDecoder;
 use uuid::Uuid;

 use crate::config::AudioConfig;
-use crate::history_policy::{
-    current_timestamp_ms, enforce_capacity, lock_or_recover, prune_by_age, MAX_HISTORY_ENTRIES,
-};
+use crate::history_policy::{current_timestamp_ms, lock_or_recover};
+#[cfg(test)]
+use crate::history_policy::{enforce_capacity, prune_by_age, MAX_HISTORY_ENTRIES};
 use trx_decode_log::DecoderLoggers;

 /// Silence timeout before auto-finalising an LRPT pass (30 s without new MCUs).
@@ -465,8 +465,25 @@ impl DecoderHistories {
    /// entries across all decoders, used for pre-allocating the replay blob.
    ///
    /// Uses an `AtomicUsize` counter maintained by record/prune/clear methods,
-    /// avoiding 9 separate mutex acquisitions.
+    /// avoiding 11 separate mutex acquisitions.
    pub fn estimated_total_count(&self) -> usize {
        self.total_count.load(Ordering::Relaxed)
    }
+
+    /// Rebuild the aggregate count after bulk restoration bypasses the normal
+    /// record methods.
+    pub(crate) fn recalculate_total_count(&self) {
+        let total = lock_or_recover(&self.ais, "ais_history").len()
+            + lock_or_recover(&self.vdes, "vdes_history").len()
+            + lock_or_recover(&self.aprs, "aprs_history").len()
+            + lock_or_recover(&self.hf_aprs, "hf_aprs_history").len()
+            + lock_or_recover(&self.cw, "cw_history").len()
+            + lock_or_recover(&self.ft8, "ft8_history").len()
+            + lock_or_recover(&self.ft4, "ft4_history").len()
+            + lock_or_recover(&self.ft2, "ft2_history").len()
+            + lock_or_recover(&self.wspr, "wspr_history").len()
+            + lock_or_recover(&self.lrpt, "lrpt_history").len()
+            + lock_or_recover(&self.wefax, "wefax_history").len();
+        self.total_count.store(total, Ordering::Relaxed);
+    }
 }
@@ -19,7 +19,7 @@ use pickledb::{PickleDb, PickleDbDumpPolicy, SerializationMethod};
 use serde::{de::DeserializeOwned, Deserialize, Serialize};

 use trx_core::decode::{
-    AisMessage, AprsPacket, CwEvent, Ft8Message, VdesMessage, WefaxMessage, WsprMessage,
+    AisMessage, AprsPacket, CwEvent, Ft8Message, LrptImage, VdesMessage, WefaxMessage, WsprMessage,
 };

 use crate::audio::DecoderHistories;
@@ -118,6 +118,11 @@ pub fn load_all(db: &PickleDb, rig_id: &str, histories: &Arc<DecoderHistories>)
            h.push_back(e);
        }
    }
+    if let Ok(mut h) = histories.hf_aprs.lock() {
+        for e in load_key::<AprsPacket>(db, &k("hf_aprs")) {
+            h.push_back(e);
+        }
+    }
    if let Ok(mut h) = histories.cw.lock() {
        for e in load_key::<CwEvent>(db, &k("cw")) {
            h.push_back(e);
@@ -128,16 +133,32 @@ pub fn load_all(db: &PickleDb, rig_id: &str, histories: &Arc<DecoderHistories>)
            h.push_back(e);
        }
    }
+    if let Ok(mut h) = histories.ft4.lock() {
+        for e in load_key::<Ft8Message>(db, &k("ft4")) {
+            h.push_back(e);
+        }
+    }
+    if let Ok(mut h) = histories.ft2.lock() {
+        for e in load_key::<Ft8Message>(db, &k("ft2")) {
+            h.push_back(e);
+        }
+    }
    if let Ok(mut h) = histories.wspr.lock() {
        for e in load_key::<WsprMessage>(db, &k("wspr")) {
            h.push_back(e);
        }
    }
+    if let Ok(mut h) = histories.lrpt.lock() {
+        for e in load_key::<LrptImage>(db, &k("lrpt")) {
+            h.push_back(e);
+        }
+    }
    if let Ok(mut h) = histories.wefax.lock() {
        for e in load_key::<WefaxMessage>(db, &k("wefax")) {
            h.push_back(e);
        }
    }
+    histories.recalculate_total_count();
 }

 /// Flush `histories` to the database under `rig_id`-prefixed keys and sync.
@@ -162,6 +183,11 @@ pub fn flush_all(db: &mut PickleDb, rig_id: &str, histories: &Arc<DecoderHistori
        drop(h);
        save_key(db, &k("aprs"), &snapshot);
    }
+    if let Ok(h) = histories.hf_aprs.lock() {
+        let snapshot = h.clone();
+        drop(h);
+        save_key(db, &k("hf_aprs"), &snapshot);
+    }
    if let Ok(h) = histories.cw.lock() {
        let snapshot = h.clone();
        drop(h);
@@ -172,11 +198,26 @@ pub fn flush_all(db: &mut PickleDb, rig_id: &str, histories: &Arc<DecoderHistori
        drop(h);
        save_key(db, &k("ft8"), &snapshot);
    }
+    if let Ok(h) = histories.ft4.lock() {
+        let snapshot = h.clone();
+        drop(h);
+        save_key(db, &k("ft4"), &snapshot);
+    }
+    if let Ok(h) = histories.ft2.lock() {
+        let snapshot = h.clone();
+        drop(h);
+        save_key(db, &k("ft2"), &snapshot);
+    }
    if let Ok(h) = histories.wspr.lock() {
        let snapshot = h.clone();
        drop(h);
        save_key(db, &k("wspr"), &snapshot);
    }
+    if let Ok(h) = histories.lrpt.lock() {
+        let snapshot = h.clone();
+        drop(h);
+        save_key(db, &k("lrpt"), &snapshot);
+    }
    if let Ok(h) = histories.wefax.lock() {
        let snapshot = h.clone();
        drop(h);
@@ -185,20 +226,38 @@ pub fn flush_all(db: &mut PickleDb, rig_id: &str, histories: &Arc<DecoderHistori
    let _ = db.dump();
 }

+fn flush_all_rigs(db: &Mutex<PickleDb>, rig_histories: &[(String, Arc<DecoderHistories>)]) {
+    let Ok(mut guard) = db.lock() else {
+        tracing::warn!("history database mutex poisoned; skipping periodic flush");
+        return;
+    };
+    for (rig_id, histories) in rig_histories {
+        flush_all(&mut guard, rig_id, histories);
+    }
+}
+
 /// Spawn a Tokio task that flushes all rigs' histories to disk every 60 seconds.
+///
+/// Snapshot cloning, JSON serialization, and disk I/O run on Tokio's blocking
+/// pool so a large history database cannot stall an async runtime worker.
 pub fn spawn_flush_task(
    db: Arc<Mutex<PickleDb>>,
    rig_histories: Vec<(String, Arc<DecoderHistories>)>,
 ) {
    tokio::spawn(async move {
+        let rig_histories = Arc::new(rig_histories);
        let mut interval = tokio::time::interval(Duration::from_secs(60));
        interval.tick().await; // consume the immediate first tick
        loop {
            interval.tick().await;
-            if let Ok(mut guard) = db.lock() {
-                for (rig_id, histories) in &rig_histories {
-                    flush_all(&mut guard, rig_id, histories);
-                }
+            let db = Arc::clone(&db);
+            let rig_histories = Arc::clone(&rig_histories);
+            if let Err(err) = tokio::task::spawn_blocking(move || {
+                flush_all_rigs(&db, rig_histories.as_slice());
+            })
+            .await
+            {
+                tracing::warn!(error = %err, "history flush worker failed");
            }
        }
    });
@@ -302,4 +361,79 @@ mod tests {
        let _ = std::fs::remove_file(&db_file);
        let _ = std::fs::remove_dir(&dir);
    }
+
+    #[test]
+    fn flush_and_load_all_restores_previously_omitted_histories() {
+        let db_file = std::env::temp_dir().join(format!(
+            "trx_history_all_{}_{}.db",
+            std::process::id(),
+            now_unix_ms()
+        ));
+        let mut db = PickleDb::new(
+            &db_file,
+            PickleDbDumpPolicy::DumpUponRequest,
+            SerializationMethod::Json,
+        );
+        let source = DecoderHistories::new();
+        let now = Instant::now();
+
+        source.hf_aprs.lock().unwrap().push_back((
+            now,
+            AprsPacket {
+                rig_id: Some("rig-a".into()),
+                ts_ms: Some(now_unix_ms()),
+                src_call: "TEST".into(),
+                dest_call: "APRS".into(),
+                path: String::new(),
+                info: "history".into(),
+                info_bytes: Vec::new(),
+                packet_type: "position".into(),
+                crc_ok: true,
+                lat: None,
+                lon: None,
+                symbol_table: None,
+                symbol_code: None,
+            },
+        ));
+        for (queue, mode) in [(&source.ft4, "FT4"), (&source.ft2, "FT2")] {
+            queue.lock().unwrap().push_back((
+                now,
+                Ft8Message {
+                    rig_id: Some("rig-a".into()),
+                    ts_ms: now_unix_ms(),
+                    snr_db: -10.0,
+                    dt_s: 0.1,
+                    freq_hz: 1_000.0,
+                    message: mode.into(),
+                },
+            ));
+        }
+        source.lrpt.lock().unwrap().push_back((
+            now,
+            LrptImage {
+                rig_id: Some("rig-a".into()),
+                pass_start_ms: now_unix_ms(),
+                pass_end_ms: now_unix_ms(),
+                mcu_count: 1,
+                path: "/tmp/lrpt.png".into(),
+                ts_ms: Some(now_unix_ms()),
+                satellite: None,
+                channels: None,
+                geo_bounds: None,
+                ground_track: None,
+            },
+        ));
+
+        flush_all(&mut db, "rig-a", &source);
+        let restored = DecoderHistories::new();
+        load_all(&db, "rig-a", &restored);
+
+        assert_eq!(restored.hf_aprs.lock().unwrap().len(), 1);
+        assert_eq!(restored.ft4.lock().unwrap().len(), 1);
+        assert_eq!(restored.ft2.lock().unwrap().len(), 1);
+        assert_eq!(restored.lrpt.lock().unwrap().len(), 1);
+        assert_eq!(restored.estimated_total_count(), 4);
+
+        let _ = std::fs::remove_file(db_file);
+    }
 }
@@ -251,9 +251,9 @@ fn mul_freq_domain(buf: &mut [FftComplex<f32>], h_freq: &[FftComplex<f32>], scal
        unsafe {
            mul_freq_domain_neon(buf, h_freq, scale);
        }
-        return;
    }

+    #[cfg(not(target_arch = "aarch64"))]
    mul_freq_domain_scalar(buf, h_freq, scale);
 }
Author	SHA1	Message	Date
sjg	b20da5c541	style(ui): polish shared interaction components CI / lint (pull_request) Failing after 1s Details CI / test (pull_request) Failing after 1s Details CI / reuse (pull_request) Failing after 2s Details CI / lint (push) Failing after 2s Details CI / test (push) Failing after 1s Details CI / reuse (push) Failing after 2s Details	2026-08-01 10:43:29 +02:00
sjg	a0bdaa2c4b	feat(ui): improve radio operator experience CI / lint (pull_request) Failing after 1s Details CI / test (pull_request) Failing after 1s Details CI / reuse (pull_request) Failing after 1s Details CI / lint (push) Failing after 1s Details CI / test (push) Failing after 1s Details CI / reuse (push) Failing after 0s Details	2026-08-01 02:24:47 +02:00
sjg	6676b66993	[fix](trx-frontend): account for WFM interference in auto bandwidth CI / lint (pull_request) Failing after 1s Details CI / test (pull_request) Failing after 1s Details CI / reuse (pull_request) Failing after 0s Details CI / lint (push) Failing after 0s Details CI / test (push) Failing after 1s Details CI / reuse (push) Failing after 1s Details	2026-08-01 02:07:32 +02:00
sjg	412651d612	[fix](trx-frontend): narrow weak WFM to 60 kHz CI / lint (push) Failing after 1s Details CI / test (push) Failing after 2s Details CI / reuse (push) Failing after 1s Details	2026-08-01 02:04:14 +02:00
sjg	d347b493d9	[fix](trx-frontend): make auto bandwidth modulation-aware	2026-08-01 02:04:14 +02:00
sjg	39e59dca96	[fix](trx-server): gate test-only history imports CI / lint (pull_request) Failing after 1s Details CI / test (pull_request) Failing after 1s Details CI / reuse (pull_request) Failing after 1s Details CI / lint (push) Failing after 3s Details CI / test (push) Failing after 2s Details CI / reuse (push) Failing after 1s Details	2026-08-01 01:55:33 +02:00
sjg	5654520901	[fix](workspace): clear build and clippy warnings CI / lint (push) Failing after 1s Details CI / test (push) Failing after 1s Details CI / reuse (push) Failing after 1s Details	2026-08-01 01:52:08 +02:00
sjg	ff75fcc692	[refactor](trx-server): extract decoder history store CI / lint (pull_request) Failing after 2s Details CI / test (pull_request) Failing after 2s Details CI / reuse (pull_request) Failing after 1s Details CI / lint (push) Failing after 2s Details CI / test (push) Failing after 2s Details CI / reuse (push) Failing after 1s Details	2026-08-01 01:45:19 +02:00
sjg	4728b578ae	[refactor](trx-server): extract history policy	2026-08-01 01:44:26 +02:00
sjg	7db7fad9b0	[refactor](trx-frontend): define module service boundaries	2026-08-01 01:44:26 +02:00
sjg	830f7299fe	[fix](trx-frontend): vendor Opus decoder	2026-08-01 01:44:26 +02:00
sjg	061738a63b	[fix](trx-frontend): serialize plugin loading CI / lint (push) Failing after 1s Details CI / test (push) Failing after 1s Details CI / reuse (push) Failing after 1s Details	2026-08-01 01:43:50 +02:00
sjg	e8bd97655f	[fix](trx-server): offload history persistence CI / reuse (push) Failing after 1s Details CI / lint (push) Failing after 2s Details CI / test (push) Failing after 2s Details	2026-08-01 01:43:47 +02:00
sjg	7d0b36450d	[fix](trx-server): persist all decoder histories CI / reuse (push) Failing after 1s Details CI / lint (pull_request) Failing after 3s Details CI / test (pull_request) Failing after 1s Details CI / reuse (pull_request) Failing after 2s Details CI / lint (push) Failing after 1s Details CI / test (push) Failing after 1s Details	2026-08-01 01:23:36 +02:00