@jetbrains/ring-ui-built 8.0.0-beta.4 → 8.0.0-beta.5

package/components/_helpers/alert.js

@@ -0,0 +1,3 @@
+var styles = {"alert":"ring-alert-alert","alertInline":"ring-alert-alertInline","error":"ring-alert-error","icon":"ring-alert-icon","success":"ring-alert-success","warning":"ring-alert-warning","info":"ring-alert-info","caption":"ring-alert-caption","afterMessage":"ring-alert-afterMessage","badge":"ring-alert-badge","loader":"ring-alert-loader","close":"ring-alert-close","animationOpen":"ring-alert-animationOpen","show":"ring-alert-show","animationClosing":"ring-alert-animationClosing","animationShaking":"ring-alert-animationShaking","shaking":"ring-alert-shaking","heading":"ring-alert-heading","actions":"ring-alert-actions"};
+
+export { styles as s };

package/components/_helpers/caption.js

@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 import classNames from 'classnames';
 import { jsx } from 'react/jsx-runtime';
 
-var styles = {"button":"ring-button-button","active":"ring-button-active","flat":"ring-button-flat","buttonGroup":"ring-button-group-buttonGroup ring-button-group-common ring-button-toolbar-buttonGroup","common":"ring-button-group-common","disabled":"ring-button-group-disabled","split":"ring-button-group-split ring-button-group-common ring-button-toolbar-buttonGroup","caption":"ring-button-group-caption ring-global-font","help":"ring-button-group-help"};
+var styles = {"button":"ring-button-button","buttonActive":"ring-button-active","flat":"ring-button-flat","buttonGroup":"ring-button-group-buttonGroup ring-button-group-common ring-button-toolbar-buttonGroup","common":"ring-button-group-common","disabled":"ring-button-group-disabled","split":"ring-button-group-split ring-button-group-common ring-button-toolbar-buttonGroup","caption":"ring-button-group-caption ring-global-font","help":"ring-button-group-help"};
 
 class Caption extends PureComponent {
   render() {

package/components/_helpers/header.js

@@ -1,3 +1,3 @@
-var styles = {"link":"ring-link-link","active":"ring-link-active","header":"ring-header-header","headerSpaced":"ring-header-headerSpaced","headerVertical":"ring-header-headerVertical","logo":"ring-header-logo","links":"ring-header-links","tray":"ring-header-tray","trayItemContent":"ring-header-trayItemContent","icon":"ring-header-icon","main":"ring-header-main","rotatable":"ring-header-rotatable","rotated":"ring-header-rotated","profileEmpty":"ring-header-profileEmpty","profile":"ring-header-profile ring-header-profileEmpty","anchorClassName":"ring-header-anchorClassName ring-global-resetButton","avatarWrapper":"ring-header-avatarWrapper","hasUpdates":"ring-header-hasUpdates"};
+var styles = {"link":"ring-link-link","linkActive":"ring-link-active","header":"ring-header-header","headerSpaced":"ring-header-headerSpaced","headerVertical":"ring-header-headerVertical","logo":"ring-header-logo","links":"ring-header-links","tray":"ring-header-tray","trayItemContent":"ring-header-trayItemContent","icon":"ring-header-icon","main":"ring-header-main","rotatable":"ring-header-rotatable","rotated":"ring-header-rotated","profileEmpty":"ring-header-profileEmpty","profile":"ring-header-profile ring-header-profileEmpty","anchorClassName":"ring-header-anchorClassName ring-global-resetButton","avatarWrapper":"ring-header-avatarWrapper","hasUpdates":"ring-header-hasUpdates"};
 
 export { styles as s };

package/components/_helpers/table.js

@@ -1,3 +1,3 @@
-var styles = {"headerCell":"ring-table-headerCell","columnReorderHandleMirror":"ring-table-columnReorderHandleMirror","columnReorderHandle":"ring-table-columnReorderHandle","table":"ring-table-table","stickyHeader":"ring-table-stickyHeader","animatedColumnInitial":"ring-table-animatedColumnInitial","animatedColumnFadeOut":"ring-table-animatedColumnFadeOut","headerCellInnerWrapper":"ring-table-headerCellInnerWrapper","sortAndHeader":"ring-table-sortAndHeader","rightButtons":"ring-table-rightButtons","headerButton":"ring-table-headerButton","deleteColumnButton":"ring-table-deleteColumnButton","theadColumnEditing":"ring-table-theadColumnEditing","editColumnsButton":"ring-table-editColumnsButton","columnDragFrame":"ring-table-columnDragFrame","columnInsertionIndicator":"ring-table-columnInsertionIndicator","spacerRow":"ring-table-spacerRow","spacerCell":"ring-table-spacerCell","row":"ring-table-row","clickableRow":"ring-table-clickableRow","selectedRow":"ring-table-selectedRow","cell":"ring-table-cell"};
+var styles = {"headerCell":"ring-table-headerCell","columnReorderHandleMirror":"ring-table-columnReorderHandleMirror","columnReorderHandle":"ring-table-columnReorderHandle","table":"ring-table-table","stickyHeader":"ring-table-stickyHeader","reorderAnimationInitial":"ring-table-reorderAnimationInitial","reorderAnimationFadeOut":"ring-table-reorderAnimationFadeOut","headerCellInnerWrapper":"ring-table-headerCellInnerWrapper","sortAndHeader":"ring-table-sortAndHeader","rightButtons":"ring-table-rightButtons","tableButton":"ring-table-tableButton","deleteColumnButton":"ring-table-deleteColumnButton","theadColumnEditing":"ring-table-theadColumnEditing","itemReorderHandle":"ring-table-itemReorderHandle","editColumnsButton":"ring-table-editColumnsButton","dragFrame":"ring-table-dragFrame","insertionIndicator":"ring-table-insertionIndicator","spacerRow":"ring-table-spacerRow","spacerCell":"ring-table-spacerCell","row":"ring-table-row","clickableRow":"ring-table-clickableRow","selectedRow":"ring-table-selectedRow","cell":"ring-table-cell"};
 
 export { styles as s };

package/components/alert/alert-actions.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLAttributes } from 'react';
+export interface AlertActionsProps extends HTMLAttributes<HTMLDivElement> {
+}
+export default function AlertActions({ className, ...restProps }: AlertActionsProps): import("react").JSX.Element;

package/components/alert/alert-actions.js

@@ -0,0 +1,51 @@
+import { c } from 'react/compiler-runtime';
+import classNames from 'classnames';
+import { s as styles } from '../_helpers/alert.js';
+import { jsx } from 'react/jsx-runtime';
+
+function AlertActions(t0) {
+  const $ = c(9);
+  if ($[0] !== "f2bf4d74f62c680c534a1b2c09bbecda7a0be402ad8ff52746ab70baf15fa92d") {
+    for (let $i = 0; $i < 9; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "f2bf4d74f62c680c534a1b2c09bbecda7a0be402ad8ff52746ab70baf15fa92d";
+  }
+  let className;
+  let restProps;
+  if ($[1] !== t0) {
+    ({
+      className,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = className;
+    $[3] = restProps;
+  } else {
+    className = $[2];
+    restProps = $[3];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = classNames(styles.actions, className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== restProps || $[7] !== t1) {
+    t2 = /*#__PURE__*/jsx("div", {
+      className: t1,
+      ...restProps
+    });
+    $[6] = restProps;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+}
+
+export { AlertActions as default };

package/components/alert/alert-heading.d.ts

@@ -0,0 +1,4 @@
+import { type HeadingProps } from '../heading/heading';
+export interface AlertHeadingProps extends HeadingProps {
+}
+export default function AlertHeading({ level, className, ...restProps }: AlertHeadingProps): import("react").JSX.Element;

package/components/alert/alert-heading.js

@@ -0,0 +1,62 @@
+import { c } from 'react/compiler-runtime';
+import classNames from 'classnames';
+import Heading, { Levels } from '../heading/heading.js';
+import { s as styles } from '../_helpers/alert.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import 'util-deprecate';
+import '../_helpers/heading.js';
+
+function AlertHeading(t0) {
+  const $ = c(11);
+  if ($[0] !== "c9fca3356fdd95bbae28f3096eb908e999b2dc9dec9eca1a04791a4822d1dd43") {
+    for (let $i = 0; $i < 11; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "c9fca3356fdd95bbae28f3096eb908e999b2dc9dec9eca1a04791a4822d1dd43";
+  }
+  let className;
+  let restProps;
+  let t1;
+  if ($[1] !== t0) {
+    ({
+      level: t1,
+      className,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = className;
+    $[3] = restProps;
+    $[4] = t1;
+  } else {
+    className = $[2];
+    restProps = $[3];
+    t1 = $[4];
+  }
+  const level = t1 === undefined ? Levels.H3 : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = classNames(styles.heading, className);
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== level || $[8] !== restProps || $[9] !== t2) {
+    t3 = /*#__PURE__*/jsx(Heading, {
+      level: level,
+      className: t2,
+      ...restProps
+    });
+    $[7] = level;
+    $[8] = restProps;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+}
+
+export { AlertHeading as default };

package/components/alert/alert.d.ts

@@ -1,6 +1,8 @@
 import { PureComponent, type ReactNode } from 'react';
 import * as React from 'react';
 import Theme from '../global/theme';
+import AlertHeading from './alert-heading';
+import AlertActions from './alert-actions';
 export declare const ANIMATION_TIME = 500;
 /**
  * @name Alert
@@ -14,8 +16,16 @@ export declare enum AlertType {
     MESSAGE = "message",
     SUCCESS = "success",
     WARNING = "warning",
-    LOADING = "loading"
+    LOADING = "loading",
+    INFO = "info"
 }
+/**
+ * Maps the values React renders as nothing (except empty arrays/fragments,
+ * which are not worth chasing here) to undefined, so that they neither create
+ * the afterMessage wrapper nor distinguish alerts in the alert-service
+ * duplicate check
+ */
+export declare function normalizeAfterMessage(afterMessage: ReactNode): ReactNode;
 export interface AlertProps {
     theme: Theme;
     timeout: number;
@@ -39,6 +49,7 @@ export interface AlertProps {
     captionClassName?: string | null | undefined;
     closeButtonClassName?: string | null | undefined;
     'data-test'?: string | null | undefined;
+    afterMessage?: ReactNode;
 }
 interface State {
     height: number | null;
@@ -74,6 +85,8 @@ export default class Alert extends PureComponent<AlertProps, State> {
     node?: HTMLDivElement | null;
     hideTimeout?: number;
     static Type: typeof AlertType;
+    static Heading: typeof AlertHeading;
+    static Actions: typeof AlertActions;
     closeRequest: (event: React.MouseEvent<HTMLElement>) => void;
     startCloseAnimation: () => void;
     private _close;

package/components/alert/alert.js

@@ -1,8 +1,9 @@
 import { PureComponent } from 'react';
 import classNames from 'classnames';
 import exceptionIcon from '@jetbrains/icons/exception';
-import checkmarkIcon from '@jetbrains/icons/checkmark';
+import successIcon from '@jetbrains/icons/success';
 import warningIcon from '@jetbrains/icons/warning';
+import infoIcon from '@jetbrains/icons/info-filled';
 import closeIcon from '@jetbrains/icons/close';
 import Icon from '../icon/icon.js';
 import LoaderInline from '../loader-inline/loader-inline.js';
@@ -10,10 +11,13 @@ import { getRect } from '../global/dom.js';
 import joinDataTestAttributes from '../global/data-tests.js';
 import { Button } from '../button/button.js';
 import { T as Theme, a as ThemeProvider } from '../_helpers/theme.js';
+import AlertHeading from './alert-heading.js';
+import AlertActions from './alert-actions.js';
+import { s as styles } from '../_helpers/alert.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 export { default as Container } from './container.js';
-import { Color } from '../icon/icon.constants.js';
 import 'util-deprecate';
+import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import 'react/compiler-runtime';
 import '../global/memoize.js';
@@ -23,10 +27,10 @@ import '../link/clickable-link.js';
 import '../global/controls-height.js';
 import '../global/configuration.js';
 import '../_helpers/button.classes.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
 import 'react-dom';
 
-var styles = {"alert":"ring-alert-alert","alertInline":"ring-alert-alertInline","error":"ring-alert-error","icon":"ring-alert-icon","caption":"ring-alert-caption","withCloseButton":"ring-alert-withCloseButton","badge":"ring-alert-badge","loader":"ring-alert-loader","close":"ring-alert-close","animationOpen":"ring-alert-animationOpen","show":"ring-alert-show","animationClosing":"ring-alert-animationClosing","animationShaking":"ring-alert-animationShaking","shaking":"ring-alert-shaking"};
-
 const ANIMATION_TIME = 500;
 /**
  * @name Alert
@@ -42,6 +46,7 @@ var AlertType;
   AlertType["SUCCESS"] = "success";
   AlertType["WARNING"] = "warning";
   AlertType["LOADING"] = "loading";
+  AlertType["INFO"] = "info";
 })(AlertType || (AlertType = {}));
 /**
  * Lookup table of alert type to icon modifier.
@@ -49,18 +54,19 @@ var AlertType;
  */
 const TypeToIcon = {
   [AlertType.ERROR]: exceptionIcon,
-  [AlertType.SUCCESS]: checkmarkIcon,
-  [AlertType.WARNING]: warningIcon
+  [AlertType.SUCCESS]: successIcon,
+  [AlertType.WARNING]: warningIcon,
+  [AlertType.INFO]: infoIcon
 };
 /**
- * Lookup table of alert type to icon color.
- * @type {Object.<AlertType, Icon.Color>}
+ * Maps the values React renders as nothing (except empty arrays/fragments,
+ * which are not worth chasing here) to undefined, so that they neither create
+ * the afterMessage wrapper nor distinguish alerts in the alert-service
+ * duplicate check
  */
-const TypeToIconColor = {
-  [AlertType.ERROR]: Color.RED,
-  [AlertType.SUCCESS]: Color.GREEN,
-  [AlertType.WARNING]: Color.WHITE
-};
+function normalizeAfterMessage(afterMessage) {
+  return afterMessage == null || typeof afterMessage === 'boolean' || afterMessage === '' ? undefined : afterMessage;
+}
 /**
  * @constructor
  * @name Alert
@@ -102,6 +108,8 @@ class Alert extends PureComponent {
   node;
   hideTimeout;
   static Type = AlertType;
+  static Heading = AlertHeading;
+  static Actions = AlertActions;
   closeRequest = event => {
     this.startCloseAnimation();
     return this.props.onCloseRequest(event);
@@ -123,7 +131,8 @@ class Alert extends PureComponent {
    * @private
    */
   _handleCaptionsLinksClick = evt => {
-    if (evt.target instanceof Element && evt.target.matches('a')) {
+    const link = evt.target instanceof Element ? evt.target.closest('a') : null;
+    if (link != null && evt.currentTarget.contains(link)) {
       this.closeRequest(evt);
     }
   };
@@ -131,10 +140,8 @@ class Alert extends PureComponent {
    * @private
    */
   _getCaption() {
-    return /*#__PURE__*/jsx("span", {
-      className: classNames(styles.caption, this.props.captionClassName, {
-        [styles.withCloseButton]: this.props.closeable
-      }),
+    return /*#__PURE__*/jsx("div", {
+      className: classNames(styles.caption, this.props.captionClassName),
       onClick: this._handleCaptionsLinksClick
       // We only process clicks on `a` elements, see above
       ,
@@ -151,8 +158,7 @@ class Alert extends PureComponent {
     if (glyph) {
       return /*#__PURE__*/jsx(Icon, {
         glyph: glyph,
-        className: styles.icon,
-        color: TypeToIconColor[this.props.type] || Color.DEFAULT
+        className: styles.icon
       });
     }
     if (this.props.type === AlertType.LOADING) {
@@ -175,12 +181,16 @@ class Alert extends PureComponent {
       showWithAnimation,
       className,
       'data-test': dataTest,
-      theme
+      theme,
+      afterMessage
     } = this.props;
     const classes = classNames(className, {
       [styles.alert]: true,
       [styles.animationOpen]: showWithAnimation,
-      [styles.error]: type === 'error',
+      [styles.error]: type === AlertType.ERROR,
+      [styles.success]: type === AlertType.SUCCESS,
+      [styles.warning]: type === AlertType.WARNING,
+      [styles.info]: type === AlertType.INFO,
       [styles.alertInline]: inline,
       [styles.animationClosing]: isClosing,
       [styles.animationShaking]: isShaking
@@ -189,6 +199,7 @@ class Alert extends PureComponent {
     const style = height ? {
       marginBottom: -height
     } : undefined;
+    const shownAfterMessage = normalizeAfterMessage(afterMessage);
     return /*#__PURE__*/jsxs(ThemeProvider, {
       theme: theme,
       className: classes,
@@ -196,15 +207,22 @@ class Alert extends PureComponent {
       "data-test-type": type,
       style: style,
       ref: this.storeAlertRef,
-      children: [this._getIcon(), this._getCaption(), this.props.closeable ? /*#__PURE__*/jsx(Button, {
+      children: [this._getIcon(), this._getCaption(), shownAfterMessage != null && /*#__PURE__*/jsx("div", {
+        className: styles.afterMessage,
+        onClick: this._handleCaptionsLinksClick
+        // We only process clicks on `a` elements, see above
+        ,
+        role: "presentation",
+        children: shownAfterMessage
+      }), this.props.closeable ? /*#__PURE__*/jsx(Button, {
         icon: closeIcon,
         className: classNames(styles.close, closeButtonClassName),
         "data-test": "alert-close",
         "aria-label": "close alert",
         onClick: this.closeRequest
-      }) : '']
+      }) : null]
     });
   }
 }
 
-export { ANIMATION_TIME, AlertType, Alert as default };
+export { ANIMATION_TIME, AlertType, Alert as default, normalizeAfterMessage };

package/components/alert-service/alert-service.d.ts

@@ -20,7 +20,7 @@ export declare class AlertService {
      * Renders alert container into virtual node to skip maintaining container
      */
     renderAlerts(): void;
-    findSameAlert(message: ReactNode, type: AlertType | undefined): AlertItem;
+    findSameAlert(message: ReactNode, type: AlertType | undefined, afterMessage?: ReactNode): AlertItem | undefined;
     startAlertClosing(alert: AlertItem): void;
     remove(key: string | number | null | undefined): void;
     removeWithoutAnimation(key: string | number): void;
@@ -31,6 +31,7 @@ export declare class AlertService {
     message(message: ReactNode, timeout?: number): string | number;
     warning(message: ReactNode, timeout?: number): string | number;
     successMessage(message: ReactNode, timeout?: number): string | number;
+    infoMessage(message: ReactNode, timeout?: number): string | number;
     loadingMessage(message: ReactNode, timeout?: number): string | number;
 }
 declare const alertService: AlertService;

package/components/alert-service/alert-service.js

@@ -1,13 +1,14 @@
 import { createRoot } from 'react-dom/client';
 import getUID from '../global/get-uid.js';
-import Alert, { ANIMATION_TIME } from '../alert/alert.js';
+import Alert, { normalizeAfterMessage, ANIMATION_TIME } from '../alert/alert.js';
 import { jsx } from 'react/jsx-runtime';
 import Alerts from '../alert/container.js';
 import 'react';
 import 'classnames';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../icon/icon.js';
 import 'util-deprecate';
@@ -26,6 +27,11 @@ import '../global/controls-height.js';
 import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../_helpers/theme.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import 'react-dom';
 
 const DEFAULT_ALERT_TIMEOUT = 10000; // 10 seconds
@@ -65,8 +71,9 @@ class AlertService {
   renderAlerts() {
     this.reactRoot.render(this.renderAlertContainer(this.showingAlerts));
   }
-  findSameAlert(message, type) {
-    return this.showingAlerts.filter(it => it.type === type && it.message === message)[0];
+  findSameAlert(message, type, afterMessage) {
+    const normalizedAfterMessage = normalizeAfterMessage(afterMessage);
+    return this.showingAlerts.find(it => it.type === type && it.message === message && normalizeAfterMessage(it.afterMessage) === normalizedAfterMessage);
   }
   startAlertClosing(alert) {
     alert.isClosing = true;
@@ -96,7 +103,7 @@ class AlertService {
       onClose,
       ...restOptions
     } = options;
-    const sameAlert = this.findSameAlert(message, type);
+    const sameAlert = this.findSameAlert(message, type, options.afterMessage);
     if (sameAlert) {
       sameAlert.isShaking = true;
       this.renderAlerts();
@@ -138,6 +145,9 @@ class AlertService {
   successMessage(message, timeout) {
     return this.addAlert(message, Alert.Type.SUCCESS, timeout);
   }
+  infoMessage(message, timeout) {
+    return this.addAlert(message, Alert.Type.INFO, timeout);
+  }
   loadingMessage(message, timeout) {
     return this.addAlert(message, Alert.Type.LOADING, timeout);
   }

package/components/auth/auth-core.d.ts

@@ -171,18 +171,13 @@ declare class Auth implements HTTPAuth {
     requestToken(): Promise<string | null>;
     /**
      * Get new token in the background or redirect to the login page.
-     *
-     * Retries background token refresh with delays from {@link AuthConfig.tokenRefreshRetryDelays}
-     * with increasing delays before showing the auth dialog.
-     * This handles transient failures that commonly occur after network
-     * recovery (e.g. waking from sleep, switching networks) where the first
-     * iframe-based auth attempt fails but a subsequent one succeeds once
-     * the Hub session is re-established.
-     *
      * @return {Promise.<string | null>}
      */
-    forceTokenUpdate(): Promise<string | null>;
+    forceTokenUpdate(failedToken?: string | null): Promise<string | null>;
     private _doForceTokenUpdate;
+    private _refreshTokenUnderWebLock;
+    private _refreshTokenOrReuseChanged;
+    private _handleTokenRefreshFailure;
     loadCurrentService(): Promise<void>;
     getAPIPath(): string;
     /**
@@ -195,6 +190,7 @@ declare class Auth implements HTTPAuth {
     requestUser(): Promise<any>;
     updateUser(): Promise<void>;
     _detectUserChange(accessToken: string): Promise<void>;
+    private _getUserWithTokenRefresh;
     _beforeLogout(params?: AuthDialogParams): void;
     _showAuthDialog({ nonInteractive, error, canCancel, onTryAgain }?: AuthDialogParams): void;
     _showUserChangedDialog({ newUser, onApply, onPostpone }: UserChangedDialogParams): void;

package/components/auth/auth-core.js

@@ -1,7 +1,7 @@
 import 'core-js/modules/es.array.includes.js';
 import { getAbsoluteBaseURL, fixUrl } from '../global/url.js';
 import Listeners from '../global/listeners.js';
-import HTTP from '../http/http.js';
+import HTTP, { HTTPError, CODE } from '../http/http.js';
 import promiseWithTimeout from '../global/promise-with-timeout.js';
 import { getTranslationsWithFallback, translate, getTranslations } from '../i18n/i18n.js';
 import AuthStorage from './storage.js';
@@ -17,8 +17,9 @@ import '../alert/alert.js';
 import 'react';
 import 'classnames';
 import '@jetbrains/icons/exception';
-import '@jetbrains/icons/checkmark';
+import '@jetbrains/icons/success';
 import '@jetbrains/icons/warning';
+import '@jetbrains/icons/info-filled';
 import '@jetbrains/icons/close';
 import '../icon/icon.js';
 import 'util-deprecate';
@@ -38,6 +39,11 @@ import '../global/controls-height.js';
 import '../global/configuration.js';
 import '../_helpers/button.classes.js';
 import '../_helpers/theme.js';
+import '../alert/alert-heading.js';
+import '../heading/heading.js';
+import '../_helpers/heading.js';
+import '../_helpers/alert.js';
+import '../alert/alert-actions.js';
 import '../alert/container.js';
 import 'react-dom';
 import 'simply-uuid';
@@ -49,6 +55,7 @@ const DEFAULT_BACKEND_CHECK_TIMEOUT = 10 * 1000;
 const BACKGROUND_REDIRECT_TIMEOUT = 20 * 1000;
 const DEFAULT_WAIT_FOR_REDIRECT_TIMEOUT = 5 * 1000;
 const TOKEN_REFRESH_RETRY_DELAYS = [0, 2000, 5000];
+const TOKEN_REFRESH_LOCK_TIMEOUT = 15 * 1000;
 const USER_CHANGED_EVENT = 'userChange';
 const DOMAIN_USER_CHANGED_EVENT = 'domainUser';
 const LOGOUT_EVENT = 'logout';
@@ -398,27 +405,20 @@ class Auth {
   }
   /**
    * Get new token in the background or redirect to the login page.
-   *
-   * Retries background token refresh with delays from {@link AuthConfig.tokenRefreshRetryDelays}
-   * with increasing delays before showing the auth dialog.
-   * This handles transient failures that commonly occur after network
-   * recovery (e.g. waking from sleep, switching networks) where the first
-   * iframe-based auth attempt fails but a subsequent one succeeds once
-   * the Hub session is re-established.
-   *
    * @return {Promise.<string | null>}
    */
-  forceTokenUpdate() {
+  forceTokenUpdate(failedToken) {
     if (this._forceTokenUpdatePromise) {
       return this._forceTokenUpdatePromise;
     }
-    this._forceTokenUpdatePromise = this._doForceTokenUpdate().finally(() => {
+    this._forceTokenUpdatePromise = this._doForceTokenUpdate(failedToken).finally(() => {
       this._forceTokenUpdatePromise = null;
     });
     return this._forceTokenUpdatePromise;
   }
-  async _doForceTokenUpdate() {
-    var _lastError$message;
+  async _doForceTokenUpdate(failedToken) {
+    var _ref;
+    const previousToken = (_ref = failedToken !== null && failedToken !== void 0 ? failedToken : (await this._storage?.getToken())?.accessToken) !== null && _ref !== void 0 ? _ref : null;
     try {
       if (!this._backendCheckPromise) {
         this._backendCheckPromise = this._checkBackendsStatusesIfEnabled();
@@ -431,6 +431,39 @@ class Auth {
     } finally {
       this._backendCheckPromise = null;
     }
+    const attempt = await this._refreshTokenUnderWebLock(previousToken);
+    if ('token' in attempt) {
+      return attempt.token;
+    }
+    return this._handleTokenRefreshFailure(attempt.error);
+  }
+  async _refreshTokenUnderWebLock(previousToken) {
+    if (navigator.locks == null) {
+      return this._refreshTokenOrReuseChanged(previousToken);
+    }
+    const lockName = `ring-ui-token-refresh-${this.config.clientId}`;
+    try {
+      return await navigator.locks.request(lockName, {
+        signal: AbortSignal.timeout(TOKEN_REFRESH_LOCK_TIMEOUT)
+      }, () => this._refreshTokenOrReuseChanged(previousToken));
+    } catch {
+      return this._refreshTokenOrReuseChanged(previousToken);
+    }
+  }
+  async _refreshTokenOrReuseChanged(previousToken) {
+    var _lastError;
+    let storedToken = null;
+    try {
+      var _await$this$_tokenVal2;
+      storedToken = (_await$this$_tokenVal2 = await this._tokenValidator?.validateTokenLocally()) !== null && _await$this$_tokenVal2 !== void 0 ? _await$this$_tokenVal2 : null;
+    } catch {
+      // No valid local token — fall through to refresh.
+    }
+    if (storedToken != null && storedToken !== previousToken) {
+      return {
+        token: storedToken
+      };
+    }
     let lastError = null;
     for (const delay of this.config.tokenRefreshRetryDelays) {
       if (delay > 0) {
@@ -438,11 +471,18 @@ class Auth {
       }
       try {
         var _await$this$_backgrou;
-        return (_await$this$_backgrou = await this._backgroundFlow?.authorize()) !== null && _await$this$_backgrou !== void 0 ? _await$this$_backgrou : null;
+        return {
+          token: (_await$this$_backgrou = await this._backgroundFlow?.authorize()) !== null && _await$this$_backgrou !== void 0 ? _await$this$_backgrou : null
+        };
       } catch (error) {
         lastError = error instanceof Error ? error : new Error(String(error));
       }
     }
+    return {
+      error: (_lastError = lastError) !== null && _lastError !== void 0 ? _lastError : new Error('Failed to refresh token')
+    };
+  }
+  async _handleTokenRefreshFailure(lastError) {
     if (this._canShowDialogs()) {
       return new Promise(resolve => {
         const onTryAgain = async () => {
@@ -471,7 +511,7 @@ class Auth {
     if (authRequest) {
       this._redirectCurrentPage(authRequest.url);
     }
-    throw new TokenValidator.TokenValidationError((_lastError$message = lastError?.message) !== null && _lastError$message !== void 0 ? _lastError$message : 'Failed to refresh token');
+    throw new TokenValidator.TokenValidationError(lastError.message);
   }
   async loadCurrentService() {
     if (this._service.serviceName) {
@@ -528,7 +568,7 @@ class Auth {
   }
   async _detectUserChange(accessToken) {
     const windowWasOpen = this._isLoginWindowOpen;
-    const user = await this.getUser(accessToken);
+    const user = await this._getUserWithTokenRefresh(accessToken);
     const onApply = () => {
       this.user = user;
       this.listeners.trigger(USER_CHANGED_EVENT, user);
@@ -554,6 +594,20 @@ class Auth {
       });
     }
   }
+  async _getUserWithTokenRefresh(accessToken) {
+    try {
+      return await this.getUser(accessToken);
+    } catch (error) {
+      if (!(error instanceof HTTPError) || error.status !== CODE.UNAUTHORIZED) {
+        throw error;
+      }
+      const attempt = await this._refreshTokenUnderWebLock(accessToken);
+      if ('error' in attempt) {
+        throw error;
+      }
+      return this.getUser(attempt.token);
+    }
+  }
   _beforeLogout(params) {
     if (this._canShowDialogs()) {
       const onTryAgain = async () => {