@sequent-org/moodboard 1.4.34 → 1.4.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequent-org/moodboard",
-  "version": "1.4.34",
+  "version": "1.4.37",
   "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/moodboard/bootstrap/MoodBoardInitializer.js

@@ -1,4 +1,5 @@
 import { CoreMoodBoard } from '../../core/index.js';
+import { BOARD_PALETTE } from '../../ui/boardPalette.js';
 import { createMoodBoardManagers, wireMoodBoardServices } from './MoodBoardManagersFactory.js';
 import { createMoodBoardUi } from './MoodBoardUiFactory.js';
 import { bindSaveCallbacks } from '../integration/MoodBoardEventBindings.js';
@@ -77,7 +78,7 @@ export async function initCoreMoodBoard(board) {
         boardId: board.options.boardId || 'workspace-board',
         width: canvasSize.width,
         height: canvasSize.height,
-        backgroundColor: board.options.theme === 'dark' ? 0x2a2a2a : 0xDAEEFB,
+        backgroundColor: board.options.theme === 'dark' ? 0x2a2a2a : parseInt(BOARD_PALETTE[0].board.replace('#', ''), 16),
         saveEndpoint: board.options.saveEndpoint,
         loadEndpoint: board.options.loadEndpoint,
     };

package/src/ui/Topbar.js

@@ -3,6 +3,7 @@
  */
 import { Events } from '../core/events/Events.js';
 import { TopbarIconLoader } from '../utils/topbarIconLoader.js';
+import { BOARD_PALETTE } from './boardPalette.js';
 
 export class Topbar {
     constructor(container, eventBus, theme = 'light') {
@@ -15,13 +16,7 @@ export class Topbar {
         this.iconLoader = new TopbarIconLoader();
         this.icons = this.iconLoader.icons;
         // Палитра кнопки заливки и соответствие цвету фона доски
-        this._palette = [
-            { id: 1, name: 'default-light', btnHex: '#d6e8f7', board: '#f0f6fc' },
-            { id: 2, name: 'mint-light',    btnHex: '#E8F5E9', board: '#f8fff7' },
-            { id: 3, name: 'peach-light',   btnHex: '#FFF3E0', board: '#fffcf7' },
-            { id: 4, name: 'gray-light',    btnHex: '#f5f5f5', board: '#f5f5f5' },
-            { id: 5, name: 'white',         btnHex: '#ffffff', board: '#ffffff' }
-        ];
+        this._palette = BOARD_PALETTE;
         this._pendingPaintHex = null;
         this.init();
     }

package/src/ui/boardPalette.js

@@ -0,0 +1,12 @@
+/**
+ * Палитра фонов доски.
+ * Первый элемент используется как фон по умолчанию при создании/первом открытии доски.
+ * btnHex — цвет кнопки в Topbar; board — реальный цвет фона canvas.
+ */
+export const BOARD_PALETTE = [
+    { id: 1, name: 'default-light', btnHex: '#d6e8f7', board: '#f0f6fc' },
+    { id: 2, name: 'mint-light',    btnHex: '#E8F5E9', board: '#f8fff7' },
+    { id: 3, name: 'peach-light',   btnHex: '#FFF3E0', board: '#fffcf7' },
+    { id: 4, name: 'gray-light',    btnHex: '#f5f5f5', board: '#f5f5f5' },
+    { id: 5, name: 'white',         btnHex: '#ffffff', board: '#ffffff' },
+];

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';
@@ -145,7 +146,9 @@ export class ChatWindow {
         this._pendingOverlayTimers = new Map();
         this._boardImageShiftAnimations = new Map();
         this._pendingBatchOffsets = new Map();
-        this._clearSelectionOnSendClick = null;
+        this._aiImageLaneSlots = new Map();
+        this._draggingAiImageIds = new Set();
+        this._aiImageLaneHandlers = null;
         this._selectionHandlers = null;
         this._viewportHandlers = null;
         // Окно от BoxSelectStart до BoxSelectCommit: в это время SelectionAdd
@@ -178,11 +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,
@@ -266,15 +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();
@@ -354,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) {
@@ -420,11 +441,13 @@ export class ChatWindow {
                     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';
@@ -498,7 +521,8 @@ export class ChatWindow {
 
         const world = this._boardCore?.pixi?.worldLayer || this._boardCore?.pixi?.app?.stage;
         const worldX = world?.x || 0;
-        const existingRight_world = Math.max(...aiObjects.map((obj) => obj.position.x + getBoardObjectWidth(obj)));
+        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);
@@ -543,6 +567,7 @@ export class ChatWindow {
             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;
         }
@@ -555,8 +580,25 @@ export class ChatWindow {
         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 };
-                const to = { x: Math.round(obj.position.x - worldShift), 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);
             }
         }
@@ -641,6 +683,7 @@ export class ChatWindow {
             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';
             }
@@ -683,6 +726,62 @@ export class ChatWindow {
         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;
@@ -795,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)
             };
         }
 
@@ -842,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;
 
@@ -852,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);
             }
         }
@@ -869,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);
             }
         }
@@ -902,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;
@@ -976,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}`;
@@ -997,12 +1336,14 @@ export class ChatWindow {
             x = slot.x;
             y = slot.y;
         }
+        const insertPoint = this._resolveAiImageInsertPoint(msg, x, y, s);
 
         this._boardCore.eventBus.emit(Events.UI.PasteImageAt, {
-            x,
-            y,
+            x: insertPoint.x,
+            y: insertPoint.y,
             src: dataUrl,
             name: 'ai-generated.jpg',
+            aiMessageId: msg.id,
             skipUpload: true
         });
     }
@@ -1108,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')
@@ -1183,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

@@ -731,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;