@andrey4emk/npm-app-front-b24 0.2.0 → 0.4.0

package/Subscriptions.vue

@@ -1,142 +1,272 @@
 <template>
-    <div class="Subscriptions">
-        <h1>Страница подписок</h1>
-        <button @click="selectTab('tab1')">Сущности</button>
-        <button @click="selectTab('tab2')">События</button>
-        <br /><br /><br />
-
-        <!-- Вкладка 1 -->
-        <div v-if="tabs.tab1">
-            <div>
-                <button @click="loadOfflineEntitiesList" :disabled="loading">Обновить</button>
-                <!-- Чекбокс для запуска автообновления сущностей. При наведении выходит сообщение "автообновление каждые 3 секунды" -->
-                <label class="switch tooltipParent" style="top: 12px">
-                    <input type="checkbox" v-model="autoRefresh" @change="autoRefreshEntities" />
-                    <span class="slider"></span>
-                    <span class="tooltip">Автообновление каждые 3 секунды</span>
-                </label>
-            </div>
+    <div class="Subscriptions subscriptions">
+        <h1 class="subscriptions__title">Страница подписок</h1>
 
-            <div v-if="entities.list.length > 0">
-                <p><button @click="deleteOfflineEntitiesAll">Удалить все</button><button @click="deleteOfflineEntitiesAllEmpty">Удалить все пустые</button> Всего измененных сущностей {{ entities.total }}</p>
-                <table class="main" v-if="entities.list.length">
-                    <thead>
-                        <tr>
-                            <th>#</th>
-                            <th>Удалить</th>
-                            <th>Обновить</th>
-                            <th>Дата</th>
-                            <th>PROCESS_ID</th>
-                            <th>EVENT_NAME</th>
-                            <th>Ссылка</th>
-                            <th>EVENT_DATA</th>
-                            <th>who_update</th>
-                            <th>entity</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="(entity, index) in entities.list" :key="entity.PROCESS_ID + '-' + entity.ID">
-                            <td>{{ index + 1 }}</td>
-                            <!-- Удалить -->
-                            <td>
-                                <button @click="deleteOfflineEntities(entity)">Удалить</button>
-                            </td>
-                            <!-- Изменить -->
-                            <td>
-                                <button v-if="entity.EVENT_DATA.FIELDS?.ID && (entity.EVENT_NAME == 'ONCRMDEALUPDATE' || entity.EVENT_NAME.includes('ONCRMDYNAMICITEMUPDATE_'))" @click="entityUpdate(entity)">Изменить</button>
-                            </td>
-                            <td>{{ formatDate(entity.TIMESTAMP_X) }}</td>
-                            <td>{{ entity.PROCESS_ID }}</td>
-                            <td>{{ entity.EVENT_NAME }}</td>
-                            <td>
-                                <a v-if="entity.EVENT_DATA.FIELDS?.ID && entity.EVENT_NAME == 'ONCRMDEALUPDATE'" :href="'https://repacheb.bitrix24.ru/crm/deal/details/' + entity.EVENT_DATA.FIELDS?.ID + '/'" target="_blank" rel="noopener noreferrer"> {{ entity.EVENT_DATA.FIELDS?.ID }} </a>
-                            </td>
-                            <td>
-                                {{ entity.EVENT_DATA }}
-                            </td>
-                            <td>{{ entity.EVENT_ADDITIONAL.user_id }}</td>
-                            <td class="tooltipParent" style="">
-                                <span>Подробней</span>
-                                <span class="tooltip"> {{ entity }}</span>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            <div v-else>Список сущностей пуст.</div>
-        </div>
-
-        <!-- Вкладка 2 -->
-        <div v-if="tabs.tab2">
-            <div>
-                <h3>Подписаны на события:</h3>
-                <table class="main" v-if="subscribedEvents.length">
-                    <thead>
-                        <tr>
-                            <th>Событие</th>
-                            <th>connector_id</th>
-                            <th>offline</th>
-                            <th>Отписаться</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="event in subscribedEvents" :key="event.id">
-                            <td>
-                                {{ event.event }}
-                            </td>
-                            <td>
-                                {{ event.connector_id }}
-                            </td>
-                            <td>
-                                {{ event.offline }}
-                            </td>
-                            <td>
-                                <button @click="unbindSubscribedEvents(event)">Отписаться от событий</button>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-                <p v-else>Подписок на события нет.</p>
+        <!-- Без клиента Bitrix24 компонент не работает, но и не падает -->
+        <p v-if="!b24Client" class="subscriptions__empty">Клиент Bitrix24 не инициализирован</p>
+
+        <template v-else>
+            <div class="subscriptions__tabs">
+                <button @click="selectTab('tab1')" :class="{ 'subscriptions__tab--active': tabs.tab1 }">Сущности</button>
+                <button @click="selectTab('tab2')" :class="{ 'subscriptions__tab--active': tabs.tab2 }">События</button>
             </div>
 
-            <div>
-                <h3>На какие события можно подписаться:</h3>
-                <table class="main" v-if="events.length">
-                    <thead>
-                        <tr>
-                            <th>Событие</th>
-                            <th>Подписаться</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr v-for="event in events" :key="event">
-                            <td>{{ event }}</td>
-                            <!-- <td><button @click="subscribeToEvents(event)">Подписаться</button></td> -->
-                            <td><button @click="subscribeToEvents(event)" :disabled="isSubscribed(event)" :class="{ 'disabled-button': isSubscribed(event) }">Подписаться</button></td>
-                        </tr>
-                    </tbody>
-                </table>
-                <p v-else>Список событий пуст.</p>
+            <!-- Вкладка 1 -->
+            <div v-if="tabs.tab1">
+                <div>
+                    <button @click="loadOfflineEntitiesList" :disabled="loading">Обновить</button>
+                    <!-- Тумблер автообновления. Имена switch, slider, tooltip, tooltipParent оставлены
+                         навсегда как точки подключения для стилей потребителей: своих правил у пакета
+                         на них нет, их вешают b24_change_entity, b24_desktop и b24_conector -->
+                    <label class="subscriptions__switch subscriptions__tooltip-parent switch tooltipParent">
+                        <input type="checkbox" v-model="autoRefresh" @change="autoRefreshEntities" />
+                        <span class="subscriptions__slider slider"></span>
+                        <span class="subscriptions__tooltip tooltip">Автообновление каждые 3 секунды</span>
+                    </label>
+                </div>
+
+                <!-- Обратная связь показывается и при пустом списке: иначе ошибка загрузки не видна -->
+                <div v-if="error" class="subscriptions__message subscriptions__message--error">{{ error }}</div>
+                <div v-else-if="message" class="subscriptions__message subscriptions__message--success">{{ message }}</div>
+
+                <div v-if="entities.list.length > 0">
+                    <div class="subscriptions__actions">
+                        <button @click="deleteOfflineEntitiesAll" :disabled="busy">{{ confirmAllLabel }}</button>
+                        <button @click="deleteOfflineEntitiesAllEmpty" :disabled="busy">{{ confirmEmptyLabel }}</button>
+                        <span>Всего измененных сущностей {{ entities.total }}</span>
+                    </div>
+
+                    <table class="main subscriptions__table" v-if="entities.list.length">
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>Удалить</th>
+                                <th>Обновить</th>
+                                <th>Дата</th>
+                                <th>PROCESS_ID</th>
+                                <th>EVENT_NAME</th>
+                                <th>Ссылка</th>
+                                <th>EVENT_DATA</th>
+                                <th>who_update</th>
+                                <th>entity</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="(entity, index) in entities.list" :key="entity.PROCESS_ID + '-' + entity.ID">
+                                <td>{{ index + 1 }}</td>
+                                <!-- Удалить -->
+                                <td>
+                                    <button @click="deleteOfflineEntities(entity)" :disabled="busy">Удалить</button>
+                                </td>
+                                <!-- Изменить -->
+                                <td>
+                                    <button v-if="entity.EVENT_DATA?.FIELDS?.ID && (entity.EVENT_NAME === 'ONCRMDEALUPDATE' || String(entity.EVENT_NAME || '').includes('ONCRMDYNAMICITEMUPDATE_'))" @click="entityUpdate(entity)" :disabled="busy">Изменить</button>
+                                </td>
+                                <td>{{ formatDate(entity.TIMESTAMP_X) }}</td>
+                                <td>{{ entity.PROCESS_ID }}</td>
+                                <td>{{ entity.EVENT_NAME }}</td>
+                                <td>
+                                    <a v-if="entityLink(entity)" :href="entityLink(entity)" target="_blank" rel="noopener noreferrer">{{ entity.EVENT_DATA?.FIELDS?.ID }}</a>
+                                    <span v-else>{{ entity.EVENT_DATA?.FIELDS?.ID }}</span>
+                                </td>
+                                <td>
+                                    {{ entity.EVENT_DATA }}
+                                </td>
+                                <td>{{ entity.EVENT_ADDITIONAL?.user_id }}</td>
+                                <!-- tooltipParent / tooltip — только точки подключения для стилей потребителя -->
+                                <td class="subscriptions__tooltip-parent tooltipParent">
+                                    <span>Подробней</span>
+                                    <span class="subscriptions__tooltip tooltip"> {{ entity }}</span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div v-else>Список сущностей пуст.</div>
             </div>
-        </div>
 
-        <!-- Вкладка 3 -->
-        <div v-if="tabs.tab3"></div>
+            <!-- Вкладка 2 -->
+            <div v-if="tabs.tab2">
+                <div v-if="error" class="subscriptions__message subscriptions__message--error">{{ error }}</div>
+                <div v-else-if="message" class="subscriptions__message subscriptions__message--success">{{ message }}</div>
+
+                <div>
+                    <h3 class="subscriptions__subtitle">Подписаны на события:</h3>
+                    <table class="main subscriptions__table" v-if="subscribedEvents.length">
+                        <thead>
+                            <tr>
+                                <th>Событие</th>
+                                <th>connector_id</th>
+                                <th>offline</th>
+                                <th>Отписаться</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <!-- event.get отдаёт { event, connector_id, offline } без id — ключ собираем из пары событие + коннектор -->
+                            <tr v-for="event in subscribedEvents" :key="event.event + '-' + event.connector_id">
+                                <td>
+                                    {{ event.event }}
+                                </td>
+                                <td>
+                                    {{ event.connector_id }}
+                                </td>
+                                <td>
+                                    {{ event.offline }}
+                                </td>
+                                <td>
+                                    <button @click="unbindSubscribedEvents(event)" :disabled="busy">Отписаться от событий</button>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <p v-else>Подписок на события нет.</p>
+                </div>
+
+                <div>
+                    <h3 class="subscriptions__subtitle">На какие события можно подписаться:</h3>
+                    <table class="main subscriptions__table" v-if="events.length">
+                        <thead>
+                            <tr>
+                                <th>Событие</th>
+                                <th>Подписаться</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="event in events" :key="event">
+                                <td>{{ event }}</td>
+                                <td><button @click="subscribeToEvents(event)" :disabled="busy || isSubscribed(event)" :class="{ 'subscriptions__button--disabled': isSubscribed(event) }">Подписаться</button></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <p v-else>Список событий пуст.</p>
+                </div>
+            </div>
+        </template>
     </div>
 </template>
 
 <script>
-import { DateTime } from "luxon";
+// Интервал автообновления списка сущностей, мс
+const AUTO_REFRESH_MS = 3000;
+// Сколько кнопка удерживает состояние «Точно удалить?», мс
+const CONFIRM_TIMEOUT_MS = 4000;
+// Потолок команд в одном batch — ограничение платформы Bitrix24
+const BATCH_CHUNK_SIZE = 50;
+// Потолок итераций цикла очистки очереди — страховка от вечного цикла
+const MAX_CLEAR_ITERATIONS = 100;
+
+// Настройки формата dd.MM HH:mm:ss. Указан только hourCycle: при hour12: false
+// часть движков отдаёт 24 вместо 00 для полуночи
+const DATE_FORMAT_OPTIONS = {
+    day: "2-digit",
+    month: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hourCycle: "h23",
+};
+
+// Кэш форматтеров по зоне: Intl.DateTimeFormat дорого конструировать на каждую строку
+// таблицы. Ключ "" — зона браузера. Кэш модульный, поэтому общий для всех экземпляров
+const DATE_FORMATTER_CACHE = new Map();
+
+function createDateFormatter(timeZone) {
+    const options = timeZone ? { ...DATE_FORMAT_OPTIONS, timeZone: timeZone } : DATE_FORMAT_OPTIONS;
+    return new Intl.DateTimeFormat("ru-RU", options);
+}
+
+/**
+ * Форматтер для зоны IANA. Неизвестная зона роняет конструктор Intl.DateTimeFormat,
+ * поэтому отказ ловится и подменяется зоной браузера: строка таблицы важнее точной зоны.
+ * Возвращает null, если Intl недоступен вовсе.
+ */
+function getDateFormatter(timeZone) {
+    // trim: зона с пробелами по краям роняла Intl и плодила лишний ключ кэша
+    const key = String(timeZone || "").trim();
+    if (DATE_FORMATTER_CACHE.has(key)) return DATE_FORMATTER_CACHE.get(key);
+
+    let formatter = null;
+    if (key) {
+        try {
+            formatter = createDateFormatter(key);
+        } catch (zoneError) {
+            console.error(`Неизвестная временная зона "${key}", даты показываются в зоне браузера:`, zoneError);
+        }
+    }
+    if (!formatter) {
+        // Откат на зону браузера. Отдельный ключ "" в кэше, поэтому лишний объект не создаётся
+        if (DATE_FORMATTER_CACHE.has("")) {
+            formatter = DATE_FORMATTER_CACHE.get("");
+        } else {
+            try {
+                formatter = createDateFormatter("");
+            } catch (formatterError) {
+                console.error("Не удалось создать формат даты:", formatterError);
+                formatter = null;
+            }
+            DATE_FORMATTER_CACHE.set("", formatter);
+        }
+    }
+    DATE_FORMATTER_CACHE.set(key, formatter);
+    return formatter;
+}
+
+/**
+ * Приводит метку времени к виду dd.MM HH:mm:ss.
+ * Склейка через formatToParts: обычный format() в ru-RU ставит запятую между датой и временем.
+ */
+function formatTimestamp(value, formatter) {
+    if (!value) return "";
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return String(value);
+    if (!formatter) return String(value);
+    try {
+        const parts = {};
+        for (const part of formatter.formatToParts(date)) {
+            parts[part.type] = part.value;
+        }
+        return `${parts.day}.${parts.month} ${parts.hour}:${parts.minute}:${parts.second}`;
+    } catch (formatError) {
+        console.error("Не удалось отформатировать дату:", formatError);
+        return String(value);
+    }
+}
+
+/**
+ * Режет массив на куски заданного размера.
+ */
+function chunkArray(items, size) {
+    const chunks = [];
+    for (let index = 0; index < items.length; index += size) {
+        chunks.push(items.slice(index, index + size));
+    }
+    return chunks;
+}
 
 export default {
     name: "Subscriptions",
-    // props: {
-    //     b24: { type: Object, default: null },
-    //     initialAuthConnector: { type: String, default: "" },
-    //     autoStart: { type: Boolean, default: true },
-    // },
+    props: {
+        // Клиент Bitrix24 (B24Frame). Приоритетный источник
+        b24: { type: /** @type {import("vue").PropType<object | null>} */ (Object), required: false },
+        // Значение auth_connector для методов работы с событиями
+        authConnector: { type: String, default: "" },
+        // Переопределение адреса портала: принимается и https://portal.bitrix24.ru, и голый portal.bitrix24.ru
+        portalDomain: { type: String, default: "" },
+        // Часовой пояс для дат таблицы, строка IANA вида "Europe/Moscow".
+        // Пустая строка — зона браузера. Неизвестная зона не роняет рендер:
+        // компонент откатывается на зону браузера и пишет причину в консоль
+        timeZone: { type: String, default: "" },
+    },
+    inject: {
+        // Тот же ключ, под которым потребители кладут клиент через app.provide
+        injectedB24: { from: "$b24", default: null },
+    },
     data() {
         return {
+            tabs: {
+                tab1: true,
+                tab2: false,
+            },
             events: [],
             subscribedEvents: [],
             entities: {
@@ -144,262 +274,948 @@ export default {
                 total: 0,
             },
             autoRefresh: true,
-            auth_connector: "",
+            loading: false,
+            busy: false,
+            error: "",
+            message: "",
+            refreshTimerId: null,
+            isUnmounted: false,
+            // Признак того, что текущий текст в error поставлен неудачной загрузкой списка.
+            // Только такую ошибку удачное автообновление имеет право погасить
+            loadFailed: false,
+            // Какая кнопка ждёт второго клика: "" | "all" | "empty"
+            confirmAction: "",
+            confirmTimerId: null,
         };
     },
-    computed: {},
+    computed: {
+        // Клиент Bitrix24: prop → inject → глобальный window.$b24
+        b24Client() {
+            if (this.b24) return this.b24;
+            if (this.injectedB24) return this.injectedB24;
+            if (typeof window !== "undefined" && window.$b24) return window.$b24;
+            return null;
+        },
+        // Адрес портала без завершающего слэша, "" — определить не удалось
+        portalOrigin() {
+            try {
+                if (this.portalDomain) {
+                    const domain = String(this.portalDomain).replace(/\/+$/, "");
+                    return /^https?:\/\//i.test(domain) ? domain : `https://${domain}`;
+                }
+                const client = this.b24Client;
+                if (!client) return "";
+                if (typeof client.getTargetOrigin === "function") {
+                    const origin = client.getTargetOrigin();
+                    if (origin) return String(origin).replace(/\/+$/, "");
+                }
+                // getAuthData() отдаёт false, когда токен истёк
+                const authData = client.auth && typeof client.auth.getAuthData === "function" ? client.auth.getAuthData() : null;
+                if (authData && authData.domain) {
+                    const domain = String(authData.domain).replace(/\/+$/, "");
+                    return /^https?:\/\//i.test(domain) ? domain : `https://${domain}`;
+                }
+                return "";
+            } catch (originError) {
+                console.error("Не удалось определить адрес портала:", originError);
+                return "";
+            }
+        },
+        confirmAllLabel() {
+            return this.confirmAction === "all" ? "Точно удалить?" : "Удалить все";
+        },
+        confirmEmptyLabel() {
+            return this.confirmAction === "empty" ? "Точно удалить?" : "Удалить все пустые";
+        },
+        // Форматтер дат под текущую зону. Computed, а не вызов в методе:
+        // так зависимость от prop timeZone видна реактивности явно,
+        // а поиск в кэше делается один раз на смену зоны, а не на каждую ячейку
+        dateFormatter() {
+            return getDateFormatter(this.timeZone);
+        },
+    },
     methods: {
+        selectTab(name) {
+            for (const key of Object.keys(this.tabs)) {
+                this.tabs[key] = key === name;
+            }
+        },
         formatDate(timestamp) {
-            if (!timestamp) return "";
-            return DateTime.fromISO(timestamp).toFormat("dd.MM HH:mm:ss");
+            return formatTimestamp(timestamp, this.dateFormatter);
         },
         pause(ms) {
             return new Promise((resolve) => setTimeout(resolve, ms));
         },
+
+        // --- Обратная связь пользователю ---
+
+        clearFeedback() {
+            this.error = "";
+            this.message = "";
+            this.loadFailed = false;
+        },
+        showError(text) {
+            this.error = String(text);
+            this.message = "";
+            // Владение плашкой переходит к вызвавшей операции; ветки загрузки
+            // ставят loadFailed уже после вызова showError
+            this.loadFailed = false;
+        },
+        showMessage(text) {
+            this.message = String(text);
+            this.error = "";
+            this.loadFailed = false;
+        },
+        /**
+         * Клиент Bitrix24 или null. При отсутствии клиента сам показывает ошибку —
+         * вызывающему остаётся только выйти
+         */
+        ensureClient() {
+            const b24 = this.b24Client;
+            if (!b24) {
+                this.showError("Клиент Bitrix24 не инициализирован");
+                return null;
+            }
+            return b24;
+        },
+        // Текст исключения
+        errorText(err) {
+            if (err instanceof Error) return err.message;
+            if (typeof err === "string") return err;
+            return String(err);
+        },
+        // Текст ошибок ответа SDK (Result / AjaxResult)
+        resultErrors(result) {
+            let texts = [];
+            try {
+                if (result && typeof result.getErrorMessagesByKey === "function") {
+                    // SDK >= 2.0.0: видно, какая команда batch упала
+                    const byKey = result.getErrorMessagesByKey() || {};
+                    texts = Object.entries(byKey).map(([key, messages]) => `${key}: ${[].concat(messages).join(", ")}`);
+                } else if (result && typeof result.getErrorMessages === "function") {
+                    texts = result.getErrorMessages() || [];
+                }
+            } catch (readError) {
+                console.error("Не удалось прочитать текст ошибки ответа:", readError);
+            }
+            const text = texts.filter((item) => item).join("; ");
+            return text || "портал не вернул текст ошибки";
+        },
+        // Тексты ошибок по ключам команд batch: { clear_3: "...", clear_7: "..." }
+        resultErrorsByKey(result) {
+            try {
+                if (result && typeof result.getErrorMessagesByKey === "function") {
+                    const byKey = result.getErrorMessagesByKey() || {};
+                    const normalized = {};
+                    for (const [key, messages] of Object.entries(byKey)) {
+                        normalized[key] = [].concat(messages).filter((item) => item).join(", ");
+                    }
+                    return normalized;
+                }
+            } catch (readError) {
+                console.error("Не удалось прочитать ошибки batch по ключам:", readError);
+            }
+            return {};
+        },
+
+        // --- Подтверждение вторым кликом вместо confirm() ---
+
+        requestConfirm(action) {
+            if (this.confirmAction !== action) {
+                this.resetConfirm();
+                this.confirmAction = action;
+                this.confirmTimerId = setTimeout(() => this.resetConfirm(), CONFIRM_TIMEOUT_MS);
+                return false;
+            }
+            this.resetConfirm();
+            return true;
+        },
+        resetConfirm() {
+            if (this.confirmTimerId !== null) {
+                clearTimeout(this.confirmTimerId);
+                this.confirmTimerId = null;
+            }
+            this.confirmAction = "";
+        },
+
+        /**
+         * Определяет ENTITY_TYPE_ID смарт-процесса: сначала из FIELDS, затем из имени события.
+         * Общий разбор для ссылки и для обновления — иначе событие без ENTITY_TYPE_ID в FIELDS
+         * уходит в ветку сделки. Возвращает "" когда тип определить не удалось.
+         */
+        resolveEntityTypeId(entity) {
+            const entityTypeId = entity?.EVENT_DATA?.FIELDS?.ENTITY_TYPE_ID;
+            if (Number(entityTypeId) > 0) return String(entityTypeId);
+            // В части событий FIELDS приходит без ENTITY_TYPE_ID — берём из имени события
+            const matched = String(entity?.EVENT_NAME || "").match(/^ONCRMDYNAMICITEMUPDATE_(\d+)$/);
+            if (matched && Number(matched[1]) > 0) return matched[1];
+            return "";
+        },
+
+        // Ссылка на сущность на текущем портале, "" — построить не удалось
+        entityLink(entity) {
+            const origin = this.portalOrigin;
+            if (!origin) return "";
+            const id = entity?.EVENT_DATA?.FIELDS?.ID;
+            if (!id) return "";
+            const entityTypeId = this.resolveEntityTypeId(entity);
+            if (entityTypeId) return `${origin}/crm/type/${entityTypeId}/details/${id}/`;
+            if (entity?.EVENT_NAME === "ONCRMDEALUPDATE") return `${origin}/crm/deal/details/${id}/`;
+            return "";
+        },
+
+        // --- Работа с событиями Bitrix24 ---
+
         async eventsList() {
-            console.log("Запускаем eventsList");
+            const b24 = this.ensureClient();
+            if (!b24) return;
             try {
-                let result = await $b24.callMethod("events", {
-                    // auth: access_token,
-                    // scope: "crm",
-                });
-                this.events = result.getData().result;
-            } catch (error) {
-                console.error("Ошибка при получении списка событий:", error);
+                const result = await b24.callMethod("events", {});
+                // Сравнение с false намеренно явное и повторяется во всех вызовах ниже:
+                // потребители подставляют шим-клиенты, у которых ответ без поля isSuccess.
+                // undefined тогда трактуется как отказ, хотя запрос прошёл.
+                // У настоящего AjaxResult геттер всегда булев, поэтому === false ловит те же отказы.
+                if (result.isSuccess === false) {
+                    this.showError(`Не удалось получить список событий: ${this.resultErrors(result)}`);
+                    return;
+                }
+                this.events = result.getData()?.result || [];
+            } catch (callError) {
+                console.error("Ошибка при получении списка событий:", callError);
+                this.showError(`Ошибка при получении списка событий: ${this.errorText(callError)}`);
             }
         },
+
         async subscribeToEvents(event) {
+            const b24 = this.ensureClient();
+            if (!b24) return;
+            this.clearFeedback();
+            this.busy = true;
             try {
-                await $b24.callMethod("event.bind", {
+                // handler обязателен даже для оффлайн-событий: портал его не вызывает,
+                // но без параметра event.bind отвечает ошибкой
+                const handler = typeof window !== "undefined" && window.location ? window.location.origin : "";
+                const result = await b24.callMethod("event.bind", {
                     event: event,
                     event_type: "offline",
-                    // auth_type: "138",
-                    auth_connector: this.auth_connector,
+                    handler: handler,
+                    auth_connector: this.authConnector,
                 });
-                console.log(`Подписались на событие ${event}.`);
-            } catch (error) {
-                console.error("Ошибка при подписке на события:", error);
+                if (result.isSuccess === false) {
+                    this.showError(`Не удалось подписаться на событие ${event}: ${this.resultErrors(result)}`);
+                    return;
+                }
+                this.showMessage(`Подписались на событие ${event}`);
+                await this.pause(1000);
+                await this.getSubscribedEvents();
+            } catch (callError) {
+                console.error("Ошибка при подписке на события:", callError);
+                this.showError(`Ошибка при подписке на событие ${event}: ${this.errorText(callError)}`);
+            } finally {
+                this.busy = false;
+                // Пока операция шла, вкладку могли скрыть и снова открыть: перезапуск
+                // цепочки идемпотентен и молчит при выключенном тумблере и скрытой вкладке
+                this.startAutoRefresh();
             }
-            await this.pause(1000);
-            await this.getSubscribedEvents();
         },
 
         async getSubscribedEvents() {
+            const b24 = this.ensureClient();
+            if (!b24) return;
             try {
-                let result = await $b24.callMethod("event.get", {});
-                this.subscribedEvents = result.getData().result;
-                console.log("Подписанные события:", this.subscribedEvents);
-            } catch (error) {
-                console.error("Ошибка при получении подписанных событий:", error);
+                const result = await b24.callMethod("event.get", {});
+                if (result.isSuccess === false) {
+                    this.showError(`Не удалось получить подписанные события: ${this.resultErrors(result)}`);
+                    return;
+                }
+                this.subscribedEvents = result.getData()?.result || [];
+            } catch (callError) {
+                console.error("Ошибка при получении подписанных событий:", callError);
+                this.showError(`Ошибка при получении подписанных событий: ${this.errorText(callError)}`);
             }
         },
 
         async unbindSubscribedEvents(event) {
+            const b24 = this.ensureClient();
+            if (!b24) return;
+            this.clearFeedback();
+            this.busy = true;
             try {
-                await $b24.callMethod("event.unbind", {
+                const result = await b24.callMethod("event.unbind", {
                     event: event.event,
                     event_type: event.offline == 1 ? "offline" : "online",
                     auth_connector: event.connector_id,
                 });
+                if (result.isSuccess === false) {
+                    this.showError(`Не удалось отписаться от события ${event.event}: ${this.resultErrors(result)}`);
+                    return;
+                }
+                this.showMessage(`Отписались от события ${event.event}`);
                 await this.pause(1000);
                 await this.getSubscribedEvents();
-            } catch (error) {
-                console.error("Ошибка при отписке от событий:", error);
+            } catch (callError) {
+                console.error("Ошибка при отписке от событий:", callError);
+                this.showError(`Ошибка при отписке от события ${event.event}: ${this.errorText(callError)}`);
+            } finally {
+                this.busy = false;
+                // Пока операция шла, вкладку могли скрыть и снова открыть: перезапуск
+                // цепочки идемпотентен и молчит при выключенном тумблере и скрытой вкладке
+                this.startAutoRefresh();
             }
         },
 
         async loadOfflineEntitiesList() {
-            // console.log(`Запустили loadOfflineEntitiesList`);
-            let start = 0;
-            let result = await $b24.callListMethod(
-                "event.offline.list",
-                {
-                    start: start,
-                    auth_connector: this.auth_connector,
-                    // clear: 0,
+            const b24 = this.ensureClient();
+            // Порядок обязателен: showError внутри ensureClient сбрасывает loadFailed,
+            // поэтому флаг ставится после проверки
+            if (!b24) {
+                this.loadFailed = true;
+                return;
+            }
+            this.loading = true;
+            try {
+                // callListMethod отдаёт плоский массив, а не { result }
+                const result = await b24.callListMethod("event.offline.list", {
+                    start: 0,
+                    auth_connector: this.authConnector,
+                });
+                if (result.isSuccess === false) {
+                    // Старый список полезнее пустого — entities.list не обнуляем
+                    this.showError(`Не удалось получить список сущностей: ${this.resultErrors(result)}`);
+                    this.loadFailed = true;
+                    return;
                 }
-                // (progress) => {
-                //     console.log(`Загрузка: ${progress.toFixed(0)}%`);
-                // }
-            );
-
-            // console.log("Всего сущностей:", result.getData().length);
-            // console.log("Список сущностей:", result.getData());
-            this.entities.list = result.getData();
-            this.entities.total = result.getData().length;
-        },
-
-        async deleteOfflineEntities(entities) {
-            let result = await $b24.callMethod("event.offline.clear", {
-                process_id: entities.PROCESS_ID,
-                id: [entities.ID],
-                auth_connector: this.auth_connector,
+                const rows = result.getData() || [];
+                this.entities.list = rows;
+                this.entities.total = rows.length;
+                // Гасим только свою ошибку: message не трогаем, иначе удачное автообновление
+                // сотрёт «Запись N удалена из очереди», поставленное секунду назад
+                if (this.loadFailed) {
+                    this.error = "";
+                    this.loadFailed = false;
+                }
+            } catch (callError) {
+                console.error("Ошибка при получении списка оффлайн-сущностей:", callError);
+                this.showError(`Ошибка при получении списка сущностей: ${this.errorText(callError)}`);
+                this.loadFailed = true;
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        /**
+         * Снимает одну запись из оффлайн-очереди. Возвращает признак успеха.
+         */
+        async deleteOfflineEntities(entity) {
+            const b24 = this.ensureClient();
+            if (!b24) return false;
+            // event.offline.clear работает только по process_id: для свободной записи вызов бессмысленный
+            if (!entity?.PROCESS_ID) {
+                this.showError("У записи пустой PROCESS_ID — снимается кнопкой «Удалить все пустые»");
+                return false;
+            }
+            this.clearFeedback();
+            this.busy = true;
+            try {
+                const result = await b24.callMethod("event.offline.clear", {
+                    process_id: entity.PROCESS_ID,
+                    id: [entity.ID],
+                    auth_connector: this.authConnector,
+                });
+                if (result.isSuccess === false) {
+                    this.showError(`Не удалось удалить запись из очереди: ${this.resultErrors(result)}`);
+                    return false;
+                }
+                this.showMessage(`Запись ${entity.ID} удалена из очереди`);
+                // Портал отдаёт очередь с задержкой
+                await this.pause(1000);
+                await this.loadOfflineEntitiesList();
+                return true;
+            } catch (callError) {
+                console.error("Ошибка при удалении записи из оффлайн-очереди:", callError);
+                this.showError(`Ошибка при удалении записи из очереди: ${this.errorText(callError)}`);
+                return false;
+            } finally {
+                this.busy = false;
+                // Пока операция шла, вкладку могли скрыть и снова открыть: перезапуск
+                // цепочки идемпотентен и молчит при выключенном тумблере и скрытой вкладке
+                this.startAutoRefresh();
+            }
+        },
+
+        /**
+         * Читает страницу очереди. Возвращает { rows, error }: непустой error означает,
+         * что проход надо оборвать
+         */
+        async readOfflineQueuePage(b24) {
+            // callListMethod проходит очередь целиком: страница из 50 записей с пустым
+            // PROCESS_ID иначе закрывает собой зарезервированные пачки и цикл встаёт
+            const pageResult = await b24.callListMethod("event.offline.list", {
+                start: 0,
+                auth_connector: this.authConnector,
             });
-            console.log("Удалили сущности из оффлан событий:", result.getData());
-            await this.pause(1000);
-            await this.loadOfflineEntitiesList();
+            if (pageResult.isSuccess === false) {
+                return { rows: [], error: this.resultErrors(pageResult) };
+            }
+            return { rows: pageResult.getData() || [], error: "" };
         },
 
-        async deleteOfflineEntitiesAll() {
-            if (!confirm("Вы уверены, что хотите удалить все НЕ обработанные сущности? Это действие необратимо!")) {
-                return;
+        /**
+         * Уникальные PROCESS_ID страницы и те из них, что ещё не сняты.
+         * Чистая функция от аргументов, поэтому её удобно звать и из отчёта
+         */
+        collectProcessIds(rows, clearedProcessIds) {
+            // Дедупликация обязательна: очередь обычно принадлежит нескольким пачкам
+            const processIds = [...new Set(rows.map((row) => row.PROCESS_ID).filter((id) => id))];
+            // Пачки, снятые на прошлых итерациях, портал может отдавать повторно
+            const freshProcessIds = processIds.filter((processId) => !clearedProcessIds.has(processId));
+            return { processIds, freshProcessIds };
+        },
+
+        /**
+         * Команды batch для одной пачки PROCESS_ID
+         */
+        buildClearCommands(chunk) {
+            const commands = {};
+            chunk.forEach((processId, index) => {
+                commands[`clear_${index}`] = {
+                    method: "event.offline.clear",
+                    params: {
+                        process_id: processId,
+                        auth_connector: this.authConnector,
+                    },
+                };
+            });
+            return commands;
+        },
+
+        /**
+         * Отправляет один batch и пополняет множество снятых пачек.
+         * Возвращает текст неудачи или "" — пачка снята целиком
+         */
+        async sendClearChunk(b24, chunk, clearedProcessIds) {
+            const commands = this.buildClearCommands(chunk);
+            // isHaltOnError: false — одна протухшая пачка не должна валить остальные
+            const batchResult = await b24.callBatch(commands, false);
+
+            // SDK роняет isSuccess всего результата от одной упавшей подкоманды,
+            // а в данные кладёт только удачные. Поэтому снятой считается пачка,
+            // чей ключ есть в getData(), а не вся пачка по общему флагу.
+            // Признаком успеха служит наличие ключа команды в данных batch,
+            // значение под ключом не проверяется
+            const batchData = typeof batchResult?.getData === "function" ? batchResult.getData() : null;
+            const hasKeyedData = !!batchData && typeof batchData === "object" && !Array.isArray(batchData);
+            const errorsByKey = hasKeyedData ? this.resultErrorsByKey(batchResult) : {};
+            // Причина отказа всего конверта: при мягком отказе SDK 2.x кладёт ошибки
+            // под base-error и пустую карту данных, а в SDK 1.x метода
+            // getErrorMessagesByKey нет вовсе — по ключу команды тогда пусто
+            const fallbackReason = this.resultErrors(batchResult);
+            const notCleared = [];
+
+            chunk.forEach((processId, index) => {
+                const key = `clear_${index}`;
+                if (!hasKeyedData) {
+                    // Шим-клиент потребителя без пооперационных данных:
+                    // судим по флагу всего batch, как до правки
+                    if (batchResult?.isSuccess === false) notCleared.push({ processId, key });
+                    else clearedProcessIds.add(processId);
+                    return;
+                }
+                if (Object.prototype.hasOwnProperty.call(batchData, key)) {
+                    clearedProcessIds.add(processId);
+                    return;
+                }
+                notCleared.push({ processId, key });
+            });
+
+            if (!notCleared.length) return "";
+            // В текст идут первые три пачки: при отказе всех пятидесяти
+            // сообщение иначе не помещается на экран
+            const details = notCleared
+                .slice(0, 3)
+                .map(({ processId, key }) => `${processId}: ${errorsByKey[key] || fallbackReason}`);
+            const tail = notCleared.length > 3 ? `, и ещё ${notCleared.length - 3}` : "";
+            return `не снято пачек ${notCleared.length} (${details.join("; ")}${tail})`;
+        },
+
+        /**
+         * Итоговый отчёт прохода. Возвращает { kind: "error" | "message", text }
+         */
+        buildClearReport({ failures, reachedLimit, stoppedOnRepeat, stoppedOnEmpty, clearedCount }) {
+            if (failures.length) {
+                return { kind: "error", text: `Очищено пачек: ${clearedCount}, проход остановлен. Ошибки: ${failures.join("; ")}` };
+            } else if (reachedLimit) {
+                return { kind: "error", text: `Достигнут потолок в ${MAX_CLEAR_ITERATIONS} итераций, очередь очищена не полностью. Очищено пачек: ${clearedCount}` };
+            } else if (stoppedOnRepeat) {
+                return { kind: "error", text: `Очищено пачек: ${clearedCount}. Остановка: ${stoppedOnRepeat}` };
+            } else if (stoppedOnEmpty) {
+                return { kind: "message", text: `Очищено пачек: ${clearedCount}. ${stoppedOnEmpty}` };
             }
+            return { kind: "message", text: `Очищено пачек: ${clearedCount}` };
+        },
 
-            let pageAll = this.entities.total / 50 + 1;
-            console.log("Всего страниц для удаления:", pageAll);
-            // Цикл по всем страницам для удаления всех сущностей
-            for (let page = 1; page <= pageAll; page++) {
-                // Получаем первые сущности
-                let resAll = await $b24.callMethod("event.offline.list", {
-                    start: 0,
-                });
-                // Получаем массив PROCESS_ID
-                let processIds = resAll
-                    .getData()
-                    .result.map((entity) => entity.PROCESS_ID)
-                    .filter((id) => id);
-                // Добавляем в массив пустой PROCESS_ID для удаления не обработанных сущностей
-                // processIds.push("");
-                console.log("PROCESS_ID для удаления:", processIds);
-                // Формируем batch запрос для удаления всех сущностей с указанными PROCESS_ID одним запросов
-                let batchCommands = {};
-                processIds.forEach((processId, index) => {
-                    batchCommands[`clear_${index}`] = {
-                        method: "event.offline.clear",
-                        params: {
-                            process_id: processId,
-                        },
-                    };
-                });
-                console.log("batchCommands:", batchCommands);
-                let batchResult = await $b24.callBatch(batchCommands);
-                console.log("Результат batch удаления сущностей:", batchResult.getData());
+        async deleteOfflineEntitiesAll() {
+            if (!this.requestConfirm("all")) return;
+            const b24 = this.ensureClient();
+            if (!b24) return;
+            this.clearFeedback();
+            this.busy = true;
+            // Фоновое обновление конкурирует с удалением и мигает таблицей
+            const wasAutoRefresh = this.autoRefresh;
+            this.stopAutoRefresh();
+
+            const failures = [];
+            // Пачки, снятие которых портал подтвердил ключом в данных batch:
+            // размер множества — честный счётчик для отчёта
+            const clearedProcessIds = new Set();
+            let reachedLimit = false;
+            let stoppedOnEmpty = "";
+            let stoppedOnRepeat = "";
+            let iteration = 0;
+            try {
+                for (; iteration < MAX_CLEAR_ITERATIONS; iteration++) {
+                    // 1. Очередная страница очереди
+                    const page = await this.readOfflineQueuePage(b24);
+                    if (page.error) {
+                        failures.push(page.error);
+                        break;
+                    }
+                    if (!page.rows.length) break;
+
+                    // 2. Что на странице вообще можно снять
+                    const { processIds, freshProcessIds } = this.collectProcessIds(page.rows, clearedProcessIds);
+                    if (!processIds.length) {
+                        // Свободные записи этим методом не снимаются — иначе цикл крутится до потолка итераций
+                        stoppedOnEmpty = `Остались записи с пустым PROCESS_ID (${page.rows.length}) — снимаются кнопкой «Удалить все пустые»`;
+                        break;
+                    }
+                    if (!freshProcessIds.length) {
+                        stoppedOnRepeat =
+                            "портал снова отдал уже снятые пачки. Команды clear отработали без ошибок, скорее всего очередь обновляется с задержкой — обновите список через минуту. Если записи останутся, значит clear их не снял";
+                        break;
+                    }
+
+                    // 3. Резка по 50: в один batch больше команд платформа не принимает
+                    for (const chunk of chunkArray(freshProcessIds, BATCH_CHUNK_SIZE)) {
+                        const failure = await this.sendClearChunk(b24, chunk, clearedProcessIds);
+                        if (failure) failures.push(failure);
+                    }
+                    // 4. Если пачка не удаляется, следующая итерация увидит те же PROCESS_ID
+                    if (failures.length) break;
+                    // 5. Портал отдаёт очередь с задержкой — перечитывать сразу бессмысленно
+                    await this.pause(1000);
+                }
+                reachedLimit = iteration >= MAX_CLEAR_ITERATIONS;
+            } catch (callError) {
+                console.error("Ошибка при массовом удалении сущностей:", callError);
+                failures.push(this.errorText(callError));
+            } finally {
+                this.busy = false;
+                if (wasAutoRefresh) this.startAutoRefresh();
             }
+
+            const report = this.buildClearReport({
+                failures: failures,
+                reachedLimit: reachedLimit,
+                stoppedOnRepeat: stoppedOnRepeat,
+                stoppedOnEmpty: stoppedOnEmpty,
+                clearedCount: clearedProcessIds.size,
+            });
+            if (report.kind === "error") this.showError(report.text);
+            else this.showMessage(report.text);
+
             await this.pause(500);
+            // Размонтирование могло случиться, пока шла очистка
+            if (this.isUnmounted) return;
             await this.loadOfflineEntitiesList();
         },
 
         async deleteOfflineEntitiesAllEmpty() {
-            if (!confirm("Вы уверены, что хотите удалить все пустые НЕ обработанные сущности? Это действие необратимо!")) {
-                return;
+            if (!this.requestConfirm("empty")) return;
+            const b24 = this.ensureClient();
+            if (!b24) return;
+            this.clearFeedback();
+            this.busy = true;
+            // Фоновое обновление конкурирует с удалением: симметрично deleteOfflineEntitiesAll
+            const wasAutoRefresh = this.autoRefresh;
+            this.stopAutoRefresh();
+            try {
+                // Множество ID свободных записей до вызова. Разница по длинам списков врала:
+                // события, пришедшие во время операции, маскировали снятые вплоть до минуса
+                const emptyIdsBefore = new Set(
+                    this.entities.list
+                        .filter((row) => !row?.PROCESS_ID)
+                        // ID портал отдаёт то строкой, то числом — сравниваем строками
+                        .map((row) => (row?.ID === undefined || row?.ID === null ? "" : String(row.ID)))
+                        .filter((id) => id !== "")
+                );
+                // Снимаем записи с пустым PROCESS_ID — по process_id их не удалить
+                const result = await b24.callMethod("event.offline.clear", {
+                    process_id: "",
+                    auth_connector: this.authConnector,
+                });
+                if (result.isSuccess === false) {
+                    this.showError(`Не удалось удалить записи с пустым PROCESS_ID: ${this.resultErrors(result)}`);
+                    return;
+                }
+                await this.pause(500);
+                await this.loadOfflineEntitiesList();
+                // Ошибку перезагрузки не затираем: без свежего списка считать не по чему
+                if (this.error) return;
+
+                if (!emptyIdsBefore.size) {
+                    // Иначе «Портал не снял ни одной» выглядит как отказ, хотя снимать было нечего
+                    this.showMessage("В списке не было записей с пустым PROCESS_ID — снимать было нечего");
+                    return;
+                }
+                // Сверяем со всем свежим списком, а не только со свободными записями:
+                // запись, которой портал за это время выдал PROCESS_ID, из очереди не ушла
+                const idsAfter = new Set(
+                    this.entities.list.map((row) => (row?.ID === undefined || row?.ID === null ? "" : String(row.ID)))
+                );
+                let removedCount = 0;
+                for (const id of emptyIdsBefore) {
+                    if (!idsAfter.has(id)) removedCount++;
+                }
+                if (removedCount > 0) {
+                    // Формулировка нейтральна к авторству: часть записей мог снять
+                    // серверный коллектор потребителя за паузу перед перечиткой
+                    this.showMessage(`Ушло из очереди записей: ${removedCount} из ${emptyIdsBefore.size}`);
+                } else {
+                    this.showMessage("Из очереди не ушла ни одна запись с пустым PROCESS_ID");
+                }
+            } catch (callError) {
+                console.error("Ошибка при удалении сущностей с пустым PROCESS_ID:", callError);
+                this.showError(`Ошибка при удалении записей с пустым PROCESS_ID: ${this.errorText(callError)}`);
+            } finally {
+                this.busy = false;
+                if (wasAutoRefresh) this.startAutoRefresh();
             }
-            // Удаляем последний раз, чтобы удалить сущности с пустым PROCESS_ID
-            let finalResult = await $b24.callMethod("event.offline.clear", {
-                process_id: "",
-            });
-            console.log("Результат  удаления сущностей с пустым PROCESS_ID:", finalResult.getData());
         },
 
         isSubscribed(event) {
-            // console.log(event);
-            // console.log(this.subscribedEvents);
             return this.subscribedEvents.some((subEvent) => subEvent.event == event);
         },
 
+        // --- Автообновление ---
+
+        startAutoRefresh() {
+            // Защита от двойного таймера
+            this.stopAutoRefresh();
+            if (!this.autoRefresh || this.isUnmounted) return;
+            // На скрытой вкладке цепочку не заводим: 4 запроса каждые 3 секунды съедают
+            // общий лимит REST портала впустую. Перезапустит handleVisibilityChange
+            if (typeof document !== "undefined" && document.visibilityState === "hidden") return;
+            this.refreshTimerId = setTimeout(async () => {
+                this.refreshTimerId = null;
+                if (this.isUnmounted) return;
+                await this.loadOfflineEntitiesList();
+                // Размонтирование могло случиться, пока висел запрос
+                if (this.isUnmounted) return;
+                this.startAutoRefresh();
+            }, AUTO_REFRESH_MS);
+        },
+
+        stopAutoRefresh() {
+            if (this.refreshTimerId !== null) {
+                clearTimeout(this.refreshTimerId);
+                this.refreshTimerId = null;
+            }
+        },
+
+        // Обработчик @change тумблера: выключение отменяет уже отложенный вызов
         autoRefreshEntities() {
-            // console.log("Запущена функция автообновления сущностей autoRefreshEntities, проверяем состояние autoRefresh");
             if (this.autoRefresh) {
-                // console.log("Автообновление включено. Обновляем список сущностей через 3 секунд.");
-                setTimeout(async () => {
-                    await this.loadOfflineEntitiesList();
-                    this.autoRefreshEntities();
-                }, 3000);
+                this.startAutoRefresh();
             } else {
-                // console.log("Автообновление autoRefreshEntities выключено.");
+                this.stopAutoRefresh();
+            }
+        },
+
+        // Скрытая вкладка не должна опрашивать портал. При возврате — одна загрузка,
+        // потому что за время скрытия список устарел, и только потом цепочка
+        async handleVisibilityChange() {
+            if (typeof document === "undefined") return;
+            if (document.visibilityState === "hidden") {
+                this.stopAutoRefresh();
+                return;
+            }
+            if (this.isUnmounted || !this.autoRefresh) return;
+            // Операция в работе сама гасит автообновление и сама заводит его заново
+            // в своём finally — фоновые запросы поверх массового удаления не нужны
+            if (this.busy) return;
+            await this.loadOfflineEntitiesList();
+            // Пока шла загрузка, вкладку могли снова скрыть, компонент размонтировать,
+            // а тумблер выключить
+            if (this.isUnmounted) return;
+            this.startAutoRefresh();
+        },
+
+        /**
+         * Перезаписывает смарт-процесс его же заголовком.
+         * true — обновлено, false — отказ (текст ошибки уже показан)
+         */
+        async updateSmartProcessEntity(b24, entityTypeId, entityId) {
+            const getResult = await b24.callMethod("crm.item.get", {
+                entityTypeId: entityTypeId,
+                id: entityId,
+            });
+            const item = getResult.getData()?.result?.item;
+            // Портал отдаёт идентификаторы то строкой, то числом
+            if (getResult.isSuccess === false || !item || String(item.id) !== String(entityId)) {
+                const reason = getResult.isSuccess === false ? this.resultErrors(getResult) : "портал вернул другую сущность или пустой ответ";
+                this.showError(`Не удалось получить смарт-процесс ${entityId}: ${reason}`);
+                return false;
+            }
+            const updateResult = await b24.callMethod("crm.item.update", {
+                entityTypeId: entityTypeId,
+                id: entityId,
+                fields: {
+                    title: item.title,
+                },
+            });
+            const updatedId = updateResult.getData()?.result?.item?.id;
+            if (updateResult.isSuccess === false || String(updatedId) !== String(entityId)) {
+                const reason = updateResult.isSuccess === false ? this.resultErrors(updateResult) : "портал вернул другой идентификатор";
+                this.showError(`Не удалось обновить смарт-процесс ${entityId}: ${reason}`);
+                return false;
+            }
+            return true;
+        },
+
+        /**
+         * Перезаписывает сделку её же заголовком.
+         * true — обновлено, false — отказ (текст ошибки уже показан)
+         */
+        async updateDealEntity(b24, entityId) {
+            const getResult = await b24.callMethod("crm.deal.get", {
+                id: entityId,
+            });
+            const deal = getResult.getData()?.result;
+            if (getResult.isSuccess === false || !deal || String(deal.ID) !== String(entityId)) {
+                const reason = getResult.isSuccess === false ? this.resultErrors(getResult) : "портал вернул другую сделку или пустой ответ";
+                this.showError(`Не удалось получить сделку ${entityId}: ${reason}`);
+                return false;
+            }
+            const updateResult = await b24.callMethod("crm.deal.update", {
+                id: entityId,
+                fields: {
+                    TITLE: deal.TITLE,
+                },
+            });
+            // crm.deal.update возвращает { result: true }
+            if (updateResult.getData()?.result !== true) {
+                const reason = updateResult.isSuccess === false ? this.resultErrors(updateResult) : "портал не подтвердил обновление";
+                this.showError(`Не удалось обновить сделку ${entityId}: ${reason}`);
+                return false;
+            }
+            return true;
+        },
+
+        /**
+         * Снимает обновлённую сущность из очереди и печатает итог операции целиком
+         */
+        async finishEntityUpdate(eventEntity, entityId, failed) {
+            if (!failed) {
+                const removed = await this.deleteOfflineEntities(eventEntity);
+                if (removed) {
+                    this.showMessage(`Сущность ${entityId} обновлена и удалена из очереди`);
+                } else {
+                    // Оба факта в одной строке: иначе на экране остаётся только претензия
+                    // к записи очереди, и кажется, что сущность не обновилась
+                    const reason = this.error || "портал не подтвердил снятие записи";
+                    this.showError(`Сущность ${entityId} обновлена, но запись не снята из очереди: ${reason}`);
+                }
+            } else if (!this.error) {
+                this.showError("Сущность не обновлена, из очереди не удалена");
             }
         },
 
+        /**
+         * Перезаписывает сущность теми же данными и снимает её из оффлайн-очереди.
+         */
         async entityUpdate(eventEntity) {
-            let error = false;
-            console.log("Запущена функция entityUpdate для изменения сущности с ID:", eventEntity.EVENT_DATA.FIELDS?.ID);
+            const b24 = this.ensureClient();
+            if (!b24) return;
+            const fields = eventEntity?.EVENT_DATA?.FIELDS || {};
+            const entityId = fields.ID;
+            if (!entityId) {
+                this.showError("У события нет ID сущности");
+                return;
+            }
+
+            // Тип берётся тем же разбором, что и для ссылки: FIELDS плюс имя события
+            const entityTypeId = this.resolveEntityTypeId(eventEntity);
+
+            let failed = false;
+            this.clearFeedback();
+            this.busy = true;
             try {
-                // Если смарт процесс
-                if (eventEntity.EVENT_DATA.FIELDS?.ENTITY_TYPE_ID && eventEntity.EVENT_DATA.FIELDS?.ENTITY_TYPE_ID > 0) {
-                    // Обработка смарт процесса
-                    let entity = await $b24.callMethod("crm.item.get", {
-                        entityTypeId: eventEntity.EVENT_DATA.FIELDS.ENTITY_TYPE_ID,
-                        id: eventEntity.EVENT_DATA.FIELDS.ID,
-                    });
-                    entity = entity.getData().result.item;
-                    console.log("Данные смарт процесса до изменения:", entity);
-                    if (entity.id == eventEntity.EVENT_DATA.FIELDS?.ID) {
-                        // обновляем смарт процесс через метод crm.item.update. Меняем в ней TITLE на то же значение что и было
-                        let updateResult = await $b24.callMethod("crm.item.update", {
-                            entityTypeId: eventEntity.EVENT_DATA.FIELDS.ENTITY_TYPE_ID,
-                            id: eventEntity.EVENT_DATA.FIELDS.ID,
-                            fields: {
-                                title: entity.title + "123",
-                            },
-                        });
-                        console.log("Результат обновления смарт процесса:", updateResult.getData());
-                        if (updateResult.id === entity.id) {
-                            console.log("Сущность успешно обновлена.");
-                            error = true;
-                        } else {
-                            console.error("Ошибка при обновлении сущности.");
-                            error = true;
-                        }
-                    } else {
-                        error = true;
-                    }
+                if (entityTypeId) {
+                    failed = !(await this.updateSmartProcessEntity(b24, entityTypeId, entityId));
+                } else if (eventEntity?.EVENT_NAME === "ONCRMDEALUPDATE") {
+                    failed = !(await this.updateDealEntity(b24, entityId));
                 } else {
-                    // Если сделка, то получаем значение сделки используя метод crm.deal.get
-                    let deal = await $b24.callMethod("crm.deal.get", {
-                        id: eventEntity.EVENT_DATA.FIELDS?.ID,
-                    });
-                    deal = deal.getData().result;
-                    console.log("Данные сделки до изменения:", deal);
-
-                    if (deal.ID == eventEntity.EVENT_DATA.FIELDS?.ID) {
-                        // обновляем сделку через метод crm.deal.update. Меняем в ней title на то же значение что и было
-                        let updateResult = await $b24.callMethod("crm.deal.update", {
-                            id: eventEntity.EVENT_DATA.FIELDS?.ID,
-                            fields: {
-                                TITLE: deal.TITLE,
-                            },
-                        });
-                        console.log("Результат обновления сделки:", updateResult.getData());
-                        updateResult = updateResult.getData().result;
-                        if (updateResult === true) {
-                            console.log("Сущность успешно обновлена.");
-                        } else {
-                            console.error("Ошибка при обновлении сущности.");
-                            error = true;
-                        }
-                    } else {
-                        error = true;
-                    }
+                    // Ни ENTITY_TYPE_ID, ни имя события не говорят, что это за сущность —
+                    // вслепую дёргать crm.deal.get нельзя: снимется чужая запись с зелёным успехом
+                    failed = true;
+                    this.showError(`Не удалось определить тип сущности для события ${eventEntity?.EVENT_NAME || "без имени"}`);
                 }
-            } catch (error) {
-                console.error("Ошибка при обновлении сущности:", error);
-                error = true;
-            }
-            if (!error) {
-                // Удаляем сущность из оффлайн очереди
-                await this.deleteOfflineEntities(eventEntity);
-            } else {
+            } catch (callError) {
+                failed = true;
+                console.error("Ошибка при обновлении сущности:", callError);
+                this.showError(`Ошибка при обновлении сущности ${entityId}: ${this.errorText(callError)}`);
+            } finally {
+                this.busy = false;
+                // Пока операция шла, вкладку могли скрыть и снова открыть: перезапуск
+                // цепочки идемпотентен и молчит при выключенном тумблере и скрытой вкладке
+                this.startAutoRefresh();
             }
+
+            // Хвост стоит после try/catch/finally намеренно: deleteOfflineEntities сам ставит
+            // busy, и перенос внутрь try снял бы флаг раньше времени
+            await this.finishEntityUpdate(eventEntity, entityId, failed);
         },
     },
-    watch: {},
     mounted() {
+        // Три загрузки идут параллельно — await здесь намеренно не ставится
         this.getSubscribedEvents();
         this.eventsList();
         this.loadOfflineEntitiesList();
         this.autoRefreshEntities();
+        // В Vue 3 методы Options API привязаны к экземпляру один раз, ссылка стабильна,
+        // поэтому removeEventListener снимет именно этот слушатель
+        if (typeof document !== "undefined") {
+            document.addEventListener("visibilitychange", this.handleVisibilityChange);
+        }
+    },
+    beforeUnmount() {
+        this.isUnmounted = true;
+        this.stopAutoRefresh();
+        this.resetConfirm();
+        if (typeof document !== "undefined") {
+            document.removeEventListener("visibilitychange", this.handleVisibilityChange);
+        }
     },
 };
 </script>
 
 <style>
-.tooltipParent {
+/* Цвета вынесены в кастомные свойства: потребитель перекрашивает компонент без борьбы за специфичность */
+.subscriptions {
+    --subscriptions-switch-off: #ccc;
+    --subscriptions-switch-on: #4caf50;
+    --subscriptions-switch-knob: #fff;
+    --subscriptions-tooltip-bg: #555;
+    --subscriptions-tooltip-ink: #fff;
+    --subscriptions-error-bg: #ffebee;
+    --subscriptions-error-ink: #c62828;
+    --subscriptions-success-bg: #e8f5e9;
+    --subscriptions-success-ink: #2e7d32;
+    --subscriptions-table-line: #eee;
+    --subscriptions-table-head-ink: #555;
+}
+
+.subscriptions__tabs {
+    margin-bottom: 24px;
+}
+
+.subscriptions__tab--active {
+    font-weight: 600;
+}
+
+.subscriptions__empty {
+    padding: 12px;
+    color: var(--subscriptions-error-ink, #c62828);
+}
+
+.subscriptions__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 12px 0;
+}
+
+.subscriptions__message {
+    margin: 12px 0;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.subscriptions__message--success {
+    background: var(--subscriptions-success-bg, #e8f5e9);
+    color: var(--subscriptions-success-ink, #2e7d32);
+    border: 1px solid #a5d6a7;
+}
+
+.subscriptions__message--error {
+    background: var(--subscriptions-error-bg, #ffebee);
+    color: var(--subscriptions-error-ink, #c62828);
+    border: 1px solid #ef9a9a;
+}
+
+/* Тумблер автообновления */
+.subscriptions__switch {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+    vertical-align: middle;
+}
+
+.subscriptions__switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.subscriptions__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--subscriptions-switch-off, #ccc);
+    transition: 0.3s;
+    border-radius: 24px;
+}
+
+.subscriptions__slider::before {
+    content: "";
+    position: absolute;
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: var(--subscriptions-switch-knob, #fff);
+    transition: 0.3s;
+    border-radius: 50%;
+}
+
+input:checked + .subscriptions__slider {
+    background-color: var(--subscriptions-switch-on, #4caf50);
+}
+
+input:checked + .subscriptions__slider::before {
+    transform: translateX(20px);
+}
+
+/* Подсказки. Имена .tooltip и .tooltipParent остаются на элементах навсегда как точки
+   подключения для стилей потребителей (b24_change_entity, b24_desktop, b24_conector),
+   но собственных правил пакет на них больше не вешает: правило веса 0,1,0 из пакета
+   конфликтовало с одноимённым классом дизайн-системы b24_desktop и перекрашивало
+   подсказки всего приложения. Оформление подсказок компонента — только .subscriptions__* */
+.subscriptions__tooltip-parent {
     position: relative; /* Чтобы подсказка позиционировалась относительно родителя */
     cursor: pointer;
 }
-.tooltip {
+
+.subscriptions__tooltip {
     visibility: hidden;
-    background-color: #555;
-    color: #fff;
+    background-color: var(--subscriptions-tooltip-bg, #555);
+    color: var(--subscriptions-tooltip-ink, #fff);
     text-align: center;
     border-radius: 5px;
     padding: 5px;
@@ -413,12 +1229,42 @@ export default {
     max-width: 400px;
     min-width: 200px;
     word-wrap: break-word; /* Перенос слов при необходимости */
-    /* white-space: nowrap; Запретить перенос слов */
 }
 
-/* .switch:hover .tooltip, */
-.tooltipParent:hover .tooltip {
+.subscriptions__tooltip-parent:hover .subscriptions__tooltip {
     visibility: visible;
     opacity: 1;
 }
+
+/* Таблицы. Нейтральный минимум, чтобы компонент был читаем без стилей потребителя:
+   границы строк, отступы ячеек, серые заголовки — по образцу .config-logs__table.
+   Вес занижен намеренно: .subscriptions__table это 0,1,0 против table.main
+   потребителей 0,1,1, а :where() у ячеек снимает вес класса и оставляет 0,1,0
+   против .main td у b24_desktop и b24_change_entity 0,1,1. Их оформление сильнее
+   и продолжает побеждать; у b24_conector правила лежат в слое legacy и проигрывают
+   любому неслоистому правилу — там компонент и получает собственный облик */
+.subscriptions__table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 16px;
+}
+
+.subscriptions__table :where(th, td) {
+    padding: 8px 12px;
+    text-align: left;
+    border-bottom: 1px solid var(--subscriptions-table-line, #eee);
+}
+
+.subscriptions__table :where(th) {
+    font-weight: 600;
+    font-size: 13px;
+    color: var(--subscriptions-table-head-ink, #555);
+}
+
+/* Кнопка «Подписаться» для уже подписанного события. Дублирует вид :disabled,
+   потому что состояние приходит и туда: :disabled="busy || isSubscribed(event)" */
+.subscriptions__button--disabled {
+    opacity: 0.5;
+    cursor: default;
+}
 </style>