@stigmer/react 0.0.81 → 0.0.83

package/src/mcp-server/McpServerDetailView.tsx

@@ -121,7 +121,7 @@ export function McpServerDetailView({
   className,
 }: McpServerDetailViewProps) {
   const { mcpServer, isLoading, error, refetch } = useMcpServer(org, slug);
-  const credentials = useMcpServerCredentials(org, mcpServer ?? null);
+  const credentials = useMcpServerCredentials(activeOrg ?? org, mcpServer ?? null);
   const connection = useMcpServerConnect();
   const oauth = useMcpServerOAuthConnect();
 
@@ -153,7 +153,11 @@ export function McpServerDetailView({
   const handleConnectClick = useCallback(async () => {
     if (!mcpServer?.metadata?.id) return;
 
-    if (credentials.authMode === "oauth" && !credentials.isOAuthConnected) {
+    if (
+      credentials.authMode === "oauth" &&
+      !credentials.isOAuthConnected &&
+      !credentials.manualOverride
+    ) {
       handleOAuthSignIn();
       return;
     }
@@ -170,7 +174,7 @@ export function McpServerDetailView({
     } catch {
       // error state is managed by the hook
     }
-  }, [mcpServer, credentials.authMode, credentials.isOAuthConnected, credentials.isReady, connection, refetch, handleOAuthSignIn]);
+  }, [mcpServer, credentials.authMode, credentials.isOAuthConnected, credentials.manualOverride, credentials.isReady, connection, refetch, handleOAuthSignIn]);
 
   const handleCredentialSubmit = useCallback(
     async (
@@ -292,6 +296,17 @@ export function McpServerDetailView({
           isOAuthConnected={credentials.isOAuthConnected}
           accessTokenExpiresAt={credentials.accessTokenExpiresAt}
           tokenLifetimeHint={credentials.tokenLifetimeHint}
+          isVendorApprovalPending={credentials.isVendorApprovalPending}
+          vendorApprovalDocsUrl={credentials.vendorApprovalDocsUrl}
+          manualOverride={credentials.manualOverride}
+          onManualOverride={() => {
+            credentials.setManualOverride(true);
+            setShowCredentialForm(true);
+          }}
+          onBackToOAuth={() => {
+            credentials.setManualOverride(false);
+            setShowCredentialForm(false);
+          }}
         />
 
         {showCredentialForm && credentials.missingVariables.length > 0 && (
@@ -361,6 +376,11 @@ function ConnectBar({
   isOAuthConnected,
   accessTokenExpiresAt,
   tokenLifetimeHint,
+  isVendorApprovalPending,
+  vendorApprovalDocsUrl,
+  manualOverride,
+  onManualOverride,
+  onBackToOAuth,
 }: {
   readonly isConnecting: boolean;
   readonly connectionError: Error | null;
@@ -375,6 +395,11 @@ function ConnectBar({
   readonly isOAuthConnected: boolean;
   readonly accessTokenExpiresAt: bigint;
   readonly tokenLifetimeHint: string | null;
+  readonly isVendorApprovalPending: boolean;
+  readonly vendorApprovalDocsUrl: string | null;
+  readonly manualOverride: boolean;
+  readonly onManualOverride: () => void;
+  readonly onBackToOAuth: () => void;
 }) {
   const isOAuthBusy =
     oauthPhase === "initiating" ||
@@ -382,17 +407,22 @@ function ConnectBar({
     oauthPhase === "completing" ||
     oauthPhase === "connecting";
 
+  const showOAuthPrimary =
+    authMode === "oauth" && !isOAuthConnected && !manualOverride;
+
+  const oauthSignInDisabled = isVendorApprovalPending && showOAuthPrimary;
+
   const buttonLabel = (() => {
     if (isOAuthBusy) return oauthPhaseLabel(oauthPhase);
     if (isConnecting) return "Connecting...";
-    if (authMode === "oauth" && !isOAuthConnected) return "Sign in to connect";
+    if (showOAuthPrimary) return "Sign in to connect";
     if (hasDiscoveredTools) return "Reconnect";
     return "Connect";
   })();
 
   const buttonIcon = (() => {
     if (isOAuthBusy || isConnecting) return <Spinner />;
-    if (authMode === "oauth" && !isOAuthConnected) return <OAuthIcon className="size-3.5" />;
+    if (showOAuthPrimary) return <OAuthIcon className="size-3.5" />;
     if (hasDiscoveredTools) return <RefreshIcon className="size-3.5" />;
     return <ConnectIcon className="size-3.5" />;
   })();
@@ -406,6 +436,7 @@ function ConnectBar({
         : "";
       return `Tokens refresh automatically${hint}`;
     }
+    if (manualOverride) return "Entering token manually";
     if (hasDiscoveredTools) return formatConnectionSummary(toolCount, policyCount);
     return "Not connected yet";
   })();
@@ -414,37 +445,43 @@ function ConnectBar({
     <div className="flex flex-col">
       <div className="flex items-center justify-between px-3 py-2">
         <div className="flex items-center gap-2">
-          {authMode === "oauth" && (
+          {authMode === "oauth" && !manualOverride && (
             <span
               className={cn(
                 "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-medium",
                 isOAuthConnected
                   ? "bg-success/10 text-success"
-                  : "bg-muted text-muted-foreground",
+                  : oauthSignInDisabled
+                    ? "bg-amber-500/10 text-amber-600 dark:text-amber-400"
+                    : "bg-muted text-muted-foreground",
               )}
             >
               <span
                 className={cn(
                   "size-1.5 rounded-full",
-                  isOAuthConnected ? "bg-success" : "bg-muted-foreground",
+                  isOAuthConnected
+                    ? "bg-success"
+                    : oauthSignInDisabled
+                      ? "bg-amber-500"
+                      : "bg-muted-foreground",
                 )}
                 aria-hidden="true"
               />
-              {isOAuthConnected ? "Connected" : "Not connected"}
+              {isOAuthConnected ? "Connected" : oauthSignInDisabled ? "Pending approval" : "Not connected"}
             </span>
           )}
           <span className="text-xs text-muted-foreground">
-            {statusText}
+            {oauthSignInDisabled ? "OAuth sign-in is pending vendor approval" : statusText}
           </span>
         </div>
         <button
           type="button"
           onClick={onConnect}
-          disabled={isConnecting || isOAuthBusy || credentialsLoading}
+          disabled={isConnecting || isOAuthBusy || credentialsLoading || oauthSignInDisabled}
           data-cursor-target="connect-button"
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium",
-            authMode === "oauth" && !isOAuthConnected
+            showOAuthPrimary
               ? "bg-primary text-primary-foreground hover:bg-primary-hover"
               : "border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
             "disabled:pointer-events-none disabled:opacity-50",
@@ -455,6 +492,53 @@ function ConnectBar({
         </button>
       </div>
 
+      {/* Vendor approval pending banner with docs link */}
+      {oauthSignInDisabled && (
+        <div className="flex items-start gap-2 border-t border-amber-500/20 bg-amber-500/5 px-3 py-2">
+          <WarningIcon className="mt-0.5 size-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
+          <div className="flex-1 text-xs text-amber-700 dark:text-amber-300">
+            <p>
+              The platform&apos;s OAuth app is awaiting vendor approval.
+              You can still connect by entering your own token manually.
+            </p>
+            {vendorApprovalDocsUrl && (
+              <a
+                href={vendorApprovalDocsUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-1 inline-flex items-center gap-1 underline decoration-amber-600/40 underline-offset-2 hover:decoration-amber-600 dark:decoration-amber-400/40 dark:hover:decoration-amber-400"
+              >
+                Learn how to bring your own token
+                <ExternalLinkIcon className="size-3 shrink-0" />
+              </a>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Secondary action: switch between OAuth and manual token entry */}
+      {authMode === "oauth" && !isOAuthConnected && !isOAuthBusy && !isConnecting && (
+        <div className="border-t border-border px-3 py-1.5">
+          {manualOverride ? (
+            <button
+              type="button"
+              onClick={onBackToOAuth}
+              className="text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
+            >
+              {isVendorApprovalPending ? "Back to OAuth status" : "Sign in with OAuth instead"}
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={onManualOverride}
+              className="text-[11px] text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground hover:decoration-foreground"
+            >
+              Enter token manually
+            </button>
+          )}
+        </div>
+      )}
+
       {connectionError && (
         <div className="flex items-start gap-2 border-t border-destructive/20 bg-destructive/5 px-3 py-2">
           <WarningIcon className="mt-0.5 size-3.5 shrink-0 text-destructive" />

package/src/mcp-server/McpServerPicker.tsx

@@ -272,6 +272,9 @@ export function McpServerPicker({
       ? { type: "configure", serverKey: initialServerKey }
       : { type: "list" },
   );
+  const [manualOverrideKeys, setManualOverrideKeys] = useState<Set<string>>(
+    () => new Set(),
+  );
   const searchRef = useRef<HTMLInputElement>(null);
   const results_ = useScrollShadows();
   const selected_ = useScrollShadows();
@@ -397,13 +400,15 @@ export function McpServerPicker({
     const auth = entry.mcpServer.spec?.auth;
     const oauthTargetEnvVar = auth?.targetEnvVar || null;
     const hasOAuth = !!auth;
+    const isManualOverride = manualOverrideKeys.has(view.serverKey);
 
     const entryMissingVars =
       entry.status === "needsSetup" ? entry.missingVariables : [];
 
-    const filteredMissingVars = oauthTargetEnvVar
-      ? entryMissingVars.filter((v) => v.key !== oauthTargetEnvVar)
-      : entryMissingVars;
+    const filteredMissingVars =
+      oauthTargetEnvVar && !isManualOverride
+        ? entryMissingVars.filter((v) => v.key !== oauthTargetEnvVar)
+        : entryMissingVars;
 
     const hasManualVars = filteredMissingVars.length > 0;
 
@@ -411,24 +416,55 @@ export function McpServerPicker({
       ? entryMissingVars.some((v) => v.key === oauthTargetEnvVar)
       : false;
 
-    const oauthSignInProps = hasOAuth
-      ? {
-          onSignIn: async () => {
-            if (!entry.mcpServer.metadata?.id) return;
-            try {
-              await oauth.startOAuth(entry.mcpServer.metadata.id, activeOrg ?? org);
-              setup.onServerAdded(ref);
-            } catch {
-              // error state managed by oauth hook
-            }
-          },
-          phase: oauth.phase,
-          isConnected: !oauthTokenMissing,
-          error: oauth.error,
-          onClearError: oauth.clearError,
+    const vendorApprovalStatus = auth?.vendorApprovalStatus;
+    const isVendorApprovalPending =
+      hasOAuth && vendorApprovalStatus === 1; // VendorApprovalStatus.PENDING
+
+    const oauthSignInProps =
+      hasOAuth && !isManualOverride
+        ? {
+            onSignIn: async () => {
+              if (!entry.mcpServer.metadata?.id) return;
+              try {
+                await oauth.startOAuth(
+                  entry.mcpServer.metadata.id,
+                  activeOrg ?? org,
+                );
+                setup.onServerAdded(ref);
+              } catch {
+                // error state managed by oauth hook
+              }
+            },
+            phase: oauth.phase,
+            isConnected: !oauthTokenMissing,
+            error: oauth.error,
+            onClearError: oauth.clearError,
+            isVendorApprovalPending,
+            vendorApprovalDocsUrl: auth?.vendorApprovalDocsUrl || null,
+          }
+        : undefined;
+
+    const handleSwitchToManual = hasOAuth
+      ? () => {
+          setManualOverrideKeys((prev) => {
+            const next = new Set(prev);
+            next.add(view.serverKey);
+            return next;
+          });
         }
       : undefined;
 
+    const handleSwitchToOAuth =
+      hasOAuth && isManualOverride
+        ? () => {
+            setManualOverrideKeys((prev) => {
+              const next = new Set(prev);
+              next.delete(view.serverKey);
+              return next;
+            });
+          }
+        : undefined;
+
     return (
       <div className={cn("w-72", className)}>
         <McpServerConfigPanel
@@ -445,6 +481,8 @@ export function McpServerPicker({
                 }
               : undefined
           }
+          onSwitchToManual={handleSwitchToManual}
+          onSwitchToOAuth={handleSwitchToOAuth}
           discoveredTools={entry.discoveredTools}
           toolApprovals={entry.toolApprovals}
           enabledTools={

package/src/mcp-server/OAuthCallbackHandler.tsx

@@ -2,7 +2,10 @@
 
 import { useEffect, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
-import { OAUTH_CALLBACK_MESSAGE_TYPE } from "./useMcpServerOAuthConnect";
+import {
+  OAUTH_CALLBACK_MESSAGE_TYPE,
+  OAUTH_BROADCAST_CHANNEL,
+} from "./useMcpServerOAuthConnect";
 import type { OAuthCallbackMessage } from "./useMcpServerOAuthConnect";
 
 /** Parameters extracted from the OAuth callback URL. */
@@ -92,28 +95,52 @@ export function OAuthCallbackHandler({
       return;
     }
 
+    const message: OAuthCallbackMessage = {
+      type: OAUTH_CALLBACK_MESSAGE_TYPE,
+      code,
+      state,
+    };
+
+    // Always broadcast via BroadcastChannel — works even when
+    // Cross-Origin-Opener-Policy has severed window.opener.
+    let broadcastSent = false;
+    try {
+      const bc = new BroadcastChannel(OAUTH_BROADCAST_CHANNEL);
+      bc.postMessage(message);
+      bc.close();
+      broadcastSent = true;
+    } catch {
+      // BroadcastChannel unavailable — rely on postMessage below.
+    }
+
     const opener = window.opener as Window | null;
     if (opener && !opener.closed) {
-      const message: OAuthCallbackMessage = {
-        type: OAUTH_CALLBACK_MESSAGE_TYPE,
-        code,
-        state,
-      };
-
       try {
         opener.postMessage(message, window.location.origin);
         setStatus("done");
         window.close();
       } catch {
-        setErrorMessage(
-          "Could not communicate with the parent window. " +
-            "Please close this tab and try again.",
-        );
-        setStatus("error");
+        if (broadcastSent) {
+          setStatus("done");
+          window.close();
+        } else {
+          setErrorMessage(
+            "Could not communicate with the parent window. " +
+              "Please close this tab and try again.",
+          );
+          setStatus("error");
+        }
       }
       return;
     }
 
+    // opener is null (COOP case) but BroadcastChannel delivered the message.
+    if (broadcastSent) {
+      setStatus("done");
+      window.close();
+      return;
+    }
+
     if (onFallback) {
       onFallback({ code, state });
       setStatus("done");

package/src/mcp-server/useMcpServerCredentials.ts

@@ -1,8 +1,9 @@
 "use client";
 
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import type { EnvVarInput } from "@stigmer/sdk";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+import { VendorApprovalStatus } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/spec_pb";
 import { usePersonalEnvironment } from "../environment/usePersonalEnvironment";
 import { diffEnv } from "../environment/diffEnv";
 import { SYSTEM_ENV_VAR_KEYS } from "../environment/systemEnvVars";
@@ -91,6 +92,35 @@ export interface UseMcpServerCredentialsReturn {
   readonly isSaving: boolean;
   /** Re-check the personal environment. */
   readonly refetch: () => void;
+  /**
+   * `true` when the referenced OAuthApp's vendor approval is still pending.
+   * When pending, the platform-managed OAuth sign-in flow is unavailable
+   * and the sign-in button should be disabled. Users can still connect
+   * via manual token entry (manual override).
+   */
+  readonly isVendorApprovalPending: boolean;
+  /**
+   * Documentation URL for users who want to bring their own OAuth
+   * credentials while the platform's OAuth app is pending vendor approval.
+   * `null` when no documentation link is available.
+   */
+  readonly vendorApprovalDocsUrl: string | null;
+  /**
+   * When `true`, the user has opted to bypass OAuth and enter the
+   * `target_env_var` token manually. In this state:
+   *
+   * - {@link missingVariables} includes the OAuth-managed variable
+   * - {@link isReady} no longer requires an active OAuth grant
+   *
+   * Only meaningful when `authMode` is `"oauth"`. Has no effect on
+   * manual-only servers.
+   */
+  readonly manualOverride: boolean;
+  /**
+   * Toggle the manual override. Pass `true` to switch from OAuth to
+   * manual token entry; `false` to revert to the OAuth flow.
+   */
+  readonly setManualOverride: (override: boolean) => void;
 }
 
 /**
@@ -121,9 +151,31 @@ export interface UseMcpServerCredentialsReturn {
  * ```tsx
  * const creds = useMcpServerCredentials("acme", mcpServer);
  *
- * // OAuth server — sign-in button + optional manual form
+ * // OAuth server — sign-in button + manual override escape hatch
  * if (creds.authMode === "oauth" && !creds.isOAuthConnected) {
- *   return <button onClick={startOAuth}>Sign in</button>;
+ *   if (creds.manualOverride) {
+ *     // User opted to enter the token manually
+ *     return (
+ *       <>
+ *         <EnvVarForm
+ *           variables={creds.missingVariables}
+ *           onSubmit={(values) => creds.saveCredentials(values)}
+ *           isSubmitting={creds.isSaving}
+ *         />
+ *         <button onClick={() => creds.setManualOverride(false)}>
+ *           Sign in with OAuth instead
+ *         </button>
+ *       </>
+ *     );
+ *   }
+ *   return (
+ *     <>
+ *       <button onClick={startOAuth}>Sign in</button>
+ *       <button onClick={() => creds.setManualOverride(true)}>
+ *         Enter token manually
+ *       </button>
+ *     </>
+ *   );
  * }
  *
  * // Manual vars still needed (mixed mode or manual-only)
@@ -144,12 +196,18 @@ export function useMcpServerCredentials(
   mcpServer: McpServer | null,
 ): UseMcpServerCredentialsReturn {
   const personalEnv = usePersonalEnvironment(org);
+  const [manualOverride, setManualOverride] = useState(false);
 
   const auth = mcpServer?.spec?.auth;
   const authMode: McpServerAuthMode = auth ? "oauth" : "manual";
   const oauthTargetEnvVar = auth?.targetEnvVar || null;
   const tokenLifetimeHint = auth?.tokenLifetimeHint || null;
 
+  const isVendorApprovalPending =
+    authMode === "oauth" &&
+    auth?.vendorApprovalStatus === VendorApprovalStatus.PENDING;
+  const vendorApprovalDocsUrl = auth?.vendorApprovalDocsUrl || null;
+
   const grantStatus = useOAuthGrantStatus(
     authMode === "oauth" ? (mcpServer?.metadata?.id ?? null) : null,
     authMode === "oauth" ? org : null,
@@ -178,15 +236,15 @@ export function useMcpServerCredentials(
   );
 
   const missingVariables = useMemo(() => {
-    if (!oauthTargetEnvVar) return requiredMissing;
+    if (!oauthTargetEnvVar || manualOverride) return requiredMissing;
     return requiredMissing.filter((v) => v.key !== oauthTargetEnvVar);
-  }, [requiredMissing, oauthTargetEnvVar]);
+  }, [requiredMissing, oauthTargetEnvVar, manualOverride]);
 
   const isReady =
     !personalEnv.isLoading &&
     !grantStatus.isLoading &&
     missingVariables.length === 0 &&
-    (authMode === "manual" || isOAuthConnected);
+    (authMode === "manual" || manualOverride || isOAuthConnected);
 
   const saveCredentials = useCallback(
     async (values: Record<string, EnvVarInput>): Promise<void> => {
@@ -207,6 +265,8 @@ export function useMcpServerCredentials(
     isOAuthConnected,
     accessTokenExpiresAt: grantStatus.accessTokenExpiresAt,
     tokenLifetimeHint,
+    isVendorApprovalPending,
+    vendorApprovalDocsUrl,
     missingVariables,
     isReady,
     isLoading: personalEnv.isLoading || grantStatus.isLoading,
@@ -214,5 +274,7 @@ export function useMcpServerCredentials(
     saveCredentials,
     isSaving: personalEnv.isMutating,
     refetch,
+    manualOverride,
+    setManualOverride,
   };
 }

package/src/mcp-server/useMcpServerOAuthConnect.ts

@@ -19,6 +19,14 @@ import { toError } from "../internal/toError";
  */
 export const OAUTH_CALLBACK_MESSAGE_TYPE = "stigmer:oauth:callback";
 
+/**
+ * BroadcastChannel name used as a fallback when `window.opener` is severed
+ * by `Cross-Origin-Opener-Policy` headers on the OAuth provider.
+ *
+ * @internal
+ */
+export const OAUTH_BROADCAST_CHANNEL = "stigmer:oauth:broadcast";
+
 /**
  * Shape of the `postMessage` payload sent from the OAuth callback popup.
  *
@@ -231,6 +239,14 @@ export function useMcpServerOAuthConnect(): UseMcpServerOAuthConnectReturn {
 // Popup callback listener
 // ---------------------------------------------------------------------------
 
+/**
+ * Grace period (ms) after `popup.closed` is first detected before treating
+ * it as a user-initiated close. COOP providers sever the opener reference
+ * immediately, making `popup.closed` appear `true` while the popup is still
+ * active. The grace period lets the BroadcastChannel callback arrive.
+ */
+const POPUP_CLOSED_GRACE_MS = 5_000;
+
 function waitForOAuthCallback(
   popup: Window,
   expectedState: string,
@@ -240,11 +256,13 @@ function waitForOAuthCallback(
     let settled = false;
     let timeoutId: ReturnType<typeof setTimeout>;
     let pollId: ReturnType<typeof setInterval>;
+    let bc: BroadcastChannel | null = null;
 
     function cleanup() {
       if (timeoutId) clearTimeout(timeoutId);
       if (pollId) clearInterval(pollId);
       window.removeEventListener("message", onMessage);
+      try { bc?.close(); } catch { /* ignore */ }
     }
 
     function settle(
@@ -265,10 +283,7 @@ function waitForOAuthCallback(
       closePopup(popup);
     });
 
-    function onMessage(event: MessageEvent) {
-      if (event.origin !== window.location.origin) return;
-
-      const data = event.data as OAuthCallbackMessage | undefined;
+    function validateAndSettle(data: OAuthCallbackMessage | undefined) {
       if (data?.type !== OAUTH_CALLBACK_MESSAGE_TYPE) return;
 
       if (data.state !== expectedState) {
@@ -289,8 +304,23 @@ function waitForOAuthCallback(
       settle({ code: data.code, state: data.state });
     }
 
+    function onMessage(event: MessageEvent) {
+      if (event.origin !== window.location.origin) return;
+      validateAndSettle(event.data as OAuthCallbackMessage | undefined);
+    }
+
     window.addEventListener("message", onMessage);
 
+    // BroadcastChannel — works even when COOP severs window.opener.
+    try {
+      bc = new BroadcastChannel(OAUTH_BROADCAST_CHANNEL);
+      bc.onmessage = (event: MessageEvent) => {
+        validateAndSettle(event.data as OAuthCallbackMessage | undefined);
+      };
+    } catch {
+      // BroadcastChannel unsupported — rely on postMessage only.
+    }
+
     timeoutId = setTimeout(() => {
       settle(
         new Error(
@@ -302,9 +332,20 @@ function waitForOAuthCallback(
       closePopup(popup);
     }, POPUP_CALLBACK_TIMEOUT_MS);
 
+    // COOP providers make popup.closed appear true immediately after
+    // cross-origin navigation. Wait a grace period before treating it
+    // as a real user-initiated close.
+    let popupClosedAt: number | null = null;
+
     pollId = setInterval(() => {
       if (popup.closed) {
-        settle(new Error("The authentication window was closed before completing sign-in."));
+        if (popupClosedAt === null) {
+          popupClosedAt = Date.now();
+        } else if (Date.now() - popupClosedAt > POPUP_CLOSED_GRACE_MS) {
+          settle(new Error("The authentication window was closed before completing sign-in."));
+        }
+      } else {
+        popupClosedAt = null;
       }
     }, 500);
   });