signalk-pypilot-newui 2.0.2 → 2.0.3

package/CHANGELOG.md

@@ -1,44 +1,16 @@
 # 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.3 — 2026-08-20 — Rev66 - rollback of 2.0.2
+
+Codebase is functionally identical to 2.0.1. Version 2.0.2 introduced
+regressions in the socket auto-reconnect and the new "escalated restart"
+triad that could leave the plugin showing `connected: false` against a
+pypilot_web that is in fact alive and serving other consumers. Rolling
+back to the 2.0.1 behaviour and reintroducing the 2.0.2 UI polish
+(target diamond snapshot, redesigned AWA/TWA arrows, HDG chip, wind
+speed chip, tap wind toggle, rudder bar, debug console, escalated
+restarts) in a later 2.0.4+ release, one item at a time with proper QA
+before publish. 2.0.2 has been deprecated on npm.
 
 ## 2.0.1 — 2026-08-20 — Rev64
 

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 = "Rev65";
+const PLUGIN_REVISION = "Rev66";
 // 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.2",
+  "version": "2.0.3",
   "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,20 +534,6 @@
     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;
@@ -686,7 +672,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); _syncWindCornerFromMode(value); break;
+      case "steering.autopilot.mode":             state.mode = value; setSelect("#mode-select", 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;
@@ -794,12 +780,9 @@
         // 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 * 9; }
-        if (!isFinite(w) || w <= 0) w = s.length * 9;
+        try { w = hdgTxt.getComputedTextLength(); } catch { w = s.length * 12; }
+        if (!isFinite(w) || w <= 0) w = s.length * 12;
         hdgDeg.setAttribute("x", (w / 2 + 1).toFixed(1));
       }
     }
@@ -821,15 +804,9 @@
     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) + "°" },
-    // 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"),
+    wind:  { label: () => (String(state.mode || "").includes("true") ? "TWA/TWS" : "AWA/AWS"),
              read: () => {
-               const useTrue = state.windCornerShow === "twa";
+               const useTrue = String(state.mode || "").includes("true");
                const ang = useTrue ? state.windAngleTrue : state.windAngle;
                const spd = useTrue ? state.windSpeedTrue : state.windSpeed;
                const a = ang == null ? "---" : _sgn(ang * RAD2DEG) + "°";
@@ -908,32 +885,6 @@
     });
   }
   _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 {
@@ -1111,10 +1062,9 @@
   }
 
   // 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 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.
+  // 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.
   function renderWindRose() {
     const card = document.getElementById("rose-card");
     if (card && state.heading != null) {
@@ -1140,29 +1090,22 @@
       }
     }
 
-    // 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;
+    // 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");
     if (speedText) {
       speedText.textContent = windSpeed == null
         ? "--- kn"
-        : (windSpeed * 1.94384).toFixed(1) + " kn";
+        : (windSpeed * 1.94384).toFixed(1) + " kn" + (tag ? " " + tag : "");
     }
   }
 
@@ -1257,36 +1200,14 @@
   }
 
   function renderRudder(rad) {
-    // 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");
+    if (rad == null) { $("#rudder-widget").setAttribute("hidden", ""); return; }
+    $("#rudder-widget").removeAttribute("hidden");
     const deg = rad * RAD2DEG;
-    const pct45 = Math.max(-1, Math.min(1, deg / 45));
+    const pct = Math.max(-1, Math.min(1, deg / 45));
     const fill = $("#rudder-fill");
-    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) + "%";
-    }
+    fill.style.width = Math.abs(pct * 50) + "%";
+    fill.style.transform = pct < 0 ? "translateX(-100%)" : "translateX(0%)";
+    $("#rudder-value").textContent = deg.toFixed(1) + " deg";
   }
 
   // Rev36 helper: build a slider row with nudge buttons -10/-1/+1/+10.
@@ -1746,16 +1667,6 @@
       _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();
@@ -1769,12 +1680,12 @@
           // does not serialise 2 round-trips before the AP actually engages.
           const [rEng, rTgt] = await Promise.all([
             _apRetry(apEngage),
-            capturedHeading != null ? _apRetry(() => apSetTargetRad(capturedHeading)) : Promise.resolve({ ok: true }),
+            state.heading != null ? _apRetry(() => apSetTargetRad(state.heading)) : Promise.resolve({ ok: true }),
           ]);
           ok = !!(rEng && rEng.ok);
-          if (rTgt && rTgt.ok && capturedHeading != null) {
-            state.target = capturedHeading;
-            state.localTargetRad = capturedHeading;
+          if (rTgt && rTgt.ok && state.heading != null) {
+            state.target = state.heading;
+            state.localTargetRad = state.heading;
             renderControl();
           }
         }
@@ -2576,50 +2487,35 @@
         _activateTab(ids[nextIdx], dir === 1 ? "next" : "prev");
       });
     });
-    // 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).
+    // Rev48: long-press on any of the 4 corner cells opens the selector
+    // popup so the user assigns whatever data they want per corner.
     _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");
       };
-      const startPress = (e) => {
-        _dashPressStartedAt = Date.now();
-        _dashPressWasLong = false;
+      cell.addEventListener("touchstart", (e) => {
         if (_dashLongPressTimer) clearTimeout(_dashLongPressTimer);
         _dashLongPressTimer = setTimeout(() => openSelector(e), 500);
-      };
-      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 });
+      }, { 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 });
       cell.addEventListener("contextmenu", openSelector);
+      let _mouseTimer = null;
       cell.addEventListener("mousedown", (e) => {
         if (e.button !== 0) return;
-        startPress(e);
+        _mouseTimer = setTimeout(() => openSelector(e), 600);
       });
-      cell.addEventListener("mouseup",    endPress);
-      cell.addEventListener("mouseleave", () => { if (_dashLongPressTimer) { clearTimeout(_dashLongPressTimer); _dashLongPressTimer = null; } });
+      cell.addEventListener("mouseup",    () => { if (_mouseTimer) { clearTimeout(_mouseTimer); _mouseTimer = null; } });
+      cell.addEventListener("mouseleave", () => { if (_mouseTimer) { clearTimeout(_mouseTimer); _mouseTimer = 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 210" preserveAspectRatio="xMidYMid meet">
+          <svg id="wind-rose" class="rose-svg" viewBox="-100 -100 200 200" 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,13 +106,10 @@
                 <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>
-              <!-- 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>
+              <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>
               <!-- 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>
@@ -125,46 +122,30 @@
                 <text transform="rotate(330) translate(0,-72)">330</text>
               </g>
             </g>
-            <!-- 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>
+            <!-- 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>
             <!-- 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>
-            <!-- 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. -->
+            <!-- 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). -->
             <g id="rose-wind-arrow" style="display:none">
-              <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>
+              <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"/>
             </g>
             <g id="rose-wind-arrow-twa" style="display:none">
-              <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>
+              <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"/>
             </g>
             <!-- Rev57: target indicator - CYAN diamond just outside the
                  compass ring, only shown when AP is engaged. Rotated to
@@ -173,17 +154,10 @@
             <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>
-            <!-- 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>
+            <!-- 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>
           </svg>
         </div>
       </div>
@@ -277,18 +251,12 @@
           <div id="rudder-value" class="value">--</div>
         </div>
 
-        <!-- 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. -->
+        <!-- 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. -->
         <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">
@@ -918,6 +886,6 @@
   </div>
 
   <!-- Cache-busting: bump the ?v= on every Rev to force Firefox to fetch fresh app.js -->
-  <script src="app.js?v=Rev65"></script>
+  <script src="app.js?v=Rev66"></script>
 </body>
 </html>

package/public/style.css

@@ -1543,15 +1543,13 @@ 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: #08111c;      /* Rev65: solid dark base; the rudder track
-                               below paints its own gradient on top. */
+  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%);
   border: 1px dashed rgba(55,182,255,0.35);
   border-radius: 10px;
   color: rgba(255, 255, 255, 0.65);
@@ -1561,46 +1559,6 @@ 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;