@sequent-org/moodboard 1.4.54 → 1.4.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.54",
+  "version": "1.4.56",
   "type": "module",
   "description": "Interactive moodboard",
   "main": "./src/index.js",

package/src/core/ApiClient.js

@@ -58,6 +58,10 @@ export class ApiClient {
     async saveBoard(boardId, boardData, options = {}) {
         try {
             const actionType = options?.actionType || 'command_execute';
+            const baseVersion = options?.baseVersion ?? null;
+            const validBaseVersion = (baseVersion !== null && Number.isFinite(Number(baseVersion)) && Number(baseVersion) > 0)
+                ? Number(baseVersion)
+                : null;
             // Поддержка формата core.getBoardData(): { id, boardData, settings }
             const payloadBoardData = boardData && boardData.boardData ? boardData.boardData : boardData;
             const payloadSettings = boardData && boardData.settings ? boardData.settings : {};
@@ -130,11 +134,23 @@ export class ApiClient {
                 body: JSON.stringify({
                     moodboardId: boardId,
                     state: cleanedData,
-                    actionType
+                    actionType,
+                    ...(validBaseVersion !== null ? { baseVersion: validBaseVersion } : {})
                 })
             });
 
             if (!response.ok) {
+                // Конфликт версий: бэкенд отверг сохранение, т.к. экземпляр устарел
+                if (response.status === 409) {
+                    let body = {};
+                    try { body = await response.json(); } catch (_) {}
+                    if (body?.code === 'stale_base_version') {
+                        const err = new Error(body.message || 'Версия доски устарела');
+                        err.code = 'stale_base_version';
+                        err.currentVersion = body.currentVersion ?? null;
+                        throw err;
+                    }
+                }
                 throw new Error(`HTTP ${response.status}: ${response.statusText}`);
             }
             

package/src/core/SaveManager.js

@@ -28,6 +28,10 @@ export class SaveManager {
         
         // Состояния сохранения
         this.saveStatus = 'idle'; // idle, saving, saved, error
+
+        // Коллбеки для получения актуальной версии и перезагрузки доски при конфликте версий
+        this._versionGetter = null;
+        this._reloadHandler = null;
         
         this.setupEventListeners();
     }
@@ -38,6 +42,25 @@ export class SaveManager {
     setApiClient(apiClient) {
         this.apiClient = apiClient;
     }
+
+    /**
+     * Регистрирует функцию, возвращающую актуальный номер версии доски (board.historyHeadVersion).
+     * Вызывается перед каждым сохранением и передаётся в payload как baseVersion.
+     * Если функция вернёт null/undefined/NaN — baseVersion не отправляется (новая доска).
+     * @param {() => number|null} fn
+     */
+    setVersionGetter(fn) {
+        this._versionGetter = fn;
+    }
+
+    /**
+     * Регистрирует async-функцию, перезагружающую доску с сервера (loadExistingBoard).
+     * Вызывается при 409 stale_base_version — перечитывает latest, не перезаписывает сервер.
+     * @param {() => Promise<void>} fn
+     */
+    setReloadHandler(fn) {
+        this._reloadHandler = fn;
+    }
     
     /**
      * Настройка обработчиков событий
@@ -156,6 +179,38 @@ export class SaveManager {
                 console.warn('SaveManager: объект с data:/blob: URL пропущен при сохранении:', error.message);
                 return;
             }
+
+            // 409 stale_base_version: экземпляр устарел — нельзя перезаписывать сервер.
+            // Перечитываем latest. Retry исключён — это не transient-ошибка.
+            if (error?.code === 'stale_base_version') {
+                console.warn(
+                    'SaveManager: 409 stale_base_version — версия доски устарела. Перечитываю latest с сервера...',
+                    error.message
+                );
+                if (typeof this._reloadHandler === 'function') {
+                    try {
+                        await this._reloadHandler();
+                        // После перезагрузки сбрасываем кеш: следующее изменение
+                        // сохранится с актуальной версией без ложного дедупа.
+                        this.lastSavedData = null;
+                        this.hasUnsavedChanges = false;
+                        this.updateSaveStatus('saved');
+                        console.warn(
+                            'SaveManager: состояние доски перечитано с сервера. ' +
+                            'Локальное pending-изменение отменено во избежание затирания чужих данных. ' +
+                            'TODO: переприменить pending-изменение поверх свежего состояния.'
+                        );
+                    } catch (reloadErr) {
+                        console.error('SaveManager: ошибка перечитывания после 409:', reloadErr);
+                        this.updateSaveStatus('error', reloadErr.message);
+                    }
+                } else {
+                    console.warn('SaveManager: _reloadHandler не задан — состояние не синхронизировано.');
+                    this.updateSaveStatus('error', error.message);
+                }
+                return; // НЕ вызываем handleSaveError — retry не нужен
+            }
+
             console.error('Ошибка автосохранения:', error);
             this.handleSaveError(error, data);
         } finally {
@@ -179,10 +234,19 @@ export class SaveManager {
      */
     async sendSaveRequest(data) {
         const boardId = data.id || 'default';
+
+        // Актуальная версия — baseVersion для обнаружения конфликтов на сервере.
+        // null означает «новая доска», бэкенд игнорирует поле.
+        const baseVersion = typeof this._versionGetter === 'function'
+            ? this._versionGetter()
+            : null;
+        const validBaseVersion = (baseVersion !== null && Number.isFinite(Number(baseVersion)) && Number(baseVersion) > 0)
+            ? Number(baseVersion)
+            : null;
         
         // Если есть ApiClient, используем его (он автоматически очистит данные изображений)
         if (this.apiClient) {
-            return await this.apiClient.saveBoard(boardId, data);
+            return await this.apiClient.saveBoard(boardId, data, { baseVersion: validBaseVersion });
         }
         
         // Fallback к прямому запросу (без очистки изображений)
@@ -197,7 +261,8 @@ export class SaveManager {
         const requestBody = {
             moodboardId: boardId,
             state: data,
-            actionType: 'command_execute'
+            actionType: 'command_execute',
+            ...(validBaseVersion !== null ? { baseVersion: validBaseVersion } : {})
         };
 
         const response = await fetch(this.options.saveEndpoint, {
@@ -213,6 +278,18 @@ export class SaveManager {
         });
         
         if (!response.ok) {
+            // Конфликт версий: бэкенд отверг сохранение, т.к. экземпляр устарел
+            if (response.status === 409) {
+                let body = {};
+                try { body = await response.json(); } catch (_) {}
+                if (body?.code === 'stale_base_version') {
+                    const err = new Error(body.message || 'Версия доски устарела');
+                    err.code = 'stale_base_version';
+                    err.currentVersion = body.currentVersion ?? null;
+                    throw err;
+                }
+            }
+
             let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
             
             try {
@@ -289,12 +366,13 @@ export class SaveManager {
         }
     }
 
-    _buildSavePayload(boardId, data, csrfToken = undefined) {
+    _buildSavePayload(boardId, data, csrfToken = undefined, baseVersion = null) {
         return {
             moodboardId: boardId,
             state: data,
             actionType: 'command_execute',
-            _token: csrfToken || undefined
+            _token: csrfToken || undefined,
+            ...(baseVersion !== null ? { baseVersion } : {})
         };
     }
     

package/src/initNoBundler.js

@@ -356,7 +356,7 @@ export function forceInjectPanelStyles() {
         }
         
         .font-select { min-width: 110px !important; }
-        .font-size-select { min-width: 56px !important; }
+        .font-size-select { min-width: 32px !important; }
         
         .current-color-button, .current-bgcolor-button, .fpp-color-button {
             width: 28px !important;

package/src/moodboard/integration/MoodBoardEventBindings.js

@@ -1,5 +1,6 @@
 import { Events } from '../../core/events/Events.js';
 import { logMindmapCompoundDebug } from '../../mindmap/MindmapCompoundContract.js';
+import { loadExistingBoard } from './MoodBoardLoadApi.js';
 
 function getSelectTool(board) {
     const toolManager = board?.coreMoodboard?.toolManager;
@@ -115,6 +116,21 @@ export function bindSaveCallbacks(board) {
         return;
     }
 
+    // Прокидываем актуальную версию экземпляра в SaveManager, чтобы payload
+    // содержал baseVersion и бэкенд мог отклонить сохранение устаревшего состояния (409).
+    const saveManager = board.coreMoodboard.saveManager;
+    if (saveManager) {
+        saveManager.setVersionGetter(() => {
+            const v = board.historyHeadVersion ?? board.currentLoadedVersion ?? null;
+            return (v !== null && Number.isFinite(Number(v)) && Number(v) > 0) ? Number(v) : null;
+        });
+
+        // На 409 stale_base_version — перечитываем latest с сервера, не затираем чужие данные.
+        saveManager.setReloadHandler(async () => {
+            await loadExistingBoard(board, null, { fallbackToSeedOnError: false });
+        });
+    }
+
     board.coreMoodboard.eventBus.on('save:success', (data) => {
         const savedVersion = Number(data?.response?.historyVersion);
         if (Number.isFinite(savedVersion) && savedVersion > 0) {

package/src/tools/object-tools/TextTool.js

@@ -108,7 +108,6 @@ export class TextTool extends BaseTool {
     startEditingNew(textData, x, y) {
         this.isEditing = true;
         this.editingObject = textData;
-        
         this.createTextInput(x, y, '');
         this.emit('text:edit:start', { object: textData });
     }
@@ -166,7 +165,7 @@ export class TextTool extends BaseTool {
         });
         
         // Обработчики событий input
-        this.textInput.addEventListener('blur', () => this.finishEditing());
+        this.textInput.addEventListener('blur', (e) => this.handleBlur(e));
         this.textInput.addEventListener('keydown', (e) => this.handleInputKeys(e));
         this.textInput.addEventListener('input', (e) => this.handleTextChange(e));
         
@@ -183,6 +182,13 @@ export class TextTool extends BaseTool {
         this.adjustInputSize();
     }
     
+    /**
+     * Обработка blur
+     */
+    handleBlur(event) {
+        this.finishEditing();
+    }
+    
     /**
      * Обработка клавиш в input
      */
@@ -328,7 +334,7 @@ export class TextTool extends BaseTool {
         // TODO: Реализовать поиск текстового объекта по координатам
         return null; // Временная заглушка
     }
-    
+
     /**
      * Обработка клавиш во время редактирования (глобальные)
      */

package/src/tools/object-tools/selection/TextEditorInteractionController.js

@@ -164,6 +164,22 @@ export function createTextEditorFinalize(controller, {
     };
 }
 
+// Классы DOM-элементов, клики по которым не должны закрывать пустой текстовый редактор.
+const UI_BLOCK_SELECTOR = [
+    '.moodboard-toolbar',
+    '.text-properties-layer',
+    '.moodboard-topbar',
+    '.moodboard-zoom-panel',
+    '.moodboard-ui-layer',
+].join(', ');
+
+/**
+ * Возвращает true, если элемент находится внутри UI-панелей (тулбар, панель свойств текста и т.п.).
+ */
+function _isInsideToolbarUI(target) {
+    return !!(target && typeof target.closest === 'function' && target.closest(UI_BLOCK_SELECTOR));
+}
+
 export function bindTextEditorInteractions(controller, {
     textarea,
     isNewCreation,
@@ -192,6 +208,46 @@ export function bindTextEditorInteractions(controller, {
         }, 0);
     };
 
+    // Перехватываем mousedown на тулбаре/панелях в capture-фазе, чтобы:
+    // 1. Предотвратить потерю фокуса textarea (e.preventDefault()).
+    // 2. Заблокировать последующий click до ToolbarActionRouter (одноразовый capture-обработчик).
+    // Работает только пока поле ввода пусто и объект только что создан — если текст уже есть,
+    // клик по другому инструменту отрабатывает штатно (commit + переключение).
+    let _pendingClickBlocker = null;
+    const mousedownCaptureHandler = (e) => {
+        if (!controller?.textEditor?.active) return;
+        if (e.target === textarea) return;
+        if (!_isInsideToolbarUI(e.target)) return;
+
+        const value = (textarea.value || '').trim();
+        if (!isNewCreation || value.length > 0) return;
+
+        // Пустое новое поле + клик по UI: не даём сместить фокус с textarea.
+        e.preventDefault();
+
+        // Блокируем следующий click-события, чтобы ToolbarActionRouter не переключил инструмент.
+        if (_pendingClickBlocker) {
+            document.removeEventListener('click', _pendingClickBlocker, true);
+        }
+        _pendingClickBlocker = (ce) => {
+            if (_isInsideToolbarUI(ce.target)) {
+                ce.stopPropagation();
+                ce.preventDefault();
+            }
+            document.removeEventListener('click', _pendingClickBlocker, true);
+            _pendingClickBlocker = null;
+        };
+        document.addEventListener('click', _pendingClickBlocker, true);
+
+        // Страховочный возврат фокуса на случай, если браузер всё-таки убрал фокус.
+        setTimeout(() => {
+            if (controller?.textEditor?.active && textarea) {
+                try { textarea.focus(); } catch (_) {}
+            }
+        }, 0);
+    };
+    document.addEventListener('mousedown', mousedownCaptureHandler, true);
+
     const keydownHandler = (e) => {
         const isList = listType && listType !== 'none';
         if (e.key === 'Enter') {
@@ -244,6 +300,11 @@ export function bindTextEditorInteractions(controller, {
         textarea.removeEventListener('blur', blurHandler);
         textarea.removeEventListener('keydown', keydownHandler);
         textarea.removeEventListener('input', inputHandler);
+        document.removeEventListener('mousedown', mousedownCaptureHandler, true);
+        if (_pendingClickBlocker) {
+            document.removeEventListener('click', _pendingClickBlocker, true);
+            _pendingClickBlocker = null;
+        }
     };
 
     if (controller.textEditor) {

package/src/ui/HtmlTextLayer.js

@@ -173,6 +173,12 @@ export class HtmlTextLayer {
                     el.style.overflowWrap = isMarkdown ? 'break-word' : '';
                     if (!isMarkdown) el.style.padding = '0';
                 }
+                // После коммита текста высота .mb-text осталась от пустого редактора (схлопнута),
+                // а ResizeUpdate при завершении редактирования отрабатывает раньше синхронизации
+                // контента. Без пере-подгонки DOM-бокс не оборачивает глифы, и рамка выделения,
+                // строящаяся по getBoundingClientRect этого блока, оказывается выше текста.
+                this._autoFitTextHeight(objectId);
+                this.updateOne(objectId);
                 console.log(`🔍 HtmlTextLayer: содержимое обновлено для ${objectId}:`, content);
             } else {
                 console.warn(`❌ HtmlTextLayer: не удалось обновить содержимое для ${objectId}:`, { el: !!el, content });

package/src/ui/TextPropertiesPanel.js

@@ -349,7 +349,11 @@ export class TextPropertiesPanel {
         const panelY = screenY - this.panel.offsetHeight - 20;
 
         const containerRect = this.container.getBoundingClientRect();
-        const finalX = Math.max(10, Math.min(panelX, containerRect.width - this.panel.offsetWidth - 10));
+        const toolbarEl = document.querySelector('.moodboard-toolbar');
+        const toolbarRight = toolbarEl
+            ? toolbarEl.getBoundingClientRect().right - containerRect.left + 10
+            : 10;
+        const finalX = Math.max(toolbarRight, Math.min(panelX, containerRect.width - this.panel.offsetWidth - 10));
         const finalY = Math.max(10, panelY);
 
         this.panel.style.left = `${Math.round(finalX)}px`;

package/src/ui/chat/{Model3dBoardSkeleton.js → BoardSkeleton.js}

@@ -1,22 +1,27 @@
 /**
- * DOM-скелетон 3D-модели на полотне доски.
+ * DOM-скелетон генерируемого объекта на полотне доски.
  *
- * Одна ответственность: показывать анимированную заглушку в том месте,
- * где появится сгенерированная 3D-модель. Не знает про сессию и вьюпорт —
- * экранный прямоугольник ему задаёт ChatWindow (он же держит мировые координаты
- * и пересчитывает позицию при pan/zoom).
+ * Одна ответственность: показывать анимированную заглушку (белая карточка,
+ * бегущий блик, пульсирующая иконка) в том месте, где появится результат
+ * генерации. Не знает про сессию и вьюпорт — экранный прямоугольник ему задаёт
+ * ChatWindow (он же держит мировые координаты и пересчитывает позицию при pan/zoom).
+ *
+ * Используется для 3D-моделей, изображений и видео — иконка и вариант задаются
+ * через конструктор.
  *
  * Lifecycle: attach(container) → setRect(rect)* → enter() → detach() → destroy()
  * attach/detach идемпотентны.
  */
-export class Model3dBoardSkeleton {
+export class BoardSkeleton {
     /**
      * @param {object} [opts]
      * @param {string} [opts.iconSvg] HTML-строка иконки (например ICONS.cube)
+     * @param {string} [opts.variant] Модификатор вида ('3d' | 'image' | 'video')
      */
-    constructor({ iconSvg = '' } = {}) {
+    constructor({ iconSvg = '', variant = '' } = {}) {
         this._el = null;
         this._iconSvg = iconSvg;
+        this._variant = variant;
     }
 
     /**
@@ -26,11 +31,14 @@ export class Model3dBoardSkeleton {
         if (this._el) return;
 
         const el = document.createElement('div');
-        el.className = 'moodboard-chat__3d-skeleton moodboard-chat__3d-skeleton--enter';
+        el.className = 'moodboard-chat__board-skeleton moodboard-chat__board-skeleton--enter';
+        if (this._variant) {
+            el.classList.add(`moodboard-chat__board-skeleton--${this._variant}`);
+        }
 
         if (this._iconSvg) {
             const icon = document.createElement('span');
-            icon.className = 'moodboard-chat__3d-skeleton-icon';
+            icon.className = 'moodboard-chat__board-skeleton-icon';
             icon.innerHTML = this._iconSvg;
             el.appendChild(icon);
         }
@@ -71,8 +79,8 @@ export class Model3dBoardSkeleton {
     /** Запускает анимацию появления. */
     enter() {
         if (!this._el) return;
-        this._el.classList.remove('moodboard-chat__3d-skeleton--enter');
-        this._el.classList.add('moodboard-chat__3d-skeleton--entered');
+        this._el.classList.remove('moodboard-chat__board-skeleton--enter');
+        this._el.classList.add('moodboard-chat__board-skeleton--entered');
     }
 
     /** @returns {boolean} */

package/src/ui/chat/ChatWindow.js

@@ -16,7 +16,7 @@ import { ChatSettingsPopup } from './ChatSettingsPopup.js';
 import { ChatVideoToolbarPills } from './ChatVideoToolbarPills.js';
 import { ChatExtendedPromptModal } from './ChatExtendedPromptModal.js';
 import { Model3dProgressOverlay } from './Model3dProgressOverlay.js';
-import { Model3dBoardSkeleton } from './Model3dBoardSkeleton.js';
+import { BoardSkeleton } from './BoardSkeleton.js';
 import { ICONS, RATIO_ICONS, COUNT_ICONS } from './icons.js';
 
 const CONTENT_TYPE_OPTIONS = [
@@ -237,6 +237,8 @@ export class ChatWindow {
         // Мировые координаты центра скелетона — модель приземлится ровно сюда,
         // независимо от пана/зума во время генерации.
         this._model3dSkeletonWorld = null;
+        this._videoSkeleton = null;
+        this._videoSkeletonWorld = null;
         this._boardImageMessageIds = new Set();
         this._shiftedForImageBatchKeys = new Set();
         this._boardImageShiftHistory = new Map();
@@ -538,6 +540,7 @@ export class ChatWindow {
         if (this._videoUnsubscribe) { this._videoUnsubscribe(); this._videoUnsubscribe = null; }
         this._videoSession?.abort?.();
         this._videoSession = null;
+        this._clearVideoSkeleton();
         this._videoDurationMenu?.destroy();
         this._videoDurationMenu = null;
         this._videoDurationWrapper?.remove();
@@ -851,7 +854,7 @@ export class ChatWindow {
             y: (screenCenterY - (world?.y || 0)) / s
         };
 
-        this._model3dSkeleton = new Model3dBoardSkeleton({ iconSvg: ICONS.cube });
+        this._model3dSkeleton = new BoardSkeleton({ iconSvg: ICONS.cube, variant: '3d' });
         this._model3dSkeleton.attach(this._container ?? document.body);
         this._model3dSkeleton.setRect(this._compute3dSkeletonRect(this._model3dSkeletonWorld), { animate: false });
         this._scheduleAnimationFrame(() => this._model3dSkeleton?.enter());
@@ -871,6 +874,68 @@ export class ChatWindow {
         this._model3dSkeletonWorld = null;
     }
 
+    /**
+     * Экранный прямоугольник скелетона видео из мировых координат центра.
+     * Ширина фиксирована BOARD_IMAGE_WIDTH в world-единицах, высота — по соотношению сторон видео.
+     * @param {{x:number,y:number}} worldCenter
+     */
+    _computeVideoSkeletonRect(worldCenter) {
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        const s = world?.scale?.x || 1;
+        const [wr, hr] = parseFormatRatio(this._videoRatioId);
+        const width = Math.round(BOARD_IMAGE_WIDTH * s);
+        const height = Math.round(width / (wr / hr));
+        const screenX = Math.round(worldCenter.x * s + (world?.x || 0));
+        const screenY = Math.round(worldCenter.y * s + (world?.y || 0));
+        return {
+            left: Math.round(screenX - width / 2),
+            top: Math.round(screenY - height / 2),
+            width,
+            height,
+            radius: Math.max(2, Math.round(12 * s))
+        };
+    }
+
+    _showVideoSkeleton() {
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        if (!world) return;
+        const s = world?.scale?.x || 1;
+
+        const composerRect = this._refs?.composer?.getBoundingClientRect?.();
+        const screenCenterX = composerRect
+            ? Math.round(composerRect.left + composerRect.width / 2)
+            : 400;
+        const screenCenterY = composerRect
+            ? Math.round(composerRect.top - 200)
+            : 200;
+
+        this._clearVideoSkeleton();
+
+        this._videoSkeletonWorld = {
+            x: (screenCenterX - (world?.x || 0)) / s,
+            y: (screenCenterY - (world?.y || 0)) / s
+        };
+
+        this._videoSkeleton = new BoardSkeleton({ iconSvg: ICONS.video, variant: 'video' });
+        this._videoSkeleton.attach(this._container ?? document.body);
+        this._videoSkeleton.setRect(this._computeVideoSkeletonRect(this._videoSkeletonWorld), { animate: false });
+        this._scheduleAnimationFrame(() => this._videoSkeleton?.enter());
+    }
+
+    _syncVideoSkeletonToViewport({ disableTransition = false } = {}) {
+        if (!this._videoSkeleton?.isAttached() || !this._videoSkeletonWorld) return;
+        this._videoSkeleton.setRect(
+            this._computeVideoSkeletonRect(this._videoSkeletonWorld),
+            { animate: !disableTransition }
+        );
+    }
+
+    _clearVideoSkeleton() {
+        this._videoSkeleton?.destroy();
+        this._videoSkeleton = null;
+        this._videoSkeletonWorld = null;
+    }
+
     _place3dModelOnBoard(result) {
         if (!this._boardCore?.eventBus) return;
         const { previewBase64, mimeType, modelUrl, format } = result;
@@ -1145,6 +1210,13 @@ export class ChatWindow {
             this._videoUnsubscribe = null;
         }
         this._videoUnsubscribe = this._videoSession.subscribe((state) => this._onVideoState(state));
+
+        try {
+            this._showVideoSkeleton();
+        } catch (e) {
+            console.warn('[ChatWindow] _showVideoSkeleton failed:', e);
+        }
+
         const opts = this._getVideoRequestOptions();
         void this._videoSession.start({ ...opts, prompt: text, referenceImages: attachments?.length ? attachments : undefined });
     }
@@ -1155,6 +1227,7 @@ export class ChatWindow {
         }
         if (state.status === 'done') {
             this._composer?.setStreaming(false);
+            this._clearVideoSkeleton();
             // Тип объекта «видео» на доске не существует. Событие Events.UI.PasteImageAt
             // ожидает data URL картинки — видео-URL несовместим. Размещение на доске
             // выходит за рамки текущей фазы (нет объекта типа video).
@@ -1166,6 +1239,7 @@ export class ChatWindow {
         }
         if (state.status === 'error') {
             this._composer?.setStreaming(false);
+            this._clearVideoSkeleton();
             if (this._refs?.errorBlock) {
                 const clean = (state.error || 'Ошибка генерации видео').replace(/^AiClient\.\w+\s*\(\d+\):\s*/, '');
                 this._refs.errorBlock.textContent = clean;
@@ -1174,6 +1248,7 @@ export class ChatWindow {
         }
         if (state.status === 'idle') {
             this._composer?.setStreaming(false);
+            this._clearVideoSkeleton();
         }
     }
 
@@ -1317,20 +1392,13 @@ export class ChatWindow {
 
             overlay.style.borderRadius = `${Math.max(2, Math.round(12 * s))}px`;
 
-            const fontSize = Math.round(20 * s);
-            const labelLeft = 12 * Math.min(1, s);
-            const labelBottom = 10 * Math.min(1, s);
-            overlay.style.setProperty('--moodboard-chat-pending-label-font-size', `${fontSize}px`);
-            overlay.style.setProperty('--moodboard-chat-pending-label-left', `${labelLeft}px`);
-            overlay.style.setProperty('--moodboard-chat-pending-label-bottom', `${labelBottom}px`);
-
             overlay.style.setProperty('--moodboard-chat-board-animation-ms', `${BOARD_IMAGE_REARRANGE_MS}ms`);
             overlay.style.setProperty('--moodboard-chat-pending-enter-x', `${enterDistance}px`);
 
-            const label = document.createElement('span');
-            label.className = 'moodboard-chat__pending-image-label';
-            label.textContent = 'В процессе...';
-            overlay.appendChild(label);
+            const icon = document.createElement('span');
+            icon.className = 'moodboard-chat__pending-overlay-icon';
+            icon.innerHTML = ICONS.image;
+            overlay.appendChild(icon);
 
             (this._container ?? document.body).appendChild(overlay);
 
@@ -1680,10 +1748,12 @@ export class ChatWindow {
         const onPanUpdate = () => {
             this._syncPendingOverlaysToViewport({ disableTransition: true });
             this._sync3dSkeletonToViewport({ disableTransition: true });
+            this._syncVideoSkeletonToViewport({ disableTransition: true });
         };
         const onViewportChange = () => {
             this._syncPendingOverlaysToViewport({ disableTransition: true, recomputeWorld: false });
             this._sync3dSkeletonToViewport({ disableTransition: true });
+            this._syncVideoSkeletonToViewport({ disableTransition: true });
             // Зум меняет проекцию композера в мир: после него существующее изображение может
             // оказаться под заглушкой. Перепроверяем инвариант сразу, не дожидаясь рендера сессии.
             this._ensureExistingImagesClearOfPending();