From 64df33b684a0d309427cd606176576100ed23944 Mon Sep 17 00:00:00 2001
From: "Marco A. Nina Mena" <marco.antonio.nina@processmaker.com>
Date: Wed, 21 Jan 2026 08:53:28 -0400
Subject: [PATCH 01/10] Implement session synchronization and timeout
 management in bootstrap.js; enhance Session.vue to utilize session state
 updates and warnings. This includes adding BroadcastChannel support for
 session events, localStorage management for session state, and integrating
 session renewal logic in the Session component.

---
 resources/js/bootstrap.js           | 373 ++++++++++++++++++++++++++--
 resources/js/components/Session.vue |  16 +-
 2 files changed, 364 insertions(+), 25 deletions(-)

diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 1a11555dbb..3feea40970 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -351,36 +351,361 @@ if (window.Processmaker && window.Processmaker.broadcasting) {
 
 if (userID) {
   // Session timeout
+  const sessionChannelName = "pm-session-sync";
+  const sessionLeaderKey = "pm:session:leader";
+  const sessionStateKey = "pm:session:state";
+  const sessionWarningKey = "pm:session:warning";
+  const sessionMessageKey = "pm:session:message";
+  const sessionTabId = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+  const leaderHeartbeatMs = 4000;
+  const leaderTtlMs = 8000;
+  const sessionDebugEnabled = localStorage.getItem("pm:session:debug") === "1";
+  const sessionDebugLog = (...args) => {
+    if (sessionDebugEnabled && !isProd) {
+      console.info("[SessionSync]", `[tab:${sessionTabId}]`, ...args);
+    }
+  };
+
   const timeoutScript = document.head.querySelector("meta[name=\"timeout-worker\"]")?.content;
   window.ProcessMaker.AccountTimeoutLength = parseInt(eval(document.head.querySelector("meta[name=\"timeout-length\"]")?.content));
-  window.ProcessMaker.AccountTimeoutWarnSeconds = parseInt(document.head.querySelector("meta[name=\"timeout-warn-seconds\"]")?.content);
+  const warnSeconds = parseInt(document.head.querySelector("meta[name=\"timeout-warn-seconds\"]")?.content);
+  window.ProcessMaker.AccountTimeoutWarnSeconds = Number.isNaN(warnSeconds) ? 0 : warnSeconds;
+  window.ProcessMaker.AccountTimeoutWarnMinutes = window.ProcessMaker.AccountTimeoutWarnSeconds / 60;
   window.ProcessMaker.AccountTimeoutEnabled = document.head.querySelector("meta[name=\"timeout-enabled\"]") ? parseInt(document.head.querySelector("meta[name=\"timeout-enabled\"]")?.content) : 1;
+  sessionDebugLog("worker:init", { timeoutScript });
   window.ProcessMaker.AccountTimeoutWorker = new Worker(timeoutScript);
+  sessionDebugLog("worker:created");
+
+  const readStorageJson = (key) => {
+    try {
+      const raw = localStorage.getItem(key);
+      return raw ? JSON.parse(raw) : null;
+    } catch (error) {
+      return null;
+    }
+  };
 
-  const payloadAccountTimeoutWorker = {
+  const writeStorageJson = (key, value) => {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      // ignore storage failures (private mode or disabled)
+    }
+  };
+
+  const removeStorageKey = (key) => {
+    try {
+      localStorage.removeItem(key);
+    } catch (error) {
+      // ignore storage failures (private mode or disabled)
+    }
+  };
+
+  let sessionState = {
     timeout: window.ProcessMaker.AccountTimeoutLength,
-    warnSeconds: window.ProcessMaker.AccountTimeoutWarnSeconds,
-    enabled: window.ProcessMaker.AccountTimeoutEnabled,
+    startedAt: Date.now(),
+  };
+
+  const refreshSessionStateFromStorage = () => {
+    const storedSessionState = readStorageJson(sessionStateKey);
+    if (storedSessionState?.timeout && storedSessionState?.startedAt) {
+      const storedTimeout = Number(storedSessionState.timeout);
+      const storedStartedAt = Number(storedSessionState.startedAt);
+      const elapsedMinutes = (Date.now() - storedStartedAt) / 60000;
+      if (storedTimeout > 0 && elapsedMinutes < storedTimeout) {
+        sessionState = storedSessionState;
+      } else {
+        sessionDebugLog("session-state:stale", { storedSessionState, elapsedMinutes });
+        writeStorageJson(sessionStateKey, sessionState);
+      }
+    } else {
+      writeStorageJson(sessionStateKey, sessionState);
+    }
+    sessionDebugLog("session-state:refresh", sessionState);
+    return sessionState;
+  };
+
+  refreshSessionStateFromStorage();
+
+  const setSessionState = (timeoutSeconds) => {
+    sessionState = {
+      timeout: timeoutSeconds,
+      startedAt: Date.now(),
+    };
+    writeStorageJson(sessionStateKey, sessionState);
+    sessionDebugLog("session-state", sessionState);
+  };
+
+  let warningState = readStorageJson(sessionWarningKey);
+
+  const refreshWarningStateFromStorage = () => {
+    const storedWarningState = readStorageJson(sessionWarningKey);
+    if (storedWarningState?.time && storedWarningState?.ts) {
+      warningState = storedWarningState;
+    } else {
+      warningState = null;
+    }
+    sessionDebugLog("warning-state:refresh", warningState);
+    return warningState;
+  };
+
+  const setWarningState = (timeSeconds) => {
+    warningState = {
+      time: timeSeconds,
+      ts: Date.now(),
+    };
+    writeStorageJson(sessionWarningKey, warningState);
+    sessionDebugLog("warning-state:set", warningState);
+  };
+
+  const clearWarningState = () => {
+    warningState = null;
+    removeStorageKey(sessionWarningKey);
+    sessionDebugLog("warning-state:clear");
+  };
+
+  const sessionChannel = "BroadcastChannel" in window ? new BroadcastChannel(sessionChannelName) : null;
+
+  const broadcastSessionEvent = (type, data = {}) => {
+    const message = {
+      id: `${sessionTabId}-${Date.now()}`,
+      type,
+      data,
+      from: sessionTabId,
+      ts: Date.now(),
+    };
+
+    sessionDebugLog("broadcast", message);
+    writeStorageJson(sessionMessageKey, message);
+    if (sessionChannel) {
+      sessionChannel.postMessage(message);
+    } else {
+      // storage already written above
+    }
+  };
+
+  const getLeader = () => readStorageJson(sessionLeaderKey);
+
+  const writeLeader = () => {
+    writeStorageJson(sessionLeaderKey, {
+      tabId: sessionTabId,
+      ts: Date.now(),
+    });
+    sessionDebugLog("leader:claim", { tabId: sessionTabId });
+  };
+
+  const isLeader = () => {
+    const leader = getLeader();
+    return document.visibilityState === "visible"
+      && !!leader
+      && leader.tabId === sessionTabId
+      && Date.now() - leader.ts < leaderTtlMs;
+  };
+
+  let workerStarted = false;
+  const ensureWorkerRunning = (reason) => {
+    if (workerStarted) {
+      return;
+    }
+    workerStarted = true;
+    refreshSessionStateFromStorage();
+    refreshWarningStateFromStorage();
+    sessionDebugLog("worker:ensure", { reason, sessionState });
+    startTimeoutWorker(sessionState.timeout);
+    showWarningIfActive();
+  };
+
+  const markActivity = (source) => {
+    const timeout = window.ProcessMaker.AccountTimeoutLength;
+    setSessionState(timeout);
+    clearWarningState();
+    broadcastSessionEvent("activity", { timeout, source });
+    sessionDebugLog("activity", { source, timeout });
+    if (isLeader()) {
+      ensureWorkerRunning(`activity:${source}`);
+    }
+  };
+
+  const getRemainingTimeout = (timeoutMinutes) => {
+    const elapsedMinutes = (Date.now() - sessionState.startedAt) / 60000;
+    const remaining = timeoutMinutes - elapsedMinutes;
+    return Math.max(0, remaining);
+  };
+
+  const getRemainingWarningTime = () => {
+    if (!warningState?.time || !warningState?.ts) {
+      return 0;
+    }
+    const elapsedSeconds = Math.floor((Date.now() - warningState.ts) / 1000);
+    return Math.max(0, warningState.time - elapsedSeconds);
+  };
+
+  const startTimeoutWorker = (timeoutSeconds) => {
+    const remaining = getRemainingTimeout(timeoutSeconds);
+    sessionDebugLog("worker:start", { timeoutSeconds, remaining });
+    if (remaining <= 0) {
+      broadcastSessionEvent("expired");
+      window.location = "/logout?timeout=true";
+      return;
+    }
+
+    window.ProcessMaker.AccountTimeoutWorker.postMessage({
+      method: "start",
+      data: {
+        timeout: remaining,
+        warnSeconds: window.ProcessMaker.AccountTimeoutWarnSeconds,
+        enabled: window.ProcessMaker.AccountTimeoutEnabled,
+      },
+    });
+  };
+
+  const handleSessionMessage = (message) => {
+    if (!message || message.from === sessionTabId) {
+      return;
+    }
+
+    sessionDebugLog("receive", message);
+    if (message.type === "warning") {
+      const time = Number(message.data?.time);
+      if (time) {
+        setWarningState(time);
+      }
+      if (!isLeader() && window.ProcessMaker.closeSessionModal) {
+        window.ProcessMaker.closeSessionModal();
+      }
+      return;
+    }
+
+    if (message.type === "renewed" || message.type === "started" || message.type === "activity") {
+      const timeout = Number(message.data?.timeout) || window.ProcessMaker.AccountTimeoutLength;
+      clearWarningState();
+      setSessionState(timeout);
+      if (window.ProcessMaker.closeSessionModal) {
+        window.ProcessMaker.closeSessionModal();
+      }
+      if (isLeader()) {
+        startTimeoutWorker(timeout);
+      }
+      return;
+    }
+
+    if (message.type === "expired") {
+      clearWarningState();
+      window.location = "/logout?timeout=true";
+    }
+  };
+
+  if (sessionChannel) {
+    sessionChannel.onmessage = (event) => handleSessionMessage(event.data);
+  }
+
+  window.addEventListener("storage", (event) => {
+    if (event.key !== sessionMessageKey || !event.newValue) {
+      return;
+    }
+
+    handleSessionMessage(readStorageJson(sessionMessageKey));
+  });
+
+  window.ProcessMaker.sessionSync = {
+    broadcast: broadcastSessionEvent,
+    isLeader,
+    setSessionState,
+    clearWarningState,
   };
 
   window.ProcessMaker.AccountTimeoutWorker.onmessage = (e) => {
+    if (!isLeader()) {
+      return;
+    }
+
     if (e.data.method === "countdown") {
+      sessionDebugLog("worker:countdown", e.data.data);
+      setWarningState(e.data.data.time);
       window.ProcessMaker.sessionModal(
         "Session Warning",
         "<p>Your user session is expiring. If your session expires, all of your unsaved data will be lost.</p><p>Would you like to stay connected?</p>",
         e.data.data.time,
         window.ProcessMaker.AccountTimeoutWarnSeconds,
       );
+      broadcastSessionEvent("warning", { time: e.data.data.time });
     }
     if (e.data.method === "timedOut") {
+      sessionDebugLog("worker:timedOut");
+      refreshSessionStateFromStorage();
+      const remaining = getRemainingTimeout(sessionState.timeout);
+      sessionDebugLog("worker:timedOut:check", { remaining, sessionState });
+      if (remaining > 0) {
+        startTimeoutWorker(sessionState.timeout);
+        return;
+      }
+      clearWarningState();
+      broadcastSessionEvent("expired");
       window.location = "/logout?timeout=true";
     }
   };
 
+  const showWarningIfActive = () => {
+    const remainingTime = getRemainingWarningTime();
+    if (remainingTime <= 0) {
+      sessionDebugLog("warning:skip", { remainingTime });
+      clearWarningState();
+      return;
+    }
+    sessionDebugLog("warning:show", { remainingTime });
+    window.ProcessMaker.sessionModal(
+      "Session Warning",
+      "<p>Your user session is expiring. If your session expires, all of your unsaved data will be lost.</p><p>Would you like to stay connected?</p>",
+      remainingTime,
+      window.ProcessMaker.AccountTimeoutWarnSeconds,
+    );
+  };
+
   // in some cases it's necessary to start manually
-  window.ProcessMaker.AccountTimeoutWorker.postMessage({
-    method: "start",
-    data: payloadAccountTimeoutWorker,
+  let wasLeader = false;
+  const updateLeadership = () => {
+    const leader = getLeader();
+    const now = Date.now();
+    const isVisible = document.visibilityState === "visible";
+    sessionDebugLog("leader:check", {
+      isVisible,
+      leader,
+      now,
+    });
+    if (isVisible) {
+      writeLeader();
+    }
+
+    const leaderNow = isLeader();
+    if (leaderNow) {
+      ensureWorkerRunning("leadership");
+    }
+    if (leaderNow !== wasLeader) {
+      wasLeader = leaderNow;
+      sessionDebugLog("leader:changed", { isLeader: leaderNow });
+      if (leaderNow) {
+        ensureWorkerRunning("leadership-change");
+      } else if (window.ProcessMaker.closeSessionModal) {
+        workerStarted = false;
+        window.ProcessMaker.closeSessionModal();
+      }
+    }
+  };
+
+  updateLeadership();
+  if (isLeader()) {
+    markActivity("load");
+    ensureWorkerRunning("load");
+  }
+  setInterval(updateLeadership, leaderHeartbeatMs);
+  window.addEventListener("visibilitychange", () => {
+    updateLeadership();
+    if (isLeader()) {
+      refreshSessionStateFromStorage();
+      refreshWarningStateFromStorage();
+      startTimeoutWorker(sessionState.timeout);
+      showWarningIfActive();
+    }
   });
 
   // Restart the timeout worker (when the user interacts with the page)
@@ -388,9 +713,13 @@ if (userID) {
 
   eventsTimeoutWorker.forEach((event) => {
     document.addEventListener(event, () => {
-      window.ProcessMaker.AccountTimeoutWorker.postMessage({
-        method: "restart",
-      });
+      if (!isLeader()) {
+        sessionDebugLog("worker:restart:skip", { event });
+        return;
+      }
+      markActivity(event);
+      sessionDebugLog("worker:restart", { event });
+      window.ProcessMaker.AccountTimeoutWorker.postMessage({ method: "restart" });
     });
   });
 
@@ -408,18 +737,18 @@ if (userID) {
     })
     .listen(".SessionStarted", (e) => {
       const lifetime = parseInt(eval(e.lifetime));
-      if (isSameDevice(e)) {
-        window.ProcessMaker.AccountTimeoutWorker.postMessage({
-          method: "start",
-          data: {
-            timeout: lifetime,
-            warnSeconds: window.ProcessMaker.AccountTimeoutWarnSeconds,
-            enabled: window.ProcessMaker.AccountTimeoutEnabled,
-          },
-        });
-        if (window.ProcessMaker.closeSessionModal) {
-          window.ProcessMaker.closeSessionModal();
-        }
+      if (!isSameDevice(e)) {
+        return;
+      }
+
+      sessionDebugLog("event:session-started", { lifetime });
+      setSessionState(lifetime);
+      broadcastSessionEvent("started", { timeout: lifetime });
+      if (window.ProcessMaker.closeSessionModal) {
+        window.ProcessMaker.closeSessionModal();
+      }
+      if (isLeader()) {
+        startTimeoutWorker(lifetime);
       }
     })
     .listen(".Logout", (e) => {
diff --git a/resources/js/components/Session.vue b/resources/js/components/Session.vue
index d6a66ffd9c..51230553fe 100644
--- a/resources/js/components/Session.vue
+++ b/resources/js/components/Session.vue
@@ -8,7 +8,7 @@
     centered
     no-close-button
   >
-    <template #modal-header="{ close }">
+    <template #modal-header>
       <h5>{{ title }}</h5>
     </template>
     <span v-html="message" />
@@ -84,12 +84,22 @@ export default {
         .post("/keep-alive", {}, { baseURL: "" })
         .then(() => {
           this.disabled = false;
+          const timeout = window.ProcessMaker.AccountTimeoutLength;
+          if (window.ProcessMaker.sessionSync?.setSessionState) {
+            window.ProcessMaker.sessionSync.setSessionState(timeout);
+          }
+          if (window.ProcessMaker.sessionSync?.clearWarningState) {
+            window.ProcessMaker.sessionSync.clearWarningState();
+          }
+          if (window.ProcessMaker.sessionSync?.broadcast) {
+            window.ProcessMaker.sessionSync.broadcast("renewed", { timeout });
+          }
           // If reponse is correct, the timer is started again.
-          if (typeof window.ProcessMaker.AccountTimeoutWorker !== 'undefined') {
+          if (window.ProcessMaker.sessionSync?.isLeader?.() && typeof window.ProcessMaker.AccountTimeoutWorker !== "undefined") {
             window.ProcessMaker.AccountTimeoutWorker.postMessage({
               method: "start",
               data: {
-                timeout: window.ProcessMaker.AccountTimeoutLength,
+                timeout,
                 warnSeconds: window.ProcessMaker.AccountTimeoutWarnSeconds,
                 enabled: window.ProcessMaker.AccountTimeoutEnabled,
               },

From 91dca6c92e352d9ac6b5369274ec8d2ce46ca4d0 Mon Sep 17 00:00:00 2001
From: "Marco A. Nina Mena" <marco.antonio.nina@processmaker.com>
Date: Wed, 21 Jan 2026 09:18:24 -0400
Subject: [PATCH 02/10] Enhance session management by adding clearWarningState
 invocation in bootstrap.js; update Session.vue to handle session expiration
 and logout functionality with improved button interactions. Modify session.js
 to ensure proper handling of timeout warning seconds.

---
 resources/js/bootstrap.js           |  1 +
 resources/js/components/Session.vue | 29 +++++++++++++++++++++++++----
 resources/js/next/config/session.js |  3 ++-
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 3feea40970..1df704bc06 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -743,6 +743,7 @@ if (userID) {
 
       sessionDebugLog("event:session-started", { lifetime });
       setSessionState(lifetime);
+      clearWarningState();
       broadcastSessionEvent("started", { timeout: lifetime });
       if (window.ProcessMaker.closeSessionModal) {
         window.ProcessMaker.closeSessionModal();
diff --git a/resources/js/components/Session.vue b/resources/js/components/Session.vue
index 51230553fe..7a2848ea44 100644
--- a/resources/js/components/Session.vue
+++ b/resources/js/components/Session.vue
@@ -25,12 +25,14 @@
       </div>
     </div>
     <template #modal-footer>
-      <a
-        role="button"
+      <button
+        type="button"
         class="btn btn-outline-secondary ml-2"
-        href="/logout"
         :disabled="disabled"
-      >{{ ('LogOut') }}</a>
+        @click="logoutNow"
+      >
+        {{ ('LogOut') }}
+      </button>
       <button
         type="button"
         class="btn btn-secondary ml-2"
@@ -108,10 +110,29 @@ export default {
           this.onClose();
         })
         .catch((error) => {
+          const status = error?.response?.status;
+          if (status === 401 || status === 419) {
+            this.broadcastExpired();
+            window.location.href = "/logout";
+            return;
+          }
           this.disabled = false;
           this.errors = error.response.data.errors;
         });
     },
+    broadcastExpired() {
+      if (window.ProcessMaker.sessionSync?.clearWarningState) {
+        window.ProcessMaker.sessionSync.clearWarningState();
+      }
+      if (window.ProcessMaker.sessionSync?.broadcast) {
+        window.ProcessMaker.sessionSync.broadcast("expired");
+      }
+    },
+    logoutNow() {
+      this.disabled = true;
+      this.broadcastExpired();
+      window.location.href = "/logout";
+    },
   },
 };
 </script>
diff --git a/resources/js/next/config/session.js b/resources/js/next/config/session.js
index 86d35bba19..7a58fe84a1 100644
--- a/resources/js/next/config/session.js
+++ b/resources/js/next/config/session.js
@@ -20,7 +20,8 @@ export default () => {
   if (user) {
   // Session timeout
     const AccountTimeoutLength = parseInt(eval(document.head.querySelector("meta[name=\"timeout-length\"]")?.content));
-    const AccountTimeoutWarnSeconds = parseInt(document.head.querySelector("meta[name=\"timeout-warn-seconds\"]")?.content);
+    const warnSeconds = parseInt(document.head.querySelector("meta[name=\"timeout-warn-seconds\"]")?.content);
+    const AccountTimeoutWarnSeconds = Number.isNaN(warnSeconds) ? 0 : warnSeconds;
     const AccountTimeoutEnabled = document.head.querySelector("meta[name=\"timeout-enabled\"]") ? parseInt(document.head.querySelector("meta[name=\"timeout-enabled\"]")?.content) : 1;
     const AccountTimeoutWorker = new Worker(timeoutScript);
 

From e9b337ab40be6c27d8b766e3009212d0fe4027e3 Mon Sep 17 00:00:00 2001
From: "Marco A. Nina Mena" <marco.antonio.nina@processmaker.com>
Date: Wed, 21 Jan 2026 09:56:38 -0400
Subject: [PATCH 03/10] This improves robustness and user experience during
 session timeouts.

---
 resources/js/bootstrap.js | 42 ++++++++++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 1df704bc06..0fdf449572 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -622,12 +622,14 @@ if (userID) {
     if (e.data.method === "countdown") {
       sessionDebugLog("worker:countdown", e.data.data);
       setWarningState(e.data.data.time);
-      window.ProcessMaker.sessionModal(
-        "Session Warning",
-        "<p>Your user session is expiring. If your session expires, all of your unsaved data will be lost.</p><p>Would you like to stay connected?</p>",
-        e.data.data.time,
-        window.ProcessMaker.AccountTimeoutWarnSeconds,
-      );
+      if (typeof window.ProcessMaker.sessionModal === "function") {
+        window.ProcessMaker.sessionModal(
+          "Session Warning",
+          "<p>Your user session is expiring. If your session expires, all of your unsaved data will be lost.</p><p>Would you like to stay connected?</p>",
+          e.data.data.time,
+          window.ProcessMaker.AccountTimeoutWarnSeconds,
+        );
+      }
       broadcastSessionEvent("warning", { time: e.data.data.time });
     }
     if (e.data.method === "timedOut") {
@@ -653,12 +655,14 @@ if (userID) {
       return;
     }
     sessionDebugLog("warning:show", { remainingTime });
-    window.ProcessMaker.sessionModal(
-      "Session Warning",
-      "<p>Your user session is expiring. If your session expires, all of your unsaved data will be lost.</p><p>Would you like to stay connected?</p>",
-      remainingTime,
-      window.ProcessMaker.AccountTimeoutWarnSeconds,
-    );
+    if (typeof window.ProcessMaker.sessionModal === "function") {
+      window.ProcessMaker.sessionModal(
+        "Session Warning",
+        "<p>Your user session is expiring. If your session expires, all of your unsaved data will be lost.</p><p>Would you like to stay connected?</p>",
+        remainingTime,
+        window.ProcessMaker.AccountTimeoutWarnSeconds,
+      );
+    }
   };
 
   // in some cases it's necessary to start manually
@@ -708,6 +712,20 @@ if (userID) {
     }
   });
 
+  // Broadcast logout so all tabs close warning and redirect.
+  document.addEventListener("click", (event) => {
+    const logoutLink = event.target.closest('a[href="/logout"], a[href^="/logout?"]');
+    if (!logoutLink) {
+      return;
+    }
+    if (window.ProcessMaker.sessionSync?.clearWarningState) {
+      window.ProcessMaker.sessionSync.clearWarningState();
+    }
+    if (window.ProcessMaker.sessionSync?.broadcast) {
+      window.ProcessMaker.sessionSync.broadcast("expired");
+    }
+  });
+
   // Restart the timeout worker (when the user interacts with the page)
   const eventsTimeoutWorker = ["click", "keypress"];
 

From c15212e9ec1d6119b5c3dd4337810bca916d2407 Mon Sep 17 00:00:00 2001
From: "Marco A. Nina Mena" <marco.antonio.nina@processmaker.com>
Date: Wed, 21 Jan 2026 10:07:16 -0400
Subject: [PATCH 04/10] add comments

---
 resources/js/bootstrap.js           | 5 +++++
 resources/js/components/Session.vue | 3 +++
 resources/js/next/config/session.js | 5 ++++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 0fdf449572..e703299090 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -368,6 +368,7 @@ if (userID) {
 
   const timeoutScript = document.head.querySelector("meta[name=\"timeout-worker\"]")?.content;
   window.ProcessMaker.AccountTimeoutLength = parseInt(eval(document.head.querySelector("meta[name=\"timeout-length\"]")?.content));
+  // Server config provides warn seconds; convert to minutes for session math.
   const warnSeconds = parseInt(document.head.querySelector("meta[name=\"timeout-warn-seconds\"]")?.content);
   window.ProcessMaker.AccountTimeoutWarnSeconds = Number.isNaN(warnSeconds) ? 0 : warnSeconds;
   window.ProcessMaker.AccountTimeoutWarnMinutes = window.ProcessMaker.AccountTimeoutWarnSeconds / 60;
@@ -622,6 +623,7 @@ if (userID) {
     if (e.data.method === "countdown") {
       sessionDebugLog("worker:countdown", e.data.data);
       setWarningState(e.data.data.time);
+      // Guard for layouts that don't include the session modal.
       if (typeof window.ProcessMaker.sessionModal === "function") {
         window.ProcessMaker.sessionModal(
           "Session Warning",
@@ -655,6 +657,7 @@ if (userID) {
       return;
     }
     sessionDebugLog("warning:show", { remainingTime });
+    // Guard for layouts that don't include the session modal.
     if (typeof window.ProcessMaker.sessionModal === "function") {
       window.ProcessMaker.sessionModal(
         "Session Warning",
@@ -705,6 +708,7 @@ if (userID) {
   window.addEventListener("visibilitychange", () => {
     updateLeadership();
     if (isLeader()) {
+      // Keep warning/timer state in sync when switching tabs.
       refreshSessionStateFromStorage();
       refreshWarningStateFromStorage();
       startTimeoutWorker(sessionState.timeout);
@@ -761,6 +765,7 @@ if (userID) {
 
       sessionDebugLog("event:session-started", { lifetime });
       setSessionState(lifetime);
+      // Clear any stale warning on new login/session.
       clearWarningState();
       broadcastSessionEvent("started", { timeout: lifetime });
       if (window.ProcessMaker.closeSessionModal) {
diff --git a/resources/js/components/Session.vue b/resources/js/components/Session.vue
index 7a2848ea44..8ed6110711 100644
--- a/resources/js/components/Session.vue
+++ b/resources/js/components/Session.vue
@@ -112,6 +112,7 @@ export default {
         .catch((error) => {
           const status = error?.response?.status;
           if (status === 401 || status === 419) {
+            // Session expired server-side; broadcast and redirect.
             this.broadcastExpired();
             window.location.href = "/logout";
             return;
@@ -121,6 +122,7 @@ export default {
         });
     },
     broadcastExpired() {
+      // Sync logout state across tabs.
       if (window.ProcessMaker.sessionSync?.clearWarningState) {
         window.ProcessMaker.sessionSync.clearWarningState();
       }
@@ -129,6 +131,7 @@ export default {
       }
     },
     logoutNow() {
+      // Ensure other tabs close warning before redirect.
       this.disabled = true;
       this.broadcastExpired();
       window.location.href = "/logout";
diff --git a/resources/js/next/config/session.js b/resources/js/next/config/session.js
index 7a58fe84a1..56ef0f2bc9 100644
--- a/resources/js/next/config/session.js
+++ b/resources/js/next/config/session.js
@@ -19,6 +19,7 @@ export default () => {
 
   if (user) {
   // Session timeout
+    // Backend provides minutes for lifetime and seconds for warnings.
     const AccountTimeoutLength = parseInt(eval(document.head.querySelector("meta[name=\"timeout-length\"]")?.content));
     const warnSeconds = parseInt(document.head.querySelector("meta[name=\"timeout-warn-seconds\"]")?.content);
     const AccountTimeoutWarnSeconds = Number.isNaN(warnSeconds) ? 0 : warnSeconds;
@@ -28,6 +29,7 @@ export default () => {
     AccountTimeoutWorker.addEventListener("message", (e) => {
       const sessionModal = getGlobalPMVariable("sessionModal");
       if (e.data.method === "countdown") {
+        // Show countdown modal when the worker hits the warning threshold.
         sessionModal(
           "Session Warning",
           "<p>Your user session is expiring. If your session expires, all of your unsaved data will be lost.</p><p>Would you like to stay connected?</p>",
@@ -40,7 +42,7 @@ export default () => {
       }
     });
 
-    // in some cases it's necessary to start manually
+    // Start the timer for the initial page load.
     AccountTimeoutWorker.postMessage({
       method: "start",
       data: {
@@ -57,6 +59,7 @@ export default () => {
       .listen(".SessionStarted", (e) => {
         const lifetime = parseInt(eval(e.lifetime));
         if (isSameDevice(e)) {
+          // Reset the worker when the server renews the session.
           AccountTimeoutWorker.postMessage({
             method: "start",
             data: {

From 34380275d4846c6bd30d90ebdd2b7df67fdc3093 Mon Sep 17 00:00:00 2001
From: "Marco A. Nina Mena" <marco.antonio.nina@processmaker.com>
Date: Wed, 21 Jan 2026 16:49:07 -0400
Subject: [PATCH 05/10] add loader

---
 resources/js/app-layout.js               |  2 +
 resources/js/bootstrap.js                | 40 +++++++++++++++
 resources/js/components/Session.vue      | 64 ++++++++++++++++++------
 resources/js/next/layout/navbar.js       |  2 +
 resources/views/layouts/navbar.blade.php |  2 +-
 5 files changed, 95 insertions(+), 15 deletions(-)

diff --git a/resources/js/app-layout.js b/resources/js/app-layout.js
index abf887d29b..8ed8c235fe 100644
--- a/resources/js/app-layout.js
+++ b/resources/js/app-layout.js
@@ -138,6 +138,7 @@ window.ProcessMaker.navbar = new Vue({
       sessionMessage: "",
       sessionTime: "",
       sessionWarnSeconds: "",
+      sessionIsRenewing: false,
       taskTitle: "",
       isMobile: false,
       isMobileDevice: window.ProcessMaker.mobileApp,
@@ -288,6 +289,7 @@ window.ProcessMaker.sessionModal = function (title, message, time, warnSeconds)
 
 window.ProcessMaker.closeSessionModal = function () {
   ProcessMaker.navbar.sessionShow = false;
+  ProcessMaker.navbar.sessionIsRenewing = false;
 };
 
 // Set out own specific confirm modal.
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index e703299090..dba9de88a2 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -355,6 +355,8 @@ if (userID) {
   const sessionLeaderKey = "pm:session:leader";
   const sessionStateKey = "pm:session:state";
   const sessionWarningKey = "pm:session:warning";
+  // Track keep-alive progress across tabs.
+  const sessionRenewingKey = "pm:session:renewing";
   const sessionMessageKey = "pm:session:message";
   const sessionTabId = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
   const leaderHeartbeatMs = 4000;
@@ -438,6 +440,7 @@ if (userID) {
   };
 
   let warningState = readStorageJson(sessionWarningKey);
+  let renewingState = readStorageJson(sessionRenewingKey);
 
   const refreshWarningStateFromStorage = () => {
     const storedWarningState = readStorageJson(sessionWarningKey);
@@ -465,6 +468,34 @@ if (userID) {
     sessionDebugLog("warning-state:clear");
   };
 
+  const syncRenewingUi = () => {
+    // Only update if the navbar component exists in this layout.
+    if (window.ProcessMaker.navbar) {
+      window.ProcessMaker.navbar.sessionIsRenewing = !!renewingState;
+    }
+  };
+
+  const refreshRenewingStateFromStorage = () => {
+    const storedRenewingState = readStorageJson(sessionRenewingKey);
+    renewingState = storedRenewingState?.isRenewing ? storedRenewingState : null;
+    syncRenewingUi();
+    return renewingState;
+  };
+
+  const setRenewingState = (isRenewing) => {
+    if (isRenewing) {
+      renewingState = {
+        isRenewing: true,
+        ts: Date.now(),
+      };
+      writeStorageJson(sessionRenewingKey, renewingState);
+    } else {
+      renewingState = null;
+      removeStorageKey(sessionRenewingKey);
+    }
+    syncRenewingUi();
+  };
+
   const sessionChannel = "BroadcastChannel" in window ? new BroadcastChannel(sessionChannelName) : null;
 
   const broadcastSessionEvent = (type, data = {}) => {
@@ -577,9 +608,15 @@ if (userID) {
       return;
     }
 
+    if (message.type === "renewing") {
+      setRenewingState(!!message.data?.isRenewing);
+      return;
+    }
+
     if (message.type === "renewed" || message.type === "started" || message.type === "activity") {
       const timeout = Number(message.data?.timeout) || window.ProcessMaker.AccountTimeoutLength;
       clearWarningState();
+      setRenewingState(false);
       setSessionState(timeout);
       if (window.ProcessMaker.closeSessionModal) {
         window.ProcessMaker.closeSessionModal();
@@ -592,6 +629,7 @@ if (userID) {
 
     if (message.type === "expired") {
       clearWarningState();
+      setRenewingState(false);
       window.location = "/logout?timeout=true";
     }
   };
@@ -654,8 +692,10 @@ if (userID) {
     if (remainingTime <= 0) {
       sessionDebugLog("warning:skip", { remainingTime });
       clearWarningState();
+      setRenewingState(false);
       return;
     }
+    refreshRenewingStateFromStorage();
     sessionDebugLog("warning:show", { remainingTime });
     // Guard for layouts that don't include the session modal.
     if (typeof window.ProcessMaker.sessionModal === "function") {
diff --git a/resources/js/components/Session.vue b/resources/js/components/Session.vue
index 8ed6110711..c817318cfb 100644
--- a/resources/js/components/Session.vue
+++ b/resources/js/components/Session.vue
@@ -11,32 +11,46 @@
     <template #modal-header>
       <h5>{{ title }}</h5>
     </template>
-    <span v-html="message" />
-    <div class="progress">
-      <div
-        class="progress-bar progress-bar-striped"
-        role="progressbar"
-        :style="{width: percentage + '%'}"
-      >
-        <span
-          align="left"
-          class="pl-2"
-        >{{ moment().startOf('day').seconds(time).format('mm:ss') }}</span>
+    <div v-if="!isProcessing">
+      <span v-html="message" />
+      <div class="progress">
+        <div
+          class="progress-bar progress-bar-striped"
+          role="progressbar"
+          :style="{width: percentage + '%'}"
+        >
+          <span
+            align="left"
+            class="pl-2"
+          >{{ moment().startOf('day').seconds(time).format('mm:ss') }}</span>
+        </div>
       </div>
     </div>
+    <div
+      v-else
+      class="d-flex align-items-center justify-content-center py-3"
+    >
+      <output
+        class="spinner-border spinner-border-sm mr-2"
+        aria-live="polite"
+      />
+      <span>{{ ("Processing...") }}</span>
+    </div>
     <template #modal-footer>
       <button
+        v-if="!isProcessing"
         type="button"
         class="btn btn-outline-secondary ml-2"
-        :disabled="disabled"
+        :disabled="isBusy"
         @click="logoutNow"
       >
         {{ ('LogOut') }}
       </button>
       <button
+        v-if="!isProcessing"
         type="button"
         class="btn btn-secondary ml-2"
-        :disabled="disabled"
+        :disabled="isBusy"
         @click="keepAlive"
       >
         {{ ('Stay Connected') }}
@@ -48,14 +62,24 @@
 <script>
 
 export default {
-  props: ["title", "message", "time", "warnSeconds", "shown"],
+  props: ["title", "message", "time", "warnSeconds", "shown", "isRenewing"],
   data() {
     return {
       errors: {},
       disabled: false,
+      localRenewing: false,
     };
   },
   computed: {
+    isRenewingEffective() {
+      return this.localRenewing || this.isRenewing;
+    },
+    isProcessing() {
+      return this.isRenewingEffective;
+    },
+    isBusy() {
+      return this.disabled || this.isRenewingEffective;
+    },
     percentage() {
       if (this.time === "" || this.warnSeconds === "") {
         return 0;
@@ -81,11 +105,13 @@ export default {
     },
     keepAlive() {
       this.disabled = true;
+      this.setRenewingState(true);
 
       ProcessMaker.apiClient
         .post("/keep-alive", {}, { baseURL: "" })
         .then(() => {
           this.disabled = false;
+          this.setRenewingState(false);
           const timeout = window.ProcessMaker.AccountTimeoutLength;
           if (window.ProcessMaker.sessionSync?.setSessionState) {
             window.ProcessMaker.sessionSync.setSessionState(timeout);
@@ -113,14 +139,23 @@ export default {
           const status = error?.response?.status;
           if (status === 401 || status === 419) {
             // Session expired server-side; broadcast and redirect.
+            this.setRenewingState(false);
             this.broadcastExpired();
             window.location.href = "/logout";
             return;
           }
           this.disabled = false;
+          this.setRenewingState(false);
           this.errors = error.response.data.errors;
         });
     },
+    setRenewingState(isRenewing) {
+      this.localRenewing = isRenewing;
+      // Broadcast renewal status so other tabs show the spinner.
+      if (window.ProcessMaker.sessionSync?.broadcast) {
+        window.ProcessMaker.sessionSync.broadcast("renewing", { isRenewing });
+      }
+    },
     broadcastExpired() {
       // Sync logout state across tabs.
       if (window.ProcessMaker.sessionSync?.clearWarningState) {
@@ -133,6 +168,7 @@ export default {
     logoutNow() {
       // Ensure other tabs close warning before redirect.
       this.disabled = true;
+      this.setRenewingState(true);
       this.broadcastExpired();
       window.location.href = "/logout";
     },
diff --git a/resources/js/next/layout/navbar.js b/resources/js/next/layout/navbar.js
index 591e29d947..472eea99d7 100644
--- a/resources/js/next/layout/navbar.js
+++ b/resources/js/next/layout/navbar.js
@@ -63,6 +63,7 @@ const sessionModal = function (title, message, time, warnSeconds) {
 
 const closeSessionModal = function () {
   ProcessMaker.navbar.sessionShow = false;
+  ProcessMaker.navbar.sessionIsRenewing = false;
 };
 
 // Set out own specific confirm modal.
@@ -137,6 +138,7 @@ const navbar = new Vue({
       sessionMessage: "",
       sessionTime: "",
       sessionWarnSeconds: "",
+      sessionIsRenewing: false,
       taskTitle: "",
       isMobile: false,
       isMobileDevice: mobileApp,
diff --git a/resources/views/layouts/navbar.blade.php b/resources/views/layouts/navbar.blade.php
index 63a1665d71..9dec366129 100644
--- a/resources/views/layouts/navbar.blade.php
+++ b/resources/views/layouts/navbar.blade.php
@@ -30,7 +30,7 @@
                             :variant="messageVariant" :callback="messageCallback"
                             @close="messageShow=false">
         </message-modal>
-        <session-modal id="sessionModal" :shown="sessionShow" :title="sessionTitle" :message="sessionMessage" :time="sessionTime" :warn-seconds="sessionWarnSeconds"
+        <session-modal id="sessionModal" :shown="sessionShow" :title="sessionTitle" :message="sessionMessage" :time="sessionTime" :warn-seconds="sessionWarnSeconds" :is-renewing="sessionIsRenewing"
                 @close="sessionShow=false">
         </session-modal>
         <div v-if="alerts.length > 0" class="alert-wrapper">

From 2db9d6d2fca91efefedbca8293ffa6214ab773ba Mon Sep 17 00:00:00 2001
From: "Marco A. Nina Mena" <marco.antonio.nina@processmaker.com>
Date: Thu, 22 Jan 2026 10:45:02 -0400
Subject: [PATCH 06/10] Implement message deduplication logic in bootstrap.js
 to enhance session event handling;  improving performance and user experience
 during session management.

---
 resources/js/bootstrap.js | 64 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 56 insertions(+), 8 deletions(-)

diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index dba9de88a2..c2c5b4414c 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -497,6 +497,32 @@ if (userID) {
   };
 
   const sessionChannel = "BroadcastChannel" in window ? new BroadcastChannel(sessionChannelName) : null;
+  const recentMessageIds = new Map();
+  const recentMessageTtlMs = 5000;
+  const maxRecentMessageIds = 100;
+
+  const shouldSkipMessage = (message) => {
+    if (!message?.id) {
+      return false;
+    }
+    const now = Date.now();
+    const lastSeen = recentMessageIds.get(message.id);
+    if (lastSeen && now - lastSeen < recentMessageTtlMs) {
+      return true;
+    }
+    recentMessageIds.set(message.id, now);
+    if (recentMessageIds.size > maxRecentMessageIds) {
+      for (const [id, ts] of recentMessageIds) {
+        if (now - ts > recentMessageTtlMs) {
+          recentMessageIds.delete(id);
+        }
+        if (recentMessageIds.size <= maxRecentMessageIds) {
+          break;
+        }
+      }
+    }
+    return false;
+  };
 
   const broadcastSessionEvent = (type, data = {}) => {
     const message = {
@@ -595,21 +621,31 @@ if (userID) {
     if (!message || message.from === sessionTabId) {
       return;
     }
+    if (shouldSkipMessage(message)) {
+      return;
+    }
 
     sessionDebugLog("receive", message);
     if (message.type === "warning") {
       const time = Number(message.data?.time);
       if (time) {
         setWarningState(time);
-      }
-      if (!isLeader() && window.ProcessMaker.closeSessionModal) {
-        window.ProcessMaker.closeSessionModal();
+        if (document.visibilityState === "visible") {
+          showWarningIfActive();
+        }
       }
       return;
     }
 
     if (message.type === "renewing") {
-      setRenewingState(!!message.data?.isRenewing);
+      const isRenewing = !!message.data?.isRenewing;
+      setRenewingState(isRenewing);
+      if (isRenewing) {
+        clearWarningState();
+        if (window.ProcessMaker.closeSessionModal) {
+          window.ProcessMaker.closeSessionModal();
+        }
+      }
       return;
     }
 
@@ -692,10 +728,16 @@ if (userID) {
     if (remainingTime <= 0) {
       sessionDebugLog("warning:skip", { remainingTime });
       clearWarningState();
+      if (window.ProcessMaker.closeSessionModal) {
+        window.ProcessMaker.closeSessionModal();
+      }
       setRenewingState(false);
       return;
     }
     refreshRenewingStateFromStorage();
+    if (renewingState?.isRenewing) {
+      return;
+    }
     sessionDebugLog("warning:show", { remainingTime });
     // Guard for layouts that don't include the session modal.
     if (typeof window.ProcessMaker.sessionModal === "function") {
@@ -720,7 +762,12 @@ if (userID) {
       now,
     });
     if (isVisible) {
-      writeLeader();
+      const leaderExpired = !leader || (now - leader.ts >= leaderTtlMs);
+      if (leaderExpired || leader?.tabId === sessionTabId) {
+        writeLeader();
+      }
+      refreshWarningStateFromStorage();
+      showWarningIfActive();
     }
 
     const leaderNow = isLeader();
@@ -747,12 +794,13 @@ if (userID) {
   setInterval(updateLeadership, leaderHeartbeatMs);
   window.addEventListener("visibilitychange", () => {
     updateLeadership();
+    // Keep warning state in sync when switching tabs.
+    refreshWarningStateFromStorage();
+    showWarningIfActive();
     if (isLeader()) {
-      // Keep warning/timer state in sync when switching tabs.
+      // Only the leader drives the worker countdown.
       refreshSessionStateFromStorage();
-      refreshWarningStateFromStorage();
       startTimeoutWorker(sessionState.timeout);
-      showWarningIfActive();
     }
   });
 

From bd1e89cbd028fd515cc7d4191c8ff1d9bf680a16 Mon Sep 17 00:00:00 2001
From: "Marco A. Nina Mena" <marco.antonio.nina@processmaker.com>
Date: Thu, 22 Jan 2026 10:56:15 -0400
Subject: [PATCH 07/10] Enhance session management by adding manual logout
 handling in bootstrap.js and Session.vue; update broadcast logic to
 synchronize logout state across tabs, improving user experience during
 session termination.

---
 resources/js/bootstrap.js           | 10 ++++++++--
 resources/js/components/Session.vue | 13 +++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index c2c5b4414c..3445429ea0 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -663,6 +663,12 @@ if (userID) {
       return;
     }
 
+    if (message.type === "logout") {
+      clearWarningState();
+      setRenewingState(false);
+      window.location = "/logout";
+    }
+
     if (message.type === "expired") {
       clearWarningState();
       setRenewingState(false);
@@ -804,7 +810,7 @@ if (userID) {
     }
   });
 
-  // Broadcast logout so all tabs close warning and redirect.
+  // Broadcast manual logout so all tabs close warning and redirect.
   document.addEventListener("click", (event) => {
     const logoutLink = event.target.closest('a[href="/logout"], a[href^="/logout?"]');
     if (!logoutLink) {
@@ -814,7 +820,7 @@ if (userID) {
       window.ProcessMaker.sessionSync.clearWarningState();
     }
     if (window.ProcessMaker.sessionSync?.broadcast) {
-      window.ProcessMaker.sessionSync.broadcast("expired");
+      window.ProcessMaker.sessionSync.broadcast("logout");
     }
   });
 
diff --git a/resources/js/components/Session.vue b/resources/js/components/Session.vue
index c817318cfb..385a55c9e3 100644
--- a/resources/js/components/Session.vue
+++ b/resources/js/components/Session.vue
@@ -157,7 +157,7 @@ export default {
       }
     },
     broadcastExpired() {
-      // Sync logout state across tabs.
+      // Sync timeout state across tabs.
       if (window.ProcessMaker.sessionSync?.clearWarningState) {
         window.ProcessMaker.sessionSync.clearWarningState();
       }
@@ -165,11 +165,20 @@ export default {
         window.ProcessMaker.sessionSync.broadcast("expired");
       }
     },
+    broadcastLogout() {
+      // Sync manual logout state across tabs.
+      if (window.ProcessMaker.sessionSync?.clearWarningState) {
+        window.ProcessMaker.sessionSync.clearWarningState();
+      }
+      if (window.ProcessMaker.sessionSync?.broadcast) {
+        window.ProcessMaker.sessionSync.broadcast("logout");
+      }
+    },
     logoutNow() {
       // Ensure other tabs close warning before redirect.
       this.disabled = true;
       this.setRenewingState(true);
-      this.broadcastExpired();
+      this.broadcastLogout();
       window.location.href = "/logout";
     },
   },

From df25a80b39d8277df85878f86cdb7a1b0113141b Mon Sep 17 00:00:00 2001
From: "Marco A. Nina Mena" <marco.antonio.nina@processmaker.com>
Date: Thu, 22 Jan 2026 11:44:56 -0400
Subject: [PATCH 08/10] Add login in next/Session

---
 resources/js/bootstrap.js           | 561 ++--------------------------
 resources/js/common/sessionSync.js  | 560 +++++++++++++++++++++++++++
 resources/js/components/Session.vue |   8 +
 resources/js/next/config/session.js | 128 ++-----
 4 files changed, 632 insertions(+), 625 deletions(-)
 create mode 100644 resources/js/common/sessionSync.js

diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index 3445429ea0..cfecac649a 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -2,6 +2,7 @@ import "bootstrap-vue/dist/bootstrap-vue.css";
 import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
 import * as bootstrap from "bootstrap";
 import TenantAwareEcho from "./common/TenantAwareEcho";
+import { initSessionSync } from "./common/sessionSync";
 import Router from "vue-router";
 import ScreenBuilder, { initializeScreenCache } from "@processmaker/screen-builder";
 import * as VueDeepSet from "vue-deepset";
@@ -350,546 +351,36 @@ if (window.Processmaker && window.Processmaker.broadcasting) {
 }
 
 if (userID) {
-  // Session timeout
-  const sessionChannelName = "pm-session-sync";
-  const sessionLeaderKey = "pm:session:leader";
-  const sessionStateKey = "pm:session:state";
-  const sessionWarningKey = "pm:session:warning";
-  // Track keep-alive progress across tabs.
-  const sessionRenewingKey = "pm:session:renewing";
-  const sessionMessageKey = "pm:session:message";
-  const sessionTabId = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
-  const leaderHeartbeatMs = 4000;
-  const leaderTtlMs = 8000;
-  const sessionDebugEnabled = localStorage.getItem("pm:session:debug") === "1";
-  const sessionDebugLog = (...args) => {
-    if (sessionDebugEnabled && !isProd) {
-      console.info("[SessionSync]", `[tab:${sessionTabId}]`, ...args);
-    }
-  };
-
   const timeoutScript = document.head.querySelector("meta[name=\"timeout-worker\"]")?.content;
-  window.ProcessMaker.AccountTimeoutLength = parseInt(eval(document.head.querySelector("meta[name=\"timeout-length\"]")?.content));
-  // Server config provides warn seconds; convert to minutes for session math.
+  const accountTimeoutLength = parseInt(eval(document.head.querySelector("meta[name=\"timeout-length\"]")?.content));
   const warnSeconds = parseInt(document.head.querySelector("meta[name=\"timeout-warn-seconds\"]")?.content);
-  window.ProcessMaker.AccountTimeoutWarnSeconds = Number.isNaN(warnSeconds) ? 0 : warnSeconds;
-  window.ProcessMaker.AccountTimeoutWarnMinutes = window.ProcessMaker.AccountTimeoutWarnSeconds / 60;
-  window.ProcessMaker.AccountTimeoutEnabled = document.head.querySelector("meta[name=\"timeout-enabled\"]") ? parseInt(document.head.querySelector("meta[name=\"timeout-enabled\"]")?.content) : 1;
-  sessionDebugLog("worker:init", { timeoutScript });
-  window.ProcessMaker.AccountTimeoutWorker = new Worker(timeoutScript);
-  sessionDebugLog("worker:created");
-
-  const readStorageJson = (key) => {
-    try {
-      const raw = localStorage.getItem(key);
-      return raw ? JSON.parse(raw) : null;
-    } catch (error) {
-      return null;
-    }
-  };
-
-  const writeStorageJson = (key, value) => {
-    try {
-      localStorage.setItem(key, JSON.stringify(value));
-    } catch (error) {
-      // ignore storage failures (private mode or disabled)
-    }
-  };
-
-  const removeStorageKey = (key) => {
-    try {
-      localStorage.removeItem(key);
-    } catch (error) {
-      // ignore storage failures (private mode or disabled)
-    }
-  };
-
-  let sessionState = {
-    timeout: window.ProcessMaker.AccountTimeoutLength,
-    startedAt: Date.now(),
-  };
-
-  const refreshSessionStateFromStorage = () => {
-    const storedSessionState = readStorageJson(sessionStateKey);
-    if (storedSessionState?.timeout && storedSessionState?.startedAt) {
-      const storedTimeout = Number(storedSessionState.timeout);
-      const storedStartedAt = Number(storedSessionState.startedAt);
-      const elapsedMinutes = (Date.now() - storedStartedAt) / 60000;
-      if (storedTimeout > 0 && elapsedMinutes < storedTimeout) {
-        sessionState = storedSessionState;
-      } else {
-        sessionDebugLog("session-state:stale", { storedSessionState, elapsedMinutes });
-        writeStorageJson(sessionStateKey, sessionState);
-      }
-    } else {
-      writeStorageJson(sessionStateKey, sessionState);
-    }
-    sessionDebugLog("session-state:refresh", sessionState);
-    return sessionState;
-  };
-
-  refreshSessionStateFromStorage();
-
-  const setSessionState = (timeoutSeconds) => {
-    sessionState = {
-      timeout: timeoutSeconds,
-      startedAt: Date.now(),
-    };
-    writeStorageJson(sessionStateKey, sessionState);
-    sessionDebugLog("session-state", sessionState);
-  };
-
-  let warningState = readStorageJson(sessionWarningKey);
-  let renewingState = readStorageJson(sessionRenewingKey);
-
-  const refreshWarningStateFromStorage = () => {
-    const storedWarningState = readStorageJson(sessionWarningKey);
-    if (storedWarningState?.time && storedWarningState?.ts) {
-      warningState = storedWarningState;
-    } else {
-      warningState = null;
-    }
-    sessionDebugLog("warning-state:refresh", warningState);
-    return warningState;
-  };
-
-  const setWarningState = (timeSeconds) => {
-    warningState = {
-      time: timeSeconds,
-      ts: Date.now(),
-    };
-    writeStorageJson(sessionWarningKey, warningState);
-    sessionDebugLog("warning-state:set", warningState);
-  };
-
-  const clearWarningState = () => {
-    warningState = null;
-    removeStorageKey(sessionWarningKey);
-    sessionDebugLog("warning-state:clear");
-  };
-
-  const syncRenewingUi = () => {
-    // Only update if the navbar component exists in this layout.
-    if (window.ProcessMaker.navbar) {
-      window.ProcessMaker.navbar.sessionIsRenewing = !!renewingState;
-    }
-  };
-
-  const refreshRenewingStateFromStorage = () => {
-    const storedRenewingState = readStorageJson(sessionRenewingKey);
-    renewingState = storedRenewingState?.isRenewing ? storedRenewingState : null;
-    syncRenewingUi();
-    return renewingState;
-  };
-
-  const setRenewingState = (isRenewing) => {
-    if (isRenewing) {
-      renewingState = {
-        isRenewing: true,
-        ts: Date.now(),
-      };
-      writeStorageJson(sessionRenewingKey, renewingState);
-    } else {
-      renewingState = null;
-      removeStorageKey(sessionRenewingKey);
-    }
-    syncRenewingUi();
-  };
-
-  const sessionChannel = "BroadcastChannel" in window ? new BroadcastChannel(sessionChannelName) : null;
-  const recentMessageIds = new Map();
-  const recentMessageTtlMs = 5000;
-  const maxRecentMessageIds = 100;
-
-  const shouldSkipMessage = (message) => {
-    if (!message?.id) {
-      return false;
-    }
-    const now = Date.now();
-    const lastSeen = recentMessageIds.get(message.id);
-    if (lastSeen && now - lastSeen < recentMessageTtlMs) {
-      return true;
-    }
-    recentMessageIds.set(message.id, now);
-    if (recentMessageIds.size > maxRecentMessageIds) {
-      for (const [id, ts] of recentMessageIds) {
-        if (now - ts > recentMessageTtlMs) {
-          recentMessageIds.delete(id);
-        }
-        if (recentMessageIds.size <= maxRecentMessageIds) {
-          break;
-        }
-      }
-    }
-    return false;
-  };
-
-  const broadcastSessionEvent = (type, data = {}) => {
-    const message = {
-      id: `${sessionTabId}-${Date.now()}`,
-      type,
-      data,
-      from: sessionTabId,
-      ts: Date.now(),
-    };
-
-    sessionDebugLog("broadcast", message);
-    writeStorageJson(sessionMessageKey, message);
-    if (sessionChannel) {
-      sessionChannel.postMessage(message);
-    } else {
-      // storage already written above
-    }
-  };
-
-  const getLeader = () => readStorageJson(sessionLeaderKey);
-
-  const writeLeader = () => {
-    writeStorageJson(sessionLeaderKey, {
-      tabId: sessionTabId,
-      ts: Date.now(),
-    });
-    sessionDebugLog("leader:claim", { tabId: sessionTabId });
-  };
-
-  const isLeader = () => {
-    const leader = getLeader();
-    return document.visibilityState === "visible"
-      && !!leader
-      && leader.tabId === sessionTabId
-      && Date.now() - leader.ts < leaderTtlMs;
-  };
-
-  let workerStarted = false;
-  const ensureWorkerRunning = (reason) => {
-    if (workerStarted) {
-      return;
-    }
-    workerStarted = true;
-    refreshSessionStateFromStorage();
-    refreshWarningStateFromStorage();
-    sessionDebugLog("worker:ensure", { reason, sessionState });
-    startTimeoutWorker(sessionState.timeout);
-    showWarningIfActive();
-  };
-
-  const markActivity = (source) => {
-    const timeout = window.ProcessMaker.AccountTimeoutLength;
-    setSessionState(timeout);
-    clearWarningState();
-    broadcastSessionEvent("activity", { timeout, source });
-    sessionDebugLog("activity", { source, timeout });
-    if (isLeader()) {
-      ensureWorkerRunning(`activity:${source}`);
-    }
-  };
-
-  const getRemainingTimeout = (timeoutMinutes) => {
-    const elapsedMinutes = (Date.now() - sessionState.startedAt) / 60000;
-    const remaining = timeoutMinutes - elapsedMinutes;
-    return Math.max(0, remaining);
-  };
-
-  const getRemainingWarningTime = () => {
-    if (!warningState?.time || !warningState?.ts) {
-      return 0;
-    }
-    const elapsedSeconds = Math.floor((Date.now() - warningState.ts) / 1000);
-    return Math.max(0, warningState.time - elapsedSeconds);
-  };
-
-  const startTimeoutWorker = (timeoutSeconds) => {
-    const remaining = getRemainingTimeout(timeoutSeconds);
-    sessionDebugLog("worker:start", { timeoutSeconds, remaining });
-    if (remaining <= 0) {
-      broadcastSessionEvent("expired");
-      window.location = "/logout?timeout=true";
-      return;
-    }
-
-    window.ProcessMaker.AccountTimeoutWorker.postMessage({
-      method: "start",
-      data: {
-        timeout: remaining,
-        warnSeconds: window.ProcessMaker.AccountTimeoutWarnSeconds,
-        enabled: window.ProcessMaker.AccountTimeoutEnabled,
-      },
-    });
-  };
-
-  const handleSessionMessage = (message) => {
-    if (!message || message.from === sessionTabId) {
-      return;
-    }
-    if (shouldSkipMessage(message)) {
-      return;
-    }
-
-    sessionDebugLog("receive", message);
-    if (message.type === "warning") {
-      const time = Number(message.data?.time);
-      if (time) {
-        setWarningState(time);
-        if (document.visibilityState === "visible") {
-          showWarningIfActive();
-        }
-      }
-      return;
-    }
-
-    if (message.type === "renewing") {
-      const isRenewing = !!message.data?.isRenewing;
-      setRenewingState(isRenewing);
-      if (isRenewing) {
-        clearWarningState();
-        if (window.ProcessMaker.closeSessionModal) {
-          window.ProcessMaker.closeSessionModal();
-        }
-      }
-      return;
-    }
-
-    if (message.type === "renewed" || message.type === "started" || message.type === "activity") {
-      const timeout = Number(message.data?.timeout) || window.ProcessMaker.AccountTimeoutLength;
-      clearWarningState();
-      setRenewingState(false);
-      setSessionState(timeout);
-      if (window.ProcessMaker.closeSessionModal) {
-        window.ProcessMaker.closeSessionModal();
-      }
-      if (isLeader()) {
-        startTimeoutWorker(timeout);
-      }
-      return;
-    }
-
-    if (message.type === "logout") {
-      clearWarningState();
-      setRenewingState(false);
-      window.location = "/logout";
-    }
-
-    if (message.type === "expired") {
-      clearWarningState();
-      setRenewingState(false);
-      window.location = "/logout?timeout=true";
-    }
-  };
-
-  if (sessionChannel) {
-    sessionChannel.onmessage = (event) => handleSessionMessage(event.data);
-  }
-
-  window.addEventListener("storage", (event) => {
-    if (event.key !== sessionMessageKey || !event.newValue) {
-      return;
-    }
-
-    handleSessionMessage(readStorageJson(sessionMessageKey));
+  const accountTimeoutWarnSeconds = Number.isNaN(warnSeconds) ? 0 : warnSeconds;
+  const accountTimeoutEnabled = document.head.querySelector("meta[name=\"timeout-enabled\"]") ? parseInt(document.head.querySelector("meta[name=\"timeout-enabled\"]")?.content) : 1;
+
+  const sessionSyncState = initSessionSync({
+    userId: userID.content,
+    isProd,
+    timeoutScript,
+    accountTimeoutLength,
+    accountTimeoutWarnSeconds,
+    accountTimeoutEnabled,
+    Vue,
+    Echo: window.Echo,
+    pushNotification: window.ProcessMaker.pushNotification,
+    alert: window.ProcessMaker.alert,
+    getSessionModal: () => window.ProcessMaker.sessionModal,
+    getCloseSessionModal: () => window.ProcessMaker.closeSessionModal,
+    getNavbar: () => window.ProcessMaker.navbar,
   });
 
-  window.ProcessMaker.sessionSync = {
-    broadcast: broadcastSessionEvent,
-    isLeader,
-    setSessionState,
-    clearWarningState,
-  };
-
-  window.ProcessMaker.AccountTimeoutWorker.onmessage = (e) => {
-    if (!isLeader()) {
-      return;
-    }
-
-    if (e.data.method === "countdown") {
-      sessionDebugLog("worker:countdown", e.data.data);
-      setWarningState(e.data.data.time);
-      // Guard for layouts that don't include the session modal.
-      if (typeof window.ProcessMaker.sessionModal === "function") {
-        window.ProcessMaker.sessionModal(
-          "Session Warning",
-          "<p>Your user session is expiring. If your session expires, all of your unsaved data will be lost.</p><p>Would you like to stay connected?</p>",
-          e.data.data.time,
-          window.ProcessMaker.AccountTimeoutWarnSeconds,
-        );
-      }
-      broadcastSessionEvent("warning", { time: e.data.data.time });
-    }
-    if (e.data.method === "timedOut") {
-      sessionDebugLog("worker:timedOut");
-      refreshSessionStateFromStorage();
-      const remaining = getRemainingTimeout(sessionState.timeout);
-      sessionDebugLog("worker:timedOut:check", { remaining, sessionState });
-      if (remaining > 0) {
-        startTimeoutWorker(sessionState.timeout);
-        return;
-      }
-      clearWarningState();
-      broadcastSessionEvent("expired");
-      window.location = "/logout?timeout=true";
-    }
-  };
-
-  const showWarningIfActive = () => {
-    const remainingTime = getRemainingWarningTime();
-    if (remainingTime <= 0) {
-      sessionDebugLog("warning:skip", { remainingTime });
-      clearWarningState();
-      if (window.ProcessMaker.closeSessionModal) {
-        window.ProcessMaker.closeSessionModal();
-      }
-      setRenewingState(false);
-      return;
-    }
-    refreshRenewingStateFromStorage();
-    if (renewingState?.isRenewing) {
-      return;
-    }
-    sessionDebugLog("warning:show", { remainingTime });
-    // Guard for layouts that don't include the session modal.
-    if (typeof window.ProcessMaker.sessionModal === "function") {
-      window.ProcessMaker.sessionModal(
-        "Session Warning",
-        "<p>Your user session is expiring. If your session expires, all of your unsaved data will be lost.</p><p>Would you like to stay connected?</p>",
-        remainingTime,
-        window.ProcessMaker.AccountTimeoutWarnSeconds,
-      );
-    }
-  };
-
-  // in some cases it's necessary to start manually
-  let wasLeader = false;
-  const updateLeadership = () => {
-    const leader = getLeader();
-    const now = Date.now();
-    const isVisible = document.visibilityState === "visible";
-    sessionDebugLog("leader:check", {
-      isVisible,
-      leader,
-      now,
-    });
-    if (isVisible) {
-      const leaderExpired = !leader || (now - leader.ts >= leaderTtlMs);
-      if (leaderExpired || leader?.tabId === sessionTabId) {
-        writeLeader();
-      }
-      refreshWarningStateFromStorage();
-      showWarningIfActive();
-    }
-
-    const leaderNow = isLeader();
-    if (leaderNow) {
-      ensureWorkerRunning("leadership");
-    }
-    if (leaderNow !== wasLeader) {
-      wasLeader = leaderNow;
-      sessionDebugLog("leader:changed", { isLeader: leaderNow });
-      if (leaderNow) {
-        ensureWorkerRunning("leadership-change");
-      } else if (window.ProcessMaker.closeSessionModal) {
-        workerStarted = false;
-        window.ProcessMaker.closeSessionModal();
-      }
-    }
-  };
-
-  updateLeadership();
-  if (isLeader()) {
-    markActivity("load");
-    ensureWorkerRunning("load");
+  if (sessionSyncState) {
+    window.ProcessMaker.AccountTimeoutLength = sessionSyncState.AccountTimeoutLength;
+    window.ProcessMaker.AccountTimeoutWarnSeconds = sessionSyncState.AccountTimeoutWarnSeconds;
+    window.ProcessMaker.AccountTimeoutWarnMinutes = sessionSyncState.AccountTimeoutWarnMinutes;
+    window.ProcessMaker.AccountTimeoutEnabled = sessionSyncState.AccountTimeoutEnabled;
+    window.ProcessMaker.AccountTimeoutWorker = sessionSyncState.AccountTimeoutWorker;
+    window.ProcessMaker.sessionSync = sessionSyncState.sessionSync;
   }
-  setInterval(updateLeadership, leaderHeartbeatMs);
-  window.addEventListener("visibilitychange", () => {
-    updateLeadership();
-    // Keep warning state in sync when switching tabs.
-    refreshWarningStateFromStorage();
-    showWarningIfActive();
-    if (isLeader()) {
-      // Only the leader drives the worker countdown.
-      refreshSessionStateFromStorage();
-      startTimeoutWorker(sessionState.timeout);
-    }
-  });
-
-  // Broadcast manual logout so all tabs close warning and redirect.
-  document.addEventListener("click", (event) => {
-    const logoutLink = event.target.closest('a[href="/logout"], a[href^="/logout?"]');
-    if (!logoutLink) {
-      return;
-    }
-    if (window.ProcessMaker.sessionSync?.clearWarningState) {
-      window.ProcessMaker.sessionSync.clearWarningState();
-    }
-    if (window.ProcessMaker.sessionSync?.broadcast) {
-      window.ProcessMaker.sessionSync.broadcast("logout");
-    }
-  });
-
-  // Restart the timeout worker (when the user interacts with the page)
-  const eventsTimeoutWorker = ["click", "keypress"];
-
-  eventsTimeoutWorker.forEach((event) => {
-    document.addEventListener(event, () => {
-      if (!isLeader()) {
-        sessionDebugLog("worker:restart:skip", { event });
-        return;
-      }
-      markActivity(event);
-      sessionDebugLog("worker:restart", { event });
-      window.ProcessMaker.AccountTimeoutWorker.postMessage({ method: "restart" });
-    });
-  });
-
-  // End -> Restart the timeout worker (when the user interacts with the page)
-
-  const isSameDevice = (e) => {
-    const localDeviceId = Vue.$cookies.get(e.device_variable);
-    const remoteDeviceId = e.device_id;
-    return localDeviceId && localDeviceId === remoteDeviceId;
-  };
-
-  window.Echo.private(`ProcessMaker.Models.User.${userID.content}`)
-    .notification((token) => {
-      ProcessMaker.pushNotification(token);
-    })
-    .listen(".SessionStarted", (e) => {
-      const lifetime = parseInt(eval(e.lifetime));
-      if (!isSameDevice(e)) {
-        return;
-      }
-
-      sessionDebugLog("event:session-started", { lifetime });
-      setSessionState(lifetime);
-      // Clear any stale warning on new login/session.
-      clearWarningState();
-      broadcastSessionEvent("started", { timeout: lifetime });
-      if (window.ProcessMaker.closeSessionModal) {
-        window.ProcessMaker.closeSessionModal();
-      }
-      if (isLeader()) {
-        startTimeoutWorker(lifetime);
-      }
-    })
-    .listen(".Logout", (e) => {
-      if (isSameDevice(e) && window.location.pathname.indexOf("/logout") === -1) {
-        const localDeviceId = Vue.$cookies.get(e.device_variable);
-        const redirectLogoutinterval = setInterval(() => {
-          const newDeviceId = Vue.$cookies.get(e.device_variable);
-          if (localDeviceId !== newDeviceId) {
-            clearInterval(redirectLogoutinterval);
-            window.location.href = "/logout";
-          }
-        }, 100);
-      }
-    })
-    .listen(".SecurityLogDownloadJobCompleted", (e) => {
-      if (e.success) {
-        const { link } = e;
-        const { message } = e;
-        window.ProcessMaker.alert(message, "success", 0, false, false, link);
-      } else {
-        window.ProcessMaker.alert(e.message, "warning");
-      }
-    });
 }
 
 // Configuration Global object used by ScreenBuilder
diff --git a/resources/js/common/sessionSync.js b/resources/js/common/sessionSync.js
new file mode 100644
index 0000000000..f4573f2bb8
--- /dev/null
+++ b/resources/js/common/sessionSync.js
@@ -0,0 +1,560 @@
+export const initSessionSync = ({
+  userId,
+  isProd,
+  timeoutScript,
+  accountTimeoutLength,
+  accountTimeoutWarnSeconds,
+  accountTimeoutEnabled,
+  Vue,
+  Echo,
+  pushNotification,
+  alert,
+  getSessionModal,
+  getCloseSessionModal,
+  getNavbar,
+}) => {
+  if (!userId) {
+    return null;
+  }
+
+  const sessionChannelName = "pm-session-sync";
+  const sessionLeaderKey = "pm:session:leader";
+  const sessionStateKey = "pm:session:state";
+  const sessionWarningKey = "pm:session:warning";
+  // Track keep-alive progress across tabs.
+  const sessionRenewingKey = "pm:session:renewing";
+  const sessionMessageKey = "pm:session:message";
+  const sessionTabId = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+  const leaderHeartbeatMs = 4000;
+  const leaderTtlMs = 8000;
+  const sessionDebugEnabled = localStorage.getItem("pm:session:debug") === "1";
+  const sessionDebugLog = (...args) => {
+    if (sessionDebugEnabled && !isProd) {
+      console.info("[SessionSync]", `[tab:${sessionTabId}]`, ...args);
+    }
+  };
+
+  sessionDebugLog("worker:init", { timeoutScript });
+  const AccountTimeoutWorker = new Worker(timeoutScript);
+  sessionDebugLog("worker:created");
+
+  const resolveSessionModal = () => (typeof getSessionModal === "function" ? getSessionModal() : null);
+  const resolveCloseSessionModal = () => (typeof getCloseSessionModal === "function" ? getCloseSessionModal() : null);
+
+  const readStorageJson = (key) => {
+    try {
+      const raw = localStorage.getItem(key);
+      return raw ? JSON.parse(raw) : null;
+    } catch (error) {
+      return null;
+    }
+  };
+
+  const writeStorageJson = (key, value) => {
+    try {
+      localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      // ignore storage failures (private mode or disabled)
+    }
+  };
+
+  const removeStorageKey = (key) => {
+    try {
+      localStorage.removeItem(key);
+    } catch (error) {
+      // ignore storage failures (private mode or disabled)
+    }
+  };
+
+  let sessionState = {
+    timeout: accountTimeoutLength,
+    startedAt: Date.now(),
+  };
+
+  const refreshSessionStateFromStorage = () => {
+    const storedSessionState = readStorageJson(sessionStateKey);
+    if (storedSessionState?.timeout && storedSessionState?.startedAt) {
+      const storedTimeout = Number(storedSessionState.timeout);
+      const storedStartedAt = Number(storedSessionState.startedAt);
+      const elapsedMinutes = (Date.now() - storedStartedAt) / 60000;
+      if (storedTimeout > 0 && elapsedMinutes < storedTimeout) {
+        sessionState = storedSessionState;
+      } else {
+        sessionDebugLog("session-state:stale", { storedSessionState, elapsedMinutes });
+        writeStorageJson(sessionStateKey, sessionState);
+      }
+    } else {
+      writeStorageJson(sessionStateKey, sessionState);
+    }
+    sessionDebugLog("session-state:refresh", sessionState);
+    return sessionState;
+  };
+
+  refreshSessionStateFromStorage();
+
+  const setSessionState = (timeoutMinutes) => {
+    sessionState = {
+      timeout: timeoutMinutes,
+      startedAt: Date.now(),
+    };
+    writeStorageJson(sessionStateKey, sessionState);
+    sessionDebugLog("session-state", sessionState);
+  };
+
+  let warningState = readStorageJson(sessionWarningKey);
+  let renewingState = readStorageJson(sessionRenewingKey);
+
+  const refreshWarningStateFromStorage = () => {
+    const storedWarningState = readStorageJson(sessionWarningKey);
+    if (storedWarningState?.time && storedWarningState?.ts) {
+      warningState = storedWarningState;
+    } else {
+      warningState = null;
+    }
+    sessionDebugLog("warning-state:refresh", warningState);
+    return warningState;
+  };
+
+  const setWarningState = (timeSeconds) => {
+    warningState = {
+      time: timeSeconds,
+      ts: Date.now(),
+    };
+    writeStorageJson(sessionWarningKey, warningState);
+    sessionDebugLog("warning-state:set", warningState);
+  };
+
+  const clearWarningState = () => {
+    warningState = null;
+    removeStorageKey(sessionWarningKey);
+    sessionDebugLog("warning-state:clear");
+  };
+
+  const syncRenewingUi = () => {
+    const navbar = typeof getNavbar === "function" ? getNavbar() : null;
+    if (navbar) {
+      navbar.sessionIsRenewing = !!renewingState?.isRenewing;
+    }
+  };
+
+  const refreshRenewingStateFromStorage = () => {
+    const storedRenewingState = readStorageJson(sessionRenewingKey);
+    renewingState = storedRenewingState?.isRenewing ? storedRenewingState : null;
+    syncRenewingUi();
+    return renewingState;
+  };
+
+  const setRenewingState = (isRenewing) => {
+    if (isRenewing) {
+      renewingState = {
+        isRenewing: true,
+        ts: Date.now(),
+      };
+      writeStorageJson(sessionRenewingKey, renewingState);
+    } else {
+      renewingState = null;
+      removeStorageKey(sessionRenewingKey);
+    }
+    syncRenewingUi();
+  };
+
+  const sessionChannel = "BroadcastChannel" in window ? new BroadcastChannel(sessionChannelName) : null;
+  const recentMessageIds = new Map();
+  const recentMessageTtlMs = 5000;
+  const maxRecentMessageIds = 100;
+
+  const shouldSkipMessage = (message) => {
+    if (!message?.id) {
+      return false;
+    }
+    const now = Date.now();
+    const lastSeen = recentMessageIds.get(message.id);
+    if (lastSeen && now - lastSeen < recentMessageTtlMs) {
+      return true;
+    }
+    recentMessageIds.set(message.id, now);
+    if (recentMessageIds.size > maxRecentMessageIds) {
+      for (const [id, ts] of recentMessageIds) {
+        if (now - ts > recentMessageTtlMs) {
+          recentMessageIds.delete(id);
+        }
+        if (recentMessageIds.size <= maxRecentMessageIds) {
+          break;
+        }
+      }
+    }
+    return false;
+  };
+
+  const broadcastSessionEvent = (type, data = {}) => {
+    const message = {
+      id: `${sessionTabId}-${Date.now()}`,
+      type,
+      data,
+      from: sessionTabId,
+      ts: Date.now(),
+    };
+
+    sessionDebugLog("broadcast", message);
+    writeStorageJson(sessionMessageKey, message);
+    if (sessionChannel) {
+      sessionChannel.postMessage(message);
+    } else {
+      // storage already written above
+    }
+  };
+
+  const getLeader = () => readStorageJson(sessionLeaderKey);
+
+  const writeLeader = () => {
+    writeStorageJson(sessionLeaderKey, {
+      tabId: sessionTabId,
+      ts: Date.now(),
+    });
+    sessionDebugLog("leader:claim", { tabId: sessionTabId });
+  };
+
+  const isLeader = () => {
+    const leader = getLeader();
+    return document.visibilityState === "visible"
+      && !!leader
+      && leader.tabId === sessionTabId
+      && Date.now() - leader.ts < leaderTtlMs;
+  };
+
+  let workerStarted = false;
+  const ensureWorkerRunning = (reason) => {
+    if (workerStarted) {
+      return;
+    }
+    workerStarted = true;
+    refreshSessionStateFromStorage();
+    refreshWarningStateFromStorage();
+    sessionDebugLog("worker:ensure", { reason, sessionState });
+    startTimeoutWorker(sessionState.timeout);
+    showWarningIfActive();
+  };
+
+  const markActivity = (source) => {
+    setSessionState(accountTimeoutLength);
+    clearWarningState();
+    broadcastSessionEvent("activity", { timeout: accountTimeoutLength, source });
+    sessionDebugLog("activity", { source, timeout: accountTimeoutLength });
+    if (isLeader()) {
+      ensureWorkerRunning(`activity:${source}`);
+    }
+  };
+
+  const getRemainingTimeout = (timeoutMinutes) => {
+    const elapsedMinutes = (Date.now() - sessionState.startedAt) / 60000;
+    const remaining = timeoutMinutes - elapsedMinutes;
+    return Math.max(0, remaining);
+  };
+
+  const getRemainingWarningTime = () => {
+    if (!warningState?.time || !warningState?.ts) {
+      return 0;
+    }
+    const elapsedSeconds = Math.floor((Date.now() - warningState.ts) / 1000);
+    return Math.max(0, warningState.time - elapsedSeconds);
+  };
+
+  const startTimeoutWorker = (timeoutMinutes) => {
+    const remaining = getRemainingTimeout(timeoutMinutes);
+    sessionDebugLog("worker:start", { timeoutMinutes, remaining });
+    if (remaining <= 0) {
+      broadcastSessionEvent("expired");
+      window.location = "/logout?timeout=true";
+      return;
+    }
+
+    AccountTimeoutWorker.postMessage({
+      method: "start",
+      data: {
+        timeout: remaining,
+        warnSeconds: accountTimeoutWarnSeconds,
+        enabled: accountTimeoutEnabled,
+      },
+    });
+  };
+
+  const showWarningIfActive = () => {
+    const remainingTime = getRemainingWarningTime();
+    if (remainingTime <= 0) {
+      sessionDebugLog("warning:skip", { remainingTime });
+      clearWarningState();
+      const closeSessionModal = resolveCloseSessionModal();
+      if (closeSessionModal) {
+        closeSessionModal();
+      }
+      setRenewingState(false);
+      return;
+    }
+    refreshRenewingStateFromStorage();
+    if (renewingState?.isRenewing) {
+      return;
+    }
+    sessionDebugLog("warning:show", { remainingTime });
+    const sessionModal = resolveSessionModal();
+    // Guard for layouts that don't include the session modal.
+    if (typeof sessionModal === "function") {
+      sessionModal(
+        "Session Warning",
+        "<p>Your user session is expiring. If your session expires, all of your unsaved data will be lost.</p><p>Would you like to stay connected?</p>",
+        remainingTime,
+        accountTimeoutWarnSeconds,
+      );
+    }
+  };
+
+  const handleSessionMessage = (message) => {
+    if (!message || message.from === sessionTabId) {
+      return;
+    }
+    if (shouldSkipMessage(message)) {
+      return;
+    }
+
+    sessionDebugLog("receive", message);
+    if (message.type === "warning") {
+      const time = Number(message.data?.time);
+      if (time) {
+        setWarningState(time);
+        if (document.visibilityState === "visible") {
+          showWarningIfActive();
+        }
+      }
+      return;
+    }
+
+    if (message.type === "renewing") {
+      const isRenewing = !!message.data?.isRenewing;
+      setRenewingState(isRenewing);
+      if (isRenewing) {
+        clearWarningState();
+        const closeSessionModal = resolveCloseSessionModal();
+        if (closeSessionModal) {
+          closeSessionModal();
+        }
+      }
+      return;
+    }
+
+    if (message.type === "renewed" || message.type === "started" || message.type === "activity") {
+      const timeout = Number(message.data?.timeout) || accountTimeoutLength;
+      clearWarningState();
+      setRenewingState(false);
+      setSessionState(timeout);
+      const closeSessionModal = resolveCloseSessionModal();
+      if (closeSessionModal) {
+        closeSessionModal();
+      }
+      if (isLeader()) {
+        startTimeoutWorker(timeout);
+      }
+      return;
+    }
+
+    if (message.type === "logout") {
+      clearWarningState();
+      setRenewingState(false);
+      window.location = "/logout";
+    }
+
+    if (message.type === "expired") {
+      clearWarningState();
+      setRenewingState(false);
+      window.location = "/logout?timeout=true";
+    }
+  };
+
+  if (sessionChannel) {
+    sessionChannel.onmessage = (event) => handleSessionMessage(event.data);
+  }
+
+  window.addEventListener("storage", (event) => {
+    if (event.key !== sessionMessageKey || !event.newValue) {
+      return;
+    }
+
+    handleSessionMessage(readStorageJson(sessionMessageKey));
+  });
+
+  AccountTimeoutWorker.onmessage = (e) => {
+    if (!isLeader()) {
+      return;
+    }
+
+    if (e.data.method === "countdown") {
+      sessionDebugLog("worker:countdown", e.data.data);
+      setWarningState(e.data.data.time);
+      showWarningIfActive();
+      broadcastSessionEvent("warning", { time: e.data.data.time });
+    }
+    if (e.data.method === "timedOut") {
+      sessionDebugLog("worker:timedOut");
+      refreshSessionStateFromStorage();
+      const remaining = getRemainingTimeout(sessionState.timeout);
+      sessionDebugLog("worker:timedOut:check", { remaining, sessionState });
+      if (remaining > 0) {
+        startTimeoutWorker(sessionState.timeout);
+        return;
+      }
+      clearWarningState();
+      broadcastSessionEvent("expired");
+      window.location = "/logout?timeout=true";
+    }
+  };
+
+  let wasLeader = false;
+  const updateLeadership = () => {
+    const leader = getLeader();
+    const now = Date.now();
+    const isVisible = document.visibilityState === "visible";
+    sessionDebugLog("leader:check", {
+      isVisible,
+      leader,
+      now,
+    });
+    if (isVisible) {
+      const leaderExpired = !leader || (now - leader.ts >= leaderTtlMs);
+      if (leaderExpired || leader?.tabId === sessionTabId) {
+        writeLeader();
+      }
+      refreshWarningStateFromStorage();
+      showWarningIfActive();
+    }
+
+    const leaderNow = isLeader();
+    if (leaderNow) {
+      ensureWorkerRunning("leadership");
+    }
+    if (leaderNow !== wasLeader) {
+      wasLeader = leaderNow;
+      sessionDebugLog("leader:changed", { isLeader: leaderNow });
+      if (leaderNow) {
+        ensureWorkerRunning("leadership-change");
+      } else {
+        const closeSessionModal = resolveCloseSessionModal();
+        if (closeSessionModal) {
+          workerStarted = false;
+          closeSessionModal();
+        }
+      }
+    }
+  };
+
+  updateLeadership();
+  if (isLeader()) {
+    markActivity("load");
+    ensureWorkerRunning("load");
+  }
+  setInterval(updateLeadership, leaderHeartbeatMs);
+  window.addEventListener("visibilitychange", () => {
+    updateLeadership();
+    // Keep warning state in sync when switching tabs.
+    refreshWarningStateFromStorage();
+    showWarningIfActive();
+    if (isLeader()) {
+      // Only the leader drives the worker countdown.
+      refreshSessionStateFromStorage();
+      startTimeoutWorker(sessionState.timeout);
+    }
+  });
+
+  // Broadcast manual logout so all tabs close warning and redirect.
+  document.addEventListener("click", (event) => {
+    const logoutLink = event.target.closest('a[href="/logout"], a[href^="/logout?"]');
+    if (!logoutLink) {
+      return;
+    }
+    clearWarningState();
+    broadcastSessionEvent("logout");
+  });
+
+  // Restart the timeout worker (when the user interacts with the page)
+  const eventsTimeoutWorker = ["click", "keypress"];
+  eventsTimeoutWorker.forEach((event) => {
+    document.addEventListener(event, () => {
+      if (!isLeader()) {
+        sessionDebugLog("worker:restart:skip", { event });
+        return;
+      }
+      markActivity(event);
+      sessionDebugLog("worker:restart", { event });
+      AccountTimeoutWorker.postMessage({ method: "restart" });
+    });
+  });
+
+  const isSameDevice = (e) => {
+    const localDeviceId = Vue.$cookies.get(e.device_variable);
+    const remoteDeviceId = e.device_id;
+    return localDeviceId && localDeviceId === remoteDeviceId;
+  };
+
+  if (Echo) {
+    Echo.private(`ProcessMaker.Models.User.${userId}`)
+      .notification((token) => {
+        if (typeof pushNotification === "function") {
+          pushNotification(token);
+        }
+      })
+      .listen(".SessionStarted", (e) => {
+        const lifetime = parseInt(eval(e.lifetime));
+        if (!isSameDevice(e)) {
+          return;
+        }
+
+        sessionDebugLog("event:session-started", { lifetime });
+        setSessionState(lifetime);
+        // Clear any stale warning on new login/session.
+        clearWarningState();
+        broadcastSessionEvent("started", { timeout: lifetime });
+        const closeSessionModal = resolveCloseSessionModal();
+        if (closeSessionModal) {
+          closeSessionModal();
+        }
+        if (isLeader()) {
+          startTimeoutWorker(lifetime);
+        }
+      })
+      .listen(".Logout", (e) => {
+        if (isSameDevice(e) && window.location.pathname.indexOf("/logout") === -1) {
+          const localDeviceId = Vue.$cookies.get(e.device_variable);
+          const redirectLogoutinterval = setInterval(() => {
+            const newDeviceId = Vue.$cookies.get(e.device_variable);
+            if (localDeviceId !== newDeviceId) {
+              clearInterval(redirectLogoutinterval);
+              window.location.href = "/logout";
+            }
+          }, 100);
+        }
+      })
+      .listen(".SecurityLogDownloadJobCompleted", (e) => {
+        if (typeof alert !== "function") {
+          return;
+        }
+        if (e.success) {
+          const { link } = e;
+          const { message } = e;
+          alert(message, "success", 0, false, false, link);
+        } else {
+          alert(e.message, "warning");
+        }
+      });
+  }
+
+  return {
+    AccountTimeoutLength: accountTimeoutLength,
+    AccountTimeoutWarnSeconds: accountTimeoutWarnSeconds,
+    AccountTimeoutWarnMinutes: accountTimeoutWarnSeconds / 60,
+    AccountTimeoutEnabled: accountTimeoutEnabled,
+    AccountTimeoutWorker,
+    sessionSync: {
+      broadcast: broadcastSessionEvent,
+      isLeader,
+      setSessionState,
+      clearWarningState,
+    },
+  };
+};
diff --git a/resources/js/components/Session.vue b/resources/js/components/Session.vue
index 385a55c9e3..227d524912 100644
--- a/resources/js/components/Session.vue
+++ b/resources/js/components/Session.vue
@@ -89,6 +89,9 @@ export default {
   },
   watch: {
     shown(value) {
+      if (value) {
+        this.resetProcessingState();
+      }
       if (value) {
         this.$refs.sessionModal.show();
       } else {
@@ -100,6 +103,11 @@ export default {
     this.$emit("show");
   },
   methods: {
+    resetProcessingState() {
+      this.localRenewing = false;
+      this.disabled = false;
+      this.errors = {};
+    },
     onClose() {
       this.$emit("close");
     },
diff --git a/resources/js/next/config/session.js b/resources/js/next/config/session.js
index 56ef0f2bc9..c1d54fc23d 100644
--- a/resources/js/next/config/session.js
+++ b/resources/js/next/config/session.js
@@ -1,4 +1,5 @@
 import { getGlobalPMVariable, setGlobalPMVariables, getGlobalVariable } from "../globalVariables";
+import { initSessionSync } from "../../common/sessionSync";
 
 export default () => {
   const timeoutScript = document.head.querySelector("meta[name=\"timeout-worker\"]")?.content;
@@ -7,99 +8,46 @@ export default () => {
   const Echo = getGlobalVariable("Echo");
 
   const pushNotification = getGlobalPMVariable("pushNotification");
-  const closeSessionModal = getGlobalPMVariable("closeSessionModal");
   const alert = getGlobalPMVariable("alert");
   const user = getGlobalPMVariable("user");
+  const isProd = document.head.querySelector("meta[name=\"is-prod\"]")?.content === "true";
 
-  const isSameDevice = (e) => {
-    const localDeviceId = Vue.$cookies.get(e.device_variable);
-    const remoteDeviceId = e.device_id;
-    return localDeviceId && localDeviceId === remoteDeviceId;
-  };
-
-  if (user) {
-  // Session timeout
-    // Backend provides minutes for lifetime and seconds for warnings.
-    const AccountTimeoutLength = parseInt(eval(document.head.querySelector("meta[name=\"timeout-length\"]")?.content));
-    const warnSeconds = parseInt(document.head.querySelector("meta[name=\"timeout-warn-seconds\"]")?.content);
-    const AccountTimeoutWarnSeconds = Number.isNaN(warnSeconds) ? 0 : warnSeconds;
-    const AccountTimeoutEnabled = document.head.querySelector("meta[name=\"timeout-enabled\"]") ? parseInt(document.head.querySelector("meta[name=\"timeout-enabled\"]")?.content) : 1;
-    const AccountTimeoutWorker = new Worker(timeoutScript);
-
-    AccountTimeoutWorker.addEventListener("message", (e) => {
-      const sessionModal = getGlobalPMVariable("sessionModal");
-      if (e.data.method === "countdown") {
-        // Show countdown modal when the worker hits the warning threshold.
-        sessionModal(
-          "Session Warning",
-          "<p>Your user session is expiring. If your session expires, all of your unsaved data will be lost.</p><p>Would you like to stay connected?</p>",
-          e.data.data.time,
-          AccountTimeoutWarnSeconds,
-        );
-      }
-      if (e.data.method === "timedOut") {
-        window.location = "/logout?timeout=true";
-      }
-    });
-
-    // Start the timer for the initial page load.
-    AccountTimeoutWorker.postMessage({
-      method: "start",
-      data: {
-        timeout: AccountTimeoutLength,
-        warnSeconds: AccountTimeoutWarnSeconds,
-        enabled: AccountTimeoutEnabled,
-      },
-    });
-
-    Echo.private(`ProcessMaker.Models.User.${user.id}`)
-      .notification((token) => {
-        pushNotification(token);
-      })
-      .listen(".SessionStarted", (e) => {
-        const lifetime = parseInt(eval(e.lifetime));
-        if (isSameDevice(e)) {
-          // Reset the worker when the server renews the session.
-          AccountTimeoutWorker.postMessage({
-            method: "start",
-            data: {
-              timeout: lifetime,
-              warnSeconds: AccountTimeoutWarnSeconds,
-              enabled: AccountTimeoutEnabled,
-            },
-          });
-          if (closeSessionModal) {
-            closeSessionModal();
-          }
-        }
-      })
-      .listen(".Logout", (e) => {
-        if (isSameDevice(e) && window.location.pathname.indexOf("/logout") === -1) {
-          const localDeviceId = Vue.$cookies.get(e.device_variable);
-          const redirectLogoutinterval = setInterval(() => {
-            const newDeviceId = Vue.$cookies.get(e.device_variable);
-            if (localDeviceId !== newDeviceId) {
-              clearInterval(redirectLogoutinterval);
-              window.location.href = "/logout";
-            }
-          }, 100);
-        }
-      })
-      .listen(".SecurityLogDownloadJobCompleted", (e) => {
-        if (e.success) {
-          const { link } = e;
-          const { message } = e;
-          alert(message, "success", 0, false, false, link);
-        } else {
-          alert(e.message, "warning");
-        }
-      });
+  if (!user) {
+    return;
+  }
 
-    setGlobalPMVariables({
-      AccountTimeoutLength,
-      AccountTimeoutWarnSeconds,
-      AccountTimeoutEnabled,
-      AccountTimeoutWorker,
-    });
+  // Backend provides minutes for lifetime and seconds for warnings.
+  const accountTimeoutLength = parseInt(eval(document.head.querySelector("meta[name=\"timeout-length\"]")?.content));
+  const warnSeconds = parseInt(document.head.querySelector("meta[name=\"timeout-warn-seconds\"]")?.content);
+  const accountTimeoutWarnSeconds = Number.isNaN(warnSeconds) ? 0 : warnSeconds;
+  const accountTimeoutEnabled = document.head.querySelector("meta[name=\"timeout-enabled\"]") ? parseInt(document.head.querySelector("meta[name=\"timeout-enabled\"]")?.content) : 1;
+
+  const sessionSyncState = initSessionSync({
+    userId: user.id,
+    isProd,
+    timeoutScript,
+    accountTimeoutLength,
+    accountTimeoutWarnSeconds,
+    accountTimeoutEnabled,
+    Vue,
+    Echo,
+    pushNotification,
+    alert,
+    getSessionModal: () => getGlobalPMVariable("sessionModal"),
+    getCloseSessionModal: () => getGlobalPMVariable("closeSessionModal"),
+    getNavbar: () => getGlobalPMVariable("navbar"),
+  });
+
+  if (!sessionSyncState) {
+    return;
   }
+
+  setGlobalPMVariables({
+    AccountTimeoutLength: sessionSyncState.AccountTimeoutLength,
+    AccountTimeoutWarnSeconds: sessionSyncState.AccountTimeoutWarnSeconds,
+    AccountTimeoutWarnMinutes: sessionSyncState.AccountTimeoutWarnMinutes,
+    AccountTimeoutEnabled: sessionSyncState.AccountTimeoutEnabled,
+    AccountTimeoutWorker: sessionSyncState.AccountTimeoutWorker,
+    sessionSync: sessionSyncState.sessionSync,
+  });
 };

From cf6ce9b7a1b70d6c94beef9effe171cadf57aa38 Mon Sep 17 00:00:00 2001
From: "Marco A. Nina Mena" <marco.antonio.nina@processmaker.com>
Date: Thu, 22 Jan 2026 15:53:32 -0400
Subject: [PATCH 09/10] Enhance session event broadcasting by adding a unique
 identifier to messages

---
 resources/js/common/sessionSync.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/common/sessionSync.js b/resources/js/common/sessionSync.js
index f4573f2bb8..fb98b5fcbc 100644
--- a/resources/js/common/sessionSync.js
+++ b/resources/js/common/sessionSync.js
@@ -188,7 +188,7 @@ export const initSessionSync = ({
 
   const broadcastSessionEvent = (type, data = {}) => {
     const message = {
-      id: `${sessionTabId}-${Date.now()}`,
+      id: `${sessionTabId}-${Date.now()}-${Math.random().toString(16).slice(2)}`,
       type,
       data,
       from: sessionTabId,

From 81cb879c04c34eb91c7169d66a2d123ee799e5ec Mon Sep 17 00:00:00 2001
From: "Marco A. Nina Mena" <marco.antonio.nina@processmaker.com>
Date: Thu, 22 Jan 2026 19:38:21 -0400
Subject: [PATCH 10/10] Enhance session synchronization by introducing suppress
 warning functionality in sessionSync.js

---
 resources/js/common/sessionSync.js  | 30 ++++++++++++++++++++++++++++-
 resources/js/components/Session.vue |  3 +++
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/resources/js/common/sessionSync.js b/resources/js/common/sessionSync.js
index fb98b5fcbc..19ea8f41d0 100644
--- a/resources/js/common/sessionSync.js
+++ b/resources/js/common/sessionSync.js
@@ -23,6 +23,7 @@ export const initSessionSync = ({
   const sessionWarningKey = "pm:session:warning";
   // Track keep-alive progress across tabs.
   const sessionRenewingKey = "pm:session:renewing";
+  const sessionSuppressKey = "pm:session:suppress-warning";
   const sessionMessageKey = "pm:session:message";
   const sessionTabId = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
   const leaderHeartbeatMs = 4000;
@@ -103,11 +104,18 @@ export const initSessionSync = ({
 
   let warningState = readStorageJson(sessionWarningKey);
   let renewingState = readStorageJson(sessionRenewingKey);
+  let suppressWarningState = readStorageJson(sessionSuppressKey);
 
   const refreshWarningStateFromStorage = () => {
     const storedWarningState = readStorageJson(sessionWarningKey);
     if (storedWarningState?.time && storedWarningState?.ts) {
-      warningState = storedWarningState;
+      // Clear stale warning from previous session.
+      if (sessionState?.startedAt && storedWarningState.ts < sessionState.startedAt) {
+        warningState = null;
+        removeStorageKey(sessionWarningKey);
+      } else {
+        warningState = storedWarningState;
+      }
     } else {
       warningState = null;
     }
@@ -154,10 +162,24 @@ export const initSessionSync = ({
     } else {
       renewingState = null;
       removeStorageKey(sessionRenewingKey);
+      setSuppressWarning(1000);
     }
     syncRenewingUi();
   };
 
+  const refreshSuppressWarningState = () => {
+    const storedSuppressState = readStorageJson(sessionSuppressKey);
+    suppressWarningState = storedSuppressState?.until ? storedSuppressState : null;
+    return suppressWarningState;
+  };
+
+  const setSuppressWarning = (durationMs) => {
+    suppressWarningState = {
+      until: Date.now() + durationMs,
+    };
+    writeStorageJson(sessionSuppressKey, suppressWarningState);
+  };
+
   const sessionChannel = "BroadcastChannel" in window ? new BroadcastChannel(sessionChannelName) : null;
   const recentMessageIds = new Map();
   const recentMessageTtlMs = 5000;
@@ -294,6 +316,10 @@ export const initSessionSync = ({
     if (renewingState?.isRenewing) {
       return;
     }
+    refreshSuppressWarningState();
+    if (suppressWarningState?.until && Date.now() < suppressWarningState.until) {
+      return;
+    }
     sessionDebugLog("warning:show", { remainingTime });
     const sessionModal = resolveSessionModal();
     // Guard for layouts that don't include the session modal.
@@ -344,6 +370,7 @@ export const initSessionSync = ({
       const timeout = Number(message.data?.timeout) || accountTimeoutLength;
       clearWarningState();
       setRenewingState(false);
+      setSuppressWarning(1000);
       setSessionState(timeout);
       const closeSessionModal = resolveCloseSessionModal();
       if (closeSessionModal) {
@@ -555,6 +582,7 @@ export const initSessionSync = ({
       isLeader,
       setSessionState,
       clearWarningState,
+      setRenewingState,
     },
   };
 };
diff --git a/resources/js/components/Session.vue b/resources/js/components/Session.vue
index 227d524912..5f53629e44 100644
--- a/resources/js/components/Session.vue
+++ b/resources/js/components/Session.vue
@@ -163,6 +163,9 @@ export default {
       if (window.ProcessMaker.sessionSync?.broadcast) {
         window.ProcessMaker.sessionSync.broadcast("renewing", { isRenewing });
       }
+      if (window.ProcessMaker.sessionSync?.setRenewingState) {
+        window.ProcessMaker.sessionSync.setRenewingState(isRenewing);
+      }
     },
     broadcastExpired() {
       // Sync timeout state across tabs.