@things-factory/board-ui 10.0.0-beta.6 → 10.0.0-beta.64

package/dist-client/pages/board-modeller-page.js

@@ -2,19 +2,83 @@ import { __decorate, __metadata } from "tslib";
 import './things-scene-components.import';
 import '@operato/board/ox-board-modeller.js';
 import '@operato/oops';
+import '@things-factory/board-ai';
 import gql from 'graphql-tag';
-import { css, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { BoardModeller } from '@operato/board/ox-board-modeller.js';
+import { LoadTracker } from '@hatiolab/things-scene';
 import { OxPropertyEditor } from '@operato/property-editor';
 import { PageView, FontController } from '@operato/shell';
 import { hasPrivilege } from '@things-factory/auth-base/dist-client/index.js';
+import { applyBoardEditPatchVerbose, mergeComponent } from '@things-factory/board-ai';
 import { client, gqlContext } from '@operato/graphql';
 import { i18next } from '@operato/i18n';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { provider } from '../board-provider.js';
 import components from './things-scene-components-with-tools.import';
+import { notify, notifyError } from '../utils/notify-helper.js';
 const NOOP = () => { };
+/** 서버 PatchEntry.reverted=true 플래그 영속용 mutation. */
+const REVERT_PATCH_MUTATION = gql `
+  mutation RevertPatch($patchId: String!) {
+    revertPatch(patchId: $patchId)
+  }
+`;
+/**
+ * AI 의 BoardEditOp 가 지정한 대상 (id 또는 refid) 으로 things-scene component 검색.
+ *
+ * id (사용자/AI 가 명시적으로 설정한 string identifier) 와
+ * refid (things-scene 이 모든 컴포넌트에 자동 발급하는 numeric identifier) 는
+ * 서로 별개 개념이고 AI 도 둘을 구별해서 보낸다 — 이 함수는 호스트 측에서 둘 중
+ * 어느 쪽으로든 lookup 가능하게 통합. refid 가 universal 이므로 우선.
+ */
+export function findSceneComponent(scene, target) {
+    if (!scene)
+        return null;
+    if (typeof target.refid === 'number') {
+        const byRefid = scene.rootContainer?.refidIndexMap?.get(target.refid);
+        if (byRefid)
+            return byRefid;
+    }
+    if (typeof target.id === 'string' && target.id.length > 0) {
+        return scene.findById?.(target.id) ?? null;
+    }
+    return null;
+}
+/**
+ * default 위에 override 를 깊게 merge.
+ * - override 의 키 값이 undefined 가 아닌 경우 우선 적용
+ * - override 의 nested object 는 default 와 deep merge
+ * - array / primitive 는 override 가 그대로 우선
+ */
+function mergeDefaultsDeep(defaults, override) {
+    if (defaults === null || defaults === undefined)
+        return override;
+    if (override === null || override === undefined)
+        return defaults;
+    if (typeof defaults !== 'object' || typeof override !== 'object')
+        return override;
+    if (Array.isArray(defaults) || Array.isArray(override))
+        return override;
+    const out = { ...defaults };
+    for (const key of Object.keys(override)) {
+        const dv = defaults[key];
+        const ov = override[key];
+        if (dv !== null &&
+            ov !== null &&
+            typeof dv === 'object' &&
+            typeof ov === 'object' &&
+            !Array.isArray(dv) &&
+            !Array.isArray(ov)) {
+            out[key] = mergeDefaultsDeep(dv, ov);
+        }
+        else if (ov !== undefined) {
+            out[key] = ov;
+        }
+    }
+    return out;
+}
 let BoardModellerPage = class BoardModellerPage extends PageView {
     constructor() {
         super();
@@ -26,15 +90,199 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         this.overlay = null;
         this.scene = null;
         this.componentGroupList = BoardModeller.groups;
+        /** AI 채팅 패널 열림 상태 (기본 닫힘) */
+        this.aiPanelOpen = false;
+        /**
+         * 적용된 patch 별 inverse op 시퀀스 — Revert 기능용.
+         *
+         * Map<patchId, inverseOps[]>: 각 patch 적용 시점에 계산해 저장. revert 클릭
+         * 시 역순 in-place 적용. 페이지 reload 시 손실 — reload 후 revert 시도는
+         * notify 로 안내 (메모리 외 영속은 별개 작업).
+         */
+        this.patchInverses = new Map();
         this.board = null;
         this._fontCtrl = new FontController(this);
+        /**
+         * 채팅에서 patch 도착 — things-scene 에 in-place 적용.
+         *
+         * 핵심: `this.model = next` 로 모델을 통째 교체하면 ox-scene-viewer 가 scene 을
+         * dispose → 재생성 → undo 히스토리/dirty 플래그가 모두 초기화된다.
+         * 따라서 일반 add/modify/remove 는 scene 의 in-place mutation API 로 적용 →
+         * commander 가 자동으로 snapshot push → CMD+Z 와 저장 안내 팝업이 정상 동작.
+         *
+         * 'replace' op (보드 전체 교체) 만은 부득이 wholesale 경로로 빠진다 — 이 경우는
+         * 사용자에게 명시적으로 안내 후 진행.
+         */
+        this.onBoardEditPatch = (e) => {
+            const { patch, patchId } = e.detail || {};
+            if (!patch)
+                return;
+            const scene = this.scene;
+            if (!scene) {
+                notifyError(new Error('Scene not initialized'));
+                return;
+            }
+            const hasReplace = (patch.ops || []).some((op) => op.op === 'replace');
+            if (hasReplace) {
+                this.applyPatchWholesale(patch, patchId);
+                return;
+            }
+            try {
+                const applied = [];
+                const missed = [];
+                // 각 op 의 inverse — patch 적용 직전/직후 scene 상태 기준으로 계산해 누적.
+                // 나중에 onBoardEditRevert 가 역순 in-place 적용으로 복원.
+                const inverseOps = [];
+                for (const op of patch.ops) {
+                    switch (op.op) {
+                        case 'add': {
+                            // normalize → things-scene 의 default 와 merge (gauge.value 등 누락 보강)
+                            const normalized = this.normalizeComponent(op.component);
+                            // add 의 inverse 는 새로 발급되는 refid 를 알아야 함 — scene.add 직후
+                            // 새 컴포넌트의 refid 를 캡처해 remove inverse 생성.
+                            const prevRefids = new Set(this.collectAllRefids(scene));
+                            // scene.add 는 내부적으로 CommandMigrate 를 commander 에 execute → 자동 snapshot
+                            // 두 번째 인자는 boundsOrOffset — 빈 객체면 model 자체의 좌표 그대로 사용.
+                            scene.add(normalized, {});
+                            // 새로 발급된 refid 식별
+                            const newRefids = this.collectAllRefids(scene).filter(r => !prevRefids.has(r));
+                            for (const refid of newRefids) {
+                                inverseOps.push({ op: 'remove', refid });
+                            }
+                            applied.push(op);
+                            break;
+                        }
+                        case 'remove': {
+                            const target = findSceneComponent(scene, { refid: op.refid });
+                            if (!target || !target.parent) {
+                                missed.push(op);
+                                break;
+                            }
+                            // 삭제 직전 model 캡처 → inverse 는 add(savedModel)
+                            const savedModel = JSON.parse(JSON.stringify(target.model));
+                            // scene.remove() 는 selected 를 사용하므로 일시적으로 대상으로 set.
+                            const prevSelected = scene.selected ?? [];
+                            scene.selected = [target];
+                            scene.remove(); // CommandMigrate 통한 정상 경로 → snapshot 자동
+                            // 선택 복원 — 삭제 대상은 제외
+                            scene.selected = prevSelected.filter((c) => c !== target);
+                            inverseOps.push({ op: 'add', component: savedModel });
+                            applied.push(op);
+                            break;
+                        }
+                        case 'modify': {
+                            const target = findSceneComponent(scene, { refid: op.refid });
+                            if (!target) {
+                                missed.push(op);
+                                break;
+                            }
+                            // 변경 전 patch 가 건드린 키만 보관 — inverse 는 같은 키들을 원본 값으로 modify
+                            const oldValues = this.captureOldKeys(target.model, op.patch);
+                            // op.patch 의 nested 값 보존 위해 model 위에 deep-merge (apply-patch 와 동일 정책)
+                            const merged = mergeComponent(target.model, op.patch);
+                            target.set(merged);
+                            // change 는 자동 snapshot 하지 않으므로 commander.execute 호출 → snapshot push
+                            scene.commander?.execute(null, false);
+                            inverseOps.push({ op: 'modify', refid: op.refid, patch: oldValues });
+                            applied.push(op);
+                            break;
+                        }
+                        case 'modifyBoard': {
+                            // 보드 root 속성 (fillStyle / width / height / name 등) 변경.
+                            // scene.root 는 model_layer — 보드 JSON 의 최상위. 자식 components 와 별개.
+                            const root = scene.root;
+                            if (!root || typeof root.set !== 'function') {
+                                missed.push(op);
+                                break;
+                            }
+                            const cleanPatch = { ...(op.patch || {}) };
+                            delete cleanPatch.components; // 자식 변경은 별도 op
+                            const oldValues = this.captureOldKeys(root.model, cleanPatch);
+                            const merged = mergeComponent(root.model, cleanPatch);
+                            root.set(merged);
+                            scene.commander?.execute(null, false);
+                            inverseOps.push({ op: 'modifyBoard', patch: oldValues });
+                            applied.push(op);
+                            break;
+                        }
+                        // 'replace' 는 위에서 분기됨 — 여기 도달 안 함
+                    }
+                }
+                // patch 단위로 inverse 보관 — Revert 시 역순 적용
+                if (patchId && inverseOps.length > 0) {
+                    this.patchInverses.set(patchId, inverseOps);
+                }
+                if (missed.length > 0) {
+                    const missedDesc = missed
+                        .map((op) => {
+                        if (op.op === 'modify' || op.op === 'remove')
+                            return `refid=${op.refid}`;
+                        if (op.op === 'modifyBoard')
+                            return 'modifyBoard (scene root unavailable)';
+                        return op.op;
+                    })
+                        .join(', ');
+                    notify('warn', `AI 가 ${missed.length}개의 변경을 시도했지만 적용되지 않았습니다: ${missedDesc}`);
+                }
+            }
+            catch (ex) {
+                notifyError(ex);
+            }
+        };
+        /**
+         * 채팅에서 board-edit-revert 도착 — 누적된 inverse 를 역순 in-place 적용.
+         *
+         * - 메모리상 patchInverses Map 만 본다. 페이지 reload 후엔 inverse 가 없어
+         *   되돌릴 수 없음 (사용자에게 안내).
+         * - 성공 시 서버 revertPatch mutation 호출 → PatchEntry.reverted=true 영속.
+         * - in-place 적용이라 undo/dirty/selection 보존 (chatViaTools 의 모든 강점 그대로).
+         */
+        this.onBoardEditRevert = async (e) => {
+            const { patchId } = e.detail || {};
+            if (!patchId)
+                return;
+            const inverses = this.patchInverses.get(patchId);
+            if (!inverses || inverses.length === 0) {
+                notify('warn', '이 변경은 자동 되돌릴 수 없습니다 (페이지 새로고침 이후 적용된 변경은 메모리에 inverse 가 없습니다).');
+                return;
+            }
+            const scene = this.scene;
+            if (!scene) {
+                notifyError(new Error('Scene not initialized'));
+                return;
+            }
+            try {
+                // 역순 적용 — 마지막 op 부터 되돌림. 단일 patch 안에서도 순서 의미 있음
+                // (예: add 후 modify 한 시퀀스를 되돌리려면 modify(원본) 후 remove)
+                const reversed = [...inverses].reverse();
+                const reverseFakePatch = {
+                    ops: reversed,
+                    summary: 'revert',
+                    confidence: 1
+                };
+                // hasReplace 면 wholesale, 그렇지 않으면 in-place — 일반 onBoardEditPatch 와 동일
+                const hasReplace = reversed.some(op => op.op === 'replace');
+                if (hasReplace) {
+                    this.applyPatchWholesale(reverseFakePatch);
+                }
+                else {
+                    // in-place 직접 적용 — 새 inverse 누적은 안 함 (revert 의 revert 는 redo, 별개 기능)
+                    this.applyInverseOpsInPlace(scene, reversed);
+                }
+                this.patchInverses.delete(patchId);
+                await this.recordRevertOnServer(patchId);
+            }
+            catch (ex) {
+                notifyError(ex);
+            }
+        };
         components.forEach(({ templates = [], groups = [] }) => {
             groups.forEach(group => BoardModeller.registerGroup(group));
             BoardModeller.registerTemplate(templates);
         });
         /* 컴포넌트에서 정의된 에디터들을 MODELLER_EDITORS에 등록 */
-        var addedEditors = {};
-        for (let component in components) {
+        const addedEditors = {};
+        for (const component in components) {
             let { editors } = components[component];
             editors &&
                 editors.forEach(editor => {
@@ -48,16 +296,53 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         css `
       :host {
         display: flex;
-        flex-direction: column;
+        flex-direction: row;
 
         overflow: hidden;
         position: relative;
       }
 
+      .modeller-area {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+      }
+
       ox-board-modeller {
         flex: 1;
       }
 
+      .ai-toggle {
+        position: absolute;
+        right: 12px;
+        bottom: 12px;
+        z-index: 10;
+        padding: 8px 14px;
+        border: 0;
+        border-radius: 24px;
+        background: #2563eb;
+        color: #fff;
+        font: 500 13px/1.4 system-ui, -apple-system, sans-serif;
+        cursor: pointer;
+        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
+        transition: background 0.15s, transform 0.1s;
+      }
+      .ai-toggle:hover { background: #1d4ed8; }
+      .ai-toggle:active { transform: scale(0.97); }
+      .ai-toggle.open { background: #475569; }
+      .ai-toggle.open:hover { background: #334155; }
+
+      .ai-panel {
+        flex: 0 0 380px;
+        display: flex;
+        border-left: 1px solid #e2e8f0;
+        background: #ffffff;
+      }
+
+      ox-board-ai-chat { flex: 1; }
+
       ox-oops-note {
         display: block;
         position: absolute;
@@ -65,11 +350,119 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         top: 50%;
         transform: translate(-50%, -50%);
       }
+
+      @media (max-width: 900px) {
+        .ai-panel {
+          flex-basis: 100%;
+          position: absolute;
+          inset: 0;
+          z-index: 20;
+        }
+      }
     `
     ]; }
+    get knownTypes() {
+        if (!this._knownTypesCache) {
+            const types = new Set();
+            for (const group of BoardModeller.groups || []) {
+                for (const t of group.templates || []) {
+                    if (t && typeof t.type === 'string')
+                        types.add(t.type);
+                }
+            }
+            this._knownTypesCache = Array.from(types).sort();
+        }
+        return this._knownTypesCache;
+    }
+    get knownCategories() {
+        if (!this._knownCategoriesCache) {
+            const cats = new Set();
+            for (const group of BoardModeller.groups || []) {
+                for (const t of group.templates || []) {
+                    if (t && typeof t.group === 'string')
+                        cats.add(t.group);
+                }
+            }
+            this._knownCategoriesCache = Array.from(cats).sort();
+        }
+        return this._knownCategoriesCache;
+    }
+    get componentSchemas() {
+        if (!this._componentSchemasCache) {
+            const out = [];
+            const NON_PROPS = new Set(['type', 'id', 'name', 'class']);
+            // 좌표/크기/경로 관련 키들 — type 마다 다른 조합으로 사용
+            const GEOMETRY_KEYS = new Set([
+                'left',
+                'top',
+                'right',
+                'bottom',
+                'x',
+                'y',
+                'cx',
+                'cy',
+                'width',
+                'height',
+                'rx',
+                'ry',
+                'radius',
+                'rotation',
+                'translate',
+                'scale',
+                'points',
+                'path',
+                'vertices',
+                'verticles',
+                'startX',
+                'startY',
+                'endX',
+                'endY',
+                'startPoint',
+                'endPoint'
+            ]);
+            for (const group of BoardModeller.groups || []) {
+                for (const t of group.templates || []) {
+                    if (!t || typeof t.type !== 'string')
+                        continue;
+                    const properties = {};
+                    const geometryKeys = [];
+                    const model = t.model || {};
+                    for (const key of Object.keys(model)) {
+                        if (NON_PROPS.has(key))
+                            continue;
+                        if (GEOMETRY_KEYS.has(key)) {
+                            geometryKeys.push(key);
+                            continue;
+                        }
+                        const v = model[key];
+                        if (v && typeof v === 'object' && !Array.isArray(v)) {
+                            properties[key] = Object.fromEntries(Object.keys(v)
+                                .slice(0, 8)
+                                .map(k => [k, null]));
+                        }
+                        else if (Array.isArray(v)) {
+                            properties[key] = [];
+                        }
+                        else {
+                            properties[key] = v;
+                        }
+                    }
+                    out.push({
+                        type: t.type,
+                        description: t.description || undefined,
+                        group: t.group || undefined,
+                        geometryKeys: geometryKeys.length > 0 ? geometryKeys : undefined,
+                        properties: Object.keys(properties).length > 0 ? properties : undefined
+                    });
+                }
+            }
+            this._componentSchemasCache = out;
+        }
+        return this._componentSchemasCache;
+    }
     get context() {
         return {
-            title: this.board ? this.boardName : this.preparing ? 'Fetching board...' : 'Board Not Found',
+            title: this.board ? this.boardName : this.preparing ? 'Fetching board...' : '',
             help: 'board-modeller/modeller',
             widebleed: true
         };
@@ -88,9 +481,14 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
             return;
         }
         try {
+            // 이전 보드 완전히 클리어
+            this.board = null;
+            this.model = null;
+            this._loadTracker = new LoadTracker();
+            this._loadTracker.setPhase('fetch');
             this.preparing = true;
             this.updateContext();
-            var response = await client.query({
+            const response = await client.query({
                 query: gql `
           query FetchBoardById($id: String!) {
             board(id: $id) {
@@ -103,10 +501,11 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
                 variables: { id: this.boardId },
                 context: gqlContext()
             });
-            var board = response.data.board;
+            this._loadTracker?.setPhase('parse');
+            const board = response.data.board;
             if (!board) {
                 this.board = null;
-                throw 'board not found';
+                throw new Error('board not found');
             }
             this.board = {
                 ...board,
@@ -116,27 +515,247 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
             this.model = {
                 ...this.board.model
             };
+            // AI 협력 세션 — 패널이 열릴 때 lazy 로드 (보드 단순 열기로는 세션 자동 생성 X)
+            this.chatSessionId = undefined;
         }
         catch (ex) {
-            document.dispatchEvent(new CustomEvent('notify', {
-                detail: {
-                    level: 'error',
-                    message: ex,
-                    ex
-                }
-            }));
+            notifyError(ex);
         }
         finally {
             this.preparing = false;
             this.updateContext();
         }
     }
+    /** 패널 토글 시 호출 — 열 때만 chatSession 보장 */
+    async toggleAIPanel() {
+        const willOpen = !this.aiPanelOpen;
+        if (willOpen && this.boardId && !this.chatSessionId) {
+            await this.ensureChatSession();
+        }
+        this.aiPanelOpen = willOpen;
+    }
+    /** boardId 로 ChatSession 조회 또는 생성 (idempotent). */
+    async ensureChatSession() {
+        if (!this.boardId || this.chatSessionId)
+            return;
+        try {
+            const found = await client.query({
+                query: gql `
+          query ChatSessionByBoard($boardId: String!) {
+            chatSessionByBoard(boardId: $boardId) { id }
+          }
+        `,
+                variables: { boardId: this.boardId },
+                context: gqlContext(),
+                fetchPolicy: 'network-only'
+            });
+            if (found.data?.chatSessionByBoard?.id) {
+                this.chatSessionId = found.data.chatSessionByBoard.id;
+                return;
+            }
+            const created = await client.mutate({
+                mutation: gql `
+          mutation StartBoardAISession($boardId: String!) {
+            startBoardAISession(boardId: $boardId) { id }
+          }
+        `,
+                variables: { boardId: this.boardId },
+                context: gqlContext()
+            });
+            this.chatSessionId = created.data?.startBoardAISession?.id;
+        }
+        catch (ex) {
+            notifyError(ex);
+        }
+    }
+    /**
+     * 모델러의 selected (things-scene Component 인스턴스 배열) 에서 refid 추출.
+     *
+     * refid 는 things-scene 이 모든 컴포넌트에 자동 발급하는 universal numeric handle.
+     * AI 의 selection 표현은 항상 refid 기반 (id 는 데이터 바인딩 이름이며 unique 가
+     * 아니라 targeting 에 부적합).
+     */
+    extractSelectedRefids() {
+        const sel = this.selected || [];
+        return sel
+            .map((c) => {
+            if (!c || typeof c.get !== 'function')
+                return null;
+            const refid = c.get('refid');
+            return typeof refid === 'number' && Number.isFinite(refid) ? refid : null;
+        })
+            .filter((x) => x !== null);
+    }
+    /**
+     * 라이브 보드 모델 — things-scene 캔버스가 들고 있는 가장 최신 상태의 deep clone.
+     *
+     * 사용자 수작업 편집은 scene.model 에만 반영되고 this.model property 에는 자동
+     * 동기화되지 않는다. AI 한테 보드 상태를 넘기거나 patch 를 적용할 때는 반드시
+     * 이쪽을 쓴다.
+     *
+     * id 와 refid 는 별개 필드 — 컴포넌트는 model.id (선택, 사용자/AI 가 명시 설정)
+     * 와 model.refid (필수, things-scene 자동 발급) 를 둘 다 가질 수 있고 AI 가
+     * 양쪽을 구별해서 다룬다 (tool 인자가 분리됨). 따라서 여기서는 model 을 mutate
+     * 하지 않고 raw deep clone 만 반환.
+     */
+    getLiveBoard() {
+        const sceneModel = this.scene?.model;
+        if (sceneModel) {
+            return JSON.parse(JSON.stringify(sceneModel));
+        }
+        return this.model;
+    }
+    /**
+     * 'replace' op 적용 — scene 통째로 재생성 (undo 히스토리 초기화).
+     *
+     * AI 가 보드 전체 재구성을 요청한 경우. 사용자에게 history 손실 안내.
+     * board-import 데이터 wholesale 적용 등 드문 케이스에 한정.
+     *
+     * Revert 지원 — replace 직전 보드 model 을 inverse 로 보관 (또 다른 replace).
+     */
+    applyPatchWholesale(patch, patchId) {
+        try {
+            const baseBoard = this.getLiveBoard();
+            const inverseOps = baseBoard
+                ? [{ op: 'replace', board: JSON.parse(JSON.stringify(baseBoard)) }]
+                : [];
+            const report = applyBoardEditPatchVerbose(baseBoard, patch);
+            const next = report.board;
+            if (report.applied.length === 0)
+                return;
+            const normalized = (next.components || []).map((c) => this.normalizeComponent(c));
+            this.model = {
+                ...(baseBoard || {}),
+                ...(next.width !== undefined && { width: next.width }),
+                ...(next.height !== undefined && { height: next.height }),
+                components: normalized
+            };
+            if (patchId && inverseOps.length > 0) {
+                this.patchInverses.set(patchId, inverseOps);
+            }
+            notify('info', '보드 전체가 교체되어 실행 취소(undo) 히스토리가 초기화되었습니다.');
+        }
+        catch (ex) {
+            notifyError(ex);
+        }
+    }
+    /**
+     * scene 의 모든 컴포넌트 refid 수집 — add 의 inverse 계산용.
+     *
+     * scene.add 직전/직후 호출해 차집합으로 새 발급된 refid 식별.
+     */
+    collectAllRefids(scene) {
+        const refids = [];
+        const map = scene?.rootContainer?.refidIndexMap;
+        if (map && typeof map.forEach === 'function') {
+            map.forEach((_, refid) => refids.push(refid));
+        }
+        return refids;
+    }
+    /**
+     * patch 가 변경하려는 키들에 대해 model 의 현재 값을 deep-clone 으로 캡처.
+     * inverse modify / modifyBoard op 의 patch 로 사용.
+     */
+    captureOldKeys(model, patch) {
+        const out = {};
+        for (const k of Object.keys(patch || {})) {
+            const v = model?.[k];
+            out[k] = v === undefined ? null : JSON.parse(JSON.stringify(v));
+        }
+        return out;
+    }
+    /**
+     * inverse op 시퀀스를 things-scene 위에 in-place 적용 (snapshot/undo 보존).
+     * onBoardEditPatch 의 add/remove/modify/modifyBoard 분기와 동일 패턴이지만
+     * inverse 누적은 하지 않음 (revert 자체가 revert 가능하지 않은 단방향 동작).
+     */
+    applyInverseOpsInPlace(scene, ops) {
+        for (const op of ops) {
+            switch (op.op) {
+                case 'add': {
+                    const normalized = this.normalizeComponent(op.component);
+                    scene.add(normalized, {});
+                    break;
+                }
+                case 'remove': {
+                    const target = findSceneComponent(scene, { refid: op.refid });
+                    if (!target || !target.parent)
+                        break;
+                    const prevSelected = scene.selected ?? [];
+                    scene.selected = [target];
+                    scene.remove();
+                    scene.selected = prevSelected.filter((c) => c !== target);
+                    break;
+                }
+                case 'modify': {
+                    const target = findSceneComponent(scene, { refid: op.refid });
+                    if (!target)
+                        break;
+                    const merged = mergeComponent(target.model, op.patch);
+                    target.set(merged);
+                    scene.commander?.execute(null, false);
+                    break;
+                }
+                case 'modifyBoard': {
+                    const root = scene.root;
+                    if (!root || typeof root.set !== 'function')
+                        break;
+                    const cleanPatch = { ...(op.patch || {}) };
+                    delete cleanPatch.components;
+                    const merged = mergeComponent(root.model, cleanPatch);
+                    root.set(merged);
+                    scene.commander?.execute(null, false);
+                    break;
+                }
+                // 'replace' 는 호출자가 wholesale 분기로 보냄
+            }
+        }
+    }
+    /** 서버 PatchEntry.reverted=true 영속 — fail 해도 UI 는 이미 되돌렸으니 warn 만. */
+    async recordRevertOnServer(patchId) {
+        try {
+            await client.mutate({ mutation: REVERT_PATCH_MUTATION, variables: { patchId } });
+        }
+        catch (e) {
+            console.warn('[board-modeller] revertPatch server persist failed:', e?.message ?? e);
+        }
+    }
+    /**
+     * AI 가 만든 컴포넌트를 things-scene 이 기대하는 완전한 형태로 normalize.
+     * BoardModeller 에 등록된 template.model (default 값) 위에 AI 응답을 덮어쓴다.
+     * 이 단계 없이 things-scene 에 넣으면 필수 속성 누락 시 render 에서 crash 가능
+     * (예: gauge-circle 의 value 가 undefined → toString() TypeError).
+     */
+    normalizeComponent(c) {
+        if (!c || typeof c !== 'object' || typeof c.type !== 'string')
+            return c;
+        const template = this.findTemplateByType(c.type);
+        if (!template || !template.model)
+            return c;
+        return mergeDefaultsDeep(template.model, c);
+    }
+    findTemplateByType(type) {
+        for (const group of BoardModeller.groups || []) {
+            for (const t of group.templates || []) {
+                if (t && t.type === type)
+                    return t;
+            }
+        }
+        return undefined;
+    }
     async updated(changes) {
         if (changes.has('boardId')) {
-            if (await hasPrivilege({ privilege: 'mutation', category: 'board' })) {
-                this.refresh();
+            try {
+                if (await hasPrivilege({ privilege: 'mutation', category: 'board' })) {
+                    this.refresh();
+                }
+                else {
+                    this.boardId = null;
+                    this.model = null;
+                    this.modeller?.close();
+                }
             }
-            else {
+            catch {
                 this.boardId = null;
                 this.model = null;
                 this.modeller?.close();
@@ -149,46 +768,81 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         }
         else {
             this.boardId = null;
+            this.board = null;
             this.model = null;
+            this.preparing = false;
             this.modeller?.close();
+            this.updateContext();
         }
     }
     render() {
-        var oops = !this.preparing && !this.model && this.oopsNote;
-        return oops
-            ? html ` <ox-oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></ox-oops-note> `
+        const oops = !this.preparing && !this.model && this.oopsNote;
+        return html `
+      <div class="modeller-area">
+        ${oops
+            ? html `<ox-oops-note icon=${oops.icon} title=${oops.title} description=${oops.description}></ox-oops-note>`
             : html `
-          <ox-board-modeller
-            .mode=${this.mode}
-            @mode-changed=${e => {
+              <ox-board-modeller
+                .mode=${this.mode}
+                .loadTracker=${this._loadTracker}
+                @mode-changed=${e => {
                 this.mode = e.detail.value;
             }}
-            .model=${this.model}
-            @model-changed=${e => {
+                .model=${this.model}
+                @model-changed=${e => {
                 this.model = e.detail.value;
             }}
-            .scene=${this.scene}
-            @scene-changed=${e => {
+                .scene=${this.scene}
+                @scene-changed=${e => {
                 this.scene = e.detail.value;
             }}
-            .selected=${this.selected}
-            @selected-changed=${e => {
+                .selected=${this.selected}
+                @selected-changed=${e => {
                 this.selected = e.detail.value;
             }}
-            .provider=${provider}
-            @save-model=${e => this.saveBoard()}
-            .componentGroupList=${this.componentGroupList}
-            .fonts=${this._fontCtrl.fonts}
-            .hideProperty=${this.hideProperty}
-          >
-          </ox-board-modeller>
-        `;
+                .provider=${provider}
+                @save-model=${e => this.saveBoard()}
+                .componentGroupList=${this.componentGroupList}
+                .fonts=${this._fontCtrl.fonts}
+                .hideProperty=${this.hideProperty}
+              >
+              </ox-board-modeller>
+            `}
+        ${this.boardId
+            ? html `
+              <button
+                class="ai-toggle ${this.aiPanelOpen ? 'open' : ''}"
+                title="${i18next.t('text.ai_assistant') || 'AI Assistant'}"
+                @click=${this.toggleAIPanel}>
+                ${this.aiPanelOpen ? '✕ AI' : '✨ AI'}
+              </button>
+            `
+            : nothing}
+      </div>
+      ${this.aiPanelOpen
+            ? html `
+            <div class="ai-panel">
+              <ox-board-ai-chat
+                .sessionId=${this.chatSessionId}
+                .currentBoard=${this.model}
+                .boardProvider=${() => this.getLiveBoard()}
+                .knownTypes=${this.knownTypes}
+                .categories=${this.knownCategories}
+                .componentSchemas=${this.componentSchemas}
+                .selectedRefids=${this.extractSelectedRefids()}
+                @board-edit-patch=${this.onBoardEditPatch}
+                @board-edit-revert=${this.onBoardEditRevert}>
+              </ox-board-ai-chat>
+            </div>
+          `
+            : nothing}
+    `;
     }
     async updateBoard() {
         try {
             this.preparing = true;
-            var { id, name, description, groupId } = this.board;
-            var model = JSON.stringify(this.scene.model);
+            const { id, name, description, groupId } = this.board;
+            const model = JSON.stringify(this.scene.model);
             await client.mutate({
                 mutation: gql `
           mutation UpdateBoard($id: String!, $patch: BoardPatch!) {
@@ -203,21 +857,10 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
                 },
                 context: gqlContext()
             });
-            document.dispatchEvent(new CustomEvent('notify', {
-                detail: {
-                    level: 'info',
-                    message: i18next.t('text.saved')
-                }
-            }));
+            notify('info', i18next.t('text.saved'));
         }
         catch (ex) {
-            document.dispatchEvent(new CustomEvent('notify', {
-                detail: {
-                    level: 'error',
-                    message: ex,
-                    ex: ex
-                }
-            }));
+            notifyError(ex);
         }
         finally {
             this.preparing = false;
@@ -284,6 +927,14 @@ __decorate([
     property({ type: Boolean }),
     __metadata("design:type", Boolean)
 ], BoardModellerPage.prototype, "preparing", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BoardModellerPage.prototype, "chatSessionId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "aiPanelOpen", void 0);
 __decorate([
     query('ox-board-modeller'),
     __metadata("design:type", BoardModeller)