signalk-pypilot-newui 2.0.2 → 2.0.4

package/CHANGELOG.md

@@ -1,44 +1,97 @@
 # Changelog
 
-## 2.0.2 — 2026-08-20 — Rev65
+## 2.0.4 — 2026-08-21 — Rev67
 
-Bug fix + UI polish batch.
+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
 
-- **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).
+- **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
+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 = "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.2",
+  "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

@@ -816,9 +816,19 @@
   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) + "°" },
     // Rev65 / 2.0.2: the "wind" corner now honours a user-toggleable
@@ -1256,13 +1266,53 @@
     }
   }
 
+  // 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) {
+    // 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", "");
-      // Also center the swipe-hint rudder marker so it looks amidships
-      // when data is missing rather than sticking to some old value.
+      // 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;
@@ -1277,12 +1327,8 @@
     }
     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) + "%";
@@ -1718,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);
       });
     });
@@ -1756,9 +1809,24 @@
       // 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.
+      // 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) {
@@ -1772,17 +1840,21 @@
             capturedHeading != null ? _apRetry(() => apSetTargetRad(capturedHeading)) : Promise.resolve({ ok: true }),
           ]);
           ok = !!(rEng && rEng.ok);
-          if (rTgt && rTgt.ok && capturedHeading != null) {
-            state.target = capturedHeading;
-            state.localTargetRad = capturedHeading;
-            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);
       }
@@ -2583,44 +2655,67 @@
     _dashLoadCfg();
     _dashPopulateSelectors();
     _dashRenderCorners();
-    let _dashLongPressTimer = null;
-    let _dashPressStartedAt = 0;
-    let _dashPressWasLong = false;
-    $$(".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();
-        _dashPressWasLong = true;
+        wasLong = true;
         _dashPopulateSelectors();
         const pop = document.getElementById("dash-help-pop");
         if (pop) pop.classList.add("open");
       };
       const startPress = (e) => {
-        _dashPressStartedAt = Date.now();
-        _dashPressWasLong = false;
-        if (_dashLongPressTimer) clearTimeout(_dashLongPressTimer);
-        _dashLongPressTimer = setTimeout(() => openSelector(e), 500);
+        pressStartedAt = Date.now();
+        wasLong = false;
+        if (timer) clearTimeout(timer);
+        timer = 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 (timer) { clearTimeout(timer); timer = null; }
+        if (wasLong) return;
+        const elapsed = Date.now() - pressStartedAt;
         if (elapsed >= 500) return;
-        const corner = cell.dataset.corner;
-        if (_dashCornerCfg[corner] === "wind") _toggleWindCornerShow();
+        onShortTap();
+      };
+      const cancelPress = () => {
+        if (timer) { clearTimeout(timer); timer = null; }
       };
-      cell.addEventListener("touchstart", startPress, { passive: true });
-      cell.addEventListener("touchend",   endPress,   { passive: true });
-      cell.addEventListener("touchmove",  () => { if (_dashLongPressTimer) { clearTimeout(_dashLongPressTimer); _dashLongPressTimer = null; } _dashPressWasLong = true; }, { passive: true });
-      cell.addEventListener("touchcancel",() => { if (_dashLongPressTimer) { clearTimeout(_dashLongPressTimer); _dashLongPressTimer = null; } }, { passive: true });
-      cell.addEventListener("contextmenu", openSelector);
-      cell.addEventListener("mousedown", (e) => {
+      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;
         startPress(e);
       });
-      cell.addEventListener("mouseup",    endPress);
-      cell.addEventListener("mouseleave", () => { if (_dashLongPressTimer) { clearTimeout(_dashLongPressTimer); _dashLongPressTimer = null; } });
+      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();
+      });
     });
+    // 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
@@ -3113,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 210" 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
@@ -134,11 +134,15 @@
                  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="-24" y="-100" width="48" height="18" rx="4" ry="4"
+              <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="-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>
+              <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
@@ -146,44 +150,54 @@
             <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. -->
+            <!-- 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="-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"
+              <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="-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"
+              <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>
-            <!-- Rev65 / 2.0.2: wind speed split into two stacked lines
-                 - a small dim label (AWS/TWS/both) and a large white
-                 number - separated by empty space so the S cardinal and
-                 the surrounding rose stay visible in between. The whole
-                 stack sits below the compass ring: label just outside at
-                 y=+100, number below at y=+108, both fitting inside the
-                 expanded viewBox (extra 10 units at the bottom). -->
-            <text id="rose-speed-label" x="0" y="98" text-anchor="middle" dominant-baseline="middle"
-                  fill="#8b98a5" font-size="8" font-weight="700" letter-spacing="1.5"></text>
-            <text id="rose-speed"       x="0" y="108" text-anchor="middle" dominant-baseline="middle"
-                  fill="#ffffff" font-size="15" font-weight="900" font-family="ui-monospace, monospace">--- kn</text>
           </svg>
         </div>
       </div>
@@ -288,6 +302,13 @@
              "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>
@@ -508,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>
@@ -532,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
@@ -548,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;"
@@ -918,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=Rev65"></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
@@ -1596,6 +1623,55 @@ main { touch-action: pan-y; overflow-x: hidden; }
   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 */