feat: grey line on the world map; fix: trace checkboxes lied about their state

Grey line — the day/night terminator and its twilight band, off by default,
redrawn every minute so a map left open all day is not silently wrong by
evening. Its own Leaflet pane below the overlays, non-interactive, so it never
hides the path or beam nor swallows a click.

The solar maths is pure and was checked against known positions before being
wired to anything: both solstices, the March equinox, the subsolar longitude at
12 UTC, and day/night at Paris, Tokyo, New York, Sydney and Reykjavik across
seasons and hemispheres. That last set is what caught the real bug: the equation
has TWO solutions per meridian and the naive branch put New York in daylight at
02:00 in December — the terminator at +63° where it belongs at −63°. A shaded
map that looks entirely plausible and is exactly mirrored. It now anchors on the
classical terminator and takes the branch nearest it, which is also what makes
the twilight band follow the terminator instead of jumping hemisphere.

Separately, from a Xiegu user: the protocol-trace checkbox does not stay ticked.
It is React state initialised to false on every mount, so a trace still running
came back unticked — the operator ticks it to "switch it on", which switches it
OFF, and the log they send contains no trace at all. Worse than a cosmetic bug:
it silently defeats the one tool asked for to diagnose their radio. Both boxes
(CAT and WinKeyer) now read their real state from the backend.

frontend/src/components/MainMap.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
+import { nightPolygon } from '../lib/greyline';
 import { gridToLatLon, gridSquareBounds, greatCirclePoints, pathBetween, destinationPoint } from '@/lib/maidenhead';
 import { writeUiPref } from '@/lib/uiPref';
 
@@ -115,6 +116,12 @@ export function WorldMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, b
   // pans/zooms freely (e.g. a whole-world view) and the view is remembered
   // across restarts. Default on.
   const [autoZoom, setAutoZoom] = useState(() => localStorage.getItem('opslog.mapAutoZoomDX') !== '0');
+
+  // Grey line — the day/night terminator with its twilight band. Off by
+  // default: it is a working tool for the operator who wants it, not decoration
+  // for the one who does not.
+  const [greyline, setGreyline] = useState(() => localStorage.getItem('opslog.mapGreyline') === '1');
+  const greylineLayer = useRef<L.LayerGroup | null>(null);
   const autoZoomRef = useRef(autoZoom);
   useEffect(() => { autoZoomRef.current = autoZoom; }, [autoZoom]);
 
@@ -152,6 +159,62 @@ export function WorldMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, b
     if (m) addBasemap(m, basemap, baseLayer, labelsLayer);
   }, [basemap]);
 
+  // Draw the grey line, and keep it moving.
+  //
+  // Redrawn every minute: the terminator travels a quarter of a degree in that
+  // time, which is invisible, but a map left on all day would otherwise be
+  // silently wrong by evening — and the whole point of the display is knowing
+  // where the line is NOW.
+  //
+  // It lives in its own pane below the overlay pane so the path and beam are
+  // never hidden behind the shading, and is non-interactive so it can never
+  // swallow a click meant for the map.
+  useEffect(() => {
+    const m = worldMap.current;
+    if (!m) return;
+
+    if (!greyline) {
+      greylineLayer.current?.remove();
+      greylineLayer.current = null;
+      return;
+    }
+
+    if (!m.getPane('greyline')) {
+      const pane = m.createPane('greyline');
+      pane.style.zIndex = '350';        // above tiles (200), below overlays (400)
+      pane.style.pointerEvents = 'none';
+    }
+
+    const draw = () => {
+      const now = new Date();
+      greylineLayer.current?.remove();
+      const g = L.layerGroup([], { pane: 'greyline' });
+
+      // Two bands, drawn dark-to-light so they read as one gradient into night:
+      // full darkness (Sun below the horizon) and civil twilight (down to −6°),
+      // which is the band operators actually mean by "grey line".
+      const night = L.polygon(nightPolygon(now, 0), {
+        pane: 'greyline', stroke: false, fillColor: '#0b1220', fillOpacity: 0.32, interactive: false,
+      });
+      const twilight = L.polygon(nightPolygon(now, -6), {
+        pane: 'greyline', stroke: false, fillColor: '#0b1220', fillOpacity: 0.22, interactive: false,
+      });
+      // The terminator itself, so the line is readable at a glance rather than
+      // being inferred from where the shading fades.
+      const line = L.polyline(nightPolygon(now, 0).slice(0, -2), {
+        pane: 'greyline', color: '#f59e0b', weight: 1, opacity: 0.75, interactive: false,
+      });
+
+      night.addTo(g); twilight.addTo(g); line.addTo(g);
+      g.addTo(m);
+      greylineLayer.current = g;
+    };
+
+    draw();
+    const id = window.setInterval(draw, 60_000);
+    return () => { window.clearInterval(id); };
+  }, [greyline]);
+
   // Redraw overlays whenever the operator/DX grids (or beam) change.
   useEffect(() => {
     const wm = worldMap.current, wo = worldOverlay.current;
@@ -293,6 +356,21 @@ export function WorldMap({ fromGrid, toGrid, fromLabel, toLabel, beamAzimuths, b
       >
         Zoom DX
       </button>
+      {/* Grey line toggle, under the zoom button. */}
+      <button
+        type="button"
+        onClick={() => {
+          const v = !greyline;
+          setGreyline(v);
+          writeUiPref('opslog.mapGreyline', v ? '1' : '0');
+        }}
+        title={greyline ? 'Grey line is ON — day/night terminator and twilight band' : 'Show the grey line (day/night terminator)'}
+        className={`absolute top-9 right-1 z-[500] rounded-md px-2 py-1 text-[11px] font-medium shadow border backdrop-blur transition-colors ${
+          greyline ? 'bg-primary text-primary-foreground border-primary' : 'bg-card/90 text-muted-foreground border-border hover:bg-card'
+        }`}
+      >
+        Grey line
+      </button>
       {path && (
         <div className="absolute bottom-1 left-1 z-[500] rounded-md bg-card/90 backdrop-blur px-2 py-1 text-[11px] font-mono shadow border border-border pointer-events-none">
           <div><span className="text-muted-foreground">Dist</span> {Math.round(path.distanceShort).toLocaleString()} km