[feat](trx-frontend-http): mark Tools active for its destinations

Grouping Statistics, Recorder, Settings and About behind Tools left the
tab strip looking identical on all four: the destination's own button
carries the active class, but the strip hides that button, so nothing
was marked.  The page titles named the page without saying how you got
there.

Mark the Tools button when the active destination is one the strip hides.
That state is read from the button's computed display rather than from a
second copy of the grouping, so the two cannot drift: whatever ui-core
puts in the menu lights up Tools, and a destination promoted back into
the strip stops doing so with no further change.

Tools already carries the tab class, so the existing active styling
applies unchanged.

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>

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

@@ -747,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;
@@ -754,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");
@@ -786,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();
@@ -853,6 +946,7 @@ function elementById(id) {
   api.init = function init() {
     ensureLiveRegions();
     installLayoutControls();
+    installTopBarOverflow();
     installMobileMore();
     installDecoderPicker();
     installDecoderBadges();
@@ -1947,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");
@@ -2664,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 || "--";
@@ -2707,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);
@@ -4968,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)}` : "";
@@ -4976,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);
@@ -4995,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;
@@ -5515,6 +5592,8 @@ function navigateToTab(name, options = {}) {
   _activeTab = name;
   document.querySelectorAll(".tab-bar .tab").forEach((t) => t.classList.remove("active"));
   btn.classList.add("active");
+  const toolsBtn = document.getElementById("mobile-more-btn");
+  if (toolsBtn) toolsBtn.classList.toggle("active", getComputedStyle(btn).display === "none");
   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}`);

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;
@@ -4618,6 +4600,12 @@ function navigateToTab(name: TabName, options: { updateHistory?: boolean; replac
   _activeTab = name;
   document.querySelectorAll(".tab-bar .tab").forEach((t) => t.classList.remove("active"));
   btn.classList.add("active");
+  // A destination the strip hides is reached through Tools, so mark that
+  // button instead — otherwise the strip looks identical on all four of them.
+  // Derived from what is actually hidden rather than from a second copy of the
+  // grouping, which would drift from the one ui-core installs.
+  const toolsBtn = document.getElementById("mobile-more-btn");
+  if (toolsBtn) toolsBtn.classList.toggle("active", getComputedStyle(btn).display === "none");
   window.trxUi?.syncSelectedTab(document.querySelector(".tab-bar-nav"), btn);
   document.querySelectorAll<HTMLElement>(".tab-panel").forEach((p) => p.style.display = "none");
   const panel = document.getElementById(`tab-${name}`);

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

@@ -322,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;
@@ -329,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");
@@ -361,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();
@@ -426,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

@@ -9,6 +9,9 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { chromium } from "playwright-core";
 
+// page.evaluate callbacks run in the browser, not in this Node process.
+/* global document */
+
 const frontendDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
 const webDir = path.resolve(frontendDir, "../assets/web");
 const generatedDir = path.join(webDir, "generated");
@@ -184,7 +187,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");
 
@@ -192,6 +198,55 @@ try {
   await page.locator("#tab-main").waitFor({ state: "visible" });
   assert.equal(new URL(page.url()).pathname, "/");
   assert.deepEqual(runtimeErrors, []);
+
+  // --- Layout regressions -------------------------------------------------
+  // Every fault below shipped at some point while the rest of this file
+  // passed, because nothing here looked at geometry: a header whose height
+  // tracked the viewport, controls that stretched, a tab strip that ran under
+  // the controls, and a dropdown that opened underneath the spectrum.
+  for (const width of [1440, 1280, 1100, 900]) {
+    await page.setViewportSize({ width, height: 900 });
+    await page.waitForTimeout(250);
+    const header = await page.evaluate(() => {
+      const bar = document.querySelector(".tab-bar");
+      const nav = document.querySelector(".tab-bar-nav");
+      const actions = document.querySelector(".top-bar-actions");
+      const controls = [...actions.children]
+        .filter((el) => !el.hidden && el.getBoundingClientRect().height > 0)
+        .map((el) => Math.round(el.getBoundingClientRect().height));
+      return {
+        barHeight: Math.round(bar.getBoundingClientRect().height),
+        // The tabs, not the strip: with the strip allowed to overflow its box
+        // shrinks while its content paints across the controls, so the
+        // container's own rect never registers the collision.
+        overlap: Math.round(Math.max(...[...nav.querySelectorAll(".tab")]
+          .filter((tab) => tab.offsetParent !== null)
+          .map((tab) => tab.getBoundingClientRect().right))
+          - actions.getBoundingClientRect().left),
+        heights: [...new Set(controls)],
+        pageScrollsSideways: document.documentElement.scrollWidth > document.documentElement.clientWidth + 1,
+      };
+    });
+    assert.ok(header.barHeight <= 96, `header is ${header.barHeight}px at ${width}px; it should stay one row`);
+    assert.ok(header.overlap <= 0, `tab strip overlaps the controls by ${header.overlap}px at ${width}px`);
+    assert.ok(header.heights.length <= 2, `controls have heights ${header.heights.join(", ")} at ${width}px`);
+    assert.equal(header.pageScrollsSideways, false, `page scrolls sideways at ${width}px`);
+  }
+
+  // A dropdown must paint over the page, not inside the header: fixed
+  // positioning escapes clipping but not the header's stacking context.
+  await page.setViewportSize({ width: 1280, height: 900 });
+  await page.waitForTimeout(250);
+  const menu = await page.evaluate(() => {
+    document.getElementById("mobile-more-btn").click();
+    const element = document.getElementById("mobile-more-menu");
+    const rect = element.getBoundingClientRect();
+    const hit = document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2);
+    return { width: Math.round(rect.width), height: Math.round(rect.height), onTop: element.contains(hit) };
+  });
+  assert.ok(menu.height > 40 && menu.width > 80, `menu rendered ${menu.width}x${menu.height}`);
+  assert.ok(menu.onTop, "menu is painted underneath the page");
+
 } finally {
   await browser.close();
   await new Promise((resolve, reject) => server.close((error) => error ? reject(error) : resolve()));

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)