speedandcurrent 2.3.3 → 2.4.0

package/public/app.js

@@ -97,7 +97,6 @@ function normaliseState(data) {
 
 // ─── Static meta (fetched once at startup from /api/meta) ─────────────────────
 let metaById = {}; // keyed by item id
-let lifecycleWarnings = [];
 
 async function loadMeta() {
   const data = await apiGet('/api/meta');
@@ -117,90 +116,99 @@ async function loadMeta() {
   applyUnitLabels();
 }
 
-function isStale(item) {
-  if (!item) return true;
-  return item.state?.isStale === true;
-}
-
-function isNotReady(item) {
-  if (!item) return true;
-  return item.state?.ready !== true;
-}
-
-// Returns a human-readable reason why an item is not ready.
-// Handles three state shapes:
-//   handler-nested  (MessageSmoother, SmoothedAngle):  state.handler.*
-//   magnitude/angle (PolarSmoother):                   state.magnitude.* / state.angle.*
-//   flat top-level  (MessageHandler, Polar):           state.*
-function getNotReadyReason(item) {
-  if (!item) return 'not available';
-  const s = item.state;
-  if (!s) return 'not available';
+const computedItemIds = new Set([
+  'current.smoothed', 'boatSpeedRefGround', 'speedCorrection',
+  'correctedBoatSpeed', 'residual', 'residual.smoothed'
+]);
 
-  let subscribed, pathKnown;
-  if (s.handler !== undefined) {
-    subscribed = s.handler.subscribed;
-    pathKnown  = s.handler.pathKnown;
-  } else if (s.magnitude !== undefined || s.angle !== undefined) {
-    const mag = s.magnitude, ang = s.angle;
-    subscribed = (mag?.subscribed !== false) && (ang?.subscribed !== false);
-    pathKnown  = (mag?.pathKnown  !== false) && (ang?.pathKnown  !== false);
-  } else {
-    subscribed = s.subscribed;
-    pathKnown  = s.pathKnown;
+function getPathStatus(pathState, hasValue, computed = false, computedReady = false) {
+  if (computed) {
+    return hasValue && computedReady
+      ? { category: 'computed', reason: '' }
+      : { category: 'inactive', reason: 'not computed' };
+  }
+  if (pathState?.subscribed === false) {
+    return { category: 'inactive', reason: 'not subscribed' };
+  }
+  if (hasValue && pathState?.ready === true) {
+    return { category: 'subscribed', reason: '' };
+  }
+  if (!pathState) {
+    return { category: 'problem', reason: 'not available' };
+  }
+  if (pathState.pathKnown === false) {
+    return { category: 'problem', reason: 'path not found in Signal K' };
+  }
+  if (pathState.hasDelta === false) {
+    return { category: 'problem', reason: 'waiting for first data' };
+  }
+  if (pathState.isStale === true) {
+    return { category: 'problem', reason: 'data is stale' };
+  }
+  return { category: 'problem', reason: 'not available' };
+}
+
+function getScalarPathState(state) {
+  if (!state?.handler) return state;
+  return {
+    ...state,
+    subscribed: state.handler.subscribed,
+    pathKnown: state.handler.pathKnown,
+    hasDelta: state.hasDelta === true && state.handler.hasDelta === true,
+    isStale: state.isStale === true || state.handler.isStale === true,
+    ready: state.ready === true && state.handler.ready === true
+  };
+}
+
+function getItemStatuses(item) {
+  const label = itemLabel(item);
+  const computed = computedItemIds.has(item.id);
+  const computedReady = item.state?.ready === true;
+  if (state.polarsById[item.id] === item) {
+    return [
+      {
+        label: `${label} magnitude`,
+        status: getPathStatus(item.state?.magnitude, Number.isFinite(item.magnitude), computed, computedReady)
+      },
+      {
+        label: `${label} angle`,
+        status: getPathStatus(
+          item.state?.angle,
+          Number.isFinite(item.angle),
+          computed || item.state?.angleFallbackActive === true,
+          computedReady
+        )
+      }
+    ];
   }
 
-  if (subscribed === false) return 'not subscribed to Signal K';
-  if (pathKnown  === false) return 'path not found in Signal K';
-  if (!s.hasDelta)          return 'waiting for first data';
-  if (s.isStale)            return 'data is stale';
-  return 'not available';
+  const pathState = getScalarPathState(item.state);
+  const hasValue = state.attitudesById[item.id] === item
+    ? Number.isFinite(item.value?.roll) || Number.isFinite(item.value?.pitch)
+    : Number.isFinite(item.value);
+  return [{ label, status: getPathStatus(pathState, hasValue, computed, computedReady) }];
 }
 
-function getAnyItem(id) {
-  return state.polarsById[id] || state.deltasById[id] || state.attitudesById[id] || null;
+function isAvailableStatus(status) {
+  return status.category === 'subscribed' || status.category === 'computed';
 }
 
-function renderWarnings(elId, ids) {
+function renderWarnings(elId, items) {
   const el = document.getElementById(elId);
   if (!el) return;
   el.innerHTML = '';
-  const notReady = ids.filter(id => isNotReady(getAnyItem(id)));
-  if (notReady.length === 0) return;
+  const problems = items.flatMap(item => getItemStatuses(item))
+    .filter(({ status }) => status.category === 'problem');
+  if (problems.length === 0) return;
   const h = document.createElement('h6');
   h.className = 'text-uppercase fw-bold text-muted border-bottom pb-1 mt-3 mb-1 small';
   h.textContent = 'Warnings';
   el.appendChild(h);
   const ul = document.createElement('ul');
   ul.className = 'list-unstyled text-danger small ps-3';
-  notReady.forEach(id => {
-    const item = getAnyItem(id);
-    const label = metaById[id]?.displayName ?? id;
+  problems.forEach(({ label, status }) => {
     const li = document.createElement('li');
-    li.textContent = `"${label}" — ${getNotReadyReason(item)}`;
-    ul.appendChild(li);
-  });
-  el.appendChild(ul);
-}
-
-function renderInputWarnings(elId, ids) {
-  const el = document.getElementById(elId);
-  if (!el) return;
-  el.innerHTML = '';
-  const lines = [];
-  lifecycleWarnings.forEach(w => {
-    if (w && typeof w.message === 'string') lines.push(w.message);
-  });
-  if (lines.length === 0) return;
-  const h = document.createElement('h6');
-  h.className = 'text-uppercase fw-bold text-muted border-bottom pb-1 mt-3 mb-1 small';
-  h.textContent = 'Warnings';
-  el.appendChild(h);
-  const ul = document.createElement('ul');
-  ul.className = 'list-unstyled text-danger small ps-3';
-  lines.forEach(line => {
-    const li = document.createElement('li');
-    li.textContent = line;
+    li.textContent = `"${label}" — ${status.reason}`;
     ul.appendChild(li);
   });
   el.appendChild(ul);
@@ -227,7 +235,12 @@ async function apiGet(path) {
   const ct = res.headers.get('content-type') || '';
   if (!ct.includes('application/json')) { showMessage('Unexpected server response.'); return null; }
   showMessage('');
-  return res.json();
+  try {
+    return await res.json();
+  } catch (err) {
+    showMessage('Unexpected server response.');
+    return null;
+  }
 }
 
 // PUT /api/settings: server returns full merged config — store it and re-render.
@@ -289,46 +302,21 @@ function _refreshMessage() {
 const paramMeta = {
   estimateBoatSpeed:     { label: 'Estimate boat speed',                  type: 'boolean' },
   updateCorrectionTable: { label: 'Update correction table',              type: 'boolean' },
-  suspendLearningOnNavigationState: { label: 'Suspend on navigation.state = motoring', type: 'boolean', description: 'Suspend learning when navigation.state is motoring. Anchored and moored always suspend learning when the path is available.' },
-  assumeCurrent:         { label: 'Assume current during update',         type: 'boolean', description: 'Experimental, works best when currents are relatively stable.' },
+  suspendLearningOnNavigationState: { label: 'Suspend on navigation.state', type: 'boolean', description: 'When enabled, navigation.state can override the vessel\u2019s own SOG-based moving/not-moving state: anchored, moored, or motoring are treated as not moving (learning suspended, leeway zeroed). It can never force "moving" when SOG says otherwise.' },
   sogFallback:           { label: 'Groundspeed fallback',                 type: 'boolean', description: 'Output Groundspeed as Boatspeed when the paddlewheel sensor is malfunctioning or stalled.' },
-  stability:             { label: 'Stability (1–20)',                     type: 'number', min: 1, max: 20, step: 1, default: 7, description: 'How quickly the correction table adapts to new observations. Higher values mean slower, more stable changes.' },
+  correctionDriftRate:   { label: 'Correction drift',                    type: 'number', unit: 'knots/month', min: 0, max: 3, step: 0.1, default: 0.3, description: 'How quickly the correction may change over time (knots/month). 0.3 knots/month means the correction can typically change by about 0.3 knots over a month.' },
   showStatistics:        { label: 'Show statistics (σ)',                  type: 'boolean', description: 'Display standard deviation alongside smoothed values for debugging.' },
-  smootherClass: {
-    label: 'Smoother type', type: 'select',
-    description: 'Smoothing applied to all sensor inputs for learning only.',
-    options: [
-      { value: 'MovingAverageSmoother', label: 'Moving average (window)' },
-      { value: 'ExponentialSmoother',   label: 'Exponential (τ)' },
-      { value: 'KalmanSmoother',        label: 'Kalman filter' },
-    ]
-  },
-  smootherTau: {
-    label: 'Time constant (τ)', type: 'number', unit: 's',
-    min: 1, max: 60, step: 0.5, default: 3,
-    description: 'Time constant in seconds.'
-  },
   smootherTimeSpan: {
     label: 'Window size', type: 'number', unit: 's',
-    min: 2, max: 60, step: 0.5, default: 5,
-    description: 'Moving-average window in seconds.'
-  },
-  smootherSteadyState: {
-    label: 'Kalman gain', type: 'number',
-    min: 0.01, max: 0.99, step: 0.01, default: 0.2,
-    description: 'Steady-state Kalman gain (0 ≈ slow/smooth, 1 ≈ fast/raw). Clamped to 0.01–0.99.'
+    min: 5, max: 60, step: 0.5, default: 5,
+    description: 'Moving-average window in seconds. Learning runs once per window plus a one-second gap.'
   },
 };
 
 // Settings groups for each UI section
 const ESTIMATION_SETTING_KEYS = ['sogFallback'];
-const LEARNING_SETTING_KEYS   = ['stability', 'suspendLearningOnNavigationState', 'assumeCurrent', 'showStatistics'];
-const SMOOTHER_SETTING_KEYS   = [
-  'smootherClass',
-  { key: 'smootherTau',         showIf: cfg => cfg.smootherClass === 'ExponentialSmoother' },
-  { key: 'smootherTimeSpan',    showIf: cfg => (cfg.smootherClass || 'MovingAverageSmoother') === 'MovingAverageSmoother' },
-  { key: 'smootherSteadyState', showIf: cfg => cfg.smootherClass === 'KalmanSmoother' },
-];
+const LEARNING_SETTING_KEYS   = ['correctionDriftRate', 'suspendLearningOnNavigationState', 'showStatistics'];
+const SMOOTHER_SETTING_KEYS   = ['smootherTimeSpan'];
 
 // Build one settings control for a key.
 function createSettingControl(key, meta, value) {
@@ -447,18 +435,24 @@ function renderSettingsPanel() {
 
 function formatPolarValue(p) {
   if (!p) return '—';
+  const statuses = getItemStatuses(p);
   const m = metaById[p.id];
   const speedC = buildConverter(m?.magnitude?.displayUnits) || DEFAULTS.speed;
   const angleC = buildConverter(m?.angle?.displayUnits)     || DEFAULTS.angle;
-  const spd = typeof p.magnitude === 'number' ? speedC.convert(p.magnitude).toFixed(speedC.decimals) : '—';
-  const ang = typeof p.angle    === 'number' ? angleC.convert(p.angle).toFixed(angleC.decimals)      : '—';
-  const sigma = (config?.showStatistics && p.id.endsWith('.smoothed') && typeof p.trace === 'number')
+  const spd = isAvailableStatus(statuses[0].status)
+    ? `${speedC.convert(p.magnitude).toFixed(speedC.decimals)} ${speedC.symbol}`
+    : statuses[0].status.reason;
+  const ang = isAvailableStatus(statuses[1].status)
+    ? `${angleC.convert(p.angle).toFixed(angleC.decimals)}${angleC.symbol}`
+    : statuses[1].status.reason;
+  const sigma = (isAvailableStatus(statuses[0].status) && config?.showStatistics && p.id.endsWith('.smoothed') && typeof p.trace === 'number')
     ? ` (σ=${speedC.convert(Math.sqrt(p.trace)).toFixed(speedC.decimals + 2)})` : '';
-  return `${spd} ${speedC.symbol} / ${ang}${angleC.symbol}${sigma}`;
+  return `${spd}${sigma} / ${ang}`;
 }
 
 function formatDeltaValue(d) {
-  if (!d || typeof d.value !== 'number') return '—';
+  const status = getItemStatuses(d)[0].status;
+  if (!isAvailableStatus(status)) return status.reason;
   const m = metaById[d.id];
   const uc = buildConverter(m?.displayUnits)
     || (m?.units === 'm/s' ? DEFAULTS.speed : DEFAULTS.angle);
@@ -468,6 +462,8 @@ function formatDeltaValue(d) {
 }
 
 function formatAttitudeValue(a) {
+  const status = getItemStatuses(a)[0].status;
+  if (!isAvailableStatus(status)) return status.reason;
   const v = (a && a.value) || {};
   const variance = a && a.variance;
   const m = metaById[a?.id];
@@ -484,13 +480,21 @@ function itemLabel(item) {
   return metaById[item.id]?.displayName ?? item.path ?? item.id;
 }
 
+function formatNavigationStateValue(navState) {
+  if (!navState) return '—';
+  if (navState.pathKnown === false) return 'not available';
+  // Use `value` rather than `ready` — navigation.state changes infrequently, so it goes
+  // stale (ready=false) between changes even though the last known value is still valid.
+  if (navState.value == null) return 'not ready';
+  return navState.isStale ? `${navState.value} (stale)` : navState.value;
+}
+
 function buildDataTable(rows) {
   const tbl = document.createElement('table');
   tbl.className = 'table table-sm table-borderless mb-0';
   const tbody = document.createElement('tbody');
   rows.forEach(row => {
     const tr = document.createElement('tr');
-    if (row.stale) tr.className = 'stale';
     const tdL = document.createElement('td'); tdL.textContent = row.label;
     const tdV = document.createElement('td'); tdV.textContent = row.value;
     tr.appendChild(tdL); tr.appendChild(tdV);
@@ -513,18 +517,46 @@ function filterById(arr, ids) {
   });
 }
 
-function renderGroupInto(elId, polars, deltas, attitudes) {
+function renderGroupInto(elId, polars, deltas, attitudes, extraRows = []) {
   const el = document.getElementById(elId);
   if (!el) return;
   el.innerHTML = '';
   const rows = [
-    ...polars   .map(p => ({ label: itemLabel(p), value: formatPolarValue(p),    stale: isNotReady(p) })),
-    ...deltas   .map(d => ({ label: itemLabel(d), value: formatDeltaValue(d),    stale: isNotReady(d) })),
-    ...attitudes.map(a => ({ label: itemLabel(a), value: formatAttitudeValue(a), stale: isNotReady(a) }))
+    ...polars   .map(p => ({ label: itemLabel(p), value: formatPolarValue(p) })),
+    ...deltas   .map(d => ({ label: itemLabel(d), value: formatDeltaValue(d) })),
+    ...attitudes.map(a => ({ label: itemLabel(a), value: formatAttitudeValue(a) })),
+    ...extraRows
   ];
   if (rows.length) el.appendChild(buildDataTable(rows));
 }
 
+function renderItemsInto(elId, items) {
+  const el = document.getElementById(elId);
+  if (!el) return;
+  el.innerHTML = '';
+  const rows = items.map(item => ({
+    label: itemLabel(item),
+    value: state.polarsById[item.id] === item
+      ? formatPolarValue(item)
+      : state.deltasById[item.id] === item
+        ? formatDeltaValue(item)
+        : formatAttitudeValue(item)
+  }));
+  if (rows.length) el.appendChild(buildDataTable(rows));
+}
+
+function formatSpatialVariance(table) {
+  if (!Number.isFinite(table?.q)) return null;
+  const pairCount = Number.isInteger(table.qPairCount) ? table.qPairCount : 0;
+  const rawEstimate = Number.isFinite(table.qEstimate)
+    ? `; raw estimate ${table.qEstimate.toExponential(3)} from ${pairCount} adjacent pairs`
+    : `; ${pairCount} eligible adjacent pairs`;
+  const source = table.qSource === 'derived'
+    ? `derived from ${pairCount} adjacent pairs`
+    : `fallback${rawEstimate}`;
+  return `${table.q.toExponential(3)} (${source})`;
+}
+
 function renderLiveSections() {
   const learningState = state.learningState || null;
   const inputPolars = filterById(state.polarsAll, ['groundSpeed']);
@@ -533,50 +565,57 @@ function renderLiveSections() {
   const fallbackInputPolars = inputPolars.length ? inputPolars : filterById(state.polarsAll, ['groundSpeed.smoothed']);
   const fallbackInputDeltas = inputDeltas.length ? inputDeltas : filterById(state.deltasAll, ['heading.smoothed', 'boatSpeed.smoothed']);
   const fallbackInputAttitudes = inputAttitudes.length ? inputAttitudes : filterById(state.attitudesAll, ['attitude.smoothed']);
+  const displayedInputs = [...fallbackInputPolars, ...fallbackInputDeltas, ...fallbackInputAttitudes];
 
   // Inputs section — raw sensor readings only (smoothing is internal to the plugin)
+  const navigationStateRows = [{ label: 'navigation.state', value: formatNavigationStateValue(learningState?.navigationState) }];
   renderGroupInto('inputs-values',
     fallbackInputPolars,
     fallbackInputDeltas,
-    fallbackInputAttitudes
+    fallbackInputAttitudes,
+    navigationStateRows
   );
-  const inputWarningIds = ['boatSpeed', 'attitude', 'heading.angle', 'groundSpeed', 'boatSpeed.smoothed', 'groundSpeed.smoothed', 'heading.smoothed', 'attitude.smoothed'];
-  if (config && config.assumeCurrent) inputWarningIds.push('current.smoothed');
-  renderInputWarnings('inputs-warnings', inputWarningIds);
+  renderWarnings('inputs-warnings', displayedInputs);
 
   // Estimation — inputs (raw sensor data used for boat speed estimation)
-  renderGroupInto('estimation-inputs',
-    filterById(state.polarsAll,    ['groundSpeed']),
-    filterById(state.deltasAll,    ['heading.angle', 'boatSpeed']),
-    filterById(state.attitudesAll, ['attitude'])
+  const groundSpeedInputs = filterById(state.polarsAll, ['groundSpeed']);
+  const boatSpeedInputs = filterById(state.deltasAll, ['boatSpeed']);
+  const estimationInputs = config?.sogFallback
+    ? [...groundSpeedInputs, ...boatSpeedInputs]
+    : [...boatSpeedInputs, ...groundSpeedInputs];
+  estimationInputs.push(
+    ...filterById(state.deltasAll, ['heading.angle']),
+    ...filterById(state.attitudesAll, ['attitude'])
   );
+  renderItemsInto('estimation-inputs', estimationInputs);
   // Estimation — intermediates
-  renderGroupInto('estimation-intermediates',
-    filterById(state.polarsAll, ['boatSpeedRefGround', 'speedCorrection', 'residual', 'residual.smoothed']),
-    [], []
-  );
+  const estimationIntermediates = filterById(state.polarsAll, ['boatSpeedRefGround', 'speedCorrection', 'residual', 'residual.smoothed']);
+  const spatialVariance = config?.showStatistics
+    ? formatSpatialVariance(Object.values(state.tablesById)[0])
+    : null;
+  const statisticRows = spatialVariance === null
+    ? []
+    : [{ label: 'Spatial variance q', value: spatialVariance }];
+  renderGroupInto('estimation-intermediates', estimationIntermediates, [], [], statisticRows);
   // Estimation — outputs
-  renderGroupInto('estimation-outputs',
-    filterById(state.polarsAll, ['correctedBoatSpeed', 'current.smoothed']),
-    [], []
-  );
+  const estimationOutputs = filterById(state.polarsAll, ['correctedBoatSpeed', 'current.smoothed']);
+  renderGroupInto('estimation-outputs', estimationOutputs, [], []);
   // Estimation — warnings
-  const estimationWarnings = document.getElementById('estimation-warnings');
-  if (estimationWarnings) estimationWarnings.innerHTML = '';
+  renderWarnings('estimation-warnings', [...estimationInputs, ...estimationIntermediates, ...estimationOutputs]);
 
-  // Learning — inputs: smoothed sensors + current if assumeCurrent
-  const learningCurrentPolars = (config && config.assumeCurrent)
-    ? filterById(state.polarsAll, ['current.smoothed'])
-    : [];
+  // Learning — inputs
+  const learningPolars = filterById(state.polarsAll, ['groundSpeed.smoothed']);
+  const learningDeltas = filterById(state.deltasAll, ['heading.smoothed', 'boatSpeed.smoothed']);
+  const learningAttitudes = filterById(state.attitudesAll, ['attitude.smoothed']);
   renderGroupInto('learning-inputs',
-    [...filterById(state.polarsAll, ['groundSpeed.smoothed']), ...learningCurrentPolars],
-    filterById(state.deltasAll,    ['heading.smoothed', 'boatSpeed.smoothed']),
-    filterById(state.attitudesAll, ['attitude.smoothed'])
+    learningPolars,
+    learningDeltas,
+    learningAttitudes
   );
   // Learning — warnings
   const learningWarnings = document.getElementById('learning-warnings');
+  renderWarnings('learning-warnings', [...learningPolars, ...learningDeltas, ...learningAttitudes]);
   if (learningWarnings) {
-    learningWarnings.innerHTML = '';
     const navState = learningState?.navigationState;
     if (navState?.enabled && navState.pathKnown === false) {
       const ul = document.createElement('ul');
@@ -607,7 +646,7 @@ function renderLiveSections() {
       startup: 'Startup stabilising window',
       observation_reset: 'Recent rejected or invalid observation',
       nav_state_change: 'navigation.state changed',
-      nav_state: 'Blocked by navigation.state',
+      not_moving: 'Vessel not moving',
       cog_override: 'Blocked by COG override',
       accepted: 'Observation recorded',
       estimator_outlier: 'Estimator rejected observation',
@@ -615,7 +654,7 @@ function renderLiveSections() {
       missing_current_when_required: 'Current estimate unavailable',
       learning_off: 'Learning is off',
       stabilizing: 'Stabilising window active',
-      nav_state_blocked: 'Learning blocked by navigation.state',
+      not_moving_blocked: 'Learning blocked \u2014 vessel not moving',
       cog_override_active: 'Learning blocked by COG override',
       stw_below_threshold: 'Below minimum STW for learning',
       sog_below_threshold: 'Below minimum SOG for learning',
@@ -625,10 +664,11 @@ function renderLiveSections() {
     const reason = reasonTextMap[learningState?.observationReason]
       || reasonTextMap[learningState?.reason]
       || '\u2014';
+    const showReason = learningState?.observationState && learningState.observationState !== 'accepted';
     statusTbody.innerHTML =
         `<tr><td class="text-muted small">Learning</td><td class="small">${learningText}</td></tr>` +
         `<tr><td class="text-muted small">Observation</td><td class="small">${obsText}</td></tr>` +
-      `<tr><td class="text-muted small">Reason</td><td class="small">${reason}</td></tr>`;
+      (showReason ? `<tr><td class="text-muted small">Reason</td><td class="small">${reason}</td></tr>` : '');
   }
   // Correction table
   const tableEl = document.getElementById('table-container');
@@ -642,46 +682,70 @@ function renderLiveSections() {
       speedSymbol: speedC.symbol,
       heelSymbol:  angleC.symbol,
     };
-    Object.values(state.tablesById).forEach(t => tableEl.appendChild(tableRenderer.render(t, tableOpts)));
+    const tables = Object.values(state.tablesById);
+    const rawSpeed      = state.deltasById['boatSpeed']?.value;
+    const heel          = state.attitudesById['attitude']?.value?.roll;
+    const correctedSpeed = state.polarsById['correctedBoatSpeed']?.magnitude;
+    const marker = [rawSpeed, heel, correctedSpeed].every(Number.isFinite)
+      ? { rawSpeed, heel, correctedSpeed }
+      : null;
+    tables.forEach(t => {
+      const wrap = tableRenderer.render(t, tableOpts);
+      tableEl.appendChild(wrap);
+      tableRenderer.renderMarkers(wrap, t.row, t.col, marker);
+    });
   }
 }
 
 // ─── Polling ──────────────────────────────────────────────────────────────────
+const POLL_INTERVAL_MS = 1000;
+const MIN_POLL_INTERVAL_MS = 100;
+const MAX_POLL_INTERVAL_MS = 5000;
+let pollIntervalMs = POLL_INTERVAL_MS;
 let updateTimer = null;
 let lastTickOk = false;
 
 async function tick() {
-  const data = await apiGet('/api/report');
-  if (data) {
-    // Recovered from an error — reload meta and config so unit converters,
-    // source lists and settings reflect the (possibly restarted) plugin state.
-    if (!lastTickOk) {
-      await loadMeta();
-      config = await apiGet('/api/settings');
-      if (config && config.tableName) setTableName(config.tableName);
-      renderSettingsPanel();
+  try {
+    const data = await apiGet('/api/report');
+    if (data) {
+      // Recovered from an error — reload meta and config so unit converters,
+      // source lists and settings reflect the (possibly restarted) plugin state.
+      if (!lastTickOk) {
+        await loadMeta();
+        config = await apiGet('/api/settings');
+        if (config && config.tableName) setTableName(config.tableName);
+        renderSettingsPanel();
+      }
+      lastTickOk = true;
+      pollIntervalMs = Number.isFinite(data.pollIntervalMs) && data.pollIntervalMs > 0
+        ? Math.min(Math.max(data.pollIntervalMs, MIN_POLL_INTERVAL_MS), MAX_POLL_INTERVAL_MS)
+        : POLL_INTERVAL_MS;
+      normaliseState(data);
+      state.learningState = data.learningState || null;
+      renderLiveSections();
+    } else {
+      lastTickOk = false;
+      state.learningState = null;
     }
-    lastTickOk = true;
-    normaliseState(data);
-    state.learningState = data.learningState || null;
-    renderLiveSections();
-  } else {
-    lastTickOk = false;
-    state.learningState = null;
+  } finally {
+    // Always poll status separately so the message reflects plugin state
+    // even when /api/report fails (plugin stopped/restarting).
+    const statusData = await fetch(`${API_BASE}/api/status`, { credentials: 'same-origin' })
+      .then(r => r.ok ? r.json() : null)
+      .catch(() => null);
+    _pluginStatus = statusData?.status ?? '';
+    _refreshMessage();
   }
-  // Always poll status separately so the message reflects plugin state
-  // even when /api/report fails (plugin stopped/restarting).
-  const statusData = await fetch(`${API_BASE}/api/status`, { credentials: 'same-origin' })
-    .then(r => r.ok ? r.json() : null)
-    .catch(() => null);
-  _pluginStatus = statusData?.status ?? '';
-  lifecycleWarnings = Array.isArray(statusData?.lifecycleWarnings) ? statusData.lifecycleWarnings : [];
-  _refreshMessage();
 }
 
 function startUpdates() {
-  if (updateTimer) clearInterval(updateTimer);
-  updateTimer = setInterval(tick, 1000);
+  if (updateTimer) clearTimeout(updateTimer);
+  const poll = async () => {
+    await tick();
+    updateTimer = setTimeout(poll, pollIntervalMs);
+  };
+  poll();
 }
 
 

package/public/index.html

@@ -152,7 +152,7 @@
               <table class="table table-sm table-borderless mb-0" id="learning-settings-table">
                 <tbody></tbody>
               </table>
-              <h6 class="text-uppercase fw-bold text-muted border-bottom pb-1 mt-3 mb-1 small">Smoother</h6>
+              <h6 class="text-uppercase fw-bold text-muted border-bottom pb-1 mt-3 mb-1 small">Learning window</h6>
               <table class="table table-sm table-borderless mb-0" id="smoother-settings-table">
                 <tbody></tbody>
               </table>
@@ -193,15 +193,23 @@
                 </div>
                 <div class="table-legend-row">
                   <span class="legend-swatch legend-swatch--stripe"></span>
-                  <span><strong>Stripe angle</strong> — encodes leeway direction; stripes are tilted proportionally to the leeway correction (°)</span>
+                  <span><strong>Stripe angle</strong> — encodes leeway direction</span>
                 </div>
                 <div class="table-legend-row">
-                  <span class="legend-swatch legend-swatch--active">+1.2%</span>
-                  <span><strong>Blue text</strong> — most recently updated cell</span>
+                  <span class="legend-swatch legend-swatch--active"></span>
+                  <span><strong>Black border</strong> — most recently updated cell</span>
                 </div>
                 <div class="table-legend-row">
-                  <span class="legend-swatch legend-swatch--neighbour"></span>
-                  <span><strong>Faint tint</strong> — interpolation neighbours used in the current estimate</span>
+                  <span class="legend-swatch legend-swatch--weight"></span>
+                  <span><strong>Blue bar</strong> — normalized fusion weight; full cell width is 100%</span>
+                </div>
+                <div class="table-legend-row">
+                  <span class="legend-swatch legend-swatch--dot-red"></span>
+                  <span><strong>Red dot</strong> — current uncorrected (raw) speed and heel</span>
+                </div>
+                <div class="table-legend-row">
+                  <span class="legend-swatch legend-swatch--dot-blue"></span>
+                  <span><strong>Blue dot</strong> — current corrected speed and heel</span>
                 </div>
                 <div class="table-legend-row mt-1">
                   <span class="legend-label-wide">Cell values:</span>

package/public/main.css

@@ -34,6 +34,7 @@
 .TableCell {
   width: 60px;
   height: 60px;
+  position: relative;
   text-align: center;
   vertical-align: middle;
   font-size: 11px;
@@ -42,11 +43,14 @@
 .TableCorner { font-size: 10px; color: #888; font-weight: 400; text-align: center; }
 /* cell states */
 .cell--empty     { background-color: #f0f0f0; }
-.cell--neighbour { box-shadow: inset 0 0 0 1px #90a4ae; }
 .cell-factor     { font-weight: 600; font-size: 12px; }
 .cell-leeway     { font-weight: 600; font-size: 12px; margin-top: 2px; }
-.cell--active .cell-factor,
-.cell--active .cell-leeway { color: #1565c0; }
+.cell-weight     { position: absolute; left: 0; bottom: 0; height: 4px; background-color: #0d6efd; }
+.cell--active    { outline: 1px solid #000; outline-offset: -1px; }
+
+/* ─── Correction table marker overlay (raw speed dot + corrected speed/leeway arrow) ─ */
+.Table2D-wrap    { position: relative; display: inline-block; }
+.Table2D-markers { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
 
 /* ─── Stable table column widths inside cards ──────────────────────────────── */
 .card-body .table {
@@ -118,6 +122,16 @@ tr.stale td { color: #aaa; font-style: italic; }
     #f0f0f0 4px, #f0f0f0 5px
   );
 }
-.legend-swatch--active   { background: transparent; border: none; width: auto; height: auto; font-weight: 600; color: #1565c0; font-size: 11px; white-space: nowrap; }
-.legend-swatch--neighbour { background: #fff; box-shadow: inset 0 0 0 1px #90a4ae; }
+.legend-swatch--weight   { position: relative; border: 0; }
+.legend-swatch--weight::after { content: ''; position: absolute; left: 0; right: 25%; bottom: 2px; height: 4px; background-color: #0d6efd; }
+.legend-swatch--active   { background: transparent; border-color: #000; border-radius: 0; }
+.legend-swatch--dot-red  { background: transparent; border: 0; border-radius: 0; position: relative; }
+.legend-swatch--dot-red::after,
+.legend-swatch--dot-blue::after {
+  content: ''; position: absolute; top: 2px; left: 8px;
+  width: 12px; height: 12px; border-radius: 50%; border: 1px solid #fff;
+}
+.legend-swatch--dot-red::after  { background-color: #dc3545; }
+.legend-swatch--dot-blue { background: transparent; border: 0; border-radius: 0; position: relative; }
+.legend-swatch--dot-blue::after { background-color: #0d6efd; }
 .legend-label-wide       { flex-shrink: 0; white-space: nowrap; font-weight: 600; }