signalk-pypilot-newui 2.4.0 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## 2.4.1 — 2026-09-08 — Rev146..Rev153
+
+Patch release. Fixes + UI polish on top of 2.4.0.
+
+### English
+
+**Fixed**
+
+- **TWS row in Sensor Quality no longer stuck as MISSING** on plain SK
+  setups. `environment.wind.speedTrue` (canonical) is rarely populated;
+  the canonical row now accepts `.speedOverGround` (what
+  `signalk-derived-data` emits) or `.speedOverWater` as alternatives.
+  Same treatment for TWA (`.angleTrueWater` / `.angleTrueGround` /
+  `.angleTrue`). Rev146-148.
+- **Regression: AP mode selector went blank** after the Rev140 watch
+  refactor - `RESERVED_PYPILOT_KEYS` was blocking subscribe too, when
+  it should only block re-publish. Restored so the visor keeps
+  `ap.enabled/mode/heading_command` in sync. Rev142.
+- **Watch focus was pinning 60+ keys** on `pypilot_web` when the Setup
+  launcher was open. Rev149-150: the launcher grid takes NO focus;
+  only the Calibration card (fullscreen) bumps the 7 documented
+  sliders. Empty focus now triggers explicit release, so the count
+  drops back to the ~15 core watches immediately instead of waiting
+  for the 60 s TTL. Well under Sean D'Epagnier's 40-path ceiling.
+- **`[current]` prefix in Pi Zero log capture** replaced with the
+  parent directory (`[pypilot]`, `[pypilot_web]`, `[pypilot_hat]`) so
+  the merged file is actually readable. Rev149.
+
+**Changed**
+
+- **Rose colour palette (Carlos)**: Target/DIA diamond is now red
+  (`--target-red`, matches the AP engage button); AWS/TWS chip below
+  the rose is fully tinted amber for apparent, teal for true; corner
+  tiles tint value + sub in the matching wind colour; SOG back to
+  white; Rev151-152.
+- **Configure-corners modal** — h4 + close button now sticky at the
+  top, body scrolls independently. X on the LEFT with the solid red
+  `--engaged` style used by the Setup fullscreen cards. Rev151-153.
+- **Mode selector labels re-render on language change**: switching
+  language now redraws mode / pilot / profile selects immediately
+  instead of waiting for the next backend delta. Rev144.
+
 ## 2.4.0 — 2026-09-07 — Rev138..Rev145
 
 Feature release. The plugin has learnt to behave itself around the

package/dist/index.js

@@ -14,7 +14,7 @@ const doctor_1 = require("./doctor");
 const session_recorder_1 = require("./session-recorder");
 // Rev counter bumped on every build so the user can distinguish deploys
 // from the webapp header (feedback_revision_bump_each_build).
-const PLUGIN_REVISION = "Rev145";
+const PLUGIN_REVISION = "Rev153";
 // Rev59: read package.json once at load time so /status can report the
 // npm package version alongside the internal Rev counter.
 // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -1314,8 +1314,16 @@ module.exports = function (app) {
                         const fresh = lines.slice(startIdx);
                         if (fresh.length === 0)
                             continue;
+                        // Rev149 (Carlos): tag each line with the parent directory
+                        // instead of the file basename. All three logs are named
+                        // "current" (svlogd convention) so the previous prefix
+                        // showed [current] for everything - useless when reviewing
+                        // the aggregated file. Now: [pypilot], [pypilot_web],
+                        // [pypilot_hat].
+                        const parts = src.split("/");
+                        const tag = parts.length >= 2 ? parts[parts.length - 2] : (parts[0] || "log");
                         for (const l of fresh)
-                            newLines.push(`[${src.split("/").pop()}] ${l}`);
+                            newLines.push(`[${tag}] ${l}`);
                         logCaptureLastLineHash[src] = _lcHash(lines[lines.length - 1]);
                     }
                     if (newLines.length > 0) {
@@ -2015,7 +2023,11 @@ module.exports = function (app) {
                 engaged: engagedNow,
                 mode: s.mode,
                 tws: s.tws,
-                twa: null,
+                // Rev146: TWA comes from angleTrueWater in most SK setups
+                // (derived-data emits that, not the legacy angleTrue).
+                twa: (typeof (app.getSelfPath ? app.getSelfPath("environment.wind.angleTrueWater.value") : null) === "number")
+                    ? app.getSelfPath("environment.wind.angleTrueWater.value")
+                    : null,
                 aws: s.aws,
                 awa: s.awa,
                 sog: s.sog,
@@ -2086,7 +2098,11 @@ module.exports = function (app) {
             servoVoltage: servoV,
             awa: skNum("environment.wind.angleApparent"),
             aws: skNum("environment.wind.speedApparent"),
-            tws: skNum("environment.wind.speedTrue"),
+            // Rev146 (Carlos): signalk-derived-data does not emit
+            // environment.wind.speedTrue - it publishes speedOverGround
+            // instead. Try the canonical path first (some setups still
+            // populate it via NMEA MWD) and fall back to the derived one.
+            tws: skNum("environment.wind.speedTrue") ?? skNum("environment.wind.speedOverGround"),
             sog: skNum("navigation.speedOverGround"),
             heel: skAttitudeField("roll"),
             engaged,
@@ -2200,13 +2216,27 @@ module.exports = function (app) {
         if (!sensorQuality)
             return;
         const now = Date.now();
-        for (const path of Object.keys(sensor_quality_1.DEFAULT_QUALITY_WATCH)) {
+        // Rev148 (Carlos): feed the primary path AND every alternative the
+        // threshold advertises so the monitor can pick the freshest source
+        // for that metric (TWS, TWA, ...) instead of failing on the
+        // canonical path that most SK setups don't publish.
+        for (const [path, thr] of Object.entries(sensor_quality_1.DEFAULT_QUALITY_WATCH)) {
             try {
                 const entry = app.getSelfPath(path);
                 if (entry)
                     sensorQuality.observe(path, entry, now);
             }
             catch { /* silent - a missing path stays "missing" naturally */ }
+            if (thr.alternatives) {
+                for (const alt of thr.alternatives) {
+                    try {
+                        const entry = app.getSelfPath(alt);
+                        if (entry)
+                            sensorQuality.observe(alt, entry, now);
+                    }
+                    catch { /* silent */ }
+                }
+            }
         }
     }
     // Rev95: publish the current KPI snapshot as Signal K paths under

package/dist/sensor-quality.js

@@ -37,7 +37,28 @@ exports.DEFAULT_QUALITY_WATCH = {
     "navigation.position": { label: "GPS position", degradedAgeMs: 5000, lostAgeMs: 30000 },
     "environment.wind.angleApparent": { label: "AWA", degradedAgeMs: 5000, lostAgeMs: 30000 },
     "environment.wind.speedApparent": { label: "AWS", degradedAgeMs: 5000, lostAgeMs: 30000 },
-    "environment.wind.speedTrue": { label: "TWS", degradedAgeMs: 5000, lostAgeMs: 30000 },
+    // Rev148 (Carlos): TWS row is fed by whichever true-wind speed
+    // path the SK setup publishes. speedTrue is the canonical spec
+    // path but almost nobody publishes it; signalk-derived-data emits
+    // speedOverGround; a few instruments publish speedOverWater. If
+    // ANY of the three is fresh, the row turns green.
+    "environment.wind.speedOverGround": {
+        label: "TWS", degradedAgeMs: 5000, lostAgeMs: 30000,
+        alternatives: [
+            "environment.wind.speedTrue",
+            "environment.wind.speedOverWater",
+        ],
+    },
+    // TWA row: same idea. Different derived-data / instrument setups
+    // emit angleTrueWater, angleTrueGround, or the deprecated
+    // angleTrue - accept any of them.
+    "environment.wind.angleTrueWater": {
+        label: "TWA", degradedAgeMs: 5000, lostAgeMs: 30000,
+        alternatives: [
+            "environment.wind.angleTrueGround",
+            "environment.wind.angleTrue",
+        ],
+    },
     "steering.rudderAngle": { label: "Rudder", degradedAgeMs: 3000, lostAgeMs: 20000 },
 };
 class SensorQualityMonitor {
@@ -56,6 +77,26 @@ class SensorQualityMonitor {
                 lastValue: null,
                 lastSource: null,
             });
+            // Rev148 (Carlos): register a hidden slot for every alternative
+            // path in the group so freshness/hz/jitter are all measured, but
+            // tag the threshold with the same label as the primary slot -
+            // the snapshot dedupes by label and keeps only the freshest.
+            if (thr.alternatives) {
+                for (const alt of thr.alternatives) {
+                    if (this.slots.has(alt))
+                        continue;
+                    this.slots.set(alt, {
+                        path: alt,
+                        threshold: { ...thr, alternatives: undefined }, // avoid recursion
+                        arrivals: new Array(this.bufferPerPath).fill(0),
+                        head: 0,
+                        count: 0,
+                        lastSkTs: null,
+                        lastValue: null,
+                        lastSource: null,
+                    });
+                }
+            }
         }
     }
     /** Feed one observation into the monitor. Called from the plugin's
@@ -97,14 +138,29 @@ class SensorQualityMonitor {
             slot.count += 1;
     }
     snapshot(nowMs = Date.now()) {
-        const items = [];
+        // Rev148 (Carlos): classify every slot, then dedupe by label -
+        // paths that share a label (alternatives) collapse into a single
+        // row keeping the freshest (or the greenest) as the canonical.
+        // If no alternative has ever emitted, the row stays "missing".
+        const classified = [];
         for (const slot of this.slots.values()) {
-            items.push(this.classify(slot, nowMs));
+            classified.push(this.classify(slot, nowMs));
+        }
+        const bestByLabel = new Map();
+        for (const it of classified) {
+            const key = it.label || it.path;
+            const prev = bestByLabel.get(key);
+            if (!prev) {
+                bestByLabel.set(key, it);
+                continue;
+            }
+            if (isBetter(it, prev))
+                bestByLabel.set(key, it);
         }
         return {
             computedTs: nowMs,
             windowSec: this.windowMs / 1000,
-            items,
+            items: [...bestByLabel.values()],
         };
     }
     classify(slot, nowMs) {
@@ -172,6 +228,19 @@ class SensorQualityMonitor {
     }
 }
 exports.SensorQualityMonitor = SensorQualityMonitor;
+/** Rev148: rank two PathQuality reports so the dedupe by-label picks
+ *  the "greenest and freshest". Ordering: good beats degraded beats
+ *  lost beats missing; within the same level, the smaller ageMs wins. */
+function isBetter(a, b) {
+    const rank = (l) => (l === "good" ? 3 : l === "degraded" ? 2 : l === "lost" ? 1 : 0);
+    const ra = rank(a.level);
+    const rb = rank(b.level);
+    if (ra !== rb)
+        return ra > rb;
+    const aa = a.ageMs ?? Infinity;
+    const bb = b.ageMs ?? Infinity;
+    return aa < bb;
+}
 function normaliseTs(raw) {
     if (raw == null)
         return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-pypilot-newui",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Signal K friendly UI for the pypilot autopilot, with the capability to spread its functions and buttons to other programs like KIP, WilhelmSK and freeboard. Touch-first mobile visor + full pypilot data (servo, gains, calibration, tack, warnings) as first-class Signal K paths and Simple Switches. Coexists with pypilot-autopilot-provider.",
   "main": "./dist/index.js",
   "scripts": {

package/public/app.js

@@ -1554,6 +1554,10 @@
       "environment.wind.angleTrueWater",
       "environment.wind.angleTrueGround",
       "environment.wind.speedTrue",
+      // Rev146 (Carlos): signalk-derived-data emits speedOverGround
+      // in place of speedTrue on most SK setups - subscribe both so
+      // the corner tiles and Aproado modal get a real value.
+      "environment.wind.speedOverGround",
       "environment.wind.directionTrue",
       "environment.depth.belowKeel",
       "environment.depth.belowTransducer",
@@ -1712,6 +1716,12 @@
         state.windAngleTrue = numericOrNull(value); break;
       case "environment.wind.speedTrue":
         state.windSpeedTrue = numericOrNull(value); break;
+      case "environment.wind.speedOverGround":
+        // Rev146: use as TWS fallback only when the canonical
+        // speedTrue path is missing (some SK setups do publish
+        // speedTrue via NMEA MWD - respect that value first).
+        if (state.windSpeedTrue == null) state.windSpeedTrue = numericOrNull(value);
+        break;
       case "navigation.speedOverGround":
         state.sog = numericOrNull(value); renderCogAndCurrent(); break;
       case "navigation.courseOverGroundTrue":
@@ -1952,19 +1962,47 @@
       if (!meta) continue;
       const label = typeof meta.label === "function" ? meta.label() : meta.label;
       const val = meta.read();
+      // Rev151 (Carlos): colour A/T inside the corner-tile label so
+      // "AWA/AWS" gets an amber A and "TWA/TWS" a teal T. The rest of
+      // the label stays neutral so the tile does not look shouty.
+      const paintedLabel = _paintABLabel(label, key);
       // Wind returns {value, sub}; the rest returns a string.
       if (val && typeof val === "object" && "value" in val) {
-        el.innerHTML = `<div class="label">${label}</div><div class="value">${val.value}</div><div class="sub">${val.sub}</div>`;
+        el.innerHTML = `<div class="label">${paintedLabel}</div><div class="value">${val.value}</div><div class="sub">${val.sub}</div>`;
       } else {
-        el.innerHTML = `<div class="label">${label}</div><div class="value">${val}</div>`;
+        el.innerHTML = `<div class="label">${paintedLabel}</div><div class="value">${val}</div>`;
       }
       // Rev48: color coding by data type - keep classic B&G-ish palette.
-      el.classList.remove("heading","target","wind","sog","depth","cog","mode","twa","twd");
-      const colorMap = { hdg:"heading", tgt:"target", wind:"wind", awa:"wind", aws:"wind",
-                         twa:"twa", tws:"wind", twd:"twd", sog:"sog", cog:"cog", depth:"depth", mode:"mode" };
+      // Rev151: tgt goes red (matches the AP button); awa/aws lean amber;
+      // twa/tws lean teal; wind combo picks amber/teal via the paint below.
+      el.classList.remove("heading","target","wind","sog","depth","cog","mode","twa","twd","wind-app","wind-true");
+      const colorMap = { hdg:"heading", tgt:"target",
+                         wind: state.windCornerShow === "twa" ? "wind-true" : "wind-app",
+                         awa:"wind-app", aws:"wind-app",
+                         twa:"wind-true", tws:"wind-true", twd:"twd",
+                         sog:"sog", cog:"cog", depth:"depth", mode:"mode" };
       if (colorMap[key]) el.classList.add(colorMap[key]);
     }
   }
+  // Rev151: wrap the leading A / T of a corner label into a coloured
+  // span so the eye maps the tile to the matching arrow instantly.
+  function _paintABLabel(label, key) {
+    if (typeof label !== "string" || label.length === 0) return label;
+    // Cases we know: "AWA/AWS", "AWS", "AWA", "TWA/TWS", "TWS", "TWA".
+    // For the toggling `wind` corner, check state.windCornerShow.
+    const isApp = key === "awa" || key === "aws" || (key === "wind" && state.windCornerShow !== "twa");
+    const isTru = key === "twa" || key === "tws" || (key === "wind" && state.windCornerShow === "twa");
+    if (!isApp && !isTru) return label;
+    const cls = isApp ? "lbl-app" : "lbl-true";
+    // Split around the '/' so "AWA/AWS" -> both sides paint their leader.
+    return label.split("/").map((part) => {
+      const trimmed = part.trim();
+      if (!trimmed) return part;
+      const head = trimmed[0];
+      const tail = trimmed.slice(1);
+      return `<span class="${cls}"><b>${head}</b>${tail}</span>`;
+    }).join("/");
+  }
   function _dashPopulateSelectors() {
     // Rev58: the corner dropdown lists CORE keys + user-enabled extras +
     // any custom paths the user has added. Everything else stays hidden
@@ -2270,12 +2308,20 @@
     }
     const speedLabel = document.getElementById("rose-speed-label");
     const speedText  = document.getElementById("rose-speed");
+    const chip = document.getElementById("rose-speed-chip");
     if (speedLabel) speedLabel.textContent = windSpeed == null ? "" : tag;
     if (speedText) {
       speedText.textContent = windSpeed == null
         ? "--- kn"
         : (windSpeed * 1.94384).toFixed(1) + " kn";
     }
+    // Rev152 (Carlos): tint the WHOLE chip (label + value) with the
+    // matching arrow colour - AWS gets amber, TWS gets teal. Toggling
+    // a class on the chip lets CSS colour both children at once.
+    if (chip) {
+      chip.classList.remove("wind-app", "wind-true");
+      if (windSpeed != null) chip.classList.add(tag === "TWS" ? "wind-true" : "wind-app");
+    }
   }
 
   // Rev57: target indicator - a small cyan diamond OUTSIDE the compass
@@ -5198,31 +5244,54 @@
     return keys;
   }
   function _setupFocusKeys() {
-    // Setup > Calibration shows every RangeSetting. The chip / status
-    // requests in the Setup grid do not need extra focus - they are
-    // already covered by the core set.
-    const keys = [];
+    // Rev149 (Carlos, per Sean D'Epagnier): the launcher grid alone
+    // (no card fullscreen) needs NO focus - the tile chips read
+    // aggregate state from the SK server, not raw pypilot values.
+    // Only bump keys when a card that actually shows raw values is
+    // opened fullscreen, and only the keys that card renders. This
+    // keeps the watch count well under Sean's 40-path ceiling.
+    const fs = document.querySelector('.setup-block[data-fullscreen="1"]');
+    if (!fs) return [];
+    const blockKey = fs.dataset.blockKey || "";
     const cat = state.catalog || {};
-    for (const k of Object.keys(cat)) {
-      if (cat[k]?.type === "RangeSetting") keys.push(k);
-    }
-    // rudder / imu telemetry helps the Sensor Quality card too.
-    for (const k of Object.keys(cat)) {
-      if (k.startsWith("rudder.") || k.startsWith("imu.")) keys.push(k);
+    const keys = [];
+    if (blockKey === "calibration") {
+      // Only the RangeSettings we ship help text for + the alignment
+      // metadata the calibration card actually renders.
+      const DOCUMENTED = [
+        "servo.max_current", "servo.max_slew_speed", "servo.min_speed",
+        "rudder.range", "imu.heading_offset",
+        "ap.tack.angle", "ap.tack.rate",
+      ];
+      for (const k of DOCUMENTED) if (cat[k]) keys.push(k);
     }
+    // Doctor / Sensor Quality / Paths / Language / Emergency / Connection
+    // do not depend on any pypilot value the core set doesn't already
+    // subscribe to. Adding them here would just re-inflate the count.
     return keys;
   }
   function _watchFocusForTab(id) {
     _focusCurrentTab = id;
     if (_focusRenewTimer) { clearInterval(_focusRenewTimer); _focusRenewTimer = null; }
     const kick = () => {
+      let keys = [];
+      let period = 1.0;
       if (_focusCurrentTab === "tune") {
-        _watchFocusPost(_tuneFocusKeys(), 0.5, 60);
+        keys = _tuneFocusKeys();
+        period = 0.5;
       } else if (_focusCurrentTab === "setup") {
-        _watchFocusPost(_setupFocusKeys(), 1.0, 60);
-      } else if (_focusCurrentTab === "chart") {
-        // Chart tab renders KPIs the historian populates on the backend
-        // side; no extra pypilot focus needed beyond the core set.
+        keys = _setupFocusKeys();
+        period = 1.0;
+      }
+      // Rev149 (Carlos, per Sean D'Epagnier): if this tab / card
+      // combination needs no focus, actively release whatever the
+      // previous state had rather than letting the 60 s TTL run down.
+      // Otherwise Setup would keep 60+ keys pinned for a full minute
+      // after the user closed the Calibration card.
+      if (keys.length === 0) {
+        _watchReleaseAll();
+      } else {
+        _watchFocusPost(keys, period, 60);
       }
     };
     kick();
@@ -7659,6 +7728,10 @@
     block.dataset.fullscreen = "1";
     block.scrollTop = 0;
     document.body.classList.add("setup-fullscreen-active");
+    // Rev149 (Carlos, per Sean): re-evaluate focus now that the
+    // fullscreen block is known, so the relevant card's paths get
+    // bumped immediately instead of waiting for the 45 s heartbeat.
+    if (typeof _watchFocusForTab === "function") _watchFocusForTab("setup");
   }
   function _setupFullscreenOff(block) {
     if (!block) {
@@ -7679,6 +7752,11 @@
     if (!document.querySelector('.setup-block[data-fullscreen="1"]')) {
       document.body.classList.remove("setup-fullscreen-active");
     }
+    // Rev149: re-evaluate focus. With no card open, _watchFocusForTab
+    // sees an empty key list and calls _watchReleaseAll itself, so
+    // the previously bumped subscriptions drop back to the core set
+    // immediately rather than after the 60 s TTL.
+    if (typeof _watchFocusForTab === "function") _watchFocusForTab("setup");
   }
   function initSetupTiles() {
     const setup = document.getElementById("tab-setup");

package/public/index.html

@@ -181,8 +181,12 @@
                    sean afiladas (sin curvatura extra que crea bump
                    asimétrico al renderizar en algunos ángulos de
                    rotación). Path desde la punta (Rev80) mantenido. -->
+              <!-- Rev151 (Carlos): Target/DIA en rojo AP (var(--target-red))
+                   para que el hito visual coincida con el color del boton
+                   engage AP. Anteriormente cian; el cian queda libre para
+                   otros overlays neutros. -->
               <path d="M 0,-68 L -21.15,-91.59 A 94 94 0 0 1 21.15,-91.59 Z"
-                    fill="#4dd4ff" stroke="#2ea6c9" stroke-width="0.75"
+                    fill="#ff3b30" stroke="#a82420" stroke-width="0.75"
                     stroke-linejoin="miter" stroke-miterlimit="10"/>
             </g>
             <!-- Raya: marca radial negra dibujada DESPUÉS de las 3
@@ -391,9 +395,13 @@
            any corner cell. 4 dropdowns, one per corner. Choice persists
            in localStorage so each user gets their own layout. -->
       <div class="popup-overlay" id="dash-help-pop" onclick="if(event.target.id==='dash-help-pop')this.classList.remove('open')">
+        <!-- Rev151 (Carlos): header (h4 + X) fijo, body scrolleable
+             en su propio contenedor. Estilos alineados con las cards
+             fullscreen de Setup (X rojo, header con fondo bg-3). -->
         <div class="popup-box" onclick="event.stopPropagation()">
-          <button class="popup-close" onclick="document.getElementById('dash-help-pop').classList.remove('open')">✕</button>
           <h4 data-i18n="dash.help.title">Configure the rose corners</h4>
+          <button class="popup-close" onclick="document.getElementById('dash-help-pop').classList.remove('open')">✕</button>
+          <div class="popup-body">
           <p class="dash-help-body" data-i18n="dash.help.body">Pick which datum shows in each corner. Saved in your browser.</p>
           <div class="dash-corner-cfg">
             <label><span data-i18n="dash.corner.tl">Top left</span> <select id="dash-corner-tl" data-corner="tl"></select></label>
@@ -492,6 +500,7 @@
             <datalist id="dash-custom-path-list"></datalist>
             <div id="dash-custom-list"></div>
           </div>
+          </div><!-- /.popup-body Rev151 -->
         </div>
       </div>
 
@@ -1513,6 +1522,6 @@
   </div>
 
   <!-- Cache-busting: bump the ?v= on every Rev to force Firefox to fetch fresh app.js -->
-  <script src="app.js?v=Rev145"></script>
+  <script src="app.js?v=Rev153"></script>
 </body>
 </html>

package/public/style.css

@@ -16,6 +16,16 @@
   --border:        #2b3542;
   --radius:        14px;
   --tap:           56px;
+  /* Rev151 (Carlos): rose data-tag palette - the corner tiles, chip
+     labels and Target diamond now inherit these tokens so the visual
+     link with each arrow is unambiguous. Apparent = amber, True =
+     teal, Target = the same red as the AP engaged button. */
+  --wind-app:      #ffd54a;
+  --wind-app-dim:  #cba822;
+  --wind-true:     #5ce8c0;
+  --wind-true-dim: #38b596;
+  --target-red:    #ff3b30;
+  --target-red-dim:#a82420;
 }
 
 * { box-sizing: border-box; }
@@ -394,6 +404,28 @@ main {
   white-space: nowrap;
 }
 .dash-rose .wind-chip:active { transform: translateX(-50%) scale(0.96); }
+
+/* Rev151/152 (Carlos): the WHOLE AWS/TWS chip below the rose plus the
+   corner tiles gets tinted with the matching arrow colour - amber for
+   apparent, teal for true. In the tile label we still highlight the
+   leading A / T with a bold span (helps parse "AWA/AWS" in a glance)
+   but the rest of the text now shares the tint so the chip reads as
+   one unit. */
+.dash-rose .wind-chip.wind-app  .label,
+.dash-rose .wind-chip.wind-app  .value { color: var(--wind-app); }
+.dash-rose .wind-chip.wind-true .label,
+.dash-rose .wind-chip.wind-true .value { color: var(--wind-true); }
+.lbl-app  { color: var(--wind-app); }
+.lbl-true { color: var(--wind-true); }
+.lbl-app b, .lbl-true b { font-weight: 900; }
+/* Corner tiles inherit the palette via body classes so the whole tile
+   gets a subtle tint, not just the label. */
+.dash-rose .dash-cell.wind-app  .value,
+.dash-rose .dash-cell.wind-app  .sub    { color: var(--wind-app); }
+.dash-rose .dash-cell.wind-true .value,
+.dash-rose .dash-cell.wind-true .sub    { color: var(--wind-true); }
+.dash-rose .dash-cell.target    .value,
+.dash-rose .dash-cell.target    .sub    { color: var(--target-red); }
 .dash-rose .dash-cell {
   display: flex;
   flex-direction: column;
@@ -483,20 +515,59 @@ main {
   font-size: 22px;
   color: var(--accent, #37b6ff);
 }
+/* Rev151 (Carlos): popups carrying a .popup-body get a sticky header
+   layout - the h4 + close button stay pinned while the body scrolls.
+   Legacy popups (no .popup-body) keep the previous block layout. */
+.popup-box:has(> .popup-body) {
+  padding: 0;
+  max-height: 85vh;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+}
+.popup-box:has(> .popup-body) > h4 {
+  /* Rev152 (Carlos): X now on the LEFT so reserve padding on that
+     side and let the right edge breathe. */
+  margin: 0;
+  padding: 14px 22px 14px 60px;
+  font-size: 20px;
+  font-weight: 800;
+  background: var(--bg-3, #1c2632);
+  border-bottom: 1px solid var(--border, #2b3542);
+  letter-spacing: 0.3px;
+}
+/* Rev151: dedicated scrolling wrapper for popup body. Everything
+   after the sticky h4 lives inside .popup-body. */
+.popup-box > .popup-body {
+  overflow-y: auto;
+  padding: 18px 22px 22px;
+  -webkit-overflow-scrolling: touch;
+}
 .popup-close {
+  /* Rev151/152/153 (Carlos): X on the LEFT of the header, styled EXACTLY
+     like the Setup fullscreen close button - solid red background with
+     white glyph, no border. Same visual language across the whole app. */
   position: absolute;
-  top: 10px;
-  right: 14px;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: #ccc;
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  font-size: 18px;
+  top: 8px;
+  left: 10px;
+  background: var(--engaged, #ff3b30);
+  border: none;
+  color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 1;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  z-index: 1;
 }
-.popup-close:hover { background: rgba(255, 255, 255, 0.15); }
+.popup-close:hover  { filter: brightness(1.1); }
+.popup-close:active { transform: scale(0.94); }
 
 /* Rev47: long-press dash-help popup content. */
 .dash-help-body {
@@ -704,13 +775,16 @@ body.nav-hidden .nav-toggle .tri { transform: rotate(180deg); }
   margin-top: 4px;
 }
 
-/* B&G-ish tile color coding: current heading in soft white, target in blue,
-   wind in green, SOG in yellow. */
+/* B&G-ish tile color coding.
+   Rev151/152 (Carlos): SOG back to white (was yellow), wind now split
+   into apparent (amber) / true (teal). The wind-app / wind-true rules
+   further down in this file override the legacy green .wind rules. */
 .dash-cell.heading .value { color: #ffffff; }
 .dash-cell.target  .value { color: #37b6ff; }
 .dash-cell.wind    .value { color: #4dd982; }
 .dash-cell.wind    .sub   { color: #4dd982; }
-.dash-cell.sog     .value { color: #ffcf47; }
+.dash-cell.sog     .value { color: #ffffff; }
+.dash-cell.sog     .sub   { color: #ffffff; }
 
 .controls { display: flex; flex-direction: column; gap: 10px; }