[fix](trx-frontend-http): give satellite passes their own page

Pass predictions were a third view inside the Weather Satellite Decoder card, under Digital modes — a planning tool filed behind a decoder toggle, beside the FT8 and WEFAX panels it has nothing to do with. Nothing about knowing when a bird comes over belongs there. Move them to /satellites, reached from Tools alongside Statistics, Recorder, Settings and About: occasional destinations that live behind that menu rather than taking a slot in the operating strip. Adding a sixth strip button wrapped the phone nav onto two rows and cost the desktop strip its labels at 1280px, so the tab is hidden from the strip exactly the way its four peers already are — the nav is byte-for-byte what it was. The prediction code moves out of sat.ts into its own plugin that loads with the page, so the decoder card no longer carries it. Countdowns stop when the page is hidden and each visit reloads, since passes go stale while it is closed. The server grows a /satellites index route so a deep link or a refresh serves the SPA shell rather than a 404. Closes #47 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SyX26FCpMQxiBoC7r5K1A7 Signed-off-by: Stan Grams <sjg@haxx.space>
[fix](trx-frontend-http): size the nav's labels against the screen, not the font
2026-08-06 23:23:48 +02:00 · 2026-08-06 19:41:45 +02:00 · 2026-08-06 19:14:31 +02:00 · 2026-08-06 19:06:15 +02:00
19 changed files with 998 additions and 583 deletions
@@ -885,7 +885,7 @@ function elementById(id) {
      if (restoreFocus) more.focus();
    };
    api.closeMobileOverlays = closeMore;
-    ["statistics", "recorder", "settings", "about"].forEach((tabName) => {
+    ["satellites", "statistics", "recorder", "settings", "about"].forEach((tabName) => {
      const source = nav.querySelector(`[data-tab="${tabName}"]`);
      if (!source) return;
      const item = document.createElement("button");
@@ -1529,6 +1529,7 @@ var TAB_ORDER = [
  "bookmarks",
  "digital-modes",
  "map",
+  "satellites",
  "statistics",
  "recorder",
  "settings",
@@ -1539,6 +1540,7 @@ var TAB_PATHS = {
  bookmarks: "/bookmarks",
  "digital-modes": "/digital-modes",
  map: "/map",
+  satellites: "/satellites",
  statistics: "/statistics",
  recorder: "/recorder",
  settings: "/settings",
@@ -1756,6 +1758,7 @@ var pluginGroups = {
  ],
  "map-data": ["/map-core.js", "/ais.js", "/vdes.js", "/aprs.js", "/hf-aprs.js"],
  map: ["/map-core.js", "/ais.js", "/vdes.js", "/aprs.js", "/hf-aprs.js", "/sat.js", "/sat-scheduler.js"],
+  satellites: ["/satellite-predictions.js"],
  statistics: ["/map-core.js"],
  bookmarks: ["/bookmarks.js"],
  recorder: [],
@@ -5844,6 +5847,7 @@ function _initMapWhenReady() {
 }
 function navigateToTab(name, options = {}) {
  window.trxUi?.closeMobileOverlays?.();
+  const leavingSatellites = _activeTab === "satellites" && name !== "satellites";
  const { updateHistory = true, replaceHistory = false } = options;
  if (authEnabled && !authRole && name !== "main") {
    showAuthGate(false);
@@ -5873,7 +5877,10 @@ function navigateToTab(name, options = {}) {
    updateTabHistory(name, replaceHistory);
  }
  scheduleSpectrumLayout();
-  void loadPluginsForTab(name).catch((error) => {
+  if (leavingSatellites) window.clearSatPredictionDom?.();
+  void loadPluginsForTab(name).then(() => {
+    if (name === "satellites") window.refreshSatPredictions?.();
+  }).catch((error) => {
    console.error(error);
  });
  if (name === "map") {
@@ -6320,9 +6327,6 @@ function _wireSubTabBar(bar) {
        if (window.refreshCwTonePicker) window.refreshCwTonePicker();
      });
    }
-    if (btn.dataset.subtab !== "sat" && typeof window.clearSatPredictionDom === "function") {
-      window.clearSatPredictionDom();
-    }
  });
 }
 document.querySelectorAll(".sub-tab-bar").forEach(_wireSubTabBar);
@@ -8,7 +8,6 @@ var satDom = {
  status: document.getElementById("sat-status"),
  liveView: document.getElementById("sat-live-view"),
  historyView: document.getElementById("sat-history-view"),
-  predictionsView: document.getElementById("sat-predictions-view"),
  liveLatest: document.getElementById("sat-live-latest"),
  historyList: document.getElementById("sat-history-list"),
  historyCount: document.getElementById("sat-history-count"),
@@ -17,29 +16,12 @@ var satDom = {
  typeFilter: document.getElementById("sat-type-filter"),
  lrptState: document.getElementById("sat-lrpt-state"),
  viewLiveBtn: document.getElementById("sat-view-live"),
-  viewHistoryBtn: document.getElementById("sat-view-history"),
-  viewPredBtn: document.getElementById("sat-view-predictions"),
-  predFilter: document.getElementById("sat-pred-filter"),
-  predMinEl: document.getElementById("sat-pred-min-el"),
-  predCategory: document.getElementById("sat-pred-category"),
-  predCurrentList: document.getElementById("sat-pred-current-list"),
-  predUpcomingList: document.getElementById("sat-pred-list"),
-  predCurrentSec: document.getElementById("sat-pred-current-section"),
-  predUpcomingSec: document.getElementById("sat-pred-upcoming-section"),
-  predStatus: document.getElementById("sat-pred-status")
+  viewHistoryBtn: document.getElementById("sat-view-history")
 };
 var satImageHistory = [];
 var SAT_MAX_IMAGES = 100;
-var SAT_PRED_PAGE_SIZE = 50;
-var satPredShowAll = false;
 var satFilterText = "";
 var satActiveView = "live";
-var satPredData = [];
-var satPredFilterText = "";
-var satPredMinEl = 0;
-var satPredCategory = "all";
-var satPredSatCount = 0;
-var satPredCountdownTimer = null;
 function scheduleSatUi(key, job) {
  if (typeof satWindow.trxScheduleUiFrameJob === "function") {
    satWindow.trxScheduleUiFrameJob(key, job);
@@ -48,37 +30,19 @@ function scheduleSatUi(key, job) {
  job();
 }
 function switchSatView(view) {
-  const leavingPredictions = satActiveView === "predictions" && view !== "predictions";
  satActiveView = view;
  if (satDom.liveView) satDom.liveView.style.display = view === "live" ? "" : "none";
  if (satDom.historyView) satDom.historyView.style.display = view === "history" ? "" : "none";
-  if (satDom.predictionsView) satDom.predictionsView.style.display = view === "predictions" ? "" : "none";
  if (satDom.viewLiveBtn) satDom.viewLiveBtn.classList.toggle("sat-view-active", view === "live");
  if (satDom.viewHistoryBtn) satDom.viewHistoryBtn.classList.toggle("sat-view-active", view === "history");
-  if (satDom.viewPredBtn) satDom.viewPredBtn.classList.toggle("sat-view-active", view === "predictions");
-  if (leavingPredictions) clearPredictionDom();
-  if (view === "history") {
-    renderSatHistoryTable();
-  } else if (view === "predictions") {
-    satPredShowAll = false;
-    void loadSatPredictions();
-  }
+  if (view === "history") renderSatHistoryTable();
 }
-function clearPredictionDom() {
-  stopCountdownTimer();
-  if (satDom.predCurrentList) satDom.predCurrentList.innerHTML = "";
-  if (satDom.predUpcomingList) satDom.predUpcomingList.innerHTML = "";
-}
-satWindow.clearSatPredictionDom = clearPredictionDom;
 satDom.viewLiveBtn?.addEventListener("click", () => {
  switchSatView("live");
 });
 satDom.viewHistoryBtn?.addEventListener("click", () => {
  switchSatView("history");
 });
-satDom.viewPredBtn?.addEventListener("click", () => {
-  switchSatView("predictions");
-});
 var lastSatLrptOn = null;
 satWindow.updateSatLiveState = function(update) {
  if (!satDom.lrptState) return;
@@ -275,200 +239,6 @@ document.getElementById("settings-clear-sat-history")?.addEventListener("click",
    }
  })();
 });
-function azToCardinal(deg) {
-  const dirs = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
-  return dirs[Math.round(deg / 45) % 8] ?? "N";
-}
-function formatPredTime(ms) {
-  const d = new Date(ms);
-  const now = /* @__PURE__ */ new Date();
-  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  const day = d.getUTCDay() !== now.getUTCDay() ? `${dayNames[d.getUTCDay()] ?? ""} ` : "";
-  const hh = String(d.getUTCHours()).padStart(2, "0");
-  const mm = String(d.getUTCMinutes()).padStart(2, "0");
-  return `${day}${hh}:${mm}`;
-}
-function formatPredDuration(s) {
-  if (s >= 60) return `${Math.round(s / 60)} min`;
-  return `${s}s`;
-}
-function formatCountdown(ms) {
-  const totalSec = Math.max(0, Math.floor(ms / 1e3));
-  const m = Math.floor(totalSec / 60);
-  const s = totalSec % 60;
-  return `${m}:${String(s).padStart(2, "0")}`;
-}
-function elevationClass(deg) {
-  if (deg >= 45) return "sat-pred-el-high";
-  if (deg >= 10) return "sat-pred-el-mid";
-  return "sat-pred-el-low";
-}
-function stopCountdownTimer() {
-  if (satPredCountdownTimer) {
-    clearInterval(satPredCountdownTimer);
-    satPredCountdownTimer = null;
-  }
-}
-function startCountdownTimer(container) {
-  const countdownEls = container?.querySelectorAll(".sat-pred-col-countdown") ?? [];
-  if (countdownEls.length === 0) return;
-  satPredCountdownTimer = setInterval(() => {
-    if (satActiveView !== "predictions") {
-      stopCountdownTimer();
-      return;
-    }
-    const n = Date.now();
-    let anyActive = false;
-    for (const el of countdownEls) {
-      const los = Number.parseInt(el.dataset.los ?? "0", 10);
-      const rem = los - n;
-      if (rem > 0) {
-        el.textContent = formatCountdown(rem);
-        anyActive = true;
-      } else {
-        el.textContent = "0:00";
-      }
-    }
-    if (!anyActive) {
-      stopCountdownTimer();
-      renderSatPredictions(getFilteredPredictions());
-    }
-  }, 1e3);
-}
-function buildCurrentPassRow(pass, now) {
-  const row = document.createElement("div");
-  row.className = "sat-pred-row-current";
-  const dir = `${azToCardinal(pass.azimuth_aos_deg)} → ${azToCardinal(pass.azimuth_los_deg)}`;
-  const remaining = Math.max(0, pass.los_ms - now);
-  row.innerHTML = [
-    `<span class="sat-pred-col-sat">${pass.satellite}</span>`,
-    `<span class="sat-pred-col-el ${elevationClass(pass.max_elevation_deg)}">${pass.max_elevation_deg.toFixed(1)}°</span>`,
-    `<span class="sat-pred-col-time">${formatPredTime(pass.aos_ms)}</span>`,
-    `<span class="sat-pred-col-time">${formatPredTime(pass.los_ms)}</span>`,
-    `<span class="sat-pred-col-countdown" data-los="${pass.los_ms}">${formatCountdown(remaining)}</span>`,
-    `<span class="sat-pred-col-dir">${dir}</span>`
-  ].join("");
-  return row;
-}
-function buildUpcomingPassRow(pass) {
-  const row = document.createElement("div");
-  row.className = "sat-pred-row";
-  const dir = `${azToCardinal(pass.azimuth_aos_deg)} → ${azToCardinal(pass.azimuth_los_deg)}`;
-  row.innerHTML = [
-    `<span class="sat-pred-col-time">${formatPredTime(pass.aos_ms)}</span>`,
-    `<span class="sat-pred-col-sat">${pass.satellite}</span>`,
-    `<span class="sat-pred-col-el ${elevationClass(pass.max_elevation_deg)}">${pass.max_elevation_deg.toFixed(1)}°</span>`,
-    `<span class="sat-pred-col-dur">${formatPredDuration(pass.duration_s)}</span>`,
-    `<span class="sat-pred-col-dir">${dir}</span>`
-  ].join("");
-  return row;
-}
-function getFilteredPredictions() {
-  let items = satPredData;
-  if (satPredCategory !== "all") items = items.filter((p) => p.category === satPredCategory);
-  if (satPredMinEl > 0) items = items.filter((p) => p.max_elevation_deg >= satPredMinEl);
-  if (satPredFilterText) items = items.filter((p) => p.satellite.toUpperCase().includes(satPredFilterText));
-  return items;
-}
-function applyPredFilters() {
-  renderSatPredictions(getFilteredPredictions());
-}
-var satPredictionFilter = satDom.predFilter;
-satPredictionFilter?.addEventListener("input", () => {
-  satPredFilterText = satPredictionFilter.value.trim().toUpperCase();
-  applyPredFilters();
-});
-var satPredictionMinElevation = satDom.predMinEl;
-satPredictionMinElevation?.addEventListener("change", () => {
-  satPredMinEl = Number.parseInt(satPredictionMinElevation.value, 10) || 0;
-  applyPredFilters();
-});
-var satPredictionCategory = satDom.predCategory;
-satPredictionCategory?.addEventListener("change", () => {
-  satPredCategory = satPredictionCategory.value;
-  applyPredFilters();
-});
-function renderSatPredictions(passes, error) {
-  stopCountdownTimer();
-  if (error) {
-    if (satDom.predCurrentList) satDom.predCurrentList.innerHTML = "";
-    if (satDom.predUpcomingList) satDom.predUpcomingList.innerHTML = "";
-    if (satDom.predCurrentSec) satDom.predCurrentSec.style.display = "none";
-    if (satDom.predUpcomingSec) satDom.predUpcomingSec.style.display = "none";
-    if (satDom.predStatus) satDom.predStatus.textContent = error;
-    return;
-  }
-  if (!Array.isArray(passes) || passes.length === 0) {
-    if (satDom.predCurrentList) satDom.predCurrentList.innerHTML = "";
-    if (satDom.predUpcomingList) satDom.predUpcomingList.innerHTML = "";
-    if (satDom.predCurrentSec) satDom.predCurrentSec.style.display = "none";
-    if (satDom.predUpcomingSec) satDom.predUpcomingSec.style.display = "none";
-    if (satDom.predStatus) satDom.predStatus.textContent = "No passes found in the next 24 hours.";
-    return;
-  }
-  const now = Date.now();
-  const current = passes.filter((p) => p.aos_ms <= now && p.los_ms > now);
-  const upcoming = passes.filter((p) => p.aos_ms > now);
-  if (satDom.predCurrentSec) satDom.predCurrentSec.style.display = current.length > 0 ? "" : "none";
-  if (satDom.predCurrentList) {
-    if (current.length === 0) {
-      satDom.predCurrentList.innerHTML = "";
-    } else {
-      const frag = document.createDocumentFragment();
-      for (const pass of current) frag.appendChild(buildCurrentPassRow(pass, now));
-      satDom.predCurrentList.replaceChildren(frag);
-    }
-  }
-  const upcomingLimit = satPredShowAll ? upcoming.length : SAT_PRED_PAGE_SIZE;
-  const visibleUpcoming = upcoming.slice(0, upcomingLimit);
-  const hiddenCount = upcoming.length - visibleUpcoming.length;
-  if (satDom.predUpcomingSec) satDom.predUpcomingSec.style.display = upcoming.length > 0 ? "" : "none";
-  if (satDom.predUpcomingList) {
-    const frag = document.createDocumentFragment();
-    for (const pass of visibleUpcoming) frag.appendChild(buildUpcomingPassRow(pass));
-    if (hiddenCount > 0) {
-      const moreRow = document.createElement("div");
-      moreRow.className = "sat-pred-row";
-      moreRow.style.cursor = "pointer";
-      moreRow.style.textAlign = "center";
-      moreRow.innerHTML = `<span style="grid-column:1/-1;color:var(--accent);font-size:0.82rem;">Show ${hiddenCount} more passes…</span>`;
-      moreRow.addEventListener("click", () => {
-        satPredShowAll = true;
-        renderSatPredictions(getFilteredPredictions());
-      });
-      frag.appendChild(moreRow);
-    }
-    satDom.predUpcomingList.replaceChildren(frag);
-  }
-  if (satDom.predStatus) {
-    let text = `${current.length} active · ${upcoming.length} upcoming · times in UTC`;
-    if (satPredSatCount > 0) text += ` · ${satPredSatCount} satellites tracked`;
-    satDom.predStatus.textContent = text;
-  }
-  if (current.length > 0 && satActiveView === "predictions") {
-    startCountdownTimer(satDom.predCurrentList);
-  }
-}
-async function loadSatPredictions() {
-  if (satDom.predStatus) satDom.predStatus.textContent = "Loading predictions…";
-  if (satDom.predCurrentList) satDom.predCurrentList.innerHTML = "";
-  if (satDom.predUpcomingList) satDom.predUpcomingList.innerHTML = "";
-  try {
-    const resp = await fetch("/sat_passes");
-    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-    const data = await resp.json();
-    satPredSatCount = data.satellite_count || 0;
-    if (data.error) {
-      satPredData = [];
-      renderSatPredictions([], data.error);
-    } else {
-      satPredData = data.passes || [];
-      renderSatPredictions(getFilteredPredictions());
-    }
-  } catch (error) {
-    renderSatPredictions([], `Failed to load predictions: ${error instanceof Error ? error.message : String(error)}`);
-  }
-}
 satWindow.satShowOnMap = function(south, west, north, east) {
  if (typeof satWindow.enableMapSourceFilter === "function") {
    satWindow.enableMapSourceFilter("sat");
@@ -0,0 +1,228 @@
+// src/plugins/satellite-predictions.ts
+var predWindow = window;
+var dom = {
+  page: document.getElementById("tab-satellites"),
+  filter: document.getElementById("sat-pred-filter"),
+  minElevation: document.getElementById("sat-pred-min-el"),
+  category: document.getElementById("sat-pred-category"),
+  currentList: document.getElementById("sat-pred-current-list"),
+  upcomingList: document.getElementById("sat-pred-list"),
+  currentSection: document.getElementById("sat-pred-current-section"),
+  upcomingSection: document.getElementById("sat-pred-upcoming-section"),
+  status: document.getElementById("sat-pred-status")
+};
+var PAGE_SIZE = 50;
+var predShowAll = false;
+var predData = [];
+var predFilterText = "";
+var predMinEl = 0;
+var predCategory = "all";
+var predSatCount = 0;
+var predCountdownTimer = null;
+function isPageVisible() {
+  return !!dom.page && dom.page.style.display !== "none";
+}
+function azToCardinal(deg) {
+  const dirs = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
+  return dirs[Math.round(deg / 45) % 8] ?? "N";
+}
+function formatPredTime(ms) {
+  const d = new Date(ms);
+  const now = /* @__PURE__ */ new Date();
+  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const day = d.getUTCDay() !== now.getUTCDay() ? `${dayNames[d.getUTCDay()] ?? ""} ` : "";
+  const hh = String(d.getUTCHours()).padStart(2, "0");
+  const mm = String(d.getUTCMinutes()).padStart(2, "0");
+  return `${day}${hh}:${mm}`;
+}
+function formatPredDuration(s) {
+  if (s >= 60) return `${Math.round(s / 60)} min`;
+  return `${s}s`;
+}
+function formatCountdown(ms) {
+  const totalSec = Math.max(0, Math.floor(ms / 1e3));
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+function elevationClass(deg) {
+  if (deg >= 45) return "sat-pred-el-high";
+  if (deg >= 10) return "sat-pred-el-mid";
+  return "sat-pred-el-low";
+}
+function stopCountdownTimer() {
+  if (predCountdownTimer) {
+    clearInterval(predCountdownTimer);
+    predCountdownTimer = null;
+  }
+}
+function startCountdownTimer(container) {
+  const countdownEls = container?.querySelectorAll(".sat-pred-col-countdown") ?? [];
+  if (countdownEls.length === 0) return;
+  predCountdownTimer = setInterval(() => {
+    if (!isPageVisible()) {
+      stopCountdownTimer();
+      return;
+    }
+    const n = Date.now();
+    let anyActive = false;
+    for (const el of countdownEls) {
+      const los = Number.parseInt(el.dataset.los ?? "0", 10);
+      const rem = los - n;
+      if (rem > 0) {
+        el.textContent = formatCountdown(rem);
+        anyActive = true;
+      } else {
+        el.textContent = "0:00";
+      }
+    }
+    if (!anyActive) {
+      stopCountdownTimer();
+      render(filtered());
+    }
+  }, 1e3);
+}
+function buildCurrentPassRow(pass, now) {
+  const row = document.createElement("div");
+  row.className = "sat-pred-row-current";
+  const dir = `${azToCardinal(pass.azimuth_aos_deg)} → ${azToCardinal(pass.azimuth_los_deg)}`;
+  const remaining = Math.max(0, pass.los_ms - now);
+  row.innerHTML = [
+    `<span class="sat-pred-col-sat">${pass.satellite}</span>`,
+    `<span class="sat-pred-col-el ${elevationClass(pass.max_elevation_deg)}">${pass.max_elevation_deg.toFixed(1)}°</span>`,
+    `<span class="sat-pred-col-time">${formatPredTime(pass.aos_ms)}</span>`,
+    `<span class="sat-pred-col-time">${formatPredTime(pass.los_ms)}</span>`,
+    `<span class="sat-pred-col-countdown" data-los="${pass.los_ms}">${formatCountdown(remaining)}</span>`,
+    `<span class="sat-pred-col-dir">${dir}</span>`
+  ].join("");
+  return row;
+}
+function buildUpcomingPassRow(pass) {
+  const row = document.createElement("div");
+  row.className = "sat-pred-row";
+  const dir = `${azToCardinal(pass.azimuth_aos_deg)} → ${azToCardinal(pass.azimuth_los_deg)}`;
+  row.innerHTML = [
+    `<span class="sat-pred-col-time">${formatPredTime(pass.aos_ms)}</span>`,
+    `<span class="sat-pred-col-sat">${pass.satellite}</span>`,
+    `<span class="sat-pred-col-el ${elevationClass(pass.max_elevation_deg)}">${pass.max_elevation_deg.toFixed(1)}°</span>`,
+    `<span class="sat-pred-col-dur">${formatPredDuration(pass.duration_s)}</span>`,
+    `<span class="sat-pred-col-dir">${dir}</span>`
+  ].join("");
+  return row;
+}
+function filtered() {
+  let items = predData;
+  if (predCategory !== "all") items = items.filter((p) => p.category === predCategory);
+  if (predMinEl > 0) items = items.filter((p) => p.max_elevation_deg >= predMinEl);
+  if (predFilterText) items = items.filter((p) => p.satellite.toUpperCase().includes(predFilterText));
+  return items;
+}
+function applyFilters() {
+  render(filtered());
+}
+var filterInput = dom.filter;
+filterInput?.addEventListener("input", () => {
+  predFilterText = filterInput.value.trim().toUpperCase();
+  applyFilters();
+});
+var minElevationSelect = dom.minElevation;
+minElevationSelect?.addEventListener("change", () => {
+  predMinEl = Number.parseInt(minElevationSelect.value, 10) || 0;
+  applyFilters();
+});
+var categorySelect = dom.category;
+categorySelect?.addEventListener("change", () => {
+  predCategory = categorySelect.value;
+  applyFilters();
+});
+function render(passes, error) {
+  stopCountdownTimer();
+  if (error) {
+    if (dom.currentList) dom.currentList.innerHTML = "";
+    if (dom.upcomingList) dom.upcomingList.innerHTML = "";
+    if (dom.currentSection) dom.currentSection.style.display = "none";
+    if (dom.upcomingSection) dom.upcomingSection.style.display = "none";
+    if (dom.status) dom.status.textContent = error;
+    return;
+  }
+  if (!Array.isArray(passes) || passes.length === 0) {
+    if (dom.currentList) dom.currentList.innerHTML = "";
+    if (dom.upcomingList) dom.upcomingList.innerHTML = "";
+    if (dom.currentSection) dom.currentSection.style.display = "none";
+    if (dom.upcomingSection) dom.upcomingSection.style.display = "none";
+    if (dom.status) dom.status.textContent = "No passes found in the next 24 hours.";
+    return;
+  }
+  const now = Date.now();
+  const current = passes.filter((p) => p.aos_ms <= now && p.los_ms > now);
+  const upcoming = passes.filter((p) => p.aos_ms > now);
+  if (dom.currentSection) dom.currentSection.style.display = current.length > 0 ? "" : "none";
+  if (dom.currentList) {
+    if (current.length === 0) {
+      dom.currentList.innerHTML = "";
+    } else {
+      const frag = document.createDocumentFragment();
+      for (const pass of current) frag.appendChild(buildCurrentPassRow(pass, now));
+      dom.currentList.replaceChildren(frag);
+    }
+  }
+  const upcomingLimit = predShowAll ? upcoming.length : PAGE_SIZE;
+  const visibleUpcoming = upcoming.slice(0, upcomingLimit);
+  const hiddenCount = upcoming.length - visibleUpcoming.length;
+  if (dom.upcomingSection) dom.upcomingSection.style.display = upcoming.length > 0 ? "" : "none";
+  if (dom.upcomingList) {
+    const frag = document.createDocumentFragment();
+    for (const pass of visibleUpcoming) frag.appendChild(buildUpcomingPassRow(pass));
+    if (hiddenCount > 0) {
+      const moreRow = document.createElement("div");
+      moreRow.className = "sat-pred-row";
+      moreRow.style.cursor = "pointer";
+      moreRow.style.textAlign = "center";
+      moreRow.innerHTML = `<span style="grid-column:1/-1;color:var(--accent);font-size:0.82rem;">Show ${hiddenCount} more passes…</span>`;
+      moreRow.addEventListener("click", () => {
+        predShowAll = true;
+        render(filtered());
+      });
+      frag.appendChild(moreRow);
+    }
+    dom.upcomingList.replaceChildren(frag);
+  }
+  if (dom.status) {
+    let text = `${current.length} active · ${upcoming.length} upcoming · times in UTC`;
+    if (predSatCount > 0) text += ` · ${predSatCount} satellites tracked`;
+    dom.status.textContent = text;
+  }
+  if (current.length > 0 && isPageVisible()) {
+    startCountdownTimer(dom.currentList);
+  }
+}
+async function load() {
+  if (dom.status) dom.status.textContent = "Loading predictions…";
+  if (dom.currentList) dom.currentList.innerHTML = "";
+  if (dom.upcomingList) dom.upcomingList.innerHTML = "";
+  try {
+    const resp = await fetch("/sat_passes");
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+    const data = await resp.json();
+    predSatCount = data.satellite_count || 0;
+    if (data.error) {
+      predData = [];
+      render([], data.error);
+    } else {
+      predData = data.passes || [];
+      render(filtered());
+    }
+  } catch (error) {
+    render([], `Failed to load predictions: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+function clearPredictionDom() {
+  stopCountdownTimer();
+  if (dom.currentList) dom.currentList.innerHTML = "";
+  if (dom.upcomingList) dom.upcomingList.innerHTML = "";
+}
+predWindow.clearSatPredictionDom = clearPredictionDom;
+predWindow.refreshSatPredictions = function() {
+  predShowAll = false;
+  void load();
+};
@@ -24,6 +24,7 @@ SPDX-License-Identifier: GPL-2.0-or-later
    <symbol id="icon-bookmark" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2h8v12l-4-2.5L4 14V2z"/></symbol>
    <symbol id="icon-digital" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 11.5h2.6V4.5h3.2v7h3.2v-7h3.2v7H15"/></symbol>
    <symbol id="icon-map" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2a4 4 0 0 1 4 4c0 3-4 8-4 8S4 9 4 6a4 4 0 0 1 4-4z"/><circle cx="8" cy="6" r="1.2" fill="currentColor" stroke="none"/></symbol>
+    <symbol id="icon-satellite" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2 13.2 5.6 9.6"/><path d="M4.2 8.2a3.4 3.4 0 0 1 4.8 4.8z"/><path d="M9.2 6.6a3.2 3.2 0 0 1 2.6 2.6"/><path d="M9.8 3.6a6.2 6.2 0 0 1 5.2 5.2"/></symbol>
    <symbol id="icon-stats" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2 14h12"/><rect x="3" y="8" width="2" height="6" rx="0.4" fill="currentColor" stroke="none" opacity="0.6"/><rect x="7" y="5" width="2" height="9" rx="0.4" fill="currentColor" stroke="none" opacity="0.75"/><rect x="11" y="2" width="2" height="12" rx="0.4" fill="currentColor" stroke="none" opacity="0.9"/></symbol>
    <symbol id="icon-record" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><circle cx="8" cy="8" r="2.5" fill="currentColor" stroke="none"/></symbol>
    <symbol id="icon-settings" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.8 3.1a2.6 2.6 0 0 0-2.2 3.9L3.4 11.2a1.2 1.2 0 1 0 1.7 1.7l4.2-4.2a2.6 2.6 0 0 0 3.9-2.2l-1.8.6-1.2-1.2z"/><path d="M10.2 5.8 12 4"/></symbol>
@@ -52,14 +53,21 @@ SPDX-License-Identifier: GPL-2.0-or-later
            <svg class="tab-icon" aria-hidden="true"><use href="#icon-bookmark"/></svg>
            <span class="tab-label">Bookmarks</span>
          </button>
-          <button class="tab" data-tab="digital-modes">
+          <button class="tab" data-tab="digital-modes" aria-label="Digital modes">
            <svg class="tab-icon" aria-hidden="true"><use href="#icon-digital"/></svg>
            <span class="tab-label">Digital modes</span>
+            <!-- A fifth of a phone screen does not hold "Digital modes"; the
+                 button keeps the full name for assistive tech. -->
+            <span class="tab-label-short" aria-hidden="true">Digital</span>
          </button>
          <button class="tab" data-tab="map">
            <svg class="tab-icon" aria-hidden="true"><use href="#icon-map"/></svg>
            <span class="tab-label">Map</span>
          </button>
+          <button class="tab" data-tab="satellites">
+            <svg class="tab-icon" aria-hidden="true"><use href="#icon-satellite"/></svg>
+            <span class="tab-label">Satellites</span>
+          </button>
          <button class="tab" data-tab="statistics">
            <svg class="tab-icon" aria-hidden="true"><use href="#icon-stats"/></svg>
            <span class="tab-label">Statistics</span>
@@ -915,7 +923,6 @@ SPDX-License-Identifier: GPL-2.0-or-later
        <div class="sat-view-bar">
          <button id="sat-view-live" class="sat-view-btn sat-view-active" type="button">Live</button>
          <button id="sat-view-history" class="sat-view-btn" type="button">History</button>
-          <button id="sat-view-predictions" class="sat-view-btn" type="button">Predictions</button>
        </div>
        <!-- Live view -->
        <div id="sat-live-view">
@@ -957,50 +964,6 @@ SPDX-License-Identifier: GPL-2.0-or-later
          <div id="sat-history-list"></div>
          <small id="sat-history-count" style="color:var(--text-muted);font-size:0.75rem;">No images yet</small>
        </div>
-        <!-- Predictions view -->
-        <div id="sat-predictions-view" style="display:none;">
-          <div class="ft8-controls">
-            <input id="sat-pred-filter" class="ft8-filter" type="text" placeholder="Filter (e.g. ISS, NOAA, Meteor)" />
-            <select id="sat-pred-category" class="sat-sort-select">
-              <option value="all">All</option>
-              <option value="weather">Weather</option>
-              <option value="amateur">Ham Radio</option>
-              <option value="other">Other</option>
-            </select>
-            <select id="sat-pred-min-el" class="sat-sort-select">
-              <option value="0">All passes</option>
-              <option value="10">Min 10°</option>
-              <option value="20">Min 20°</option>
-              <option value="45">Min 45°</option>
-            </select>
-          </div>
-          <!-- Current passes -->
-          <div id="sat-pred-current-section">
-            <div class="sat-pred-section-title">Currently receivable</div>
-            <div class="sat-pred-header sat-pred-header-current">
-              <span class="sat-pred-col-sat">Satellite</span>
-              <span class="sat-pred-col-el">Max El</span>
-              <span class="sat-pred-col-time">AOS Start</span>
-              <span class="sat-pred-col-time">AOS End</span>
-              <span class="sat-pred-col-countdown">Time left</span>
-              <span class="sat-pred-col-dir">Direction</span>
-            </div>
-            <div id="sat-pred-current-list"></div>
-          </div>
-          <!-- Upcoming passes -->
-          <div id="sat-pred-upcoming-section">
-            <div class="sat-pred-section-title">Upcoming passes</div>
-            <div class="sat-pred-header">
-              <span class="sat-pred-col-time">AOS (UTC)</span>
-              <span class="sat-pred-col-sat">Satellite</span>
-              <span class="sat-pred-col-el">Max El</span>
-              <span class="sat-pred-col-dur">Duration</span>
-              <span class="sat-pred-col-dir">Direction</span>
-            </div>
-            <div id="sat-pred-list"></div>
-          </div>
-          <small id="sat-pred-status" style="color:var(--text-muted);font-size:0.75rem;">Loading predictions&hellip;</small>
-        </div>
      </div>
      <div id="subtab-wefax" class="sub-tab-panel" style="display:none;">
        <div class="ft8-controls">
@@ -1114,6 +1077,51 @@ SPDX-License-Identifier: GPL-2.0-or-later
      </div>
      </template>
    </div>
+    <div id="tab-satellites" class="tab-panel" style="display:none;">
+      <h2 class="section-heading">Satellites</h2>
+      <div class="ft8-controls">
+        <input id="sat-pred-filter" class="ft8-filter" type="text" placeholder="Filter (e.g. ISS, NOAA, Meteor)" />
+        <select id="sat-pred-category" class="sat-sort-select">
+          <option value="all">All</option>
+          <option value="weather">Weather</option>
+          <option value="amateur">Ham Radio</option>
+          <option value="other">Other</option>
+        </select>
+        <select id="sat-pred-min-el" class="sat-sort-select">
+          <option value="0">All passes</option>
+          <option value="10">Min 10°</option>
+          <option value="20">Min 20°</option>
+          <option value="45">Min 45°</option>
+        </select>
+      </div>
+      <!-- Current passes -->
+      <div id="sat-pred-current-section">
+        <div class="sat-pred-section-title">Currently receivable</div>
+        <div class="sat-pred-header sat-pred-header-current">
+          <span class="sat-pred-col-sat">Satellite</span>
+          <span class="sat-pred-col-el">Max El</span>
+          <span class="sat-pred-col-time">AOS Start</span>
+          <span class="sat-pred-col-time">AOS End</span>
+          <span class="sat-pred-col-countdown">Time left</span>
+          <span class="sat-pred-col-dir">Direction</span>
+        </div>
+        <div id="sat-pred-current-list"></div>
+      </div>
+      <!-- Upcoming passes -->
+      <div id="sat-pred-upcoming-section">
+        <div class="sat-pred-section-title">Upcoming passes</div>
+        <div class="sat-pred-header">
+          <span class="sat-pred-col-time">AOS (UTC)</span>
+          <span class="sat-pred-col-sat">Satellite</span>
+          <span class="sat-pred-col-el">Max El</span>
+          <span class="sat-pred-col-dur">Duration</span>
+          <span class="sat-pred-col-dir">Direction</span>
+        </div>
+        <div id="sat-pred-list"></div>
+      </div>
+      <small id="sat-pred-status" style="color:var(--text-muted);font-size:0.75rem;">Loading predictions&hellip;</small>
+    </div>
+
    <div id="tab-statistics" class="tab-panel" style="display:none;">
      <h2 class="section-heading">Statistics</h2>
      <template id="tmpl-statistics">
@@ -1717,6 +1717,8 @@ small { color: var(--text-muted); }
  flex-shrink: 0;
 }
 .tab-label { display: block; }
+/* Only the bottom nav is short of room. */
+.tab-label-short { display: none; }
 .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; }
@@ -2592,7 +2594,6 @@ button.map-qso-card:focus-visible {
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
-  will-change: backdrop-filter;
  overflow: auto;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
 }
@@ -2610,9 +2611,15 @@ button.map-qso-card:focus-visible {
 .map-overlay-filters.is-hidden {
  display: none;
 }
-/* With the filters collapsed the bar has no reason to span the map. */
+/* With the filters collapsed the bar has no reason to span the map.
+   It keeps both anchors and shrinks inside them, rather than dropping `left`
+   and being sized by shrink-to-fit: the anchored box is a size the browser
+   already knows, and an absolutely positioned, backdrop-filtered, composited
+   box being asked to size itself from its content is the shape of thing that
+   renders as nothing on engines other than the one it was written against. */
 .map-overlay-panel.filters-hidden {
-  left: auto;
+  width: fit-content;
+  margin-left: auto;
 }
 .map-overlay-actions {
  display: flex;
@@ -2739,7 +2746,6 @@ button.map-qso-card:focus-visible {
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
-  will-change: backdrop-filter;
  overflow: auto;
 }
 .map-band-legend.is-empty {
@@ -3810,11 +3816,12 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
@media (max-width: 760px) {
  body[data-operator-layout="broadcast"] #wfm-controls-col { flex-basis: 100%; }
 }
-/* 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
+/* One navigation model at every width.  Satellites, 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="satellites"],
 .tab-bar-nav .tab[data-tab="statistics"],
 .tab-bar-nav .tab[data-tab="recorder"],
 .tab-bar-nav .tab[data-tab="settings"],
@@ -3892,7 +3899,18 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
  input.status-input, select.status-input { font-size: 1.1rem; }
  :root { --header-waterfall-overlap: 0rem; }
  .controls-tray-scroll { overflow-x: auto; }
-  .controls-tray { width: 100%; min-width: 0; padding-left: 0.85rem; padding-right: 0.85rem; }
+  /* A grid column sizes to its content by default, so one row wider than the
+     phone — the mode picker, six buttons across — dragged the whole tray out
+     with it and left the rest to be found by scrolling sideways. `minmax(0,
+     1fr)` lets the column be as narrow as the screen and the rows wrap inside
+     it. */
+  .controls-tray {
+    width: 100%;
+    min-width: 0;
+    grid-template-columns: minmax(0, 1fr);
+    padding-left: 0.85rem;
+    padding-right: 0.85rem;
+  }
  .freq-inline { gap: 0.5rem; flex-wrap: wrap; }
  .header-text { width: auto; min-width: 0; flex: 0 1 auto; }
  .header-main {
@@ -4013,12 +4031,9 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
  }
  .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; }
-  .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; }
+  .tab[data-tab="satellites"], .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;
@@ -4030,7 +4045,48 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
    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; }
+  /* The bottom nav divides the bar between its five destinations, so a tab is
+     about a fifth of the screen and the label has to live inside that. Sharing
+     the width evenly beats sizing each tab to its own label, which gave
+     "Digital modes" the same room as "Map" and clipped it mid-word. */
+  .tab-bar-nav .tab {
+    flex: 1 1 0;
+    min-width: 0;
+    padding-left: 0.15rem;
+    padding-right: 0.15rem;
+  }
+  .tab .tab-label, .tab[data-tab] .tab-label {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 0.75rem;
+  }
+  /* The long ones, sized against the screen rather than at a fixed size.
+     A tab is a fifth of the viewport, so what fits in it is a function of the
+     viewport — and only roughly of the font size, since how wide a platform
+     renders a word varies by ten per cent or more between machines. A fixed
+     0.6rem fit here with ten pixels to spare and clipped in CI.
+
+     (These rules also used to sit above the one that sets the size for all
+     labels — identical specificity, later in the file, so nothing was ever
+     shortened.) */
+  .tab[data-tab="bookmarks"] .tab-label,
+  .tab[data-tab="statistics"] .tab-label {
+    font-size: clamp(0.46rem, 2.2vw, 0.62rem);
+  }
+  /* "Digital modes" does not fit at any size worth reading, so the nav shows
+     the short form and the button carries the full one as its label. */
+  .tab[data-tab="digital-modes"] .tab-label { display: none; }
+  .tab[data-tab="digital-modes"] .tab-label-short {
+    display: block;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: clamp(0.46rem, 2.2vw, 0.62rem);
+  }
  .decoder-tab-select {
    display: block;
    width: 100%;
@@ -4068,10 +4124,18 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
    flex: 0 0 auto;
    min-width: 0;
  }
+  /* The rig's name is the widest thing in the bar and it does not need to be:
+     139 px of a 338 px bar went on it, and everything else was pushed into the
+     overflow menu to make room. Enough for a short name, ellipsised past that,
+     with the full name still in the menu it opens. */
  .header-rig-switch select,
  .header-style-pick select {
    width: auto;
    min-width: 0;
+    max-width: 6.5rem;
+    padding-right: 0.2rem;
+    font-size: 0.8rem;
+    text-overflow: ellipsis;
  }
  .header-bar-btn {
    flex: 0 0 auto;
@@ -4102,12 +4166,20 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
  .mult-col {
    min-width: 0;
  }
+  /* These are given the width of their column below; with padding on a
+     content box that is the column's width *plus* the padding, which is what
+     pushed the page itself sideways by a dozen pixels. */
  .wavelength-display,
  .sig-strength-display,
  .jog-step,
  .jog-mult {
+    box-sizing: border-box;
    width: 100%;
  }
+  .sig-strength-display {
+    min-width: 0;
+    font-size: 1.05rem;
+  }
  .jog-step button,
  .jog-mult button {
    flex: 1 1 0;
@@ -4958,9 +5030,15 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {

 /* ── Phone layout (≤ 520px) ───────────────────────────────────────────── */
@media (max-width: 520px) {
-  /* Single-column controls: jog first, then mode, then power */
+  /* Single-column controls: jog first, then mode, then power.
+     `nowrap` is the whole point of it. The base rule wraps, and a *column*
+     that wraps starts a second column when its items are taller than it is —
+     which put the transmit controls at x=400 on a 390 px screen, off the side
+     of a tray 354 px wide, reachable only by a horizontal scroll with nothing
+     to say it was there. */
  .controls-row {
    flex-direction: column;
+    flex-wrap: nowrap;
    align-items: stretch;
  }
  .controls-col-center {
@@ -6149,8 +6227,16 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
 .controls-tray { container-type: inline-size; container-name: controls; }
 .decode-history-table-wrap { container-type: inline-size; container-name: decode-table; }

-@container controls (max-width: 600px) {
-  .controls-tray .controls-row { flex-wrap: wrap; }
+/* Wrapping a narrow tray's columns onto more lines is right while the row runs
+   left to right. Below the phone breakpoint the row is a column, and wrap there
+   means "start another column" — which is how the transmit controls ended up
+   beside the tray instead of under it, off the side of the screen. This rule
+   outranks the phone one (two classes to its one) and sits later in the file,
+   so it has to exclude itself rather than be overridden. */
+@media (min-width: 521px) {
+  @container controls (max-width: 600px) {
+    .controls-tray .controls-row { flex-wrap: wrap; }
+  }
 }
@container decode-table (max-width: 500px) {
  .decode-history-table th:nth-child(n+4),
@@ -30,6 +30,7 @@ await build({
    "hf-aprs": path.join(sourceDir, "plugins", "hf-aprs.ts"),
    sat: path.join(sourceDir, "plugins", "sat.ts"),
    "sat-scheduler": path.join(sourceDir, "plugins", "sat-scheduler.ts"),
+    "satellite-predictions": path.join(sourceDir, "plugins", "satellite-predictions.ts"),
    vchan: path.join(sourceDir, "plugins", "vchan.ts"),
    bookmarks: path.join(sourceDir, "plugins", "bookmarks.ts"),
    scheduler: path.join(sourceDir, "plugins", "scheduler.ts"),
@@ -12,7 +12,7 @@
    "typecheck": "tsc --project tsconfig.json && tsc --project tsconfig.worker.json",
    "lint": "eslint \"src/**/*.ts\" \"tests/**/*.mjs\" build.mjs --no-error-on-unmatched-pattern",
    "test": "node --test tests/*.test.mjs",
-    "test:browser": "node tests/browser-smoke.mjs && node tests/spectrum-layout.mjs && node tests/decode-flow.mjs && node tests/tune-links.mjs",
+    "test:browser": "node tests/browser-smoke.mjs && node tests/spectrum-layout.mjs && node tests/decode-flow.mjs && node tests/tune-links.mjs && node tests/mobile-layout.mjs && node tests/satellite-predictions.mjs",
    "verify-generated": "npm run generate-types && npm run build && git diff --exit-code -- ../assets/web/generated src/api/generated.ts"
  },
  "devDependencies": {
@@ -385,6 +385,7 @@ declare global {
    refreshCwTonePicker?(): void;
    updateFt8RfDisplay?(): void;
    clearSatPredictionDom?(): void;
+    refreshSatPredictions?(): void;
    syncWefaxToggle?(enabled: boolean): void;
    syncSstvToggle?(enabled: boolean): void;
    updateAisBar?(value?: number): void;
@@ -4849,6 +4850,7 @@ function _initMapWhenReady() {

 function navigateToTab(name: TabName, options: { updateHistory?: boolean; replaceHistory?: boolean } = {}) {
  window.trxUi?.closeMobileOverlays?.();
+  const leavingSatellites = _activeTab === "satellites" && name !== "satellites";
  const { updateHistory = true, replaceHistory = false } = options;
  if (authEnabled && !authRole && name !== "main") {
    showAuthGate(false);
@@ -4889,7 +4891,13 @@ function navigateToTab(name: TabName, options: { updateHistory?: boolean; replac
    updateTabHistory(name, replaceHistory);
  }
  scheduleSpectrumLayout();
-  void loadPluginsForTab(name).catch((error: unknown) => { console.error(error); });
+  // Its countdowns tick every second, so the page stops when it is not on screen.
+  if (leavingSatellites) window.clearSatPredictionDom?.();
+  void loadPluginsForTab(name).then(() => {
+    // Passes go stale while the page is closed, so each visit reloads them.
+    // The first visit is what imports the module, which renders on its own.
+    if (name === "satellites") window.refreshSatPredictions?.();
+  }).catch((error: unknown) => { console.error(error); });
  if (name === "map") {
    _initMapWhenReady();
  }
@@ -5241,10 +5249,6 @@ function _wireSubTabBar(bar: WiredElement) {
        if (window.refreshCwTonePicker) window.refreshCwTonePicker();
      });
    }
-    // Clear SAT prediction DOM when leaving the SAT tab to reduce node count.
-    if (btn.dataset.subtab !== "sat" && typeof window.clearSatPredictionDom === "function") {
-      window.clearSatPredictionDom();
-    }
  });
 }
 document.querySelectorAll<WiredElement>(".sub-tab-bar").forEach(_wireSubTabBar);
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: GPL-2.0-or-later

 export const TAB_ORDER = [
-  "main", "bookmarks", "digital-modes", "map", "statistics", "recorder", "settings", "about",
+  "main", "bookmarks", "digital-modes", "map", "satellites", "statistics", "recorder", "settings", "about",
 ] as const;

 export type TabName = typeof TAB_ORDER[number];
@@ -13,6 +13,7 @@ export const TAB_PATHS: Readonly<Record<TabName, string>> = {
  bookmarks: "/bookmarks",
  "digital-modes": "/digital-modes",
  map: "/map",
+  satellites: "/satellites",
  statistics: "/statistics",
  recorder: "/recorder",
  settings: "/settings",
@@ -2,7 +2,9 @@
 //
 // SPDX-License-Identifier: GPL-2.0-or-later

-type PluginGroup = "digital-modes" | "map-data" | "map" | "statistics" | "bookmarks" | "recorder" | "settings";
+type PluginGroup =
+  | "digital-modes" | "map-data" | "map" | "satellites" | "statistics"
+  | "bookmarks" | "recorder" | "settings";

 const pluginGroups: Readonly<Record<PluginGroup, readonly string[]>> = {
  // AIS, VDES and the two APRS decoders have panels on this tab, so they load
@@ -15,6 +17,7 @@ const pluginGroups: Readonly<Record<PluginGroup, readonly string[]>> = {
  ],
  "map-data": ["/map-core.js", "/ais.js", "/vdes.js", "/aprs.js", "/hf-aprs.js"],
  map: ["/map-core.js", "/ais.js", "/vdes.js", "/aprs.js", "/hf-aprs.js", "/sat.js", "/sat-scheduler.js"],
+  satellites: ["/satellite-predictions.js"],
  statistics: ["/map-core.js"],
  bookmarks: ["/bookmarks.js"],
  recorder: [],
@@ -4,13 +4,12 @@

 import { hostCore } from "./host.js";

-import type { LrptProgress, SatelliteImage, SatelliteLiveUpdate, SatellitePass, SatellitePassResponse } from "./satellite-types";
+import type { LrptProgress, SatelliteImage, SatelliteLiveUpdate } from "./satellite-types";
 import type { PluginRuntimeWindow } from "./runtime-contract.js";

-type SatelliteView = "live" | "history" | "predictions";
+type SatelliteView = "live" | "history";
 interface SatelliteBridge {
  trxScheduleUiFrameJob?: (key: string, job: () => void) => void;
-  clearSatPredictionDom?: () => void;
  updateSatLiveState?: (update: SatelliteLiveUpdate) => void;
  addSatMapOverlay?: (image: SatelliteImage) => void;
  clearSatMapOverlays?: () => void;
@@ -25,14 +24,14 @@ const satWindow = window as unknown as SatelliteBridge & PluginRuntimeWindow;
 // --- SAT Plugin ---
 // Live view: decoder state, latest image card
 // History view: filterable table of all decoded images
-// Predictions view: next 24 h passes for ham satellites
+//
+// Pass predictions live on their own page; see satellite-predictions.ts.

 // ── DOM references (cached once) ───────────────────────────────────
 const satDom = {
  status:           document.getElementById("sat-status"),
  liveView:         document.getElementById("sat-live-view"),
  historyView:      document.getElementById("sat-history-view"),
-  predictionsView:  document.getElementById("sat-predictions-view"),
  liveLatest:       document.getElementById("sat-live-latest"),
  historyList:      document.getElementById("sat-history-list"),
  historyCount:     document.getElementById("sat-history-count"),
@@ -42,30 +41,13 @@ const satDom = {
  lrptState:        document.getElementById("sat-lrpt-state"),
  viewLiveBtn:      document.getElementById("sat-view-live"),
  viewHistoryBtn:   document.getElementById("sat-view-history"),
-  viewPredBtn:      document.getElementById("sat-view-predictions"),
-  predFilter:       document.getElementById("sat-pred-filter") as HTMLInputElement | null,
-  predMinEl:        document.getElementById("sat-pred-min-el") as HTMLSelectElement | null,
-  predCategory:     document.getElementById("sat-pred-category") as HTMLSelectElement | null,
-  predCurrentList:  document.getElementById("sat-pred-current-list"),
-  predUpcomingList: document.getElementById("sat-pred-list"),
-  predCurrentSec:   document.getElementById("sat-pred-current-section"),
-  predUpcomingSec:  document.getElementById("sat-pred-upcoming-section"),
-  predStatus:       document.getElementById("sat-pred-status"),
 };

 // ── State ───────────────────────────────────────────────────────────
 let satImageHistory: SatelliteImage[] = [];
 const SAT_MAX_IMAGES = 100;
-const SAT_PRED_PAGE_SIZE = 50;
-let satPredShowAll = false;
 let satFilterText = "";
 let satActiveView: SatelliteView = "live";
-let satPredData: SatellitePass[] = [];
-let satPredFilterText = "";
-let satPredMinEl = 0;
-let satPredCategory = "all";
-let satPredSatCount = 0;
-let satPredCountdownTimer: ReturnType<typeof setInterval> | null = null;

 // ── UI scheduler helper ─────────────────────────────────────────────
 function scheduleSatUi(key: string, job: () => void): void {
@@ -78,33 +60,16 @@ function scheduleSatUi(key: string, job: () => void): void {

 // ── View switching ──────────────────────────────────────────────────
 function switchSatView(view: SatelliteView): void {
-  const leavingPredictions = satActiveView === "predictions" && view !== "predictions";
  satActiveView = view;
-  if (satDom.liveView)        satDom.liveView.style.display = view === "live" ? "" : "none";
-  if (satDom.historyView)     satDom.historyView.style.display = view === "history" ? "" : "none";
-  if (satDom.predictionsView) satDom.predictionsView.style.display = view === "predictions" ? "" : "none";
-  if (satDom.viewLiveBtn)     satDom.viewLiveBtn.classList.toggle("sat-view-active", view === "live");
-  if (satDom.viewHistoryBtn)  satDom.viewHistoryBtn.classList.toggle("sat-view-active", view === "history");
-  if (satDom.viewPredBtn)     satDom.viewPredBtn.classList.toggle("sat-view-active", view === "predictions");
-  if (leavingPredictions) clearPredictionDom();
-  if (view === "history") {
-    renderSatHistoryTable();
-  } else if (view === "predictions") {
-    satPredShowAll = false;
-    void loadSatPredictions();
-  }
+  if (satDom.liveView)       satDom.liveView.style.display = view === "live" ? "" : "none";
+  if (satDom.historyView)    satDom.historyView.style.display = view === "history" ? "" : "none";
+  if (satDom.viewLiveBtn)    satDom.viewLiveBtn.classList.toggle("sat-view-active", view === "live");
+  if (satDom.viewHistoryBtn) satDom.viewHistoryBtn.classList.toggle("sat-view-active", view === "history");
+  if (view === "history") renderSatHistoryTable();
 }

-function clearPredictionDom() {
-  stopCountdownTimer();
-  if (satDom.predCurrentList)  satDom.predCurrentList.innerHTML = "";
-  if (satDom.predUpcomingList) satDom.predUpcomingList.innerHTML = "";
-}
-satWindow.clearSatPredictionDom = clearPredictionDom;
-
 satDom.viewLiveBtn?.addEventListener("click", () => { switchSatView("live"); });
 satDom.viewHistoryBtn?.addEventListener("click", () => { switchSatView("history"); });
-satDom.viewPredBtn?.addEventListener("click", () => { switchSatView("predictions"); });

 // ── Live view: decoder state ────────────────────────────────────────
 let lastSatLrptOn: boolean | null = null;
@@ -335,234 +300,6 @@ document
    }
  })(); });

-// ── Predictions: helpers ────────────────────────────────────────────
-function azToCardinal(deg: number): string {
-  const dirs = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
-  return dirs[Math.round(deg / 45) % 8] ?? "N";
-}
-
-function formatPredTime(ms: number): string {
-  const d = new Date(ms);
-  const now = new Date();
-  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  const day = d.getUTCDay() !== now.getUTCDay() ? `${dayNames[d.getUTCDay()] ?? ""} ` : "";
-  const hh = String(d.getUTCHours()).padStart(2, "0");
-  const mm = String(d.getUTCMinutes()).padStart(2, "0");
-  return `${day}${hh}:${mm}`;
-}
-
-function formatPredDuration(s: number): string {
-  if (s >= 60) return `${Math.round(s / 60)} min`;
-  return `${s}s`;
-}
-
-function formatCountdown(ms: number): string {
-  const totalSec = Math.max(0, Math.floor(ms / 1000));
-  const m = Math.floor(totalSec / 60);
-  const s = totalSec % 60;
-  return `${m}:${String(s).padStart(2, "0")}`;
-}
-
-function elevationClass(deg: number): string {
-  if (deg >= 45) return "sat-pred-el-high";
-  if (deg >= 10) return "sat-pred-el-mid";
-  return "sat-pred-el-low";
-}
-
-// ── Predictions: countdown timer management ─────────────────────────
-function stopCountdownTimer() {
-  if (satPredCountdownTimer) {
-    clearInterval(satPredCountdownTimer);
-    satPredCountdownTimer = null;
-  }
-}
-
-function startCountdownTimer(container: HTMLElement | null): void {
-  const countdownEls = container?.querySelectorAll<HTMLElement>(".sat-pred-col-countdown") ?? [];
-  if (countdownEls.length === 0) return;
-
-  satPredCountdownTimer = setInterval(() => {
-    if (satActiveView !== "predictions") {
-      stopCountdownTimer();
-      return;
-    }
-    const n = Date.now();
-    let anyActive = false;
-    for (const el of countdownEls) {
-      const los = Number.parseInt(el.dataset.los ?? "0", 10);
-      const rem = los - n;
-      if (rem > 0) {
-        el.textContent = formatCountdown(rem);
-        anyActive = true;
-      } else {
-        el.textContent = "0:00";
-      }
-    }
-    if (!anyActive) {
-      stopCountdownTimer();
-      renderSatPredictions(getFilteredPredictions());
-    }
-  }, 1000);
-}
-
-// ── Predictions: row builders ───────────────────────────────────────
-function buildCurrentPassRow(pass: SatellitePass, now: number): HTMLElement {
-  const row = document.createElement("div");
-  row.className = "sat-pred-row-current";
-  const dir = `${azToCardinal(pass.azimuth_aos_deg)} \u2192 ${azToCardinal(pass.azimuth_los_deg)}`;
-  const remaining = Math.max(0, pass.los_ms - now);
-  row.innerHTML = [
-    `<span class="sat-pred-col-sat">${pass.satellite}</span>`,
-    `<span class="sat-pred-col-el ${elevationClass(pass.max_elevation_deg)}">${pass.max_elevation_deg.toFixed(1)}\u00B0</span>`,
-    `<span class="sat-pred-col-time">${formatPredTime(pass.aos_ms)}</span>`,
-    `<span class="sat-pred-col-time">${formatPredTime(pass.los_ms)}</span>`,
-    `<span class="sat-pred-col-countdown" data-los="${pass.los_ms}">${formatCountdown(remaining)}</span>`,
-    `<span class="sat-pred-col-dir">${dir}</span>`,
-  ].join("");
-  return row;
-}
-
-function buildUpcomingPassRow(pass: SatellitePass): HTMLElement {
-  const row = document.createElement("div");
-  row.className = "sat-pred-row";
-  const dir = `${azToCardinal(pass.azimuth_aos_deg)} \u2192 ${azToCardinal(pass.azimuth_los_deg)}`;
-  row.innerHTML = [
-    `<span class="sat-pred-col-time">${formatPredTime(pass.aos_ms)}</span>`,
-    `<span class="sat-pred-col-sat">${pass.satellite}</span>`,
-    `<span class="sat-pred-col-el ${elevationClass(pass.max_elevation_deg)}">${pass.max_elevation_deg.toFixed(1)}\u00B0</span>`,
-    `<span class="sat-pred-col-dur">${formatPredDuration(pass.duration_s)}</span>`,
-    `<span class="sat-pred-col-dir">${dir}</span>`,
-  ].join("");
-  return row;
-}
-
-// ── Predictions: filter state ───────────────────────────────────────
-function getFilteredPredictions(): SatellitePass[] {
-  let items = satPredData;
-  if (satPredCategory !== "all") items = items.filter((p) => p.category === satPredCategory);
-  if (satPredMinEl > 0) items = items.filter((p) => p.max_elevation_deg >= satPredMinEl);
-  if (satPredFilterText) items = items.filter((p) => p.satellite.toUpperCase().includes(satPredFilterText));
-  return items;
-}
-
-function applyPredFilters() {
-  renderSatPredictions(getFilteredPredictions());
-}
-
-const satPredictionFilter = satDom.predFilter;
-satPredictionFilter?.addEventListener("input", () => {
-  satPredFilterText = satPredictionFilter.value.trim().toUpperCase();
-  applyPredFilters();
-});
-
-const satPredictionMinElevation = satDom.predMinEl;
-satPredictionMinElevation?.addEventListener("change", () => {
-  satPredMinEl = Number.parseInt(satPredictionMinElevation.value, 10) || 0;
-  applyPredFilters();
-});
-
-const satPredictionCategory = satDom.predCategory;
-satPredictionCategory?.addEventListener("change", () => {
-  satPredCategory = satPredictionCategory.value;
-  applyPredFilters();
-});
-
-// ── Predictions: main render ────────────────────────────────────────
-function renderSatPredictions(passes: SatellitePass[], error?: string): void {
-  stopCountdownTimer();
-
-  if (error) {
-    if (satDom.predCurrentList)  satDom.predCurrentList.innerHTML = "";
-    if (satDom.predUpcomingList) satDom.predUpcomingList.innerHTML = "";
-    if (satDom.predCurrentSec)   satDom.predCurrentSec.style.display = "none";
-    if (satDom.predUpcomingSec)  satDom.predUpcomingSec.style.display = "none";
-    if (satDom.predStatus)       satDom.predStatus.textContent = error;
-    return;
-  }
-
-  if (!Array.isArray(passes) || passes.length === 0) {
-    if (satDom.predCurrentList)  satDom.predCurrentList.innerHTML = "";
-    if (satDom.predUpcomingList) satDom.predUpcomingList.innerHTML = "";
-    if (satDom.predCurrentSec)   satDom.predCurrentSec.style.display = "none";
-    if (satDom.predUpcomingSec)  satDom.predUpcomingSec.style.display = "none";
-    if (satDom.predStatus)       satDom.predStatus.textContent = "No passes found in the next 24 hours.";
-    return;
-  }
-
-  const now = Date.now();
-  const current = passes.filter((p) => p.aos_ms <= now && p.los_ms > now);
-  const upcoming = passes.filter((p) => p.aos_ms > now);
-
-  // ── Current passes ──
-  if (satDom.predCurrentSec) satDom.predCurrentSec.style.display = current.length > 0 ? "" : "none";
-  if (satDom.predCurrentList) {
-    if (current.length === 0) {
-      satDom.predCurrentList.innerHTML = "";
-    } else {
-      const frag = document.createDocumentFragment();
-      for (const pass of current) frag.appendChild(buildCurrentPassRow(pass, now));
-      satDom.predCurrentList.replaceChildren(frag);
-    }
-  }
-
-  // ── Upcoming passes ──
-  const upcomingLimit = satPredShowAll ? upcoming.length : SAT_PRED_PAGE_SIZE;
-  const visibleUpcoming = upcoming.slice(0, upcomingLimit);
-  const hiddenCount = upcoming.length - visibleUpcoming.length;
-  if (satDom.predUpcomingSec) satDom.predUpcomingSec.style.display = upcoming.length > 0 ? "" : "none";
-  if (satDom.predUpcomingList) {
-    const frag = document.createDocumentFragment();
-    for (const pass of visibleUpcoming) frag.appendChild(buildUpcomingPassRow(pass));
-    if (hiddenCount > 0) {
-      const moreRow = document.createElement("div");
-      moreRow.className = "sat-pred-row";
-      moreRow.style.cursor = "pointer";
-      moreRow.style.textAlign = "center";
-      moreRow.innerHTML = `<span style="grid-column:1/-1;color:var(--accent);font-size:0.82rem;">Show ${hiddenCount} more passes\u2026</span>`;
-      moreRow.addEventListener("click", () => {
-        satPredShowAll = true;
-        renderSatPredictions(getFilteredPredictions());
-      });
-      frag.appendChild(moreRow);
-    }
-    satDom.predUpcomingList.replaceChildren(frag);
-  }
-
-  // ── Status ──
-  if (satDom.predStatus) {
-    let text = `${current.length} active \u00B7 ${upcoming.length} upcoming \u00B7 times in UTC`;
-    if (satPredSatCount > 0) text += ` \u00B7 ${satPredSatCount} satellites tracked`;
-    satDom.predStatus.textContent = text;
-  }
-
-  // ── Countdown timer ──
-  if (current.length > 0 && satActiveView === "predictions") {
-    startCountdownTimer(satDom.predCurrentList);
-  }
-}
-
-// ── Predictions: data loading ───────────────────────────────────────
-async function loadSatPredictions(): Promise<void> {
-  if (satDom.predStatus)       satDom.predStatus.textContent = "Loading predictions\u2026";
-  if (satDom.predCurrentList)  satDom.predCurrentList.innerHTML = "";
-  if (satDom.predUpcomingList) satDom.predUpcomingList.innerHTML = "";
-  try {
-    const resp = await fetch("/sat_passes");
-    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-    const data = await resp.json() as SatellitePassResponse;
-    satPredSatCount = data.satellite_count || 0;
-    if (data.error) {
-      satPredData = [];
-      renderSatPredictions([], data.error);
-    } else {
-      satPredData = data.passes || [];
-      renderSatPredictions(getFilteredPredictions());
-    }
-  } catch (error: unknown) {
-    renderSatPredictions([], `Failed to load predictions: ${error instanceof Error ? error.message : String(error)}`);
-  }
-}
-
 // ── Navigate to map centered on satellite image bounds ──────────────
 satWindow.satShowOnMap = function (south: number, west: number, north: number, east: number) {
  if (typeof satWindow.enableMapSourceFilter === "function") {
@@ -0,0 +1,290 @@
+// SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
+//
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+import type { SatellitePass, SatellitePassResponse } from "./satellite-types";
+
+// --- Satellite pass predictions ---
+//
+// Its own page rather than a third view inside the weather-satellite decoder:
+// when a bird comes over is a planning question, and it was buried under
+// Digital modes beside decoders it has nothing to do with.
+
+interface PredictionsBridge {
+  clearSatPredictionDom?: () => void;
+  refreshSatPredictions?: () => void;
+}
+const predWindow = window as unknown as PredictionsBridge;
+
+// ── DOM references (cached once) ───────────────────────────────────
+const dom = {
+  page:            document.getElementById("tab-satellites"),
+  filter:          document.getElementById("sat-pred-filter") as HTMLInputElement | null,
+  minElevation:    document.getElementById("sat-pred-min-el") as HTMLSelectElement | null,
+  category:        document.getElementById("sat-pred-category") as HTMLSelectElement | null,
+  currentList:     document.getElementById("sat-pred-current-list"),
+  upcomingList:    document.getElementById("sat-pred-list"),
+  currentSection:  document.getElementById("sat-pred-current-section"),
+  upcomingSection: document.getElementById("sat-pred-upcoming-section"),
+  status:          document.getElementById("sat-pred-status"),
+};
+
+// ── State ───────────────────────────────────────────────────────────
+const PAGE_SIZE = 50;
+let predShowAll = false;
+let predData: SatellitePass[] = [];
+let predFilterText = "";
+let predMinEl = 0;
+let predCategory = "all";
+let predSatCount = 0;
+let predCountdownTimer: ReturnType<typeof setInterval> | null = null;
+
+/** The countdowns tick once a second, so they stop when nobody is looking. */
+function isPageVisible(): boolean {
+  return !!dom.page && dom.page.style.display !== "none";
+}
+
+// ── Predictions: helpers ────────────────────────────────────────────
+function azToCardinal(deg: number): string {
+  const dirs = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
+  return dirs[Math.round(deg / 45) % 8] ?? "N";
+}
+
+function formatPredTime(ms: number): string {
+  const d = new Date(ms);
+  const now = new Date();
+  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const day = d.getUTCDay() !== now.getUTCDay() ? `${dayNames[d.getUTCDay()] ?? ""} ` : "";
+  const hh = String(d.getUTCHours()).padStart(2, "0");
+  const mm = String(d.getUTCMinutes()).padStart(2, "0");
+  return `${day}${hh}:${mm}`;
+}
+
+function formatPredDuration(s: number): string {
+  if (s >= 60) return `${Math.round(s / 60)} min`;
+  return `${s}s`;
+}
+
+function formatCountdown(ms: number): string {
+  const totalSec = Math.max(0, Math.floor(ms / 1000));
+  const m = Math.floor(totalSec / 60);
+  const s = totalSec % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+function elevationClass(deg: number): string {
+  if (deg >= 45) return "sat-pred-el-high";
+  if (deg >= 10) return "sat-pred-el-mid";
+  return "sat-pred-el-low";
+}
+
+// ── Predictions: countdown timer management ─────────────────────────
+function stopCountdownTimer() {
+  if (predCountdownTimer) {
+    clearInterval(predCountdownTimer);
+    predCountdownTimer = null;
+  }
+}
+
+function startCountdownTimer(container: HTMLElement | null): void {
+  const countdownEls = container?.querySelectorAll<HTMLElement>(".sat-pred-col-countdown") ?? [];
+  if (countdownEls.length === 0) return;
+
+  predCountdownTimer = setInterval(() => {
+    if (!isPageVisible()) {
+      stopCountdownTimer();
+      return;
+    }
+    const n = Date.now();
+    let anyActive = false;
+    for (const el of countdownEls) {
+      const los = Number.parseInt(el.dataset.los ?? "0", 10);
+      const rem = los - n;
+      if (rem > 0) {
+        el.textContent = formatCountdown(rem);
+        anyActive = true;
+      } else {
+        el.textContent = "0:00";
+      }
+    }
+    if (!anyActive) {
+      stopCountdownTimer();
+      render(filtered());
+    }
+  }, 1000);
+}
+
+// ── Predictions: row builders ───────────────────────────────────────
+function buildCurrentPassRow(pass: SatellitePass, now: number): HTMLElement {
+  const row = document.createElement("div");
+  row.className = "sat-pred-row-current";
+  const dir = `${azToCardinal(pass.azimuth_aos_deg)} \u2192 ${azToCardinal(pass.azimuth_los_deg)}`;
+  const remaining = Math.max(0, pass.los_ms - now);
+  row.innerHTML = [
+    `<span class="sat-pred-col-sat">${pass.satellite}</span>`,
+    `<span class="sat-pred-col-el ${elevationClass(pass.max_elevation_deg)}">${pass.max_elevation_deg.toFixed(1)}\u00B0</span>`,
+    `<span class="sat-pred-col-time">${formatPredTime(pass.aos_ms)}</span>`,
+    `<span class="sat-pred-col-time">${formatPredTime(pass.los_ms)}</span>`,
+    `<span class="sat-pred-col-countdown" data-los="${pass.los_ms}">${formatCountdown(remaining)}</span>`,
+    `<span class="sat-pred-col-dir">${dir}</span>`,
+  ].join("");
+  return row;
+}
+
+function buildUpcomingPassRow(pass: SatellitePass): HTMLElement {
+  const row = document.createElement("div");
+  row.className = "sat-pred-row";
+  const dir = `${azToCardinal(pass.azimuth_aos_deg)} \u2192 ${azToCardinal(pass.azimuth_los_deg)}`;
+  row.innerHTML = [
+    `<span class="sat-pred-col-time">${formatPredTime(pass.aos_ms)}</span>`,
+    `<span class="sat-pred-col-sat">${pass.satellite}</span>`,
+    `<span class="sat-pred-col-el ${elevationClass(pass.max_elevation_deg)}">${pass.max_elevation_deg.toFixed(1)}\u00B0</span>`,
+    `<span class="sat-pred-col-dur">${formatPredDuration(pass.duration_s)}</span>`,
+    `<span class="sat-pred-col-dir">${dir}</span>`,
+  ].join("");
+  return row;
+}
+
+// ── Predictions: filter state ───────────────────────────────────────
+function filtered(): SatellitePass[] {
+  let items = predData;
+  if (predCategory !== "all") items = items.filter((p) => p.category === predCategory);
+  if (predMinEl > 0) items = items.filter((p) => p.max_elevation_deg >= predMinEl);
+  if (predFilterText) items = items.filter((p) => p.satellite.toUpperCase().includes(predFilterText));
+  return items;
+}
+
+function applyFilters() {
+  render(filtered());
+}
+
+const filterInput = dom.filter;
+filterInput?.addEventListener("input", () => {
+  predFilterText = filterInput.value.trim().toUpperCase();
+  applyFilters();
+});
+
+const minElevationSelect = dom.minElevation;
+minElevationSelect?.addEventListener("change", () => {
+  predMinEl = Number.parseInt(minElevationSelect.value, 10) || 0;
+  applyFilters();
+});
+
+const categorySelect = dom.category;
+categorySelect?.addEventListener("change", () => {
+  predCategory = categorySelect.value;
+  applyFilters();
+});
+
+// ── Predictions: main render ────────────────────────────────────────
+function render(passes: SatellitePass[], error?: string): void {
+  stopCountdownTimer();
+
+  if (error) {
+    if (dom.currentList)  dom.currentList.innerHTML = "";
+    if (dom.upcomingList) dom.upcomingList.innerHTML = "";
+    if (dom.currentSection)   dom.currentSection.style.display = "none";
+    if (dom.upcomingSection)  dom.upcomingSection.style.display = "none";
+    if (dom.status)       dom.status.textContent = error;
+    return;
+  }
+
+  if (!Array.isArray(passes) || passes.length === 0) {
+    if (dom.currentList)  dom.currentList.innerHTML = "";
+    if (dom.upcomingList) dom.upcomingList.innerHTML = "";
+    if (dom.currentSection)   dom.currentSection.style.display = "none";
+    if (dom.upcomingSection)  dom.upcomingSection.style.display = "none";
+    if (dom.status)       dom.status.textContent = "No passes found in the next 24 hours.";
+    return;
+  }
+
+  const now = Date.now();
+  const current = passes.filter((p) => p.aos_ms <= now && p.los_ms > now);
+  const upcoming = passes.filter((p) => p.aos_ms > now);
+
+  // ── Current passes ──
+  if (dom.currentSection) dom.currentSection.style.display = current.length > 0 ? "" : "none";
+  if (dom.currentList) {
+    if (current.length === 0) {
+      dom.currentList.innerHTML = "";
+    } else {
+      const frag = document.createDocumentFragment();
+      for (const pass of current) frag.appendChild(buildCurrentPassRow(pass, now));
+      dom.currentList.replaceChildren(frag);
+    }
+  }
+
+  // ── Upcoming passes ──
+  const upcomingLimit = predShowAll ? upcoming.length : PAGE_SIZE;
+  const visibleUpcoming = upcoming.slice(0, upcomingLimit);
+  const hiddenCount = upcoming.length - visibleUpcoming.length;
+  if (dom.upcomingSection) dom.upcomingSection.style.display = upcoming.length > 0 ? "" : "none";
+  if (dom.upcomingList) {
+    const frag = document.createDocumentFragment();
+    for (const pass of visibleUpcoming) frag.appendChild(buildUpcomingPassRow(pass));
+    if (hiddenCount > 0) {
+      const moreRow = document.createElement("div");
+      moreRow.className = "sat-pred-row";
+      moreRow.style.cursor = "pointer";
+      moreRow.style.textAlign = "center";
+      moreRow.innerHTML = `<span style="grid-column:1/-1;color:var(--accent);font-size:0.82rem;">Show ${hiddenCount} more passes\u2026</span>`;
+      moreRow.addEventListener("click", () => {
+        predShowAll = true;
+        render(filtered());
+      });
+      frag.appendChild(moreRow);
+    }
+    dom.upcomingList.replaceChildren(frag);
+  }
+
+  // ── Status ──
+  if (dom.status) {
+    let text = `${current.length} active \u00B7 ${upcoming.length} upcoming \u00B7 times in UTC`;
+    if (predSatCount > 0) text += ` \u00B7 ${predSatCount} satellites tracked`;
+    dom.status.textContent = text;
+  }
+
+  // ── Countdown timer ──
+  if (current.length > 0 && isPageVisible()) {
+    startCountdownTimer(dom.currentList);
+  }
+}
+
+// ── Predictions: data loading ───────────────────────────────────────
+async function load(): Promise<void> {
+  if (dom.status)       dom.status.textContent = "Loading predictions\u2026";
+  if (dom.currentList)  dom.currentList.innerHTML = "";
+  if (dom.upcomingList) dom.upcomingList.innerHTML = "";
+  try {
+    const resp = await fetch("/sat_passes");
+    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+    const data = await resp.json() as SatellitePassResponse;
+    predSatCount = data.satellite_count || 0;
+    if (data.error) {
+      predData = [];
+      render([], data.error);
+    } else {
+      predData = data.passes || [];
+      render(filtered());
+    }
+  } catch (error: unknown) {
+    render([], `Failed to load predictions: ${error instanceof Error ? error.message : String(error)}`);
+  }
+}
+
+// ── Page lifecycle ──────────────────────────────────────────────────
+function clearPredictionDom(): void {
+  stopCountdownTimer();
+  if (dom.currentList)  dom.currentList.innerHTML = "";
+  if (dom.upcomingList) dom.upcomingList.innerHTML = "";
+}
+predWindow.clearSatPredictionDom = clearPredictionDom;
+
+/**
+ * Called by the router each time the Satellites page is opened, including the
+ * visit that imports this module — so loading is driven from one place only.
+ */
+predWindow.refreshSatPredictions = function () {
+  predShowAll = false;
+  void load();
+};
@@ -499,7 +499,7 @@ function elementById<T extends HTMLElement>(id: string): T {
      if (restoreFocus) more.focus();
    };
    api.closeMobileOverlays = closeMore;
-    ["statistics", "recorder", "settings", "about"].forEach((tabName) => {
+    ["satellites", "statistics", "recorder", "settings", "about"].forEach((tabName) => {
      const source = nav.querySelector(`[data-tab="${tabName}"]`);
      if (!source) return;
      const item = document.createElement("button");
@@ -0,0 +1,149 @@
+// SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
+//
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+// What a phone gets. A page that scrolls sideways is a page with something on
+// it nobody will find: the transmit controls spent this whole period laid out
+// at x=400 on a 390 px screen, off the side of a tray 354 px wide, reachable
+// only by a horizontal scroll with nothing to say it was there.
+
+import assert from "node:assert/strict";
+import { chromium } from "playwright-core";
+import { startBrowser, startWebFixture } from "./web-fixture.mjs";
+
+/* global document, getComputedStyle */
+
+const PHONES = [430, 390, 360];
+
+const fixture = await startWebFixture({ spectrum: true, tx: true });
+const { browser, page, runtimeErrors } = await startBrowser(chromium);
+
+try {
+  for (const width of PHONES) {
+    await page.setViewportSize({ width, height: 900 });
+    await page.goto(fixture.origin, { waitUntil: "domcontentloaded" });
+    await page.locator("#content").waitFor({ state: "visible" });
+    await page.waitForTimeout(1800);
+
+    const layout = await page.evaluate((viewport) => {
+      const box = (element) => element.getBoundingClientRect();
+      // Anything laid out past the right edge of the screen.
+      const past = [];
+      const walk = (element) => {
+        const rect = box(element);
+        if (rect.width > 0 && rect.right > viewport + 1) {
+          past.push(`${element.tagName.toLowerCase()}${element.id ? `#${element.id}` : ""}`);
+        }
+        for (const child of element.children) walk(child);
+      };
+      walk(document.getElementById("content"));
+      const tx = document.getElementById("tx-power-col");
+      return {
+        documentScroll: document.documentElement.scrollWidth,
+        past: past.slice(0, 6),
+        txRight: tx ? Math.round(box(tx).right) : null,
+        txVisible: tx ? getComputedStyle(tx).display !== "none" : false,
+        rigSelect: Math.round(box(document.getElementById("header-rig-switch-select")).width),
+      };
+    }, width);
+
+    assert.equal(layout.documentScroll, width,
+      `the page scrolls sideways at ${width}px (${layout.documentScroll}px wide)`);
+    assert.deepEqual(layout.past, [],
+      `laid out past the screen at ${width}px: ${layout.past.join(", ")}`);
+    if (layout.txVisible) {
+      assert.ok(layout.txRight <= width + 1,
+        `the transmit controls end at ${layout.txRight}px on a ${width}px screen`);
+    }
+    // The rig's name was taking 139px of a 338px bar and pushing everything
+    // else into the overflow menu.
+    assert.ok(layout.rigSelect <= 112,
+      `the rig picker is ${layout.rigSelect}px wide at ${width}px`);
+
+    // The bottom nav keeps its labels — that is what makes it navigation
+    // rather than five glyphs — and a label used to overflow its tab and run
+    // into the next one: "Bookmarks igital mode".
+    //
+    // What is asserted is that a label stays inside its own tab and, if it is
+    // too long for it, ends in an ellipsis. Not that it fits: how wide a
+    // platform draws a word varies by more than ten per cent, so "it fits"
+    // passes on the machine it was written on and fails on the next one —
+    // which is what a fixed font size did here.
+    const nav = await page.evaluate(() => {
+      const bar = document.querySelector(".tab-bar-nav");
+      return [...bar.querySelectorAll(".tab")]
+        .filter((tab) => tab.getBoundingClientRect().width > 0)
+        .map((tab) => {
+          const label = [...tab.querySelectorAll(".tab-label, .tab-label-short")]
+            .find((span) => getComputedStyle(span).display !== "none");
+          const style = label ? getComputedStyle(label) : null;
+          const labelBox = label?.getBoundingClientRect();
+          const tabBox = tab.getBoundingClientRect();
+          return {
+            text: (label?.textContent ?? "").trim(),
+            escapes: labelBox
+              ? labelBox.left < tabBox.left - 1 || labelBox.right > tabBox.right + 1
+              : false,
+            truncates: style?.textOverflow === "ellipsis" && style?.overflow !== "visible",
+            empty: !labelBox || labelBox.width < 1,
+          };
+        });
+    });
+    assert.ok(nav.length >= 4, `the bottom nav has ${nav.length} destinations at ${width}px`);
+    const escaped = nav.filter((tab) => tab.escapes).map((tab) => tab.text);
+    assert.deepEqual(escaped, [],
+      `labels overflowing their tab at ${width}px: ${escaped.join(", ")}`);
+    const untruncatable = nav.filter((tab) => !tab.truncates).map((tab) => tab.text);
+    assert.deepEqual(untruncatable, [],
+      `labels that would be cut rather than ellipsised at ${width}px: ${untruncatable.join(", ")}`);
+    const blank = nav.filter((tab) => tab.empty).map((tab, index) => tab.text || `#${index}`);
+    assert.deepEqual(blank, [], `destinations with no label at ${width}px: ${blank.join(", ")}`);
+  }
+
+  // A tab whose visible label is shortened for the nav still has to say what
+  // it is to anything that reads the page rather than looks at it.
+  const named = await page.evaluate(() => {
+    const tab = document.querySelector('.tab[data-tab="digital-modes"]');
+    const short = tab.querySelector(".tab-label-short");
+    return {
+      label: tab.getAttribute("aria-label"),
+      shortHidden: short?.getAttribute("aria-hidden"),
+    };
+  });
+  assert.equal(named.label, "Digital modes", "the shortened tab lost its full name");
+  assert.equal(named.shortHidden, "true", "the short label is read out as well as shown");
+
+  // Hiding the map's filters leaves the bar, and the bar has to still be
+  // there to bring them back — it carries the only button that does.
+  await page.setViewportSize({ width: 1400, height: 900 });
+  await page.goto(`${fixture.origin}/map`, { waitUntil: "domcontentloaded" });
+  await page.locator("#aprs-map .leaflet-pane").first().waitFor({ state: "attached" });
+  await page.waitForTimeout(1200);
+  await page.locator("#map-overlay-toggle-btn").click();
+  await page.waitForTimeout(400);
+  const collapsed = await page.evaluate(() => {
+    const panel = document.querySelector(".map-overlay-panel");
+    const style = getComputedStyle(panel);
+    const rect = panel.getBoundingClientRect();
+    const button = document.getElementById("map-overlay-toggle-btn").getBoundingClientRect();
+    return {
+      width: Math.round(rect.width),
+      height: Math.round(rect.height),
+      opacity: Number(style.opacity),
+      visibility: style.visibility,
+      display: style.display,
+      buttonWidth: Math.round(button.width),
+    };
+  });
+  assert.ok(collapsed.width > 0 && collapsed.height > 0,
+    `the collapsed bar measures ${collapsed.width}x${collapsed.height}`);
+  assert.equal(collapsed.visibility, "visible", "the collapsed bar is not visible");
+  assert.notEqual(collapsed.display, "none", "the collapsed bar is display:none");
+  assert.equal(collapsed.opacity, 1, `the collapsed bar is at opacity ${collapsed.opacity}`);
+  assert.ok(collapsed.buttonWidth > 0, "Show Filters has no size to click");
+
+  assert.deepEqual(runtimeErrors, []);
+} finally {
+  await browser.close();
+  await fixture.close();
+}
@@ -0,0 +1,122 @@
+// SPDX-FileCopyrightText: 2026 Stan Grams <sjg@haxx.space>
+//
+// SPDX-License-Identifier: GPL-2.0-or-later
+
+// Pass predictions used to be a third view inside the weather-satellite
+// decoder, under Digital modes — a planning tool filed with the decoders it has
+// nothing to do with. It is its own page now, so what this guards is that the
+// page exists at its own address, renders passes, and that the decoder card no
+// longer offers the view it gave up.
+
+import assert from "node:assert/strict";
+import { chromium } from "playwright-core";
+import { startBrowser, startWebFixture } from "./web-fixture.mjs";
+
+/* global document, window, getComputedStyle */
+
+const HOUR = 3_600_000;
+const now = Date.now();
+const satPasses = {
+  satellite_count: 2,
+  passes: [
+    // In progress right now, so the page has a countdown to run.
+    {
+      satellite: "NOAA 19", category: "weather",
+      aos_ms: now - 4 * 60_000, los_ms: now + 6 * 60_000,
+      max_elevation_deg: 62.4, duration_s: 600,
+      azimuth_aos_deg: 10, azimuth_los_deg: 190,
+    },
+    {
+      satellite: "ISS", category: "amateur",
+      aos_ms: now + 2 * HOUR, los_ms: now + 2 * HOUR + 480_000,
+      max_elevation_deg: 18.2, duration_s: 480,
+      azimuth_aos_deg: 200, azimuth_los_deg: 20,
+    },
+  ],
+};
+
+const fixture = await startWebFixture({ satPasses });
+const { browser, page, runtimeErrors } = await startBrowser(chromium);
+
+try {
+  await page.setViewportSize({ width: 1500, height: 950 });
+
+  // The page is reachable at its own address, not through a decoder sub-view.
+  // #content is the radio panel on the main tab, so the readiness signal for a
+  // deep link is the destination panel itself.
+  await page.goto(`${fixture.origin}/satellites`, { waitUntil: "domcontentloaded" });
+  await page.locator("#tab-satellites").waitFor({ state: "visible" });
+
+  await page.waitForFunction(
+    () => (document.getElementById("sat-pred-list")?.childElementCount ?? 0) > 0,
+    null,
+    { timeout: 5000 },
+  );
+
+  const rendered = await page.evaluate(() => ({
+    current: document.getElementById("sat-pred-current-list").textContent,
+    upcoming: document.getElementById("sat-pred-list").textContent,
+    status: document.getElementById("sat-pred-status").textContent,
+    activeTab: document.querySelector(".tab-bar .tab.active")?.dataset.tab,
+  }));
+  assert.match(rendered.current, /NOAA 19/, `current passes read "${rendered.current}"`);
+  assert.match(rendered.upcoming, /ISS/, `upcoming passes read "${rendered.upcoming}"`);
+  assert.match(rendered.status, /1 active/, `status reads "${rendered.status}"`);
+  assert.equal(rendered.activeTab, "satellites", "the Satellites tab is the active one");
+
+  // A pass in progress counts down, so the seconds have to move on their own.
+  const firstTick = await page.evaluate(
+    () => document.querySelector(".sat-pred-col-countdown[data-los]")?.textContent);
+  await page.waitForTimeout(1600);
+  const secondTick = await page.evaluate(
+    () => document.querySelector(".sat-pred-col-countdown[data-los]")?.textContent);
+  assert.notEqual(firstTick, secondTick, `the countdown sat at ${firstTick}`);
+
+  // Leaving stops the countdown rather than leaving a timer running behind a
+  // hidden page.
+  await page.evaluate(() => { window.navigateToTab("main"); });
+  await page.waitForTimeout(300);
+  const afterLeaving = await page.evaluate(() => ({
+    visible: document.getElementById("tab-satellites").style.display,
+    rows: document.getElementById("sat-pred-current-list").childElementCount,
+  }));
+  assert.equal(afterLeaving.visible, "none", "the page stayed on screen after navigating away");
+  assert.equal(afterLeaving.rows, 0, "the countdown rows outlived the page");
+
+  // Coming back reloads rather than showing whatever was there before.
+  await page.evaluate(() => { window.navigateToTab("satellites"); });
+  await page.waitForFunction(
+    () => (document.getElementById("sat-pred-list")?.childElementCount ?? 0) > 0,
+    null,
+    { timeout: 5000 },
+  );
+
+  // The page is an occasional destination, so it lives behind Tools rather than
+  // taking a slot in the operating strip — the same treatment Statistics,
+  // Recorder, Settings and About get.
+  const nav = await page.evaluate(() => ({
+    inStrip: getComputedStyle(document.querySelector('.tab-bar-nav .tab[data-tab="satellites"]')).display,
+    inTools: !!document.querySelector('#mobile-more-menu [data-navigate-tab="satellites"]'),
+  }));
+  assert.equal(nav.inStrip, "none", "Satellites took a slot in the operating strip");
+  assert.ok(nav.inTools, "Satellites is not reachable from Tools");
+
+  // The decoder card keeps Live and History, and no longer offers Predictions.
+  await page.goto(`${fixture.origin}/digital-modes`, { waitUntil: "domcontentloaded" });
+  await page.locator("#tab-digital-modes").waitFor({ state: "visible" });
+  const satCard = await page.evaluate(() => ({
+    predictionsButton: !!document.getElementById("sat-view-predictions"),
+    predictionsView: !!document.getElementById("sat-predictions-view"),
+    live: !!document.getElementById("sat-view-live"),
+    history: !!document.getElementById("sat-view-history"),
+  }));
+  assert.equal(satCard.predictionsButton, false, "the decoder card still offers Predictions");
+  assert.equal(satCard.predictionsView, false, "the old predictions view is still in the page");
+  assert.ok(satCard.live && satCard.history, "the decoder card lost Live/History");
+
+  assert.deepEqual(runtimeErrors, [], "the page threw while showing predictions");
+  console.log("satellite predictions page tests passed");
+} finally {
+  await browser.close();
+  await fixture.close();
+}
@@ -125,8 +125,11 @@ test("a picture arriving paints its rows as they come", async () => {
 test("a received picture is kept, shown, and linked by file name alone", async () => {
  const { runtime, element } = await loadPanel();

+  // Recent, not a fixed date: the panel drops anything older than the history
+  // retention window, so a picture stamped with the day the test was written
+  // passes until that day is a day ago.
  runtime.dispatch("sstv", {
-    ts_ms: Date.UTC(2026, 7, 5, 12, 0, 0),
+    ts_ms: Date.now() - 60_000,
    vis: 44, mode: "Martin M1", width: 320, height: 256, lines: 256, complete: true,
    path: "/home/op/.cache/trx-rs/sstv/SSTV_20260805T120000Z_14230000_Martin-M1.png",
  });
@@ -135,6 +135,7 @@ export async function startWebFixture({
  bandplan = {},
  bandplanEnabled = false,
  bandplanUnauthorizedFirst = false,
+  satPasses = null,
 } = {}) {
  const rigItems = ["rig-a", "rig-b"].map((remote) => ({
    remote,
@@ -230,6 +231,7 @@ export async function startWebFixture({
    ["/bandplan.json", bandplan],
    ["/api/recorder/status", []],
    ["/api/recorder/files", []],
+    ["/sat_passes", satPasses ?? { satellite_count: 0, passes: [] }],
  ]);

  // Flat i8 bins: the shape does not matter, only that frames arrive so the
@@ -101,6 +101,12 @@ pub(crate) async fn statistics_index(req: HttpRequest) -> impl Responder {
    static_asset_response(&req, "text/html; charset=utf-8", c)
 }

+#[get("/satellites")]
+pub(crate) async fn satellites_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();
@@ -639,6 +639,7 @@ pub fn configure(cfg: &mut web::ServiceConfig) {
        .service(assets::recorder_index)
        .service(assets::settings_index)
        .service(assets::about_index)
+        .service(assets::satellites_index)
        .service(assets::statistics_index)
        .service(assets::bookmarks_index)
        .service(assets::favicon)
Author	SHA1	Message	Date
sjgandClaude Opus 5	e52c4839c9	[fix](trx-frontend-http): give satellite passes their own page CI / lint (pull_request) Successful in 6m30s Details CI / test (pull_request) Successful in 8m31s Details CI / frontend (pull_request) Successful in 4m30s Details CI / reuse (pull_request) Successful in 5s Details Pass predictions were a third view inside the Weather Satellite Decoder card, under Digital modes — a planning tool filed behind a decoder toggle, beside the FT8 and WEFAX panels it has nothing to do with. Nothing about knowing when a bird comes over belongs there. Move them to /satellites, reached from Tools alongside Statistics, Recorder, Settings and About: occasional destinations that live behind that menu rather than taking a slot in the operating strip. Adding a sixth strip button wrapped the phone nav onto two rows and cost the desktop strip its labels at 1280px, so the tab is hidden from the strip exactly the way its four peers already are — the nav is byte-for-byte what it was. The prediction code moves out of sat.ts into its own plugin that loads with the page, so the decoder card no longer carries it. Countdowns stop when the page is hidden and each visit reloads, since passes go stale while it is closed. The server grows a /satellites index route so a deep link or a refresh serves the SPA shell rather than a 404. Closes #47 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SyX26FCpMQxiBoC7r5K1A7 Signed-off-by: Stan Grams <sjg@haxx.space>	2026-08-06 23:23:48 +02:00
sjg	77b283cb78	[fix](trx-frontend-http): size the nav's labels against the screen, not the font CI / lint (pull_request) Successful in 2m17s Details CI / test (pull_request) Successful in 8m23s Details CI / frontend (pull_request) Successful in 4m20s Details CI / reuse (pull_request) Successful in 3s Details CI / lint (push) Successful in 2m17s Details CI / test (push) Successful in 7m35s Details CI / frontend (push) Successful in 3m29s Details CI / reuse (push) Successful in 2s Details CI cut "Bookmarks" off at 360 px where this machine had ten pixels to spare. How wide a platform draws a word varies by more than ten per cent, so a fixed 0.6rem label is a bet on the machine it was measured on -- the same bet ui-core's own comment warns about where it explains why the tab strip reflows by measurement rather than at a width. The long labels are sized with `clamp(0.46rem, 2.2vw, 0.62rem)` now. A tab is a fifth of the viewport, so what fits in it follows the viewport; tying the label to the same thing leaves better than a fifth of the tab spare at every phone width, and holds with the text drawn 30% wider than it is here. The test asked the wrong question too. "Does the label fit" is a question about font metrics, and it will keep answering differently on different machines. It now asserts what actually matters: a label stays inside its own tab, and if it is too long for it, it ends in an ellipsis rather than being cut through a letter. Both hold whatever width the platform draws the words at. Signed-off-by: Stan Grams <sjg@haxx.space>	2026-08-06 19:41:45 +02:00
sjg	6284747339	[fix](trx-frontend-http): let the bottom nav's labels fit inside its tabs CI / lint (pull_request) Successful in 2m17s Details CI / test (pull_request) Successful in 8m22s Details CI / frontend (pull_request) Failing after 1m46s Details CI / reuse (pull_request) Successful in 2s Details The bottom nav keeps its labels under the icons -- that is what makes it navigation rather than five glyphs -- but the labels did not fit the tabs. On a 360 px screen "Bookmarks" and "Digital modes" were cut off mid-word and ran into each other: "Bookmarks igital mode". The stylesheet already meant to handle it. Three rules shrink the long labels, and a rule twenty lines further down sets the size for all of them; identical specificity, later in the file, so the blanket rule won and nothing was ever shortened. Those rules now come after it. Beyond that, tabs sized themselves to their own labels, so "Map" and "Digital modes" were given the same room. They divide the bar evenly now, which is the shape of every bottom nav, and a label that still runs long ellipsises rather than being cut through a letter. "Digital modes" does not fit at any size worth reading, so the nav shows "Digital" and the button carries the full name as its accessible label; the short form is hidden from assistive tech, which reads the button's name instead. The phone layout test now checks that no label in the nav is cut off at 430, 390 or 360 px, and that the shortened tab still says what it is to something that reads the page rather than looks at it. Signed-off-by: Stan Grams <sjg@haxx.space>	2026-08-06 19:14:31 +02:00
sjg	14ad6e241b	[fix](trx-frontend-http): stop the radio controls running off the side of a phone CI / lint (pull_request) Successful in 2m19s Details CI / test (pull_request) Successful in 8m23s Details CI / frontend (pull_request) Failing after 1m28s Details CI / reuse (pull_request) Successful in 2s Details On a 390 px screen the transmit controls were laid out at x=400, off the side of a tray 354 px wide: present, invisible, and reachable only by a horizontal scroll with nothing to say it was there. The page scrolled sideways by a dozen pixels as well. Three causes, each in a different place. A container query at the end of the stylesheet re-imposes `flex-wrap: wrap` on a narrow tray's rows. That is right while a row runs left to right; below the phone breakpoint the row is a column, and wrapping a column starts a second column — which is what put the transmit controls beside the tray rather than under it. The rule outranks the phone one, two classes to its one, and sits later in the file, so it now excludes itself below that breakpoint rather than being overridden. The tray is a grid, and a grid column sizes to its content. One row wider than the screen — the mode picker, six buttons across — dragged the whole tray out with it. `minmax(0, 1fr)` lets the column be as narrow as the phone and the rows wrap inside it. The wavelength and signal-strength readouts are given the width of their column on narrow screens, but with padding on a content box that is the column's width plus the padding. Those dozen pixels were the page's sideways scroll. They are border-box now. Also: the rig picker was taking 139 px of a 338 px bar, pushing the rest of the top bar into the overflow menu. It is capped and ellipsised on phones, with the full name still in the menu it opens. The map's filter bar, collapsed, keeps both its anchors and shrinks inside them rather than dropping `left` to be sized by shrink-to-fit, and no longer asks for a compositing layer it does not need. An absolutely positioned, backdrop-filtered, composited box sizing itself from its content is the shape of thing that renders as nothing on an engine other than the one it was written against — which is what Edge does with it. Unverified there: this machine has no Edge to test with. tests/mobile-layout.mjs holds the page to it at 430, 390 and 360 px: no sideways scroll, nothing laid out past the right edge, the transmit controls inside the screen, the rig picker within its cap — and the collapsed filter bar still on screen with a button to bring the filters back. The SSTV panel test stamped its picture with a fixed date, which the panel's own retention window dropped once that date was a day old. It uses a recent stamp now. Signed-off-by: Stan Grams <sjg@haxx.space>	2026-08-06 19:06:15 +02:00