@things-factory/board-ai 10.0.0-beta.64

package/client/components/board-ai-chat.ts

@@ -0,0 +1,1502 @@
+/**
+ * <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 { i18next, localize } from '@operato/i18n'
+import { ScrollbarStyles } from '@operato/styles'
+import gql from 'graphql-tag'
+
+import { renderMarkdown } from './markdown.js'
+import { buildChatMutationInput } from './chat-input-builder.js'
+
+interface ChatLine {
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  patchSummary?: string
+  followUp?: string
+  patchId?: string
+  pending?: boolean
+  /** AI 가 응답을 만드는 동안 호출한 도구 trace — fold-able 박스에서 노출. */
+  toolUsages?: Array<{ name: string; arguments: any; result: any; kind: 'read' | 'write' | 'unknown' }>
+  /** UI 상태: tool usage 박스 펼침 여부 (assistant 메시지마다 독립). */
+  toolUsagesOpen?: boolean
+}
+
+const BOARD_AI_CHAT_MUTATION = gql`
+  mutation BoardAIChat($input: BoardAIChatInput!) {
+    boardAIChat(input: $input) {
+      reply
+      patch
+      followUp
+      clientId
+      sessionId
+      userMessageId
+      assistantMessageId
+      patchId
+      toolUsages
+    }
+  }
+`
+
+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
+      createdAt
+    }
+  }
+`
+
+@customElement('ox-board-ai-chat')
+export class OxBoardAIChat extends LitElement {
+  /** 영속 세션 id. 없으면 ad-hoc (메시지 영속 안 됨). */
+  @property({ type: String, attribute: 'session-id' })
+  sessionId?: string
+
+  /**
+   * 현재 BoardModel — chat() 입력으로 그대로 전달.
+   *
+   * 주의: 호스트가 라이브 편집 가능한 캔버스(things-scene)를 갖고 있다면, 캔버스 안에서
+   * 일어나는 수작업 편집이 이 property 에는 자동 반영되지 않는다. 이 경우 `boardProvider`
+   * 콜백을 같이 넘기면 send() 시점에 라이브 보드를 pull 한다.
+   */
+  @property({ type: Object })
+  currentBoard?: any
+
+  /**
+   * 라이브 보드 모델 공급자 (선택).
+   *
+   * 호스트가 things-scene 같은 캔버스를 사용 중이면 사용자가 캔버스에서 수작업 편집한
+   * 내용은 `currentBoard` property 에 자동 반영되지 않는다. 이 콜백을 등록하면 `send()`
+   * 직전에 호출해 가장 최신 보드를 pull → AI 가 항상 라이브 상태를 본다.
+   *
+   * 우선순위: boardProvider() ?? currentBoard.
+   */
+  @property({ attribute: false })
+  boardProvider?: () => any
+
+  /**
+   * 모델러에서 현재 선택된 컴포넌트의 `refid` 목록.
+   *
+   * refid 는 things-scene 이 모든 컴포넌트에 자동 발급하는 universal numeric handle.
+   * 호스트가 매 render 마다 `.selectedRefids=${...}` 로 갱신. AI 한테 selection 정보로
+   * 그대로 전달되어 "선택한" / "selected" / "this" 류 지시어 해석에 사용.
+   */
+  @property({ type: Array, attribute: false })
+  selectedRefids: number[] = []
+
+  /** board-import registry scopes. */
+  @property({ type: Array })
+  scopes?: string[]
+
+  @property({ type: Array, attribute: 'known-types' })
+  knownTypes?: string[]
+
+  @property({ type: Array })
+  categories?: string[]
+
+  /**
+   * 컴포넌트 type 별 유효 속성 스킴.
+   * 형태: [{ type, description?, group?, properties? }]
+   * LLM 이 정확한 컴포넌트를 만들도록 mutation input 으로 forwarding.
+   */
+  @property({ type: Array, attribute: false })
+  componentSchemas?: Array<{ type: string; description?: string; group?: string; properties?: Record<string, any> }>
+
+  @property({ type: String })
+  placeholder = '자연어로 명령하세요 (Shift+Enter 줄바꿈, Enter 전송)'
+
+  @state()
+  private lines: ChatLine[] = []
+
+  @state()
+  private input = ''
+
+  /** 마지막 send 실패 시 보존 — 다시 시도 버튼 클릭 시 사용 */
+  @state()
+  private lastFailedInput?: string
+
+  /** 되돌려진 patch id 들 — 한 번 revert 한 patch 는 버튼 비활성 */
+  @state()
+  private revertedPatchIds = new Set<string>()
+
+  /** mini action — 인라인 예시 토글 */
+  @state()
+  private examplesOpen = false
+
+  /** 복사 toast 표시 상태 */
+  @state()
+  private toastMessage?: string
+
+  /** 복사 confirmation feedback (메시지 idx → 짧은 시간 동안 ✓ 표시) */
+  @state()
+  private copiedIdx?: number
+
+  @state()
+  private busy = false
+
+  @state()
+  private errorMessage?: string
+
+  static 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);
+    }
+
+    /* ── Messages ─────────────────────────────────────── */
+    /* 스크롤바는 ScrollbarStyles (위쪽 styles 배열) 가 처리 — 어플리케이션 표준 따름 */
+    .messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px 20px 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      scroll-behavior: smooth;
+    }
+
+    /* ── Empty state — onboarding 가이드 ───────────────── */
+    .empty {
+      margin: auto;
+      text-align: left;
+      padding: 24px 16px;
+      width: 100%;
+      max-width: 360px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .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;
+      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);
+    }
+
+    /* ── 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: 10px 0 3px 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(78%, 480px);
+      margin: 2px 0;
+    }
+    .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: 6px 10px;
+      border-radius: 12px;
+      white-space: normal;
+      overflow-wrap: anywhere;
+      font-size: 11px;
+      line-height: 1.55;
+    }
+
+    .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: 6px;
+    }
+
+    .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 6px;
+      line-height: 1.55;
+    }
+    .md-body ul,
+    .md-body ol {
+      margin: 4px 0 6px;
+      padding-left: 18px;
+    }
+    .md-body li {
+      margin: 1px 0;
+      line-height: 1.5;
+    }
+    .md-body li > p {
+      margin: 0;
+    }
+    .md-body strong {
+      font-weight: 600;
+    }
+    .md-body em {
+      font-style: italic;
+    }
+    .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: 6px 0 3px;
+      font-weight: 600;
+      line-height: 1.4;
+    }
+    .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: 3px 8px;
+      margin: 3px 0;
+      border: 0;
+    }
+
+    .msg.pending {
+      opacity: 0.5;
+    }
+    .msg.pending::after {
+      content: '';
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      margin-left: 6px;
+      border-radius: 50%;
+      background: currentColor;
+      opacity: 0.4;
+      animation: pulse 1.2s ease-in-out infinite;
+    }
+    @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: 6px;
+      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: 6px;
+      line-height: 1.5;
+    }
+
+    /* ── Tool usages fold-able 박스 — AI 도구 호출 trace ───── */
+    .tool-usages {
+      margin-top: 6px;
+      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-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: 10px 16px 6px;
+      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: 10px;
+      padding: 6px 16px 14px;
+      background: transparent;
+      align-items: flex-end;
+    }
+    /* 메시지 시작 전 — actions-row 가 없을 때는 input-row 가 직접 border-top */
+    .composer.no-actions .input-row {
+      padding-top: 14px;
+    }
+
+    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()
+    if (this.sessionId) {
+      this.loadHistory()
+    }
+  }
+
+  updated(changed: Map<string, any>) {
+    if (changed.has('sessionId') && this.sessionId && !changed.get('sessionId')) {
+      this.loadHistory()
+    }
+    // 자동 스크롤
+    const ms = this.renderRoot.querySelector('.messages') as HTMLElement | null
+    if (ms) ms.scrollTop = ms.scrollHeight
+  }
+
+  private 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.lines = msgs.map((m: any) => ({
+        role: m.role,
+        content: m.content,
+        patchId: m.relatedPatchId ?? undefined,
+        toolUsages: Array.isArray(m.toolUsagesJson) ? m.toolUsagesJson : undefined
+      }))
+    } catch (e: any) {
+      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}
+      <div class="messages">
+        ${!hasMessages ? this.renderEmpty() : nothing}
+        ${this.lines.map((line, idx) => {
+          const prev = this.lines[idx - 1]
+          const showLabel = line.role === 'assistant' && (!prev || prev.role !== 'assistant')
+          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>`
+              : nothing}
+            <div class="msg-wrap ${line.role}">
+              <div class="msg ${line.role} ${line.pending ? 'pending' : ''}">
+                ${isMarkdown
+                  ? html`<div class="md-body">${unsafeHTML(renderMarkdown(content))}</div>`
+                  : 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.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}
+      <div class="composer ${hasMessages ? '' : 'no-actions'}">
+        ${hasMessages
+          ? html`
+              <div class="actions-row">
+                <button
+                  class="action"
+                  @click=${this.clearChat}
+                  title=${i18next.t('board-ai.text.clear-chat-tooltip')}>
+                  <md-icon>refresh</md-icon>
+                  ${i18next.t('board-ai.button.new-conversation')}
+                </button>
+                <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">
+          <textarea
+            .value=${this.input}
+            @input=${(e: any) => (this.input = e.target.value)}
+            @keydown=${this.onKeyDown}
+            ?disabled=${this.busy}
+            rows="1"
+            placeholder=${this.placeholder ?? i18next.t('board-ai.text.input-placeholder')}></textarea>
+          <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>
+    `
+  }
+
+  private onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && !e.shiftKey && !this.busy) {
+      e.preventDefault()
+      this.send()
+    }
+  }
+
+  // ── Empty state with onboarding guide ──────────────────────────
+
+  /** 예시 그룹 — i18n 키. localize mixin 이 언어 변경 시 자동 재렌더. */
+  private static readonly EXAMPLE_GROUPS: Array<{
+    labelKey: string
+    itemKeys: string[]
+  }> = [
+    {
+      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'
+      ]
+    }
+  ]
+
+  private 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>
+
+        ${OxBoardAIChat.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>
+    `
+  }
+
+  /** 예시 클릭 — 입력창에 채우고 포커스 (사용자가 수정 후 전송 가능) */
+  private useExample(text: string) {
+    this.input = text
+    this.examplesOpen = false
+    requestAnimationFrame(() => {
+      const ta = this.renderRoot.querySelector('textarea') as HTMLTextAreaElement | null
+      ta?.focus()
+      ta?.setSelectionRange(text.length, text.length)
+    })
+  }
+
+  // ── Mini actions ───────────────────────────────────────────────
+
+  /** "새 대화" — UI 의 메시지 라인 비움 (서버 ChatSession 이력은 그대로 보존) */
+  private clearChat() {
+    this.lines = []
+    this.input = ''
+    this.errorMessage = undefined
+    this.lastFailedInput = undefined
+    this.examplesOpen = false
+    this.revertedPatchIds = new Set()
+  }
+
+  private renderInlineExamples() {
+    return html`
+      <div class="inline-examples">
+        ${OxBoardAIChat.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 (에러 발생 시) ───────────────────────────────────────
+
+  private 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    : 없음
+   */
+  private renderMessageActions(idx: number, line: ChatLine, content: string) {
+    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>
+    `
+  }
+
+  /**
+   * "AI 가 이런 도구를 사용했습니다" fold-able 박스.
+   *
+   * - 기본 닫힘 (toolUsagesOpen=false). 헤더 클릭 시 toggle.
+   * - 펼쳤을 때 도구 별로 name + arguments + result + read/write 색상 배지.
+   * - 디버그 / 신뢰도 향상용 — 사용자가 "왜 이렇게 답했지" 의문 가질 때 즉시 검증.
+   */
+  private renderToolUsages(idx: number, line: ChatLine) {
+    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: '도구 사용' })
+    return html`
+      <div class="tool-usages ${open ? 'open' : ''}">
+        <button
+          class="tool-usages-header"
+          aria-expanded=${open}
+          @click=${() => this.toggleToolUsages(idx)}>
+          <md-icon class="tool-usages-icon">${open ? 'expand_less' : 'build'}</md-icon>
+          <span class="tool-usages-summary">
+            <strong>${usages.length}</strong> ${toolsLabel}
+            <span class="tool-usages-counts">· read ${readCount} · write ${writeCount}</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) => html`
+                    <li class="tool-usage-item kind-${u.kind}">
+                      <div class="tool-usage-head">
+                        <span class="tool-usage-step">${i + 1}.</span>
+                        <span class="tool-usage-name">${u.name}</span>
+                        <span class="tool-usage-kind kind-${u.kind}">${u.kind}</span>
+                      </div>
+                      ${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>
+                    </li>
+                  `
+                )}
+              </ol>
+            `
+          : nothing}
+      </div>
+    `
+  }
+
+  private toggleToolUsages(idx: number) {
+    const next = [...this.lines]
+    const line = next[idx]
+    if (!line) return
+    next[idx] = { ...line, toolUsagesOpen: !line.toolUsagesOpen }
+    this.lines = next
+  }
+
+  private formatJson(value: any): string {
+    try {
+      return JSON.stringify(value, null, 2)
+    } catch {
+      return String(value)
+    }
+  }
+
+  // ── Per-message actions ────────────────────────────────────────
+
+  private async copyMessage(idx: number, content: string) {
+    try {
+      await navigator.clipboard.writeText(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 — 조용히 무시
+    }
+  }
+
+  private showToast(message: string) {
+    this.toastMessage = message
+    setTimeout(() => {
+      if (this.toastMessage === message) this.toastMessage = undefined
+    }, 1500)
+  }
+
+  /**
+   * 사용자 메시지 편집 — 해당 메시지 + 이후 모두 UI 에서 제거하고 입력창에 채움.
+   * 서버 영속 history 는 그대로 유지 (다음 send 시 새 메시지로 추가).
+   */
+  private editUserMessage(idx: number, content: string) {
+    this.lines = this.lines.slice(0, idx)
+    this.input = content
+    requestAnimationFrame(() => {
+      const ta = this.renderRoot.querySelector('textarea') as HTMLTextAreaElement | null
+      ta?.focus()
+      ta?.setSelectionRange(content.length, content.length)
+    })
+  }
+
+  /**
+   * AI 응답 재생성 — 해당 assistant 메시지 + 이후 제거하고, 직전 user 메시지를 다시 send.
+   */
+  private async regenerateAssistant(idx: number) {
+    if (this.busy) return
+    // 직전 user 메시지 찾기
+    let userIdx = idx - 1
+    while (userIdx >= 0 && this.lines[userIdx].role !== 'user') userIdx--
+    if (userIdx < 0) return
+    const userContent = this.lines[userIdx].content
+    // assistant 메시지 + 이후 제거
+    this.lines = this.lines.slice(0, idx)
+    this.input = userContent
+    await this.send()
+  }
+
+  // ── Patch revert ───────────────────────────────────────────────
+
+  private onRevertClick(patchId: string) {
+    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
+      })
+    )
+  }
+
+  private async send() {
+    const text = this.input.trim()
+    if (!text || this.busy) return
+
+    this.lines = [...this.lines, { role: 'user', content: text }]
+    this.input = ''
+    this.busy = true
+    this.errorMessage = undefined
+
+    // 가짜 pending 응답 표시 (UX 부드럽게)
+    const pendingIdx = this.lines.length
+    this.lines = [...this.lines, { role: 'assistant', content: '', pending: true }]
+
+    try {
+      // LLM 으로 보낼 history — user/assistant 만 (system 은 백엔드가 자동 합류)
+      const history = this.lines
+        .slice(0, pendingIdx) // pending 제외
+        .filter(l => l.role !== 'system')
+        .map(l => ({ role: l.role, content: l.content }))
+
+      // 라이브 보드 우선 — 호스트의 캔버스가 사용자 수작업 편집을 들고 있을 수 있음.
+      // boardProvider 가 있으면 send 시점에 그것을 pull, 없으면 정적 currentBoard.
+      const liveBoard = this.boardProvider ? this.boardProvider() : this.currentBoard
+
+      const result = await client.mutate({
+        mutation: BOARD_AI_CHAT_MUTATION,
+        variables: {
+          input: buildChatMutationInput({
+            sessionId: this.sessionId,
+            history,
+            liveBoard,
+            scopes: this.scopes,
+            knownTypes: this.knownTypes,
+            categories: this.categories,
+            componentSchemas: this.componentSchemas,
+            selectedRefids: this.selectedRefids ?? []
+          })
+        }
+      })
+
+      const out = result.data?.boardAIChat
+      if (!out) throw new Error(i18next.t('board-ai.text.empty-response'))
+
+      // pending 자리에 실제 응답
+      const replaced = [...this.lines]
+      replaced[pendingIdx] = {
+        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
+      }
+      this.lines = replaced
+
+      // 호스트로 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
+          })
+        )
+      }
+      if (out.followUp) {
+        this.dispatchEvent(
+          new CustomEvent('chat-followup', {
+            detail: { question: out.followUp },
+            bubbles: true,
+            composed: true
+          })
+        )
+      }
+    } catch (e: any) {
+      // pending 메시지 제거 + 에러 표시 + 마지막 입력 보존 (다시 시도용)
+      this.lines = this.lines.slice(0, pendingIdx)
+      this.errorMessage = e?.message ?? String(e)
+      this.lastFailedInput = text
+    } finally {
+      this.busy = false
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ox-board-ai-chat': OxBoardAIChat
+  }
+}