@sequent-org/moodboard 1.4.33 → 1.4.36

package/package.json

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

package/src/core/flows/ClipboardFlow.js

@@ -286,7 +286,7 @@ export function setupClipboardFlow(core) {
         }
     });
 
-    core.eventBus.on(Events.UI.PasteImageAt, async ({ x, y, src, name, skipUpload }) => {
+    core.eventBus.on(Events.UI.PasteImageAt, async ({ x, y, src, name, skipUpload, aiMessageId }) => {
         if (!src) return;
         const uploaded = await ensureServerImage({ src, name, skipUpload });
         if (!uploaded?.src) return;
@@ -312,6 +312,7 @@ export function setupClipboardFlow(core) {
                 name: uploaded.name,
                 width: w,
                 height: h,
+                ...(aiMessageId ? { aiMessageId } : {}),
                 ...revitPayload.properties
             };
             const createdData = core.createObject(

package/src/services/ai/ChatSessionController.js

@@ -41,6 +41,7 @@ export class ChatSessionController {
         this._settingsStorage = settingsStorage || (typeof localStorage !== 'undefined' ? localStorage : null);
         this._listeners = new Set();
         this._abort = null;
+        this._aborts = new Map();
 
         this._state = {
             messages: this._history.load().map((m) => (m.pending ? { ...m, pending: false, error: m.error || 'Прервано' } : m)),
@@ -103,10 +104,11 @@ export class ChatSessionController {
     }
 
     abort() {
-        if (this._abort) {
-            try { this._abort.abort(); } catch { /* noop */ }
-            this._abort = null;
+        for (const controller of this._aborts.values()) {
+            try { controller.abort(); } catch { /* noop */ }
         }
+        this._aborts.clear();
+        this._abort = null;
     }
 
     /**
@@ -116,14 +118,15 @@ export class ChatSessionController {
      */
     async send(text, options = {}) {
         const trimmed = (text || '').trim();
-        if (!trimmed || this._state.status === 'streaming') return;
+        if (!trimmed) return;
 
         const imageCount = normalizeImageCount(options.imageCount);
+        const batchId = `batch_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
         const userMsg = makeMessage('user', trimmed);
         const assistantMsgs = Array.from({ length: imageCount }, (_, index) => makeMessage(
             'assistant',
             imageCount > 1 ? `Генерируется изображение ${index + 1} из ${imageCount}…` : '',
-            { provider: 'yandex-art', pending: true, kind: 'image' }
+            { provider: 'yandex-art', pending: true, kind: 'image', batchId }
         ));
 
         this._state = {
@@ -136,6 +139,7 @@ export class ChatSessionController {
         this._emit();
 
         const abort = new AbortController();
+        this._aborts.set(batchId, abort);
         this._abort = abort;
         let lastError = null;
 
@@ -174,11 +178,13 @@ export class ChatSessionController {
                 })
             );
         } finally {
-            this._abort = null;
+            this._aborts.delete(batchId);
+            this._abort = this._aborts.size > 0 ? [...this._aborts.values()][this._aborts.size - 1] : null;
+            const stillStreaming = this._state.messages.some((m) => m.pending);
             this._state = {
                 ...this._state,
-                status: lastError ? 'error' : 'idle',
-                error: lastError
+                status: stillStreaming ? 'streaming' : (lastError ? 'error' : 'idle'),
+                error: stillStreaming ? this._state.error : lastError
             };
             this._history.save(this._state.messages);
             this._emit();

package/src/ui/chat/ChatComposer.js

@@ -47,7 +47,7 @@ export class ChatComposer {
         });
         this._on(this._send, 'click', () => {
             if (this._send.dataset.state === 'streaming') {
-                this._handlers.onAbort?.();
+                if (this._hasContent()) this._submit();
             } else {
                 this._submit();
             }
@@ -140,7 +140,6 @@ export class ChatComposer {
         const trimmed = text.trim();
         const hasAttachments = this._attachments.length > 0;
         if (!trimmed && !hasAttachments) return;
-        if (this._send.dataset.state === 'streaming') return;
         const attachments = this._attachments.map((entry) => entry.file);
         this._textarea.value = '';
         this._attachments = [];
@@ -150,6 +149,10 @@ export class ChatComposer {
         this._handlers.onSubmit?.(trimmed, attachments);
     }
 
+    _hasContent() {
+        return this._textarea.value.trim().length > 0 || this._attachments.length > 0;
+    }
+
     _refreshSendState() {
         const hasText = this._textarea.value.trim().length > 0;
         const hasAttachments = this._attachments.length > 0;

package/src/ui/chat/ChatWindow.js

@@ -4,6 +4,7 @@ import { ChatSessionController } from '../../services/ai/ChatSessionController.j
 import { Events } from '../../core/events/Events.js';
 
 import { buildChatDom } from './ChatWindowRenderer.js';
+import { formatChatErrorForDisplay } from './formatChatError.js';
 import { ChatMessageList } from './ChatMessageList.js';
 import { ChatComposer } from './ChatComposer.js';
 import { ChatPillMenu } from './ChatPillMenu.js';
@@ -144,8 +145,12 @@ export class ChatWindow {
         this._pendingOverlays = new Map();
         this._pendingOverlayTimers = new Map();
         this._boardImageShiftAnimations = new Map();
-        this._clearSelectionOnSendClick = null;
+        this._pendingBatchOffsets = new Map();
+        this._aiImageLaneSlots = new Map();
+        this._draggingAiImageIds = new Set();
+        this._aiImageLaneHandlers = null;
         this._selectionHandlers = null;
+        this._viewportHandlers = null;
         // Окно от BoxSelectStart до BoxSelectCommit: в это время SelectionAdd
         // приходит на каждый mousemove и не должен пушить превью в чат —
         // финальный набор картинок мы получим из BoxSelectCommit по strict-contains.
@@ -176,10 +181,10 @@ export class ChatWindow {
                 onAbort: () => this._session.abort()
             }
         );
-        this._clearSelectionOnSendClick = () => this._clearBoardSelection();
-        this._refs.send.addEventListener('click', this._clearSelectionOnSendClick);
         this._composer.attach();
         this._attachSelectionEvents();
+        this._attachViewportSync();
+        this._attachAiImageLaneEvents();
 
         this._extendedPromptModal = new ChatExtendedPromptModal(
             this._container,
@@ -263,13 +268,14 @@ export class ChatWindow {
         this._clearPendingOverlays();
         this._cancelBoardImageShiftAnimations();
         if (this._unsubscribe) { this._unsubscribe(); this._unsubscribe = null; }
-        if (this._clearSelectionOnSendClick && this._refs?.send) {
-            this._refs.send.removeEventListener('click', this._clearSelectionOnSendClick);
-            this._clearSelectionOnSendClick = null;
-        }
         this._detachSelectionEvents();
+        this._detachViewportSync();
+        this._detachAiImageLaneEvents();
         this._shiftedForImageBatchKeys.clear();
         this._boardImageShiftHistory.clear();
+        this._pendingBatchOffsets.clear();
+        this._aiImageLaneSlots.clear();
+        this._draggingAiImageIds.clear();
         this._composer?.destroy();
         this._extendedPromptModal?.destroy();
         this._contentTypeMenu?.destroy();
@@ -338,6 +344,7 @@ export class ChatWindow {
         if (state.status !== 'streaming') {
             this._revertFailedBatchShifts(state.messages);
         }
+        this._cleanupPlacedBatchOffsets(state.messages);
         this._messageList.render(state.messages);
         this._contentTypeMenu.refresh();
         this._modelMenu.refresh();
@@ -348,6 +355,26 @@ export class ChatWindow {
         this._updateCountPillIcon();
         this._composer.setStreaming(state.status === 'streaming');
         this._updatePendingImages(state.status === 'streaming' ? state.messages : []);
+
+        const errorBlock = this._refs.errorBlock;
+        const wasVisible = errorBlock.classList.contains('is-visible');
+        const isError = state.error && state.error !== 'Отменено';
+
+        if (isError) {
+            errorBlock.textContent = formatChatErrorForDisplay(state.error);
+            errorBlock.classList.add('is-visible');
+        } else {
+            errorBlock.classList.remove('is-visible');
+        }
+
+        const isVisible = errorBlock.classList.contains('is-visible');
+        if (!wasVisible && isVisible) {
+            requestAnimationFrame(() => {
+                this._pushBoardImagesUpIfNeeded();
+            });
+        } else if (wasVisible && !isVisible) {
+            this._pullBoardImagesDownIfNeeded();
+        }
     }
 
     _updatePendingImages(messages) {
@@ -367,35 +394,64 @@ export class ChatWindow {
         const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
         const s = world?.scale?.x || 1;
 
-        this._shiftExistingImagesForBatch(messages, pending[0].id, s);
+        // Смещаем уже размещённые board-объекты для каждого батча (дедупликация внутри метода)
+        const shiftedBids = new Set();
+        for (const m of pending) {
+            const bid = m.batchId || m.id;
+            if (!shiftedBids.has(bid)) {
+                shiftedBids.add(bid);
+                this._shiftExistingImagesForBatch(messages, m.id, s);
+            }
+        }
 
-        const [wr, hr] = parseFormatRatio(this._formatId);
-        const ratio = wr / hr;
-        const wScreen = Math.round(BOARD_IMAGE_WIDTH * s);
-        const hScreen = Math.round(wScreen / ratio);
-        const enterDistance = Math.round(BOARD_IMAGE_STEP * s * BOARD_IMAGE_PENDING_ENTER_FACTOR);
+        // Смещаем pending-оверлеи для новых батчей (от старших к новейшему)
+        const pendingBatchMeta = [];
+        const seenBids = new Set();
+        for (const m of pending) {
+            if (m.batchId && !seenBids.has(m.batchId)) {
+                seenBids.add(m.batchId);
+                pendingBatchMeta.push({
+                    batchId: m.batchId,
+                    count: pending.filter((pm) => pm.batchId === m.batchId).length
+                });
+            }
+        }
+        for (const { batchId, count } of pendingBatchMeta) {
+            this._shiftPendingOverlaysForNewBatch(batchId, count, s);
+        }
+
+        const enterDistance = this._computeEnterDistance(messages, pending, s, Math.round(BOARD_IMAGE_WIDTH * s));
 
         let newIndex = 0;
         pending.forEach((message) => {
-            const slot = this._getImageBatchSlot(messages, message.id, s);
-            const left = Math.round(slot.x - wScreen / 2);
-            const top = Math.round(slot.y - hScreen / 2);
-
             const existing = this._pendingOverlays.get(message.id);
             if (existing) {
-                const el = existing.el;
-                el.style.left = `${left}px`;
-                el.style.top = `${top}px`;
-                el.style.width = `${wScreen}px`;
-                el.style.height = `${hScreen}px`;
-                el.style.setProperty('--moodboard-chat-board-animation-ms', `${BOARD_IMAGE_REARRANGE_MS}ms`);
-                el.style.setProperty('--moodboard-chat-pending-enter-x', `${enterDistance}px`);
+                // Мировые координаты оверлея зафиксированы в момент создания батча.
+                // Пересчитываем только экранную позицию из сохранённых world-координат,
+                // чтобы пан холста между рендерами не сдвигал worldX/worldY —
+                // иначе размещение реального изображения попадёт в неправильную точку.
+                const [wr2, hr2] = parseFormatRatio(this._formatId);
+                const wScreen2 = Math.round(BOARD_IMAGE_WIDTH * s);
+                const hScreen2 = Math.round(wScreen2 / (wr2 / hr2));
+                const screenLayout = {
+                    left: Math.round(existing.worldX * s + (world?.x || 0) - wScreen2 / 2),
+                    top: Math.round(existing.worldY * s + (world?.y || 0) - hScreen2 / 2),
+                    width: wScreen2,
+                    height: hScreen2,
+                    worldX: existing.worldX,
+                    worldY: existing.worldY
+                };
+                this._reserveAiImageLaneSlotForMessage(message.id, existing.worldX, existing.worldY);
+                this._applyPendingOverlayScreenLayout(existing.el, screenLayout, { animate: true, enterDistance });
                 return;
             }
 
+            const layout = this._computePendingOverlayScreenLayout(messages, message.id, s);
+            this._reserveAiImageLaneSlotForMessage(message.id, layout.worldX, layout.worldY);
+
             const overlay = document.createElement('div');
             overlay.className = 'moodboard-chat__pending-overlay moodboard-chat__pending-overlay--enter';
-            overlay.style.cssText = `left:${left}px;top:${top}px;width:${wScreen}px;height:${hScreen}px`;
+            overlay.style.cssText = `left:${layout.left}px;top:${layout.top}px;width:${layout.width}px;height:${layout.height}px`;
             overlay.style.setProperty('--moodboard-chat-board-animation-ms', `${BOARD_IMAGE_REARRANGE_MS}ms`);
             overlay.style.setProperty('--moodboard-chat-pending-enter-x', `${enterDistance}px`);
 
@@ -404,14 +460,19 @@ export class ChatWindow {
             label.textContent = 'В процессе...';
             overlay.appendChild(label);
 
-            document.body.appendChild(overlay);
+            (this._container ?? document.body).appendChild(overlay);
 
             // Принудительный reflow: фиксируем стартовое состояние (translateX справа + opacity 0)
             // в layout до переключения класса. Без этого браузер может смерджить два состояния
             // в один кадр и transition не запустится — заглушка появится мгновенно.
             void overlay.offsetWidth;
 
-            this._pendingOverlays.set(message.id, { el: overlay });
+            this._pendingOverlays.set(message.id, {
+                el: overlay,
+                batchId: message.batchId,
+                worldX: layout.worldX,
+                worldY: layout.worldY
+            });
 
             const stagger = newIndex * BOARD_IMAGE_PENDING_STAGGER_MS;
             newIndex += 1;
@@ -442,6 +503,40 @@ export class ChatWindow {
         }
     }
 
+    /**
+     * Вычисляет расстояние входа заглушки так, чтобы новая заглушка въезжала справа
+     * от уже размещённых AI-изображений на доске, а не накрывала их во время анимации
+     * сдвига. Без этого при N>1 изображений в батче enter-расстояние фиксированное
+     * (512px) не покрывало ширину существующего ряда (940px для трёх изображений),
+     * и заглушка пересекалась с ещё не ушедшими влево картинками.
+     */
+    _computeEnterDistance(messages, pending, scale, wScreen) {
+        const baseEnter = Math.round(BOARD_IMAGE_STEP * scale * BOARD_IMAGE_PENDING_ENTER_FACTOR);
+
+        const aiObjects = this._getBoardAiImageObjects();
+        if (aiObjects.length === 0) return baseEnter;
+
+        const firstNewPending = pending.find((m) => !this._pendingOverlays.has(m.id));
+        if (!firstNewPending) return baseEnter;
+
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        const worldX = world?.x || 0;
+        const existingRight_world = this._getAiImageLaneRightBoundary(aiObjects);
+        if (!Number.isFinite(existingRight_world)) return baseEnter;
+        const existingRight_screen = Math.round(existingRight_world * scale + worldX);
+
+        const step = Math.round(BOARD_IMAGE_STEP * scale);
+        const gap = Math.round(BOARD_IMAGE_GAP * scale);
+
+        const slot = this._getImageBatchSlot(messages, firstNewPending.id, scale);
+        const batch = findImageGenerationBatch(messages, firstNewPending.id);
+        const leftmostSlotX = Math.round(slot.x - batch.index * step);
+        const leftmostFinalLeft = leftmostSlotX - Math.round(wScreen / 2);
+
+        const neededEnter = existingRight_screen - leftmostFinalLeft + gap;
+        return Math.max(baseEnter, Math.ceil(neededEnter));
+    }
+
     _clearPendingOverlays() {
         for (const record of this._pendingOverlays.values()) {
             record.el.remove();
@@ -451,6 +546,72 @@ export class ChatWindow {
             clearTimeout(timer);
         }
         this._pendingOverlayTimers.clear();
+        this._pendingBatchOffsets.clear();
+    }
+
+    _shiftPendingOverlaysForNewBatch(batchId, count, scale) {
+        if (!batchId || this._pendingBatchOffsets.has(batchId)) return;
+
+        const step = Math.round(BOARD_IMAGE_STEP * scale);
+        const shiftAmount = count * step;
+
+        for (const [existingId, offset] of this._pendingBatchOffsets) {
+            this._pendingBatchOffsets.set(existingId, offset - shiftAmount);
+        }
+        this._pendingBatchOffsets.set(batchId, 0);
+
+        let existingOverlaysShifted = false;
+        const messages = this._session?.getState?.()?.messages || [];
+        for (const [messageId, record] of this._pendingOverlays) {
+            if (record.batchId === batchId) continue;
+            const layout = this._computePendingOverlayScreenLayout(messages, messageId, scale);
+            record.worldX = layout.worldX;
+            record.worldY = layout.worldY;
+            this._reserveAiImageLaneSlotForMessage(messageId, layout.worldX, layout.worldY);
+            this._applyPendingOverlayScreenLayout(record.el, layout, { animate: true });
+            existingOverlaysShifted = true;
+        }
+
+        // Когда существующие заглушки сдвигаются влево, уже размещённые AI-изображения
+        // на доске должны сдвинуться на то же расстояние — иначе они окажутся
+        // правее заглушек и перекроются ими.
+        if (!existingOverlaysShifted) return;
+
+        const worldShift = shiftAmount / scale;
+        for (const obj of this._getBoardAiImageObjects()) {
+            if (obj?.position) {
+                const key = getAiImageLaneKeyForObject(obj);
+                const currentSlot = this._getAiImageLaneSlotForObject(obj);
+                const from = { x: obj.position.x, y: obj.position.y };
+                if (this._draggingAiImageIds.has(obj.id)) {
+                    this._reserveAiImageLaneSlotForObject(obj);
+                    continue;
+                }
+                const to = {
+                    x: Math.round((currentSlot?.x ?? obj.position.x) - worldShift),
+                    y: currentSlot?.y ?? obj.position.y
+                };
+                if (key) {
+                    this._aiImageLaneSlots.set(key, {
+                        x: to.x,
+                        y: to.y,
+                        width: currentSlot?.width ?? getBoardObjectWidth(obj),
+                        height: currentSlot?.height ?? getBoardObjectHeight(obj)
+                    });
+                }
+                this._animateBoardImageToPosition(obj.id, from, to);
+            }
+        }
+    }
+
+    _cleanupPlacedBatchOffsets(messages) {
+        if (this._pendingBatchOffsets.size === 0) return;
+        for (const batchId of [...this._pendingBatchOffsets.keys()]) {
+            const batchMessages = (messages || []).filter((m) => m.batchId === batchId);
+            if (batchMessages.length === 0 || batchMessages.every((m) => !m.pending)) {
+                this._pendingBatchOffsets.delete(batchId);
+            }
+        }
     }
 
     _getImageRequestOptions() {
@@ -463,6 +624,164 @@ export class ChatWindow {
         };
     }
 
+    _computePendingOverlayScreenLayout(messages, messageId, scale = 1) {
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        const s = scale || world?.scale?.x || 1;
+        const [wr, hr] = parseFormatRatio(this._formatId);
+        const ratio = wr / hr;
+        const wScreen = Math.round(BOARD_IMAGE_WIDTH * s);
+        const hScreen = Math.round(wScreen / ratio);
+        const slot = this._getImageBatchSlot(messages, messageId, s);
+        const worldX = (slot.x - (world?.x || 0)) / s;
+        const worldY = (slot.y - (world?.y || 0)) / s;
+        const screenX = Math.round(worldX * s + (world?.x || 0));
+        const screenY = Math.round(worldY * s + (world?.y || 0));
+
+        return {
+            left: Math.round(screenX - wScreen / 2),
+            top: Math.round(screenY - hScreen / 2),
+            width: wScreen,
+            height: hScreen,
+            worldX,
+            worldY
+        };
+    }
+
+    _applyPendingOverlayScreenLayout(el, layout, { animate = false, enterDistance } = {}) {
+        el.style.left = `${layout.left}px`;
+        el.style.top = `${layout.top}px`;
+        el.style.width = `${layout.width}px`;
+        el.style.height = `${layout.height}px`;
+        if (!animate) return;
+
+        el.style.setProperty('--moodboard-chat-board-animation-ms', `${BOARD_IMAGE_REARRANGE_MS}ms`);
+        if (enterDistance != null) {
+            el.style.setProperty('--moodboard-chat-pending-enter-x', `${enterDistance}px`);
+        }
+    }
+
+    /**
+     * Пересчитывает screen-позиции заглушек из world-координат — вместе с AI-изображениями на доске при pan/zoom.
+     */
+    _syncPendingOverlaysToViewport({ disableTransition = false, recomputeWorld = false } = {}) {
+        if (this._pendingOverlays.size === 0) return;
+
+        const messages = this._session?.getState?.()?.messages;
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        const s = world?.scale?.x || 1;
+        const [wr, hr] = parseFormatRatio(this._formatId);
+        const wScreen = Math.round(BOARD_IMAGE_WIDTH * s);
+        const hScreen = Math.round(wScreen / (wr / hr));
+
+        for (const [messageId, record] of this._pendingOverlays) {
+            if (recomputeWorld || typeof record.worldX !== 'number' || typeof record.worldY !== 'number') {
+                const layout = this._computePendingOverlayScreenLayout(messages, messageId, s);
+                record.worldX = layout.worldX;
+                record.worldY = layout.worldY;
+            }
+
+            const screenX = Math.round(record.worldX * s + (world?.x || 0));
+            const screenY = Math.round(record.worldY * s + (world?.y || 0));
+            const el = record.el;
+            this._reserveAiImageLaneSlotForMessage(messageId, record.worldX, record.worldY);
+            if (disableTransition) {
+                el.style.transition = 'none';
+            }
+            el.style.left = `${Math.round(screenX - wScreen / 2)}px`;
+            el.style.top = `${Math.round(screenY - hScreen / 2)}px`;
+            el.style.width = `${wScreen}px`;
+            el.style.height = `${hScreen}px`;
+            if (disableTransition) {
+                void el.offsetWidth;
+                el.style.removeProperty('transition');
+            }
+        }
+    }
+
+    _attachViewportSync() {
+        const eventBus = this._boardCore?.eventBus;
+        if (!eventBus || typeof eventBus.on !== 'function' || this._viewportHandlers) return;
+
+        const onPanUpdate = () => {
+            this._syncPendingOverlaysToViewport({ disableTransition: true });
+        };
+        const onViewportChange = () => {
+            this._syncPendingOverlaysToViewport({ disableTransition: true, recomputeWorld: false });
+        };
+
+        this._viewportHandlers = { onPanUpdate, onViewportChange };
+        eventBus.on(Events.Tool.PanUpdate, onPanUpdate);
+        eventBus.on(Events.UI.ZoomPercent, onViewportChange);
+        eventBus.on(Events.Viewport.Changed, onViewportChange);
+    }
+
+    _detachViewportSync() {
+        const eventBus = this._boardCore?.eventBus;
+        const handlers = this._viewportHandlers;
+        if (!eventBus || typeof eventBus.off !== 'function' || !handlers) return;
+
+        eventBus.off(Events.Tool.PanUpdate, handlers.onPanUpdate);
+        eventBus.off(Events.UI.ZoomPercent, handlers.onViewportChange);
+        eventBus.off(Events.Viewport.Changed, handlers.onViewportChange);
+        this._viewportHandlers = null;
+    }
+
+    _attachAiImageLaneEvents() {
+        const eventBus = this._boardCore?.eventBus;
+        if (!eventBus || typeof eventBus.on !== 'function' || this._aiImageLaneHandlers) return;
+
+        const onDragStart = (data) => {
+            this._startAiImageLaneDrag([data?.object]);
+        };
+        const onDragUpdate = (data) => {
+            this._updateAiImageLaneDrag([data?.object]);
+        };
+        const onDragEnd = (data) => {
+            this._updateAiImageLaneDrag([data?.object]);
+            this._endAiImageLaneDrag([data?.object]);
+        };
+        const onGroupDragStart = (data) => {
+            this._startAiImageLaneDrag(data?.objects);
+        };
+        const onGroupDragUpdate = (data) => {
+            this._updateAiImageLaneDrag(data?.objects);
+        };
+        const onGroupDragEnd = (data) => {
+            this._updateAiImageLaneDrag(data?.objects);
+            this._endAiImageLaneDrag(data?.objects);
+        };
+
+        this._aiImageLaneHandlers = {
+            onDragStart,
+            onDragUpdate,
+            onDragEnd,
+            onGroupDragStart,
+            onGroupDragUpdate,
+            onGroupDragEnd
+        };
+
+        eventBus.on(Events.Tool.DragStart, onDragStart);
+        eventBus.on(Events.Tool.DragUpdate, onDragUpdate);
+        eventBus.on(Events.Tool.DragEnd, onDragEnd);
+        eventBus.on(Events.Tool.GroupDragStart, onGroupDragStart);
+        eventBus.on(Events.Tool.GroupDragUpdate, onGroupDragUpdate);
+        eventBus.on(Events.Tool.GroupDragEnd, onGroupDragEnd);
+    }
+
+    _detachAiImageLaneEvents() {
+        const eventBus = this._boardCore?.eventBus;
+        const handlers = this._aiImageLaneHandlers;
+        if (!eventBus || typeof eventBus.off !== 'function' || !handlers) return;
+
+        eventBus.off(Events.Tool.DragStart, handlers.onDragStart);
+        eventBus.off(Events.Tool.DragUpdate, handlers.onDragUpdate);
+        eventBus.off(Events.Tool.DragEnd, handlers.onDragEnd);
+        eventBus.off(Events.Tool.GroupDragStart, handlers.onGroupDragStart);
+        eventBus.off(Events.Tool.GroupDragUpdate, handlers.onGroupDragUpdate);
+        eventBus.off(Events.Tool.GroupDragEnd, handlers.onGroupDragEnd);
+        this._aiImageLaneHandlers = null;
+    }
+
     _attachSelectionEvents() {
         const eventBus = this._boardCore?.eventBus;
         if (!eventBus || typeof eventBus.on !== 'function' || this._selectionHandlers) return;
@@ -563,7 +882,8 @@ export class ChatWindow {
         const step = Math.round(BOARD_IMAGE_STEP * scale);
         const count = Math.max(batch.count, 1);
         const index = Math.min(Math.max(batch.index, 0), count - 1);
-        const leftmostCenter = anchor.x - ((count - 1) * step) / 2;
+        const batchOffset = batch.batchId ? (this._pendingBatchOffsets.get(batch.batchId) ?? 0) : 0;
+        const leftmostCenter = anchor.x - ((count - 1) * step) / 2 + batchOffset;
 
         return {
             x: Math.round(leftmostCenter + index * step),
@@ -574,9 +894,23 @@ export class ChatWindow {
     _getImageGroupAnchor() {
         const composerRect = this._refs?.composer?.getBoundingClientRect?.();
         if (composerRect) {
+            let y = composerRect.top - 250;
+            
+            const errorBlock = this._refs?.errorBlock;
+            if (errorBlock && errorBlock.classList.contains('is-visible')) {
+                const errorRect = errorBlock.getBoundingClientRect();
+                // Низ картинок примерно y + 150.
+                // Хотим чтобы errorRect.top был хотя бы y + 150 + 16 (gap)
+                // То есть y + 166 <= errorRect.top
+                const minY = errorRect.top - 166;
+                if (y > minY) {
+                    y = minY;
+                }
+            }
+            
             return {
                 x: Math.round(composerRect.left + composerRect.width / 2),
-                y: Math.round(composerRect.top - 250)
+                y: Math.round(y)
             };
         }
 
@@ -621,7 +955,8 @@ export class ChatWindow {
         const aiObjects = this._getBoardAiImageObjects();
         if (aiObjects.length === 0 || !nextBatchBounds) return;
 
-        const existingRight = Math.max(...aiObjects.map((object) => object.position.x + getBoardObjectWidth(object)));
+        const existingRight = this._getAiImageLaneRightBoundary(aiObjects);
+        if (!Number.isFinite(existingRight)) return;
         const shift = Math.ceil(existingRight + BOARD_IMAGE_GAP - nextBatchBounds.left);
         if (shift <= 0) return;
 
@@ -631,9 +966,28 @@ export class ChatWindow {
         for (const id of ids) {
             const obj = objects?.find((item) => item.id === id);
             if (obj?.position) {
+                const key = getAiImageLaneKeyForObject(obj);
+                const currentSlot = this._getAiImageLaneSlotForObject(obj);
                 const from = { x: obj.position.x, y: obj.position.y };
-                const to = { x: Math.round(obj.position.x - shift), y: obj.position.y };
-                shiftRecord.push({ id, from });
+                if (this._draggingAiImageIds.has(id)) {
+                    this._reserveAiImageLaneSlotForObject(obj);
+                    continue;
+                }
+                const fromSlot = currentSlot ? { ...currentSlot } : null;
+                const to = {
+                    x: Math.round((currentSlot?.x ?? obj.position.x) - shift),
+                    y: currentSlot?.y ?? obj.position.y
+                };
+                const toSlot = {
+                    x: to.x,
+                    y: to.y,
+                    width: currentSlot?.width ?? getBoardObjectWidth(obj),
+                    height: currentSlot?.height ?? getBoardObjectHeight(obj)
+                };
+                if (key) {
+                    this._aiImageLaneSlots.set(key, toSlot);
+                }
+                shiftRecord.push({ id, from, fromSlot });
                 this._animateBoardImageToPosition(id, from, to);
             }
         }
@@ -648,9 +1002,13 @@ export class ChatWindow {
         if (!record) return;
 
         const objects = this._boardCore?.state?.state?.objects;
-        for (const { id, from } of record) {
+        for (const { id, from, fromSlot } of record) {
             const obj = objects?.find((item) => item.id === id);
             if (obj?.position) {
+                const key = getAiImageLaneKeyForObject(obj);
+                if (key && fromSlot) {
+                    this._aiImageLaneSlots.set(key, fromSlot);
+                }
                 this._animateBoardImageToPosition(id, obj.position, from);
             }
         }
@@ -681,6 +1039,58 @@ export class ChatWindow {
         }
     }
 
+    _pushBoardImagesUpIfNeeded() {
+        const errorBlock = this._refs.errorBlock;
+        if (!errorBlock) return;
+        const errorRect = errorBlock.getBoundingClientRect();
+        
+        const aiObjects = this._getBoardAiImageObjects();
+        if (aiObjects.length === 0) return;
+
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        const s = world?.scale?.x || 1;
+
+        let maxOverlap = 0;
+        for (const obj of aiObjects) {
+            if (!obj.position) continue;
+            const height = getBoardObjectHeight(obj);
+            const bottomWorld = obj.position.y + height;
+            const bottomScreen = bottomWorld * s + (world?.y || 0);
+
+            const overlap = bottomScreen - (errorRect.top - 16);
+            if (overlap > maxOverlap) {
+                maxOverlap = overlap;
+            }
+        }
+
+        if (maxOverlap > 0) {
+            const shiftWorld = Math.ceil(maxOverlap / s);
+            this._errorShiftAmount = shiftWorld;
+            for (const obj of aiObjects) {
+                if (obj.position) {
+                    const from = { x: obj.position.x, y: obj.position.y };
+                    const to = { x: obj.position.x, y: obj.position.y - shiftWorld };
+                    this._animateBoardImageToPosition(obj.id, from, to);
+                }
+            }
+        }
+    }
+
+    _pullBoardImagesDownIfNeeded() {
+        if (!this._errorShiftAmount) return;
+        const shiftWorld = this._errorShiftAmount;
+        this._errorShiftAmount = 0;
+
+        const aiObjects = this._getBoardAiImageObjects();
+        for (const obj of aiObjects) {
+            if (obj.position) {
+                const from = { x: obj.position.x, y: obj.position.y };
+                const to = { x: obj.position.x, y: obj.position.y + shiftWorld };
+                this._animateBoardImageToPosition(obj.id, from, to);
+            }
+        }
+    }
+
     _animateBoardImageToPosition(id, fromPosition, toPosition) {
         const updatePosition = this._boardCore?.updateObjectPositionDirect;
         if (!id || typeof updatePosition !== 'function' || !fromPosition || !toPosition) return;
@@ -755,6 +1165,156 @@ export class ChatWindow {
         return objects.filter((object) => isBoardAiImageObject(object));
     }
 
+    _getBoardObjectById(objectId) {
+        const objects = this._boardCore?.state?.state?.objects;
+        if (!objectId || !Array.isArray(objects)) return null;
+
+        return objects.find((object) => object?.id === objectId) || null;
+    }
+
+    _startAiImageLaneDrag(ids) {
+        const objects = this._getAiImageObjectsByIds(ids);
+        if (objects.length === 0) return;
+
+        this._reserveCurrentAiImageLaneSlots();
+        for (const object of objects) {
+            this._draggingAiImageIds.add(object.id);
+        }
+    }
+
+    _updateAiImageLaneDrag(ids) {
+        const objects = this._getAiImageObjectsByIds(ids);
+        for (const object of objects) {
+            this._reserveAiImageLaneSlotForObject(object);
+        }
+    }
+
+    _endAiImageLaneDrag(ids) {
+        const objects = this._getAiImageObjectsByIds(ids);
+        for (const object of objects) {
+            this._draggingAiImageIds.delete(object.id);
+        }
+    }
+
+    _getAiImageObjectsByIds(ids) {
+        const list = Array.isArray(ids) ? ids : [];
+        const objects = [];
+
+        for (const id of list) {
+            const object = this._getBoardObjectById(id);
+            if (isBoardAiImageObject(object)) {
+                objects.push(object);
+            }
+        }
+
+        return objects;
+    }
+
+    _reserveCurrentAiImageLaneSlots() {
+        for (const object of this._getBoardAiImageObjects()) {
+            this._reserveAiImageLaneSlotForObject(object);
+        }
+    }
+
+    _reserveAiImageLaneSlotForObject(object) {
+        const key = getAiImageLaneKeyForObject(object);
+        if (!key || !object?.position) return null;
+
+        const slot = {
+            x: Math.round(object.position.x),
+            y: Math.round(object.position.y),
+            width: getBoardObjectWidth(object),
+            height: getBoardObjectHeight(object)
+        };
+        this._aiImageLaneSlots.set(key, slot);
+
+        return slot;
+    }
+
+    _reserveAiImageLaneSlotForMessage(messageId, centerWorldX, centerWorldY) {
+        if (!messageId || !Number.isFinite(centerWorldX) || !Number.isFinite(centerWorldY)) return null;
+
+        const [wr, hr] = parseFormatRatio(this._formatId);
+        const width = BOARD_IMAGE_WIDTH;
+        const height = Math.round(width / (wr / hr));
+        const slot = {
+            x: Math.round(centerWorldX - width / 2),
+            y: Math.round(centerWorldY - height / 2),
+            width,
+            height
+        };
+        this._aiImageLaneSlots.set(messageId, slot);
+
+        return slot;
+    }
+
+    _getAiImageLaneSlotForObject(object) {
+        const key = getAiImageLaneKeyForObject(object);
+        return (key && this._aiImageLaneSlots.get(key)) || this._reserveAiImageLaneSlotForObject(object);
+    }
+
+    _getAiImageLaneRightBoundary(objects = this._getBoardAiImageObjects(), excludeKey = null) {
+        const rights = [];
+
+        for (const object of objects) {
+            const key = getAiImageLaneKeyForObject(object);
+            if (key && key === excludeKey) continue;
+
+            const slot = this._getAiImageLaneSlotForObject(object);
+            if (slot) {
+                rights.push(slot.x + slot.width);
+            }
+        }
+
+        for (const [key, slot] of this._aiImageLaneSlots) {
+            if (key === excludeKey) continue;
+
+            if (slot && Number.isFinite(slot.x) && Number.isFinite(slot.width)) {
+                rights.push(slot.x + slot.width);
+            }
+        }
+
+        return rights.length > 0 ? Math.max(...rights) : null;
+    }
+
+    _resolveAiImageInsertPoint(msg, x, y, scale) {
+        const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
+        const s = scale || world?.scale?.x || 1;
+        const centerWorldX = (x - (world?.x || 0)) / s;
+        const centerWorldY = (y - (world?.y || 0)) / s;
+        let slot = this._reserveAiImageLaneSlotForMessage(msg.id, centerWorldX, centerWorldY);
+
+        if (slot && this._doesAiImageLaneSlotOverlap(slot, msg.id)) {
+            const right = this._getAiImageLaneRightBoundary(undefined, msg.id);
+            if (Number.isFinite(right)) {
+                slot = {
+                    ...slot,
+                    x: Math.round(right + BOARD_IMAGE_GAP)
+                };
+                this._aiImageLaneSlots.set(msg.id, slot);
+            }
+        }
+
+        if (!slot) return { x, y };
+
+        return {
+            x: Math.round((slot.x + slot.width / 2) * s + (world?.x || 0)),
+            y: Math.round((slot.y + slot.height / 2) * s + (world?.y || 0))
+        };
+    }
+
+    _doesAiImageLaneSlotOverlap(candidate, candidateKey) {
+        for (const [key, slot] of this._aiImageLaneSlots) {
+            if (key === candidateKey || !slot) continue;
+
+            if (rectsOverlap(candidate, slot)) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
     _addImageToBoard(msg) {
         if (!this._boardCore?.eventBus) return;
         const dataUrl = `data:${msg.mimeType || 'image/jpeg'};base64,${msg.imageBase64}`;
@@ -762,13 +1322,28 @@ export class ChatWindow {
         const s = world?.scale?.x || 1;
         const messages = this._session.getState().messages;
         this._shiftExistingImagesForBatch(messages, msg.id, s);
-        const slot = this._getImageBatchSlot(messages, msg.id, s);
-        
+
+        // Pending-оверлей хранит worldX/worldY, зафиксированные в момент начала генерации.
+        // Используем их чтобы разместить изображение в той же мировой точке,
+        // независимо от того, сдвинул ли пользователь холст пока шла генерация.
+        const pendingRecord = this._pendingOverlays.get(msg.id);
+        let x, y;
+        if (pendingRecord && typeof pendingRecord.worldX === 'number' && typeof pendingRecord.worldY === 'number') {
+            x = Math.round(pendingRecord.worldX * s + (world?.x || 0));
+            y = Math.round(pendingRecord.worldY * s + (world?.y || 0));
+        } else {
+            const slot = this._getImageBatchSlot(messages, msg.id, s);
+            x = slot.x;
+            y = slot.y;
+        }
+        const insertPoint = this._resolveAiImageInsertPoint(msg, x, y, s);
+
         this._boardCore.eventBus.emit(Events.UI.PasteImageAt, {
-            x: slot.x,
-            y: slot.y,
+            x: insertPoint.x,
+            y: insertPoint.y,
             src: dataUrl,
             name: 'ai-generated.jpg',
+            aiMessageId: msg.id,
             skipUpload: true
         });
     }
@@ -828,13 +1403,25 @@ function findImageGenerationBatch(messages, messageId) {
         return { index: 0, count: 1 };
     }
 
+    const target = list[targetIndex];
+    if (target?.batchId) {
+        const batchMessages = list.filter((m) => m.batchId === target.batchId);
+        const index = batchMessages.findIndex((m) => m.id === messageId);
+        return {
+            index: Math.max(index, 0),
+            count: batchMessages.length,
+            ids: batchMessages.map((m) => m.id),
+            batchId: target.batchId
+        };
+    }
+
     let start = targetIndex;
-    while (start > 0 && isImageGenerationMessage(list[start - 1])) {
+    while (start > 0 && isImageGenerationMessage(list[start - 1]) && !list[start - 1].batchId) {
         start--;
     }
 
     let end = targetIndex;
-    while (end + 1 < list.length && isImageGenerationMessage(list[end + 1])) {
+    while (end + 1 < list.length && isImageGenerationMessage(list[end + 1]) && !list[end + 1].batchId) {
         end++;
     }
 
@@ -862,6 +1449,19 @@ function isBoardAiImageObject(object) {
         && Number.isFinite(object.position.x);
 }
 
+function getAiImageLaneKeyForObject(object) {
+    return object?.properties?.aiMessageId || object?.id || null;
+}
+
+function rectsOverlap(a, b) {
+    if (!a || !b) return false;
+
+    return a.x < b.x + b.width
+        && a.x + a.width > b.x
+        && a.y < b.y + b.height
+        && a.y + a.height > b.y;
+}
+
 function isReferenceImageObject(object) {
     return Boolean(object?.id)
         && (object.type === 'image' || object.type === 'revit-screenshot-img')
@@ -937,6 +1537,11 @@ function getBoardObjectWidth(object) {
     return Number.isFinite(width) ? Math.max(1, Math.round(width)) : BOARD_IMAGE_WIDTH;
 }
 
+function getBoardObjectHeight(object) {
+    const height = object?.height ?? object?.properties?.height ?? BOARD_IMAGE_WIDTH;
+    return Number.isFinite(height) ? Math.max(1, Math.round(height)) : BOARD_IMAGE_WIDTH;
+}
+
 function easeOutCubic(progress) {
     return 1 - Math.pow(1 - progress, 3);
 }

package/src/ui/chat/ChatWindowRenderer.js

@@ -21,6 +21,9 @@ export function buildChatDom() {
     history.setAttribute('role', 'log');
     history.setAttribute('aria-live', 'polite');
 
+    const errorBlock = createDiv('moodboard-chat__error-block');
+    errorBlock.setAttribute('aria-live', 'assertive');
+
     const composer = createDiv('moodboard-chat__composer');
 
     const statusBar = createDiv('moodboard-chat__status-bar');
@@ -35,7 +38,8 @@ export function buildChatDom() {
         history,
         composer,
         statusBar,
-        pendingImages
+        pendingImages,
+        errorBlock
     };
 
     composer.appendChild(buildInputRow(refs => Object.assign(rendererRefs, refs)));
@@ -43,6 +47,7 @@ export function buildChatDom() {
 
     root.appendChild(history);
     root.appendChild(pendingImages);
+    root.appendChild(errorBlock);
     root.appendChild(statusBar);
     root.appendChild(composer);
 

package/src/ui/chat/formatChatError.js

@@ -0,0 +1,229 @@
+/**
+ * Форматирование текста ошибки для moodboard-chat__error-block:
+ * русский текст пользователю, системный префикс AiClient.* (код) — в скобках в конце.
+ */
+
+/** @type {Record<number, string>} */
+export const HTTP_STATUS_RU = {
+    400: 'Некорректный запрос',
+    401: 'Требуется авторизация',
+    403: 'Доступ запрещён',
+    404: 'Ресурс не найден',
+    408: 'Превышено время ожидания запроса',
+    409: 'Конфликт запроса',
+    413: 'Слишком большой запрос',
+    422: 'Ошибка валидации данных',
+    429: 'Слишком много запросов',
+    500: 'Внутренняя ошибка сервера',
+    501: 'Операция не поддерживается',
+    502: 'Сбой шлюза',
+    503: 'Сервис временно недоступен',
+    504: 'Превышено время ожидания шлюза'
+};
+
+/** Англоязычные фразы statusText / Express — ключ в нижнем регистре */
+/** @type {Record<string, string>} */
+const HTTP_STATUS_PHRASE_RU = {
+    'bad request': HTTP_STATUS_RU[400],
+    'unauthorized': HTTP_STATUS_RU[401],
+    'forbidden': HTTP_STATUS_RU[403],
+    'not found': HTTP_STATUS_RU[404],
+    'request timeout': HTTP_STATUS_RU[408],
+    'conflict': HTTP_STATUS_RU[409],
+    'payload too large': HTTP_STATUS_RU[413],
+    'unprocessable entity': HTTP_STATUS_RU[422],
+    'too many requests': HTTP_STATUS_RU[429],
+    'internal server error': HTTP_STATUS_RU[500],
+    'not implemented': HTTP_STATUS_RU[501],
+    'bad gateway': HTTP_STATUS_RU[502],
+    'service unavailable': HTTP_STATUS_RU[503],
+    'gateway timeout': HTTP_STATUS_RU[504]
+};
+
+/** @type {Record<string, string>} */
+const EXACT_MESSAGES_RU = {
+    'YandexART provider does not support reference images':
+        'Провайдер YandexART не поддерживает опорные изображения',
+    'YandexART provider is not configured':
+        'Провайдер YandexART не настроен',
+    'YandexART response does not contain image data':
+        'В ответе YandexART нет данных изображения',
+    'YandexART returned non-JSON response':
+        'YandexART вернул ответ не в формате JSON',
+    'YandexART did not return operation id':
+        'YandexART не вернул идентификатор операции',
+    'YandexART operation failed':
+        'Операция YandexART завершилась с ошибкой',
+    'YandexART operation timed out':
+        'Превышено время ожидания операции YandexART',
+    'Yandex Operations API returned non-JSON response':
+        'API операций Yandex вернул ответ не в формате JSON',
+    'YandexART API error':
+        'Ошибка API YandexART',
+    'Yandex Operations API error':
+        'Ошибка API операций Yandex',
+    'DeepSeek provider is not configured':
+        'Провайдер DeepSeek не настроен',
+    'Yandex provider is not configured':
+        'Провайдер Yandex не настроен',
+    'Provider "yandex-art" is not configured':
+        'Провайдер «yandex-art» не настроен',
+    'AI stream error':
+        'Ошибка потока ответа ИИ',
+    'AiClient.chatStream: empty response body':
+        'Пустое тело ответа при потоковой генерации',
+    'Ошибка запроса':
+        'Ошибка запроса',
+    'Internal server error':
+        HTTP_STATUS_RU[500],
+    'Internal Server Error':
+        HTTP_STATUS_RU[500],
+    'stream error':
+        'Ошибка потока ответа'
+};
+
+/** @type {Array<{ pattern: RegExp, format: (match: RegExpMatchArray) => string }>} */
+const PREFIX_MESSAGES_RU = [
+    {
+        pattern: /^YandexART API unreachable: (.+)$/,
+        format: ([, detail]) => `API YandexART недоступен: ${detail}`
+    },
+    {
+        pattern: /^Yandex Operations API unreachable: (.+)$/,
+        format: ([, detail]) => `API операций Yandex недоступен: ${detail}`
+    },
+    {
+        pattern: /^YandexART API error \((\d+)\)$/,
+        format: ([, status]) => `Ошибка API YandexART (${status})`
+    },
+    {
+        pattern: /^Yandex Operations API error \((\d+)\)$/,
+        format: ([, status]) => `Ошибка API операций Yandex (${status})`
+    },
+    {
+        pattern: /^Unknown provider: (.+)$/,
+        format: ([, id]) => `Неизвестный провайдер: ${id}`
+    },
+    {
+        pattern: /^Provider "(.+)" is not configured$/,
+        format: ([, id]) => `Провайдер «${id}» не настроен`
+    },
+    {
+        pattern: /^Cannot load image reference \((\d+)\)$/,
+        format: ([, status]) => `Не удалось загрузить опорное изображение (${status})`
+    },
+    {
+        pattern: /^(\d{3}):\s*(.+)$/,
+        format: ([, status, detail]) => {
+            const ru = translateByHttpStatus(Number(status)) || detail;
+            return `${ru} (${status})`;
+        }
+    }
+];
+
+const AI_CLIENT_WITH_STATUS_RE = /^([A-Za-z][\w.]*)\s*\((\d+)\):\s*(.+)$/s;
+const AI_CLIENT_PLAIN_RE = /^([A-Za-z][\w.]*):\s*(.+)$/s;
+
+/**
+ * @param {string|null|undefined} raw
+ * @returns {string}
+ */
+export function formatChatErrorForDisplay(raw) {
+    if (raw == null) return '';
+    const trimmed = String(raw).trim();
+    if (!trimmed) return '';
+
+    if (trimmed === 'Отменено') {
+        return trimmed;
+    }
+
+    const withStatus = trimmed.match(AI_CLIENT_WITH_STATUS_RE);
+    if (withStatus) {
+        const [, system, status, message] = withStatus;
+        const ru = translateErrorMessage(message.trim(), Number(status));
+        return `${ru} (${system} (${status}))`;
+    }
+
+    const plain = trimmed.match(AI_CLIENT_PLAIN_RE);
+    if (plain) {
+        const [, system, message] = plain;
+        const statusOnly = /^\d{3}$/.test(message.trim()) ? Number(message.trim()) : undefined;
+        const ru = translateErrorMessage(message.trim(), statusOnly);
+        return `${ru} (${system})`;
+    }
+
+    return translateErrorMessage(trimmed);
+}
+
+/**
+ * @param {string} message
+ * @param {number} [httpStatus]
+ * @returns {string}
+ */
+export function translateErrorMessage(message, httpStatus) {
+    if (!message && Number.isFinite(httpStatus)) {
+        return translateByHttpStatus(httpStatus) || message;
+    }
+
+    if (!message) return message;
+
+    if (EXACT_MESSAGES_RU[message]) {
+        return EXACT_MESSAGES_RU[message];
+    }
+
+    const phraseRu = HTTP_STATUS_PHRASE_RU[message.trim().toLowerCase()];
+    if (phraseRu) {
+        return phraseRu;
+    }
+
+    if (/^\d{3}$/.test(message.trim())) {
+        const byCode = translateByHttpStatus(Number(message.trim()));
+        if (byCode) return byCode;
+    }
+
+    for (const { pattern, format } of PREFIX_MESSAGES_RU) {
+        const match = message.match(pattern);
+        if (match) {
+            return format(match);
+        }
+    }
+
+    if (Number.isFinite(httpStatus)) {
+        const byStatus = translateByHttpStatus(httpStatus);
+        if (byStatus && isGenericHttpStatusMessage(message, httpStatus)) {
+            return byStatus;
+        }
+    }
+
+    return message;
+}
+
+/**
+ * @param {number} status
+ * @returns {string|undefined}
+ */
+export function translateByHttpStatus(status) {
+    return HTTP_STATUS_RU[status];
+}
+
+/**
+ * @param {string} message
+ * @param {number} [httpStatus]
+ * @returns {boolean}
+ */
+function isGenericHttpStatusMessage(message, httpStatus) {
+    const normalized = message.trim().toLowerCase();
+    if (HTTP_STATUS_PHRASE_RU[normalized]) {
+        return true;
+    }
+
+    if (/^\d{3}$/.test(normalized) && Number(normalized) === httpStatus) {
+        return true;
+    }
+
+    if (Number.isFinite(httpStatus) && normalized === String(httpStatus)) {
+        return true;
+    }
+
+    return false;
+}

package/src/ui/styles/chat.css

@@ -34,8 +34,9 @@
     scroll-behavior: smooth;
 }
 
+/* TODO: установить flex, когда будем прикручивать историю */
 .moodboard-chat__history.is-visible {
-    display: flex;
+    display: none;
 }
 
 .moodboard-chat__msg {
@@ -703,6 +704,7 @@
     pointer-events: none;
     z-index: 10;
     transition:
+        left var(--moodboard-chat-board-animation-ms) cubic-bezier(0.22, 1, 0.36, 1),
         transform var(--moodboard-chat-board-animation-ms) cubic-bezier(0.22, 1, 0.36, 1),
         opacity var(--moodboard-chat-board-animation-ms) ease;
     will-change: transform, opacity;
@@ -729,6 +731,30 @@
     pointer-events: none;
 }
 
+/* Блок ошибки сервера */
+.moodboard-chat__error-block {
+    display: none;
+    background: #ffffff;
+    border-radius: 12px;
+    padding: 12px 16px;
+    margin-bottom: 8px;
+    --color-shadow: lab(5.0601% 0 0 / .04);
+    box-shadow:
+        0 0 0 1px lab(5.0601% 0 0 / .0784),
+        0 2px 8px -1.5px var(--color-shadow),
+        0 5px 8px -3px var(--color-shadow),
+        0 12px 12px -8px var(--color-shadow),
+        0 24px 24px -8px var(--color-shadow);
+    color: #B91C1C;
+    font-size: 14px;
+    line-height: 1.5;
+    word-break: break-word;
+}
+
+.moodboard-chat__error-block.is-visible {
+    display: block;
+}
+
 /* Попап настроек */
 .moodboard-chat__settings-popup {
     position: absolute;