signalk-pypilot-newui 2.0.0 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## 2.0.2 — 2026-08-20 — Rev65
+
+Bug fix + UI polish batch.
+
+### Fixed
+
+- **Target diamond drifted after tapping AP on laggy links** (Tailscale,
+  4G). We were re-reading `state.heading` inside the parallel promise
+  chain, so between the click and the actual POST the heading could have
+  moved a few degrees. Consequence: we sent one target to the server,
+  asigned another locally, and the diamond jumped to a third when the
+  real delta arrived. Now the heading is captured ONCE at the click and
+  reused for the POST, the optimistic assign and any later reference in
+  the handler.
+
+### Changed - compass rose
+
+- HDG now shown in a small dark chip that straddles the top of the ring
+  (asoma un poco por encima) instead of floating text. Font shrunk from
+  18 to 14 to fit inside the chip.
+- Wind arrows redrawn: both solid (no more dashed shaft on TWA), amber
+  AWA keeps a big head, sea-green (#5ce8c0) TWA gets a smaller head, and
+  each carries its own `AWA` / `TWA` text label rotating with the arrow.
+  The magenta is gone.
+- Bottom of rose: `AWS` / `TWS` label small on top and the number large
+  below, split into two lines with the S cardinal reubicated so the
+  gap between them stays visible for the rose itself.
+- Short tap on a corner mapped to "wind" now flips the label between
+  AWA/AWS and TWA/TWS and pins that choice. When the AP mode changes to
+  a true-wind mode the label auto-follows to TWS (unless the user has
+  already pinned it manually).
+
+### Added - rudder angle indicator in the swipe-hint bar
+
+The bar under the Control tab now carries a horizontal red-to-green
+gradient (port → stbd) with a moving white marker showing the current
+rudder angle. The central yellow nav-toggle triangle sits at 0 deg,
+doubling as the amidships reference. Scale comes from the pypilot
+catalog's `rudder.range` (default 45 deg when unavailable).
+
+## 2.0.1 — 2026-08-20 — Rev64
+
+Patch release to validate the GitHub Actions publish pipeline with
+[npm Trusted Publishing](https://docs.npmjs.com/trusted-publishers)
+(OIDC-based, no NPM_TOKEN secret in the repo). No functional changes
+versus 2.0.0. Look for the "verified provenance" badge on the npm page.
+
 ## 2.0.0 — 2026-08-20 — Rev63
 
 **Breaking release addressing feedback from Sean D'Epagnier (pypilot author,

package/dist/index.js

@@ -6,7 +6,7 @@ const scanner_1 = require("./scanner");
 const autopilot_provider_1 = require("./autopilot-provider");
 // Rev counter bumped on every build so the user can distinguish deploys
 // from the webapp header (feedback_revision_bump_each_build).
-const PLUGIN_REVISION = "Rev63";
+const PLUGIN_REVISION = "Rev65";
 // 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-pypilot-newui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "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

@@ -534,6 +534,20 @@
     windAngleTrue: null,
     windSpeedTrue: null,
     sog: null,                 // m/s
+    // Rev65 / 2.0.2 - wind-corner display preference. "awa" or "twa".
+    // Initial value derives from the browser-stored preference; if
+    // absent, defaults to "awa" and later auto-follows the AP mode
+    // (see _syncWindCornerFromMode).
+    windCornerShow: (() => {
+      try { return localStorage.getItem("pypilot-newui.windCornerShow") || "awa"; }
+      catch { return "awa"; }
+    })(),
+    windCornerUserPinned: (() => {
+      // User's manual tap "pins" the choice so mode changes stop
+      // overwriting it. Persistent per browser.
+      try { return localStorage.getItem("pypilot-newui.windCornerPinned") === "1"; }
+      catch { return false; }
+    })(),
   };
 
   const RAD2DEG = 180 / Math.PI;
@@ -672,7 +686,7 @@
   function applyValue(path, value) {
     switch (path) {
       case "steering.autopilot.state":            state.apState = value; break;
-      case "steering.autopilot.mode":             state.mode = value; setSelect("#mode-select", value); break;
+      case "steering.autopilot.mode":             state.mode = value; setSelect("#mode-select", value); _syncWindCornerFromMode(value); break;
       case "steering.autopilot.target":           state.target = numericOrNull(value); renderTargetArrow(); break;
       case "steering.autopilot.engaged":          state.engaged = !!value; renderEngage(); renderTargetArrow(); break;
       case "steering.autopilot.availableActions": state.availableActions = value || []; break;
@@ -780,9 +794,12 @@
         // getComputedTextLength() only works on rendered SVG text nodes.
         // Fall back to a heuristic width if the SVG has not laid out yet
         // (e.g. tab is not visible).
+        // Fallback width when SVG has not laid out yet (tab not visible).
+        // Rev65: HDG font shrunk from 18 to 14 for the new chip, so the
+        // per-char heuristic drops from 12 to 9 units.
         let w;
-        try { w = hdgTxt.getComputedTextLength(); } catch { w = s.length * 12; }
-        if (!isFinite(w) || w <= 0) w = s.length * 12;
+        try { w = hdgTxt.getComputedTextLength(); } catch { w = s.length * 9; }
+        if (!isFinite(w) || w <= 0) w = s.length * 9;
         hdgDeg.setAttribute("x", (w / 2 + 1).toFixed(1));
       }
     }
@@ -804,9 +821,15 @@
     twa:   { label: "TWA", read: () => state.windAngleTrue == null ? "---" : _sgn(state.windAngleTrue * RAD2DEG) + "°" },
     tws:   { label: "TWS", read: () => state.windSpeedTrue == null ? "---" : (state.windSpeedTrue * 1.94384).toFixed(1) + " kn" },
     twd:   { label: "TWD", read: () => state.windDirTrue   == null ? "---" : Math.round(state.windDirTrue * RAD2DEG) + "°" },
-    wind:  { label: () => (String(state.mode || "").includes("true") ? "TWA/TWS" : "AWA/AWS"),
+    // Rev65 / 2.0.2: the "wind" corner now honours a user-toggleable
+    // preference (state.windCornerShow: "awa" or "twa"), overridable by
+    // a short tap on the corner. When the AP mode changes TO true-wind,
+    // the preference auto-flips to TWA/TWS; when it changes AWAY from
+    // true-wind, it flips back to AWA/AWS. Manual taps after that stick
+    // until the mode flips again (see _syncWindCornerFromMode).
+    wind:  { label: () => (state.windCornerShow === "twa" ? "TWA/TWS" : "AWA/AWS"),
              read: () => {
-               const useTrue = String(state.mode || "").includes("true");
+               const useTrue = state.windCornerShow === "twa";
                const ang = useTrue ? state.windAngleTrue : state.windAngle;
                const spd = useTrue ? state.windSpeedTrue : state.windSpeed;
                const a = ang == null ? "---" : _sgn(ang * RAD2DEG) + "°";
@@ -885,6 +908,32 @@
     });
   }
   _refreshCustomDashEntries();
+  // Rev65 / 2.0.2: short tap on the "wind" corner flips the preference
+  // between AWA/AWS and TWA/TWS, and pins it so mode auto-changes stop
+  // overwriting it until the user opts back into auto-follow.
+  function _toggleWindCornerShow() {
+    state.windCornerShow = (state.windCornerShow === "twa") ? "awa" : "twa";
+    state.windCornerUserPinned = true;
+    try {
+      localStorage.setItem("pypilot-newui.windCornerShow", state.windCornerShow);
+      localStorage.setItem("pypilot-newui.windCornerPinned", "1");
+    } catch {}
+    _dashRenderCorners();
+    renderWindRose();
+  }
+  // Called from applyValue whenever the AP mode changes. If the user has
+  // not pinned the wind-corner preference, follow the mode: true-wind
+  // modes show TWA/TWS, everything else shows AWA/AWS.
+  function _syncWindCornerFromMode(mode) {
+    if (state.windCornerUserPinned) return;
+    const wantTrue = String(mode || "").toLowerCase().includes("true");
+    const next = wantTrue ? "twa" : "awa";
+    if (state.windCornerShow === next) return;
+    state.windCornerShow = next;
+    try { localStorage.setItem("pypilot-newui.windCornerShow", next); } catch {}
+    _dashRenderCorners();
+    renderWindRose();
+  }
   function _sgn(n) { return (n > 0 ? "+" : "") + Math.round(n); }
   function _dashLoadCfg() {
     try {
@@ -1062,9 +1111,10 @@
   }
 
   // SVG compass rose. The card (cardinals + ticks) rotates so N points to
-  // magnetic north regardless of boat heading; the boat is fixed pointing up;
-  // TWO independent wind arrows (AWA amber solid, TWA magenta dashed) rotate
-  // to their respective angles; wedges are boat-fixed helm guides.
+  // magnetic north regardless of boat heading; the boat is fixed pointing
+  // up; TWO independent wind arrows (AWA amber solid, TWA sea-green solid)
+  // rotate to their respective angles; wedges are boat-fixed helm guides;
+  // the bottom AWS/TWS readout follows the user's wind-corner preference.
   function renderWindRose() {
     const card = document.getElementById("rose-card");
     if (card && state.heading != null) {
@@ -1090,22 +1140,29 @@
       }
     }
 
-    // Speed readout at the bottom: prefer the source that is enabled; if
-    // both are enabled, show apparent (the one the crew feels).
-    const showAws = _windArrowShow.awa && state.windSpeed != null;
-    const showTws = _windArrowShow.twa && state.windSpeedTrue != null;
-    let windSpeed = null, tag = "";
-    if (showAws) { windSpeed = state.windSpeed; tag = "AWS"; }
-    else if (showTws) { windSpeed = state.windSpeedTrue; tag = "TWS"; }
-
-    // Rev56: sailing zones (green stbd / red port) are DRAWN STATIC in
-    // the SVG at fixed boat-centerline angles +/-30..60, so nothing to
-    // update here.
-    const speedText = document.getElementById("rose-speed");
+    // Rev65 / 2.0.2: bottom AWS/TWS readout now uses TWO separate text
+    // nodes (small dim label on top, big white number below) and follows
+    // `state.windCornerShow` so a tap on the wind corner also swaps the
+    // readout at the bottom of the rose. Falls back gracefully if the
+    // chosen source has no value yet.
+    const useTrue = state.windCornerShow === "twa";
+    const primarySpd = useTrue ? state.windSpeedTrue : state.windSpeed;
+    const primaryTag = useTrue ? "TWS" : "AWS";
+    let windSpeed = primarySpd, tag = primaryTag;
+    if (windSpeed == null) {
+      // Fall back to the other source so the number is not "---" when only
+      // one wind flavour is available (typical on boats without SOG).
+      const altSpd = useTrue ? state.windSpeed : state.windSpeedTrue;
+      const altTag = useTrue ? "AWS" : "TWS";
+      if (altSpd != null) { windSpeed = altSpd; tag = altTag; }
+    }
+    const speedLabel = document.getElementById("rose-speed-label");
+    const speedText  = document.getElementById("rose-speed");
+    if (speedLabel) speedLabel.textContent = windSpeed == null ? "" : tag;
     if (speedText) {
       speedText.textContent = windSpeed == null
         ? "--- kn"
-        : (windSpeed * 1.94384).toFixed(1) + " kn" + (tag ? " " + tag : "");
+        : (windSpeed * 1.94384).toFixed(1) + " kn";
     }
   }
 
@@ -1200,14 +1257,36 @@
   }
 
   function renderRudder(rad) {
-    if (rad == null) { $("#rudder-widget").setAttribute("hidden", ""); return; }
-    $("#rudder-widget").removeAttribute("hidden");
+    // Legacy widget (still hidden by default) - kept in case someone wires it.
+    const w = $("#rudder-widget");
+    if (rad == null) {
+      if (w) w.setAttribute("hidden", "");
+      // Also center the swipe-hint rudder marker so it looks amidships
+      // when data is missing rather than sticking to some old value.
+      const m = $("#rudder-marker");
+      if (m) m.style.left = "50%";
+      return;
+    }
+    if (w) w.removeAttribute("hidden");
     const deg = rad * RAD2DEG;
-    const pct = Math.max(-1, Math.min(1, deg / 45));
+    const pct45 = Math.max(-1, Math.min(1, deg / 45));
     const fill = $("#rudder-fill");
-    fill.style.width = Math.abs(pct * 50) + "%";
-    fill.style.transform = pct < 0 ? "translateX(-100%)" : "translateX(0%)";
-    $("#rudder-value").textContent = deg.toFixed(1) + " deg";
+    if (fill) {
+      fill.style.width = Math.abs(pct45 * 50) + "%";
+      fill.style.transform = pct45 < 0 ? "translateX(-100%)" : "translateX(0%)";
+    }
+    const val = $("#rudder-value");
+    if (val) val.textContent = deg.toFixed(1) + " deg";
+    // Rev65 / 2.0.2: paint the rudder marker on the swipe-hint bar. Range
+    // comes from the pypilot catalog (`rudder.range` in degrees) when
+    // available, else defaults to 45 deg either side.
+    const marker = $("#rudder-marker");
+    if (marker) {
+      const rangeDeg = Number(state.values?.["steering.autopilot.pypilot.rudder.range"]) || 45;
+      const pct = Math.max(-1, Math.min(1, deg / rangeDeg));
+      // pct = -1 -> left edge (0%), 0 -> center (50%), +1 -> right edge (100%).
+      marker.style.left = (50 + pct * 50).toFixed(1) + "%";
+    }
   }
 
   // Rev36 helper: build a slider row with nudge buttons -10/-1/+1/+10.
@@ -1667,6 +1746,16 @@
       _apPending = true;
       eng.classList.add("pending");
       const wasEngaged = state.engaged;
+      // Rev65 / 2.0.2: snapshot the heading the USER IS SEEING at the exact
+      // moment of the click, and use that same value for (a) the target we
+      // send to the server, (b) the optimistic local assign, (c) any later
+      // reference in this handler. Previously we re-read state.heading on
+      // each await point - on a laggy Tailscale link (200-800 ms RTT) the
+      // heading could have drifted a few degrees by the time the POST
+      // executed, so we sent one value to the server, assigned another
+      // locally, and the diamond jumped to a third when the real delta
+      // arrived. Carlos's report: "el diamante no se fija bien".
+      const capturedHeading = state.heading;
       // Optimistic: flip the visual state before waiting on the network.
       state.engaged = !wasEngaged;
       renderEngage();
@@ -1680,12 +1769,12 @@
           // does not serialise 2 round-trips before the AP actually engages.
           const [rEng, rTgt] = await Promise.all([
             _apRetry(apEngage),
-            state.heading != null ? _apRetry(() => apSetTargetRad(state.heading)) : Promise.resolve({ ok: true }),
+            capturedHeading != null ? _apRetry(() => apSetTargetRad(capturedHeading)) : Promise.resolve({ ok: true }),
           ]);
           ok = !!(rEng && rEng.ok);
-          if (rTgt && rTgt.ok && state.heading != null) {
-            state.target = state.heading;
-            state.localTargetRad = state.heading;
+          if (rTgt && rTgt.ok && capturedHeading != null) {
+            state.target = capturedHeading;
+            state.localTargetRad = capturedHeading;
             renderControl();
           }
         }
@@ -2487,35 +2576,50 @@
         _activateTab(ids[nextIdx], dir === 1 ? "next" : "prev");
       });
     });
-    // Rev48: long-press on any of the 4 corner cells opens the selector
-    // popup so the user assigns whatever data they want per corner.
+    // Rev48/65: long-press opens the corner-selector popup. Short tap on
+    // a corner whose current mapping is "wind" flips the label between
+    // AWA/AWS and TWA/TWS, pinning the user's choice so subsequent AP
+    // mode changes stop auto-flipping it (see _syncWindCornerFromMode).
     _dashLoadCfg();
     _dashPopulateSelectors();
     _dashRenderCorners();
     let _dashLongPressTimer = null;
+    let _dashPressStartedAt = 0;
+    let _dashPressWasLong = false;
     $$(".dash-rose .dash-cell[data-corner]").forEach((cell) => {
       const openSelector = (e) => {
         e && e.preventDefault();
+        _dashPressWasLong = true;
         _dashPopulateSelectors();
         const pop = document.getElementById("dash-help-pop");
         if (pop) pop.classList.add("open");
       };
-      cell.addEventListener("touchstart", (e) => {
+      const startPress = (e) => {
+        _dashPressStartedAt = Date.now();
+        _dashPressWasLong = false;
         if (_dashLongPressTimer) clearTimeout(_dashLongPressTimer);
         _dashLongPressTimer = setTimeout(() => openSelector(e), 500);
-      }, { passive: true });
-      const cancel = () => { if (_dashLongPressTimer) { clearTimeout(_dashLongPressTimer); _dashLongPressTimer = null; } };
-      cell.addEventListener("touchend", cancel, { passive: true });
-      cell.addEventListener("touchmove", cancel, { passive: true });
-      cell.addEventListener("touchcancel", cancel, { passive: true });
+      };
+      const endPress = () => {
+        if (_dashLongPressTimer) { clearTimeout(_dashLongPressTimer); _dashLongPressTimer = null; }
+        // Short tap on a wind-corner cell -> toggle AWS/TWS.
+        if (_dashPressWasLong) return;
+        const elapsed = Date.now() - _dashPressStartedAt;
+        if (elapsed >= 500) return;
+        const corner = cell.dataset.corner;
+        if (_dashCornerCfg[corner] === "wind") _toggleWindCornerShow();
+      };
+      cell.addEventListener("touchstart", startPress, { passive: true });
+      cell.addEventListener("touchend",   endPress,   { passive: true });
+      cell.addEventListener("touchmove",  () => { if (_dashLongPressTimer) { clearTimeout(_dashLongPressTimer); _dashLongPressTimer = null; } _dashPressWasLong = true; }, { passive: true });
+      cell.addEventListener("touchcancel",() => { if (_dashLongPressTimer) { clearTimeout(_dashLongPressTimer); _dashLongPressTimer = null; } }, { passive: true });
       cell.addEventListener("contextmenu", openSelector);
-      let _mouseTimer = null;
       cell.addEventListener("mousedown", (e) => {
         if (e.button !== 0) return;
-        _mouseTimer = setTimeout(() => openSelector(e), 600);
+        startPress(e);
       });
-      cell.addEventListener("mouseup",    () => { if (_mouseTimer) { clearTimeout(_mouseTimer); _mouseTimer = null; } });
-      cell.addEventListener("mouseleave", () => { if (_mouseTimer) { clearTimeout(_mouseTimer); _mouseTimer = null; } });
+      cell.addEventListener("mouseup",    endPress);
+      cell.addEventListener("mouseleave", () => { if (_dashLongPressTimer) { clearTimeout(_dashLongPressTimer); _dashLongPressTimer = null; } });
     });
     // Rev43: horizontal swipe between tabs on mobile/tablet.
     // Rules:

package/public/index.html

@@ -71,7 +71,7 @@
           <div class="dash-cell corner-tr" data-corner="tr"></div>
           <div class="dash-cell corner-bl" data-corner="bl"></div>
           <div class="dash-cell corner-br" data-corner="br"></div>
-          <svg id="wind-rose" class="rose-svg" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet">
+          <svg id="wind-rose" class="rose-svg" viewBox="-100 -100 200 210" preserveAspectRatio="xMidYMid meet">
             <!-- Outer compass ring -->
             <circle cx="0" cy="0" r="94" fill="none" stroke="#2b3542" stroke-width="2"/>
             <!-- Rev58: sailing zones as PIE SLICES from origin (r=0) out
@@ -106,10 +106,13 @@
                 <line x1="0" y1="-94" x2="0" y2="-84" transform="rotate(330)"/>
               </g>
               <!-- 4 cardinals: N accent yellow, ESW dim white. -->
-              <text x="0" y="-70" text-anchor="middle" dominant-baseline="middle" fill="#ffd54a" font-size="14" font-weight="900">N</text>
-              <text x="70" y="0" text-anchor="middle" dominant-baseline="middle" fill="#e5eaf3" font-size="13" font-weight="800">E</text>
-              <text x="0" y="70" text-anchor="middle" dominant-baseline="middle" fill="#e5eaf3" font-size="13" font-weight="800">S</text>
-              <text x="-70" y="0" text-anchor="middle" dominant-baseline="middle" fill="#e5eaf3" font-size="13" font-weight="800">W</text>
+              <text x="0"  y="-70" text-anchor="middle" dominant-baseline="middle" fill="#ffd54a" font-size="14" font-weight="900">N</text>
+              <text x="70" y="0"   text-anchor="middle" dominant-baseline="middle" fill="#e5eaf3" font-size="13" font-weight="800">E</text>
+              <!-- Rev65: S moved inward from y=70 to y=58 so the AWS/TWS
+                   bottom-of-rose label at y=70 does not overlap it when the
+                   card sits at heading 0. -->
+              <text x="0"  y="58"  text-anchor="middle" dominant-baseline="middle" fill="#e5eaf3" font-size="13" font-weight="800">S</text>
+              <text x="-70" y="0"  text-anchor="middle" dominant-baseline="middle" fill="#e5eaf3" font-size="13" font-weight="800">W</text>
               <!-- 8 numeric labels at 30 deg increments (skip cardinals). -->
               <g fill="#8b98a5" font-size="7" font-weight="700" font-family="ui-monospace, monospace" text-anchor="middle" dominant-baseline="middle">
                 <text transform="rotate(30)  translate(0,-72)">030</text>
@@ -122,30 +125,46 @@
                 <text transform="rotate(330) translate(0,-72)">330</text>
               </g>
             </g>
-            <!-- Rev58: HDG pushed to y=-82 (right against the top rim);
-                 wind speed dropped to y=+82 (bottom rim) to keep the
-                 whole center free for the boat + arrows. Number CENTERED
-                 on the digits only; the degree symbol is positioned by
-                 JS just after them so "9" and "298" both anchor at x=0. -->
-            <text id="rose-hdg-value" x="0" y="-82" text-anchor="middle" dominant-baseline="middle" fill="#ffffff" font-size="18" font-weight="900" font-family="ui-monospace, monospace">---</text>
-            <text id="rose-hdg-deg"   x="0" y="-82" text-anchor="start"  dominant-baseline="middle" fill="#ffffff" font-size="13" font-weight="700">°</text>
+            <!-- Rev65 / 2.0.2: HDG in a small chip that straddles the top
+                 rim. The chip's top edge sits above the ring by ~4 units
+                 (visually "asomando" per Carlos), the bottom edge sits
+                 just below the ring so the chip clearly reads as an
+                 overlay on top of the compass, not as a floating badge.
+                 The chip does NOT push the SVG viewBox up - only the
+                 painted rect crosses the ring line. Number CENTERED on
+                 the digits only; degree glyph placed by JS after the
+                 digits so "9" and "298" both anchor at x=0. -->
+            <g id="rose-hdg-chip">
+              <rect x="-24" y="-100" width="48" height="18" rx="4" ry="4"
+                    fill="rgba(0,0,0,0.72)" stroke="#4a5867" stroke-width="1"/>
+              <text id="rose-hdg-value" x="0" y="-90" text-anchor="middle" dominant-baseline="middle" fill="#ffffff" font-size="14" font-weight="900" font-family="ui-monospace, monospace">---</text>
+              <text id="rose-hdg-deg"   x="0" y="-90" text-anchor="start"  dominant-baseline="middle" fill="#ffffff" font-size="10" font-weight="700">°</text>
+            </g>
             <!-- Rev50: boat overhead SVG (mareas-ihm), scaled 0.22 so
                  the hull spans ~100 units = 50 % of the 200-unit rose
                  diameter. Rotated -90 so bow points up. -->
             <g id="rose-boat" transform="rotate(-90) scale(0.22)">
               <image href="boat-cenital.svg" x="-228" y="-76" width="456" height="152"/>
             </g>
-            <!-- Rev58: two independent wind arrows so the crew can watch
-                 apparent AND true at the same time. AWA in amber (crew
-                 default), TWA in magenta with a dashed shaft. Each is
-                 toggled independently from the corner popup (localStorage). -->
+            <!-- Rev65 / 2.0.2: two independent wind arrows, both solid
+                 (no more dashed shaft), each labelled AWA / TWA in text
+                 that rotates with the arrow so it always reads from the
+                 head. AWA = amber (the wind the crew feels), big head.
+                 TWA = sea-green (informational), smaller head. Both
+                 toggled independently from the corner popup. -->
             <g id="rose-wind-arrow" style="display:none">
-              <line x1="0" y1="-86" x2="0" y2="-36" stroke="#ffd54a" stroke-width="3" stroke-linecap="round"/>
-              <polygon points="0,-30 -7,-42 7,-42" fill="#ffd54a" stroke="#8a6a00" stroke-width="0.6"/>
+              <line x1="0" y1="-86" x2="0" y2="-32" stroke="#ffd54a" stroke-width="3" stroke-linecap="round"/>
+              <polygon points="0,-24 -9,-40 9,-40" fill="#ffd54a" stroke="#8a6a00" stroke-width="0.6"/>
+              <text x="0" y="-58" text-anchor="middle" dominant-baseline="middle"
+                    fill="#ffd54a" stroke="#3a2600" stroke-width="0.4" paint-order="stroke fill"
+                    font-size="8" font-weight="900" letter-spacing="1">AWA</text>
             </g>
             <g id="rose-wind-arrow-twa" style="display:none">
-              <line x1="0" y1="-86" x2="0" y2="-36" stroke="#c780f5" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="4 3"/>
-              <polygon points="0,-30 -6,-40 6,-40" fill="#c780f5" stroke="#3f1d5c" stroke-width="0.6"/>
+              <line x1="0" y1="-86" x2="0" y2="-38" stroke="#5ce8c0" stroke-width="2.5" stroke-linecap="round"/>
+              <polygon points="0,-32 -6,-42 6,-42" fill="#5ce8c0" stroke="#1a4438" stroke-width="0.6"/>
+              <text x="0" y="-62" text-anchor="middle" dominant-baseline="middle"
+                    fill="#5ce8c0" stroke="#0f2620" stroke-width="0.4" paint-order="stroke fill"
+                    font-size="7" font-weight="900" letter-spacing="1">TWA</text>
             </g>
             <!-- Rev57: target indicator - CYAN diamond just outside the
                  compass ring, only shown when AP is engaged. Rotated to
@@ -154,10 +173,17 @@
             <g id="rose-target-arrow" style="display:none">
               <polygon points="0,-104 -7,-96 0,-88 7,-96" fill="#4dd4ff" stroke="#003b52" stroke-width="1.2"/>
             </g>
-            <!-- Rev58: wind speed dropped to y=+82 (bottom rim) to keep
-                 the boat area clean. Sub-label picks the source with a
-                 hint (AWS / TWS / both). -->
-            <text id="rose-speed" x="0" y="82" text-anchor="middle" fill="#ffffff" font-size="16" font-weight="800">--- kn</text>
+            <!-- Rev65 / 2.0.2: wind speed split into two stacked lines
+                 - a small dim label (AWS/TWS/both) and a large white
+                 number - separated by empty space so the S cardinal and
+                 the surrounding rose stay visible in between. The whole
+                 stack sits below the compass ring: label just outside at
+                 y=+100, number below at y=+108, both fitting inside the
+                 expanded viewBox (extra 10 units at the bottom). -->
+            <text id="rose-speed-label" x="0" y="98" text-anchor="middle" dominant-baseline="middle"
+                  fill="#8b98a5" font-size="8" font-weight="700" letter-spacing="1.5"></text>
+            <text id="rose-speed"       x="0" y="108" text-anchor="middle" dominant-baseline="middle"
+                  fill="#ffffff" font-size="15" font-weight="900" font-family="ui-monospace, monospace">--- kn</text>
           </svg>
         </div>
       </div>
@@ -251,12 +277,18 @@
           <div id="rudder-value" class="value">--</div>
         </div>
 
-        <!-- Rev53: swipe affordance strip with central triangle toggle.
-             Left/right arrows navigate to prev/next tab (like a mini
-             breadcrumb + swipe hint). Central yellow glow triangle
-             hides/shows the top nav bar. This lets the user reclaim
-             the full viewport for the rose. Only visible inside Control. -->
+        <!-- Rev53/65: swipe affordance strip with central triangle toggle
+             AND (Rev65 / 2.0.2) a rudder-angle indicator painted on the
+             same strip. Track: horizontal gradient from red (port) at the
+             left to green (stbd) at the right, on a black band. Marker:
+             a thin vertical bar that sits at the exact centre when the
+             rudder is amidships and slides left/right proportional to
+             `state.rudderAngle / state.rudderRange`. The central yellow
+             triangle keeps its nav-toggle role AND visually reads as the
+             "zero" reference of the rudder bar. -->
         <div class="swipe-hint" id="swipe-hint" aria-hidden="true">
+          <div class="rudder-track"></div>
+          <div class="rudder-marker" id="rudder-marker" style="left:50%"></div>
           <span class="swipe-hint-arrow" data-swipe-dir="prev">‹</span>
           <span class="swipe-hint-arrow" data-swipe-dir="prev">‹</span>
           <button class="nav-toggle" id="nav-toggle" aria-label="Mostrar / ocultar barra de pestañas" title="Mostrar / ocultar barra de pestañas">
@@ -886,6 +918,6 @@
   </div>
 
   <!-- Cache-busting: bump the ?v= on every Rev to force Firefox to fetch fresh app.js -->
-  <script src="app.js?v=Rev63"></script>
+  <script src="app.js?v=Rev65"></script>
 </body>
 </html>

package/public/style.css

@@ -1543,13 +1543,15 @@ main { touch-action: pan-y; overflow-x: hidden; }
    strip with subtle motion cueing that swipe is available. Also acts
    as tappable arrows for tab navigation. */
 .swipe-hint {
+  position: relative;      /* Rev65: anchor for the rudder track + marker */
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-top: 10px;
   padding: 8px 12px;
-  background: linear-gradient(90deg, rgba(55,182,255,0.14) 0%, rgba(55,182,255,0.05) 50%, rgba(55,182,255,0.14) 100%);
+  background: #08111c;      /* Rev65: solid dark base; the rudder track
+                               below paints its own gradient on top. */
   border: 1px dashed rgba(55,182,255,0.35);
   border-radius: 10px;
   color: rgba(255, 255, 255, 0.65);
@@ -1559,6 +1561,46 @@ main { touch-action: pan-y; overflow-x: hidden; }
   user-select: none;
   overflow: hidden;
 }
+
+/* Rev65 / 2.0.2 - Rudder angle bar painted inside the swipe-hint strip.
+   .rudder-track is a full-width horizontal gradient (red = port left,
+   green = stbd right) with a dim mid-tone so amidships reads as
+   "neutral". The three foreground layers (arrows, nav-toggle triangle,
+   marker) sit above it via z-index. The nav-toggle's own yellow
+   triangle visually stands in for the 0 deg reference. */
+.swipe-hint .rudder-track {
+  position: absolute;
+  inset: 4px 8px;                         /* small inset from the strip edge */
+  border-radius: 8px;
+  background: linear-gradient(
+    90deg,
+    rgba(231, 76, 60, 0.65) 0%,           /* PORT: red */
+    rgba(231, 76, 60, 0.20) 40%,
+    rgba(46, 46, 46, 0.30) 50%,           /* dim mid = amidships */
+    rgba(46, 204, 113, 0.20) 60%,
+    rgba(46, 204, 113, 0.65) 100%         /* STBD: green */
+  );
+  z-index: 0;
+  pointer-events: none;
+}
+.swipe-hint .rudder-marker {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  width: 4px;
+  margin-left: -2px;                      /* center on `left` */
+  background: #ffffff;
+  border-radius: 2px;
+  box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
+  z-index: 1;
+  transition: left 180ms ease-out;
+  pointer-events: none;
+}
+.swipe-hint-arrow,
+.swipe-hint .nav-toggle {
+  position: relative;                     /* stack above the rudder track */
+  z-index: 2;
+}
 .swipe-hint-arrow {
   font-size: 28px;
   line-height: 1;