@things-factory/ai-assistant 10.1.6

package/dist-client/components/board-ai-chat.js

@@ -0,0 +1,3034 @@
+var OxBoardAIChat_1;
+import { __decorate, __metadata } from "tslib";
+/**
+ * <ox-board-ai-chat> — AI 주도 보드 모델링 채팅 컴포넌트 (Lit).
+ *
+ * 입력:
+ *   - sessionId: 영속 ChatSession 식별자 (없으면 ad-hoc 모드, 메시지 영속 안 됨)
+ *   - currentBoard: 현재 BoardModel JSON (호스트가 동기화)
+ *   - scopes / knownTypes / categories: 도메인 컨텍스트
+ *
+ * 출력 (이벤트):
+ *   - `board-edit-patch` { detail: { patch, summary, confidence, patchId } }
+ *     호스트가 받아서 보드 모델에 적용 (applyBoardEditPatch helper).
+ *   - `chat-followup` { detail: { question } }
+ *
+ * 모드 전환은 컨테이너 (워크스페이스) 의 책임. 이 컴포넌트는 자체로 풀 채팅 UX.
+ */
+import '@material/web/icon/icon.js';
+import { LitElement, css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { client } from '@operato/graphql';
+import { auth } from '@things-factory/auth-base/dist-client/index.js';
+import { i18next } from '@operato/i18n';
+import { ScrollbarStyles } from '@operato/styles';
+import gql from 'graphql-tag';
+import { renderMarkdown, injectMentionRefids, injectMentionUserIds, stripMentionRefids } from './markdown.js';
+import { buildChatMutationInput } from './chat-input-builder.js';
+import { receiveRemoteMessage, reconcileSentLine, remoteMessageToLine } from './chat-echo-dedup.js';
+import './mention-popup.js';
+import { buildMentionCandidates, buildCatalogCandidates, buildSlashCandidates, buildUserCandidates, extractMentionContext, filterMentionCandidates, applyMentionSelection, resolveMentionToken } from './mention-popup.js';
+/*
+ * 기본 카탈로그·슬래시 목록은 **호스트가 넣는다** (2026-09-10).
+ *
+ * 여기서 `./default-catalog-entries.js` 를 직접 import 하고 있었다. 그 두 파일은 보드 저작의
+ * 목록이고, 그래서 이 대화면이 보드 편집기 없이는 설 수 없었다 — 이 컴포넌트가 중립 패키지로
+ * 오지 못한 유일한 이유가 그 두 줄이었다.
+ *
+ * 등록하는 쪽이 주인이라는 규약을 따른다(`registerToolCategory` 와 같은 모양): `board-ai` 를
+ * import 하면 그 패키지가 자기 기본값을 넣고, 안 하면 비어 있다. 보드가 없는 제품에 보드 목록이
+ * 뜨지 않는 것이 맞다.
+ */
+import { chatDefaults } from './chat-defaults.js';
+const BOARD_AI_CHAT_MUTATION = gql `
+  mutation BoardAIChat($input: BoardAIChatInput!) {
+    boardAIChat(input: $input) {
+      reply
+      patch
+      followUp
+      clientId
+      sessionId
+      userMessageId
+      assistantMessageId
+      patchId
+      toolUsages
+      actions
+      proposals
+      groundingWarnings
+      historyFolded
+    }
+  }
+`;
+const CHAT_MESSAGES_QUERY = gql `
+  query ChatMessages($sessionId: String!, $limit: Int, $offset: Int) {
+    chatMessages(sessionId: $sessionId, limit: $limit, offset: $offset) {
+      id
+      role
+      content
+      relatedPatchId
+      toolUsagesJson
+      groundingWarningsJson
+      createdAt
+      creator {
+        name
+        email
+      }
+    }
+  }
+`;
+// C4 그룹챗 — 같은 세션의 메시지(사용자/AI/system) 실시간 방송 구독.
+// 자기 발신 에코는 message.id 로 dedup (mutation 응답으로 이미 렌더).
+const CHAT_MESSAGE_SUBSCRIPTION = gql `
+  subscription ChatMessageActivity($sessionId: String!) {
+    chatMessageActivity(sessionId: $sessionId) {
+      id
+      role
+      content
+      relatedPatchId
+      toolUsagesJson
+      groundingWarningsJson
+      createdAt
+      creator {
+        name
+        email
+      }
+    }
+  }
+`;
+// C4 presence/roster — 세션 참여자 목록 + 마지막 접속(online 판정용).
+const CHAT_PARTICIPANTS_QUERY = gql `
+  query ChatSessionParticipants($sessionId: String!) {
+    chatSessionParticipants(sessionId: $sessionId) {
+      id
+      role
+      lastSeenAt
+      user {
+        id
+        name
+      }
+    }
+  }
+`;
+const TOUCH_PRESENCE_MUTATION = gql `
+  mutation TouchPresence($sessionId: String!) {
+    touchPresence(sessionId: $sessionId)
+  }
+`;
+// heartbeat 주기(ms) — 서버 PRESENCE_TTL_MS(75s)의 ~1/2.5. 로컬 online 판정도 동일 TTL.
+const PRESENCE_HEARTBEAT_MS = 30_000;
+const PRESENCE_TTL_MS = 75_000;
+/** 이름 → roster chip 이니셜 (한글 1자 / 영문 최대 2자). */
+function initials(name) {
+    const n = (name || '?').trim();
+    if (!n)
+        return '?';
+    const parts = n.split(/\s+/);
+    if (parts.length >= 2)
+        return (parts[0][0] + parts[1][0]).toUpperCase();
+    return /[a-zA-Z]/.test(n) ? n.slice(0, 2).toUpperCase() : n.slice(0, 1);
+}
+let OxBoardAIChat = class OxBoardAIChat extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 보드의 모든 ChatSession 리스트 — 다중 세션 활성화 시 탭 UI 로 표시.
+         *
+         * 빈 배열 / 미지정 → 단일 세션 UX (탭 안 보임). 한 보드 = 한 세션 가정의 기존 호출자
+         * 호환. host (board-modeller-page) 가 chatSessionsByBoard query 결과를 그대로 전달.
+         *
+         * 이 컴포넌트는 list 자체를 fetch 하지 않음 — 영속 모델 / 권한 / 페이지네이션 정책은
+         * host 책임. 본 컴포넌트는 표시 + 이벤트 emission 만.
+         */
+        this.sessions = [];
+        /**
+         * 모델러에서 현재 선택된 컴포넌트의 `refid` 목록.
+         *
+         * refid 는 things-scene 이 모든 컴포넌트에 자동 발급하는 universal numeric handle.
+         * 호스트가 매 render 마다 `.selectedRefids=${...}` 로 갱신. AI 한테 selection 정보로
+         * 그대로 전달되어 "선택한" / "selected" / "this" 류 지시어 해석에 사용.
+         */
+        this.selectedRefids = [];
+        /** 코어 보드 편집 도구 사용 여부. 기본 true. 보드를 고칠 이유가 없는 면에서 false. */
+        this.boardTools = true;
+        /**
+         * 라이브 상태를 다루는 대화면인가 — true 면 **첫 턴에 도구 호출을 강제**한다.
+         *
+         * 접지 가드는 지어낸 식별자를 잡지만 식별자 없는 상황 서술("바쁘게 움직이고 있다")은 잡지 못한다.
+         * 그건 도구를 부르지 않고 답한 경우이므로, 조회를 먼저 하게 만들어 원천을 막는다.
+         */
+        this.requireGroundingTools = false;
+        this.placeholder = '자연어로 명령하세요 (Shift+Enter 줄바꿈, Enter 전송)';
+        this.lines = [];
+        this.input = '';
+        /** 되돌려진 patch id 들 — 한 번 revert 한 patch 는 버튼 비활성 */
+        this.revertedPatchIds = new Set();
+        /** mini action — 인라인 예시 토글 */
+        this.examplesOpen = false;
+        /** 원본 JSON 을 펼친 단계(라인:단계) — 목록은 한 줄 요약으로 훑고 필요한 것만 펼친다. */
+        this.openToolSteps = new Set();
+        /** 이미 실행을 요청한 제안 키 — 같은 카드를 두 번 눌러 되돌릴 수 없는 명령이 두 번 나가지 않게. */
+        this.sentProposals = new Set();
+        /** 안내를 닫았는가 — 한 번 닫으면 이 세션에서는 다시 띄우지 않는다(잔소리 금지). */
+        this.foldNoticeDismissed = false;
+        this.busy = false;
+        /** C4 presence/roster — 세션 참여자 목록. lastSeenAt 으로 online 판정. */
+        this.participants = [];
+        /** roster online 재평가 트리거 — heartbeat tick 마다 갱신(시간 경과 반영). */
+        this._presenceTick = 0;
+        /** 이미 transcript 에 반영된 서버 메시지 id 집합 — 자기 에코·중복 방송 차단. */
+        this._seenMessageIds = new Set();
+        /** optimistic 라인 임시 핸들 시퀀스 (index 비의존 reconcile 용). */
+        this._localSeq = 0;
+        /** Mention popup — `#` (컴포넌트) / `@` (카탈로그) / `/` (slash) 트리거 시 활성.
+         *  단일 popup 재사용 — mentionTrigger 로 활성 trigger 추적. */
+        this.mentionOpen = false;
+        /** popup 표시용 — F-Finder 처럼 matchType + matchValue 동봉된 결과 */
+        this.mentionResults = [];
+        this.mentionActiveIndex = 0;
+        /** filter cap (50) 으로 잘라낸 추가 매칭 수 — popup 의 'N more' 표시용 */
+        this.mentionOverflow = 0;
+        /** 현재 활성 mention 의 textarea 내 trigger 위치 */
+        this.mentionHashPos = -1;
+        /** 현재 활성 trigger char — '#' / '@' / '/'. popup 비활성 시 의미 없음. */
+        this.mentionTrigger = '#';
+        /** popup 열기 직전 사용자 selection 스냅샷 — Esc/blur close 시 원복용 */
+        this.originalSelectedRefids = [];
+        /** popup 에서 명시 선택된 #mention 매핑 — {token: refid}.
+         *  사용자 textarea 에는 #token 만 보이지만 server 한테는 정확한 refid 전달.
+         *  send 시 mutation input.mentions 로 함께 전송. 사용자가 textarea 비우거나
+         *  새 채팅 시작하면 정리. */
+        this.pickedMentions = new Map();
+        /** popup 에서 명시 선택된 @user 멘션 매핑 — {token: userId}.
+         *  textarea 에는 @username 만 보이지만 server 한테는 정확한 userId 전달.
+         *  send 시 mutation input.userMentions 로 함께 전송. */
+        this.pickedUserMentions = new Map();
+        /** Default 카탈로그 후보 캐시 — chat panel mount 시 1회 빌드 */
+        this.cachedCatalogCandidates = buildCatalogCandidates(chatDefaults.catalogEntries);
+        /** Default slash template 후보 캐시 — chat panel mount 시 1회 빌드 */
+        this.cachedSlashCandidates = buildSlashCandidates(chatDefaults.slashTemplates);
+        /** `@` 마지막 query 의 도메인 사용자 후보 캐시 — userProvider 응답 도착 시 갱신.
+         *  query 별 캐시가 아니라 단순 "최근 결과" — async race 회피. */
+        this.cachedUserCandidates = [];
+        /** 진행 중인 userProvider fetch token — 늦게 도착한 응답이 최신을 덮어쓰지 않도록 식별. */
+        this.userFetchToken = 0;
+        /** 메시지 버블의 `<span class="mention">#token</span>` 클릭 — 컴포넌트로 select + centerTo.
+         *  resolve 룰은 pure helper `resolveMentionToken` 에 위임 (단위 테스트 가능). */
+        this.onBubbleClick = (e) => {
+            const target = e.target;
+            if (!target?.classList?.contains('mention'))
+                return;
+            e.preventDefault();
+            const text = (target.textContent || '').trim();
+            const token = text.startsWith('#') ? text.slice(1) : text;
+            if (!token)
+                return;
+            const refid = resolveMentionToken(token, {
+                persistedRefid: target.getAttribute('data-refid'),
+                searchProvider: this.searchProvider,
+                board: this.boardProvider ? this.boardProvider() : this.currentBoard
+            });
+            if (typeof refid === 'number') {
+                this.dispatchActions([
+                    { action: 'selectComponents', refids: [refid] },
+                    { action: 'centerToComponent', refid, animated: true }
+                ]);
+            }
+            else {
+                this.showToast(i18next.t('board-ai.text.mention-not-found', {
+                    token,
+                    defaultValue: `#${token} 을(를) 찾을 수 없습니다`
+                }));
+            }
+        };
+        this._onSessionCreateClick = () => {
+            this.dispatchEvent(new CustomEvent('session-create', {
+                bubbles: true,
+                composed: true
+            }));
+        };
+        /**
+         * 새 대화로 — **맥락을 옮기지 않는다.** 주제를 바꾸려고 새로 시작하는 것이므로, 옮기면 그 이유가
+         * 사라진다(승격은 이어가려는 것이고 이건 끊으려는 것이다). 세션 생성은 호스트의 몫이다.
+         */
+        this.startNewFromNotice = () => {
+            this.foldNoticeDismissed = true;
+            this.dispatchEvent(new CustomEvent('board-ai-start-new-session', { bubbles: true, composed: true }));
+        };
+    }
+    static { OxBoardAIChat_1 = this; }
+    /** 현재 로그인 사용자 email — 그룹챗에서 내 메시지 vs 타인 메시지 구분.
+     *  email 을 쓰는 이유: /auth/profile 이 항상 내려주는 로그인 식별자이고(비어 있지 않다),
+     *  내부 관리키(User.id)를 클라이언트 판정에 의존하지 않기 위함. */
+    get _myEmail() {
+        return auth.credential?.email;
+    }
+    static { this.styles = [
+        // 어플리케이션 표준 스크롤바 (--scrollbar-width / --scrollbar-thumb-color 등 호스트 변수 따름)
+        ScrollbarStyles,
+        css `
+    /*
+      Material Design 3 토큰 사용 — 사용자 테마 (라이트/다크/브랜드) 자동 반영.
+      각 var() 의 두 번째 인자는 토큰 미정의 시 fallback (현 디자인 톤).
+    */
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      min-height: 240px;
+      position: relative;
+      font:
+        400 11px / 1.55 -apple-system,
+        BlinkMacSystemFont,
+        'Inter',
+        'Pretendard',
+        'Segoe UI',
+        Roboto,
+        sans-serif;
+      letter-spacing: -0.005em;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      background: var(--md-sys-color-surface, #ffffff);
+    }
+
+    /* ── C4 Roster (participants + presence) ───────────── */
+    .roster {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 4px;
+      padding: 4px 8px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+    }
+    .roster-count {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      font-size: 10px;
+      opacity: 0.7;
+      margin-right: 2px;
+    }
+    .roster-count md-icon {
+      font-size: 13px;
+      width: 13px;
+      height: 13px;
+    }
+    .roster-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      padding: 1px 6px 1px 4px;
+      border-radius: 9px;
+      font-size: 10px;
+      background: var(--md-sys-color-surface-variant, #f1f5f9);
+    }
+    .roster-chip.offline {
+      opacity: 0.45;
+    }
+    .roster-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #cbd5e1;
+    }
+    .roster-chip.online .roster-dot {
+      background: #22c55e;
+    }
+
+    /* ── Session tabs ─────────────────────────────────── */
+    .session-tabs {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      padding: 4px 6px 0 6px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      background: var(--md-sys-color-surface-container-low, #fafbfc);
+      overflow-x: auto;
+      scrollbar-width: thin;
+      flex-shrink: 0;
+    }
+    .session-tab {
+      flex-shrink: 0;
+      padding: 4px 10px;
+      font-size: 11px;
+      line-height: 1.4;
+      color: var(--md-sys-color-on-surface-variant, #64748b);
+      background: transparent;
+      border: 1px solid transparent;
+      border-bottom: 0;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      cursor: pointer;
+      max-width: 160px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .session-tab:hover {
+      background: var(--md-sys-color-surface-container, #f1f5f9);
+    }
+    .session-tab.active {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #0f172a);
+      border-color: var(--md-sys-color-outline-variant, #e2e8f0);
+      font-weight: 500;
+      position: relative;
+    }
+    .session-tab.active::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -1px;
+      height: 1px;
+      background: var(--md-sys-color-surface, #ffffff);
+    }
+    .session-tab-new {
+      flex-shrink: 0;
+      padding: 4px 8px 4px 6px;
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+      color: var(--md-sys-color-on-surface-variant, #64748b);
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      font-size: 11px;
+      line-height: 1.4;
+      border-radius: 5px;
+      white-space: nowrap;
+    }
+    .session-tab-new:hover {
+      color: var(--md-sys-color-primary, #2563eb);
+      background: var(--md-sys-color-surface-container, #f1f5f9);
+    }
+    .session-tab-new md-icon {
+      --md-icon-size: 14px;
+      font-size: 14px;
+    }
+
+    /* ── Messages ─────────────────────────────────────── */
+    /* 스크롤바는 ScrollbarStyles (위쪽 styles 배열) 가 처리 — 어플리케이션 표준 따름 */
+    .messages {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden; /* 가로 스크롤 차단 — 자식 (empty / msg) 내부에서 wrap 처리 */
+      padding: 10px 16px 4px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px; /* 단일 spacing source — .msg-wrap 의 자체 margin 은 0 */
+      scroll-behavior: smooth;
+      min-width: 0; /* flex item 의 기본 min-content 무시 — 자식 ellipsis/wrap 동작 */
+    }
+
+    /* ── Empty state — onboarding 가이드 ───────────────── */
+    .empty {
+      margin: auto;
+      text-align: left;
+      width: 100%;
+      max-width: 360px;
+      box-sizing: border-box;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      word-break: break-word; /* 긴 한글 / URL 도 줄바꿈해 가로 overflow 방지 */
+      overflow-wrap: anywhere;
+    }
+    .empty .header {
+      text-align: center;
+      padding: 8px 0 4px;
+    }
+    .empty .icon {
+      font-size: 22px;
+      opacity: 0.4;
+      margin-bottom: 8px;
+      color: var(--md-sys-color-primary, currentColor);
+      display: block;
+    }
+    .empty .title {
+      color: var(--md-sys-color-on-surface, #0f172a);
+      font-size: 12.5px;
+      font-weight: 600;
+      margin-bottom: 4px;
+      letter-spacing: -0.01em;
+    }
+    .empty .subtitle {
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      font-size: 10.5px;
+      line-height: 1.5;
+    }
+
+    .empty .group {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .empty .group-label {
+      font-size: 9.5px;
+      color: var(--md-sys-color-outline, #94a3b8);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      font-weight: 600;
+      padding: 0 2px;
+    }
+    .empty .example {
+      all: unset;
+      display: block;
+      cursor: pointer;
+      padding: 7px 10px;
+      font-size: 11px;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      border: 1px solid var(--md-sys-color-outline-variant, #eef2f6);
+      border-radius: 8px;
+      line-height: 1.5;
+      box-sizing: border-box;
+      width: 100%;
+      max-width: 100%;
+      word-break: break-word;
+      overflow-wrap: anywhere;
+      transition:
+        background 0.15s,
+        border-color 0.15s,
+        transform 0.1s;
+    }
+    .empty .example:hover {
+      background: var(--md-sys-color-surface-container-high, #f1f5f9);
+      border-color: var(--md-sys-color-outline, #cbd5e1);
+    }
+    .empty .example:active {
+      transform: scale(0.99);
+    }
+    .empty .example .arrow {
+      float: right;
+      opacity: 0.4;
+      margin-left: 8px;
+      font-size: 11px;
+    }
+
+    .empty .footer {
+      margin-top: 4px;
+      padding: 8px 4px 0;
+      border-top: 1px solid var(--md-sys-color-outline-variant, #eef2f6);
+      color: var(--md-sys-color-outline, #94a3b8);
+      font-size: 10px;
+      line-height: 1.6;
+      text-align: center;
+    }
+    .empty .footer .badge {
+      display: inline-block;
+      margin: 0 4px;
+      padding: 1px 7px;
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      border-radius: 8px;
+      font-size: 9.5px;
+      color: var(--md-sys-color-on-surface-variant, #64748b);
+    }
+    /* ── Trigger chip row (empty state) ──────────────── */
+    .empty .trigger-row {
+      margin: 12px 0 4px;
+      padding: 10px 12px;
+      background: var(--md-sys-color-surface-container-low, #f8fafc);
+      border: 1px solid var(--md-sys-color-outline-variant, #eef2f6);
+      border-radius: 10px;
+    }
+    .empty .trigger-row-label {
+      font-size: 10px;
+      color: var(--md-sys-color-on-surface-variant, #64748b);
+      margin-bottom: 6px;
+      text-align: center;
+      letter-spacing: 0.02em;
+    }
+    .empty .trigger-chips {
+      display: flex;
+      gap: 6px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .empty .trigger-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 5px 10px;
+      background: var(--md-sys-color-surface, #ffffff);
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 18px;
+      cursor: pointer;
+      font-size: 11.5px;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      transition:
+        border-color 0.15s,
+        background 0.15s,
+        color 0.15s;
+    }
+    .empty .trigger-chip:hover {
+      border-color: var(--md-sys-color-primary, #2563eb);
+      background: var(--md-sys-color-primary-container, #dbeafe);
+      color: var(--md-sys-color-on-primary-container, #1e3a8a);
+    }
+    .empty .trigger-chip .trigger-char {
+      font-family:
+        'SF Mono',
+        Menlo,
+        Monaco,
+        Consolas,
+        monospace;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--md-sys-color-primary, #2563eb);
+      min-width: 12px;
+      text-align: center;
+    }
+    .empty .trigger-chip:hover .trigger-char {
+      color: var(--md-sys-color-on-primary-container, #1e3a8a);
+    }
+    .empty .trigger-chip .trigger-desc {
+      font-weight: 500;
+    }
+
+    /* ── Message label (sender hint) ──────────────────── */
+    .msg-label {
+      font-size: 9.5px;
+      color: var(--md-sys-color-outline, #94a3b8);
+      letter-spacing: 0.05em;
+      font-weight: 500;
+      text-transform: uppercase;
+      margin: 4px 0 1px 4px;
+      align-self: flex-start;
+    }
+    .msg-label:first-child {
+      margin-top: 0;
+    }
+
+    /* ── Message wrapper (메시지 + hover 액션) ────────── */
+    .msg-wrap {
+      display: flex;
+      flex-direction: column;
+      width: fit-content;
+      max-width: min(92%, 420px);
+      /* margin 0 — spacing 은 .messages gap 단일 source */
+    }
+    .msg-wrap.user {
+      align-self: flex-end;
+      align-items: flex-end;
+    }
+    .msg-wrap.assistant {
+      align-self: flex-start;
+      align-items: flex-start;
+    }
+    .msg-wrap.system {
+      align-self: center;
+      align-items: center;
+      max-width: 100%;
+    }
+
+    /* ── Message bubble ───────────────────────────────── */
+    .msg {
+      display: inline-block;
+      width: fit-content;
+      max-width: 100%;
+      padding: 5px 9px;
+      border-radius: 10px;
+      white-space: normal;
+      overflow-wrap: anywhere;
+      font-size: 11px;
+      line-height: 1.45;
+    }
+
+    .msg.user {
+      align-self: flex-end;
+      background: var(--md-sys-color-primary, #1e293b);
+      color: var(--md-sys-color-on-primary, #f8fafc);
+      border-radius: 12px 12px 3px 12px;
+      /* margin-top 0 — .messages gap 으로만 spacing */
+    }
+
+    /* 그룹챗 — 다른 참여자의 메시지. 내 메시지(우측 primary)와 구분: 좌측 정렬 + 보조 색. */
+    .msg-wrap.user.other {
+      align-self: flex-start;
+      align-items: flex-start;
+    }
+    .msg.user.other {
+      align-self: flex-start;
+      background: var(--md-sys-color-secondary-container, #e2e8f0);
+      color: var(--md-sys-color-on-secondary-container, #0f172a);
+      border-radius: 12px 12px 12px 3px;
+    }
+    /* 발신자 이름 라벨 — AI 라벨(대문자)과 달리 사람 이름은 그대로. */
+    .msg-label.sender {
+      text-transform: none;
+      letter-spacing: 0;
+      color: var(--md-sys-color-primary, #475569);
+    }
+
+    .msg.assistant {
+      align-self: flex-start;
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      color: var(--md-sys-color-on-surface, #0f172a);
+      border: 1px solid var(--md-sys-color-outline-variant, #eef2f6);
+      border-radius: 12px 12px 12px 3px;
+    }
+
+    /* ── Markdown 렌더 (AI 응답) ──────────────────────── */
+    .md-body {
+      display: block;
+    }
+    .md-body > :first-child {
+      margin-top: 0;
+    }
+    .md-body > :last-child {
+      margin-bottom: 0;
+    }
+    .md-body p {
+      margin: 0 0 4px;
+      line-height: 1.45;
+    }
+    .md-body ul,
+    .md-body ol {
+      margin: 2px 0 4px;
+      padding-left: 16px;
+    }
+    .md-body li {
+      margin: 0;
+      line-height: 1.45;
+    }
+    .md-body li > p {
+      margin: 0;
+    }
+    .md-body strong {
+      font-weight: 600;
+    }
+    .md-body em {
+      font-style: italic;
+    }
+    /* '#token' mention — popup 의 match-badge 톤과 맞춤. 채팅 버블에서 컴포넌트
+       참조임을 시각적으로 구분 (사용자/AI 메시지 양쪽). */
+    .md-body .mention {
+      display: inline-block;
+      padding: 0 5px;
+      border-radius: 4px;
+      background: var(--md-sys-color-primary-container, rgba(37, 99, 235, 0.12));
+      color: var(--md-sys-color-on-primary-container, #1e40af);
+      font-weight: 500;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: background 0.12s;
+    }
+    .md-body .mention:hover {
+      background: var(--md-sys-color-primary, rgba(37, 99, 235, 0.25));
+      color: var(--md-sys-color-on-primary, #ffffff);
+    }
+    .msg.user .md-body .mention {
+      background: rgba(255, 255, 255, 0.22);
+      color: inherit;
+    }
+    .msg.user .md-body .mention:hover {
+      background: rgba(255, 255, 255, 0.40);
+    }
+    .md-body code {
+      font-family:
+        'SF Mono',
+        Menlo,
+        Monaco,
+        Consolas,
+        monospace;
+      font-size: 10px;
+      padding: 1px 4px;
+      background: var(--md-sys-color-surface-container-high, rgba(15, 23, 42, 0.06));
+      border-radius: 3px;
+    }
+    .md-body pre {
+      margin: 5px 0;
+      padding: 6px 8px;
+      background: var(--md-sys-color-surface-container-high, rgba(15, 23, 42, 0.06));
+      border-radius: 5px;
+      overflow-x: auto;
+      font-size: 10px;
+      line-height: 1.5;
+    }
+    /* user 메시지(어두운 배경) 위에서는 code/pre 의 contrast 보정 */
+    .msg.user .md-body code,
+    .msg.user .md-body pre {
+      background: rgba(255, 255, 255, 0.15);
+    }
+    .msg.user .md-body a {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    .msg.user .md-body blockquote {
+      border-left-color: rgba(255, 255, 255, 0.3);
+      color: rgba(255, 255, 255, 0.85);
+    }
+    .msg.user .md-body hr {
+      border-top-color: rgba(255, 255, 255, 0.2);
+    }
+    .md-body pre code {
+      padding: 0;
+      background: transparent;
+      font-size: inherit;
+    }
+    .md-body a {
+      color: var(--md-sys-color-primary, #1e293b);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+    .md-body a:hover {
+      text-decoration: none;
+    }
+    .md-body h1,
+    .md-body h2,
+    .md-body h3,
+    .md-body h4 {
+      margin: 4px 0 2px;
+      font-weight: 600;
+      line-height: 1.35;
+    }
+    .md-body h1 { font-size: 13px; }
+    .md-body h2 { font-size: 12px; }
+    .md-body h3,
+    .md-body h4 { font-size: 11.5px; }
+    .md-body blockquote {
+      margin: 4px 0;
+      padding: 1px 8px;
+      border-left: 2px solid var(--md-sys-color-outline-variant, #cbd5e1);
+      color: var(--md-sys-color-on-surface-variant, #64748b);
+    }
+    .md-body hr {
+      border: 0;
+      border-top: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      margin: 6px 0;
+    }
+    .md-body table {
+      border-collapse: collapse;
+      margin: 4px 0;
+      font-size: 10px;
+    }
+    .md-body th,
+    .md-body td {
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      padding: 2px 6px;
+    }
+    .md-body th {
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      font-weight: 600;
+    }
+
+    .msg.system {
+      align-self: center;
+      background: transparent;
+      color: var(--md-sys-color-outline, #94a3b8);
+      font-size: 10px;
+      font-style: italic;
+      max-width: 100%;
+      padding: 2px 8px;
+      margin: 0;
+      border: 0;
+    }
+    /* 시스템 기록은 **곁줄**이다 — 길면 화면을 잡아먹어 대화가 안 보인다(옮겨온 대화를 한 덩어리로
+       넣었을 때 실제로 그랬다). 세 줄로 접고 눌러서 펼친다. */
+    .msg.system .sys-text {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+      white-space: pre-wrap;
+      cursor: pointer;
+    }
+    .msg.system.open .sys-text {
+      display: block;
+      -webkit-line-clamp: unset;
+      overflow: visible;
+    }
+
+    .msg.pending {
+      opacity: 0.5;
+    }
+    .typing-dots {
+      display: inline-flex;
+      gap: 4px;
+      align-items: center;
+      vertical-align: middle;
+    }
+    .typing-dots > span {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: currentColor;
+      opacity: 0.4;
+      animation: pulse 1.2s ease-in-out infinite;
+    }
+    .typing-dots > span:nth-child(2) { animation-delay: 0.2s; }
+    .typing-dots > span:nth-child(3) { animation-delay: 0.4s; }
+    @keyframes pulse {
+      0%, 100% { opacity: 0.2; transform: scale(0.85); }
+      50% { opacity: 0.7; transform: scale(1.1); }
+    }
+
+    /* ── Patch indicator + 인라인 되돌리기 ─────────────── */
+    .summary {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 4px;
+      padding: 3px 4px 3px 8px;
+      background: var(--md-sys-color-surface-container-high, #f1f5f9);
+      border-radius: 6px;
+      font-size: 10px;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      line-height: 1;
+    }
+    .summary md-icon {
+      --md-icon-size: 13px;
+      color: var(--md-sys-color-tertiary, #10b981);
+    }
+    .summary.reverted {
+      opacity: 0.6;
+    }
+    .summary.reverted md-icon {
+      color: var(--md-sys-color-outline, #94a3b8);
+    }
+    .summary .summary-text {
+      letter-spacing: 0.01em;
+    }
+    .summary .revert-btn {
+      height: 20px;
+      padding: 0 8px;
+      background: transparent;
+      border: 0;
+      border-radius: 4px;
+      cursor: pointer;
+      font-family: inherit;
+      letter-spacing: inherit;
+      font-size: 10px;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      line-height: 1;
+      transition: background 0.12s, color 0.12s;
+      width: auto;
+    }
+    .summary .revert-btn:hover:not(:disabled) {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #0f172a);
+    }
+    .summary.reverted .revert-btn,
+    .summary .revert-btn:disabled {
+      display: none;
+    }
+
+    /* ── Follow-up question ───────────────────────────── */
+    .followup {
+      font-size: 10.5px;
+      color: var(--md-sys-color-on-secondary-container, #92400e);
+      background: var(--md-sys-color-secondary-container, #fffbeb);
+      border-left: 2px solid var(--md-sys-color-secondary, #f59e0b);
+      padding: 5px 8px;
+      border-radius: 0 5px 5px 0;
+      margin-top: 4px;
+      line-height: 1.45;
+    }
+
+    /* ── "대화가 길어졌습니다" 안내 — 조용한 한 줄, 강조하지 않는다 ───── */
+    .fold-notice {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin: 0 0 4px;
+      padding: 5px 8px;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 8px;
+      background: var(--md-sys-color-surface-container-low, #f8fafc);
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      font-size: 10.5px;
+      line-height: 1.45;
+    }
+    .fold-notice md-icon {
+      --md-icon-size: 14px;
+      flex-shrink: 0;
+    }
+    .fold-notice .fn-text {
+      flex: 1;
+      min-width: 0;
+    }
+    /* 새 대화 — 권유이므로 강조색 글자만(채운 버튼은 지시처럼 읽힌다). */
+    .fold-notice .fn-new {
+      flex-shrink: 0;
+      border: 0;
+      background: none;
+      color: var(--md-sys-color-primary, #0f766e);
+      font-family: inherit;
+      font-size: 10.5px;
+      font-weight: 650;
+      cursor: pointer;
+      padding: 2px 4px;
+      border-radius: 5px;
+      white-space: nowrap;
+    }
+    .fold-notice .fn-new:hover {
+      background: var(--md-sys-color-surface-container-high, #e2e8f0);
+    }
+    .fold-notice .fn-close {
+      flex-shrink: 0;
+      border: 0;
+      background: none;
+      color: var(--md-sys-color-outline, #94a3b8);
+      cursor: pointer;
+      padding: 0;
+      display: inline-flex;
+    }
+    .fold-notice .fn-close md-icon {
+      --md-icon-size: 13px;
+    }
+
+    /* ── 조치 제안 — AI 는 제안까지, 실행은 사용자 ───── */
+    .proposals {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-top: 6px;
+    }
+    .proposal {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 8px 6px 7px;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      /* 왼쪽 강조선 — 되돌릴 수 없는 행동임을 조용히 구분한다(색만으로 소리치지 않는다). */
+      border-left: 3px solid var(--md-sys-color-primary, #0f766e);
+      border-radius: 8px;
+      background: var(--md-sys-color-surface-container-low, #f8fafc);
+    }
+    .proposal md-icon {
+      --md-icon-size: 16px;
+      color: var(--md-sys-color-primary, #0f766e);
+      flex-shrink: 0;
+    }
+    .proposal .pbody {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      min-width: 0;
+      flex: 1;
+    }
+    .proposal .plabel {
+      font-size: 11.5px;
+      font-weight: 650;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      overflow-wrap: anywhere;
+    }
+    .proposal .preason {
+      font-size: 10.5px;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      overflow-wrap: anywhere;
+    }
+    /* 실행 버튼 — 이 대화의 유일한 "되돌릴 수 없는" 행동이므로 채운 버튼 하나로 분명하게. */
+    .proposal .run {
+      flex-shrink: 0;
+      padding: 4px 12px;
+      border: 0;
+      border-radius: 999px;
+      background: var(--md-sys-color-primary, #0f766e);
+      color: var(--md-sys-color-on-primary, #ffffff);
+      font-family: inherit;
+      font-size: 11px;
+      font-weight: 650;
+      letter-spacing: 0.01em;
+      cursor: pointer;
+      transition: filter 0.12s;
+    }
+    .proposal .run:hover:not(:disabled) {
+      filter: brightness(1.08);
+    }
+    .proposal .run:disabled {
+      background: var(--md-sys-color-surface-container-high, #e2e8f0);
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      cursor: default;
+    }
+    .proposal.sent {
+      border-left-color: var(--md-sys-color-outline, #94a3b8);
+    }
+
+    /* ── 접지 경고 — 근거에 없는 대상을 지목한 답 ───── */
+    .grounding-warning {
+      display: flex;
+      align-items: flex-start;
+      gap: 6px;
+      margin-top: 4px;
+      padding: 5px 8px;
+      border-radius: 6px;
+      border: 1px solid var(--md-sys-color-error, #dc2626);
+      background: var(--md-sys-color-error-container, #fef2f2);
+      color: var(--md-sys-color-on-error-container, #7f1d1d);
+      font-size: 10.5px;
+      line-height: 1.45;
+    }
+    .grounding-warning md-icon {
+      --md-icon-size: 14px;
+      flex-shrink: 0;
+    }
+    .grounding-warning .ids {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-weight: 600;
+      word-break: break-all;
+    }
+
+    /* ── Tool usages fold-able 박스 — AI 도구 호출 trace ───── */
+    .tool-usages {
+      margin-top: 4px;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 6px;
+      background: var(--md-sys-color-surface-container-low, #f8fafc);
+      overflow: hidden;
+      font-size: 10.5px;
+    }
+    .tool-usages-header {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      width: 100%;
+      padding: 5px 8px;
+      background: transparent;
+      border: 0;
+      cursor: pointer;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      font-family: inherit;
+      font-size: inherit;
+      letter-spacing: inherit;
+      text-align: left;
+    }
+    .tool-usages-header:hover {
+      background: var(--md-sys-color-surface-container, #f1f5f9);
+    }
+    .tool-usages-icon,
+    .tool-usages-chevron {
+      --md-icon-size: 14px;
+      flex-shrink: 0;
+    }
+    .tool-usages-summary {
+      flex: 1;
+      font-weight: 500;
+    }
+    .tool-usages-counts {
+      color: var(--md-sys-color-outline, #94a3b8);
+      font-weight: 400;
+      font-size: 10px;
+    }
+    .tool-usages-list {
+      list-style: none;
+      margin: 0;
+      padding: 0 8px 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .tool-usage-item {
+      border-left: 2px solid var(--md-sys-color-outline-variant, #cbd5e1);
+      padding: 4px 8px 4px 8px;
+      background: var(--md-sys-color-surface, #ffffff);
+      border-radius: 0 4px 4px 0;
+    }
+    .tool-usage-item.kind-read {
+      border-left-color: var(--md-sys-color-tertiary, #10b981);
+    }
+    .tool-usage-item.kind-write {
+      border-left-color: var(--md-sys-color-primary, #1e293b);
+    }
+    .tool-usage-item.kind-unknown {
+      border-left-color: var(--md-sys-color-error, #b91c1c);
+    }
+    .tool-usage-head {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-bottom: 3px;
+    }
+    .tool-usage-step {
+      color: var(--md-sys-color-outline, #94a3b8);
+      font-size: 10px;
+    }
+    .tool-usage-name {
+      font-weight: 600;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
+      font-size: 10.5px;
+    }
+    .tool-usage-kind {
+      font-size: 9.5px;
+      padding: 1px 5px;
+      border-radius: 3px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-weight: 600;
+    }
+    .tool-usage-kind.kind-read {
+      color: var(--md-sys-color-on-tertiary, #ffffff);
+      background: var(--md-sys-color-tertiary, #10b981);
+    }
+    .tool-usage-kind.kind-write {
+      color: var(--md-sys-color-on-primary, #ffffff);
+      background: var(--md-sys-color-primary, #1e293b);
+    }
+    .tool-usage-kind.kind-unknown {
+      color: var(--md-sys-color-on-error, #ffffff);
+      background: var(--md-sys-color-error, #b91c1c);
+    }
+    /* 판단 파이프라인 — 훑어 읽는 목록. 배지로 결과를 구분하고 원본은 눌러서 본다. */
+    .tool-usages.has-problem {
+      border-color: var(--md-sys-color-error, #dc2626);
+    }
+    .tool-usages-counts .tu-flag {
+      font-weight: 650;
+    }
+    .tool-usages-counts .tu-flag.bad {
+      color: var(--md-sys-color-error, #dc2626);
+    }
+    .tu-turn {
+      list-style: none;
+      margin: 4px 0 2px;
+      padding: 0 8px;
+      font-size: 9.5px;
+      font-weight: 650;
+      letter-spacing: 0.04em;
+      color: var(--md-sys-color-outline, #94a3b8);
+      text-transform: uppercase;
+    }
+    .tool-usage-head {
+      cursor: pointer;
+      align-items: center;
+    }
+    .tool-usage-item.outcome-rejected,
+    .tool-usage-item.outcome-error {
+      border-left-color: var(--md-sys-color-error, #dc2626);
+    }
+    .tool-usage-item.outcome-proposed {
+      border-left-color: var(--md-sys-color-primary, #0f766e);
+    }
+    .tool-usage-item.outcome-folded {
+      opacity: 0.7;
+    }
+    .tu-badge {
+      flex-shrink: 0;
+      padding: 0 5px;
+      border-radius: 999px;
+      font-size: 9px;
+      font-weight: 700;
+      line-height: 15px;
+      background: var(--md-sys-color-surface-container-high, #e2e8f0);
+      color: var(--md-sys-color-on-surface-variant, #475569);
+    }
+    .tu-badge.rejected,
+    .tu-badge.error {
+      background: var(--md-sys-color-error-container, #fef2f2);
+      color: var(--md-sys-color-error, #dc2626);
+    }
+    .tu-badge.proposed {
+      background: var(--md-sys-color-primary, #0f766e);
+      color: var(--md-sys-color-on-primary, #fff);
+    }
+    /* 한 줄 요약 — 넘치면 자른다. 목록은 훑는 곳이고 읽는 곳이 아니다. */
+    .tu-line {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 9.5px;
+    }
+    .tu-more {
+      --md-icon-size: 13px;
+      flex-shrink: 0;
+      color: var(--md-sys-color-outline, #94a3b8);
+    }
+
+    .tool-usage-args,
+    .tool-usage-result {
+      margin: 2px 0 0;
+      padding: 4px 6px;
+      background: var(--md-sys-color-surface-container-high, rgba(15, 23, 42, 0.04));
+      border-radius: 3px;
+      font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
+      font-size: 10px;
+      line-height: 1.4;
+      white-space: pre-wrap;
+      overflow-x: auto;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      max-height: 180px;
+      overflow-y: auto;
+    }
+    .tool-usage-args {
+      border-left: 2px solid var(--md-sys-color-outline-variant, #cbd5e1);
+    }
+    .tool-usage-result {
+      border-left: 2px solid var(--md-sys-color-outline, #94a3b8);
+    }
+
+    /* ── Hover actions (assistant 메시지만, Material icon button) ── */
+    .msg-actions {
+      display: flex;
+      gap: 2px;
+      margin-top: 2px;
+      padding: 0;
+      opacity: 0;
+      transition: opacity 0.15s;
+      pointer-events: none;
+    }
+    .msg-wrap:hover .msg-actions,
+    .msg-wrap:focus-within .msg-actions {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .msg-actions .msg-action {
+      width: 22px;
+      height: 22px;
+      padding: 0;
+      background: transparent;
+      border: 0;
+      border-radius: 5px;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--md-sys-color-outline, #94a3b8);
+      transition:
+        background 0.12s,
+        color 0.12s;
+    }
+    .msg-actions .msg-action:hover:not(:disabled) {
+      background: var(--md-sys-color-surface-container-high, #e2e8f0);
+      color: var(--md-sys-color-on-surface, #0f172a);
+    }
+    .msg-actions .msg-action:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+    .msg-actions .msg-action.confirmed {
+      color: var(--md-sys-color-tertiary, #10b981);
+    }
+    .msg-actions .msg-action md-icon {
+      --md-icon-size: 14px;
+    }
+
+    /* ── Error banner ─────────────────────────────────── */
+    .error {
+      color: var(--md-sys-color-on-error-container, #b91c1c);
+      padding: 7px 11px;
+      background: var(--md-sys-color-error-container, #fef2f2);
+      border: 1px solid var(--md-sys-color-error, #fee2e2);
+      border-radius: 8px;
+      margin: 0 16px 8px;
+      font-size: 10.5px;
+      line-height: 1.5;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .error .error-text {
+      flex: 1;
+    }
+    .error .retry-btn {
+      flex-shrink: 0;
+      padding: 3px 8px;
+      font-size: 10px;
+      font-family: inherit;
+      letter-spacing: inherit;
+      background: var(--md-sys-color-error, #b91c1c);
+      color: var(--md-sys-color-on-error, #ffffff);
+      border: 0;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: opacity 0.15s;
+      width: auto;
+      height: auto;
+    }
+    .error .retry-btn:hover {
+      opacity: 0.88;
+    }
+
+    /* ── Composer (actions + input 통합 영역) ──────────── */
+    .composer {
+      border-top: 1px solid var(--md-sys-color-outline-variant, #f1f5f9);
+      background: var(--md-sys-color-surface, #ffffff);
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* ── Mini action row (메시지 시작 후) ──────────────── */
+    .actions-row {
+      display: flex;
+      gap: 6px;
+      padding: 6px 14px 4px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    /* Material 3 assist-chip 톤 — height 24, font label-small */
+    .action {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 5px;
+      height: 24px;
+      padding: 0 10px;
+      font-size: 11px;
+      font-family: inherit;
+      letter-spacing: inherit;
+      line-height: 1;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      background: transparent;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 8px;
+      cursor: pointer;
+      transition:
+        background 0.15s,
+        border-color 0.15s,
+        color 0.15s;
+      width: auto;
+      vertical-align: middle;
+    }
+    .action:hover {
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      border-color: var(--md-sys-color-outline, #cbd5e1);
+      color: var(--md-sys-color-on-surface, #0f172a);
+    }
+    .action:active {
+      transform: scale(0.97);
+    }
+    .action md-icon {
+      --md-icon-size: 14px;
+      opacity: 0.7;
+    }
+
+    /* ── Inline examples (action row 의 "예시" 토글 시) ──── */
+    .inline-examples {
+      padding: 4px 16px 0;
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+    .inline-examples .ex-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+    .inline-examples .ex-row .ex-label {
+      font-size: 9px;
+      color: var(--md-sys-color-outline, #94a3b8);
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      margin-right: 2px;
+      align-self: center;
+      font-weight: 600;
+    }
+    .inline-examples .ex {
+      all: unset;
+      cursor: pointer;
+      padding: 2px 8px;
+      font-size: 10px;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      border: 1px solid var(--md-sys-color-outline-variant, #eef2f6);
+      border-radius: 10px;
+      transition: background 0.15s;
+    }
+    .inline-examples .ex:hover {
+      background: var(--md-sys-color-surface-container-high, #f1f5f9);
+    }
+
+    /* ── Input area ───────────────────────────────────── */
+    /* border-top 은 .composer 가 담당 (actions-row 가 같은 wrapper 안) */
+    .input-row {
+      display: flex;
+      gap: 8px;
+      padding: 6px 14px 10px;
+      background: transparent;
+      align-items: flex-end;
+    }
+    /* 메시지 시작 전 — actions-row 가 없을 때는 input-row 가 직접 border-top */
+    .composer.no-actions .input-row {
+      padding-top: 10px;
+    }
+
+    /* mention popup — textarea wrapper 가 relative 컨텍스트, popup 이 textarea
+       와 정확히 같은 폭/좌표 (좌우 끝 정렬). send 버튼 영역은 제외. */
+    .textarea-wrap {
+      flex: 1;
+      position: relative;
+      display: flex;
+      min-width: 0;
+    }
+    .textarea-wrap textarea {
+      flex: 1;
+      width: 100%;
+    }
+    .mention-popup {
+      bottom: calc(100% + 4px);
+      left: 0;
+      right: 0;
+    }
+
+    textarea {
+      flex: 1;
+      padding: 8px 12px;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 12px;
+      font: inherit;
+      letter-spacing: inherit;
+      resize: none;
+      min-height: 36px;
+      max-height: 140px;
+      outline: none;
+      transition:
+        border-color 0.2s,
+        box-shadow 0.2s;
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #0f172a);
+    }
+    textarea::placeholder {
+      color: var(--md-sys-color-outline, #94a3b8);
+    }
+    textarea:focus {
+      border-color: var(--md-sys-color-outline, #cbd5e1);
+      box-shadow: 0 0 0 3px var(--md-sys-color-primary-container, rgba(15, 23, 42, 0.08));
+    }
+    textarea:disabled {
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      color: var(--md-sys-color-outline, #94a3b8);
+      cursor: not-allowed;
+    }
+
+    /* ── Send button — ChatGPT 스타일 원형 ↑ (.input-row 안의 button 만) ─── */
+    .input-row > button {
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      background: var(--md-sys-color-primary, #1e293b);
+      color: var(--md-sys-color-on-primary, #ffffff);
+      border: 0;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        background 0.15s,
+        transform 0.1s,
+        opacity 0.15s;
+      flex-shrink: 0;
+      align-self: flex-end;
+      margin-bottom: 2px;
+    }
+    .input-row > button:disabled {
+      background: var(--md-sys-color-surface-container-highest, #e2e8f0);
+      color: var(--md-sys-color-outline, #94a3b8);
+      cursor: not-allowed;
+    }
+    .input-row > button:hover:not(:disabled) {
+      opacity: 0.88;
+    }
+    .input-row > button:active:not(:disabled) {
+      transform: scale(0.94);
+    }
+    .input-row > button md-icon {
+      --md-icon-size: 18px;
+    }
+    .input-row > button .spinner {
+      width: 12px;
+      height: 12px;
+      border: 1.8px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+    }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        // 첫 마운트 시 sessionId 가 이미 set 돼있어도 loadHistory 는 첫 render 후 updated()
+        // 가 처리 — 단일 진입점으로 일관 (이전엔 connectedCallback 과 updated 양쪽이 호출 →
+        // 동시 fetch race 발생).
+    }
+    updated(changed) {
+        /*
+         * 밖에서 넣어 준 질문을 자동 전송한다(오류 토스트의 "AI에게 묻기" 등).
+         *
+         * sessionId 가 붙기 전에 보내면 대화에 남지 않으므로 세션이 준비될 때까지 기다린다.
+         * 같은 문장을 두 번 보내지 않도록 보낸 값을 기억한다 — 재렌더마다 updated 가 다시 돌기 때문이다.
+         */
+        if (this.autoAsk && this.autoAsk !== this._autoAsked && this.sessionId && !this.busy) {
+            this._autoAsked = this.autoAsk;
+            this.input = this.autoAsk;
+            this.send();
+        }
+        if (changed.has('sessionId')) {
+            // sessionId 가 바뀌면 (set / unset / 다른 보드 전환) 이전 세션의 모든 클라이언트
+            // 컨텍스트 정리 — lines / pickedMentions / errorMessage / input 모두 새지 않도록.
+            // 보드 단위 격리 (ChatSession 1:1 boardId) 가 깨지는 회귀 방지.
+            this.lines = [];
+            this.pickedMentions.clear();
+            this.pickedUserMentions.clear();
+            this.cachedUserCandidates = [];
+            this.errorMessage = undefined;
+            this.input = '';
+            this.participants = [];
+            this._seenMessageIds.clear(); // 세션 전환 — 에코 dedup 컨텍스트 리셋
+            if (this.sessionId) {
+                this.loadHistory();
+                this._startPresence(); // C4: roster 로드 + heartbeat 시작
+                this._startMessageSubscription(); // C4: 메시지 실시간 방송 구독
+            }
+            else {
+                this._stopPresence();
+                this._stopMessageSubscription();
+            }
+        }
+        // 자동 스크롤
+        const ms = this.renderRoot.querySelector('.messages');
+        if (ms)
+            ms.scrollTop = ms.scrollHeight;
+    }
+    disconnectedCallback() {
+        this._stopPresence();
+        this._stopMessageSubscription();
+        super.disconnectedCallback();
+    }
+    // ── C4 presence/roster ─────────────────────────────────────────────────────
+    _startPresence() {
+        this._stopPresence();
+        this._loadParticipants();
+        this._touchPresence(); // 즉시 1회 — 내 online 즉시 반영
+        this._heartbeatTimer = setInterval(() => {
+            this._touchPresence();
+            this._loadParticipants();
+            this._presenceTick++; // online 판정 재평가(시간 경과)
+        }, PRESENCE_HEARTBEAT_MS);
+    }
+    _stopPresence() {
+        if (this._heartbeatTimer) {
+            clearInterval(this._heartbeatTimer);
+            this._heartbeatTimer = undefined;
+        }
+    }
+    // ── C4 그룹챗 — 메시지 실시간 방송 구독 ─────────────────────────────────────
+    _startMessageSubscription() {
+        this._stopMessageSubscription();
+        if (!this.sessionId)
+            return;
+        try {
+            this._messageSub = client
+                .subscribe({ query: CHAT_MESSAGE_SUBSCRIPTION, variables: { sessionId: this.sessionId } })
+                .subscribe({
+                next: ({ data }) => this._onRemoteMessage(data?.chatMessageActivity),
+                error: () => {
+                    /* 구독 에러는 채팅 본 기능 무영향 — 히스토리 쿼리로 폴백 */
+                }
+            });
+        }
+        catch {
+            /* 구독 미지원 환경 — 조용히 스킵 */
+        }
+    }
+    _stopMessageSubscription() {
+        if (this._messageSub) {
+            try {
+                this._messageSub.unsubscribe();
+            }
+            catch {
+                /* 이미 닫힘 */
+            }
+            this._messageSub = undefined;
+        }
+    }
+    /** 서버 ChatMessage → ChatLine. */
+    _msgToLine(m) {
+        return remoteMessageToLine(m);
+    }
+    /**
+     * 원격(방송) 메시지 수신 — 에코·중복은 id 로 차단, 신규는 transcript 에 append.
+     * 자기 발신 메시지의 id 는 전송 reconcile 에서 이미 _seenMessageIds 에 등록됨.
+     */
+    _onRemoteMessage(m) {
+        const next = receiveRemoteMessage(this.lines, this._seenMessageIds, m);
+        if (!next)
+            return;
+        this._seenMessageIds = next.seen;
+        this.lines = next.lines;
+    }
+    /**
+     * 전송한 optimistic 라인을 서버 id 로 reconcile (index 비의존 — _localId 로 탐색).
+     * 에코가 응답보다 먼저 도착해 이미 append 됐으면 optimistic 중복 라인을 제거한다.
+     */
+    _reconcileSentLine(localId, serverId, patch) {
+        const next = reconcileSentLine(this.lines, this._seenMessageIds, localId, serverId, patch);
+        this._seenMessageIds = next.seen;
+        this.lines = next.lines;
+    }
+    async _loadParticipants() {
+        if (!this.sessionId)
+            return;
+        try {
+            const result = await client.query({
+                query: CHAT_PARTICIPANTS_QUERY,
+                variables: { sessionId: this.sessionId },
+                fetchPolicy: 'network-only'
+            });
+            this.participants = result.data?.chatSessionParticipants ?? [];
+        }
+        catch {
+            /* roster 로드 실패는 채팅 본 기능 무영향 — 조용히 무시 */
+        }
+    }
+    async _touchPresence() {
+        if (!this.sessionId)
+            return;
+        try {
+            await client.mutate({ mutation: TOUCH_PRESENCE_MUTATION, variables: { sessionId: this.sessionId } });
+        }
+        catch {
+            /* heartbeat 실패 무시 */
+        }
+    }
+    /** lastSeenAt 이 TTL 이내면 online. (_presenceTick 의존으로 주기 재평가.) */
+    _isOnline(lastSeenAt) {
+        void this._presenceTick;
+        if (!lastSeenAt)
+            return false;
+        const t = new Date(lastSeenAt).getTime();
+        if (!Number.isFinite(t))
+            return false;
+        const age = Date.now() - t;
+        return age >= 0 ? age <= PRESENCE_TTL_MS : true;
+    }
+    async loadHistory() {
+        if (!this.sessionId)
+            return;
+        try {
+            const result = await client.query({
+                query: CHAT_MESSAGES_QUERY,
+                variables: { sessionId: this.sessionId, limit: 200, offset: 0 },
+                fetchPolicy: 'network-only'
+            });
+            const msgs = result.data?.chatMessages ?? [];
+            /* 서버 이력을 다시 불러오면 화면에 전부 보인다 → 접은 지점 해제(안 하면 화면과 에이전트 문맥이
+             * 어긋난 채 남는다). 전송 후에는 해제하지 않는다 — 접힌 화면이 그대로이므로 계속 숨겨야 한다. */
+            this._truncateAfterId = undefined;
+            this.lines = msgs.map((m) => this._msgToLine(m));
+            // 로드된 메시지 id 를 seen 에 등록 — 이후 방송 에코 dedup 기준.
+            this._seenMessageIds = new Set(msgs.map((m) => m.id).filter(Boolean));
+        }
+        catch (e) {
+            this.errorMessage = `${i18next.t('board-ai.text.failed-to-load-history')}: ${e.message ?? e}`;
+        }
+    }
+    render() {
+        const hasMessages = this.lines.length > 0;
+        return html `
+      ${this.toastMessage
+            ? html `<div class="toast show">${this.toastMessage}</div>`
+            : nothing}
+      ${this.renderSessionTabs()}
+      ${this.renderRoster()}
+      <div class="messages" @click=${this.onBubbleClick}>
+        ${!hasMessages ? this.renderEmpty() : nothing}
+        ${(() => {
+            const myEmail = this._myEmail;
+            return this.lines.map((line, idx) => {
+                const prev = this.lines[idx - 1];
+                const showLabel = line.role === 'assistant' && (!prev || prev.role !== 'assistant');
+                /* 그룹챗: 다른 참여자의 user 메시지는 좌측 + 보낸이 이름 표시(연속 동일 발신자는 1회만).
+                 * 판정은 email 비교. **내 email 을 모를 때는 '남'으로 단정하지 않는다** — 내 발화를 남의 것으로
+                 * 잘못 보여주는 쪽이 더 해롭다(로그인 정보가 아직 안 온 순간 등). 내 email 을 아는 상태에서
+                 * 발신자 email 이 다르거나 비어 있으면 다른 계정으로 본다. */
+                const isOther = line.role === 'user' && !!myEmail && line.senderEmail !== myEmail;
+                const prevSameSender = !!prev && prev.role === 'user' && prev.senderEmail === line.senderEmail;
+                const showSenderLabel = isOther && !prevSameSender;
+                const content = (line.content ?? '').trim();
+                const isMarkdown = line.role !== 'system' && content.length > 0;
+                const showActions = line.role !== 'system' && !line.pending && content.length > 0;
+                return html `
+            ${showLabel
+                    ? html `<div class="msg-label">${i18next.t('board-ai.label.ai')}</div>`
+                    : showSenderLabel
+                        ? html `<div class="msg-label sender">${line.senderName || i18next.t('board-ai.label.participant')}</div>`
+                        : nothing}
+            <div class="msg-wrap ${line.role} ${isOther ? 'other' : ''}">
+              <div
+                class="msg ${line.role} ${isOther ? 'other' : ''} ${line.pending ? 'pending' : ''} ${line.systemOpen
+                    ? 'open'
+                    : ''}">
+                ${line.pending
+                    ? html `<span class="typing-dots"><span></span><span></span><span></span></span>`
+                    : isMarkdown
+                        ? html `<div class="md-body">${unsafeHTML(renderMarkdown(content))}</div>`
+                        : line.role === 'system'
+                            ? html `<span
+                          class="sys-text"
+                          title=${i18next.t('board-ai.text.toggle-system-note', { defaultValue: '눌러서 펼치기' })}
+                          @click=${() => this.toggleSystemNote(idx)}
+                          >${content}</span
+                        >`
+                            : content}
+                ${line.patchId
+                    ? html `
+                      <div class="summary ${this.revertedPatchIds.has(line.patchId) ? 'reverted' : ''}">
+                        <md-icon>check_circle</md-icon>
+                        <span class="summary-text">
+                          ${this.revertedPatchIds.has(line.patchId)
+                        ? i18next.t('board-ai.text.reverted')
+                        : i18next.t('board-ai.text.applied-changes')}
+                        </span>
+                        <button
+                          class="revert-btn"
+                          ?disabled=${this.revertedPatchIds.has(line.patchId)}
+                          @click=${() => line.patchId && this.onRevertClick(line.patchId)}>
+                          ${i18next.t('board-ai.button.revert')}
+                        </button>
+                      </div>
+                    `
+                    : nothing}
+                ${line.followUp
+                    ? html `<div class="followup">${unsafeHTML(renderMarkdown(line.followUp.trim()))}</div>`
+                    : nothing}
+                ${line.proposals && line.proposals.length > 0 ? this.renderProposals(line) : nothing}
+                ${line.groundingWarnings && line.groundingWarnings.length > 0
+                    ? this.renderGroundingWarning(line)
+                    : nothing}
+                ${line.toolUsages && line.toolUsages.length > 0
+                    ? this.renderToolUsages(idx, line)
+                    : nothing}
+              </div>
+              ${showActions ? this.renderMessageActions(idx, line, content) : nothing}
+            </div>
+          `;
+            });
+        })()}
+      </div>
+      ${this.errorMessage
+            ? html `
+            <div class="error">
+              <span class="error-text">${this.errorMessage}</span>
+              ${this.lastFailedInput
+                ? html `
+                    <button class="retry-btn" @click=${this.retryLastSend}>
+                      ${i18next.t('board-ai.button.retry')}
+                    </button>
+                  `
+                : nothing}
+            </div>
+          `
+            : nothing}
+      ${this.renderFoldNotice()}
+      <div class="composer ${hasMessages ? '' : 'no-actions'}">
+        ${hasMessages
+            ? html `
+              <div class="actions-row">
+                <button
+                  class="action"
+                  @click=${() => (this.examplesOpen = !this.examplesOpen)}
+                  title=${i18next.t('board-ai.text.show-examples-tooltip')}>
+                  <md-icon>${this.examplesOpen ? 'close' : 'lightbulb'}</md-icon>
+                  ${this.examplesOpen
+                ? i18next.t('board-ai.button.close')
+                : i18next.t('board-ai.button.examples')}
+                </button>
+              </div>
+              ${this.examplesOpen ? this.renderInlineExamples() : nothing}
+            `
+            : nothing}
+        <div class="input-row">
+          <div class="textarea-wrap">
+            <textarea
+              .value=${this.input}
+              @input=${(e) => this.onTextareaInput(e)}
+              @keydown=${(e) => this.onKeyDown(e)}
+              @blur=${() => {
+            // 포커스를 popup item 으로 옮기는 click 보다 blur 가 먼저 — popup item 의
+            // mousedown.preventDefault() 가 처리하지만 안전망으로 짧은 지연 후 닫기.
+            setTimeout(() => this.closeMentionPopup(), 150);
+        }}
+              ?disabled=${this.busy}
+              rows="1"
+              placeholder=${this.placeholder ?? i18next.t('board-ai.text.input-placeholder')}></textarea>
+            ${this.mentionOpen
+            ? html `
+                  <ox-mention-popup
+                    class="mention-popup"
+                    .results=${this.mentionResults}
+                    .activeIndex=${this.mentionActiveIndex}
+                    .overflow=${this.mentionOverflow}
+                    @mention-active-change=${(e) => {
+                // 마우스 hover — keyboard nav 와 동일하게 select + centerTo
+                const idx = e.detail?.index;
+                if (typeof idx === 'number' && idx >= 0 && idx < this.mentionResults.length) {
+                    this.mentionActiveIndex = idx;
+                    this.previewActiveCandidate();
+                }
+            }}
+                    @mention-select=${(e) => this.applyMention(e.detail.candidate)}></ox-mention-popup>
+                `
+            : nothing}
+          </div>
+          <button
+            ?disabled=${this.busy || !this.input.trim()}
+            @click=${this.send}
+            title=${i18next.t('board-ai.text.send-tooltip')}>
+            ${this.busy
+            ? html `<span class="spinner"></span>`
+            : html `<md-icon>arrow_upward</md-icon>`}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    onKeyDown(e) {
+        // Mention popup 활성 시 — 화살표/Enter/Tab/Esc 가로채서 popup 네비게이션
+        if (this.mentionOpen) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (this.mentionResults.length > 0) {
+                    this.mentionActiveIndex =
+                        (this.mentionActiveIndex + 1) % this.mentionResults.length;
+                    this.previewActiveCandidate();
+                }
+                return;
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                if (this.mentionResults.length > 0) {
+                    this.mentionActiveIndex =
+                        (this.mentionActiveIndex - 1 + this.mentionResults.length) %
+                            this.mentionResults.length;
+                    this.previewActiveCandidate();
+                }
+                return;
+            }
+            if (e.key === 'Enter' || e.key === 'Tab') {
+                if (this.mentionResults.length > 0) {
+                    e.preventDefault();
+                    this.applyMention(this.mentionResults[this.mentionActiveIndex].candidate);
+                    return;
+                }
+                // 매칭 0개면 popup 닫고 일반 동작 fall through
+                this.closeMentionPopup();
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                this.closeMentionPopup();
+                return;
+            }
+        }
+        if (e.key === 'Enter' && !e.shiftKey && !this.busy) {
+            e.preventDefault();
+            this.send();
+        }
+    }
+    /** input 이벤트 — value 즉시 반영 + popup 갱신은 150ms 디바운스 (F-Finder 와 동일).
+     *  big board 에서 매 keystroke filter 비용 절감 + 한국어 IME 조합 중 깜빡임 완화. */
+    onTextareaInput(e) {
+        const ta = e.target;
+        this.input = ta.value;
+        if (this.inputDebounceTimer)
+            clearTimeout(this.inputDebounceTimer);
+        this.inputDebounceTimer = setTimeout(() => {
+            this.refreshMentionPopup(ta);
+        }, 150);
+    }
+    /** 현재 cursor 위치를 보고 mention popup 활성/비활성 + 후보 갱신.
+     *  `#` (컴포넌트) / `@` (카탈로그) / `/` (slash 템플릿) 한 번에 하나만 활성. */
+    refreshMentionPopup(ta) {
+        const cursor = ta.selectionStart ?? ta.value.length;
+        const triggers = ['#', '@', '/'];
+        let chosen = null;
+        for (const t of triggers) {
+            const ctx = extractMentionContext(ta.value, cursor, t);
+            if (!ctx)
+                continue;
+            if (!chosen || ctx.hashPos > chosen.hashPos) {
+                chosen = { ...ctx, trigger: t };
+            }
+        }
+        if (!chosen) {
+            if (this.mentionOpen)
+                this.closeMentionPopup();
+            return;
+        }
+        const wasOpen = this.mentionOpen;
+        const cap = 50;
+        let results;
+        if (chosen.trigger === '#' && this.searchProvider && chosen.query) {
+            // 호스트의 SceneSearchEngine 위임 — F-Finder 와 동일 검색 룰. cap 만 chat 측에서 적용.
+            results = this.searchProvider(chosen.query).slice(0, cap);
+        }
+        else if (chosen.trigger === '@') {
+            // `@` = 도메인 사용자 멘션. host 가 userProvider set 했으면 query → users 비동기 fetch.
+            // userProvider 미설정 / 결과 없음 → 빈 popup (멀티유저 미사용 환경).
+            // async 라 즉시 반환은 빈 결과; await 후 다시 set 하는 패턴.
+            results = this.cachedUserCandidates
+                ? filterMentionCandidates(this.cachedUserCandidates, chosen.query, cap)
+                : [];
+            // 비동기 갱신 — 결과 도착하면 popup 다시 갱신
+            this.refreshUserCandidatesAsync(chosen.query, chosen.hashPos);
+        }
+        else {
+            let all;
+            if (chosen.trigger === '#') {
+                // 빈 query 의 # 또는 searchProvider 미설정 — 로컬 enumeration 으로 전체 후보 표시
+                const liveBoard = this.boardProvider ? this.boardProvider() : this.currentBoard;
+                all = buildMentionCandidates(liveBoard?.components ?? []);
+            }
+            else {
+                // `/` = 카탈로그 + slash 템플릿 통합 (Notion `/` 패턴). 둘 다 "삽입 가능 항목".
+                all = [...this.cachedCatalogCandidates, ...this.cachedSlashCandidates];
+            }
+            results = filterMentionCandidates(all, chosen.query, cap);
+        }
+        // overflow 계산 — 전체 매칭 중 cap 으로 잘려나간 수 (popup 'N more' 표기)
+        // (cap 잘라서 반환하므로, 전체 카운트는 자유 검색 시 알기 어려움.
+        //  엄격한 overflow 추적 대신 results.length === cap 이면 추정 표시)
+        const overflow = results.length === cap ? 0 : 0;
+        this.mentionResults = results;
+        this.mentionOverflow = overflow;
+        this.mentionActiveIndex = 0;
+        this.mentionHashPos = chosen.hashPos;
+        this.mentionTrigger = chosen.trigger;
+        this.mentionOpen = true;
+        // 첫 open 시 — 사용자 selection 스냅샷 (취소 시 원복용)
+        if (!wasOpen && chosen.trigger === '#') {
+            this.originalSelectedRefids = (this.selectedRefids ?? []).slice();
+        }
+        // 매칭된 후보 outline 만 갱신 — 카메라/선택 변경은 commit (Enter/click) 시점에만.
+        this.highlightMatchedCandidates();
+    }
+    /** `@` query 에 대한 userProvider 비동기 호출 — 응답 도착 시 popup 결과 갱신.
+     *  race 방지: token 으로 최신 호출 식별 (늦게 도착한 응답 무시). */
+    async refreshUserCandidatesAsync(query, hashPos) {
+        if (!this.userProvider)
+            return;
+        const token = ++this.userFetchToken;
+        try {
+            const users = await Promise.resolve(this.userProvider(query));
+            if (token !== this.userFetchToken)
+                return; // 더 최신 호출이 있음
+            // popup 이 닫혔거나 trigger / hashPos 가 바뀌면 무시
+            if (!this.mentionOpen || this.mentionTrigger !== '@' || this.mentionHashPos !== hashPos) {
+                return;
+            }
+            this.cachedUserCandidates = buildUserCandidates(users);
+            this.mentionResults = filterMentionCandidates(this.cachedUserCandidates, query, 50);
+            this.mentionActiveIndex = 0;
+        }
+        catch (e) {
+            // 조용히 무시 — 사용자 입력 흐름 방해 X. 디버그 시 console 확인 가능.
+            console.warn('[board-ai-chat] userProvider failed:', e);
+        }
+    }
+    /** popup 후보들 outline highlight — 카메라/선택 변경 없음.
+     *  타이핑 직후 (refreshMentionPopup) 에서 호출 — 사용자가 active 를 명시 이동하지
+     *  않은 상태이므로 임의의 첫 항목을 선택하거나 카메라 이동시키지 않음.
+     *  # trigger 일 때만 활성. */
+    highlightMatchedCandidates() {
+        if (this.mentionTrigger !== '#')
+            return;
+        const allRefids = [];
+        for (const r of this.mentionResults) {
+            if (typeof r.candidate.refid === 'number')
+                allRefids.push(r.candidate.refid);
+        }
+        this.dispatchActions([{ action: 'highlightComponents', refids: allRefids }]);
+    }
+    /** active 후보 live preview — 사용자가 ↑↓ 키 / popup 마우스 hover 로 명시적으로
+     *  active 를 옮긴 시점에 호출. F-Finder 동급 3-action: highlight + select + centerTo.
+     *  centerTo 는 150ms 디바운스 — 빠른 nav 시 카메라 애니메이션 race 방지.
+     *  # trigger 일 때만 활성. */
+    previewActiveCandidate() {
+        if (this.mentionTrigger !== '#')
+            return;
+        const allRefids = [];
+        for (const r of this.mentionResults) {
+            if (typeof r.candidate.refid === 'number')
+                allRefids.push(r.candidate.refid);
+        }
+        const active = this.mentionResults[this.mentionActiveIndex];
+        const activeRefid = active && typeof active.candidate.refid === 'number'
+            ? active.candidate.refid
+            : undefined;
+        const actions = [{ action: 'highlightComponents', refids: allRefids }];
+        if (typeof activeRefid === 'number') {
+            actions.push({ action: 'selectComponents', refids: [activeRefid] });
+        }
+        this.dispatchActions(actions);
+        if (this.centerDebounceTimer)
+            clearTimeout(this.centerDebounceTimer);
+        if (typeof activeRefid === 'number') {
+            this.centerDebounceTimer = setTimeout(() => {
+                this.dispatchActions([
+                    { action: 'centerToComponent', refid: activeRefid, animated: true }
+                ]);
+            }, 150);
+        }
+    }
+    dispatchActions(actions) {
+        this.dispatchEvent(new CustomEvent('board-action-execute', {
+            detail: { actions, sessionId: this.sessionId },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /** popup 닫기. commit=false (취소) 면 # 의 경우:
+     *   - highlight 정리 (highlightComponents [])
+     *   - 원래 selection 으로 원복
+     *  commit=true (확정) 면 현재 preview 상태 유지 + highlight 만 정리. */
+    closeMentionPopup(commit = false) {
+        if (!this.mentionOpen)
+            return;
+        const wasHashTrigger = this.mentionTrigger === '#';
+        this.mentionOpen = false;
+        this.mentionResults = [];
+        this.mentionOverflow = 0;
+        this.mentionActiveIndex = 0;
+        this.mentionHashPos = -1;
+        if (wasHashTrigger) {
+            // popup 닫힘 → highlight 항상 정리 (확정/취소 모두)
+            const cleanupActions = [{ action: 'highlightComponents', refids: [] }];
+            if (!commit) {
+                // 취소 — 원래 selection 으로 원복
+                cleanupActions.push({
+                    action: 'selectComponents',
+                    refids: this.originalSelectedRefids
+                });
+            }
+            this.dispatchActions(cleanupActions);
+        }
+    }
+    /** 후보 1개를 textarea 에 적용 + popup 닫고 cursor 재배치. */
+    applyMention(candidate) {
+        const ta = this.renderRoot.querySelector('textarea');
+        if (!ta || this.mentionHashPos < 0) {
+            this.closeMentionPopup();
+            return;
+        }
+        const cursor = ta.selectionStart ?? ta.value.length;
+        const r = applyMentionSelection(ta.value, cursor, this.mentionHashPos, candidate, this.mentionTrigger);
+        this.input = r.text;
+        // # trigger + refid 보유 후보 — commit 시점에만 select + centerTo (사용자 의도 확정 순간).
+        // 동시에 picks 로 기록: textarea 에는 깨끗한 #label, server 에는 정확한 refid 전달.
+        if (this.mentionTrigger === '#' &&
+            typeof candidate.refid === 'number') {
+            this.pickedMentions.set(candidate.label, candidate.refid);
+            this.dispatchActions([
+                { action: 'selectComponents', refids: [candidate.refid] },
+                { action: 'centerToComponent', refid: candidate.refid, animated: true }
+            ]);
+        }
+        else if (this.mentionTrigger === '@' &&
+            typeof candidate.userId === 'string' &&
+            candidate.userId.length > 0) {
+            // @user 멘션 — userId 박제. 보드 액션은 발사 안 함 (사용자는 컴포넌트 아님).
+            this.pickedUserMentions.set(candidate.label, candidate.userId);
+        }
+        this.closeMentionPopup(true); // commit — preview selection 유지, highlight 만 정리
+        requestAnimationFrame(() => {
+            const ta2 = this.renderRoot.querySelector('textarea');
+            ta2?.focus();
+            ta2?.setSelectionRange(r.cursorPos, r.cursorPos);
+        });
+    }
+    // ── Empty state with onboarding guide ──────────────────────────
+    /** 예시 그룹 — i18n 키. localize mixin 이 언어 변경 시 자동 재렌더. */
+    /**
+     * 화면에 그릴 예시 — 호스트가 준 것이 있으면 그것, 없으면 보드 기본값(i18n 키를 여기서 푼다).
+     *
+     * 두 자리(빈 화면 · 접힌 줄)가 같은 값을 써야 한다. 전에는 둘이 각각 `EXAMPLE_GROUPS` 를 직접
+     * 읽었고, 그러면 호스트 값을 한쪽만 반영하는 상태가 만들어질 수 있었다.
+     */
+    get exampleGroups() {
+        if (this.examples?.length)
+            return this.examples;
+        return OxBoardAIChat_1.EXAMPLE_GROUPS.map(group => ({
+            label: i18next.t(group.labelKey),
+            items: group.itemKeys.map(key => i18next.t(key))
+        }));
+    }
+    static { this.EXAMPLE_GROUPS = [
+        {
+            labelKey: 'board-ai.label.create',
+            itemKeys: [
+                'board-ai.example.create-monitoring-dashboard',
+                'board-ai.example.create-welcome-screen'
+            ]
+        },
+        {
+            labelKey: 'board-ai.label.edit',
+            itemKeys: [
+                'board-ai.example.edit-align-distribute',
+                'board-ai.example.edit-resize-board'
+            ]
+        },
+        {
+            labelKey: 'board-ai.label.style',
+            itemKeys: [
+                'board-ai.example.style-dark-mode',
+                'board-ai.example.style-rounded-shadow'
+            ]
+        }
+    ]; }
+    /** 보드의 세션 탭 — 다중 세션 활성화 시 패널 상단. host 가 sessions 비워두면 표시 X.
+     *  레이블은 session.name 우선, 없으면 fallback "세션 N". */
+    renderSessionTabs() {
+        if (!this.sessions || this.sessions.length === 0)
+            return nothing;
+        return html `
+      <div class="session-tabs" role="tablist">
+        ${this.sessions.map((s, i) => {
+            const isActive = s.id === this.sessionId;
+            const fallback = i18next.t('board-ai.text.session-tab-label', {
+                n: i + 1,
+                defaultValue: `세션 ${i + 1}`
+            });
+            const label = s.name?.trim() || fallback;
+            const tooltip = s.createdAt
+                ? `${label} · ${new Date(s.createdAt).toLocaleString()}`
+                : label;
+            return html `
+            <button
+              class="session-tab ${isActive ? 'active' : ''}"
+              role="tab"
+              aria-selected=${isActive ? 'true' : 'false'}
+              title=${tooltip}
+              @click=${() => this._onSessionTabClick(s.id)}>
+              ${label}
+            </button>
+          `;
+        })}
+        <button
+          class="session-tab-new"
+          title=${i18next.t('board-ai.button.new-chat', {
+            defaultValue: '새 대화'
+        })}
+          @click=${this._onSessionCreateClick}>
+          <md-icon>add</md-icon>
+          <span>${i18next.t('board-ai.button.new-chat', { defaultValue: '새 대화' })}</span>
+        </button>
+      </div>
+    `;
+    }
+    /** C4 roster — 세션 참여자 + online 표시. 참여자 2명 미만이면 숨김(혼자면 의미 없음). */
+    renderRoster() {
+        if (!this.sessionId || this.participants.length < 2)
+            return nothing;
+        const online = this.participants.filter(p => this._isOnline(p.lastSeenAt)).length;
+        return html `
+      <div class="roster" role="group" aria-label="participants">
+        <span class="roster-count" title=${`${online} online / ${this.participants.length} total`}>
+          <md-icon>group</md-icon>${online}/${this.participants.length}
+        </span>
+        ${this.participants.map(p => {
+            const name = p.user?.name || p.user?.id || '?';
+            const on = this._isOnline(p.lastSeenAt);
+            return html `<span
+            class="roster-chip ${on ? 'online' : 'offline'}"
+            title=${`${name} · ${p.role}${on ? ' · online' : ''}`}>
+            <span class="roster-dot"></span>${initials(name)}
+          </span>`;
+        })}
+      </div>
+    `;
+    }
+    _onSessionTabClick(sessionId) {
+        if (sessionId === this.sessionId)
+            return;
+        this.dispatchEvent(new CustomEvent('session-switch', {
+            detail: { sessionId },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    renderEmpty() {
+        return html `
+      <div class="empty">
+        <div class="header">
+          <md-icon class="icon">auto_awesome</md-icon>
+          <div class="title">${this.intro?.title ?? i18next.t('board-ai.text.empty-title')}</div>
+          <div class="subtitle">${this.intro?.subtitle ?? i18next.t('board-ai.text.empty-subtitle')}</div>
+        </div>
+
+        <div class="trigger-row">
+          <div class="trigger-row-label">${i18next.t('board-ai.text.triggers-heading')}</div>
+          <div class="trigger-chips">
+            <button
+              class="trigger-chip"
+              title=${i18next.t('board-ai.text.trigger-component-tooltip')}
+              @click=${() => this.insertTrigger('#')}>
+              <span class="trigger-char">#</span>
+              <span class="trigger-desc">${i18next.t('board-ai.label.trigger-component')}</span>
+            </button>
+            <button
+              class="trigger-chip"
+              title=${i18next.t('board-ai.text.trigger-user-tooltip')}
+              @click=${() => this.insertTrigger('@')}>
+              <span class="trigger-char">@</span>
+              <span class="trigger-desc">${i18next.t('board-ai.label.trigger-user')}</span>
+            </button>
+            <button
+              class="trigger-chip"
+              title=${i18next.t('board-ai.text.trigger-insert-tooltip')}
+              @click=${() => this.insertTrigger('/')}>
+              <span class="trigger-char">/</span>
+              <span class="trigger-desc">${i18next.t('board-ai.label.trigger-insert')}</span>
+            </button>
+          </div>
+        </div>
+
+        ${this.exampleGroups.map(group => html `
+            <div class="group">
+              <div class="group-label">${group.label}</div>
+              ${group.items.map(text => html `
+                  <button class="example" @click=${() => this.useExample(text)}>
+                    ${text}<span class="arrow">→</span>
+                  </button>
+                `)}
+            </div>
+          `)}
+
+        <div class="footer">
+          <span class="badge">${i18next.t('board-ai.label.korean-supported')}</span>
+          <span class="badge">${i18next.t('board-ai.label.multi-command')}</span>
+          <span class="badge">${i18next.t('board-ai.label.review-able')}</span>
+          <br />
+          ${i18next.t('board-ai.text.empty-footer-notice')}
+        </div>
+      </div>
+    `;
+    }
+    /** trigger chip 클릭 — textarea 에 trigger 문자 삽입 + focus + popup 자동 활성. */
+    insertTrigger(trigger) {
+        // 입력 끝에 공백이 없으면 공백 추가 후 trigger — 자연스러운 위치
+        const needsSpace = this.input.length > 0 && !/\s$/.test(this.input);
+        this.input = this.input + (needsSpace ? ' ' : '') + trigger;
+        requestAnimationFrame(() => {
+            const ta = this.renderRoot.querySelector('textarea');
+            if (!ta)
+                return;
+            ta.focus();
+            ta.setSelectionRange(ta.value.length, ta.value.length);
+            // popup refresh — onTextareaInput 이 디바운스 후 호출되지만 직접 호출로 즉각 반영
+            this.refreshMentionPopup(ta);
+        });
+    }
+    /** 예시 클릭 — 입력창에 채우고 포커스 (사용자가 수정 후 전송 가능) */
+    useExample(text) {
+        this.input = text;
+        this.examplesOpen = false;
+        requestAnimationFrame(() => {
+            const ta = this.renderRoot.querySelector('textarea');
+            ta?.focus();
+            ta?.setSelectionRange(text.length, text.length);
+        });
+    }
+    // ── Mini actions ───────────────────────────────────────────────
+    renderInlineExamples() {
+        return html `
+      <div class="inline-examples">
+        ${this.exampleGroups.map(group => html `
+            <div class="ex-row">
+              <span class="ex-label">${group.label}</span>
+              ${group.items.map(t => html `<button class="ex" @click=${() => this.useExample(t)}>${t}</button>`)}
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    // ── Retry (에러 발생 시) ───────────────────────────────────────
+    async retryLastSend() {
+        if (!this.lastFailedInput)
+            return;
+        this.input = this.lastFailedInput;
+        this.errorMessage = undefined;
+        this.lastFailedInput = undefined;
+        await this.send();
+    }
+    // ── Per-message hover action row ───────────────────────────────
+    /**
+     * 메시지별 hover 액션 — 텍스트 chip 으로 명확.
+     *   user      : 액션 row 자체 X (자기 메시지에 시각 노이즈 X — 편집은 input 위 "새 대화" 흐름 또는 마우스 더블클릭)
+     *   assistant : 복사 + 재생성 + (patch 적용된 경우만) 되돌리기
+     *   system    : 없음
+     */
+    renderMessageActions(idx, line, content) {
+        if (line.role !== 'assistant')
+            return nothing;
+        const isCopied = this.copiedIdx === idx;
+        // revert 는 인라인 patch chip (메시지 안) 한 곳에만 — hover 액션에서 제외 (중복 방지).
+        return html `
+      <div class="msg-actions">
+        <button
+          class="msg-action ${isCopied ? 'confirmed' : ''}"
+          title=${isCopied
+            ? i18next.t('board-ai.text.copied')
+            : i18next.t('board-ai.button.copy')}
+          @click=${() => this.copyMessage(idx, content)}>
+          <md-icon>${isCopied ? 'check' : 'content_copy'}</md-icon>
+        </button>
+        <button
+          class="msg-action"
+          ?disabled=${this.busy}
+          title=${i18next.t('board-ai.button.regenerate')}
+          @click=${() => this.regenerateAssistant(idx)}>
+          <md-icon>refresh</md-icon>
+        </button>
+      </div>
+    `;
+    }
+    /**
+     * "대화가 길어졌습니다" 안내 — **사실만** 알리고 결정은 사용자에게 맡긴다.
+     *
+     * 주제가 바뀌었는지 판정하지 않는다: 판정하면 오탐이 생기고, 오탐이 생기면 사용자는 안내 자체를
+     * 무시한다(접지 경고에서 배운 것과 같다). 근거는 "앞부분이 프롬프트에서 접혔다" 는 객관적 사실뿐이다.
+     *
+     * 왜 알려야 하는가: 한 대화에 주제가 여럿 섞이면 (1) 옛 맥락이 새 답을 오염시키고 (2) 요약이
+     * 뭉개지고 (3) 목록의 대화 이름이 거짓말이 된다. 그걸 아는 사람은 사용자뿐이다.
+     */
+    renderFoldNotice() {
+        const folded = this.historyFolded;
+        if (!folded || this.foldNoticeDismissed)
+            return nothing;
+        return html `
+      <div class="fold-notice">
+        <md-icon>unfold_less</md-icon>
+        <span class="fn-text">
+          ${folded.summarized
+            ? i18next.t('board-ai.text.history-folded-summarized', {
+                count: folded.omitted,
+                defaultValue: '대화가 길어져 앞부분 {count}개가 요약으로 접혔습니다. 다른 주제라면 새 대화가 낫습니다.'
+            })
+            : i18next.t('board-ai.text.history-folded', {
+                count: folded.omitted,
+                defaultValue: '대화가 길어져 앞부분 {count}개가 생략되었습니다. 다른 주제라면 새 대화가 낫습니다.'
+            })}
+        </span>
+        <button class="fn-new" @click=${this.startNewFromNotice}>
+          ${i18next.t('board-ai.button.new-chat')}
+        </button>
+        <button class="fn-close" title=${i18next.t('board-ai.button.close')} @click=${() => (this.foldNoticeDismissed = true)}>
+          <md-icon>close</md-icon>
+        </button>
+      </div>
+    `;
+    }
+    /**
+     * 조치 제안 카드 — AI 는 제안까지, **실행은 사용자**.
+     *
+     * 왜 카드인가: 되돌릴 수 없는 현장 명령을 문장 속 링크로 흘리면 실수로 눌린다. 무엇을·왜 하는지
+     * 한 줄로 보이고 실행이 **분명한 한 번의 행동**이어야 한다.
+     * 실행 결과는 호스트가 **대화에 기록**한다 — 누가 무엇을 실행했는지가 협의 이력에 남아야 한다.
+     */
+    renderProposals(line) {
+        const items = line.proposals ?? [];
+        if (items.length === 0)
+            return nothing;
+        return html `
+      <div class="proposals">
+        ${items.map(p => {
+            const key = this.proposalKey(p);
+            const sent = this.sentProposals.has(key);
+            return html `
+            <div class="proposal ${sent ? 'sent' : ''}">
+              <md-icon>bolt</md-icon>
+              <span class="pbody">
+                <span class="plabel">${p.label || p.command}</span>
+                ${p.reason ? html `<span class="preason">${p.reason}</span>` : nothing}
+              </span>
+              <button
+                class="run"
+                ?disabled=${sent}
+                @click=${() => this.executeProposal(p, key)}>
+                ${sent ? i18next.t('board-ai.text.proposal-sent', { defaultValue: '실행 요청됨' })
+                : i18next.t('board-ai.button.run-proposal', { defaultValue: '실행' })}
+              </button>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+    /**
+     * 제안 식별 키 — 같은 조치를 두 번 실행하지 않도록 **효과**(명령·대상·인자)로만 만든다.
+     *
+     * 인자는 **키 순서를 정렬**해 직렬화한다: 같은 인자를 다른 순서로 받았을 뿐인데 키가 달라지면
+     * 한 카드를 실행한 뒤에도 다른 카드가 살아 있어 **같은 명령이 두 번 나간다**(실제로 그랬다).
+     * 설명 문구(label·reason)는 키에 넣지 않는다 — 문구가 달라도 같은 조치다.
+     */
+    proposalKey(p) {
+        const stable = (v) => {
+            if (v === null || typeof v !== 'object')
+                return JSON.stringify(v ?? null);
+            if (Array.isArray(v))
+                return `[${v.map(stable).join(',')}]`;
+            return `{${Object.keys(v)
+                .sort()
+                .map(k => `${JSON.stringify(k)}:${stable(v[k])}`)
+                .join(',')}}`;
+        };
+        try {
+            return `${p?.command ?? ''}|${p?.instanceId ?? ''}|${stable(p?.args)}`;
+        }
+        catch {
+            return `${p?.command ?? ''}|${p?.instanceId ?? ''}`;
+        }
+    }
+    /**
+     * 실행은 호스트가 한다 — 이 컴포넌트는 도메인(트윈 명령 채널)을 모른다.
+     * 확인 대화·명령 전송·결과 기록은 호스트의 몫이고, 여기서는 중복 클릭만 막는다.
+     */
+    executeProposal(p, key) {
+        this.sentProposals = new Set(this.sentProposals).add(key);
+        this.dispatchEvent(new CustomEvent('board-ai-proposal-execute', {
+            detail: { proposal: p, sessionId: this.sessionId },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /**
+     * 접지 경고 — 답이 언급했지만 **근거에 없던** 대상을 알린다.
+     *
+     * 왜 답을 지우지 않는가: 판정은 식별자 대조라 확정이 아니다(예: 사용자가 화면에서 본 이름을
+     * 대화 밖에서 알고 말한 경우). 그래서 답은 그대로 보여주고, 검증되지 않았다는 사실만 붙인다 —
+     * 사용자가 그 대상을 실제 작업의 근거로 삼기 전에 알아야 하는 정보다.
+     */
+    renderGroundingWarning(line) {
+        const ids = line.groundingWarnings ?? [];
+        if (ids.length === 0)
+            return nothing;
+        return html `
+      <div class="grounding-warning" role="note">
+        <md-icon>report</md-icon>
+        <span>
+          ${i18next.t('board-ai.text.ungrounded-mention', {
+            defaultValue: '확인되지 않은 대상을 언급했습니다 — 실제 데이터에 없습니다:'
+        })}
+          <span class="ids">${ids.join(', ')}</span>
+        </span>
+      </div>
+    `;
+    }
+    /**
+     * "AI 가 이런 도구를 사용했습니다" fold-able 박스.
+     *
+     * - 기본 닫힘 (toolUsagesOpen=false). 헤더 클릭 시 toggle.
+     * - 펼쳤을 때 도구 별로 name + arguments + result + read/write 색상 배지.
+     * - 디버그 / 신뢰도 향상용 — 사용자가 "왜 이렇게 답했지" 의문 가질 때 즉시 검증.
+     */
+    renderToolUsages(idx, line) {
+        const usages = line.toolUsages;
+        if (!usages || usages.length === 0)
+            return nothing;
+        const open = !!line.toolUsagesOpen;
+        const readCount = usages.filter(u => u.kind === 'read').length;
+        const writeCount = usages.filter(u => u.kind === 'write').length;
+        const toolsLabel = i18next.t('board-ai.text.tools-used', { defaultValue: '도구 사용' });
+        /* 눈에 걸려야 하는 것을 머리줄에 올린다 — 거절·접힘이 있으면 펼치기 전에 보인다.
+         * (이번 사고들이 전부 그것이었다: 인자 빠진 호출이 거절됐고, 중복 제안이 접혔다.) */
+        const problems = usages.filter(u => u.outcome === 'rejected' || u.outcome === 'error').length;
+        const folded = usages.filter(u => u.outcome === 'folded').length;
+        return html `
+      <div class="tool-usages ${open ? 'open' : ''} ${problems ? 'has-problem' : ''}">
+        <button
+          class="tool-usages-header"
+          aria-expanded=${open}
+          @click=${() => this.toggleToolUsages(idx)}>
+          <md-icon class="tool-usages-icon">${open ? 'expand_less' : 'account_tree'}</md-icon>
+          <span class="tool-usages-summary">
+            <strong>${usages.length}</strong> ${toolsLabel}
+            <span class="tool-usages-counts">
+              · read ${readCount} · write ${writeCount}${problems
+            ? html ` · <span class="tu-flag bad">${i18next.t('board-ai.text.tool-rejected-count', {
+                count: problems,
+                defaultValue: '거절 {count}'
+            })}</span>`
+            : nothing}${folded
+            ? html ` · <span class="tu-flag">${i18next.t('board-ai.text.tool-folded-count', {
+                count: folded,
+                defaultValue: '접힘 {count}'
+            })}</span>`
+            : nothing}
+            </span>
+          </span>
+          <md-icon class="tool-usages-chevron">${open ? 'expand_less' : 'expand_more'}</md-icon>
+        </button>
+        ${open
+            ? html `
+              <ol class="tool-usages-list">
+                ${usages.map((u, i) => this.renderToolStep(idx, u, i, usages[i - 1]))}
+              </ol>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    /** 시스템 기록 펼치기/접기 — 곁줄이 길어도 대화가 가려지지 않게. */
+    toggleSystemNote(idx) {
+        const next = [...this.lines];
+        const line = next[idx];
+        if (!line)
+            return;
+        next[idx] = { ...line, systemOpen: !line.systemOpen };
+        this.lines = next;
+    }
+    /**
+     * 판단 과정의 한 단계 — 턴 구분 · 도구 · 배지 · **한 줄 요약**.
+     *
+     * 원본 JSON 을 처음부터 펼쳐 두면 눈이 흐려져 정작 중요한 것(무엇이 거절됐는지, 무엇이 접혔는지)이
+     * 안 보인다. 한 줄로 줄이고 원본은 항목별로 눌러서 본다.
+     */
+    renderToolStep(lineIdx, u, i, prev) {
+        const outcome = u.outcome ?? 'ok';
+        const openKey = `${lineIdx}:${i}`;
+        const open = this.openToolSteps.has(openKey);
+        /* 턴이 바뀌면 구분선 — "한 턴 안에서 정정했는지, 다음 턴에서 했는지" 가 진단의 절반이다. */
+        const newTurn = typeof u.iter === 'number' && (!prev || prev.iter !== u.iter);
+        return html `
+      ${newTurn
+            ? html `<li class="tu-turn">
+            ${i18next.t('board-ai.text.tool-turn', { n: (u.iter ?? 0) + 1, defaultValue: '{n}번째 판단' })}
+          </li>`
+            : nothing}
+      <li class="tool-usage-item kind-${u.kind} outcome-${outcome}">
+        <div class="tool-usage-head" @click=${() => this.toggleToolStep(openKey)}>
+          <span class="tool-usage-step">${i + 1}.</span>
+          <span class="tool-usage-name">${u.name}</span>
+          <span class="tu-badge ${outcome}">${this.outcomeLabel(outcome)}</span>
+          <span class="tu-line" title=${this.stepSummary(u)}>${this.stepSummary(u)}</span>
+          <md-icon class="tu-more">${open ? 'expand_less' : 'expand_more'}</md-icon>
+        </div>
+        ${open
+            ? html `
+              ${u.arguments && Object.keys(u.arguments).length > 0
+                ? html `<pre class="tool-usage-args">${this.formatJson(u.arguments)}</pre>`
+                : nothing}
+              <pre class="tool-usage-result">${this.formatJson(u.result)}</pre>
+            `
+            : nothing}
+      </li>
+    `;
+    }
+    /** 배지 문구 — 코드가 아니라 사람 말로. */
+    outcomeLabel(outcome) {
+        const map = {
+            ok: ['board-ai.text.outcome-ok', '조회'],
+            rejected: ['board-ai.text.outcome-rejected', '거절'],
+            queued: ['board-ai.text.outcome-queued', '적용 예정'],
+            proposed: ['board-ai.text.outcome-proposed', '제안'],
+            folded: ['board-ai.text.outcome-folded', '중복 접힘'],
+            error: ['board-ai.text.outcome-error', '오류']
+        };
+        const [key, fallback] = map[outcome] ?? map.ok;
+        return i18next.t(key, { defaultValue: fallback });
+    }
+    /**
+     * 결과 한 줄 — 무엇을 얻었는지/왜 막혔는지만. 목록에서 훑어 읽을 수 있어야 한다.
+     * 거절이면 사유를, 조회면 대표적인 개수를, 제안이면 무엇을 제안했는지.
+     */
+    stepSummary(u) {
+        const r = u?.result;
+        if (!r || typeof r !== 'object')
+            return typeof r === 'string' ? r.slice(0, 80) : '';
+        if (u.outcome === 'rejected' || u.outcome === 'error') {
+            return String(r.errorCode || r.error || r.issues?.[0]?.message || '').slice(0, 80);
+        }
+        if (u.outcome === 'proposed' || u.outcome === 'folded') {
+            return [r.command, r.args && Object.keys(r.args).length ? this.formatJson(r.args) : '']
+                .filter(Boolean)
+                .join(' ')
+                .slice(0, 80);
+        }
+        /* 조회 결과 — 배열 길이가 있는 필드를 골라 "무엇이 몇 개" 로 요약한다(전체 덤프 금지). */
+        const counts = Object.keys(r)
+            .filter(k => Array.isArray(r[k]) && r[k].length > 0)
+            .slice(0, 2)
+            .map(k => `${k} ${r[k].length}`);
+        if (counts.length)
+            return counts.join(' · ');
+        const keys = Object.keys(r).slice(0, 4);
+        return keys.map(k => (typeof r[k] === 'object' ? k : `${k} ${r[k]}`)).join(' · ').slice(0, 80);
+    }
+    toggleToolStep(key) {
+        const next = new Set(this.openToolSteps);
+        next.has(key) ? next.delete(key) : next.add(key);
+        this.openToolSteps = next;
+    }
+    toggleToolUsages(idx) {
+        const next = [...this.lines];
+        const line = next[idx];
+        if (!line)
+            return;
+        next[idx] = { ...line, toolUsagesOpen: !line.toolUsagesOpen };
+        this.lines = next;
+    }
+    formatJson(value) {
+        try {
+            return JSON.stringify(value, null, 2);
+        }
+        catch {
+            return String(value);
+        }
+    }
+    // ── Per-message actions ────────────────────────────────────────
+    async copyMessage(idx, content) {
+        try {
+            // 클립보드에는 marker 제거된 깨끗한 텍스트
+            await navigator.clipboard.writeText(stripMentionRefids(content));
+            this.copiedIdx = idx;
+            this.showToast(i18next.t('board-ai.text.copied'));
+            setTimeout(() => {
+                if (this.copiedIdx === idx)
+                    this.copiedIdx = undefined;
+            }, 1500);
+        }
+        catch {
+            // clipboard 권한 없거나 비-secure context — 조용히 무시
+        }
+    }
+    showToast(message) {
+        this.toastMessage = message;
+        setTimeout(() => {
+            if (this.toastMessage === message)
+                this.toastMessage = undefined;
+        }, 1500);
+    }
+    editUserMessage(idx, content) {
+        // textarea 에는 marker 제거된 깨끗한 텍스트 — 사용자가 raw `{refid:N}` 보지 않게.
+        // 다시 send 시 popup pickedMentions 기반으로 marker 재주입.
+        const cleaned = stripMentionRefids(content);
+        /* 남길 마지막 줄의 서버 id — 없으면(아직 영속 안 된 줄뿐) 지정하지 않는다(서버가 전부 유지). */
+        this._truncateAfterId = this.lines
+            .slice(0, idx)
+            .reverse()
+            .find(l => !!l.id)?.id;
+        this.lines = this.lines.slice(0, idx);
+        this.input = cleaned;
+        requestAnimationFrame(() => {
+            const ta = this.renderRoot.querySelector('textarea');
+            ta?.focus();
+            ta?.setSelectionRange(cleaned.length, cleaned.length);
+        });
+    }
+    /**
+     * AI 응답 재생성 — 해당 assistant 메시지 + 이후 제거하고, 직전 user 메시지를 다시 send.
+     */
+    async regenerateAssistant(idx) {
+        if (this.busy)
+            return;
+        // 직전 user 메시지 찾기
+        let userIdx = idx - 1;
+        while (userIdx >= 0 && this.lines[userIdx].role !== 'user')
+            userIdx--;
+        if (userIdx < 0)
+            return;
+        // textarea 에는 marker 제거된 깨끗한 본문. send() 가 본문을 다시 line 으로 push 하는데,
+        // pickedMentions 는 직전 send 에서 비워졌으므로 새 line 에는 marker 없음 — 클릭 시
+        // runtime fallback resolver 가 처리. (영속된 원본 user 메시지의 marker 는 그대로 유지)
+        const userContent = stripMentionRefids(this.lines[userIdx].content);
+        // assistant 메시지 + 이후 제거
+        this.lines = this.lines.slice(0, idx);
+        this.input = userContent;
+        await this.send();
+    }
+    // ── Patch revert ───────────────────────────────────────────────
+    onRevertClick(patchId) {
+        if (this.revertedPatchIds.has(patchId))
+            return;
+        this.revertedPatchIds = new Set([...this.revertedPatchIds, patchId]);
+        // 호스트 (board-modeller-page) 에게 revert 요청 — 호스트가 snapshot 복원 + 서버 mutation 호출
+        this.dispatchEvent(new CustomEvent('board-edit-revert', {
+            detail: { patchId },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    async send() {
+        const text = this.input.trim();
+        if (!text || this.busy)
+            return;
+        // pickedMentions / pickedUserMentions 에서 현재 텍스트에 실제 #/@ token 으로
+        // 등장하는 것만 추출 — 지운 토큰 제외. inline 마커로 content 에 주입.
+        const mentions = [];
+        for (const [token, refid] of this.pickedMentions.entries()) {
+            if (text.includes(`#${token}`))
+                mentions.push({ token, refid });
+        }
+        const userMentions = [];
+        for (const [token, userId] of this.pickedUserMentions.entries()) {
+            if (text.includes(`@${token}`))
+                userMentions.push({ token, userId });
+        }
+        let enrichedContent = injectMentionRefids(text, mentions);
+        enrichedContent = injectMentionUserIds(enrichedContent, userMentions);
+        // optimistic 라인에 임시 핸들 — 방송 에코와의 reconcile 을 index 비의존으로.
+        const userLocalId = `local-${++this._localSeq}-u`;
+        const asstLocalId = `local-${++this._localSeq}-a`;
+        this.lines = [
+            ...this.lines,
+            { role: 'user', content: enrichedContent, _localId: userLocalId, senderEmail: this._myEmail }
+        ];
+        this.input = '';
+        this.busy = true;
+        this.errorMessage = undefined;
+        // 가짜 pending 응답 표시 (UX 부드럽게)
+        this.lines = [...this.lines, { role: 'assistant', content: '', pending: true, _localId: asstLocalId }];
+        try {
+            // LLM 으로 보낼 history — user/assistant 만 (system 은 백엔드가 자동 합류).
+            // pending placeholder 와 system 은 제외 (index 비의존 — 방송 append 와 무관).
+            const history = this.lines
+                .filter(l => !l.pending && l._localId !== asstLocalId && l.role !== 'system')
+                .map(l => ({ role: l.role, content: l.content }));
+            // 라이브 보드 우선 — 호스트의 캔버스가 사용자 수작업 편집을 들고 있을 수 있음.
+            // boardProvider 가 있으면 send 시점에 그것을 pull, 없으면 정적 currentBoard.
+            const liveBoard = this.boardProvider ? this.boardProvider() : this.currentBoard;
+            // mentions 는 위에서 이미 계산해 user line 에 thread — 그대로 mutation 입력으로 재사용.
+            const result = await client.mutate({
+                mutation: BOARD_AI_CHAT_MUTATION,
+                variables: {
+                    input: buildChatMutationInput({
+                        sessionId: this.sessionId,
+                        history,
+                        liveBoard,
+                        scopes: this.scopes,
+                        truncateAfterMessageId: this._truncateAfterId,
+                        hostContext: this.hostContext,
+                        toolCategories: this.toolCategories,
+                        boardTools: this.boardTools,
+                        requireGroundingTools: this.requireGroundingTools,
+                        knownTypes: this.knownTypes,
+                        categories: this.categories,
+                        componentSchemas: this.componentSchemas,
+                        selectedRefids: this.selectedRefids ?? [],
+                        mentions
+                    })
+                }
+            });
+            const out = result.data?.boardAIChat;
+            if (!out)
+                throw new Error(i18next.t('board-ai.text.empty-response'));
+            /* 대화가 길어졌다는 서버 보고 — 닫지 않았다면 안내를 띄운다. */
+            this.historyFolded = out.historyFolded ?? undefined;
+            // 전송 성공 — picks 정리 (다음 메시지부터는 새 picks 만)
+            this.pickedMentions.clear();
+            this.pickedUserMentions.clear();
+            // optimistic 라인을 서버 id 로 reconcile (방송 에코와 중복 방지, index 비의존).
+            // 사용자 라인: enrich 된 본문 유지, id 만 부여. AI 라인: pending → 실제 응답.
+            this._reconcileSentLine(userLocalId, out.userMessageId, {});
+            this._reconcileSentLine(asstLocalId, out.assistantMessageId, {
+                role: 'assistant',
+                content: out.reply,
+                patchSummary: out.patch?.summary,
+                followUp: out.followUp || undefined,
+                patchId: out.patchId || undefined,
+                toolUsages: Array.isArray(out.toolUsages) ? out.toolUsages : undefined,
+                groundingWarnings: Array.isArray(out.groundingWarnings) ? out.groundingWarnings : undefined,
+                proposals: Array.isArray(out.proposals) ? out.proposals : undefined,
+                pending: false
+            });
+            // 호스트로 patch 이벤트 전파
+            if (out.patch) {
+                this.dispatchEvent(new CustomEvent('board-edit-patch', {
+                    detail: {
+                        patch: out.patch,
+                        summary: out.patch.summary,
+                        confidence: out.patch.confidence,
+                        patchId: out.patchId,
+                        sessionId: out.sessionId
+                    },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+            // 호스트로 ephemeral scene 조작 actions 전파 (selection / view / mode)
+            if (Array.isArray(out.actions) && out.actions.length > 0) {
+                this.dispatchEvent(new CustomEvent('board-action-execute', {
+                    detail: { actions: out.actions, sessionId: out.sessionId },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+            if (out.followUp) {
+                this.dispatchEvent(new CustomEvent('chat-followup', {
+                    detail: { question: out.followUp },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+        }
+        catch (e) {
+            // pending(AI) placeholder 만 제거 — 사용자 라인은 보존(재시도). index 비의존.
+            this.lines = this.lines.filter(l => l._localId !== asstLocalId);
+            this.errorMessage = e?.message ?? String(e);
+            this.lastFailedInput = text;
+        }
+        finally {
+            this.busy = false;
+        }
+    }
+};
+__decorate([
+    property({ type: String, attribute: 'session-id' }),
+    __metadata("design:type", String)
+], OxBoardAIChat.prototype, "sessionId", void 0);
+__decorate([
+    property({ type: Array, attribute: false }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "sessions", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "currentBoard", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], OxBoardAIChat.prototype, "boardProvider", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], OxBoardAIChat.prototype, "searchProvider", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], OxBoardAIChat.prototype, "userProvider", void 0);
+__decorate([
+    property({ type: Array, attribute: false }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "selectedRefids", void 0);
+__decorate([
+    property({ type: Array, attribute: false }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "toolCategories", void 0);
+__decorate([
+    property({ type: Object, attribute: false }),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "hostContext", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'board-tools' }),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "boardTools", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'require-grounding-tools' }),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "requireGroundingTools", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "scopes", void 0);
+__decorate([
+    property({ type: Array, attribute: 'known-types' }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "knownTypes", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "categories", void 0);
+__decorate([
+    property({ type: Array, attribute: false }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "componentSchemas", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "placeholder", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "lines", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "input", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", String)
+], OxBoardAIChat.prototype, "autoAsk", void 0);
+__decorate([
+    property({ type: Object, attribute: false }),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "intro", void 0);
+__decorate([
+    property({ type: Array, attribute: false }),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "examples", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], OxBoardAIChat.prototype, "lastFailedInput", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "revertedPatchIds", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "examplesOpen", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], OxBoardAIChat.prototype, "toastMessage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], OxBoardAIChat.prototype, "copiedIdx", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "openToolSteps", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "sentProposals", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "historyFolded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "foldNoticeDismissed", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "busy", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], OxBoardAIChat.prototype, "errorMessage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "participants", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "_presenceTick", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "mentionOpen", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], OxBoardAIChat.prototype, "mentionResults", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "mentionActiveIndex", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "mentionOverflow", void 0);
+OxBoardAIChat = OxBoardAIChat_1 = __decorate([
+    customElement('ox-board-ai-chat')
+], OxBoardAIChat);
+export { OxBoardAIChat };
+//# sourceMappingURL=board-ai-chat.js.map