@things-factory/board-ui 10.0.0-beta.8 → 10.0.0-beta.80

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

@@ -2,19 +2,65 @@ 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, SceneSearchEngine } 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 } 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';
+import { findSceneComponent, dispatchBoardAction } from './board-action-dispatch.js';
+import { dispatchBoardEditOp } from './board-edit-dispatch.js';
+export { findSceneComponent };
 const NOOP = () => { };
+/** 서버 PatchEntry.reverted=true 플래그 영속용 mutation. */
+const REVERT_PATCH_MUTATION = gql `
+  mutation RevertPatch($patchId: String!) {
+    revertPatch(patchId: $patchId)
+  }
+`;
+/**
+ * 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 +72,265 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         this.overlay = null;
         this.scene = null;
         this.componentGroupList = BoardModeller.groups;
+        /** 보드의 모든 ChatSession (탭으로 표시). */
+        this.chatSessions = [];
+        /** 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);
+        /** `@` mention popup 의 도메인 사용자 후보 — chat 의 userProvider prop 으로 wire.
+         *  query 변할 때마다 호출되므로 server query (`domainUsersForMention`) 를 그대로 위임. */
+        this.fetchDomainUsersForMention = async (query) => {
+            try {
+                const result = await client.query({
+                    query: gql `
+          query DomainUsersForMention($query: String, $limit: Int) {
+            domainUsersForMention(query: $query, limit: $limit) {
+              id
+              name
+              email
+            }
+          }
+        `,
+                    variables: { query: query || null, limit: 50 },
+                    context: gqlContext(),
+                    fetchPolicy: 'cache-first'
+                });
+                return result.data?.domainUsersForMention ?? [];
+            }
+            catch (ex) {
+                // 조용히 — chat panel 이 빈 결과로 처리
+                console.warn('[board-modeller-page] fetchDomainUsersForMention failed:', ex);
+                return [];
+            }
+        };
+        /** 채팅 패널의 탭 클릭 — 활성 세션 전환. */
+        this.onChatSessionSwitch = (e) => {
+            const newId = e.detail?.sessionId;
+            if (typeof newId === 'string' && newId !== this.chatSessionId) {
+                this.chatSessionId = newId;
+            }
+        };
+        /** 채팅 패널의 "+" 버튼 — 새 세션 생성 후 활성으로 전환. */
+        this.onChatSessionCreate = async () => {
+            if (!this.boardId)
+                return;
+            try {
+                const created = await client.mutate({
+                    mutation: gql `
+          mutation CreateChatSession($boardId: String!, $name: String) {
+            createChatSession(boardId: $boardId, name: $name) {
+              id
+              name
+              createdAt
+            }
+          }
+        `,
+                    variables: { boardId: this.boardId, name: null },
+                    context: gqlContext()
+                });
+                const s = created.data?.createChatSession;
+                if (s) {
+                    this.chatSessions = [...this.chatSessions, s];
+                    this.chatSessionId = s.id;
+                }
+            }
+            catch (ex) {
+                notifyError(ex);
+            }
+        };
+        /**
+         * AI 채팅 mention popup (`#`) 검색 위임 — things-scene SceneSearchEngine 으로 wrap.
+         *
+         * F-key Finder 와 동일한 검색 룰 (id → name → tag → type → class → text → data → property)
+         * 을 그대로 mention popup 에 재사용. 컴포넌트 트리를 직접 순회하므로 model JSON 으로
+         * 변환할 필요 없음 — 일관성 + 성능 이점.
+         *
+         * 반환 구조 (FilterResult) 는 chat 의 mention-popup 표시 모델. host 는 things-scene
+         * Component 에서 refid/id/type/tag/class/text 를 뽑아 candidate 로 채워 넘긴다.
+         */
+        this.searchSceneForMention = (() => {
+            const engine = new SceneSearchEngine();
+            return (query) => {
+                const root = this.scene?.root;
+                if (!root)
+                    return [];
+                const results = engine.search(root, query);
+                return results.map(r => {
+                    const c = r.component;
+                    const refid = typeof c.get === 'function' ? c.get('refid') : undefined;
+                    const id = typeof c.get === 'function' ? c.get('id') : undefined;
+                    const type = typeof c.get === 'function' ? c.get('type') : undefined;
+                    const tag = typeof c.get === 'function' ? c.get('tag') : undefined;
+                    const cls = typeof c.get === 'function' ? c.get('class') : undefined;
+                    const text = typeof c.get === 'function' ? c.get('text') : undefined;
+                    return {
+                        candidate: {
+                            refid: typeof refid === 'number' ? refid : undefined,
+                            label: id || type || 'unknown',
+                            type: typeof type === 'string' ? type : 'unknown',
+                            id: typeof id === 'string' && id ? id : undefined,
+                            tag: typeof tag === 'string' && tag ? tag : undefined,
+                            class: typeof cls === 'string' && cls ? cls : undefined,
+                            text: typeof text === 'string' && text ? text : undefined
+                        },
+                        matchType: r.matchType,
+                        matchValue: r.matchValue
+                    };
+                });
+            };
+        })();
+        /**
+         * 채팅에서 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 missed = [];
+                // 각 op 의 inverse — dispatcher 가 적용 직전/직후 scene 상태로 계산해 반환.
+                // 누적했다가 onBoardEditRevert 가 역순 in-place 적용으로 복원.
+                const inverseOps = [];
+                const normalize = (c) => this.normalizeComponent(c);
+                for (const op of patch.ops) {
+                    const r = dispatchBoardEditOp(scene, op, { normalize });
+                    if (r.applied) {
+                        inverseOps.push(...r.inverseOps);
+                    }
+                    else {
+                        missed.push(op);
+                    }
+                }
+                // 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);
+            }
+        };
+        /**
+         * AI 가 ephemeral scene action (selection / view / mode) 을 실행하라고 요청.
+         *
+         * board-edit-patch 와 별개 채널 — 모델 변경 X, undo 영향 X, dirty flag 무관.
+         * things-scene API 직접 호출. 잘못된 action / 누락된 컴포넌트는 console.warn 만.
+         */
+        this.onBoardActionExecute = (e) => {
+            const { actions } = e.detail || {};
+            if (!Array.isArray(actions) || actions.length === 0)
+                return;
+            const scene = this.scene;
+            if (!scene)
+                return;
+            let modeChanged = false;
+            for (const action of actions) {
+                try {
+                    dispatchBoardAction(scene, action);
+                    if (action?.action === 'setSceneMode')
+                        modeChanged = true;
+                }
+                catch (ex) {
+                    console.warn('[board-modeller] action execute failed:', action, ex?.message ?? ex);
+                }
+            }
+            // setSceneMode 가 있었으면 page 의 reactive mode 도 동기 (Lit re-render 트리거)
+            if (modeChanged)
+                this.mode = scene.mode;
+        };
         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 +344,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 320px;
+        display: flex;
+        border-left: 1px solid #e2e8f0;
+        background: #ffffff;
+      }
+
+      ox-board-ai-chat { flex: 1; }
+
       ox-oops-note {
         display: block;
         position: absolute;
@@ -65,11 +398,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 +529,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 +549,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 +563,209 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
             this.model = {
                 ...this.board.model
             };
+            // AI 협력 세션 — 보드 전환 시 이전 보드의 세션 / 세션 리스트 정리 (chat panel 의
+            // sessionId/sessions 변화 감지 → history 비우고 새로 로드). 패널 열린 채 보드 옮겼다면
+            // 새 보드의 세션 리스트를 즉시 ensure (fire-and-forget — 에러는 ensureChatSession 처리).
+            this.chatSessionId = undefined;
+            this.chatSessions = [];
+            if (this.aiPanelOpen && this.boardId) {
+                this.ensureChatSession();
+            }
         }
         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) {
+            await this.ensureChatSession();
+        }
+        this.aiPanelOpen = willOpen;
+    }
+    /** 보드의 모든 ChatSession 목록을 로드 + 활성 세션 보장.
+     *  - 세션이 0 개면 startBoardAISession 으로 첫 세션 생성 (단일 세션 UX 호환)
+     *  - 활성 세션 미설정 시 첫 번째 세션을 활성으로
+     *  - 이미 활성 세션 set 돼있고 list 에 포함되면 유지 */
+    async ensureChatSession() {
+        if (!this.boardId)
+            return;
+        try {
+            const result = await client.query({
+                query: gql `
+          query ChatSessionsByBoard($boardId: String!) {
+            chatSessionsByBoard(boardId: $boardId) {
+              id
+              name
+              createdAt
+            }
+          }
+        `,
+                variables: { boardId: this.boardId },
+                context: gqlContext(),
+                fetchPolicy: 'network-only'
+            });
+            let sessions = result.data?.chatSessionsByBoard ?? [];
+            if (sessions.length === 0) {
+                // 첫 세션 ensure (idempotent)
+                const created = await client.mutate({
+                    mutation: gql `
+            mutation StartBoardAISession($boardId: String!) {
+              startBoardAISession(boardId: $boardId) {
+                id
+                name
+                createdAt
+              }
+            }
+          `,
+                    variables: { boardId: this.boardId },
+                    context: gqlContext()
+                });
+                const s = created.data?.startBoardAISession;
+                if (s)
+                    sessions = [s];
+            }
+            this.chatSessions = sessions;
+            // 활성 세션 결정 — 기존 active 가 list 에 있으면 유지, 아니면 첫 번째
+            if (!this.chatSessionId || !sessions.some(s => s.id === this.chatSessionId)) {
+                this.chatSessionId = sessions[0]?.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);
+        }
+    }
+    /**
+     * inverse op 시퀀스를 things-scene 위에 in-place 적용 (snapshot/undo 보존).
+     * dispatcher 재사용 — inverse 누적은 무시 (revert 의 revert 는 redo, 별개 기능).
+     */
+    applyInverseOpsInPlace(scene, ops) {
+        const normalize = (c) => this.normalizeComponent(c);
+        for (const op of ops) {
+            dispatchBoardEditOp(scene, op, { normalize });
+        }
+    }
+    /** 서버 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 +778,87 @@ 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}
+                .sessions=${this.chatSessions}
+                .currentBoard=${this.model}
+                .boardProvider=${() => this.getLiveBoard()}
+                .searchProvider=${this.searchSceneForMention}
+                .userProvider=${this.fetchDomainUsersForMention}
+                .knownTypes=${this.knownTypes}
+                .categories=${this.knownCategories}
+                .componentSchemas=${this.componentSchemas}
+                .selectedRefids=${this.extractSelectedRefids()}
+                @session-switch=${this.onChatSessionSwitch}
+                @session-create=${this.onChatSessionCreate}
+                @board-edit-patch=${this.onBoardEditPatch}
+                @board-edit-revert=${this.onBoardEditRevert}
+                @board-action-execute=${this.onBoardActionExecute}>
+              </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 +873,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 +943,18 @@ __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", Array)
+], BoardModellerPage.prototype, "chatSessions", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BoardModellerPage.prototype, "aiPanelOpen", void 0);
 __decorate([
     query('ox-board-modeller'),
     __metadata("design:type", BoardModeller)