feat(WebSocket): auto-reconnect after backend restart, harden Origin checks, add status tooltip

- Wire Socket.IO `cors_allowed_origins` to `validate_ws_origin()` so the transport enforces Origin allowlisting.
- Harden `validate_ws_origin()` to accept reverse-proxy setups by checking Host + `X-Forwarded-Host`/`X-Forwarded-Proto` candidates and handling `SERVER_PORT` robustly.
- Frontend: ensure CSRF is initialized before starting the Engine.IO handshake, and auto-retry connects after `connect_error` with exponential backoff (fixes long-lived tabs after restart).
- Sync: always re-send `state_request` on every Socket.IO connect so per-sid projections are re-established (prevents “healthy but stalled” tabs after sleep/suspend).
- UI: add native hover tooltip for the sync indicator and make hover reliable by applying the tooltip on the wrapper and disabling pointer events on the inner SVG.

Author: Rafael Uzarowski

python/helpers/websocket.py

@@ -73,27 +73,64 @@ def validate_ws_origin(environ: dict[str, Any]) -> tuple[bool, str | None]:
     if origin_host is None or origin_port is None:
         return False, "invalid_origin"
 
+    # Build candidate request host/port pairs. Prefer explicit Host header, fall back to
+    # forwarded headers (reverse proxies) and finally SERVER_NAME.
     raw_host = environ.get("HTTP_HOST")
     req_host, req_port = _parse_host_header(raw_host)
     if not req_host:
         req_host = environ.get("SERVER_NAME")
+
     if req_port is None:
         server_port_raw = environ.get("SERVER_PORT")
-        if isinstance(server_port_raw, str) and server_port_raw.isdigit():
-            req_port = int(server_port_raw)
+        try:
+            server_port = int(server_port_raw) if server_port_raw is not None else None
+        except (TypeError, ValueError):
+            server_port = None
+        if server_port is not None and server_port > 0:
+            req_port = server_port
+
     if req_host:
         req_host = req_host.lower()
-
-    if not req_host:
-        return False, "missing_host"
     if req_port is None:
         req_port = origin_port
 
-    if origin_host != req_host:
+    forwarded_host_raw = environ.get("HTTP_X_FORWARDED_HOST")
+    forwarded_host = None
+    forwarded_port = None
+    if isinstance(forwarded_host_raw, str) and forwarded_host_raw.strip():
+        first = forwarded_host_raw.split(",")[0].strip()
+        forwarded_host, forwarded_port = _parse_host_header(first)
+        if forwarded_host:
+            forwarded_host = forwarded_host.lower()
+
+    forwarded_proto_raw = environ.get("HTTP_X_FORWARDED_PROTO")
+    forwarded_scheme = None
+    if isinstance(forwarded_proto_raw, str) and forwarded_proto_raw.strip():
+        forwarded_scheme = forwarded_proto_raw.split(",")[0].strip().lower()
+    forwarded_scheme = forwarded_scheme or origin_parsed.scheme
+    forwarded_port = (
+        forwarded_port
+        if forwarded_port is not None
+        else _default_port_for_scheme(forwarded_scheme) or origin_port
+    )
+
+    candidates: list[tuple[str, int]] = []
+    if req_host:
+        candidates.append((req_host, int(req_port)))
+    if forwarded_host:
+        candidates.append((forwarded_host, int(forwarded_port)))
+
+    if not candidates:
+        return False, "missing_host"
+
+    for host, port in candidates:
+        if origin_host == host and origin_port == port:
+            return True, None
+
+    # Preserve the original mismatch semantics for debugging.
+    if origin_host not in {host for host, _ in candidates}:
         return False, "origin_host_mismatch"
-    if origin_port != req_port:
-        return False, "origin_port_mismatch"
-    return True, None
+    return False, "origin_port_mismatch"
 
 
 class SingletonInstantiationError(RuntimeError):

run_ui.py

@@ -54,7 +54,7 @@
 
 socketio_server = socketio.AsyncServer(
     async_mode="asgi",
-    cors_allowed_origins=[],
+    cors_allowed_origins=lambda _origin, environ: validate_ws_origin(environ)[0],
     logger=False,
     engineio_logger=False,
     ping_interval=25,  # explicit default to avoid future lib changes

webui/components/sync/sync-status.html

@@ -12,6 +12,10 @@
             align-items: center;
         }
 
+        .status-icon svg {
+            pointer-events: none;
+        }
+
         .pending-ring {
             animation: pendingPulse 1.2s infinite ease-in-out;
         }
@@ -38,7 +42,17 @@
 <body>
     <div x-data>
         <template x-if="$store.sync">
-            <div class="status-icon" x-create="$store.sync.init()">
+            <div
+                class="status-icon"
+                x-create="$store.sync.init()"
+                :title="$store.sync.mode === 'HEALTHY'
+                  ? 'Connected (push sync healthy)'
+                  : $store.sync.mode === 'HANDSHAKE_PENDING'
+                    ? 'Connecting (waiting for state handshake)'
+                    : $store.sync.mode === 'DEGRADED'
+                      ? 'Degraded (polling fallback)'
+                      : 'Disconnected (waiting to reconnect)'"
+            >
                 <svg viewBox="0 0 30 30" width="20" height="20" aria-label="sync status">
                     <!-- HEALTHY (filled circle) -->
                     <circle x-show="$store.sync.mode === 'HEALTHY'" cx="15" cy="15" r="8" fill="#00c340" />

webui/components/sync/sync-store.js

@@ -106,11 +106,15 @@ const model = {
           this._pendingReconnectToast = runtimeChanged ? "restart" : "reconnect";
         }
 
-        if (this.needsHandshake) {
-          this.sendStateRequest({ forceFull: true }).catch((error) => {
-            console.error("[syncStore] reconnect handshake failed:", error);
-          });
-        }
+        // Always re-handshake on every Socket.IO connect.
+        //
+        // The backend StateMonitor tracking is per-sid and starts with seq_base=0 on a
+        // newly connected sid. If a tab misses the 'disconnect' event (e.g. browser
+        // suspended overnight) it can look HEALTHY locally while never sending a
+        // fresh state_request, so pushes are gated and logs appear to stall.
+        this.sendStateRequest({ forceFull: true }).catch((error) => {
+          console.error("[syncStore] connect handshake failed:", error);
+        });
       });
 
       websocket.onDisconnect(() => {

webui/js/websocket.js

@@ -249,6 +249,37 @@ class WebSocketClient {
     this._hasConnectedOnce = false;
     this._lastRuntimeId = null;
     this._csrfInvalidatedForConnectError = false;
+    this._connectErrorRetryTimer = null;
+    this._connectErrorRetryAttempt = 0;
+  }
+
+  _clearConnectErrorRetryTimer() {
+    if (this._connectErrorRetryTimer) {
+      clearTimeout(this._connectErrorRetryTimer);
+      this._connectErrorRetryTimer = null;
+    }
+  }
+
+  _scheduleConnectErrorRetry(reason) {
+    if (this._manualDisconnect) return;
+    if (this.connected) return;
+    if (!this.socket) return;
+    if (this.socket.connected) return;
+    if (this._connectErrorRetryTimer) return;
+
+    const attempt = Math.max(0, Number(this._connectErrorRetryAttempt) || 0);
+    const baseMs = 250;
+    const capMs = 10000;
+    const delayMs = Math.min(capMs, baseMs * 2 ** attempt);
+    this._connectErrorRetryAttempt = attempt + 1;
+
+    this.debugLog("schedule connect retry", { reason, attempt, delayMs });
+    this._connectErrorRetryTimer = setTimeout(() => {
+      this._connectErrorRetryTimer = null;
+      if (this._manualDisconnect) return;
+      if (this.connected) return;
+      this.connect().catch(() => {});
+    }, delayMs);
   }
 
   buildPayload(data) {
@@ -318,6 +349,11 @@ class WebSocketClient {
 
       if (this.socket.connected) return;
 
+      // Ensure the current runtime-bound session + CSRF cookies exist before initiating
+      // the Engine.IO handshake. This is required for seamless reconnect after backend
+      // restarts that rotate runtime_id and session cookie names.
+      await getCsrfToken();
+
       await new Promise((resolve, reject) => {
         const onConnect = () => {
           this.socket.off("connect_error", onError);
@@ -677,6 +713,8 @@ class WebSocketClient {
     this.socket.on("connect", () => {
       this.connected = true;
       this._csrfInvalidatedForConnectError = false;
+      this._connectErrorRetryAttempt = 0;
+      this._clearConnectErrorRetryTimer();
 
       const runtimeId = window.runtimeInfo?.id || null;
       const runtimeChanged = Boolean(
@@ -722,6 +760,7 @@ class WebSocketClient {
         this._csrfInvalidatedForConnectError = true;
         invalidateCsrfToken();
       }
+      this._scheduleConnectErrorRetry("connect_error");
     });
 
     this.socket.on("error", (error) => {