@things-factory/ai-assistant 10.1.8 → 10.1.15

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 모드, 메시지 영속 안 됨)
@@ -14,6 +14,8 @@
  * 모드 전환은 컨테이너 (워크스페이스) 의 책임. 이 컴포넌트는 자체로 풀 채팅 UX.
  */
 import '@material/web/icon/icon.js'
+import './assistant-session-toolbar.js'
+import { assistantAutoAskKey, assistantModelFingerprint, type AssistantRequestContext } from '../utils/assistant-request-context.js'
 
 import { LitElement, css, html, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -104,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`
@@ -220,11 +245,13 @@ 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
+  @property({ attribute: false }) prepareSession?: (adopt: (id: string) => void) => Promise<string | undefined>
+  private adoptingSession = false
 
   /**
    * 보드의 모든 ChatSession 리스트 — 다중 세션 활성화 시 탭 UI 로 표시.
@@ -385,6 +412,8 @@ export class OxBoardAIChat extends LitElement {
    */
   @property({ attribute: false })
   autoAsk?: string
+  @property() autoAskRequestId?: string
+  @property({ attribute: false }) contextProvider?: () => AssistantRequestContext
 
   /**
    * 빈 화면의 제목·부제 — **호스트가 자기 말로 준다.**
@@ -425,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
@@ -1326,6 +1451,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 {
@@ -1628,10 +1810,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 (메시지 시작 후) ──────────────── */
@@ -1842,13 +2170,17 @@ export class OxBoardAIChat extends LitElement {
      * sessionId 가 붙기 전에 보내면 대화에 남지 않으므로 세션이 준비될 때까지 기다린다.
      * 같은 문장을 두 번 보내지 않도록 보낸 값을 기억한다 — 재렌더마다 updated 가 다시 돌기 때문이다.
      */
-    if (this.autoAsk && this.autoAsk !== this._autoAsked && this.sessionId && !this.busy) {
-      this._autoAsked = this.autoAsk
+    if (this.autoAsk && assistantAutoAskKey(this.autoAsk, this.autoAskRequestId) !== this._autoAsked && (this.sessionId || this.prepareSession) && !this.busy) {
+      this._autoAsked = assistantAutoAskKey(this.autoAsk, this.autoAskRequestId)
       this.input = this.autoAsk
       this.send()
     }
 
-    if (changed.has('sessionId')) {
+    if (changed.has('sessionId') && this.adoptingSession) {
+      this.adoptingSession = false
+      this._startPresence()
+      this._startMessageSubscription()
+    } else if (changed.has('sessionId')) {
       // sessionId 가 바뀌면 (set / unset / 다른 보드 전환) 이전 세션의 모든 클라이언트
       // 컨텍스트 정리 — lines / pickedMentions / errorMessage / input 모두 새지 않도록.
       // 보드 단위 격리 (ChatSession 1:1 boardId) 가 깨지는 회귀 방지.
@@ -2055,6 +2387,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' : ''}">
@@ -2105,11 +2458,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')}>
@@ -2118,8 +2507,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">
@@ -2157,7 +2572,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
@@ -2482,7 +2897,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))
     }))
@@ -2529,38 +2944,11 @@ export class OxBoardAIChat extends LitElement {
   private 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('ai-assistant.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('ai-assistant.button.new-chat', {
-            defaultValue: '새 대화'
-          })}
-          @click=${this._onSessionCreateClick}>
-          <md-icon>add</md-icon>
-          <span>${i18next.t('ai-assistant.button.new-chat', { defaultValue: '새 대화' })}</span>
-        </button>
-      </div>
+      <ox-assistant-session-toolbar style="padding:8px 12px" .sessions=${this.sessions}
+        .sessionId=${this.sessionId || ''} .disabled=${this.busy}
+        @assistant-session-select=${(event: CustomEvent) => { event.stopPropagation(); this._onSessionTabClick(event.detail.sessionId) }}
+        @assistant-session-reset=${(event: Event) => { event.stopPropagation(); this._onSessionCreateClick() }}
+      ></ox-assistant-session-toolbar>
     `
   }
 
@@ -2598,6 +2986,7 @@ export class OxBoardAIChat extends LitElement {
   }
 
   private _onSessionCreateClick = () => {
+    if (this.busy || this.lines.length === 0) return
     this.dispatchEvent(
       new CustomEvent('session-create', {
         bubbles: true,
@@ -2792,7 +3181,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 }))
   }
 
   /**
@@ -2810,27 +3199,90 @@ export class OxBoardAIChat extends LitElement {
         ${items.map(p => {
           const key = this.proposalKey(p)
           const sent = this.sentProposals.has(key)
+          const rawChoices: any[] = Array.isArray(p.choices) ? p.choices : (p.source ? [
+            { id: 'save', action: 'save', label: i18next.t('label.save-as-draft', { defaultValue: '초안 저장' }), icon: 'save', primary: true },
+            { id: 'repropose', action: 'prompt', label: '다른 콘셉트 재제안', icon: 'refresh', prompt: '현재 제안과 완전히 다른 스타일과 콘셉트로 새로 제안해줘' },
+            { id: 'slim', action: 'prompt', label: '비율 슬림 조정', icon: 'aspect_ratio', prompt: '전체적인 가로세로 비율을 좀 더 슬림하고 날렵하게 조정해줘' },
+            { id: 'palette', action: 'prompt', label: '색상 테마 변경', icon: 'palette', prompt: '다른 팔레트 색상 테마로 부품 색상을 변경해줘' },
+            { id: 'detail', action: 'prompt', label: '디테일 보강', icon: 'extension', prompt: '주요 디테일과 센서 부품을 좀 더 풍부하게 보강해줘' }
+          ] : [])
+
           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>
-              <button
-                class="run"
-                ?disabled=${sent}
-                @click=${() => this.executeProposal(p, key)}>
-                ${sent ? i18next.t('ai-assistant.text.proposal-sent', { defaultValue: '실행 요청됨' })
-                       : i18next.t('ai-assistant.button.run-proposal', { defaultValue: '실행' })}
-              </button>
+              ${!rawChoices.length ? html`
+                <button
+                  class="run"
+                  ?disabled=${sent}
+                  @click=${() => this.executeProposal(p, key)}>
+                  ${sent ? i18next.t('ai-assistant.text.proposal-sent', { defaultValue: '실행 요청됨' })
+                         : i18next.t('ai-assistant.button.run-proposal', { defaultValue: '실행' })}
+                </button>
+              ` : html`
+                <span class="staged-badge" title="3D 뷰어에 모델이 표시되었습니다">
+                  <md-icon>check_circle</md-icon>
+                  <span>뷰어 반영됨</span>
+                </span>
+              `}
             </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
+      })
+    )
+  }
+
   /**
    * 제안 식별 키 — 같은 조치를 두 번 실행하지 않도록 **효과**(명령·대상·인자)로만 만든다.
    *
@@ -2861,7 +3313,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
@@ -3140,19 +3592,53 @@ 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 {
+        await this.prepareSession(id => { this.adoptingSession = true; this.sessionId = id })
+        await this.updateComplete
+      } catch (error) {
+        this.errorMessage = error instanceof Error ? error.message : String(error)
+        this.busy = false
+        return
+      }
+      this.busy = false
+    }
+
+    let requestContext: AssistantRequestContext
+    let liveBoard: any
+    let requestBase: any
+    try {
+      const provided = this.contextProvider?.() || {}
+      requestContext = structuredClone({ systemPrompt: this.systemPrompt, hostContext: this.hostContext, ...provided })
+      liveBoard = structuredClone(this.boardProvider ? this.boardProvider() : this.currentBoard)
+      requestBase = { version: 1, sessionId: this.sessionId, hostContext: requestContext.hostContext,
+        modelFingerprint: assistantModelFingerprint(liveBoard) }
+    } catch (error) {
+      this.errorMessage = error instanceof Error ? error.message : String(error)
+      return
+    }
 
     // pickedMentions / pickedUserMentions 에서 현재 텍스트에 실제 #/@ token 으로
     // 등장하는 것만 추출 — 지운 토큰 제외. 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 비의존으로.
@@ -3161,7 +3647,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
@@ -3171,6 +3669,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
@@ -3179,8 +3695,6 @@ export class OxBoardAIChat extends LitElement {
 
       // 라이브 보드 우선 — 호스트의 캔버스가 사용자 수작업 편집을 들고 있을 수 있음.
       // boardProvider 가 있으면 send 시점에 그것을 pull, 없으면 정적 currentBoard.
-      const liveBoard = this.boardProvider ? this.boardProvider() : this.currentBoard
-
       // mentions 는 위에서 이미 계산해 user line 에 thread — 그대로 mutation 입력으로 재사용.
       const neutral = this.chatEndpoint === 'assistantChat'
       const result = await client.mutate({
@@ -3190,9 +3704,9 @@ export class OxBoardAIChat extends LitElement {
             ? buildAssistantChatInput({
                 sessionId: this.sessionId,
                 history,
-                systemPrompt: this.systemPrompt!,
+                systemPrompt: requestContext.systemPrompt!,
                 truncateAfterMessageId: this._truncateAfterId,
-                hostContext: this.hostContext,
+                hostContext: requestContext.hostContext,
                 toolCategories: this.toolCategories,
                 requireGroundingTools: this.requireGroundingTools
               })
@@ -3202,7 +3716,7 @@ export class OxBoardAIChat extends LitElement {
                 liveBoard,
                 scopes: this.scopes,
                 truncateAfterMessageId: this._truncateAfterId,
-                hostContext: this.hostContext,
+                hostContext: requestContext.hostContext,
                 toolCategories: this.toolCategories,
                 boardTools: this.boardTools,
                 requireGroundingTools: this.requireGroundingTools,
@@ -3240,12 +3754,28 @@ 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(
           new CustomEvent('board-edit-patch', {
             detail: {
               patch: out.patch,
+              requestBase,
               summary: out.patch.summary,
               confidence: out.patch.confidence,
               patchId: out.patchId,
@@ -3260,7 +3790,7 @@ export class OxBoardAIChat extends LitElement {
       if (Array.isArray(out.actions) && out.actions.length > 0) {
         this.dispatchEvent(
           new CustomEvent('board-action-execute', {
-            detail: { actions: out.actions, sessionId: out.sessionId },
+            detail: { actions: out.actions, sessionId: out.sessionId, requestBase },
             bubbles: true,
             composed: true
           })
@@ -3288,6 +3818,7 @@ export class OxBoardAIChat extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'ox-board-ai-chat': OxBoardAIChat
+    'ox-assistant-chat': OxAssistantChat
   }
 }
+