[fix](trx-frontend-http): serve the Statistics and Bookmarks routes

The server answers /, /map, /digital-modes, /recorder, /settings and
/about with the application shell, but never had a route for /statistics
or /bookmarks.  Both fell through to the catch-all asset handler, so
reloading on either one downloaded a file instead of reopening the page.
Only in-app navigation worked, which is why it went unnoticed until
Statistics was reachable from the Tools menu.

Add the two missing shell routes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GdyUjuXejCEfiub675z6cz
Signed-off-by: Stan Grams <sjg@haxx.space>

container/Containerfile

@@ -46,10 +46,23 @@ RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs \
 # sccache — shared compilation cache. Enabled at build time via
 # RUSTC_WRAPPER (see the CI workflow and .devcontainer), not repo-wide, so
 # non-SDK builds are unaffected. musl build is static and runs anywhere.
+#
+# The release asset is per-architecture, so resolve it from `uname -m` rather
+# than hardcoding one triple: everything else in this image is arch-agnostic,
+# and a pinned x86_64 URL is what forces an amd64 build (and Rosetta or qemu)
+# on an arm64 host. `uname -m` reflects the build platform under plain
+# docker/podman build as well as buildx, unlike the BuildKit-only TARGETARCH.
 ARG SCCACHE_VERSION=0.8.2
-RUN curl -fsSL "https://github.com/mozilla/sccache/releases/download/v${SCCACHE_VERSION}/sccache-v${SCCACHE_VERSION}-x86_64-unknown-linux-musl.tar.gz" \
+RUN set -eux; \
-      | tar -xz -C /tmp \
+    case "$(uname -m)" in \
-    && install -m755 "/tmp/sccache-v${SCCACHE_VERSION}-x86_64-unknown-linux-musl/sccache" /usr/local/bin/sccache \
+      x86_64)  sccache_arch=x86_64 ;; \
-    && rm -rf /tmp/sccache-*
+      aarch64|arm64) sccache_arch=aarch64 ;; \
+      *) echo "unsupported architecture for sccache: $(uname -m)" >&2; exit 1 ;; \
+    esac; \
+    sccache_dist="sccache-v${SCCACHE_VERSION}-${sccache_arch}-unknown-linux-musl"; \
+    curl -fsSL "https://github.com/mozilla/sccache/releases/download/v${SCCACHE_VERSION}/${sccache_dist}.tar.gz" \
+      | tar -xz -C /tmp; \
+    install -m755 "/tmp/${sccache_dist}/sccache" /usr/local/bin/sccache; \
+    rm -rf /tmp/sccache-*
 
 WORKDIR /work

container/README.md

@@ -17,6 +17,13 @@ and `clippy` are identical everywhere — no "works on my machine".
 
 ## Build and publish
 
+Nothing in the image is architecture-specific: the base image, the Debian build
+dependencies, Node.js, `rustup` and the `sccache` release all resolve per
+architecture, so the same `Containerfile` builds natively on x86_64 and arm64.
+
+Single architecture — the tag then only works on the architecture you built it
+on:
+
 ```bash
 # from the repo root
 podman build -t git.haxx.space/sjg/trx-rs/sdk:latest container
@@ -24,12 +31,60 @@ podman login git.haxx.space
 podman push git.haxx.space/sjg/trx-rs/sdk:latest
 ```
 
+**Both architectures without emulation.** The CI runner is x86_64 and Apple
+Silicon developer machines are arm64, so `:latest` has to be a manifest list —
+a single-architecture tag makes the other side fall back to Rosetta or qemu.
+Build each half natively on a host of that architecture, then join them:
+
+```bash
+# on an x86_64 host
+podman build --platform linux/amd64 -t git.haxx.space/sjg/trx-rs/sdk:latest-amd64 container
+podman push git.haxx.space/sjg/trx-rs/sdk:latest-amd64
+
+# on an arm64 host
+podman build --platform linux/arm64 -t git.haxx.space/sjg/trx-rs/sdk:latest-arm64 container
+podman push git.haxx.space/sjg/trx-rs/sdk:latest-arm64
+
+# from either, once both are pushed
+podman manifest create git.haxx.space/sjg/trx-rs/sdk:latest \
+  git.haxx.space/sjg/trx-rs/sdk:latest-amd64 \
+  git.haxx.space/sjg/trx-rs/sdk:latest-arm64
+podman manifest push --all git.haxx.space/sjg/trx-rs/sdk:latest
+```
+
+Building both from one machine is a single command
+(`podman build --platform linux/amd64,linux/arm64 --manifest ...`), but the
+foreign half runs under emulation and is slow — the two-host flow above is
+what keeps every build native.
+
 Tag with the Rust version too (e.g. `:1.97.1`) if you want reproducible pins.
 Make the package **public** (Gitea → Packages → the image → Settings) so the CI
 runner and developers can pull it without credentials. If you keep it private,
 add `credentials:` under the workflow's `container:` and log the runner into the
 registry.
 
+Pushing a rebuilt image is not enough on its own: `:latest` is a moving tag, and
+act_runner reuses whatever it cached the first time unless `force_pull: true` is
+set (see `runner-config.example.yaml`). Without it the job log says
+`Image exists? true` and the run behaves as though the image were never
+rebuilt — a tool added to the `Containerfile` reads as missing from the image.
+Either set `force_pull`, or refresh the VM's copy by hand:
+
+```bash
+docker pull git.haxx.space/sjg/trx-rs/sdk:latest
+docker run --rm git.haxx.space/sjg/trx-rs/sdk:latest sccache --version
+```
+
+### macOS note
+
+Apple's `container` CLI builds through a BuildKit helper VM that is configured
+with Rosetta whether or not the target is x86_64, so `container build` fails
+with *"Rosetta is not installed"* on a clean machine. That is a property of the
+builder, not of this image — `container run` works natively without it. Either
+install Rosetta once (`softwareupdate --install-rosetta`, after which an arm64
+build still produces a native arm64 image), or build with Podman, whose arm64
+BuildKit needs no emulation.
+
 ## Developer use
 
 Reproducible one-off build, no local toolchain needed:
@@ -111,8 +166,10 @@ adduser -S -D -H -h /var/lib/act_runner act
 addgroup act docker
 
 # 2. act_runner binary (static Go build, works on musl)
+#    Upstream publishes per-architecture builds; pick the host's.
+case "$(uname -m)" in x86_64) arch=amd64 ;; aarch64) arch=arm64 ;; esac
 curl -fsSL -o /usr/local/bin/act_runner \
-  https://gitea.com/gitea/act_runner/releases/download/v0.2.11/act_runner-0.2.11-linux-amd64
+  "https://gitea.com/gitea/act_runner/releases/download/v0.2.11/act_runner-0.2.11-linux-${arch}"
 chmod +x /usr/local/bin/act_runner
 
 # 3. Config + register one runner per project (scope keeps their jobs apart)

container/runner-config.example.yaml

@@ -31,5 +31,17 @@ container:
   # host (create it first: `mkdir -p /var/cache/sccache`), matching SCCACHE_DIR
   # in the workflow.
   options: "--cpus=2 -v /var/cache/sccache:/sccache"
+  # act_runner rejects every bind mount unless it is listed here — the default
+  # is an empty allowlist, so the -v above is dropped with only a
+  # "[...] is not a valid volume, will be ignored" line in the job log, and
+  # SCCACHE_DIR then points at a directory that does not outlive the job.
+  valid_volumes:
+    - /var/cache/sccache
   # Reuse the host VM's Docker network for the built-in cache/artifact server.
   network: "host"
+  # The workflow pulls the SDK image by the moving `:latest` tag. Without this
+  # the runner logs "Image exists? true" and reuses whatever it cached the
+  # first time, so pushing a rebuilt image has no effect until someone pulls
+  # on the VM by hand — which looks like the image is missing a tool it in
+  # fact has. The extra registry round-trip per job is nothing next to a build.
+  force_pull: true

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

@@ -637,6 +637,22 @@ function elementById(id) {
   };
   const layoutCapabilities = { broadcast: false, digital: false };
   let activeRigId = null;
+  const layoutSections = [
+    { id: "advanced-radio-controls", key: "advanced" },
+    { id: "audio-controls", key: "audio" },
+    { id: "scheduler-controls", key: "scheduler" }
+  ];
+  const seededSections = /* @__PURE__ */ new Set();
+  let appliedLayoutName = null;
+  function seedLayoutSections(layout, layoutChanged) {
+    layoutSections.forEach(({ id, key }) => {
+      const section = document.getElementById(id);
+      if (!section) return;
+      if (!layoutChanged && seededSections.has(id)) return;
+      seededSections.add(id);
+      section.open = layout[key];
+    });
+  }
   function layoutStorageKey() {
     return activeRigId ? `trxOperatorLayout:${activeRigId}` : "trxOperatorLayout";
   }
@@ -690,12 +706,9 @@ function elementById(id) {
     const layout = layouts[permittedName];
     document.body.dataset.operatorLayout = permittedName in layouts ? permittedName : "compact";
     if (options.persist !== false) localStorage.setItem(layoutStorageKey(), permittedName);
-    const details = document.getElementById("advanced-radio-controls");
+    const layoutChanged = appliedLayoutName !== permittedName;
-    if (details) details.open = layout.advanced;
+    appliedLayoutName = permittedName;
-    const audioDetails = document.getElementById("audio-controls");
+    seedLayoutSections(layout, layoutChanged);
-    if (audioDetails) audioDetails.open = layout.audio;
-    const schedulerDetails = document.getElementById("scheduler-controls");
-    if (schedulerDetails) schedulerDetails.open = layout.scheduler;
     if (options.navigate && typeof browserWindow.navigateToTab === "function") {
       browserWindow.navigateToTab(layout.preferredTab);
     }
@@ -734,6 +747,95 @@ function elementById(id) {
       api.applyLayout(savedLayoutName(), { persist: false });
     }
   }
+  const overflowOrder = [".operator-layout-picker", ".header-style-pick", "#theme-toggle"];
+  function anchorMenu(button, menu) {
+    const rect = button.getBoundingClientRect();
+    if (menu.parentElement !== document.body) document.body.appendChild(menu);
+    menu.style.position = "fixed";
+    menu.style.zIndex = "9700";
+    menu.style.top = "0px";
+    menu.style.bottom = "auto";
+    menu.style.right = "auto";
+    const width = menu.offsetWidth || 200;
+    const height = menu.offsetHeight || 0;
+    menu.style.left = `${String(Math.round(Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8)))}px`;
+    const below = rect.bottom + 8;
+    if (below + height <= window.innerHeight - 8) {
+      menu.style.top = `${String(Math.round(below))}px`;
+    } else {
+      menu.style.top = "auto";
+      menu.style.bottom = `${String(Math.round(window.innerHeight - rect.top + 8))}px`;
+    }
+  }
+  function installTopBarOverflow() {
+    const actions = document.querySelector(".top-bar-actions");
+    if (!actions || document.getElementById("top-bar-more")) return;
+    const wrap = document.createElement("div");
+    wrap.id = "top-bar-more";
+    wrap.className = "top-bar-more";
+    const button = document.createElement("button");
+    button.type = "button";
+    button.id = "top-bar-more-btn";
+    button.className = "header-bar-btn top-bar-more-btn";
+    button.textContent = "⋯";
+    button.setAttribute("aria-haspopup", "menu");
+    button.setAttribute("aria-expanded", "false");
+    button.setAttribute("aria-label", "More controls");
+    button.title = "More controls";
+    const menu = document.createElement("div");
+    menu.id = "top-bar-more-menu";
+    menu.className = "top-bar-more-menu";
+    menu.setAttribute("role", "menu");
+    button.setAttribute("aria-controls", menu.id);
+    wrap.append(button, menu);
+    actions.appendChild(wrap);
+    const closeMenu = () => {
+      menu.classList.remove("is-open");
+      button.setAttribute("aria-expanded", "false");
+    };
+    button.addEventListener("click", () => {
+      const open = menu.classList.toggle("is-open");
+      button.setAttribute("aria-expanded", String(open));
+      if (open) anchorMenu(button, menu);
+    });
+    document.addEventListener("click", (event) => {
+      if (!(event.target instanceof Node)) {
+        closeMenu();
+        return;
+      }
+      if (!wrap.contains(event.target) && !menu.contains(event.target)) closeMenu();
+    });
+    document.addEventListener("keydown", (event) => {
+      if (event.key === "Escape") closeMenu();
+    });
+    const barFits = () => {
+      const bar = actions.closest(".tab-bar");
+      if (!bar) return true;
+      const identity = bar.querySelector(".header-main");
+      const nav = bar.querySelector(".tab-bar-nav");
+      const gutters = 48;
+      const needed = (identity?.offsetWidth ?? 0) + (nav?.scrollWidth ?? 0) + actions.scrollWidth + gutters;
+      return needed <= bar.clientWidth;
+    };
+    const reflowOverflow = () => {
+      overflowOrder.forEach((selector) => {
+        const element = menu.querySelector(selector);
+        if (element) actions.insertBefore(element, wrap);
+      });
+      wrap.hidden = true;
+      for (const selector of overflowOrder) {
+        if (barFits()) break;
+        const element = actions.querySelector(selector);
+        if (!element) continue;
+        wrap.hidden = false;
+        menu.appendChild(element);
+      }
+      wrap.hidden = menu.children.length === 0;
+      if (wrap.hidden) closeMenu();
+    };
+    reflowOverflow();
+    window.addEventListener("resize", reflowOverflow);
+  }
   function installMobileMore() {
     const nav = document.querySelector(".tab-bar-nav");
     if (!nav || document.getElementById("mobile-more-btn")) return;
@@ -741,7 +843,8 @@ function elementById(id) {
     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.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">Tools</span>';
+    more.setAttribute("aria-label", "Tools and settings");
     more.setAttribute("aria-haspopup", "menu");
     more.setAttribute("aria-expanded", "false");
     const menu = document.createElement("div");
@@ -773,7 +876,10 @@ function elementById(id) {
     more.addEventListener("click", () => {
       const open = menu.classList.toggle("is-open");
       more.setAttribute("aria-expanded", String(open));
-      if (open) menu.querySelector('[role="menuitem"]')?.focus();
+      if (open) {
+        anchorMenu(more, menu);
+        menu.querySelector('[role="menuitem"]')?.focus();
+      }
     });
     document.addEventListener("click", (event) => {
       if (!(event.target instanceof Node) || !menu.contains(event.target) && !more.contains(event.target)) closeMore();
@@ -840,6 +946,7 @@ function elementById(id) {
   api.init = function init() {
     ensureLiveRegions();
     installLayoutControls();
+    installTopBarOverflow();
     installMobileMore();
     installDecoderPicker();
     installDecoderBadges();
@@ -1934,7 +2041,6 @@ var signalSplitValueEl = document.getElementById("signal-split-value");
 var overviewPeakHoldEl = document.getElementById("overview-peak-hold");
 var themeToggleBtn = document.getElementById("theme-toggle");
 var headerRigSwitchSelect = document.getElementById("header-rig-switch-select");
-var headerRigSummary = document.getElementById("header-rig-summary");
 var headerStylePickSelect = document.getElementById("header-style-pick-select");
 var rdsPsOverlay = document.getElementById("rds-ps-overlay");
 var tabMainEl = document.getElementById("tab-main");
@@ -2651,19 +2757,6 @@ function populateRigPicker(selectEl, rigIds, activeRigId, disabled) {
   }
   selectEl.disabled = disabled;
 }
-function updateRigIdentitySummary(rigId, pending = false) {
-  if (!headerRigSummary) return;
-  const rig = serverRigs.find((entry) => entry?.remote === rigId);
-  if (!rig) {
-    headerRigSummary.textContent = pending ? "Switching rigs…" : "No rig details available";
-    return;
-  }
-  const hardware = [rig.manufacturer, rig.model].map((value) => String(value || "").trim()).filter(Boolean).join(" ") || rig.remote;
-  const modes = Array.isArray(rig.supported_modes) ? rig.supported_modes.map(normalizeMode).filter(Boolean) : [];
-  const features = [rig.tx ? "TX" : "RX", rig.filter_controls ? "SDR filters" : null, ...modes.slice(0, 5)];
-  if (modes.length > 5) features.push(`+${modes.length - 5} modes`);
-  headerRigSummary.textContent = `${pending ? "Switching to " : ""}${hardware} · ${features.filter(Boolean).join(" · ")}`;
-}
 function updateRigSubtitle(activeRigId) {
   if (!rigSubtitle) return;
   const name = activeRigId && lastRigDisplayNames[activeRigId] || activeRigId || "--";
@@ -2694,7 +2787,6 @@ function applyRigList(activeRigId, rigIds, displayNames = {}) {
   const disableSwitch = lastRigIds.length === 0 || !authRole || authRole === "rx";
   populateRigPicker(headerRigSwitchSelect, lastRigIds, lastActiveRigId, disableSwitch);
   updateRigSubtitle(lastActiveRigId);
-  updateRigIdentitySummary(lastActiveRigId);
   window.trxUi?.setActiveRig(lastActiveRigId);
   if (rigListChanged) {
     window.trx.modules.scheduler?.setRig(lastActiveRigId);
@@ -4955,7 +5047,7 @@ async function switchRigFromSelect(selectEl) {
   rigSwitchInProgress = true;
   setControlPending(selectEl, true);
   selectEl.closest(".header-rig-switch")?.classList.add("is-switching");
-  updateRigIdentitySummary(nextRig, true);
+  showHint(`Switching to ${lastRigDisplayNames[nextRig] || nextRig}…`);
   showHint(`Switching to ${lastRigDisplayNames[nextRig] || nextRig}…`);
   try {
     const sidParam = sseSessionId ? `&session_id=${encodeURIComponent(sseSessionId)}` : "";
@@ -4963,7 +5055,6 @@ async function switchRigFromSelect(selectEl) {
     lastActiveRigId = nextRig;
     resetDecoderStateOnRigSwitch();
     updateRigSubtitle(lastActiveRigId);
-    updateRigIdentitySummary(lastActiveRigId);
     window.trxUi?.setActiveRig(lastActiveRigId);
     window.trx.modules.scheduler?.setRig(lastActiveRigId);
     window.trx.modules.backgroundDecode?.setRig(lastActiveRigId);
@@ -4982,7 +5073,6 @@ async function switchRigFromSelect(selectEl) {
   } catch (err) {
     console.error("select_rig failed:", err);
     selectEl.value = prevRig || "";
-    updateRigIdentitySummary(prevRig);
     window.trxUi?.notify("Rig could not be switched", { kind: "error" });
   } finally {
     rigSwitchInProgress = false;

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

@@ -46,7 +46,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
         <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>
+            <span class="tab-label">Radio</span>
           </button>
           <button class="tab" data-tab="bookmarks">
             <svg class="tab-icon" aria-hidden="true"><use href="#icon-bookmark"/></svg>
@@ -85,7 +85,6 @@ SPDX-License-Identifier: GPL-2.0-or-later
         <button id="header-rec-btn" class="header-bar-btn header-rec-btn" type="button" aria-label="Toggle recording" title="Toggle recording">REC</button>
         <div class="header-rig-switch">
           <select id="header-rig-switch-select" aria-label="Select active rig"></select>
-          <span id="header-rig-summary" class="header-rig-summary" aria-live="polite"></span>
         </div>
         <div class="header-style-pick">
           <select id="header-style-pick-select" aria-label="Select UI style">
@@ -1052,6 +1051,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
       </template>
     </div>
     <div id="tab-statistics" class="tab-panel" style="display:none;">
+      <h2 class="section-heading">Statistics</h2>
       <template id="tmpl-statistics">
       <div class="stats-controls">
         <div class="stats-control-group">
@@ -1192,6 +1192,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
       </section>
     </div>
     <div id="tab-settings" class="tab-panel" style="display:none;">
+      <h2 class="section-heading">Settings</h2>
       <div class="sub-tab-bar">
         <button class="sub-tab active" data-subtab="settings-scheduler">Scheduler</button>
         <button class="sub-tab" data-subtab="settings-background-decode">Background Decode</button>
@@ -1487,6 +1488,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
       </div>
     </div>
     <div id="tab-about" class="tab-panel" style="display:none;">
+      <h2 class="section-heading">About</h2>
       <div id="auth-badge" style="display:none; margin-bottom: 1rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: 0.25rem; color: var(--text-muted); font-size: 0.85rem;">Authenticated as: <strong id="auth-role-badge">--</strong></div>
       <template id="tmpl-about">
       <div class="sub-tab-bar">

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

@@ -1229,12 +1229,20 @@ small { color: var(--text-muted); }
   gap: 0;
   flex-shrink: 0;
 }
+/* One row, always.  Controls that do not fit are moved into the overflow menu
+ * by ui-core rather than wrapping: wrapping made the header's height depend on
+ * the viewport width in a way that was not even monotonic (112px at 1440,
+ * 169px at 1100, 131px at 900), which is what made the bar feel unstable. */
 .top-bar-actions {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
-  gap: 0.45rem 0.6rem;
+  gap: 0.4rem;
   min-width: 0;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+}
+/* Every control in the bar is the same height and none of them stretch. */
+.top-bar-actions > * {
+  flex: 0 0 auto;
 }
 .header-bar-btn.header-audio-btn {
   width: 2rem;
@@ -1403,21 +1411,13 @@ small { color: var(--text-muted); }
   gap: 0.8rem;
   padding: 0.9rem 0.2rem 0;
 }
+/* Inline, not stacked: the summary used to sit under the select, making this
+ * the only 54px control in a bar of 32px ones. */
 .header-rig-switch {
-  display: grid;
+  display: flex;
-  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
-  align-items: start;
+  gap: 0.4rem;
-  gap: 0.35rem;
+  min-width: 0;
-}
-.header-rig-summary {
-  display: block;
-  max-width: 20rem;
-  color: var(--text-muted);
-  font-size: var(--fs-xs);
-  line-height: 1.35;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 .header-rig-switch select {
   min-width: 8rem;
@@ -1531,7 +1531,19 @@ small { color: var(--text-muted); }
   align-items: center;
   gap: 0.2rem;
   min-width: 0;
-  flex-wrap: wrap;
+  /* Never wraps.  It must still be able to shrink below its content, or it
+   * overlaps the controls; the menus it anchors are reparented to the body on
+   * open, so clipping here no longer reaches them. */
+  flex-wrap: nowrap;
+  overflow: hidden;
+}
+.tab-bar-nav .tab { flex: 0 0 auto; }
+/* Icons before scrolling: every tab already carries one, and four icons plus
+ * More always fit, so the strip never has to hide a destination. */
+@media (max-width: 1360px) and (min-width: 701px) {
+  .tab-bar-nav .tab .tab-label { display: none; }
+  .tab-bar-nav .tab .tab-icon, .tab-bar-nav .tab .tab-more-icon { display: block; }
+  .tab-bar-nav .tab { padding: 0.5rem 0.6rem; }
 }
 .tab {
   background: transparent;
@@ -1554,6 +1566,7 @@ small { color: var(--text-muted); }
   flex-shrink: 0;
 }
 .tab-label { display: block; }
+.tab-more-icon { display: none; }
 .about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
 .about-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0; overflow: hidden; }
 .about-card-title { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-heading); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--card-bg) 50%, var(--bg)); }
@@ -2964,7 +2977,10 @@ button.is-active {
   text-transform: uppercase;
   overflow: visible;
 }
-.operator-layout-picker::before { content: "Layout"; }
+/* The prefix made the least-used control the widest in the bar; the
+ * select carries its own aria-label and title instead. */
+.operator-layout-picker { padding-left: 0; }
+.operator-layout-picker select { max-width: 8rem; }
 .operator-layout-picker select {
   width: auto;
   min-height: 2rem;
@@ -3060,9 +3076,22 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
   body[data-operator-layout="broadcast"] .controls-row { grid-template-columns: 1fr auto; }
   body[data-operator-layout="broadcast"] #wfm-controls-col { grid-column: 1 / -1; }
 }
-.mobile-more-btn, .mobile-more-menu, .decoder-tab-select { display: none; }
+/* One navigation model at every width.  Statistics, Recorder, Settings and
+ * About are occasional destinations: they live behind More rather than
+ * competing with the operating tabs for the row and then scrolling out of
+ * reach.  The mobile layout already grouped them this way; the desktop strip
+ * now matches it, which is why the tab strip no longer needs to scroll. */
+.tab-bar-nav .tab[data-tab="statistics"],
+.tab-bar-nav .tab[data-tab="recorder"],
+.tab-bar-nav .tab[data-tab="settings"],
+.tab-bar-nav .tab[data-tab="about"] { display: none; }
+.mobile-more-btn { display: flex; flex: 0 0 auto; }
+.mobile-more-menu, .decoder-tab-select { display: none; }
+.tab-bar-nav { position: relative; }
 .mobile-more-menu {
-  position: fixed;
+  position: absolute;
+  top: calc(100% + 0.4rem);
+  right: 0;
   right: max(0.75rem, env(safe-area-inset-right));
   bottom: calc(5.4rem + env(safe-area-inset-bottom));
   z-index: 80;
@@ -3251,7 +3280,7 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
     color: var(--text);
     box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
   }
-  .tab-icon { display: block; }
+  .tab-icon, .tab-more-icon { display: block; }
   /* Shorten long tab labels to keep bottom nav compact */
   .tab[data-tab="bookmarks"] .tab-label { font-size: 0.6rem; }
   .tab[data-tab="digital-modes"] .tab-label  { font-size: 0.6rem; }
@@ -3259,6 +3288,12 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
   .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-menu {
+    position: fixed;
+    top: auto;
+    right: max(0.75rem, env(safe-area-inset-right));
+    bottom: calc(5.4rem + env(safe-area-inset-bottom));
+  }
   .mobile-more-btn[aria-expanded="true"] {
     color: var(--accent-text);
     background: color-mix(in srgb, var(--accent-green) 10%, transparent);
@@ -3282,24 +3317,24 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
   .toast-region { bottom: calc(5.7rem + env(safe-area-inset-bottom)); }
   .top-bar-actions {
     width: 100%;
-    justify-content: flex-start;
+    justify-content: flex-end;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
-    gap: 0.45rem;
+    gap: 0.4rem;
   }
   .operator-layout-picker { max-width: 100%; }
   .operator-layout-picker select { max-width: 10rem; }
   .header-rig-switch,
   .header-style-pick {
-    flex: 1 1 12rem;
+    flex: 0 0 auto;
     min-width: 0;
   }
   .header-rig-switch select,
   .header-style-pick select {
-    width: 100%;
+    width: auto;
     min-width: 0;
   }
   .header-bar-btn {
-    flex: 1 1 calc(50% - 0.3rem);
+    flex: 0 0 auto;
     min-width: 0;
   }
   #tab-main,
@@ -5153,7 +5188,6 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  padding: 1rem;
 }
 .stats-controls {
   display: flex;
@@ -5379,3 +5413,51 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
     font-size: max(0.75rem, 12px);
   }
 }
+
+
+/* --- Top bar overflow menu ------------------------------------------------ */
+.top-bar-more { position: relative; }
+.top-bar-more[hidden] { display: none; }
+.top-bar-more-btn {
+  width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  padding: 0;
+  font-size: 1rem;
+  line-height: 1;
+}
+.top-bar-more-menu {
+  position: absolute;
+  top: calc(100% + 0.35rem);
+  right: 0;
+  z-index: 40;
+  display: none;
+  flex-direction: column;
+  gap: 0.4rem;
+  min-width: 12rem;
+  padding: 0.5rem;
+  border: 1px solid var(--border-light);
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
+}
+.top-bar-more-menu.is-open { display: flex; }
+.top-bar-more-menu > * { width: 100%; }
+.top-bar-more-menu select { width: 100%; max-width: none; }
+
+
+/* Page title for destinations reached through the Tools menu.  The tab strip
+ * cannot show which of them is active, so each states its own name.
+ *
+ * The margin is the spacing on the plain block panels; #tab-statistics is a
+ * flex column with its own `gap`, where the margin lands on top of that gap
+ * and doubles the space under the title. */
+.section-heading {
+  margin: 0 0 var(--space-3);
+  font-size: 1.15rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--text);
+}
+
+#tab-statistics > .section-heading { margin-bottom: 0; }

src/trx-client/trx-frontend/trx-frontend-http/frontend/src/app.ts

@@ -724,7 +724,6 @@ const signalSplitValueEl = document.getElementById("signal-split-value");
 const overviewPeakHoldEl = document.getElementById("overview-peak-hold") as HTMLInputElement | null;
 const themeToggleBtn = document.getElementById("theme-toggle") as HTMLButtonElement | null;
 const headerRigSwitchSelect = document.getElementById("header-rig-switch-select") as HTMLSelectElement | null;
-const headerRigSummary = document.getElementById("header-rig-summary");
 const headerStylePickSelect = document.getElementById("header-style-pick-select") as HTMLSelectElement | null;
 const rdsPsOverlay = document.getElementById("rds-ps-overlay");
 const tabMainEl = document.getElementById("tab-main");
@@ -1371,20 +1370,6 @@ function populateRigPicker(selectEl: HTMLSelectElement | null, rigIds: string[],
   selectEl.disabled = disabled;
 }
 
-function updateRigIdentitySummary(rigId: string | null, pending = false) {
-  if (!headerRigSummary) return;
-  const rig = serverRigs.find((entry) => entry?.remote === rigId);
-  if (!rig) {
-    headerRigSummary.textContent = pending ? "Switching rigs…" : "No rig details available";
-    return;
-  }
-  const hardware = [rig.manufacturer, rig.model].map(value => String(value || "").trim()).filter(Boolean).join(" ") || rig.remote;
-  const modes = Array.isArray(rig.supported_modes) ? rig.supported_modes.map(normalizeMode).filter(Boolean) : [];
-  const features = [rig.tx ? "TX" : "RX", rig.filter_controls ? "SDR filters" : null, ...modes.slice(0, 5)];
-  if (modes.length > 5) features.push(`+${modes.length - 5} modes`);
-  headerRigSummary.textContent = `${pending ? "Switching to " : ""}${hardware} · ${features.filter(Boolean).join(" · ")}`;
-}
-
 function updateRigSubtitle(activeRigId: string | null) {
   if (!rigSubtitle) return;
   const name = (activeRigId && lastRigDisplayNames[activeRigId]) || activeRigId || "--";
@@ -1421,7 +1406,6 @@ function applyRigList(activeRigId: string | null, rigIds: string[], displayNames
   const disableSwitch = lastRigIds.length === 0 || !authRole || authRole === "rx";
   populateRigPicker(headerRigSwitchSelect, lastRigIds, lastActiveRigId, disableSwitch);
   updateRigSubtitle(lastActiveRigId);
-  updateRigIdentitySummary(lastActiveRigId);
   window.trxUi?.setActiveRig(lastActiveRigId);
   if (rigListChanged) {
     window.trx.modules.scheduler?.setRig(lastActiveRigId);
@@ -4023,7 +4007,7 @@ async function switchRigFromSelect(selectEl: HTMLSelectElement) {
   rigSwitchInProgress = true;
   setControlPending(selectEl, true);
   selectEl.closest(".header-rig-switch")?.classList.add("is-switching");
-  updateRigIdentitySummary(nextRig, true);
+  showHint(`Switching to ${lastRigDisplayNames[nextRig] || nextRig}…`);
   showHint(`Switching to ${lastRigDisplayNames[nextRig] || nextRig}…`);
   try {
     const sidParam = sseSessionId ? `&session_id=${encodeURIComponent(sseSessionId)}` : "";
@@ -4031,7 +4015,6 @@ async function switchRigFromSelect(selectEl: HTMLSelectElement) {
     lastActiveRigId = nextRig;
     resetDecoderStateOnRigSwitch();
     updateRigSubtitle(lastActiveRigId);
-    updateRigIdentitySummary(lastActiveRigId);
     window.trxUi?.setActiveRig(lastActiveRigId);
     window.trx.modules.scheduler?.setRig(lastActiveRigId);
     window.trx.modules.backgroundDecode?.setRig(lastActiveRigId);
@@ -4050,7 +4033,6 @@ async function switchRigFromSelect(selectEl: HTMLSelectElement) {
   } catch (err) {
     console.error("select_rig failed:", err);
     selectEl.value = prevRig || "";
-    updateRigIdentitySummary(prevRig);
     window.trxUi?.notify("Rig could not be switched", { kind: "error" });
   } finally {
     rigSwitchInProgress = false;

src/trx-client/trx-frontend/trx-frontend-http/frontend/src/ui-core.ts

@@ -195,6 +195,31 @@ function elementById<T extends HTMLElement>(id: string): T {
   const layoutCapabilities: Record<LayoutCapability, boolean> = { broadcast: false, digital: false };
   let activeRigId: string | null = null;
 
+  // A layout seeds the collapsible sections; it does not hold them there.
+  // applyLayout runs on every rig-state refresh, so re-applying the disclosure
+  // state unconditionally would reopen or close sections under the operator
+  // once a second — the reason a section could not be expanded while a layout
+  // that collapses it was selected.  Sections are therefore written only when
+  // the layout actually changes, or the first time each one appears in the DOM
+  // (the advanced controls are built after the first applyLayout call).
+  const layoutSections: { id: string; key: "advanced" | "audio" | "scheduler" }[] = [
+    { id: "advanced-radio-controls", key: "advanced" },
+    { id: "audio-controls", key: "audio" },
+    { id: "scheduler-controls", key: "scheduler" },
+  ];
+  const seededSections = new Set<string>();
+  let appliedLayoutName: LayoutName | null = null;
+
+  function seedLayoutSections(layout: OperatorLayout, layoutChanged: boolean) {
+    layoutSections.forEach(({ id, key }) => {
+      const section = document.getElementById(id) as HTMLDetailsElement | null;
+      if (!section) return;
+      if (!layoutChanged && seededSections.has(id)) return;
+      seededSections.add(id);
+      section.open = layout[key];
+    });
+  }
+
   function layoutStorageKey() {
     return activeRigId ? `trxOperatorLayout:${activeRigId}` : "trxOperatorLayout";
   }
@@ -255,12 +280,9 @@ function elementById<T extends HTMLElement>(id: string): T {
     const layout = layouts[permittedName];
     document.body.dataset.operatorLayout = permittedName in layouts ? permittedName : "compact";
     if (options.persist !== false) localStorage.setItem(layoutStorageKey(), permittedName);
-    const details = document.getElementById("advanced-radio-controls") as HTMLDetailsElement | null;
+    const layoutChanged = appliedLayoutName !== permittedName;
-    if (details) details.open = layout.advanced;
+    appliedLayoutName = permittedName;
-    const audioDetails = document.getElementById("audio-controls") as HTMLDetailsElement | null;
+    seedLayoutSections(layout, layoutChanged);
-    if (audioDetails) audioDetails.open = layout.audio;
-    const schedulerDetails = document.getElementById("scheduler-controls") as HTMLDetailsElement | null;
-    if (schedulerDetails) schedulerDetails.open = layout.scheduler;
     if (options.navigate && typeof browserWindow.navigateToTab === "function") {
       browserWindow.navigateToTab(layout.preferredTab);
     }
@@ -300,6 +322,125 @@ function elementById<T extends HTMLElement>(id: string): T {
     }
   }
 
+  // Secondary controls, in the order they leave the bar when it gets tight.
+  // Audio, record and the rig picker are the operating controls and stay.
+  const overflowOrder = [".operator-layout-picker", ".header-style-pick", "#theme-toggle"];
+
+  // Anchored at paint time in fixed coordinates.  An absolutely positioned
+  // dropdown is clipped by any scrolling ancestor and trapped inside the
+  // stacking context its ancestors create, so it can end up squashed inside
+  // the bar or painted underneath page content.  Fixed positioning answers to
+  // the viewport instead, and the menu flips above its button near the bottom
+  // edge.
+  function anchorMenu(button: HTMLElement, menu: HTMLElement) {
+    const rect = button.getBoundingClientRect();
+    // Reparent to the body.  Fixed positioning escapes clipping but not
+    // stacking: the header sets `z-index: 2`, which makes it a stacking
+    // context, so any z-index the menu carries is confined below every panel
+    // that paints above level 2 — the spectrum overlays reach 9600.  Only
+    // leaving that subtree lets the menu sit above the page.
+    if (menu.parentElement !== document.body) document.body.appendChild(menu);
+    menu.style.position = "fixed";
+    menu.style.zIndex = "9700";
+    menu.style.top = "0px";
+    menu.style.bottom = "auto";
+    // The stylesheet pins these menus to the right of their anchor; leaving
+    // that in place while setting a left would stretch them across the bar.
+    menu.style.right = "auto";
+    const width = menu.offsetWidth || 200;
+    const height = menu.offsetHeight || 0;
+    menu.style.left = `${String(Math.round(Math.min(Math.max(8, rect.right - width), window.innerWidth - width - 8)))}px`;
+    const below = rect.bottom + 8;
+    if (below + height <= window.innerHeight - 8) {
+      menu.style.top = `${String(Math.round(below))}px`;
+    } else {
+      menu.style.top = "auto";
+      menu.style.bottom = `${String(Math.round(window.innerHeight - rect.top + 8))}px`;
+    }
+  }
+
+  function installTopBarOverflow() {
+    const actions = document.querySelector<HTMLElement>(".top-bar-actions");
+    if (!actions || document.getElementById("top-bar-more")) return;
+    const wrap = document.createElement("div");
+    wrap.id = "top-bar-more";
+    wrap.className = "top-bar-more";
+    const button = document.createElement("button");
+    button.type = "button";
+    button.id = "top-bar-more-btn";
+    button.className = "header-bar-btn top-bar-more-btn";
+    button.textContent = "⋯";
+    button.setAttribute("aria-haspopup", "menu");
+    button.setAttribute("aria-expanded", "false");
+    button.setAttribute("aria-label", "More controls");
+    button.title = "More controls";
+    const menu = document.createElement("div");
+    menu.id = "top-bar-more-menu";
+    menu.className = "top-bar-more-menu";
+    menu.setAttribute("role", "menu");
+    button.setAttribute("aria-controls", menu.id);
+    wrap.append(button, menu);
+    actions.appendChild(wrap);
+
+    const closeMenu = () => {
+      menu.classList.remove("is-open");
+      button.setAttribute("aria-expanded", "false");
+    };
+    button.addEventListener("click", () => {
+      const open = menu.classList.toggle("is-open");
+      button.setAttribute("aria-expanded", String(open));
+      if (open) anchorMenu(button, menu);
+    });
+    document.addEventListener("click", (event) => {
+      if (!(event.target instanceof Node)) { closeMenu(); return; }
+      if (!wrap.contains(event.target) && !menu.contains(event.target)) closeMenu();
+    });
+    document.addEventListener("keydown", (event) => { if (event.key === "Escape") closeMenu(); });
+
+    // Measured against the bar, not the actions container: the actions are
+    // sized by their content, so their own scrollWidth never exceeds their
+    // clientWidth.  A viewport-width threshold is not enough either — how much
+    // fits depends on the rig name and the translated labels, so a bar that is
+    // wide enough on one rig clips a control on another.
+    // `bar.scrollWidth > bar.clientWidth` is true even when nothing is clipped,
+    // so it cannot be the test.  What actually matters is that the controls stay
+    // inside the bar and the page tabs are not squeezed into a scroller: seeing
+    // every tab beats keeping the style picker inline.
+    // Compare natural widths against the space available.  Rendered widths
+    // cannot answer this: the nav has min-width 0 and scrolls, so it always
+    // shrinks to the leftover space and always reports "scrolling", while the
+    // bar reports overflow even when nothing is clipped.  scrollWidth on a
+    // scroll container is its unconstrained content width, which is what a fit
+    // test needs.
+    const barFits = () => {
+      const bar = actions.closest<HTMLElement>(".tab-bar");
+      if (!bar) return true;
+      const identity = bar.querySelector<HTMLElement>(".header-main");
+      const nav = bar.querySelector<HTMLElement>(".tab-bar-nav");
+      const gutters = 48;
+      const needed = (identity?.offsetWidth ?? 0) + (nav?.scrollWidth ?? 0) + actions.scrollWidth + gutters;
+      return needed <= bar.clientWidth;
+    };
+    const reflowOverflow = () => {
+      overflowOrder.forEach((selector) => {
+        const element = menu.querySelector<HTMLElement>(selector);
+        if (element) actions.insertBefore(element, wrap);
+      });
+      wrap.hidden = true;
+      for (const selector of overflowOrder) {
+        if (barFits()) break;
+        const element = actions.querySelector<HTMLElement>(selector);
+        if (!element) continue;
+        wrap.hidden = false;
+        menu.appendChild(element);
+      }
+      wrap.hidden = menu.children.length === 0;
+      if (wrap.hidden) closeMenu();
+    };
+    reflowOverflow();
+    window.addEventListener("resize", reflowOverflow);
+  }
+
   function installMobileMore() {
     const nav = document.querySelector(".tab-bar-nav");
     if (!nav || document.getElementById("mobile-more-btn")) return;
@@ -307,7 +448,8 @@ function elementById<T extends HTMLElement>(id: string): T {
     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.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">Tools</span>';
+    more.setAttribute("aria-label", "Tools and settings");
     more.setAttribute("aria-haspopup", "menu");
     more.setAttribute("aria-expanded", "false");
     const menu = document.createElement("div");
@@ -339,7 +481,10 @@ function elementById<T extends HTMLElement>(id: string): T {
     more.addEventListener("click", () => {
       const open = menu.classList.toggle("is-open");
       more.setAttribute("aria-expanded", String(open));
-      if (open) menu.querySelector<HTMLElement>('[role="menuitem"]')?.focus();
+      if (open) {
+        anchorMenu(more, menu);
+        menu.querySelector<HTMLElement>('[role="menuitem"]')?.focus();
+      }
     });
     document.addEventListener("click", (event) => {
       if (!(event.target instanceof Node) || (!menu.contains(event.target) && !more.contains(event.target))) closeMore();
@@ -404,6 +549,7 @@ function elementById<T extends HTMLElement>(id: string): T {
   api.init = function init() {
     ensureLiveRegions();
     installLayoutControls();
+    installTopBarOverflow();
     installMobileMore();
     installDecoderPicker();
     installDecoderBadges();

src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/browser-smoke.mjs

@@ -184,7 +184,10 @@ try {
   await page.locator('.tab[data-tab="main"]').click();
   assert.equal(new URL(page.url()).pathname, "/");
 
-  await page.locator('.tab[data-tab="about"]').click();
+  // About is an occasional destination, so it lives behind More at every
+  // width rather than in the operating tab strip.
+  await page.locator("#mobile-more-btn").click();
+  await page.locator('[data-navigate-tab="about"]').click();
   await page.locator("#tab-about").waitFor({ state: "visible" });
   assert.equal(new URL(page.url()).pathname, "/about");
 

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

@@ -143,4 +143,31 @@ ui.applyLayout("digital");
 assert.equal(document.body.dataset.operatorLayout, "compact");
 assert.equal(localStorage.getItem("trxOperatorLayout:rig-b"), "compact");
 
+// A layout seeds the collapsible sections but must not hold them there:
+// applyLayout runs on every rig-state refresh, so an operator who expands a
+// section a layout collapses by default had it shut again about once a second.
+const schedulerSection = new Element("details", document);
+schedulerSection.id = "scheduler-controls";
+const audioSection = new Element("details", document);
+audioSection.id = "audio-controls";
+
+ui.setActiveRig("rig-c");
+ui.applyLayout("compact");
+assert.equal(schedulerSection.open, false, "compact seeds the scheduler section closed");
+
+schedulerSection.open = true;             // operator expands it
+ui.applyLayout("compact");                // the next rig-state refresh
+assert.equal(schedulerSection.open, true, "re-applying the same layout leaves sections alone");
+ui.setActiveRig("rig-c");
+assert.equal(schedulerSection.open, true, "a rig-state refresh leaves sections alone");
+
+// Choosing a different layout is an explicit request for its defaults.
+ui.applyLayout("full");
+assert.equal(schedulerSection.open, true, "full seeds the scheduler section open");
+assert.equal(audioSection.open, true, "full seeds the audio section open");
+audioSection.open = false;
+ui.applyLayout("compact");
+assert.equal(audioSection.open, false, "compact seeds the audio section closed");
+assert.equal(schedulerSection.open, false, "switching layout reseeds every section");
+
 console.log("ui-core component tests passed");

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

@@ -95,6 +95,18 @@ pub(crate) async fn about_index(req: HttpRequest) -> impl Responder {
     static_asset_response(&req, "text/html; charset=utf-8", c)
 }
 
+#[get("/statistics")]
+pub(crate) async fn statistics_index(req: HttpRequest) -> impl Responder {
+    let c = gz_index_html();
+    static_asset_response(&req, "text/html; charset=utf-8", c)
+}
+
+#[get("/bookmarks")]
+pub(crate) async fn bookmarks_index(req: HttpRequest) -> impl Responder {
+    let c = gz_index_html();
+    static_asset_response(&req, "text/html; charset=utf-8", c)
+}
+
 // ---------------------------------------------------------------------------
 // Favicon & logo
 // ---------------------------------------------------------------------------

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

@@ -637,6 +637,8 @@ pub fn configure(cfg: &mut web::ServiceConfig) {
         .service(assets::recorder_index)
         .service(assets::settings_index)
         .service(assets::about_index)
+        .service(assets::statistics_index)
+        .service(assets::bookmarks_index)
         .service(assets::favicon)
         .service(assets::favicon_png)
         .service(assets::logo)