@things-factory/board-ai 10.1.4 → 10.1.6

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

@@ -1,3008 +0,0 @@
-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';
-import { DEFAULT_CATALOG_ENTRIES } from './default-catalog-entries.js';
-import { DEFAULT_SLASH_TEMPLATES } from './default-slash-templates.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(DEFAULT_CATALOG_ENTRIES);
-        /** Default slash template 후보 캐시 — chat panel mount 시 1회 빌드 */
-        this.cachedSlashCandidates = buildSlashCandidates(DEFAULT_SLASH_TEMPLATES);
-        /** `@` 마지막 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 이 언어 변경 시 자동 재렌더. */
-    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">${i18next.t('board-ai.text.empty-title')}</div>
-          <div class="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>
-
-        ${OxBoardAIChat_1.EXAMPLE_GROUPS.map(group => html `
-            <div class="group">
-              <div class="group-label">${i18next.t(group.labelKey)}</div>
-              ${group.itemKeys.map(key => {
-            const text = i18next.t(key);
-            return 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">
-        ${OxBoardAIChat_1.EXAMPLE_GROUPS.map(group => html `
-            <div class="ex-row">
-              <span class="ex-label">${i18next.t(group.labelKey)}</span>
-              ${group.itemKeys.map(key => {
-            const t = i18next.t(key);
-            return 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([
-    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