clay-server 4.3.0-beta.1 → 4.3.0-beta.10

package/lib/public/css/overlays.css

@@ -518,7 +518,7 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
 .popover-copy:hover { color: var(--text); border-color: var(--text-dimmer); }
 .popover-copy.copied { color: var(--success); border-color: var(--success); }
 
-/* Skip permissions pill */
+/* Quiet native toolbar control for session permission mode. */
 .session-permission-control {
   display: inline-flex;
   align-items: center;
@@ -535,35 +535,40 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
   flex: 0 0 auto;
   gap: 1px;
   padding: 2px;
-  border: 1px solid color-mix(in srgb, var(--border, #45484f) 88%, transparent);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--surface-raised, rgba(0,0,0,.18)) 86%, transparent);
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.12);
+  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--bg-alt) 72%, transparent);
 }
 .session-permission-segmented button {
   position: relative;
-  flex: 0 0 auto;
+  flex: 0 0 48px;
+  width: 48px;
+  height: 22px;
   border: 0;
   border-radius: 7px;
-  padding: 4px 9px;
-  color: var(--text-muted, inherit);
+  padding: 3px 4px;
+  color: var(--text-secondary);
   background: transparent;
   font: inherit;
+  font-weight: 500;
   font-size: 11px;
   line-height: 1;
   white-space: nowrap;
   cursor: pointer;
-  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
-}
-.session-permission-segmented button:hover:not(:disabled) { color: var(--text, #fff); background: rgba(255,255,255,.07); }
-.session-permission-segmented button:focus-visible { outline: 2px solid var(--accent, #6f8cff); outline-offset: 1px; z-index: 1; }
-.session-permission-segmented button.active { background: var(--accent, #6f8cff); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
-.session-permission-segmented button:disabled { cursor: not-allowed; opacity: .5; }
+  transition: color .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
+}
+.session-permission-segmented button:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--bg) 76%, transparent); }
+.session-permission-segmented button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 1; }
+.session-permission-segmented button.active { border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-weight: var(--font-weight-heading, 600); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12); }
+:root.light-theme .session-permission-segmented button.active { background: var(--bg); }
+.session-permission-segmented button:disabled { cursor: not-allowed; }
+.session-permission-control:not(.permission-pending) .session-permission-segmented button:disabled { color: var(--text-muted); opacity: .65; }
 .session-permission-control.permission-pending .session-permission-segmented button:disabled { cursor: wait; }
-.session-permission-segmented button.pending { color: #fff; }
-.permission-spinner { display: inline-block; visibility: hidden; width: 10px; height: 10px; margin-left: 4px; vertical-align: -1px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; }
+.session-permission-segmented button.pending { color: var(--text); background: color-mix(in srgb, var(--bg) 42%, transparent); }
+.session-permission-segmented button.pending .permission-label { visibility: hidden; }
+.permission-spinner { position: absolute; inset: 50% auto auto 50%; display: block; visibility: hidden; width: 10px; height: 10px; transform: translate(-50%, -50%); border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; }
 .session-permission-segmented button.pending .permission-spinner { visibility: visible; animation: permission-spin .7s linear infinite; }
-@keyframes permission-spin { to { transform: rotate(360deg); } }
+@keyframes permission-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
 .session-permission-status {
   flex: 0 1 auto;
   min-width: 0;
@@ -592,12 +597,8 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
 }
 .permission-runtime-fallback .session-permission-status { color: var(--warning, #d49a55); }
 .permission-globally-forced .session-permission-status { color: var(--warning, #d49a55); }
-.permission-label-short { display: none; }
 @media (max-width: 760px) {
-  .permission-label-long { display: none; }
-  .permission-label-short { display: inline; }
   .session-permission-control { column-gap: 4px; }
-  .session-permission-segmented button { padding-inline: 7px; }
   .session-permission-status {
     max-width: 132px;
     font-size: 9px;

package/lib/public/css/pane.css

@@ -73,6 +73,28 @@ body.pane-mode #input-area {
   display: flex;
 }
 
+/* A configured two-Worker group is a deliberate workspace hierarchy: the
+   Driver gets the broad working canvas, while both Workers remain visible as
+   equal-height execution surfaces on the right. Legacy/ad-hoc two-pane
+   splits keep the ordinary equal columns below. */
+#split-host:has(.split-pane-role-worker:nth-of-type(3)) {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr);
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+  gap: 1px;
+  background: var(--border-subtle);
+}
+
+#split-host:has(.split-pane-role-worker:nth-of-type(3)) .split-pane-role-driver {
+  grid-row: 1 / span 2;
+  grid-column: 1;
+}
+
+#split-host:has(.split-pane-role-worker:nth-of-type(3)) .split-pane-role-worker {
+  grid-column: 2;
+  grid-row: var(--split-worker-row, auto);
+}
+
 .split-pane {
   flex: 1;
   display: flex;
@@ -365,31 +387,35 @@ body.pane-mode #input-area {
   line-height: 1;
 }
 
-/* Header-scoped (two-class) selectors: pane.css loads BEFORE menus.css in
-   style.css, so the base .session-full-access rules would win a specificity
-   tie and keep the pill at its 22px title-bar size inside the 24px pane
-   header. Scope under .split-pane-header to outrank them. */
+/* Header-scoped selectors keep the compact permission control clear of the
+   title and close affordance while preserving the shared header rhythm. */
+.split-pane-header {
+  height: 28px;
+  min-height: 28px;
+}
+
 .split-pane-header .split-pane-full-access {
-  height: 22px;
+  height: 24px;
   align-self: center;
   margin-left: 0;
   padding: 0;
   gap: 4px;
-  font-size: 10px;
+  font-size: 11px;
   letter-spacing: 0.02em;
   flex-wrap: nowrap;
   flex: 0 0 auto;
-  overflow: hidden;
 }
 
 .split-pane-header .session-permission-segmented button {
-  min-height: 18px;
-  padding: 3px 6px;
-  font-size: 10px;
+  min-height: 20px;
+  height: 20px;
+  font-size: 11px;
 }
 
-.split-pane-header .permission-label-long { display: none; }
-.split-pane-header .permission-label-short { display: inline; }
+.split-pane-header .session-permission-segmented {
+  height: 24px;
+  padding: 1px;
+}
 
 .split-pane-header .session-permission-status {
   flex: 0 0 auto;
@@ -437,6 +463,11 @@ body.pane-mode #input-area {
   color: var(--text);
 }
 
+.split-pane-close:disabled {
+  opacity: 0.42;
+  cursor: not-allowed;
+}
+
 .split-pane-close svg {
   width: 12px;
   height: 12px;
@@ -474,6 +505,25 @@ body.pane-mode #input-area {
     --split-worker-height: calc(30% - 4.8px);
   }
 
+  #split-host:has(.split-pane-role-worker:nth-of-type(3)) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--split-pane-gap);
+    background: transparent;
+  }
+
+  #split-host:has(.split-pane-role-worker:nth-of-type(3)) .split-pane-role-driver,
+  #split-host:has(.split-pane-role-worker:nth-of-type(3)) .split-pane-role-worker {
+    grid-row: auto;
+    grid-column: auto;
+  }
+
+  #split-host:has(.split-pane-role-worker:nth-of-type(3)) .split-pane-role-worker {
+    flex: 0 1 24%;
+    min-height: 104px;
+    order: -1;
+  }
+
   #split-host.visible {
     flex-direction: column;
     gap: var(--split-pane-gap);
@@ -491,11 +541,11 @@ body.pane-mode #input-area {
   }
 
   .split-pane-role-worker {
-    order: -1;
+    order: var(--split-pane-order, -1);
   }
 
   .split-pane-role-driver {
-    order: 0;
+    order: var(--split-pane-order, 0);
   }
 
   /* A configured Worker is an execution summary; the Driver keeps the

package/lib/public/css/sidebar.css

@@ -1262,26 +1262,81 @@
   opacity: 1;
 }
 
-/* Split button: main action + chevron sharing one grid cell. */
+.session-top-action:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Primary creation action with an adjacent icon-only provider selector. */
 .session-top-action-split {
   display: flex;
+  flex-wrap: nowrap;
   align-items: stretch;
-  gap: 2px;
+  gap: 0;
   min-width: 0;
 }
 
 .session-top-action-split .split-main {
   flex: 1 1 auto;
   width: auto;
+  min-width: 0;
+  padding: 0 9px;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 1.2;
+  border: 1px solid var(--border-subtle);
+  background: color-mix(in srgb, var(--sidebar-hover) 46%, transparent);
+  color: var(--text);
+  font-weight: 500;
+  white-space: normal;
+  text-align: left;
+  border-radius: 9px 0 0 9px;
 }
 
-.session-top-action-split .split-chevron {
-  flex: 0 0 auto;
-  width: 28px;
-  min-width: 28px;
+.session-top-action-split .split-main:hover {
+  border-color: var(--border);
+  background: var(--sidebar-hover);
+}
+
+.session-top-action-split .split-provider {
+  flex: 0 0 26px;
+  width: 26px;
+  min-width: 26px;
   padding: 0;
+  border: 1px solid var(--border-subtle);
+  border-left-color: var(--border);
+  background: color-mix(in srgb, var(--sidebar-hover) 46%, transparent);
+  border-radius: 0 9px 9px 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
   justify-content: center;
-  gap: 0;
+}
+
+.session-top-action-split .split-provider:hover {
+  background: var(--sidebar-hover);
+}
+
+.session-create-provider-icon {
+  width: 16px;
+  height: 16px;
+  margin-right: 0;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.session-create-provider-chevron {
+  display: inline-flex;
+}
+
+.session-create-provider-chevron .lucide,
+.session-create-provider-chevron svg {
+  width: 14px;
+  height: 14px;
+}
+
+.session-create-provider[aria-expanded="true"] {
+  background: var(--sidebar-hover);
 }
 
 .session-favorites-section {

package/lib/public/index.html

@@ -410,9 +410,9 @@
           <button id="header-info-btn" type="button" title="Session info"><i data-lucide="info"></i></button>
           <div id="header-full-access-btn" class="session-permission-control hidden" role="group" aria-label="Session permission mode">
             <div class="session-permission-segmented">
-              <button type="button" data-permission-mode="default"><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>
-              <button type="button" data-permission-mode="auto"><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>
-              <button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions" title="Skip permissions"><span class="permission-label-long permission-label">Skip permissions</span><span class="permission-label-short permission-label" aria-hidden="true">Skip</span><span class="permission-spinner" aria-hidden="true"></span></button>
+              <button type="button" data-permission-mode="default" aria-label="Ask permissions" title="Ask permissions"><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>
+              <button type="button" data-permission-mode="auto" aria-label="Auto permissions" title="Auto permissions"><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>
+              <button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions" title="Skip permissions"><span class="permission-label">Skip</span><span class="permission-spinner" aria-hidden="true"></span></button>
             </div>
             <span class="session-permission-status hidden" aria-live="polite"></span>
           </div>

package/lib/public/modules/app-connection.js

@@ -22,10 +22,9 @@ import { beginDefaultVendorConnection, requestDefaultVendor } from './default-ve
 import { clearProjectSplitState } from './split-session-boundary.js';
 import { clearPermissionModePending } from './permission-control.js';
 import { clearMcpPermissionModePending } from './mcp-ui.js';
+import { createWebSocketLifecycle } from './websocket-lifecycle.js';
+import { createWebSocketWatchdog } from './websocket-watchdog.js';
 
-var reconnectTimer = null;
-var reconnectDelay = 1000;
-var connectTimeoutId = null;
 var connectOverlay = null;
 var hasConnectedOnce = false;
 
@@ -44,9 +43,32 @@ var overlayGraceTimer = null;
 // server-global-ws.js. Well under the common 60s proxy read timeout, and one
 // timer per live socket.
 var HEARTBEAT_MS = 25000;
-var heartbeatTimer = null;
-var heartbeatDeadlineTimer = null;
 var disconnectedAt = 0;
+var attemptStartedAt = 0;
+var attemptSocket = null;
+var lifecycle = createWebSocketLifecycle({
+  handshakeTimeoutMs: 12000,
+  onHandshakeTimeout: function (epoch) {
+    if (lifecycle.current(epoch) && attemptSocket) {
+      forceReplaceSocket("handshake_timeout", 0, epoch);
+    }
+  }
+});
+var watchdog = createWebSocketWatchdog({
+  heartbeatIntervalMs: HEARTBEAT_MS,
+  heartbeatDeadlineMs: 10000,
+  probeTimeoutMs: 4000,
+  now: function () { return Date.now(); },
+  isCurrent: function (socket, epoch) {
+    return getWs() === socket && socket.readyState === 1 && lifecycle.current(epoch);
+  },
+  sendPing: function (socket) {
+    socket.send(JSON.stringify({ type: "ping" }));
+  },
+  onFailure: function (reason, epoch, latency) {
+    forceReplaceSocket(reason, 0, epoch, latency);
+  }
+});
 
 function clearOverlayGrace() {
   if (overlayGraceTimer) {
@@ -64,15 +86,54 @@ function showOverlayNow() {
   connectOverlay.classList.remove("hidden");
 }
 
-export function stopHeartbeat() {
-  if (heartbeatTimer) {
-    clearInterval(heartbeatTimer);
-    heartbeatTimer = null;
+function recordConnectionDiagnostic(reason, code, latency) {
+  var safeReasons = { close: true, error: true, handshake_timeout: true, heartbeat_timeout: true, heartbeat_error: true, probe_error: true, probe_timeout: true, auth_timeout: true, "ack-timeout": true, online: true, visible: true };
+  if (!safeReasons[reason]) reason = "unknown";
+  console.warn("[clay] WebSocket diagnostic", {
+    reason: reason,
+    code: typeof code === "number" ? code : 0,
+    retry: lifecycle.getRetryAttempt(),
+    latencyMs: typeof latency === "number" ? Math.max(0, Math.min(latency, 600000)) : null
+  });
+}
+
+function forceReplaceSocket(reason, code, epoch, latency) {
+  if (!lifecycle.current(epoch)) return;
+  var socket = getWs();
+  watchdog.clearProbe();
+  stopHeartbeat();
+  if (socket) {
+    socket.onopen = null;
+    socket.onmessage = null;
+    socket.onerror = null;
+    socket.onclose = null;
+    try { socket.close(); } catch (e) {}
   }
-  if (heartbeatDeadlineTimer) {
-    clearTimeout(heartbeatDeadlineTimer);
-    heartbeatDeadlineTimer = null;
+  setWs(null);
+  recordConnectionDiagnostic(reason, code, latency);
+  setStatus("disconnected");
+  lifecycle.invalidate(epoch);
+  scheduleReconnect(reason);
+}
+
+export function stopHeartbeat() {
+  watchdog.stopHeartbeat();
+}
+
+function suspendSocketForOffline() {
+  watchdog.clearProbe();
+  stopHeartbeat();
+  var socket = getWs();
+  attemptSocket = null;
+  if (socket) {
+    socket.onopen = null;
+    socket.onmessage = null;
+    socket.onerror = null;
+    socket.onclose = null;
+    try { socket.close(); } catch (e) {}
   }
+  setWs(null);
+  if (socket || store.get('connected')) setStatus("disconnected");
 }
 
 // Started once per live socket. The socket it was started for is captured, so
@@ -80,28 +141,51 @@ export function stopHeartbeat() {
 // connection. The pong the server sends back keeps a proxy's upstream read
 // timeout from expiring. A missing pong also identifies a half-open socket,
 // which browsers can otherwise leave OPEN while silently losing sends.
-export function startHeartbeat(socket) {
-  stopHeartbeat();
-  if (!socket) return;
-  heartbeatTimer = setInterval(function () {
-    if (!socket || socket.readyState !== 1 || getWs() !== socket) {
-      stopHeartbeat();
-      return;
-    }
-    try { socket.send(JSON.stringify({ type: "ping" })); } catch (e) {}
-    if (heartbeatDeadlineTimer) clearTimeout(heartbeatDeadlineTimer);
-    heartbeatDeadlineTimer = setTimeout(function () {
-      heartbeatDeadlineTimer = null;
-      if (getWs() === socket && socket.readyState === 1) connect();
-    }, 10000);
-  }, HEARTBEAT_MS);
+export function startHeartbeat(socket, attemptEpoch) {
+  watchdog.startHeartbeat(socket, attemptEpoch);
+}
+
+function suspendSocketWatchdogs() {
+  // A frozen page cannot promise proxy keepalive. Retire its deadlines without
+  // closing the socket; resume performs a fresh bounded liveness check.
+  watchdog.suspend();
+}
+
+function resumeSocketWatchdogs(reason) {
+  var resumed = watchdog.resume();
+  var socket = getWs();
+  if (socket && socket.readyState === 1 && resumed) startHeartbeat(socket, lifecycle.getEpoch());
+  probeReconnect(reason);
 }
 
 export function initConnection() {
   connectOverlay = document.getElementById("connect-overlay");
+  if (typeof navigator !== "undefined" && navigator.onLine === false) lifecycle.setOffline(true);
+  if (document.hidden) suspendSocketWatchdogs();
   window.addEventListener("clay-message-delivery-timeout", function (event) {
     var socket = event.detail && event.detail.socket;
-    if (!socket || getWs() === socket) connect();
+    recordConnectionDiagnostic("ack-timeout", 0, null);
+    if (!socket || getWs() === socket) probeReconnect("ack-timeout");
+  });
+  window.addEventListener("offline", function () {
+    lifecycle.setOffline(true);
+    suspendSocketForOffline();
+  });
+  window.addEventListener("online", function () {
+    lifecycle.wake(function () {
+      if (document.hidden) return;
+      resumeSocketWatchdogs("online");
+    });
+  });
+  document.addEventListener("visibilitychange", function () {
+    if (document.hidden) suspendSocketWatchdogs();
+    else resumeSocketWatchdogs("visible");
+  });
+  document.addEventListener("freeze", function () {
+    suspendSocketWatchdogs();
+  });
+  document.addEventListener("resume", function () {
+    if (!document.hidden) resumeSocketWatchdogs("visible");
   });
 
   // --- Reactive UI sync for connected/processing state ---
@@ -224,6 +308,9 @@ function onConnected() {
 }
 
 export function connect() {
+  if (lifecycle.isOffline()) return;
+  var attemptEpoch = lifecycle.beginAttempt();
+  attemptStartedAt = Date.now();
   var ws = getWs();
   // Tear down the previous socket's heartbeat before a new socket exists, so
   // two sockets can never both be pinging.
@@ -236,37 +323,24 @@ export function connect() {
     ws.onclose = null;
     ws.close();
   }
-  if (connectTimeoutId) { clearTimeout(connectTimeoutId); connectTimeoutId = null; }
-
   var protocol = location.protocol === "https:" ? "wss:" : "ws:";
   var socketPath = store.get('wsPath');
   if (store.get('socketPath') && store.get('socketPath') !== socketPath) clearProjectSplitState();
   store.set({ socketPath: socketPath, activeProjectSlug: null, sessionActivatedProjectSlug: null, sessionListProjectSlug: null, splitGroupsProjectSlug: null });
   var newWs = new WebSocket(protocol + "//" + location.host + socketPath);
   setWs(newWs);
-
-  // If not connected within 3s, force retry
-  connectTimeoutId = setTimeout(function () {
-    if (getWs() !== newWs) return;
-    if (!store.get('connected')) {
-      newWs.onclose = null;
-      newWs.onerror = null;
-      newWs.close();
-      connect();
-    }
-  }, 3000);
+  attemptSocket = newWs;
 
   newWs.onopen = function () {
-    if (getWs() !== newWs) return;
-    if (connectTimeoutId) { clearTimeout(connectTimeoutId); connectTimeoutId = null; }
+    if (getWs() !== newWs || !lifecycle.current(attemptEpoch)) return;
+    if (!lifecycle.markOpen(attemptEpoch)) return;
     if (hasConnectedOnce && disconnectedAt) {
       console.log("[clay] WebSocket reconnected after " + (Date.now() - disconnectedAt) + "ms");
     }
     disconnectedAt = 0;
     setStatus("connected");
-    startHeartbeat(newWs);
-    reconnectDelay = 1000;
-    if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+    startHeartbeat(newWs, attemptEpoch);
+    lifecycle.clearRetry();
 
     // A pane pin is one-shot per WebSocket, not per page lifetime. The server
     // intentionally does not restore pane presence after a daemon restart.
@@ -292,64 +366,81 @@ export function connect() {
   };
 
   newWs.onclose = function (e) {
-    if (getWs() !== newWs) return;
-    if (connectTimeoutId) { clearTimeout(connectTimeoutId); connectTimeoutId = null; }
+    if (getWs() !== newWs || !lifecycle.current(attemptEpoch)) return;
     stopHeartbeat();
+    watchdog.clearProbe();
     disconnectedAt = Date.now();
-    // Abnormal closes are the ones worth reporting: a clean close is either a
-    // deliberate navigation or a server shutdown the user already knows about.
-    if (e && !e.wasClean) {
-      console.warn("[clay] WebSocket closed abnormally: code=" + e.code +
-        " reason=" + (e.reason || "(none)") + " wasClean=false");
-    }
+    recordConnectionDiagnostic("close", e && e.code, attemptStartedAt ? Date.now() - attemptStartedAt : null);
     closeDmUserPicker();
     store.set({ activeProjectSlug: null, sessionActivatedProjectSlug: null });
     setStatus("disconnected");
     setActivity(null);
-    scheduleReconnect();
+    lifecycle.invalidate(attemptEpoch);
+    scheduleReconnect("close");
   };
 
-  newWs.onerror = function () {};
+  newWs.onerror = function () {
+    if (getWs() !== newWs || !lifecycle.current(attemptEpoch)) return;
+    recordConnectionDiagnostic("error", 0, null);
+    forceReplaceSocket("error", 0, attemptEpoch);
+  };
 
   newWs.onmessage = function (event) {
-    if (getWs() !== newWs) return;
+    if (getWs() !== newWs || !lifecycle.current(attemptEpoch)) return;
     // Backup: if we're receiving messages, we're connected
     if (!store.get('connected')) {
       setStatus("connected");
-      reconnectDelay = 1000;
-      if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+      lifecycle.clearRetry();
     }
 
     blinkIO();
     var msg;
     try { msg = JSON.parse(event.data); } catch (e) { return; }
-    if (msg.type === "pong" && heartbeatDeadlineTimer) {
-      clearTimeout(heartbeatDeadlineTimer);
-      heartbeatDeadlineTimer = null;
-    }
+    lifecycle.markLive(attemptEpoch);
+    if (msg.type === "pong") watchdog.acceptPong(newWs, attemptEpoch);
     processMessage(msg);
   };
 }
 
 export function cancelReconnect() {
-  if (reconnectTimer) { clearTimeout(reconnectTimer); reconnectTimer = null; }
+  watchdog.clearProbe();
+  stopHeartbeat();
+  lifecycle.cancel();
+}
+
+function probeReconnect(reason) {
+  if (lifecycle.isOffline() || !lifecycle.current(lifecycle.getEpoch())) return;
+  var socket = getWs();
+  if (socket && socket.readyState === 0) return;
+  if (socket && socket.readyState === 1) {
+    watchdog.probe(socket, lifecycle.getEpoch());
+    return;
+  }
+  scheduleReconnect(reason);
 }
 
-export function scheduleReconnect() {
-  if (reconnectTimer) return;
-  reconnectTimer = setTimeout(function () {
-    reconnectTimer = null;
-    // Check if auth is still valid before reconnecting
-    fetch("/info").then(function (res) {
+export function scheduleReconnect(reason) {
+  lifecycle.schedule(reason || "unknown", function (epoch) {
+    var authEpoch = epoch;
+    var controller = typeof AbortController === "function" ? new AbortController() : null;
+    var authToken = lifecycle.beginAuth(authEpoch, function () {
+      if (controller) controller.abort();
+      scheduleReconnect("auth_timeout");
+    }, function () {
+      if (controller) controller.abort();
+    });
+    if (!authToken) return;
+    fetch("/info", controller ? { signal: controller.signal } : undefined).then(function (res) {
+      if (!lifecycle.finishAuth(authEpoch, authToken)) return;
+      if (!lifecycle.canProceed(authEpoch)) return;
       if (res.status === 401) {
         location.reload();
         return;
       }
       connect();
     }).catch(function () {
-      // Server still down, try connecting anyway
-      connect();
+      var authFinished = lifecycle.finishAuth(authEpoch, authToken);
+      if (authFinished && lifecycle.canProceed(authEpoch)) connect();
     });
-  }, reconnectDelay);
-  reconnectDelay = Math.min(reconnectDelay * 1.5, 10000);
+  });
 }