@things-factory/ai-assistant 10.1.13 → 10.1.16

package/client/components/{board-ai-chat.ts → assistant-chat.ts}

@@ -1,5 +1,5 @@
 /**
- * <ox-board-ai-chat> — AI 주도 보드 모델링 채팅 컴포넌트 (Lit).
+ * <ox-assistant-chat> — AI 도우미 채팅 컴포넌트 (Lit).
  *
  * 입력:
  *   - sessionId: 영속 ChatSession 식별자 (없으면 ad-hoc 모드, 메시지 영속 안 됨)
@@ -106,6 +106,29 @@ interface ChatLine {
    * 있으면 그 대상은 만들어 낸 것일 수 있다는 주의를 답 아래에 표시한다(답 자체는 그대로 보여준다).
    */
   groundingWarnings?: string[]
+  attachments?: Array<{
+    name: string
+    size: number
+    type: string
+    url?: string
+    base64?: string
+  }>
+}
+
+export interface ChatAttachment {
+  id: string
+  file: File
+  name: string
+  size: number
+  type: string
+  url: string
+  base64?: string
+}
+
+function formatFileSize(bytes: number): string {
+  if (!bytes || bytes < 1024) return `${bytes || 0} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }
 
 const BOARD_AI_CHAT_MUTATION = gql`
@@ -222,8 +245,8 @@ function initials(name: string): string {
   return /[a-zA-Z]/.test(n) ? n.slice(0, 2).toUpperCase() : n.slice(0, 1)
 }
 
-@customElement('ox-board-ai-chat')
-export class OxBoardAIChat extends LitElement {
+@customElement('ox-assistant-chat')
+export class OxAssistantChat extends LitElement {
   /** 영속 세션 id. 없으면 ad-hoc (메시지 영속 안 됨). */
   @property({ type: String, attribute: 'session-id' })
   sessionId?: string
@@ -431,6 +454,102 @@ export class OxBoardAIChat extends LitElement {
   @state()
   private revertedPatchIds = new Set<string>()
 
+  /** 첨부된 파일/이미지 목록 */
+  @state()
+  private attachments: ChatAttachment[] = []
+
+  /** 드래그 오버 상태 (시각 피드백용) */
+  @state()
+  private dragOver = false
+
+  private async onAttachFiles(files: FileList | File[] | null | undefined) {
+    if (!files || files.length === 0) return
+    const list = Array.from(files)
+    const newAttachments: ChatAttachment[] = []
+
+    for (const file of list) {
+      const id = 'att-' + Math.random().toString(36).substring(2, 9)
+      const url = URL.createObjectURL(file)
+      let base64: string | undefined
+      try {
+        base64 = await this.readFileAsBase64(file)
+      } catch (err) {
+        console.warn('Failed to read file as base64', err)
+      }
+      newAttachments.push({
+        id,
+        file,
+        name: file.name,
+        size: file.size,
+        type: file.type || 'application/octet-stream',
+        url,
+        base64
+      })
+    }
+
+    this.attachments = [...this.attachments, ...newAttachments]
+  }
+
+  private readFileAsBase64(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => resolve(reader.result as string)
+      reader.onerror = reject
+      reader.readAsDataURL(file)
+    })
+  }
+
+  private removeAttachment(id: string) {
+    const target = this.attachments.find(a => a.id === id)
+    if (target?.url) {
+      URL.revokeObjectURL(target.url)
+    }
+    this.attachments = this.attachments.filter(a => a.id !== id)
+  }
+
+  private onComposerPaste(e: ClipboardEvent) {
+    const items = e.clipboardData?.items
+    if (!items || items.length === 0) return
+
+    const files: File[] = []
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i]
+      if (item.kind === 'file') {
+        const file = item.getAsFile()
+        if (file) files.push(file)
+      }
+    }
+
+    if (files.length > 0) {
+      this.onAttachFiles(files)
+    }
+  }
+
+  private onComposerDragOver(e: DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    if (!this.dragOver) this.dragOver = true
+  }
+
+  private onComposerDragLeave(e: DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    const currentTarget = e.currentTarget as HTMLElement
+    const relatedTarget = e.relatedTarget as Node | null
+    if (!currentTarget.contains(relatedTarget)) {
+      this.dragOver = false
+    }
+  }
+
+  private onComposerDrop(e: DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.dragOver = false
+    if (e.dataTransfer?.files?.length) {
+      this.onAttachFiles(e.dataTransfer.files)
+    }
+  }
+
   /** mini action — 인라인 예시 토글 */
   @state()
   private examplesOpen = false
@@ -451,6 +570,44 @@ export class OxBoardAIChat extends LitElement {
   @state()
   private sentProposals = new Set<string>()
 
+  /** Proposal keys the host has reported staged. Only the host knows; see `acknowledgeProposalStaged`. */
+  @state()
+  private stagedProposals = new Set<string>()
+
+  /**
+   * The host reports that it put this candidate somewhere the person can look at it.
+   *
+   * Staging happens outside this component — a dock catches `assistant-proposal-preview`, hands
+   * the candidate to a viewer, and only that host knows whether it worked, or whether it has a
+   * viewer at all. So the card says nothing until the host calls this, and it then says it in the
+   * words the host registered (`chatDefaults.stagedNoticeKey`).
+   *
+   * Safe to call for a candidate the card never showed; the key simply never matches.
+   */
+  acknowledgeProposalStaged(proposal: any): void {
+    /*
+      Silence has two meanings and they are not the same defect. A host that never calls this is
+      telling us it does not know, and drawing nothing is right. A host that calls it without
+      registering `stagedNoticeKey` meant to say something and left out the words -- staying quiet
+      about that reads to whoever wired it as "the badge just doesn't appear here".
+
+      The screen still shows nothing either way. There is no sentence to show, and inventing one is
+      what this whole correction removed.
+    */
+    if (!chatDefaults.stagedNoticeKey && !OxAssistantChat.warnedMissingStagedNotice) {
+      OxAssistantChat.warnedMissingStagedNotice = true
+      console.warn(
+        '[assistant-chat] a host reported a proposal staged but registered no `stagedNoticeKey`, ' +
+          'so the card can say nothing. Pass one to `registerChatDefaults` from the host.'
+      )
+    }
+
+    this.stagedProposals = new Set(this.stagedProposals).add(this.proposalKey(proposal))
+  }
+
+  /** Once per page: the miss is a wiring mistake, and repeating it per candidate buries it. */
+  private static warnedMissingStagedNotice = false
+
   /**
    * 이 대화가 길어져 앞부분이 프롬프트에서 접혔다는 **사실**(서버 보고). 주제 이탈을 판정한 것이
    * 아니다 — 판정하면 오탐이 생기고, 오탐이 생기면 사용자는 안내 자체를 무시한다.
@@ -1332,6 +1489,63 @@ export class OxBoardAIChat extends LitElement {
     .proposal.sent {
       border-left-color: var(--md-sys-color-outline, #94a3b8);
     }
+    .proposal .staged-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      padding: 3px 8px;
+      border-radius: 999px;
+      background: rgba(15, 118, 110, 0.1);
+      color: var(--md-sys-color-primary, #0f766e);
+      font-size: 11px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+    .proposal .staged-badge md-icon {
+      --md-icon-size: 13px;
+      color: inherit;
+    }
+
+    .proposal-choices {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-top: 6px;
+      padding: 6px 8px;
+      background: var(--md-sys-color-surface-container-lowest, #ffffff);
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 8px;
+    }
+    .proposal-choices .choice-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 9px;
+      border-radius: 999px;
+      border: 1px solid var(--md-sys-color-outline-variant, #cbd5e1);
+      background: var(--md-sys-color-surface-container-low, #f8fafc);
+      color: var(--md-sys-color-on-surface, #1e293b);
+      font-family: inherit;
+      font-size: 11px;
+      font-weight: 550;
+      cursor: pointer;
+      transition: all 0.14s ease-in-out;
+    }
+    .proposal-choices .choice-chip:hover {
+      background: var(--md-sys-color-surface-container-high, #e2e8f0);
+      border-color: var(--md-sys-color-primary, #0f766e);
+      color: var(--md-sys-color-primary, #0f766e);
+    }
+    .proposal-choices .choice-chip.primary {
+      background: var(--md-sys-color-primary-container, #ccfbf1);
+      color: var(--md-sys-color-on-primary-container, #0f766e);
+      border-color: var(--md-sys-color-primary, #0f766e);
+      font-weight: 650;
+    }
+    .proposal-choices .choice-chip md-icon {
+      --md-icon-size: 13px;
+      color: inherit;
+    }
 
     /* ── 접지 경고 — 근거에 없는 대상을 지목한 답 ───── */
     .grounding-warning {
@@ -1634,10 +1848,156 @@ export class OxBoardAIChat extends LitElement {
 
     /* ── Composer (actions + input 통합 영역) ──────────── */
     .composer {
+      position: relative;
       border-top: 1px solid var(--md-sys-color-outline-variant, #f1f5f9);
       background: var(--md-sys-color-surface, #ffffff);
       display: flex;
       flex-direction: column;
+      transition: background 0.15s, border-color 0.15s;
+    }
+    .composer.drag-over {
+      background: var(--md-sys-color-surface-container, #f1f5f9);
+      border-top-color: var(--md-sys-color-primary, #0284c7);
+    }
+    .drag-drop-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.94);
+      backdrop-filter: blur(2px);
+      z-index: 10;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      border: 2px dashed var(--md-sys-color-primary, #0284c7);
+      border-radius: 4px;
+      color: var(--md-sys-color-primary, #0284c7);
+      font-size: 13px;
+      font-weight: 500;
+      pointer-events: none;
+    }
+    .drag-drop-overlay md-icon {
+      --md-icon-size: 28px;
+    }
+    .attachment-strip {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      padding: 6px 14px 2px;
+      max-height: 120px;
+      overflow-y: auto;
+    }
+    .attachment-chip {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      background: var(--md-sys-color-surface-container, #f1f5f9);
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 8px;
+      padding: 3px 6px 3px 4px;
+      max-width: 220px;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    }
+    .attachment-thumb {
+      width: 28px;
+      height: 28px;
+      object-fit: cover;
+      border-radius: 4px;
+      flex: none;
+    }
+    .attachment-icon {
+      --md-icon-size: 20px;
+      color: var(--md-sys-color-primary, #0284c7);
+      flex: none;
+    }
+    .attachment-meta {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      flex: 1;
+    }
+    .attachment-name {
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .attachment-size {
+      font-size: 9px;
+      color: var(--md-sys-color-outline, #64748b);
+    }
+    .attachment-remove {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      border-radius: 50%;
+      cursor: pointer;
+      color: var(--md-sys-color-outline, #64748b);
+      transition: background 0.15s, color 0.15s;
+      flex: none;
+    }
+    .attachment-remove:hover {
+      background: var(--md-sys-color-surface-container-highest, #cbd5e1);
+      color: var(--md-sys-color-error, #ef4444);
+    }
+    .attachment-remove md-icon {
+      --md-icon-size: 14px;
+    }
+    .msg-attachments {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 8px;
+    }
+    .msg-attachment-img-wrap {
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      background: var(--md-sys-color-surface-container-lowest, #ffffff);
+      max-width: 240px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      display: flex;
+      flex-direction: column;
+    }
+    .msg-attachment-img-wrap img {
+      max-width: 100%;
+      max-height: 160px;
+      object-fit: cover;
+      display: block;
+    }
+    .msg-attachment-label {
+      padding: 4px 8px;
+      font-size: 10px;
+      color: var(--md-sys-color-on-surface-variant, #64748b);
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border-top: 1px solid var(--md-sys-color-outline-variant, #f1f5f9);
+    }
+    .msg-attachment-file-chip {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 10px;
+      border-radius: 8px;
+      background: var(--md-sys-color-surface-container, #f8fafc);
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      font-size: 11px;
+      color: var(--md-sys-color-on-surface, #0f172a);
+    }
+    .msg-attachment-file-chip md-icon {
+      --md-icon-size: 18px;
+      color: var(--md-sys-color-primary, #0284c7);
     }
 
     /* ── Mini action row (메시지 시작 후) ──────────────── */
@@ -2065,6 +2425,27 @@ export class OxBoardAIChat extends LitElement {
                           >${content}</span
                         >`
                       : content}
+                ${line.attachments && line.attachments.length > 0
+                  ? html`
+                      <div class="msg-attachments">
+                        ${line.attachments.map(att =>
+                          att.type?.startsWith('image/') || att.url?.startsWith('data:image/') || att.base64
+                            ? html`
+                                <div class="msg-attachment-img-wrap" title=${att.name}>
+                                  <img src=${att.url || att.base64} alt=${att.name} />
+                                  <span class="msg-attachment-label">${att.name}</span>
+                                </div>
+                              `
+                            : html`
+                                <div class="msg-attachment-file-chip" title=${att.name}>
+                                  <md-icon>description</md-icon>
+                                  <span>${att.name}</span>
+                                </div>
+                              `
+                        )}
+                      </div>
+                    `
+                  : nothing}
                 ${line.patchId
                   ? html`
                       <div class="summary ${this.revertedPatchIds.has(line.patchId) ? 'reverted' : ''}">
@@ -2115,11 +2496,47 @@ export class OxBoardAIChat extends LitElement {
           `
         : nothing}
       ${this.renderFoldNotice()}
-      <div class="composer ${hasMessages ? '' : 'no-actions'}">
-        ${hasMessages
+      <div
+        class="composer ${this.dragOver ? 'drag-over' : ''}"
+        @dragover=${(e: DragEvent) => this.onComposerDragOver(e)}
+        @dragleave=${(e: DragEvent) => this.onComposerDragLeave(e)}
+        @drop=${(e: DragEvent) => this.onComposerDrop(e)}
+        @paste=${(e: ClipboardEvent) => this.onComposerPaste(e)}>
+        ${this.dragOver
           ? html`
-              <div class="actions-row">
+              <div class="drag-drop-overlay">
+                <md-icon>cloud_upload</md-icon>
+                <span>${i18next.t('ai-assistant.text.drop-files-here', { defaultValue: '여기에 이미지나 파일을 놓으세요' })}</span>
+              </div>
+            `
+          : nothing}
+        <div class="actions-row">
+          <input
+            id="chat-file-input"
+            type="file"
+            multiple
+            accept="image/*,.json,.txt,.csv"
+            style="display: none"
+            @change=${(e: Event) => {
+              const input = e.target as HTMLInputElement
+              if (input.files?.length) {
+                this.onAttachFiles(input.files)
+                input.value = ''
+              }
+            }}
+          />
+          <button
+            type="button"
+            class="action"
+            @click=${() => this.renderRoot.querySelector<HTMLInputElement>('#chat-file-input')?.click()}
+            title=${i18next.t('ai-assistant.tooltip.attach-file', { defaultValue: '이미지 또는 파일 첨부 (클립보드 붙여넣기·드래그앤드롭 지원)' })}>
+            <md-icon>attach_file</md-icon>
+            ${i18next.t('ai-assistant.button.attach', { defaultValue: '첨부' })}
+          </button>
+          ${hasMessages
+            ? html`
                 <button
+                  type="button"
                   class="action"
                   @click=${() => (this.examplesOpen = !this.examplesOpen)}
                   title=${i18next.t('ai-assistant.text.show-examples-tooltip')}>
@@ -2128,8 +2545,34 @@ export class OxBoardAIChat extends LitElement {
                     ? i18next.t('ai-assistant.button.close')
                     : i18next.t('ai-assistant.button.examples')}
                 </button>
+              `
+            : nothing}
+        </div>
+        ${this.examplesOpen ? this.renderInlineExamples() : nothing}
+        ${this.attachments.length > 0
+          ? html`
+              <div class="attachment-strip">
+                ${this.attachments.map(
+                  att => html`
+                    <div class="attachment-chip" title=${att.name}>
+                      ${att.type.startsWith('image/')
+                        ? html`<img class="attachment-thumb" src=${att.url} alt=${att.name} />`
+                        : html`<md-icon class="attachment-icon">description</md-icon>`}
+                      <div class="attachment-meta">
+                        <span class="attachment-name">${att.name}</span>
+                        <span class="attachment-size">${formatFileSize(att.size)}</span>
+                      </div>
+                      <button
+                        type="button"
+                        class="attachment-remove"
+                        title=${i18next.t('ai-assistant.button.remove-attachment', { defaultValue: '첨부 삭제' })}
+                        @click=${() => this.removeAttachment(att.id)}>
+                        <md-icon>close</md-icon>
+                      </button>
+                    </div>
+                  `
+                )}
               </div>
-              ${this.examplesOpen ? this.renderInlineExamples() : nothing}
             `
           : nothing}
         <div class="input-row">
@@ -2167,7 +2610,7 @@ export class OxBoardAIChat extends LitElement {
               : nothing}
           </div>
           <button
-            ?disabled=${this.busy || !this.input.trim()}
+            ?disabled=${this.busy || (!this.input.trim() && this.attachments.length === 0)}
             @click=${this.send}
             title=${i18next.t('ai-assistant.text.send-tooltip')}>
             ${this.busy
@@ -2492,7 +2935,7 @@ export class OxBoardAIChat extends LitElement {
    */
   private get exampleGroups(): Array<{ label: string; items: string[] }> {
     if (this.examples?.length) return this.examples
-    return OxBoardAIChat.EXAMPLE_GROUPS.map(group => ({
+    return OxAssistantChat.EXAMPLE_GROUPS.map(group => ({
       label: i18next.t(group.labelKey),
       items: group.itemKeys.map(key => i18next.t(key))
     }))
@@ -2776,7 +3219,7 @@ export class OxBoardAIChat extends LitElement {
    */
   private startNewFromNotice = () => {
     this.foldNoticeDismissed = true
-    this.dispatchEvent(new CustomEvent('board-ai-start-new-session', { bubbles: true, composed: true }))
+    this.dispatchEvent(new CustomEvent('assistant-start-new-session', { bubbles: true, composed: true }))
   }
 
   /**
@@ -2794,13 +3237,27 @@ export class OxBoardAIChat extends LitElement {
         ${items.map(p => {
           const key = this.proposalKey(p)
           const sent = this.sentProposals.has(key)
+          /*
+            Follow-up chips are the host's words, never this component's. The fallback that used
+            to live here named a 3D modeller's operations in hardcoded Korean, and it reached the
+            plant and twin chats too.
+          */
+          const rawChoices: any[] = Array.isArray(p.choices) ? p.choices : (chatDefaults.proposalChoices ?? [])
+
           return html`
             <div class="proposal ${sent ? 'sent' : ''}">
-              <md-icon>bolt</md-icon>
+              <md-icon>${p.icon || (p.source ? 'view_in_ar' : '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>
+              ${/*
+                  The run button and the follow-up chips answer different questions — "is there
+                  something to apply" and "what else could I ask for" — and they used to share one
+                  ternary on `rawChoices.length`. A proposal that carried chips lost its button, so
+                  the one action the card exists for became unreachable while the model kept
+                  telling people to press it.
+                */ ''}
               <button
                 class="run"
                 ?disabled=${sent}
@@ -2808,13 +3265,73 @@ export class OxBoardAIChat extends LitElement {
                 ${sent ? i18next.t('ai-assistant.text.proposal-sent', { defaultValue: '실행 요청됨' })
                        : i18next.t('ai-assistant.button.run-proposal', { defaultValue: '실행' })}
               </button>
+              ${/*
+                  Drawn only where the host has said it staged this candidate, in the host's own
+                  words. Not knowing is not a claim: with no word from the host, nothing is drawn.
+                  This badge used to read "there are chips" as "the model is in the 3D viewer" and
+                  say so, in a component that plant and twin also use.
+                */ ''}
+              ${this.stagedProposals.has(key) && chatDefaults.stagedNoticeKey ? html`
+                <span class="staged-badge">
+                  <md-icon>check_circle</md-icon>
+                  <span>${i18next.t(chatDefaults.stagedNoticeKey)}</span>
+                </span>
+              ` : nothing}
             </div>
+            ${rawChoices.length ? html`
+              <div class="proposal-choices" role="group" aria-label="대화 선택지">
+                ${rawChoices.map((c: any) => html`
+                  <button
+                    class="choice-chip ${c.primary ? 'primary' : ''}"
+                    title=${c.prompt || c.label}
+                    @click=${() => this.onChoiceClick(c, p, key)}>
+                    ${c.icon ? html`<md-icon>${c.icon}</md-icon>` : nothing}
+                    <span>${c.label}</span>
+                  </button>
+                `)}
+              </div>
+            ` : nothing}
           `
         })}
       </div>
     `
   }
 
+  private onChoiceClick(choice: any, proposal: any, key: string) {
+    if (choice.action === 'save') {
+      this.dispatchEvent(
+        new CustomEvent('assistant-choice', {
+          detail: { action: 'save', choice, proposal, sessionId: this.sessionId },
+          bubbles: true,
+          composed: true
+        })
+      )
+      this.executeProposal(proposal, key)
+      return
+    }
+
+    if (choice.action === 'prompt' && choice.prompt) {
+      this.input = choice.prompt
+      this.dispatchEvent(
+        new CustomEvent('assistant-choice', {
+          detail: { action: 'prompt', choice, proposal, sessionId: this.sessionId },
+          bubbles: true,
+          composed: true
+        })
+      )
+      void this.send()
+      return
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('assistant-choice', {
+        detail: { action: choice.action || 'custom', choice, proposal, sessionId: this.sessionId },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
   /**
    * 제안 식별 키 — 같은 조치를 두 번 실행하지 않도록 **효과**(명령·대상·인자)로만 만든다.
    *
@@ -2845,7 +3362,7 @@ export class OxBoardAIChat extends LitElement {
   private executeProposal(p: any, key: string) {
     this.sentProposals = new Set(this.sentProposals).add(key)
     this.dispatchEvent(
-      new CustomEvent('board-ai-proposal-execute', {
+      new CustomEvent('assistant-proposal-execute', {
         detail: { proposal: p, sessionId: this.sessionId },
         bubbles: true,
         composed: true
@@ -3124,7 +3641,15 @@ export class OxBoardAIChat extends LitElement {
 
   private async send() {
     const text = this.input.trim()
-    if (!text || this.busy) return
+    const attachmentsToSend = [...this.attachments]
+    if ((!text && attachmentsToSend.length === 0) || this.busy) return
+    this.attachments = []
+
+    const promptText = text || (attachmentsToSend.length > 0
+      ? (attachmentsToSend[0].type.startsWith('image/')
+          ? '첨부된 이미지를 참고하여 제안해 주세요.'
+          : '첨부된 파일을 확인해 주세요.')
+      : '')
     if (!this.sessionId && this.prepareSession) {
       this.busy = true
       try {
@@ -3156,13 +3681,13 @@ export class OxBoardAIChat extends LitElement {
     // 등장하는 것만 추출 — 지운 토큰 제외. inline 마커로 content 에 주입.
     const mentions: Array<{ token: string; refid: number }> = []
     for (const [token, refid] of this.pickedMentions.entries()) {
-      if (text.includes(`#${token}`)) mentions.push({ token, refid })
+      if (promptText.includes(`#${token}`)) mentions.push({ token, refid })
     }
     const userMentions: Array<{ token: string; userId: string }> = []
     for (const [token, userId] of this.pickedUserMentions.entries()) {
-      if (text.includes(`@${token}`)) userMentions.push({ token, userId })
+      if (promptText.includes(`@${token}`)) userMentions.push({ token, userId })
     }
-    let enrichedContent = injectMentionRefids(text, mentions)
+    let enrichedContent = injectMentionRefids(promptText, mentions)
     enrichedContent = injectMentionUserIds(enrichedContent, userMentions)
 
     // optimistic 라인에 임시 핸들 — 방송 에코와의 reconcile 을 index 비의존으로.
@@ -3171,7 +3696,19 @@ export class OxBoardAIChat extends LitElement {
 
     this.lines = [
       ...this.lines,
-      { role: 'user', content: enrichedContent, _localId: userLocalId, senderEmail: this._myEmail }
+      {
+        role: 'user',
+        content: enrichedContent,
+        attachments: attachmentsToSend.map(a => ({
+          name: a.name,
+          size: a.size,
+          type: a.type,
+          url: a.url,
+          base64: a.base64
+        })),
+        _localId: userLocalId,
+        senderEmail: this._myEmail
+      }
     ]
     this.input = ''
     this.busy = true
@@ -3181,6 +3718,24 @@ export class OxBoardAIChat extends LitElement {
     this.lines = [...this.lines, { role: 'assistant', content: '', pending: true, _localId: asstLocalId }]
 
     try {
+      if (attachmentsToSend.length > 0) {
+        requestContext.hostContext = {
+          ...requestContext.hostContext,
+          attachments: attachmentsToSend.map(a => ({
+            name: a.name,
+            size: a.size,
+            mediaType: a.type,
+            data: a.base64
+          })),
+          image: attachmentsToSend.find(a => a.type.startsWith('image/'))
+            ? {
+                name: attachmentsToSend.find(a => a.type.startsWith('image/'))!.name,
+                mediaType: attachmentsToSend.find(a => a.type.startsWith('image/'))!.type,
+                data: attachmentsToSend.find(a => a.type.startsWith('image/'))!.base64
+              }
+            : undefined
+        }
+      }
       // LLM 으로 보낼 history — user/assistant 만 (system 은 백엔드가 자동 합류).
       // pending placeholder 와 system 은 제외 (index 비의존 — 방송 append 와 무관).
       const history = this.lines
@@ -3248,6 +3803,21 @@ export class OxBoardAIChat extends LitElement {
         pending: false
       })
 
+      // 제안 자동 프리뷰 전파 (3D 뷰어 자동 반영)
+      if (Array.isArray(out.proposals) && out.proposals.length > 0) {
+        for (const p of out.proposals) {
+          if (p?.source || p?.autoStage) {
+            this.dispatchEvent(
+              new CustomEvent('assistant-proposal-preview', {
+                detail: { proposal: p, sessionId: out.sessionId },
+                bubbles: true,
+                composed: true
+              })
+            )
+          }
+        }
+      }
+
       // 호스트로 patch 이벤트 전파
       if (out.patch) {
         this.dispatchEvent(
@@ -3297,6 +3867,7 @@ export class OxBoardAIChat extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'ox-board-ai-chat': OxBoardAIChat
+    'ox-assistant-chat': OxAssistantChat
   }
 }
+