fix(dashboard): smooth latency badge updates, add ping settings

- Snapshot and restore latency badge values across innerHTML re-renders
  so badges never flash back to "…ms" on the 2-second state refresh cycle
- Add CSS transition (color 0.4s ease) and in-flight opacity dim (.pinging)
  to .latency-badge for smooth color changes
- Decouple latency pinging from the state refresh cycle — pings now run on
  their own independent interval instead of being triggered by refresh()
- Add two new settings under a "Latency Ping" section in Settings:
  - Enable Latency Ping toggle (latencyPingEnabled, default: true)
  - Ping Interval in seconds (latencyPingIntervalMs, default: 5s)
- Restart ping interval immediately on settings save so changes take effect
  without a page reload

extension/dashboard/pages/settings.js

@@ -15,14 +15,17 @@ function updateSettingsUI() {
   $('toggleDebug')?.classList.toggle('active', settings.debug === true);
   $('toggleDisableFileUrls')?.classList.toggle('active', settings.disableOnFileUrls === true);
   $('toggleTheme')?.classList.toggle('active', document.documentElement.getAttribute('data-theme') === 'light');
+  $('toggleLatencyPing')?.classList.toggle('active', settings.latencyPingEnabled !== false);
   const proxyPortEl = $('proxyPort');
   const readyTimeoutMsEl = $('readyTimeoutMs');
   const backupRetentionEl = $('backupRetention');
   const backupIntervalEl = $('backupIntervalHours');
+  const latencyPingIntervalEl = $('latencyPingIntervalMs');
   if (proxyPortEl) proxyPortEl.value = settings.proxyPort ?? SETTINGS_DEFAULTS.proxyPort;
   if (readyTimeoutMsEl) readyTimeoutMsEl.value = settings.readyTimeoutMs ?? SETTINGS_DEFAULTS.readyTimeoutMs;
   if (backupRetentionEl) backupRetentionEl.value = settings.backupRetention ?? SETTINGS_DEFAULTS.backupRetention;
   if (backupIntervalEl) backupIntervalEl.value = settings.backupIntervalHours ?? SETTINGS_DEFAULTS.backupIntervalHours;
+  if (latencyPingIntervalEl) latencyPingIntervalEl.value = (settings.latencyPingIntervalMs ?? SETTINGS_DEFAULTS.latencyPingIntervalMs) / 1000;
 }
 
 function saveSettings() {
@@ -31,16 +34,23 @@ function saveSettings() {
   settings.tunnelAutoReconnect = $('toggleTunnelAutoReconnect')?.classList.contains('active') ?? SETTINGS_DEFAULTS.tunnelAutoReconnect;
   settings.debug = $('toggleDebug')?.classList.contains('active') ?? SETTINGS_DEFAULTS.debug;
   settings.disableOnFileUrls = $('toggleDisableFileUrls')?.classList.contains('active') ?? SETTINGS_DEFAULTS.disableOnFileUrls;
+  settings.latencyPingEnabled = $('toggleLatencyPing')?.classList.contains('active') ?? SETTINGS_DEFAULTS.latencyPingEnabled;
   settings.proxyPort = parseInt($('proxyPort')?.value, 10) || SETTINGS_DEFAULTS.proxyPort;
   settings.readyTimeoutMs = parseInt($('readyTimeoutMs')?.value, 10) || SETTINGS_DEFAULTS.readyTimeoutMs;
   settings.backupRetention = Math.max(1, parseInt($('backupRetention')?.value, 10) || SETTINGS_DEFAULTS.backupRetention);
   settings.backupIntervalHours = Math.max(0, parseInt($('backupIntervalHours')?.value, 10) || 0);
+  const pingSecs = parseFloat($('latencyPingIntervalMs')?.value);
+  settings.latencyPingIntervalMs = isNaN(pingSecs) || pingSecs <= 0
+    ? SETTINGS_DEFAULTS.latencyPingIntervalMs
+    : Math.round(pingSecs * 1000);
   chrome.runtime.sendMessage(
     { target: 'holesail-native', action: 'send', payload: { type: 'updateSettings', payload: { ...settings } } },
     (response) => {
       if (chrome.runtime.lastError) { showToast('Settings save failed: ' + chrome.runtime.lastError.message, 'error'); return; }
       if (response && response.ok) {
         if (response.settings) settings = { ...SETTINGS_DEFAULTS, ...response.settings };
+        // Restart the ping interval so the new interval / enabled state takes effect immediately
+        if (typeof window._restartPingInterval === 'function') window._restartPingInterval();
         if (response.requiresRestart) {
           showToast('Settings saved — restart the native host for proxy port changes to take effect', 'warning');
         } else {