signalk-pypilot-newui 2.0.3 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,86 @@
 # Changelog
 
+## 2.0.4 — 2026-08-21 — Rev67
+
+Reintroduces (with proper QA) the UI polish + reliability work that was
+withdrawn in 2.0.3 when 2.0.2 hit regressions. Every item below was
+tested on Carlos's Tunatunes Pi Zero W setup before publish.
+
+### Fixed
+
+- **Restart engine now uses `sv` (runit), not `systemctl`.** piCore does
+  not ship systemd; the previous `sudo systemctl restart pypilot pypilot_web`
+  was silently falling through to `|| true` on every install. Only the
+  `pkill -9` had any effect, and runit's `runsv` was auto-relaunching
+  the killed processes into a slightly inconsistent state that
+  accumulated zombies + I2C contention until the Pi Zero locked up.
+  Fixed to `sudo sv restart /etc/sv/pypilot /etc/sv/pypilot_web /etc/sv/pypilot_hat`
+  with a selective `pkill -9 -f 'python.*pypilot --version'` safety net.
+- **`pypilot --version` preset in Debug console wrapped in `timeout 3`.**
+  On piCore that command starts the full pypilot process and never
+  exits cleanly; each click was leaving a zombie holding I2C and TCP
+  resources. Falls back to reading the packaged version file.
+- **Target diamond drifted after tapping AP on laggy links.** The
+  optimistic-target assign now happens INSTANTLY on click (same tick),
+  not after the parallel promise resolves - so the diamond snaps to
+  the captured heading immediately, without a jump to the stale value
+  then back. Nudge also updates `state.target` optimistically so the
+  diamond moves in the same tick as the button press.
+- **socket.io auto-reconnect no longer gives up.** `reconnectionAttempts`
+  changed from 30 (which could exhaust on a long outage) to Infinity;
+  backoff capped at 30 s. Restarts done via `/debug-cmd` (`restart.web`
+  / `reboot.pi`) now schedule an explicit `pause+resume` after the
+  operation.
+- **Reconnection watchdog** (every 60 s, was 30 s): if the socket has
+  been disconnected > 90 s, force a pause+resume once. Max 3 forced
+  reconnects in a rolling 15-min window so a permanently-dead
+  pypilot_web is not turned into a local DDoS. Watchdog interval
+  loosened per Carlos: "con la Pi Zero debemos ser suuuuuper ratas".
+
+### Changed - Emergency section simplified
+
+The 3-level escalated restart triad shipped in 2.0.2 has been trimmed
+to 2 levels in Setup -> Emergency: **RESTART pypilot** (level 2, ~10-15 s
+outage) + **reboot Pi** (level 3, ~35-60 s). The old level 1
+(`restart pypilot_web`) rarely helps in practice - when the Pi Zero is
+saturated a full reboot is what actually helps - so it moved to the
+Debug console below as an advanced preset for the ~5 % edge cases.
+
+### Compass rose
+
+- HDG in a small dark chip that straddles the top of the ring, narrowed
+  from 48 to 40 units wide so the enlarged target diamond can peek out
+  on all four sides even when target is dead ahead.
+- Target diamond enlarged (28 wide, 30 tall) so its top point asoma
+  above the HDG chip and its bottom point below it.
+- Wind arrows both solid (no dashed shaft on TWA), amber AWA (big head)
+  + sea-green (#5ce8c0) TWA (small head), each with its own rotating
+  text label placed at very different radii so they never overlap even
+  when both arrows point in the same direction.
+- Wind speed at the bottom of the rose now inside a small dark chip
+  (same look as the HDG chip on top). Short-tap on the chip OR on a
+  corner mapped to "wind" flips AWS/TWS. Long-press opens the popup.
+- Corner options `AWA` and `TWA` now show angle AND matching wind speed
+  (AWA/AWS and TWA/TWS) as a combined 2-line cell, consistent with the
+  `wind` combo.
+
+### Rudder angle indicator in the swipe-hint bar
+
+- Default range **±70°** (was ±45°), matching typical TinyPilot configs.
+- Explicit numeric labels at both ends showing the actual range from
+  the pypilot catalog.
+- Intermediate tick marks every 10° plus numeric mid-labels at 20°, 40°
+  and 60° each side, so the operator reads the rudder angle at a glance.
+
+### Internal
+
+- Debug console preset `pypilot.version` now `timeout 3 python3 -c
+  'import pypilot; print(pypilot.__version__)'` with fallback.
+- Merge-based `_pluginConfigMerge()` helper preserved.
+- Per-cell state for the long-press / short-tap handler on the corner
+  dashboard (Rev65's shared timer flags were race-flipping and killing
+  the tap toggle intermittently).
+
 ## 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

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 = "Rev66";
+const PLUGIN_REVISION = "Rev67";
 // 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
@@ -255,6 +255,17 @@ module.exports = function (app) {
                 catch { /* defensive */ }
                 app._pypilotNewuiKeepAlive = null;
             }
+            // Rev66 / 2.0.4: clear the reconnection watchdog interval, otherwise
+            // a Disable+Enable cycle in SK Admin would leave the previous
+            // watchdog running against a null `client` forever.
+            const wd = app._pypilotNewuiWatchdogTimer;
+            if (wd) {
+                try {
+                    clearInterval(wd);
+                }
+                catch { /* defensive */ }
+                app._pypilotNewuiWatchdogTimer = null;
+            }
             // The SK autopilot API does not expose an unregister; on plugin stop
             // the server drops our provider when it garbage-collects the plugin.
             apProvider = null;
@@ -269,6 +280,16 @@ module.exports = function (app) {
         },
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         registerWithRouter: (router) => {
+            // Rev66 / 2.0.4: shared "hard reconnect" helper - pauses the socket
+            // and re-opens it after a short beat. Used by /restart-pypilot,
+            // /debug-cmd (restart.web / reboot.pi presets) and the watchdog.
+            const doReconnect = () => {
+                try {
+                    client?.pause();
+                    setTimeout(() => client?.resume(), 800);
+                }
+                catch { }
+            };
             router.get("/status", (_req, res) => {
                 res.json({
                     revision: PLUGIN_REVISION,
@@ -552,13 +573,29 @@ module.exports = function (app) {
                 const host = props.host;
                 const sshUser = props.sshUser || "tc";
                 const sshPassword = props.sshPassword || "";
-                const restartCmd = "sudo systemctl restart pypilot pypilot_web 2>&1 || sudo /etc/init.d/pypilot restart 2>&1 || true";
-                // Local reconnect helper used both on success and on error paths.
-                const doReconnect = () => { try {
-                    client?.pause();
-                    setTimeout(() => client?.resume(), 800);
-                }
-                catch { } };
+                // Rev66 / 2.0.4: TinyPilot runs piCore Linux which uses runit,
+                // NOT systemd. Our previous `sudo systemctl restart ...` command
+                // was silently falling through to `|| true` on every install
+                // because systemctl does not exist. The only step that had any
+                // effect was the pkill; runsv then auto-relaunched the killed
+                // processes. That inconsistent "kill without a clean start"
+                // pattern was accumulating zombies + saturating the Pi Zero's
+                // RAM until it hung.
+                //
+                // The runit-native way: `sudo sv restart /etc/sv/<service>` sends
+                // SIGTERM to the child, waits for it to exit, and starts it back
+                // up under supervision. Clean by design. We keep pkill as a
+                // belt-and-braces safety net in case a python child ignores TERM
+                // (some pypilot subprocesses have historically done that).
+                const restartCmd = [
+                    "sudo sv restart /etc/sv/pypilot /etc/sv/pypilot_web /etc/sv/pypilot_hat 2>&1 || true",
+                    "sleep 2",
+                    "sudo pkill -9 -f 'python.*pypilot --version' 2>&1 || true",
+                    "sleep 1",
+                    "sudo sv up /etc/sv/pypilot /etc/sv/pypilot_web /etc/sv/pypilot_hat 2>&1 || true",
+                ].join(" ; ");
+                // `doReconnect` is defined at the router scope (Rev66) and reused by
+                // /restart-pypilot, /debug-cmd and the watchdog.
                 if (!sshPassword) {
                     doReconnect();
                     return res.status(202).json({
@@ -649,8 +686,22 @@ module.exports = function (app) {
                 "top.snapshot": "top -bn1 2>&1 | head -20",
                 "uptime": "uptime && cat /proc/loadavg",
                 "df": "df -h 2>&1",
-                "pypilot.version": "pypilot --version 2>&1 || (test -f /home/tc/pypilot/version && cat /home/tc/pypilot/version) || echo 'unknown'",
-                "restart.web": "sudo systemctl restart pypilot_web 2>&1 && echo OK",
+                // Rev66 / 2.0.4: `pypilot --version` starts the full pypilot
+                // process and never exits cleanly on TinyCore + pypilot 2021 -
+                // every click of this preset left a python zombie holding I2C
+                // and TCP resources. Wrap with `timeout 3` so the exec is killed
+                // after 3 s, then fall back to reading the packaged version
+                // file. Also `python3 -c 'import pypilot; print(pypilot.__version__)'`
+                // as belt-and-braces.
+                "pypilot.version": "timeout 3 python3 -c 'import pypilot; print(pypilot.__version__)' 2>&1 || (test -f /home/tc/pypilot/version && cat /home/tc/pypilot/version) || (ls -1 /usr/local/lib/python3.8/site-packages/pypilot-*.dist-info 2>&1 | head -1) || echo 'unknown'",
+                // Rev66 / 2.0.4: piCore uses runit, not systemd. `sudo sv
+                // restart /etc/sv/pypilot_web` is the correct clean-restart
+                // primitive - it TERMs the child, waits, then supervise brings
+                // it back up. Scoped to the web unit so the AP core keeps
+                // steering. Kept as an advanced preset in the Debug console
+                // (the Emergency triad simplified to 2 levels: RESTART pypilot
+                // + reboot Pi).
+                "restart.web": "sudo sv restart /etc/sv/pypilot_web 2>&1 && echo OK",
                 "reboot.pi": "sudo reboot",
             };
             router.post("/debug-cmd", async (req, res) => {
@@ -722,6 +773,15 @@ module.exports = function (app) {
                             finish({ ok: false, stdout: e?.message || String(e) });
                         }
                     });
+                    // Rev66 / 2.0.4: schedule a hard reconnect after presets that
+                    // disrupt pypilot_web. Level 1 (restart.web) is quick - 4 s is
+                    // enough for the socket to notice + wait for pypilot_web to be
+                    // back up. Level 3 (reboot.pi) needs to survive a ~40 s cold
+                    // reboot; the watchdog below picks up anything longer than that.
+                    if (preset === "restart.web")
+                        setTimeout(doReconnect, 4000);
+                    if (preset === "reboot.pi")
+                        setTimeout(doReconnect, 60000);
                     // For reboot.pi the ssh session drops as the box goes down, so we
                     // report success even on a non-zero exit if we at least connected.
                     return res.json({
@@ -736,6 +796,49 @@ module.exports = function (app) {
                     return res.status(500).json({ error: e?.message || String(e), preset });
                 }
             });
+            // Rev66 / 2.0.4: reconnection watchdog. If the socket has been
+            // disconnected for > 90 s (much longer than any legitimate
+            // pypilot_web restart), force a pause+resume to kick socket.io out
+            // of whatever state it got stuck in. Anti-loop: at most 3 forced
+            // reconnects in a rolling 15-min window - after that we stop
+            // trying automatically so a permanently-dead pypilot_web does
+            // not turn into a local DDoS.
+            // Rev66 / 2.0.4: watchdog tick every 60 s (was 30 s). The Pi Zero
+            // running pypilot is fragile so we minimise every recurring
+            // operation - a check that took 30 s worth of wakeups now takes 60 s.
+            // Combined with the >90 s "down" threshold, the watchdog only ever
+            // acts when the socket has been dead for a while, not on transient
+            // Tailscale hiccups.
+            let _wdogDisconnectSince = null;
+            let _wdogForcedAttempts = []; // timestamps of forced reconnects
+            const _wdogTimer = setInterval(() => {
+                try {
+                    if (client?.connected) {
+                        _wdogDisconnectSince = null;
+                        return;
+                    }
+                    if (_wdogDisconnectSince == null) {
+                        _wdogDisconnectSince = Date.now();
+                        return;
+                    }
+                    const downMs = Date.now() - _wdogDisconnectSince;
+                    if (downMs < 90000)
+                        return;
+                    // Prune attempts older than 15 min.
+                    const cutoff = Date.now() - 15 * 60000;
+                    _wdogForcedAttempts = _wdogForcedAttempts.filter((t) => t > cutoff);
+                    if (_wdogForcedAttempts.length >= 3)
+                        return;
+                    _wdogForcedAttempts.push(Date.now());
+                    _wdogDisconnectSince = Date.now(); // reset the timer for the next check
+                    app.debug(`[watchdog] socket down ${(downMs / 1000) | 0}s - forcing pause+resume (attempt ${_wdogForcedAttempts.length}/3 in 15 min)`);
+                    doReconnect();
+                }
+                catch { /* silent */ }
+            }, 60000);
+            // Store on `app` so plugin.stop() can clear it (defensive - the
+            // registerWithRouter closure does not have a stop hook here).
+            app._pypilotNewuiWatchdogTimer = _wdogTimer;
         },
     };
     // ---- helpers ----

package/dist/pypilot-client.js

@@ -55,13 +55,18 @@ class PypilotClient extends events_1.EventEmitter {
         this.opts.log("info", `[pypilot] connecting socket.io to ${url}`);
         this.socket = (0, socket_io_client_1.io)(url, {
             transports: ["websocket", "polling"],
-            // Reconnect but with a ceiling so a wedged pypilot_web (Pi Zero pinned
-            // at 100% CPU) does not get hammered forever. After the ceiling we
-            // give up until the user pushes /resume from the webapp.
+            // Rev66 / 2.0.4: infinite reconnect attempts. The old 30-attempt
+            // ceiling meant a long-ish outage (say a Pi reboot that takes 45 s +
+            // a couple of socket.io backoff cycles) could exhaust the counter
+            // and leave the socket "closed forever" - the only recovery was
+            // toggling the plugin in SK Admin. With infinite retries plus the
+            // 30 s cap on backoff delay, the client keeps trying at most every
+            // 30 s until pypilot_web comes back on its own or the watchdog in
+            // index.ts triggers a hard pause+resume.
             reconnection: true,
-            reconnectionAttempts: 30,
+            reconnectionAttempts: Infinity,
             reconnectionDelay: this.opts.reconnectDelayMs,
-            reconnectionDelayMax: 20000,
+            reconnectionDelayMax: 30000,
             timeout: 10000,
             autoConnect: true,
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-pypilot-newui",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "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));
       }
     }
@@ -799,14 +816,30 @@
   const DASH_DATA = {
     none:  { label: "-",   read: () => "" },
     hdg:   { label: "HDG", read: () => state.heading    == null ? "---" : Math.round(state.heading    * RAD2DEG) + "°" },
-    awa:   { label: "AWA", read: () => state.windAngle  == null ? "---" : _sgn(state.windAngle  * RAD2DEG) + "°" },
+    // Rev66 / 2.0.4 (Carlos): awa/twa muestran ANGULO + VELOCIDAD juntos
+    // como el `wind` combo. aws/tws solo velocidad para quien la quiera sola.
+    awa:   { label: "AWA/AWS", read: () => {
+              const a = state.windAngle == null ? "---" : _sgn(state.windAngle * RAD2DEG) + "°";
+              const s = state.windSpeed == null ? "---" : (state.windSpeed * 1.94384).toFixed(1) + " kn";
+              return { value: a, sub: s };
+            } },
     aws:   { label: "AWS", read: () => state.windSpeed  == null ? "---" : (state.windSpeed  * 1.94384).toFixed(1) + " kn" },
-    twa:   { label: "TWA", read: () => state.windAngleTrue == null ? "---" : _sgn(state.windAngleTrue * RAD2DEG) + "°" },
+    twa:   { label: "TWA/TWS", read: () => {
+              const a = state.windAngleTrue == null ? "---" : _sgn(state.windAngleTrue * RAD2DEG) + "°";
+              const s = state.windSpeedTrue == null ? "---" : (state.windSpeedTrue * 1.94384).toFixed(1) + " kn";
+              return { value: a, sub: s };
+            } },
     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 +918,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 +1121,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 +1150,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";
     }
   }
 
@@ -1199,15 +1266,73 @@
     }
   }
 
+  // Rev66 / 2.0.4 - cache to avoid repainting ticks every rudder delta.
+  let _lastRudderRange = null;
+  function _renderRudderScale(rangeDeg) {
+    const ticksBox = $("#rudder-ticks");
+    if (!ticksBox) return;
+    ticksBox.innerHTML = "";
+    // Ticks cada 10 deg, majors + labels cada 20 deg. Include 0 in the
+    // middle. Sign of the number tells the side.
+    const step = 10;
+    for (let d = -Math.round(rangeDeg); d <= Math.round(rangeDeg); d += step) {
+      const pct = 50 + (d / rangeDeg) * 50;
+      const tick = document.createElement("div");
+      tick.className = (d % 20 === 0) ? "rt major" : "rt";
+      tick.style.left = pct.toFixed(2) + "%";
+      ticksBox.appendChild(tick);
+      // Numeric labels every 20 deg, but skip the extremes (already shown
+      // by the left/right end labels) and skip 0 (would clash with the
+      // yellow nav-toggle triangle in the middle).
+      if (d % 20 === 0 && d !== 0 && Math.abs(d) < rangeDeg - 2) {
+        const label = document.createElement("div");
+        label.className = "rl";
+        label.style.left = pct.toFixed(2) + "%";
+        label.textContent = (d > 0 ? "+" : "") + d;
+        ticksBox.appendChild(label);
+      }
+    }
+  }
   function renderRudder(rad) {
-    if (rad == null) { $("#rudder-widget").setAttribute("hidden", ""); return; }
-    $("#rudder-widget").removeAttribute("hidden");
+    // Rev66 / 2.0.4: update the rudder-range labels FIRST so they show
+    // even before the first rudder delta arrives (no rudder yet ->
+    // marker centred but labels visible). Range from pypilot catalog,
+    // defaults to 70 deg.
+    const rangeDeg = Number(state.values?.["steering.autopilot.pypilot.rudder.range"]) || 70;
+    const lLeft  = $("#rudder-label-left");
+    const lRight = $("#rudder-label-right");
+    if (lLeft)  lLeft.textContent  = "-" + Math.round(rangeDeg);
+    if (lRight) lRight.textContent = "+" + Math.round(rangeDeg);
+    if (rangeDeg !== _lastRudderRange) {
+      _renderRudderScale(rangeDeg);
+      _lastRudderRange = rangeDeg;
+    }
+    // Legacy widget (still hidden by default) - kept in case someone wires it.
+    const w = $("#rudder-widget");
+    if (rad == null) {
+      if (w) w.setAttribute("hidden", "");
+      // Centre 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";
+    const marker = $("#rudder-marker");
+    if (marker) {
+      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.
@@ -1639,6 +1764,13 @@
         const sign = String(state.mode || "").includes("wind") ? -1 : 1;
         const newTargetRad = (state.localTargetRad ?? 0) + sign * nudge * DEG2RAD;
         state.localTargetRad = newTargetRad;
+        // Rev66 / 2.0.4: also update state.target optimistically so the
+        // target diamond MOVES IN THE SAME TICK as the nudge, instead of
+        // waiting for the server's delta reply (~200-800 ms on Tailscale).
+        // If the server later rejects the new target the incoming delta
+        // will overwrite this and the diamond re-syncs.
+        state.target = newTargetRad;
+        renderTargetArrow();
         apSetTargetRad(newTargetRad);
       });
     });
@@ -1667,9 +1799,34 @@
       _apPending = true;
       eng.classList.add("pending");
       const wasEngaged = state.engaged;
-      // Optimistic: flip the visual state before waiting on the network.
+      // 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 AND the target reference before
+      // waiting on the network. Rev66 / 2.0.4: without this early assign
+      // the target diamond was painted at the STALE state.target (last
+      // engage's value) until the server's target-set reply arrived
+      // hundreds of ms later, and then jumped to the fresh value. The
+      // user saw the diamond "sale donde le sale de los huevos". Now
+      // the diamond snaps to the captured heading in the same tick as
+      // the click, and if the server rejects the operation we roll
+      // both engaged and target back below.
+      const prevTarget = state.target;
+      const prevLocalTarget = state.localTargetRad;
       state.engaged = !wasEngaged;
+      if (!wasEngaged && capturedHeading != null) {
+        state.target = capturedHeading;
+        state.localTargetRad = capturedHeading;
+      }
       renderEngage();
+      renderTargetArrow();
       let ok = false;
       try {
         if (wasEngaged) {
@@ -1680,20 +1837,24 @@
           // 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;
-            renderControl();
-          }
+          // The optimistic assign above already painted the diamond in the
+          // right spot; just re-render in case renderControl needs to
+          // catch up other widgets that read state.target.
+          if (rTgt && rTgt.ok && capturedHeading != null) renderControl();
         }
       } catch (_) { ok = false; }
       if (!ok) {
-        // Revert the optimistic flip so the UI reflects reality.
+        // Revert the optimistic flip so the UI reflects reality. Rev66:
+        // also revert the target snapshot we assigned above so the
+        // diamond does not stay stuck on a target the server rejected.
         state.engaged = wasEngaged;
+        state.target = prevTarget;
+        state.localTargetRad = prevLocalTarget;
         renderEngage();
+        renderTargetArrow();
         eng.classList.add("failed");
         setTimeout(() => eng.classList.remove("failed"), 1500);
       }
@@ -2487,36 +2648,74 @@
         _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;
-    $$(".dash-rose .dash-cell[data-corner]").forEach((cell) => {
+    // Rev66 / 2.0.4 - long-press / short-tap handler with PER-CELL state.
+    // The previous Rev65 version leaked shared timer / timestamp / wasLong
+    // flags across all 4 cells, so a touchstart on one cell overwrote the
+    // in-flight state of another. Short-tap detection race-flipped and the
+    // AWS/TWS toggle stopped working reliably. Wrapping the state inside
+    // each cell's forEach closure gives us clean isolation - each cell
+    // owns its own timer and its own last-press timestamp.
+    const attachLongTap = (el, onShortTap) => {
+      let timer = null;
+      let pressStartedAt = 0;
+      let wasLong = false;
       const openSelector = (e) => {
         e && e.preventDefault();
+        wasLong = true;
         _dashPopulateSelectors();
         const pop = document.getElementById("dash-help-pop");
         if (pop) pop.classList.add("open");
       };
-      cell.addEventListener("touchstart", (e) => {
-        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 });
-      cell.addEventListener("contextmenu", openSelector);
-      let _mouseTimer = null;
-      cell.addEventListener("mousedown", (e) => {
+      const startPress = (e) => {
+        pressStartedAt = Date.now();
+        wasLong = false;
+        if (timer) clearTimeout(timer);
+        timer = setTimeout(() => openSelector(e), 500);
+      };
+      const endPress = () => {
+        if (timer) { clearTimeout(timer); timer = null; }
+        if (wasLong) return;
+        const elapsed = Date.now() - pressStartedAt;
+        if (elapsed >= 500) return;
+        onShortTap();
+      };
+      const cancelPress = () => {
+        if (timer) { clearTimeout(timer); timer = null; }
+      };
+      el.addEventListener("touchstart", startPress, { passive: true });
+      el.addEventListener("touchend",   endPress,   { passive: true });
+      el.addEventListener("touchmove",  () => { cancelPress(); wasLong = true; }, { passive: true });
+      el.addEventListener("touchcancel", cancelPress, { passive: true });
+      el.addEventListener("contextmenu", openSelector);
+      el.addEventListener("mousedown", (e) => {
         if (e.button !== 0) return;
-        _mouseTimer = setTimeout(() => openSelector(e), 600);
+        startPress(e);
+      });
+      el.addEventListener("mouseup",   endPress);
+      el.addEventListener("mouseleave", cancelPress);
+    };
+    // 4 corner cells: short-tap on a cell mapped to "wind" toggles AWS/TWS.
+    $$(".dash-rose .dash-cell[data-corner]").forEach((cell) => {
+      attachLongTap(cell, () => {
+        if (_dashCornerCfg[cell.dataset.corner] === "wind") _toggleWindCornerShow();
       });
-      cell.addEventListener("mouseup",    () => { if (_mouseTimer) { clearTimeout(_mouseTimer); _mouseTimer = null; } });
-      cell.addEventListener("mouseleave", () => { if (_mouseTimer) { clearTimeout(_mouseTimer); _mouseTimer = null; } });
     });
+    // Rev66 / 2.0.4 - Carlos yes, the wind-speed chip below the rose
+    // also acts as a tap target: short-tap on it toggles AWS/TWS.
+    // Long-press behaves like long-press on any corner cell -> opens
+    // the popup.
+    const speedChip = document.getElementById("rose-speed-chip");
+    if (speedChip) {
+      speedChip.style.cursor = "pointer";
+      attachLongTap(speedChip, () => _toggleWindCornerShow());
+    }
     // Rev43: horizontal swipe between tabs on mobile/tablet.
     // Rules:
     //  - Swipe is DISABLED when the Ajustes sliders are unlocked. The
@@ -3009,6 +3208,7 @@
     applyI18n();
     renderEngage();
     renderNudgeLabels();
+    renderRudder(null);   // Rev66: pinta los labels ±70 aunque no haya rudder aun
 
     // Login modal wiring (Rev17)
     const loginSubmit = $("#login-submit");

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 -110 200 220" 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,42 +125,79 @@
                 <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. -->
+            <!-- Rev66 / 2.0.4: chip narrowed from 48 to 40 wide + font
+                 shrunk from 14 to 12, so the enlarged target diamond
+                 below can peek out on the LEFT and RIGHT of the chip
+                 even when the target is dead ahead (rotation 0). -->
+            <g id="rose-hdg-chip">
+              <rect x="-20" y="-100" width="40" height="16" rx="4" ry="4"
+                    fill="rgba(0,0,0,0.72)" stroke="#4a5867" stroke-width="1"/>
+              <text id="rose-hdg-value" x="0" y="-91" text-anchor="middle" dominant-baseline="middle" fill="#ffffff" font-size="12" font-weight="900" font-family="ui-monospace, monospace">---</text>
+              <text id="rose-hdg-deg"   x="0" y="-91" text-anchor="start"  dominant-baseline="middle" fill="#ffffff" font-size="9" 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/66 / 2.0.4: two independent wind arrows, both solid,
+                 each labelled AWA / TWA in text that rotates with the arrow
+                 so it always reads from the head. AWA = amber (big head,
+                 the wind the crew feels). TWA = sea-green (small head).
+                 Rev66: labels are placed at very different radii along
+                 the shaft (AWA near the ring at y=-72, TWA near the boat
+                 at y=-52) so they never overlap even when both arrows
+                 point in exactly the same direction. -->
             <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="-72" 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="-52" 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
+            <!-- Rev66 / 2.0.4: cyan diamond enlarged (28 wide, 30 tall).
+                 With the narrowed HDG chip above (40 wide) the diamond
+                 asoma por los lados AND por arriba AND por debajo del
+                 chip even when target is dead ahead. Rotated to
                  (target - heading) so it always points where pypilot is
-                 steering. -->
+                 steering (compass/gps/nav modes) or to target directly
+                 (wind modes, target already in boat frame). -->
             <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"/>
+              <polygon points="0,-108 -14,-93 0,-78 14,-93" fill="#4dd4ff" stroke="#003b52" stroke-width="1.5"/>
+            </g>
+            <!-- Rev66 / 2.0.4: wind speed now inside a small dark chip
+                 that straddles the bottom of the compass ring, same
+                 look as the HDG chip on top. Top of the chip sits a
+                 couple of units INSIDE the ring, bottom asoma below.
+                 Contains a small dim AWS/TWS label above the number.
+                 The whole group carries `id=rose-speed-chip` so the
+                 short-tap toggle (fix #5) can attach a listener to
+                 the chip itself, not just the corner cells. -->
+            <g id="rose-speed-chip">
+              <rect x="-32" y="90" width="64" height="22" rx="4" ry="4"
+                    fill="rgba(0,0,0,0.72)" stroke="#4a5867" stroke-width="1"/>
+              <text id="rose-speed-label" x="0" y="96" text-anchor="middle" dominant-baseline="middle"
+                    fill="#8b98a5" font-size="7" font-weight="700" letter-spacing="1.2"></text>
+              <text id="rose-speed"       x="0" y="106" text-anchor="middle" dominant-baseline="middle"
+                    fill="#ffffff" font-size="12" font-weight="900" font-family="ui-monospace, monospace">--- kn</text>
             </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>
           </svg>
         </div>
       </div>
@@ -251,12 +291,25 @@
           <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>
+          <!-- Rev66 / 2.0.4: rudder scale ticks + labels populated by
+               renderRudder() based on the actual pypilot rudder.range
+               (default 70 deg). Ticks every 10 deg, numeric labels
+               every 20 deg (0, 20, 40, 60) plus explicit ends. -->
+          <div class="rudder-ticks" id="rudder-ticks"></div>
+          <span class="rudder-label rudder-label-left"  id="rudder-label-left">-70</span>
+          <span class="rudder-label rudder-label-right" id="rudder-label-right">+70</span>
+          <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">
@@ -476,23 +529,20 @@
         </div>
         <div id="cfg-ssh-status" class="hint" style="margin-top:6px"></div>
 
-        <!-- Rev63 / 2.0.0: three escalated restart levels. Each fires a
-             helm-manned confirmation modal before executing. -->
+        <!-- Rev66 / 2.0.4: simplified to 2 levels. `restart pypilot_web`
+             (level 1) rarely helps in practice - when the Pi Zero is
+             saturated the whole box needs a full reboot. Moved to the
+             Debug console below as an advanced preset for the 5 % of
+             cases where only the web layer is stuck but the AP core
+             keeps steering (rare). -->
         <div class="restart-block" style="margin-top:14px">
-          <div class="restart-title" data-i18n="setup.restart.title">Restart / reboot (escalated)</div>
-          <div class="restart-row">
-            <button id="btn-restart-web" class="restart-btn level-1" data-preset="restart.web" data-outage-i18n="setup.restart.outage.web">
-              <span class="rb-num">1</span>
-              <span class="rb-title" data-i18n="setup.restart.web.title">restart pypilot_web</span>
-              <span class="rb-sub"   data-i18n="setup.restart.web.sub">~3-5 s &middot; AP keeps steering</span>
-            </button>
+          <div class="restart-title" data-i18n="setup.restart.title">Restart / reboot</div>
+          <div class="restart-row two-cols">
             <button id="cli-restart-pypilot" class="restart-btn level-2" data-outage-i18n="setup.restart.outage.pypilot">
-              <span class="rb-num">2</span>
               <span class="rb-title" data-i18n="setup.restart.pypilot.title">RESTART pypilot</span>
               <span class="rb-sub"   data-i18n="setup.restart.pypilot.sub">~10-15 s &middot; AP drops the heading</span>
             </button>
             <button id="btn-reboot-pi" class="restart-btn level-3" data-preset="reboot.pi" data-outage-i18n="setup.restart.outage.reboot">
-              <span class="rb-num">3</span>
               <span class="rb-title" data-i18n="setup.restart.reboot.title">reboot Pi</span>
               <span class="rb-sub"   data-i18n="setup.restart.reboot.sub">~35-60 s &middot; full outage</span>
             </button>
@@ -500,7 +550,7 @@
         </div>
 
         <div id="cli-restart-status" class="hint" style="margin-top:8px"></div>
-        <div class="hint" data-i18n="setup.restart.hint">All three actions use the SSH user+password above. Level 1 does not interrupt steering; levels 2 and 3 do. A confirmation asking whether someone is at the helm is shown before executing.</div>
+        <div class="hint" data-i18n="setup.restart.hint">Both actions use the SSH user + password above and show a helm-manned confirmation before executing. Use RESTART pypilot for the common case; reboot Pi when the TinyPilot has degraded and needs a cold reset. For a lighter web-only restart see the Debug console below.</div>
         <div class="hint" data-i18n="setup.security.hint" style="margin-top:6px">Signal K stores plugin config in plain text at ~/.signalk/plugin-config-data/.</div>
 
         <!-- Rev63 / 2.0.0: Debug console. Closed whitelist of preset
@@ -516,6 +566,10 @@
             <button class="ghost debug-preset" data-preset="uptime">uptime</button>
             <button class="ghost debug-preset" data-preset="df">df</button>
             <button class="ghost debug-preset" data-preset="pypilot.version">pypilot --version</button>
+            <!-- Rev66 / 2.0.4: moved from the Emergency triad. Rarely
+                 needed on a healthy Pi; when the box is saturated a full
+                 reboot is what actually helps. Kept here for edge cases. -->
+            <button class="ghost debug-preset" data-preset="restart.web">restart pypilot_web</button>
           </div>
           <textarea id="debug-output" readonly rows="12"
             style="width:100%;background:var(--bg-3);color:var(--fg);border:1px solid var(--border);border-radius:6px;padding:8px;font-family:ui-monospace,monospace;font-size:12px;resize:vertical;"
@@ -886,6 +940,6 @@
   </div>
 
   <!-- Cache-busting: bump the ?v= on every Rev to force Firefox to fetch fresh app.js -->
-  <script src="app.js?v=Rev66"></script>
+  <script src="app.js?v=Rev67"></script>
 </body>
 </html>

package/public/style.css

@@ -904,48 +904,71 @@ body.nav-hidden .nav-toggle .tri { transform: rotate(180deg); }
   text-transform: uppercase;
   margin: 0 0 8px;
 }
+/* Rev66 / 2.0.4: default 3 cols for legacy 3-level layouts; the
+   Emergency simplified layout in Rev66 uses .two-cols to switch to
+   2 cols on desktop. Both collapse to 1 col on narrow phones. */
 .restart-row {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 8px;
 }
-@media (max-width: 640px) {
-  .restart-row { grid-template-columns: 1fr; }
+.restart-row.two-cols {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
+@media (max-width: 640px) {
+  .restart-row,
+  .restart-row.two-cols { grid-template-columns: 1fr; }
+}
+/* Rev66 / 2.0.4: simple flex column layout - the numbered badge is
+   gone in the 2-level Emergency, and the previous grid template still
+   assumed a 28 px badge column, which stretched the title into two
+   awkward lines with the sub label overlapping. Flex column stacks
+   title on top of sub cleanly regardless of button width. */
 .restart-btn {
-  display: grid;
-  grid-template-columns: 28px 1fr;
-  grid-template-rows: auto auto;
-  align-items: center;
-  gap: 2px 10px;
-  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;         /* Rev66 fix: text centered per Carlos */
+  justify-content: center;
+  gap: 4px;
+  padding: 14px 16px;
+  min-height: 68px;
   border-radius: 10px;
   border: 2px solid var(--border);
   background: var(--bg-3);
   color: var(--fg);
   cursor: pointer;
-  text-align: left;
+  text-align: center;          /* Rev66 fix: text centered */
   font-family: inherit;
   transition: transform 80ms ease, background 100ms ease, border-color 100ms ease;
 }
 .restart-btn:hover  { border-color: var(--fg-dim); }
 .restart-btn:active { transform: scale(0.97); }
+.restart-btn .rb-title {
+  font-weight: 800;
+  font-size: 15px;
+  letter-spacing: 0.5px;
+  line-height: 1.2;
+}
+.restart-btn .rb-sub {
+  font-size: 12px;
+  color: var(--fg-dim);
+  line-height: 1.2;
+}
+/* Optional numbered badge - only rendered by markup that still uses
+   the old 3-level layout. When present it sits inline before the
+   title on the first row via nested flex, without breaking the plain
+   layout when absent. */
 .restart-btn .rb-num {
-  grid-row: 1 / span 2;
-  width: 28px; height: 28px;
+  width: 24px; height: 24px;
   border-radius: 50%;
-  display: flex; align-items: center; justify-content: center;
-  font-weight: 900; font-size: 15px;
+  display: inline-flex; align-items: center; justify-content: center;
+  font-weight: 900; font-size: 13px;
   background: rgba(255, 255, 255, 0.08);
   color: var(--fg);
+  margin-right: 6px;
+  vertical-align: middle;
 }
-.restart-btn .rb-title { font-weight: 800; font-size: 14px; letter-spacing: 0.5px; }
-.restart-btn .rb-sub   { font-size: 12px; color: var(--fg-dim); }
-/* Level 1: green tint, safest - AP keeps steering. */
-.restart-btn.level-1 { border-color: rgba(46, 204, 113, 0.55); }
-.restart-btn.level-1 .rb-num  { background: rgba(46, 204, 113, 0.22); color: #2ecc71; }
-.restart-btn.level-1:hover    { background: rgba(46, 204, 113, 0.10); }
-/* Level 2: amber, brief AP outage. Matches the old RESTART pypilot look. */
+/* Level 2: amber, brief AP outage. */
 .restart-btn.level-2 { border-color: var(--warn, #f37812); }
 .restart-btn.level-2 .rb-num  { background: rgba(243, 120, 18, 0.25); color: var(--warn, #f37812); }
 .restart-btn.level-2:hover    { background: rgba(243, 120, 18, 0.10); }
@@ -953,6 +976,10 @@ body.nav-hidden .nav-toggle .tri { transform: rotate(180deg); }
 .restart-btn.level-3 { border-color: var(--err, #e74c3c); }
 .restart-btn.level-3 .rb-num  { background: rgba(231, 76, 60, 0.30); color: var(--err, #e74c3c); }
 .restart-btn.level-3:hover    { background: rgba(231, 76, 60, 0.10); }
+/* Level 1: kept for backwards-compat if some markup uses it. */
+.restart-btn.level-1 { border-color: rgba(46, 204, 113, 0.55); }
+.restart-btn.level-1 .rb-num  { background: rgba(46, 204, 113, 0.22); color: #2ecc71; }
+.restart-btn.level-1:hover    { background: rgba(46, 204, 113, 0.10); }
 
 /* Rev63 - Helm-manned confirmation modal. Same overlay pattern as
    #dash-help-pop but with a danger accent on the confirm button and a
@@ -1543,13 +1570,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 +1588,95 @@ 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;
+}
+/* Rev66 / 2.0.4 - rudder scale labels at both ends of the swipe-hint
+   bar. Small dim numbers indicating the rudder range in degrees. Text
+   populated by renderRudder() with the current pypilot rudder.range
+   (default 70 deg). Pointer-events off so they don't block taps. */
+.swipe-hint .rudder-label {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 10px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.55);
+  z-index: 1;
+  pointer-events: none;
+  padding: 0 6px;
+  font-family: ui-monospace, monospace;
+  letter-spacing: 0.5px;
+}
+.swipe-hint .rudder-label-left  { left: 6px; }
+.swipe-hint .rudder-label-right { right: 6px; }
+/* Rev66 / 2.0.4 - intermediate tick container. renderRudder() fills
+   this with small marks every 10 deg + numeric labels every 20 deg. */
+.swipe-hint .rudder-ticks {
+  position: absolute;
+  inset: 4px 8px;
+  z-index: 0;
+  pointer-events: none;
+}
+.swipe-hint .rudder-ticks .rt {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  margin-left: -0.5px;
+  background: rgba(255, 255, 255, 0.25);
+}
+.swipe-hint .rudder-ticks .rt.major {
+  width: 1px;
+  background: rgba(255, 255, 255, 0.45);
+}
+.swipe-hint .rudder-ticks .rl {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 9px;
+  font-weight: 700;
+  color: rgba(255, 255, 255, 0.55);
+  font-family: ui-monospace, monospace;
+  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;