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

package/Subscriptions.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="Subscriptions subscriptions">
-        <h1>Страница подписок</h1>
+        <h1 class="subscriptions__title">Страница подписок</h1>
 
         <!-- Без клиента Bitrix24 компонент не работает, но и не падает -->
         <p v-if="!b24Client" class="subscriptions__empty">Клиент Bitrix24 не инициализирован</p>
@@ -15,7 +15,9 @@
             <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>
@@ -34,7 +36,7 @@
                         <span>Всего измененных сущностей {{ entities.total }}</span>
                     </div>
 
-                    <table class="main" v-if="entities.list.length">
+                    <table class="main subscriptions__table" v-if="entities.list.length">
                         <thead>
                             <tr>
                                 <th>#</th>
@@ -71,6 +73,7 @@
                                     {{ 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>
@@ -88,8 +91,8 @@
                 <div v-else-if="message" class="subscriptions__message subscriptions__message--success">{{ message }}</div>
 
                 <div>
-                    <h3>Подписаны на события:</h3>
-                    <table class="main" v-if="subscribedEvents.length">
+                    <h3 class="subscriptions__subtitle">Подписаны на события:</h3>
+                    <table class="main subscriptions__table" v-if="subscribedEvents.length">
                         <thead>
                             <tr>
                                 <th>Событие</th>
@@ -120,8 +123,8 @@
                 </div>
 
                 <div>
-                    <h3>На какие события можно подписаться:</h3>
-                    <table class="main" v-if="events.length">
+                    <h3 class="subscriptions__subtitle">На какие события можно подписаться:</h3>
+                    <table class="main subscriptions__table" v-if="events.length">
                         <thead>
                             <tr>
                                 <th>Событие</th>
@@ -131,7 +134,7 @@
                         <tbody>
                             <tr v-for="event in events" :key="event">
                                 <td>{{ event }}</td>
-                                <td><button @click="subscribeToEvents(event)" :disabled="busy || isSubscribed(event)" :class="{ 'disabled-button': isSubscribed(event) }">Подписаться</button></td>
+                                <td><button @click="subscribeToEvents(event)" :disabled="busy || isSubscribed(event)" :class="{ 'subscriptions__button--disabled': isSubscribed(event) }">Подписаться</button></td>
                             </tr>
                         </tbody>
                     </table>
@@ -152,30 +155,81 @@ const BATCH_CHUNK_SIZE = 50;
 // Потолок итераций цикла очистки очереди — страховка от вечного цикла
 const MAX_CLEAR_ITERATIONS = 100;
 
-// Формат даты создаётся один раз: Intl.DateTimeFormat дорого конструировать на каждую строку таблицы.
-// Указан только hourCycle: при hour12: false часть движков отдаёт 24 вместо 00 для полуночи.
-const DATE_FORMATTER = new Intl.DateTimeFormat("ru-RU", {
+// Настройки формата 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) {
+function formatTimestamp(value, formatter) {
     if (!value) return "";
     const date = new Date(value);
     if (Number.isNaN(date.getTime())) return String(value);
-    const parts = {};
-    for (const part of DATE_FORMATTER.formatToParts(date)) {
-        parts[part.type] = part.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);
     }
-    return `${parts.day}.${parts.month} ${parts.hour}:${parts.minute}:${parts.second}`;
 }
 
 /**
@@ -193,11 +247,15 @@ export default {
     name: "Subscriptions",
     props: {
         // Клиент Bitrix24 (B24Frame). Приоритетный источник
-        b24: { type: Object, default: null },
+        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
@@ -222,6 +280,9 @@ export default {
             message: "",
             refreshTimerId: null,
             isUnmounted: false,
+            // Признак того, что текущий текст в error поставлен неудачной загрузкой списка.
+            // Только такую ошибку удачное автообновление имеет право погасить
+            loadFailed: false,
             // Какая кнопка ждёт второго клика: "" | "all" | "empty"
             confirmAction: "",
             confirmTimerId: null,
@@ -266,6 +327,12 @@ export default {
         confirmEmptyLabel() {
             return this.confirmAction === "empty" ? "Точно удалить?" : "Удалить все пустые";
         },
+        // Форматтер дат под текущую зону. Computed, а не вызов в методе:
+        // так зависимость от prop timeZone видна реактивности явно,
+        // а поиск в кэше делается один раз на смену зоны, а не на каждую ячейку
+        dateFormatter() {
+            return getDateFormatter(this.timeZone);
+        },
     },
     methods: {
         selectTab(name) {
@@ -274,7 +341,7 @@ export default {
             }
         },
         formatDate(timestamp) {
-            return formatTimestamp(timestamp);
+            return formatTimestamp(timestamp, this.dateFormatter);
         },
         pause(ms) {
             return new Promise((resolve) => setTimeout(resolve, ms));
@@ -285,14 +352,31 @@ export default {
         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) {
@@ -317,6 +401,22 @@ export default {
             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() ---
 
@@ -367,11 +467,8 @@ export default {
         // --- Работа с событиями Bitrix24 ---
 
         async eventsList() {
-            const b24 = this.b24Client;
-            if (!b24) {
-                this.showError("Клиент Bitrix24 не инициализирован");
-                return;
-            }
+            const b24 = this.ensureClient();
+            if (!b24) return;
             try {
                 const result = await b24.callMethod("events", {});
                 // Сравнение с false намеренно явное и повторяется во всех вызовах ниже:
@@ -390,11 +487,8 @@ export default {
         },
 
         async subscribeToEvents(event) {
-            const b24 = this.b24Client;
-            if (!b24) {
-                this.showError("Клиент Bitrix24 не инициализирован");
-                return;
-            }
+            const b24 = this.ensureClient();
+            if (!b24) return;
             this.clearFeedback();
             this.busy = true;
             try {
@@ -419,15 +513,15 @@ export default {
                 this.showError(`Ошибка при подписке на событие ${event}: ${this.errorText(callError)}`);
             } finally {
                 this.busy = false;
+                // Пока операция шла, вкладку могли скрыть и снова открыть: перезапуск
+                // цепочки идемпотентен и молчит при выключенном тумблере и скрытой вкладке
+                this.startAutoRefresh();
             }
         },
 
         async getSubscribedEvents() {
-            const b24 = this.b24Client;
-            if (!b24) {
-                this.showError("Клиент Bitrix24 не инициализирован");
-                return;
-            }
+            const b24 = this.ensureClient();
+            if (!b24) return;
             try {
                 const result = await b24.callMethod("event.get", {});
                 if (result.isSuccess === false) {
@@ -442,11 +536,8 @@ export default {
         },
 
         async unbindSubscribedEvents(event) {
-            const b24 = this.b24Client;
-            if (!b24) {
-                this.showError("Клиент Bitrix24 не инициализирован");
-                return;
-            }
+            const b24 = this.ensureClient();
+            if (!b24) return;
             this.clearFeedback();
             this.busy = true;
             try {
@@ -467,13 +558,18 @@ export default {
                 this.showError(`Ошибка при отписке от события ${event.event}: ${this.errorText(callError)}`);
             } finally {
                 this.busy = false;
+                // Пока операция шла, вкладку могли скрыть и снова открыть: перезапуск
+                // цепочки идемпотентен и молчит при выключенном тумблере и скрытой вкладке
+                this.startAutoRefresh();
             }
         },
 
         async loadOfflineEntitiesList() {
-            const b24 = this.b24Client;
+            const b24 = this.ensureClient();
+            // Порядок обязателен: showError внутри ensureClient сбрасывает loadFailed,
+            // поэтому флаг ставится после проверки
             if (!b24) {
-                this.showError("Клиент Bitrix24 не инициализирован");
+                this.loadFailed = true;
                 return;
             }
             this.loading = true;
@@ -486,14 +582,22 @@ export default {
                 if (result.isSuccess === false) {
                     // Старый список полезнее пустого — entities.list не обнуляем
                     this.showError(`Не удалось получить список сущностей: ${this.resultErrors(result)}`);
+                    this.loadFailed = true;
                     return;
                 }
                 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;
             }
@@ -503,11 +607,8 @@ export default {
          * Снимает одну запись из оффлайн-очереди. Возвращает признак успеха.
          */
         async deleteOfflineEntities(entity) {
-            const b24 = this.b24Client;
-            if (!b24) {
-                this.showError("Клиент Bitrix24 не инициализирован");
-                return false;
-            }
+            const b24 = this.ensureClient();
+            if (!b24) return false;
             // event.offline.clear работает только по process_id: для свободной записи вызов бессмысленный
             if (!entity?.PROCESS_ID) {
                 this.showError("У записи пустой PROCESS_ID — снимается кнопкой «Удалить все пустые»");
@@ -536,16 +637,127 @@ export default {
                 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,
+            });
+            if (pageResult.isSuccess === false) {
+                return { rows: [], error: this.resultErrors(pageResult) };
+            }
+            return { rows: pageResult.getData() || [], error: "" };
+        },
+
+        /**
+         * Уникальные 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}` };
         },
 
         async deleteOfflineEntitiesAll() {
             if (!this.requestConfirm("all")) return;
-            const b24 = this.b24Client;
-            if (!b24) {
-                this.showError("Клиент Bitrix24 не инициализирован");
-                return;
-            }
+            const b24 = this.ensureClient();
+            if (!b24) return;
             this.clearFeedback();
             this.busy = true;
             // Фоновое обновление конкурирует с удалением и мигает таблицей
@@ -553,7 +765,8 @@ export default {
             this.stopAutoRefresh();
 
             const failures = [];
-            // Пачки, снятые подтверждённым batch: размер множества — честный счётчик для отчёта
+            // Пачки, снятие которых портал подтвердил ключом в данных batch:
+            // размер множества — честный счётчик для отчёта
             const clearedProcessIds = new Set();
             let reachedLimit = false;
             let stoppedOnEmpty = "";
@@ -561,58 +774,35 @@ export default {
             let iteration = 0;
             try {
                 for (; iteration < MAX_CLEAR_ITERATIONS; iteration++) {
-                    // callListMethod проходит очередь целиком: страница из 50 записей с пустым
-                    // PROCESS_ID иначе закрывает собой зарезервированные пачки и цикл встаёт
-                    const pageResult = await b24.callListMethod("event.offline.list", {
-                        start: 0,
-                        auth_connector: this.authConnector,
-                    });
-                    if (pageResult.isSuccess === false) {
-                        failures.push(this.resultErrors(pageResult));
+                    // 1. Очередная страница очереди
+                    const page = await this.readOfflineQueuePage(b24);
+                    if (page.error) {
+                        failures.push(page.error);
                         break;
                     }
-                    const rows = pageResult.getData() || [];
-                    if (!rows.length) break;
+                    if (!page.rows.length) break;
 
-                    // Дедупликация обязательна: очередь обычно принадлежит нескольким пачкам
-                    const processIds = [...new Set(rows.map((row) => row.PROCESS_ID).filter((id) => id))];
+                    // 2. Что на странице вообще можно снять
+                    const { processIds, freshProcessIds } = this.collectProcessIds(page.rows, clearedProcessIds);
                     if (!processIds.length) {
                         // Свободные записи этим методом не снимаются — иначе цикл крутится до потолка итераций
-                        stoppedOnEmpty = `Остались записи с пустым PROCESS_ID (${rows.length}) — снимаются кнопкой «Удалить все пустые»`;
+                        stoppedOnEmpty = `Остались записи с пустым PROCESS_ID (${page.rows.length}) — снимаются кнопкой «Удалить все пустые»`;
                         break;
                     }
-
-                    // Пачки, снятые на прошлых итерациях, портал может отдавать повторно
-                    const freshProcessIds = processIds.filter((processId) => !clearedProcessIds.has(processId));
                     if (!freshProcessIds.length) {
-                        stoppedOnRepeat = "портал продолжает отдавать уже снятые пачки";
+                        stoppedOnRepeat =
+                            "портал снова отдал уже снятые пачки. Команды clear отработали без ошибок, скорее всего очередь обновляется с задержкой — обновите список через минуту. Если записи останутся, значит clear их не снял";
                         break;
                     }
 
-                    // Резка по 50: в один batch больше команд платформа не принимает
+                    // 3. Резка по 50: в один batch больше команд платформа не принимает
                     for (const chunk of chunkArray(freshProcessIds, BATCH_CHUNK_SIZE)) {
-                        const commands = {};
-                        chunk.forEach((processId, index) => {
-                            commands[`clear_${index}`] = {
-                                method: "event.offline.clear",
-                                params: {
-                                    process_id: processId,
-                                    auth_connector: this.authConnector,
-                                },
-                            };
-                        });
-                        // isHaltOnError: false — одна протухшая пачка не должна валить остальные
-                        const batchResult = await b24.callBatch(commands, false);
-                        if (batchResult.isSuccess === false) {
-                            failures.push(this.resultErrors(batchResult));
-                        } else {
-                            // Снятой пачка считается только после подтверждённого batch
-                            for (const processId of chunk) clearedProcessIds.add(processId);
-                        }
+                        const failure = await this.sendClearChunk(b24, chunk, clearedProcessIds);
+                        if (failure) failures.push(failure);
                     }
-                    // Если пачка не удаляется, следующая итерация увидит те же PROCESS_ID
+                    // 4. Если пачка не удаляется, следующая итерация увидит те же PROCESS_ID
                     if (failures.length) break;
-                    // Портал отдаёт очередь с задержкой — перечитывать сразу бессмысленно
+                    // 5. Портал отдаёт очередь с задержкой — перечитывать сразу бессмысленно
                     await this.pause(1000);
                 }
                 reachedLimit = iteration >= MAX_CLEAR_ITERATIONS;
@@ -624,17 +814,15 @@ export default {
                 if (wasAutoRefresh) this.startAutoRefresh();
             }
 
-            if (failures.length) {
-                this.showError(`Очищено пачек: ${clearedProcessIds.size}. Ошибки: ${failures.join("; ")}`);
-            } else if (reachedLimit) {
-                this.showError(`Достигнут потолок в ${MAX_CLEAR_ITERATIONS} итераций, очередь очищена не полностью. Очищено пачек: ${clearedProcessIds.size}`);
-            } else if (stoppedOnRepeat) {
-                this.showError(`Очищено пачек: ${clearedProcessIds.size}. Остановка: ${stoppedOnRepeat}`);
-            } else if (stoppedOnEmpty) {
-                this.showMessage(`Очищено пачек: ${clearedProcessIds.size}. ${stoppedOnEmpty}`);
-            } else {
-                this.showMessage(`Очищено пачек: ${clearedProcessIds.size}`);
-            }
+            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);
             // Размонтирование могло случиться, пока шла очистка
@@ -642,23 +830,25 @@ export default {
             await this.loadOfflineEntitiesList();
         },
 
-        // Сколько записей в текущем списке без PROCESS_ID
-        countEmptyProcessId() {
-            return this.entities.list.filter((row) => !row?.PROCESS_ID).length;
-        },
-
         async deleteOfflineEntitiesAllEmpty() {
             if (!this.requestConfirm("empty")) return;
-            const b24 = this.b24Client;
-            if (!b24) {
-                this.showError("Клиент Bitrix24 не инициализирован");
-                return;
-            }
+            const b24 = this.ensureClient();
+            if (!b24) return;
             this.clearFeedback();
             this.busy = true;
+            // Фоновое обновление конкурирует с удалением: симметрично deleteOfflineEntitiesAll
+            const wasAutoRefresh = this.autoRefresh;
+            this.stopAutoRefresh();
             try {
-                // Считаем свободные записи до вызова: портал отвечает успехом, даже когда ничего не снял
-                const emptyBefore = this.countEmptyProcessId();
+                // Множество 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: "",
@@ -670,19 +860,36 @@ export default {
                 }
                 await this.pause(500);
                 await this.loadOfflineEntitiesList();
-                // Ошибку перезагрузки не затираем: без свежего списка разницу считать не по чему
+                // Ошибку перезагрузки не затираем: без свежего списка считать не по чему
                 if (this.error) return;
-                const removedCount = emptyBefore - this.countEmptyProcessId();
+
+                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}`);
+                    // Формулировка нейтральна к авторству: часть записей мог снять
+                    // серверный коллектор потребителя за паузу перед перечиткой
+                    this.showMessage(`Ушло из очереди записей: ${removedCount} из ${emptyIdsBefore.size}`);
                 } else {
-                    this.showMessage("Портал не снял ни одной записи с пустым PROCESS_ID");
+                    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();
             }
         },
 
@@ -696,6 +903,9 @@ export default {
             // Защита от двойного таймера
             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;
@@ -722,15 +932,111 @@ export default {
             }
         },
 
+        // Скрытая вкладка не должна опрашивать портал. При возврате — одна загрузка,
+        // потому что за время скрытия список устарел, и только потом цепочка
+        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) {
-            const b24 = this.b24Client;
-            if (!b24) {
-                this.showError("Клиент Bitrix24 не инициализирован");
-                return;
-            }
+            const b24 = this.ensureClient();
+            if (!b24) return;
             const fields = eventEntity?.EVENT_DATA?.FIELDS || {};
             const entityId = fields.ID;
             if (!entityId) {
@@ -746,56 +1052,9 @@ export default {
             this.busy = true;
             try {
                 if (entityTypeId) {
-                    // Смарт-процесс
-                    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)) {
-                        failed = true;
-                        const reason = getResult.isSuccess === false ? this.resultErrors(getResult) : "портал вернул другую сущность или пустой ответ";
-                        this.showError(`Не удалось получить смарт-процесс ${entityId}: ${reason}`);
-                    } else {
-                        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)) {
-                            failed = true;
-                            const reason = updateResult.isSuccess === false ? this.resultErrors(updateResult) : "портал вернул другой идентификатор";
-                            this.showError(`Не удалось обновить смарт-процесс ${entityId}: ${reason}`);
-                        }
-                    }
+                    failed = !(await this.updateSmartProcessEntity(b24, entityTypeId, entityId));
                 } else if (eventEntity?.EVENT_NAME === "ONCRMDEALUPDATE") {
-                    // Сделка
-                    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)) {
-                        failed = true;
-                        const reason = getResult.isSuccess === false ? this.resultErrors(getResult) : "портал вернул другую сделку или пустой ответ";
-                        this.showError(`Не удалось получить сделку ${entityId}: ${reason}`);
-                    } else {
-                        const updateResult = await b24.callMethod("crm.deal.update", {
-                            id: entityId,
-                            fields: {
-                                TITLE: deal.TITLE,
-                            },
-                        });
-                        // crm.deal.update возвращает { result: true }
-                        if (updateResult.getData()?.result !== true) {
-                            failed = true;
-                            const reason = updateResult.isSuccess === false ? this.resultErrors(updateResult) : "портал не подтвердил обновление";
-                            this.showError(`Не удалось обновить сделку ${entityId}: ${reason}`);
-                        }
-                    }
+                    failed = !(await this.updateDealEntity(b24, entityId));
                 } else {
                     // Ни ENTITY_TYPE_ID, ни имя события не говорят, что это за сущность —
                     // вслепую дёргать crm.deal.get нельзя: снимется чужая запись с зелёным успехом
@@ -808,21 +1067,14 @@ export default {
                 this.showError(`Ошибка при обновлении сущности ${entityId}: ${this.errorText(callError)}`);
             } finally {
                 this.busy = false;
+                // Пока операция шла, вкладку могли скрыть и снова открыть: перезапуск
+                // цепочки идемпотентен и молчит при выключенном тумблере и скрытой вкладке
+                this.startAutoRefresh();
             }
 
-            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("Сущность не обновлена, из очереди не удалена");
-            }
+            // Хвост стоит после try/catch/finally намеренно: deleteOfflineEntities сам ставит
+            // busy, и перенос внутрь try снял бы флаг раньше времени
+            await this.finishEntityUpdate(eventEntity, entityId, failed);
         },
     },
     mounted() {
@@ -831,11 +1083,19 @@ export default {
         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>
@@ -852,6 +1112,8 @@ export default {
     --subscriptions-error-ink: #c62828;
     --subscriptions-success-bg: #e8f5e9;
     --subscriptions-success-ink: #2e7d32;
+    --subscriptions-table-line: #eee;
+    --subscriptions-table-head-ink: #555;
 }
 
 .subscriptions__tabs {
@@ -940,16 +1202,17 @@ input:checked + .subscriptions__slider::before {
     transform: translateX(20px);
 }
 
-/* Подсказки. Старые имена .tooltipParent и .tooltip — алиасы для мостов совместимости
-   у потребителей (b24_change_entity, b24_desktop), снять в следующей minor после их обновления */
-.subscriptions__tooltip-parent,
-.tooltipParent {
+/* Подсказки. Имена .tooltip и .tooltipParent остаются на элементах навсегда как точки
+   подключения для стилей потребителей (b24_change_entity, b24_desktop, b24_conector),
+   но собственных правил пакет на них больше не вешает: правило веса 0,1,0 из пакета
+   конфликтовало с одноимённым классом дизайн-системы b24_desktop и перекрашивало
+   подсказки всего приложения. Оформление подсказок компонента — только .subscriptions__* */
+.subscriptions__tooltip-parent {
     position: relative; /* Чтобы подсказка позиционировалась относительно родителя */
     cursor: pointer;
 }
 
-.subscriptions__tooltip,
-.tooltip {
+.subscriptions__tooltip {
     visibility: hidden;
     background-color: var(--subscriptions-tooltip-bg, #555);
     color: var(--subscriptions-tooltip-ink, #fff);
@@ -968,9 +1231,40 @@ input:checked + .subscriptions__slider::before {
     word-wrap: break-word; /* Перенос слов при необходимости */
 }
 
-.subscriptions__tooltip-parent:hover .subscriptions__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>