@things-factory/ai-assistant 10.1.13 → 10.1.16

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 모드, 메시지 영속 안 됨)
@@ -44,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) {
@@ -154,7 +161,7 @@ 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;
@@ -206,12 +213,18 @@ 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 을 펼친 단계(라인:단계) — 목록은 한 줄 요약으로 훑고 필요한 것만 펼친다. */
         this.openToolSteps = new Set();
         /** 이미 실행을 요청한 제안 키 — 같은 카드를 두 번 눌러 되돌릴 수 없는 명령이 두 번 나가지 않게. */
         this.sentProposals = new Set();
+        /** Proposal keys the host has reported staged. Only the host knows; see `acknowledgeProposalStaged`. */
+        this.stagedProposals = new Set();
         /** 안내를 닫았는가 — 한 번 닫으면 이 세션에서는 다시 띄우지 않는다(잔소리 금지). */
         this.foldNoticeDismissed = false;
         this.busy = false;
@@ -298,10 +311,121 @@ 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);
+        }
+    }
+    /**
+     * 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) {
+        /*
+          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_1.warnedMissingStagedNotice) {
+            OxAssistantChat_1.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. */
+    static { this.warnedMissingStagedNotice = false; }
     /** 현재 로그인 사용자 email — 그룹챗에서 내 메시지 vs 타인 메시지 구분.
      *  email 을 쓰는 이유: /auth/profile 이 항상 내려주는 로그인 식별자이고(비어 있지 않다),
      *  내부 관리키(User.id)를 클라이언트 판정에 의존하지 않기 위함. */
@@ -1092,6 +1216,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 {
@@ -1394,10 +1575,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 (메시지 시작 후) ──────────────── */
@@ -1824,6 +2151,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' : ''}">
@@ -1874,11 +2220,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')}>
@@ -1887,8 +2269,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">
@@ -1925,7 +2331,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
@@ -2200,7 +2606,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))
         }));
@@ -2461,13 +2867,26 @@ let OxBoardAIChat = 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 = 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}
@@ -2475,12 +2894,63 @@ let OxBoardAIChat = 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) => 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
+        }));
+    }
     /**
      * 제안 식별 키 — 같은 조치를 두 번 실행하지 않도록 **효과**(명령·대상·인자)로만 만든다.
      *
@@ -2512,7 +2982,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
@@ -2777,8 +3247,15 @@ 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 {
@@ -2810,22 +3287,34 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
         // 등장하는 것만 추출 — 지운 토큰 제외. 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;
@@ -2833,6 +3322,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
@@ -2895,6 +3402,18 @@ 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', {
@@ -2940,177 +3459,189 @@ 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)
-], OxBoardAIChat.prototype, "prepareSession", void 0);
+], 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)
-], OxBoardAIChat.prototype, "autoAskRequestId", void 0);
+], OxAssistantChat.prototype, "autoAskRequestId", void 0);
 __decorate([
     property({ attribute: false }),
     __metadata("design:type", Function)
-], OxBoardAIChat.prototype, "contextProvider", void 0);
+], 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)
+], OxAssistantChat.prototype, "openToolSteps", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "openToolSteps", void 0);
+], OxAssistantChat.prototype, "sentProposals", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], OxBoardAIChat.prototype, "sentProposals", void 0);
+], OxAssistantChat.prototype, "stagedProposals", 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