@things-factory/ai-assistant 10.1.8 → 10.1.15

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

@@ -1,7 +1,7 @@
-var OxBoardAIChat_1;
+var OxAssistantChat_1;
 import { __decorate, __metadata } from "tslib";
 /**
- * <ox-board-ai-chat> — AI 주도 보드 모델링 채팅 컴포넌트 (Lit).
+ * <ox-assistant-chat> — AI 도우미 채팅 컴포넌트 (Lit).
  *
  * 입력:
  *   - sessionId: 영속 ChatSession 식별자 (없으면 ad-hoc 모드, 메시지 영속 안 됨)
@@ -16,6 +16,8 @@ import { __decorate, __metadata } from "tslib";
  * 모드 전환은 컨테이너 (워크스페이스) 의 책임. 이 컴포넌트는 자체로 풀 채팅 UX.
  */
 import '@material/web/icon/icon.js';
+import './assistant-session-toolbar.js';
+import { assistantAutoAskKey, assistantModelFingerprint } from '../utils/assistant-request-context.js';
 import { LitElement, css, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
@@ -42,6 +44,13 @@ import { buildMentionCandidates, buildCatalogCandidates, buildSlashCandidates, b
  */
 import { chatDefaults } from './chat-defaults.js';
 import { availableTriggers } from './chat-triggers.js';
+function formatFileSize(bytes) {
+    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 `
   mutation BoardAIChat($input: BoardAIChatInput!) {
     boardAIChat(input: $input) {
@@ -152,9 +161,10 @@ function initials(name) {
         return (parts[0][0] + parts[1][0]).toUpperCase();
     return /[a-zA-Z]/.test(n) ? n.slice(0, 2).toUpperCase() : n.slice(0, 1);
 }
-let OxBoardAIChat = class OxBoardAIChat extends LitElement {
+let OxAssistantChat = class OxAssistantChat extends LitElement {
     constructor() {
         super(...arguments);
+        this.adoptingSession = false;
         /**
          * 보드의 모든 ChatSession 리스트 — 다중 세션 활성화 시 탭 UI 로 표시.
          *
@@ -203,6 +213,10 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
         this.input = '';
         /** 되돌려진 patch id 들 — 한 번 revert 한 patch 는 버튼 비활성 */
         this.revertedPatchIds = new Set();
+        /** 첨부된 파일/이미지 목록 */
+        this.attachments = [];
+        /** 드래그 오버 상태 (시각 피드백용) */
+        this.dragOver = false;
         /** mini action — 인라인 예시 토글 */
         this.examplesOpen = false;
         /** 원본 JSON 을 펼친 단계(라인:단계) — 목록은 한 줄 요약으로 훑고 필요한 것만 펼친다. */
@@ -282,6 +296,8 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
             }
         };
         this._onSessionCreateClick = () => {
+            if (this.busy || this.lines.length === 0)
+                return;
             this.dispatchEvent(new CustomEvent('session-create', {
                 bubbles: true,
                 composed: true
@@ -293,10 +309,92 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
          */
         this.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 }));
         };
     }
-    static { OxBoardAIChat_1 = this; }
+    static { OxAssistantChat_1 = this; }
+    async onAttachFiles(files) {
+        if (!files || files.length === 0)
+            return;
+        const list = Array.from(files);
+        const newAttachments = [];
+        for (const file of list) {
+            const id = 'att-' + Math.random().toString(36).substring(2, 9);
+            const url = URL.createObjectURL(file);
+            let base64;
+            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];
+    }
+    readFileAsBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+    }
+    removeAttachment(id) {
+        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);
+    }
+    onComposerPaste(e) {
+        const items = e.clipboardData?.items;
+        if (!items || items.length === 0)
+            return;
+        const files = [];
+        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);
+        }
+    }
+    onComposerDragOver(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!this.dragOver)
+            this.dragOver = true;
+    }
+    onComposerDragLeave(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const currentTarget = e.currentTarget;
+        const relatedTarget = e.relatedTarget;
+        if (!currentTarget.contains(relatedTarget)) {
+            this.dragOver = false;
+        }
+    }
+    onComposerDrop(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.dragOver = false;
+        if (e.dataTransfer?.files?.length) {
+            this.onAttachFiles(e.dataTransfer.files);
+        }
+    }
     /** 현재 로그인 사용자 email — 그룹챗에서 내 메시지 vs 타인 메시지 구분.
      *  email 을 쓰는 이유: /auth/profile 이 항상 내려주는 로그인 식별자이고(비어 있지 않다),
      *  내부 관리키(User.id)를 클라이언트 판정에 의존하지 않기 위함. */
@@ -1087,6 +1185,63 @@ let OxBoardAIChat = 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 {
@@ -1389,10 +1544,156 @@ let OxBoardAIChat = 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 (메시지 시작 후) ──────────────── */
@@ -1601,12 +1902,17 @@ let OxBoardAIChat = 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) 가 깨지는 회귀 방지.
@@ -1814,6 +2120,25 @@ let OxBoardAIChat = 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' : ''}">
@@ -1864,11 +2189,47 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
           `
             : nothing}
       ${this.renderFoldNotice()}
-      <div class="composer ${hasMessages ? '' : 'no-actions'}">
-        ${hasMessages
+      <div
+        class="composer ${this.dragOver ? 'drag-over' : ''}"
+        @dragover=${(e) => this.onComposerDragOver(e)}
+        @dragleave=${(e) => this.onComposerDragLeave(e)}
+        @drop=${(e) => this.onComposerDrop(e)}
+        @paste=${(e) => this.onComposerPaste(e)}>
+        ${this.dragOver
+            ? html `
+              <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) => {
+            const input = e.target;
+            if (input.files?.length) {
+                this.onAttachFiles(input.files);
+                input.value = '';
+            }
+        }}
+          />
+          <button
+            type="button"
+            class="action"
+            @click=${() => this.renderRoot.querySelector('#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 `
-              <div class="actions-row">
                 <button
+                  type="button"
                   class="action"
                   @click=${() => (this.examplesOpen = !this.examplesOpen)}
                   title=${i18next.t('ai-assistant.text.show-examples-tooltip')}>
@@ -1877,8 +2238,32 @@ let OxBoardAIChat = 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">
@@ -1915,7 +2300,7 @@ let OxBoardAIChat = 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
@@ -2190,7 +2575,7 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
     get exampleGroups() {
         if (this.examples?.length)
             return this.examples;
-        return OxBoardAIChat_1.EXAMPLE_GROUPS.map(group => ({
+        return OxAssistantChat_1.EXAMPLE_GROUPS.map(group => ({
             label: i18next.t(group.labelKey),
             items: group.itemKeys.map(key => i18next.t(key))
         }));
@@ -2232,38 +2617,11 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
         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) => { event.stopPropagation(); this._onSessionTabClick(event.detail.sessionId); }}
+        @assistant-session-reset=${(event) => { event.stopPropagation(); this._onSessionCreateClick(); }}
+      ></ox-assistant-session-toolbar>
     `;
     }
     /** C4 roster — 세션 참여자 + online 표시. 참여자 2명 미만이면 숨김(혼자면 의미 없음). */
@@ -2478,26 +2836,79 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
         ${items.map(p => {
             const key = this.proposalKey(p);
             const sent = this.sentProposals.has(key);
+            const rawChoices = 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: '실행 요청됨' })
+              ${!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>
+                </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) => 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>
     `;
     }
+    onChoiceClick(choice, proposal, key) {
+        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
+        }));
+    }
     /**
      * 제안 식별 키 — 같은 조치를 두 번 실행하지 않도록 **효과**(명령·대상·인자)로만 만든다.
      *
@@ -2529,7 +2940,7 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
      */
     executeProposal(p, key) {
         this.sentProposals = new Set(this.sentProposals).add(key);
-        this.dispatchEvent(new CustomEvent('board-ai-proposal-execute', {
+        this.dispatchEvent(new CustomEvent('assistant-proposal-execute', {
             detail: { proposal: p, sessionId: this.sessionId },
             bubbles: true,
             composed: true
@@ -2794,28 +3205,74 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
     }
     async send() {
         const text = this.input.trim();
-        if (!text || this.busy)
+        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;
+        let liveBoard;
+        let requestBase;
+        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 = [];
         for (const [token, refid] of this.pickedMentions.entries()) {
-            if (text.includes(`#${token}`))
+            if (promptText.includes(`#${token}`))
                 mentions.push({ token, refid });
         }
         const userMentions = [];
         for (const [token, userId] of this.pickedUserMentions.entries()) {
-            if (text.includes(`@${token}`))
+            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 비의존으로.
         const userLocalId = `local-${++this._localSeq}-u`;
         const asstLocalId = `local-${++this._localSeq}-a`;
         this.lines = [
             ...this.lines,
-            { role: 'user', content: enrichedContent, _localId: userLocalId, senderEmail: this._myEmail }
+            {
+                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;
@@ -2823,6 +3280,24 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
         // 가짜 pending 응답 표시 (UX 부드럽게)
         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
@@ -2830,7 +3305,6 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
                 .map(l => ({ role: l.role, content: l.content }));
             // 라이브 보드 우선 — 호스트의 캔버스가 사용자 수작업 편집을 들고 있을 수 있음.
             // boardProvider 가 있으면 send 시점에 그것을 pull, 없으면 정적 currentBoard.
-            const liveBoard = this.boardProvider ? this.boardProvider() : this.currentBoard;
             // mentions 는 위에서 이미 계산해 user line 에 thread — 그대로 mutation 입력으로 재사용.
             const neutral = this.chatEndpoint === 'assistantChat';
             const result = await client.mutate({
@@ -2840,9 +3314,9 @@ let OxBoardAIChat = 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
                         })
@@ -2852,7 +3326,7 @@ let OxBoardAIChat = 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,
@@ -2886,11 +3360,24 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
                 proposals: Array.isArray(out.proposals) ? out.proposals : undefined,
                 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,
@@ -2903,7 +3390,7 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
             // 호스트로 ephemeral scene 조작 actions 전파 (selection / view / mode)
             if (Array.isArray(out.actions) && out.actions.length > 0) {
                 this.dispatchEvent(new CustomEvent('board-action-execute', {
-                    detail: { actions: out.actions, sessionId: out.sessionId },
+                    detail: { actions: out.actions, sessionId: out.sessionId, requestBase },
                     bubbles: true,
                     composed: true
                 }));
@@ -2930,165 +3417,185 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
 __decorate([
     property({ type: String, attribute: 'session-id' }),
     __metadata("design:type", String)
-], OxBoardAIChat.prototype, "sessionId", void 0);
+], OxAssistantChat.prototype, "sessionId", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], OxAssistantChat.prototype, "prepareSession", void 0);
 __decorate([
     property({ type: Array, attribute: false }),
     __metadata("design:type", Array)
-], OxBoardAIChat.prototype, "sessions", void 0);
+], OxAssistantChat.prototype, "sessions", void 0);
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "currentBoard", void 0);
+], OxAssistantChat.prototype, "currentBoard", void 0);
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Function)
-], OxBoardAIChat.prototype, "boardProvider", void 0);
+], OxAssistantChat.prototype, "boardProvider", void 0);
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Function)
-], OxBoardAIChat.prototype, "searchProvider", void 0);
+], OxAssistantChat.prototype, "searchProvider", void 0);
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Function)
-], OxBoardAIChat.prototype, "userProvider", void 0);
+], OxAssistantChat.prototype, "userProvider", void 0);
 __decorate([
     property({ type: Array, attribute: false }),
     __metadata("design:type", Array)
-], OxBoardAIChat.prototype, "selectedRefids", void 0);
+], OxAssistantChat.prototype, "selectedRefids", void 0);
 __decorate([
     property({ type: Array, attribute: false }),
     __metadata("design:type", Array)
-], OxBoardAIChat.prototype, "toolCategories", void 0);
+], OxAssistantChat.prototype, "toolCategories", void 0);
 __decorate([
     property({ type: Object, attribute: false }),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "hostContext", void 0);
+], OxAssistantChat.prototype, "hostContext", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'board-tools' }),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "boardTools", void 0);
+], OxAssistantChat.prototype, "boardTools", void 0);
 __decorate([
     property({ type: String, attribute: 'chat-endpoint' }),
     __metadata("design:type", String)
-], OxBoardAIChat.prototype, "chatEndpoint", void 0);
+], OxAssistantChat.prototype, "chatEndpoint", void 0);
 __decorate([
     property({ type: String, attribute: 'system-prompt' }),
     __metadata("design:type", String)
-], OxBoardAIChat.prototype, "systemPrompt", void 0);
+], OxAssistantChat.prototype, "systemPrompt", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'require-grounding-tools' }),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "requireGroundingTools", void 0);
+], OxAssistantChat.prototype, "requireGroundingTools", void 0);
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
-], OxBoardAIChat.prototype, "scopes", void 0);
+], OxAssistantChat.prototype, "scopes", void 0);
 __decorate([
     property({ type: Array, attribute: 'known-types' }),
     __metadata("design:type", Array)
-], OxBoardAIChat.prototype, "knownTypes", void 0);
+], OxAssistantChat.prototype, "knownTypes", void 0);
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
-], OxBoardAIChat.prototype, "categories", void 0);
+], OxAssistantChat.prototype, "categories", void 0);
 __decorate([
     property({ type: Array, attribute: false }),
     __metadata("design:type", Array)
-], OxBoardAIChat.prototype, "componentSchemas", void 0);
+], OxAssistantChat.prototype, "componentSchemas", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "placeholder", void 0);
+], OxAssistantChat.prototype, "placeholder", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)
-], OxBoardAIChat.prototype, "lines", void 0);
+], OxAssistantChat.prototype, "lines", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "input", void 0);
+], OxAssistantChat.prototype, "input", void 0);
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", String)
-], OxBoardAIChat.prototype, "autoAsk", void 0);
+], OxAssistantChat.prototype, "autoAsk", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], OxAssistantChat.prototype, "autoAskRequestId", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], OxAssistantChat.prototype, "contextProvider", void 0);
 __decorate([
     property({ type: Object, attribute: false }),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "intro", void 0);
+], OxAssistantChat.prototype, "intro", void 0);
 __decorate([
     property({ type: Array, attribute: false }),
     __metadata("design:type", Array)
-], OxBoardAIChat.prototype, "examples", void 0);
+], OxAssistantChat.prototype, "examples", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)
-], OxBoardAIChat.prototype, "lastFailedInput", void 0);
+], OxAssistantChat.prototype, "lastFailedInput", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxAssistantChat.prototype, "revertedPatchIds", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], OxAssistantChat.prototype, "attachments", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "revertedPatchIds", void 0);
+], OxAssistantChat.prototype, "dragOver", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "examplesOpen", void 0);
+], OxAssistantChat.prototype, "examplesOpen", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)
-], OxBoardAIChat.prototype, "toastMessage", void 0);
+], OxAssistantChat.prototype, "toastMessage", void 0);
 __decorate([
     state(),
     __metadata("design:type", Number)
-], OxBoardAIChat.prototype, "copiedIdx", void 0);
+], OxAssistantChat.prototype, "copiedIdx", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "openToolSteps", void 0);
+], OxAssistantChat.prototype, "openToolSteps", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "sentProposals", void 0);
+], OxAssistantChat.prototype, "sentProposals", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "historyFolded", void 0);
+], OxAssistantChat.prototype, "historyFolded", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "foldNoticeDismissed", void 0);
+], OxAssistantChat.prototype, "foldNoticeDismissed", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "busy", void 0);
+], OxAssistantChat.prototype, "busy", void 0);
 __decorate([
     state(),
     __metadata("design:type", String)
-], OxBoardAIChat.prototype, "errorMessage", void 0);
+], OxAssistantChat.prototype, "errorMessage", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)
-], OxBoardAIChat.prototype, "participants", void 0);
+], OxAssistantChat.prototype, "participants", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "_presenceTick", void 0);
+], OxAssistantChat.prototype, "_presenceTick", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "mentionOpen", void 0);
+], OxAssistantChat.prototype, "mentionOpen", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)
-], OxBoardAIChat.prototype, "mentionResults", void 0);
+], OxAssistantChat.prototype, "mentionResults", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "mentionActiveIndex", void 0);
+], OxAssistantChat.prototype, "mentionActiveIndex", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "mentionOverflow", void 0);
-OxBoardAIChat = OxBoardAIChat_1 = __decorate([
-    customElement('ox-board-ai-chat')
-], OxBoardAIChat);
-export { OxBoardAIChat };
-//# sourceMappingURL=board-ai-chat.js.map
+], OxAssistantChat.prototype, "mentionOverflow", void 0);
+OxAssistantChat = OxAssistantChat_1 = __decorate([
+    customElement('ox-assistant-chat')
+], OxAssistantChat);
+export { OxAssistantChat };
+//# sourceMappingURL=assistant-chat.js.map