@things-factory/board-ui 10.1.47 → 10.1.52

package/dist-client/pages/board-modeller-page.d.ts

@@ -23,26 +23,11 @@ export declare class BoardModellerPage extends PageView {
     componentGroupList?: any[];
     propertyEditor: any;
     preparing?: boolean;
-    /** AI 협력 세션 id — 현재 활성 세션. boardId 변경 시 자동 ensure. 다중 세션 시 활성 1개. */
-    chatSessionId?: string;
-    /** 보드의 모든 ChatSession (탭으로 표시). */
-    chatSessions: Array<{
-        id: string;
-        name?: string;
-        createdAt?: string;
-    }>;
-    /** AI 채팅 패널 열림 상태 (기본 닫힘) */
-    aiPanelOpen: boolean;
     /**
-     * The conversation the AI panel stands in — the mode the app server registered as the default for
-     * a board (ADR-0061 decision 7). The server then owns persona, tool categories and model. Absent
-     * when the app registered none: the panel keeps its older, undeclared behaviour.
+     * The AI conversation open for this board - the framework's dock owns it (design/ai/shared-dock.md) and tells
+     * this page through the board surface's `sessionChanged`. Direct edits are recorded under it (C3).
      */
-    aiMode?: {
-        kind: string;
-        target?: string;
-    };
-    private aiModeResolved;
+    private chatSessionId?;
     /**
      * 적용된 patch 별 inverse op 시퀀스 — Revert 기능용.
      *
@@ -84,23 +69,6 @@ export declare class BoardModellerPage extends PageView {
         description: string;
     };
     refresh(): Promise<void>;
-    /** 패널 토글 시 호출 — 열 때만 chatSession 보장 (세션 리스트 로드 + 활성 세션 결정) */
-    private toggleAIPanel;
-    /** Ask the server which conversation a board opens in. Once per page; the target follows the board. */
-    private resolveAIMode;
-    private onAssistantModeChange;
-    /** 보드의 모든 ChatSession 목록을 로드 + 활성 세션 보장.
-     *  - 세션이 0 개면 startBoardAISession 으로 첫 세션 생성 (단일 세션 UX 호환)
-     *  - 활성 세션 미설정 시 첫 번째 세션을 활성으로
-     *  - 이미 활성 세션 set 돼있고 list 에 포함되면 유지 */
-    private ensureChatSession;
-    /** `@` mention popup 의 도메인 사용자 후보 — chat 의 userProvider prop 으로 wire.
-     *  query 변할 때마다 호출되므로 server query (`domainUsersForMention`) 를 그대로 위임. */
-    private fetchDomainUsersForMention;
-    /** 채팅 패널의 탭 클릭 — 활성 세션 전환. */
-    private onChatSessionSwitch;
-    /** 채팅 패널의 "+" 버튼 — 새 세션 생성 후 활성으로 전환. */
-    private onChatSessionCreate;
     /**
      * 모델러의 selected (things-scene Component 인스턴스 배열) 에서 refid 추출.
      *
@@ -194,6 +162,13 @@ export declare class BoardModellerPage extends PageView {
     private findTemplateByType;
     updated(changes: any): Promise<void>;
     disconnectedCallback(): void;
+    /**
+     * This board, told to the framework's AI dock (design/ai/shared-dock.md §3). The dock owns the
+     * conversation - sessions, modes, the manager - and hands the chat's scene edits back to this page.
+     * Decided 2026-09-25: the modeller no longer carries its own "AI" button and panel; the band's forum
+     * button opens the same dock as every other screen.
+     */
+    private provideAssistantBoard;
     pageUpdated(changes: any, lifecycle: any): void;
     render(): import("lit-html").TemplateResult<1>;
     updateBoard(): Promise<void>;

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

@@ -15,6 +15,7 @@ import { PageView, FontController } from '@operato/shell';
 import { hasPrivilege } from '@things-factory/auth-base/dist-client/index.js';
 import { applyScenePatchVerbose, dispatchSceneAction, dispatchSceneEditOp, findSceneComponent } from '@operato/scene-ops';
 import { client, gqlContext, subscribe } from '@operato/graphql';
+import { clearAssistantSurface, provideAssistantSurface } from '@things-factory/ai-assistant/dist-client/index.js';
 import { i18next } from '@operato/i18n';
 import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { provider } from '@operato/board/board-provider.js';
@@ -77,11 +78,6 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         this.overlay = null;
         this.scene = null;
         this.componentGroupList = BoardModeller.groups;
-        /** 보드의 모든 ChatSession (탭으로 표시). */
-        this.chatSessions = [];
-        /** AI 채팅 패널 열림 상태 (기본 닫힘) */
-        this.aiPanelOpen = false;
-        this.aiModeResolved = false;
         /**
          * 적용된 patch 별 inverse op 시퀀스 — Revert 기능용.
          *
@@ -96,67 +92,6 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         this._syncedModel = null;
         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.
          *
@@ -361,6 +296,8 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
 
         overflow: hidden;
         position: relative;
+        /* The modeller's own layers (the save button is z-index 1000) stay inside the page - the AI dock opens over it. */
+        isolation: isolate;
       }
 
       .modeller-area {
@@ -375,54 +312,6 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         flex: 1;
       }
 
-      /*
-       * The assistant's door and its column, on the scheme's own surfaces. The door is a quiet
-       * tonal pill on the canvas, like the save FAB beside it; open, it takes the pressed tone.
-       */
-      .ai-toggle {
-        position: absolute;
-        right: 12px;
-        bottom: 12px;
-        z-index: 10;
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        height: 36px;
-        padding: 0 14px 0 11px;
-        border: 1px solid var(--md-sys-color-outline-variant);
-        border-radius: 999px;
-        background: var(--md-sys-color-surface-container-high);
-        color: var(--md-sys-color-on-surface);
-        font: 500 0.8rem/1 var(--theme-font, Roboto, sans-serif);
-        cursor: pointer;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
-        transition: background 0.15s, transform 0.1s;
-      }
-      .ai-toggle md-icon {
-        --md-icon-size: 18px;
-        color: var(--md-sys-color-primary);
-        font-variation-settings: 'FILL' 1;
-      }
-      .ai-toggle:hover { background: var(--md-sys-color-surface-container-highest); }
-      .ai-toggle:active { transform: scale(0.97); }
-      .ai-toggle.open {
-        border-color: transparent;
-        background: var(--md-sys-color-secondary-container);
-        color: var(--md-sys-color-on-secondary-container);
-      }
-      .ai-toggle.open md-icon { color: inherit; font-variation-settings: 'FILL' 0; }
-
-      .ai-panel {
-        flex: 0 0 340px;
-        display: flex;
-        min-width: 0;
-        border-left: 1px solid var(--md-sys-color-outline-variant);
-        background: var(--md-sys-color-surface-container-low);
-        color: var(--md-sys-color-on-surface);
-      }
-
-      ox-assistant-chat { flex: 1; }
-
       ox-oops-note {
         display: block;
         position: absolute;
@@ -431,14 +320,6 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         transform: translate(-50%, -50%);
       }
 
-      @media (max-width: 900px) {
-        .ai-panel {
-          flex-basis: 100%;
-          position: absolute;
-          inset: 0;
-          z-index: 20;
-        }
-      }
     `
     ]; }
     get knownTypes() {
@@ -599,16 +480,9 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
             this.model = {
                 ...this.board.model
             };
-            // AI 협력 세션 — 보드 전환 시 이전 보드의 세션 / 세션 리스트 정리 (chat panel 의
-            // sessionId/sessions 변화 감지 → history 비우고 새로 로드). 패널 열린 채 보드 옮겼다면
-            // 새 보드의 세션 리스트를 즉시 ensure (fire-and-forget — 에러는 ensureChatSession 처리).
+            /* Another board is another conversation - the dock reopens for the new surface. */
             this.chatSessionId = undefined;
-            this.chatSessions = [];
-            if (this.aiMode)
-                this.aiMode = { ...this.aiMode, target: this.boardId ?? undefined };
-            if (this.aiPanelOpen && this.boardId) {
-                this.ensureChatSession();
-            }
+            this.provideAssistantBoard();
         }
         catch (ex) {
             notifyError(ex);
@@ -618,98 +492,6 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
             this.updateContext();
         }
     }
-    /** 패널 토글 시 호출 — 열 때만 chatSession 보장 (세션 리스트 로드 + 활성 세션 결정) */
-    async toggleAIPanel() {
-        const willOpen = !this.aiPanelOpen;
-        if (willOpen && this.boardId) {
-            await Promise.all([this.ensureChatSession(), this.resolveAIMode()]);
-        }
-        this.aiPanelOpen = willOpen;
-    }
-    /** Ask the server which conversation a board opens in. Once per page; the target follows the board. */
-    async resolveAIMode() {
-        if (this.aiModeResolved)
-            return;
-        this.aiModeResolved = true;
-        try {
-            const result = await client.query({
-                query: gql `
-          query BoardAssistantModes($subject: String!) {
-            assistantModes(subject: $subject) {
-              kind
-              isDefault
-            }
-          }
-        `,
-                variables: { subject: 'board' },
-                context: gqlContext()
-            });
-            const modes = (result.data?.assistantModes ?? []);
-            const chosen = modes.find(m => m.isDefault) ?? modes[0];
-            this.aiMode = chosen ? { kind: chosen.kind, target: this.boardId ?? undefined } : undefined;
-        }
-        catch (e) {
-            /* A server without ai-assistant's mode door: stay undeclared rather than break the panel. */
-            this.aiMode = undefined;
-        }
-    }
-    onAssistantModeChange(e) {
-        const kind = e.detail?.kind;
-        if (kind)
-            this.aiMode = { kind, target: this.boardId ?? undefined };
-    }
-    /** 보드의 모든 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 추출.
      *
@@ -898,7 +680,8 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
     async updated(changes) {
         if (changes.has('boardId')) {
             try {
-                if (await hasPrivilege({ privilege: 'mutation', category: 'board' })) {
+                /* The same rule as the board's own save door (board-service): a domain owner edits without a role. */
+                if (await hasPrivilege({ privilege: 'mutation', category: 'board', domainOwnerGranted: true })) {
                     this.refresh();
                     // C2: 보드 변경 시 그 보드의 실시간 patch 구독 (이전 보드 구독은 해제).
                     if (this.boardId)
@@ -924,6 +707,44 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
     disconnectedCallback() {
         super.disconnectedCallback();
         this._unsubscribeBoardPatches();
+        clearAssistantSurface(this);
+    }
+    /**
+     * This board, told to the framework's AI dock (design/ai/shared-dock.md §3). The dock owns the
+     * conversation - sessions, modes, the manager - and hands the chat's scene edits back to this page.
+     * Decided 2026-09-25: the modeller no longer carries its own "AI" button and panel; the band's forum
+     * button opens the same dock as every other screen.
+     */
+    provideAssistantBoard() {
+        if (!this.boardId)
+            return;
+        const boardId = this.boardId;
+        provideAssistantSurface(this, {
+            key: `board:${boardId}`,
+            subject: 'board',
+            icon: 'dashboard',
+            label: () => this.boardName || i18next.t('text.ai_assistant'),
+            detail: () => i18next.t('label.board', { defaultValue: 'board' }),
+            anchor: () => ({ anchorType: 'board', anchorId: boardId }),
+            sessionChanged: sessionId => (this.chatSessionId = sessionId || undefined),
+            board: {
+                chatEndpoint: 'boardAIChat',
+                currentBoard: () => this.model,
+                boardProvider: () => this.getLiveBoard(),
+                selectedRefids: () => this.extractSelectedRefids(),
+                knownTypes: () => this.knownTypes,
+                categories: () => this.knownCategories,
+                componentSchemas: () => this.componentSchemas,
+                searchProvider: this.searchSceneForMention,
+                applyPatch: (detail) => {
+                    /* The modeller tells the person which ops missed itself, so the dock is told none to repeat. */
+                    this.onSceneEditPatch(new CustomEvent('scene-edit-patch', { detail }));
+                    return { applied: 0, missed: 0 };
+                },
+                revertPatch: (patchId) => this.onBoardEditRevert(new CustomEvent('board-edit-revert', { detail: { patchId } })),
+                applyAction: (detail) => this.onSceneActionExecute(new CustomEvent('scene-action-execute', { detail }))
+            }
+        });
     }
     pageUpdated(changes, lifecycle) {
         if (this.active) {
@@ -933,6 +754,7 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
             this.boardId = lifecycle.resourceId;
         }
         else {
+            clearAssistantSurface(this);
             this.boardId = null;
             this.board = null;
             this.model = null;
@@ -981,44 +803,7 @@ let BoardModellerPage = class BoardModellerPage extends PageView {
         ${this.scene && boardPlacementProvider()
             ? html `<board-placement-tray .boardId=${this.boardId} .scene=${this.scene}></board-placement-tray>`
             : nothing}
-        ${this.boardId
-            ? html `
-              <button
-                class="ai-toggle ${this.aiPanelOpen ? 'open' : ''}"
-                title="${i18next.t('text.ai_assistant') || 'AI Assistant'}"
-                @click=${this.toggleAIPanel}>
-                <md-icon>${this.aiPanelOpen ? 'close' : 'auto_awesome'}</md-icon>AI
-              </button>
-            `
-            : nothing}
       </div>
-      ${this.aiPanelOpen
-            ? html `
-            <div class="ai-panel">
-              <ox-assistant-chat
-                chat-endpoint="boardAIChat"
-                subject="board"
-                .mode=${this.aiMode}
-                @assistant-mode-change=${this.onAssistantModeChange}
-                .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}
-                @scene-edit-patch=${this.onSceneEditPatch}
-                @board-edit-revert=${this.onBoardEditRevert}
-                @scene-action-execute=${this.onSceneActionExecute}>
-              </ox-assistant-chat>
-            </div>
-          `
-            : nothing}
     `;
     }
     async updateBoard() {
@@ -1156,22 +941,6 @@ __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([
-    state(),
-    __metadata("design:type", Object)
-], BoardModellerPage.prototype, "aiMode", void 0);
 __decorate([
     query('ox-board-modeller'),
     __metadata("design:type", BoardModeller)