@things-factory/board-ai 10.0.2 → 10.0.4

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

@@ -67,11 +67,27 @@ interface ChatLine {
   patchId?: string
   pending?: boolean
   /** AI 가 응답을 만드는 동안 호출한 도구 trace — fold-able 박스에서 노출. */
-  toolUsages?: Array<{ name: string; arguments: any; result: any; kind: 'read' | 'write' | 'unknown' }>
+  toolUsages?: Array<{
+    name: string
+    arguments: any
+    result: any
+    kind: 'read' | 'write' | 'unknown'
+    /** 몇 번째 LLM 턴 — 단계로 읽기 위한 값. */
+    iter?: number
+    /** 이 호출이 어떻게 끝났는가 — 배지. */
+    outcome?: 'ok' | 'rejected' | 'queued' | 'proposed' | 'folded' | 'error'
+  }>
   /** UI 상태: tool usage 박스 펼침 여부 (assistant 메시지마다 독립). */
   toolUsagesOpen?: boolean
   /** UI 상태: 접힌 시스템 기록을 펼쳤는가(곁줄이 대화를 가리지 않게 기본은 3줄 접기). */
   systemOpen?: boolean
+  /**
+   * 조치 제안 — AI 가 **실행하지 않고** 제안한 것들. 사용자가 버튼을 눌러야 실행된다.
+   *
+   * 영속하지 않는다(이번 응답에만 붙는다): 승인은 **지금** 하는 판단이고, 되돌릴 수 없는 조치를
+   * 지난 맥락으로 다시 권하는 것은 위험하다. 다시 필요하면 다시 물어보면 된다.
+   */
+  proposals?: any[]
   /**
    * 접지 경고 — 이 답이 언급했으나 모델이 받은 근거(프롬프트·보드 문맥·이력·도구 결과)에 없던 식별자.
    * 있으면 그 대상은 만들어 낸 것일 수 있다는 주의를 답 아래에 표시한다(답 자체는 그대로 보여준다).
@@ -92,7 +108,9 @@ const BOARD_AI_CHAT_MUTATION = gql`
       patchId
       toolUsages
       actions
+      proposals
       groundingWarnings
+      historyFolded
     }
   }
 `
@@ -319,6 +337,26 @@ export class OxBoardAIChat extends LitElement {
   @state()
   private copiedIdx?: number
 
+  /** 원본 JSON 을 펼친 단계(라인:단계) — 목록은 한 줄 요약으로 훑고 필요한 것만 펼친다. */
+  @state()
+  private openToolSteps = new Set<string>()
+
+  /** 이미 실행을 요청한 제안 키 — 같은 카드를 두 번 눌러 되돌릴 수 없는 명령이 두 번 나가지 않게. */
+  @state()
+  private sentProposals = new Set<string>()
+
+  /**
+   * 이 대화가 길어져 앞부분이 프롬프트에서 접혔다는 **사실**(서버 보고). 주제 이탈을 판정한 것이
+   * 아니다 — 판정하면 오탐이 생기고, 오탐이 생기면 사용자는 안내 자체를 무시한다.
+   * 사실만 알리고 "새 대화로 시작할지" 는 사용자가 정한다.
+   */
+  @state()
+  private historyFolded?: { omitted: number; summarized: boolean }
+
+  /** 안내를 닫았는가 — 한 번 닫으면 이 세션에서는 다시 띄우지 않는다(잔소리 금지). */
+  @state()
+  private foldNoticeDismissed = false
+
   @state()
   private busy = false
 
@@ -1073,6 +1111,126 @@ export class OxBoardAIChat extends LitElement {
       line-height: 1.45;
     }
 
+    /* ── "대화가 길어졌습니다" 안내 — 조용한 한 줄, 강조하지 않는다 ───── */
+    .fold-notice {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin: 0 0 4px;
+      padding: 5px 8px;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 8px;
+      background: var(--md-sys-color-surface-container-low, #f8fafc);
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      font-size: 10.5px;
+      line-height: 1.45;
+    }
+    .fold-notice md-icon {
+      --md-icon-size: 14px;
+      flex-shrink: 0;
+    }
+    .fold-notice .fn-text {
+      flex: 1;
+      min-width: 0;
+    }
+    /* 새 대화 — 권유이므로 강조색 글자만(채운 버튼은 지시처럼 읽힌다). */
+    .fold-notice .fn-new {
+      flex-shrink: 0;
+      border: 0;
+      background: none;
+      color: var(--md-sys-color-primary, #0f766e);
+      font-family: inherit;
+      font-size: 10.5px;
+      font-weight: 650;
+      cursor: pointer;
+      padding: 2px 4px;
+      border-radius: 5px;
+      white-space: nowrap;
+    }
+    .fold-notice .fn-new:hover {
+      background: var(--md-sys-color-surface-container-high, #e2e8f0);
+    }
+    .fold-notice .fn-close {
+      flex-shrink: 0;
+      border: 0;
+      background: none;
+      color: var(--md-sys-color-outline, #94a3b8);
+      cursor: pointer;
+      padding: 0;
+      display: inline-flex;
+    }
+    .fold-notice .fn-close md-icon {
+      --md-icon-size: 13px;
+    }
+
+    /* ── 조치 제안 — AI 는 제안까지, 실행은 사용자 ───── */
+    .proposals {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-top: 6px;
+    }
+    .proposal {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 8px 6px 7px;
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      /* 왼쪽 강조선 — 되돌릴 수 없는 행동임을 조용히 구분한다(색만으로 소리치지 않는다). */
+      border-left: 3px solid var(--md-sys-color-primary, #0f766e);
+      border-radius: 8px;
+      background: var(--md-sys-color-surface-container-low, #f8fafc);
+    }
+    .proposal md-icon {
+      --md-icon-size: 16px;
+      color: var(--md-sys-color-primary, #0f766e);
+      flex-shrink: 0;
+    }
+    .proposal .pbody {
+      display: flex;
+      flex-direction: column;
+      gap: 1px;
+      min-width: 0;
+      flex: 1;
+    }
+    .proposal .plabel {
+      font-size: 11.5px;
+      font-weight: 650;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      overflow-wrap: anywhere;
+    }
+    .proposal .preason {
+      font-size: 10.5px;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      overflow-wrap: anywhere;
+    }
+    /* 실행 버튼 — 이 대화의 유일한 "되돌릴 수 없는" 행동이므로 채운 버튼 하나로 분명하게. */
+    .proposal .run {
+      flex-shrink: 0;
+      padding: 4px 12px;
+      border: 0;
+      border-radius: 999px;
+      background: var(--md-sys-color-primary, #0f766e);
+      color: var(--md-sys-color-on-primary, #ffffff);
+      font-family: inherit;
+      font-size: 11px;
+      font-weight: 650;
+      letter-spacing: 0.01em;
+      cursor: pointer;
+      transition: filter 0.12s;
+    }
+    .proposal .run:hover:not(:disabled) {
+      filter: brightness(1.08);
+    }
+    .proposal .run:disabled {
+      background: var(--md-sys-color-surface-container-high, #e2e8f0);
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      cursor: default;
+    }
+    .proposal.sent {
+      border-left-color: var(--md-sys-color-outline, #94a3b8);
+    }
+
     /* ── 접지 경고 — 근거에 없는 대상을 지목한 답 ───── */
     .grounding-warning {
       display: flex;
@@ -1197,6 +1355,76 @@ export class OxBoardAIChat extends LitElement {
       color: var(--md-sys-color-on-error, #ffffff);
       background: var(--md-sys-color-error, #b91c1c);
     }
+    /* 판단 파이프라인 — 훑어 읽는 목록. 배지로 결과를 구분하고 원본은 눌러서 본다. */
+    .tool-usages.has-problem {
+      border-color: var(--md-sys-color-error, #dc2626);
+    }
+    .tool-usages-counts .tu-flag {
+      font-weight: 650;
+    }
+    .tool-usages-counts .tu-flag.bad {
+      color: var(--md-sys-color-error, #dc2626);
+    }
+    .tu-turn {
+      list-style: none;
+      margin: 4px 0 2px;
+      padding: 0 8px;
+      font-size: 9.5px;
+      font-weight: 650;
+      letter-spacing: 0.04em;
+      color: var(--md-sys-color-outline, #94a3b8);
+      text-transform: uppercase;
+    }
+    .tool-usage-head {
+      cursor: pointer;
+      align-items: center;
+    }
+    .tool-usage-item.outcome-rejected,
+    .tool-usage-item.outcome-error {
+      border-left-color: var(--md-sys-color-error, #dc2626);
+    }
+    .tool-usage-item.outcome-proposed {
+      border-left-color: var(--md-sys-color-primary, #0f766e);
+    }
+    .tool-usage-item.outcome-folded {
+      opacity: 0.7;
+    }
+    .tu-badge {
+      flex-shrink: 0;
+      padding: 0 5px;
+      border-radius: 999px;
+      font-size: 9px;
+      font-weight: 700;
+      line-height: 15px;
+      background: var(--md-sys-color-surface-container-high, #e2e8f0);
+      color: var(--md-sys-color-on-surface-variant, #475569);
+    }
+    .tu-badge.rejected,
+    .tu-badge.error {
+      background: var(--md-sys-color-error-container, #fef2f2);
+      color: var(--md-sys-color-error, #dc2626);
+    }
+    .tu-badge.proposed {
+      background: var(--md-sys-color-primary, #0f766e);
+      color: var(--md-sys-color-on-primary, #fff);
+    }
+    /* 한 줄 요약 — 넘치면 자른다. 목록은 훑는 곳이고 읽는 곳이 아니다. */
+    .tu-line {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--md-sys-color-on-surface-variant, #475569);
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 9.5px;
+    }
+    .tu-more {
+      --md-icon-size: 13px;
+      flex-shrink: 0;
+      color: var(--md-sys-color-outline, #94a3b8);
+    }
+
     .tool-usage-args,
     .tool-usage-result {
       margin: 2px 0 0;
@@ -1740,6 +1968,7 @@ export class OxBoardAIChat extends LitElement {
                 ${line.followUp
                   ? html`<div class="followup">${unsafeHTML(renderMarkdown(line.followUp.trim()))}</div>`
                   : nothing}
+                ${line.proposals && line.proposals.length > 0 ? this.renderProposals(line) : nothing}
                 ${line.groundingWarnings && line.groundingWarnings.length > 0
                   ? this.renderGroundingWarning(line)
                   : nothing}
@@ -1767,6 +1996,7 @@ export class OxBoardAIChat extends LitElement {
             </div>
           `
         : nothing}
+      ${this.renderFoldNotice()}
       <div class="composer ${hasMessages ? '' : 'no-actions'}">
         ${hasMessages
           ? html`
@@ -2398,6 +2628,125 @@ export class OxBoardAIChat extends LitElement {
     `
   }
 
+  /**
+   * "대화가 길어졌습니다" 안내 — **사실만** 알리고 결정은 사용자에게 맡긴다.
+   *
+   * 주제가 바뀌었는지 판정하지 않는다: 판정하면 오탐이 생기고, 오탐이 생기면 사용자는 안내 자체를
+   * 무시한다(접지 경고에서 배운 것과 같다). 근거는 "앞부분이 프롬프트에서 접혔다" 는 객관적 사실뿐이다.
+   *
+   * 왜 알려야 하는가: 한 대화에 주제가 여럿 섞이면 (1) 옛 맥락이 새 답을 오염시키고 (2) 요약이
+   * 뭉개지고 (3) 목록의 대화 이름이 거짓말이 된다. 그걸 아는 사람은 사용자뿐이다.
+   */
+  private renderFoldNotice() {
+    const folded = this.historyFolded
+    if (!folded || this.foldNoticeDismissed) return nothing
+    return html`
+      <div class="fold-notice">
+        <md-icon>unfold_less</md-icon>
+        <span class="fn-text">
+          ${folded.summarized
+            ? i18next.t('board-ai.text.history-folded-summarized', {
+                count: folded.omitted,
+                defaultValue: '대화가 길어져 앞부분 {count}개가 요약으로 접혔습니다. 다른 주제라면 새 대화가 낫습니다.'
+              })
+            : i18next.t('board-ai.text.history-folded', {
+                count: folded.omitted,
+                defaultValue: '대화가 길어져 앞부분 {count}개가 생략되었습니다. 다른 주제라면 새 대화가 낫습니다.'
+              })}
+        </span>
+        <button class="fn-new" @click=${this.startNewFromNotice}>
+          ${i18next.t('board-ai.button.new-chat')}
+        </button>
+        <button class="fn-close" title=${i18next.t('board-ai.button.close')} @click=${() => (this.foldNoticeDismissed = true)}>
+          <md-icon>close</md-icon>
+        </button>
+      </div>
+    `
+  }
+
+  /**
+   * 새 대화로 — **맥락을 옮기지 않는다.** 주제를 바꾸려고 새로 시작하는 것이므로, 옮기면 그 이유가
+   * 사라진다(승격은 이어가려는 것이고 이건 끊으려는 것이다). 세션 생성은 호스트의 몫이다.
+   */
+  private startNewFromNotice = () => {
+    this.foldNoticeDismissed = true
+    this.dispatchEvent(new CustomEvent('board-ai-start-new-session', { bubbles: true, composed: true }))
+  }
+
+  /**
+   * 조치 제안 카드 — AI 는 제안까지, **실행은 사용자**.
+   *
+   * 왜 카드인가: 되돌릴 수 없는 현장 명령을 문장 속 링크로 흘리면 실수로 눌린다. 무엇을·왜 하는지
+   * 한 줄로 보이고 실행이 **분명한 한 번의 행동**이어야 한다.
+   * 실행 결과는 호스트가 **대화에 기록**한다 — 누가 무엇을 실행했는지가 협의 이력에 남아야 한다.
+   */
+  private renderProposals(line: ChatLine) {
+    const items = line.proposals ?? []
+    if (items.length === 0) return nothing
+    return html`
+      <div class="proposals">
+        ${items.map(p => {
+          const key = this.proposalKey(p)
+          const sent = this.sentProposals.has(key)
+          return html`
+            <div class="proposal ${sent ? 'sent' : ''}">
+              <md-icon>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('board-ai.text.proposal-sent', { defaultValue: '실행 요청됨' })
+                       : i18next.t('board-ai.button.run-proposal', { defaultValue: '실행' })}
+              </button>
+            </div>
+          `
+        })}
+      </div>
+    `
+  }
+
+  /**
+   * 제안 식별 키 — 같은 조치를 두 번 실행하지 않도록 **효과**(명령·대상·인자)로만 만든다.
+   *
+   * 인자는 **키 순서를 정렬**해 직렬화한다: 같은 인자를 다른 순서로 받았을 뿐인데 키가 달라지면
+   * 한 카드를 실행한 뒤에도 다른 카드가 살아 있어 **같은 명령이 두 번 나간다**(실제로 그랬다).
+   * 설명 문구(label·reason)는 키에 넣지 않는다 — 문구가 달라도 같은 조치다.
+   */
+  private proposalKey(p: any): string {
+    const stable = (v: any): string => {
+      if (v === null || typeof v !== 'object') return JSON.stringify(v ?? null)
+      if (Array.isArray(v)) return `[${v.map(stable).join(',')}]`
+      return `{${Object.keys(v)
+        .sort()
+        .map(k => `${JSON.stringify(k)}:${stable(v[k])}`)
+        .join(',')}}`
+    }
+    try {
+      return `${p?.command ?? ''}|${p?.instanceId ?? ''}|${stable(p?.args)}`
+    } catch {
+      return `${p?.command ?? ''}|${p?.instanceId ?? ''}`
+    }
+  }
+
+  /**
+   * 실행은 호스트가 한다 — 이 컴포넌트는 도메인(트윈 명령 채널)을 모른다.
+   * 확인 대화·명령 전송·결과 기록은 호스트의 몫이고, 여기서는 중복 클릭만 막는다.
+   */
+  private executeProposal(p: any, key: string) {
+    this.sentProposals = new Set(this.sentProposals).add(key)
+    this.dispatchEvent(
+      new CustomEvent('board-ai-proposal-execute', {
+        detail: { proposal: p, sessionId: this.sessionId },
+        bubbles: true,
+        composed: true
+      })
+    )
+  }
+
   /**
    * 접지 경고 — 답이 언급했지만 **근거에 없던** 대상을 알린다.
    *
@@ -2435,37 +2784,39 @@ export class OxBoardAIChat extends LitElement {
     const readCount = usages.filter(u => u.kind === 'read').length
     const writeCount = usages.filter(u => u.kind === 'write').length
     const toolsLabel = i18next.t('board-ai.text.tools-used', { defaultValue: '도구 사용' })
+    /* 눈에 걸려야 하는 것을 머리줄에 올린다 — 거절·접힘이 있으면 펼치기 전에 보인다.
+     * (이번 사고들이 전부 그것이었다: 인자 빠진 호출이 거절됐고, 중복 제안이 접혔다.) */
+    const problems = usages.filter(u => u.outcome === 'rejected' || u.outcome === 'error').length
+    const folded = usages.filter(u => u.outcome === 'folded').length
     return html`
-      <div class="tool-usages ${open ? 'open' : ''}">
+      <div class="tool-usages ${open ? 'open' : ''} ${problems ? 'has-problem' : ''}">
         <button
           class="tool-usages-header"
           aria-expanded=${open}
           @click=${() => this.toggleToolUsages(idx)}>
-          <md-icon class="tool-usages-icon">${open ? 'expand_less' : 'build'}</md-icon>
+          <md-icon class="tool-usages-icon">${open ? 'expand_less' : 'account_tree'}</md-icon>
           <span class="tool-usages-summary">
             <strong>${usages.length}</strong> ${toolsLabel}
-            <span class="tool-usages-counts">· read ${readCount} · write ${writeCount}</span>
+            <span class="tool-usages-counts">
+              · read ${readCount} · write ${writeCount}${problems
+                ? html` · <span class="tu-flag bad">${i18next.t('board-ai.text.tool-rejected-count', {
+                    count: problems,
+                    defaultValue: '거절 {count}'
+                  })}</span>`
+                : nothing}${folded
+                ? html` · <span class="tu-flag">${i18next.t('board-ai.text.tool-folded-count', {
+                    count: folded,
+                    defaultValue: '접힘 {count}'
+                  })}</span>`
+                : nothing}
+            </span>
           </span>
           <md-icon class="tool-usages-chevron">${open ? 'expand_less' : 'expand_more'}</md-icon>
         </button>
         ${open
           ? html`
               <ol class="tool-usages-list">
-                ${usages.map(
-                  (u, i) => html`
-                    <li class="tool-usage-item kind-${u.kind}">
-                      <div class="tool-usage-head">
-                        <span class="tool-usage-step">${i + 1}.</span>
-                        <span class="tool-usage-name">${u.name}</span>
-                        <span class="tool-usage-kind kind-${u.kind}">${u.kind}</span>
-                      </div>
-                      ${u.arguments && Object.keys(u.arguments).length > 0
-                        ? html`<pre class="tool-usage-args">${this.formatJson(u.arguments)}</pre>`
-                        : nothing}
-                      <pre class="tool-usage-result">${this.formatJson(u.result)}</pre>
-                    </li>
-                  `
-                )}
+                ${usages.map((u, i) => this.renderToolStep(idx, u, i, usages[i - 1]))}
               </ol>
             `
           : nothing}
@@ -2482,6 +2833,90 @@ export class OxBoardAIChat extends LitElement {
     this.lines = next
   }
 
+  /**
+   * 판단 과정의 한 단계 — 턴 구분 · 도구 · 배지 · **한 줄 요약**.
+   *
+   * 원본 JSON 을 처음부터 펼쳐 두면 눈이 흐려져 정작 중요한 것(무엇이 거절됐는지, 무엇이 접혔는지)이
+   * 안 보인다. 한 줄로 줄이고 원본은 항목별로 눌러서 본다.
+   */
+  private renderToolStep(lineIdx: number, u: any, i: number, prev: any) {
+    const outcome = u.outcome ?? 'ok'
+    const openKey = `${lineIdx}:${i}`
+    const open = this.openToolSteps.has(openKey)
+    /* 턴이 바뀌면 구분선 — "한 턴 안에서 정정했는지, 다음 턴에서 했는지" 가 진단의 절반이다. */
+    const newTurn = typeof u.iter === 'number' && (!prev || prev.iter !== u.iter)
+    return html`
+      ${newTurn
+        ? html`<li class="tu-turn">
+            ${i18next.t('board-ai.text.tool-turn', { n: (u.iter ?? 0) + 1, defaultValue: '{n}번째 판단' })}
+          </li>`
+        : nothing}
+      <li class="tool-usage-item kind-${u.kind} outcome-${outcome}">
+        <div class="tool-usage-head" @click=${() => this.toggleToolStep(openKey)}>
+          <span class="tool-usage-step">${i + 1}.</span>
+          <span class="tool-usage-name">${u.name}</span>
+          <span class="tu-badge ${outcome}">${this.outcomeLabel(outcome)}</span>
+          <span class="tu-line" title=${this.stepSummary(u)}>${this.stepSummary(u)}</span>
+          <md-icon class="tu-more">${open ? 'expand_less' : 'expand_more'}</md-icon>
+        </div>
+        ${open
+          ? html`
+              ${u.arguments && Object.keys(u.arguments).length > 0
+                ? html`<pre class="tool-usage-args">${this.formatJson(u.arguments)}</pre>`
+                : nothing}
+              <pre class="tool-usage-result">${this.formatJson(u.result)}</pre>
+            `
+          : nothing}
+      </li>
+    `
+  }
+
+  /** 배지 문구 — 코드가 아니라 사람 말로. */
+  private outcomeLabel(outcome: string): string {
+    const map: Record<string, [string, string]> = {
+      ok: ['board-ai.text.outcome-ok', '조회'],
+      rejected: ['board-ai.text.outcome-rejected', '거절'],
+      queued: ['board-ai.text.outcome-queued', '적용 예정'],
+      proposed: ['board-ai.text.outcome-proposed', '제안'],
+      folded: ['board-ai.text.outcome-folded', '중복 접힘'],
+      error: ['board-ai.text.outcome-error', '오류']
+    }
+    const [key, fallback] = map[outcome] ?? map.ok
+    return i18next.t(key, { defaultValue: fallback })
+  }
+
+  /**
+   * 결과 한 줄 — 무엇을 얻었는지/왜 막혔는지만. 목록에서 훑어 읽을 수 있어야 한다.
+   * 거절이면 사유를, 조회면 대표적인 개수를, 제안이면 무엇을 제안했는지.
+   */
+  private stepSummary(u: any): string {
+    const r = u?.result
+    if (!r || typeof r !== 'object') return typeof r === 'string' ? r.slice(0, 80) : ''
+    if (u.outcome === 'rejected' || u.outcome === 'error') {
+      return String(r.errorCode || r.error || r.issues?.[0]?.message || '').slice(0, 80)
+    }
+    if (u.outcome === 'proposed' || u.outcome === 'folded') {
+      return [r.command, r.args && Object.keys(r.args).length ? this.formatJson(r.args) : '']
+        .filter(Boolean)
+        .join(' ')
+        .slice(0, 80)
+    }
+    /* 조회 결과 — 배열 길이가 있는 필드를 골라 "무엇이 몇 개" 로 요약한다(전체 덤프 금지). */
+    const counts = Object.keys(r)
+      .filter(k => Array.isArray(r[k]) && r[k].length > 0)
+      .slice(0, 2)
+      .map(k => `${k} ${r[k].length}`)
+    if (counts.length) return counts.join(' · ')
+    const keys = Object.keys(r).slice(0, 4)
+    return keys.map(k => (typeof r[k] === 'object' ? k : `${k} ${r[k]}`)).join(' · ').slice(0, 80)
+  }
+
+  private toggleToolStep(key: string) {
+    const next = new Set(this.openToolSteps)
+    next.has(key) ? next.delete(key) : next.add(key)
+    this.openToolSteps = next
+  }
+
   private toggleToolUsages(idx: number) {
     const next = [...this.lines]
     const line = next[idx]
@@ -2650,6 +3085,9 @@ export class OxBoardAIChat extends LitElement {
       const out = result.data?.boardAIChat
       if (!out) throw new Error(i18next.t('board-ai.text.empty-response'))
 
+      /* 대화가 길어졌다는 서버 보고 — 닫지 않았다면 안내를 띄운다. */
+      this.historyFolded = out.historyFolded ?? undefined
+
       // 전송 성공 — picks 정리 (다음 메시지부터는 새 picks 만)
       this.pickedMentions.clear()
       this.pickedUserMentions.clear()
@@ -2665,6 +3103,7 @@ export class OxBoardAIChat extends LitElement {
         patchId: out.patchId || undefined,
         toolUsages: Array.isArray(out.toolUsages) ? out.toolUsages : undefined,
         groundingWarnings: Array.isArray(out.groundingWarnings) ? out.groundingWarnings : undefined,
+        proposals: Array.isArray(out.proposals) ? out.proposals : undefined,
         pending: false
       })
 

package/client/components/chat-echo-dedup.test.ts

@@ -154,9 +154,24 @@ describe('내 발신 에코 흡수 (대기 중 중복 렌더 방지)', () => {
     expect(r.lines[2]).toMatchObject({ id: 'S9', senderEmail: 'other@x.com' })
   })
 
-  it('assistant 방송은 흡수 대상이 아니다(append)', () => {
-    const r = receiveRemoteMessage(pending(), new Set(), { id: 'S2', role: 'assistant', content: '답' })!
-    expect(r.lines).toHaveLength(3)
+  /* 이 테스트는 예전에 "assistant 방송은 흡수하지 않고 붙인다" 를 규칙으로 굳혀 두고 있었다.
+   * 그것이 실제 결함이었다 — 붙이면 뒤이은 mutation 응답이 대기 줄을 지우고, 그 줄에만 있던
+   * **영속되지 않는 응답 데이터**(조치 제안 카드·접지 경고)가 함께 사라진다. 규칙을 바로잡는다. */
+  it('assistant 방송도 대기 중인 AI 줄에 흡수한다 — 붙이면 제안 카드가 사라진다', () => {
+    const lines = [
+      { _localId: 'L1', role: 'user', content: '질문', senderEmail: 'me@x.com' },
+      { _localId: 'L2', role: 'assistant', content: '', pending: true }
+    ]
+    const r = receiveRemoteMessage(lines as any, new Set(), { id: 'S2', role: 'assistant', content: '답' })!
+    expect(r.lines).toHaveLength(2)
+    expect(r.lines[1]).toMatchObject({ id: 'S2', content: '답', pending: false })
+  })
+
+  it('대기 중인 AI 줄이 없으면 붙인다 — 다른 참여자가 부른 답변', () => {
+    const settled = [{ id: 'S0', role: 'user', content: '질문' }]
+    const r = receiveRemoteMessage(settled as any, new Set(), { id: 'S2', role: 'assistant', content: '답' })!
+    expect(r.lines).toHaveLength(2)
+    expect(r.lines[1].id).toBe('S2')
   })
 
   it('흡수한 뒤 mutation 응답 reconcile 은 그 줄을 지우지 않고 patch 를 병합한다', () => {
@@ -172,3 +187,44 @@ describe('내 발신 에코 흡수 (대기 중 중복 렌더 방지)', () => {
     expect(after.lines[0]._localId).toBeUndefined()
   })
 })
+
+describe('AI 답변 에코 흡수 — 영속되지 않는 응답 데이터를 잃지 않기', () => {
+  /* 실제 사고: 방송이 mutation 응답보다 먼저 와서 assistant 줄이 새로 붙고, 뒤이어 응답이 대기 줄을
+   * 지웠다. 대기 줄에만 있던 **조치 제안 카드**가 그때 사라졌다(도구는 분명히 호출됐는데도). */
+  const pendingAi = () => [
+    { id: 'u1', role: 'user', content: '지게차 한 대 추가해줘' },
+    { _localId: 'L2', role: 'assistant', content: '', pending: true, proposals: [{ command: 'resource.add' }] }
+  ]
+
+  it('대기 중인 AI 줄에 흡수한다 — 새 줄로 붙이지 않는다', () => {
+    const r = receiveRemoteMessage(pendingAi() as any, new Set(), {
+      id: 'a1',
+      role: 'assistant',
+      content: '제안해 두었습니다.'
+    })!
+    expect(r.lines).toHaveLength(2)
+    expect(r.lines[1].id).toBe('a1')
+    expect(r.lines[1].content).toBe('제안해 두었습니다.')
+  })
+
+  it('제안 카드를 유지한다 — 영속되지 않는 값이라 잃으면 화면에서 버튼이 사라진다', () => {
+    const r = receiveRemoteMessage(pendingAi() as any, new Set(), {
+      id: 'a1',
+      role: 'assistant',
+      content: '제안해 두었습니다.'
+    })!
+    expect(r.lines[1].proposals).toEqual([{ command: 'resource.add' }])
+  })
+
+  it('대기 표시를 푼다 — 방송이 먼저 오면 답이 더 빨리 보인다', () => {
+    const r = receiveRemoteMessage(pendingAi() as any, new Set(), { id: 'a1', role: 'assistant', content: '답' })!
+    expect(r.lines[1].pending).toBe(false)
+  })
+
+  it('대기 줄이 없으면(다른 참여자가 부른 AI 답변) 새 줄로 붙인다', () => {
+    const lines = [{ id: 'u1', role: 'user', content: '질문' }]
+    const r = receiveRemoteMessage(lines as any, new Set(), { id: 'a9', role: 'assistant', content: '답' })!
+    expect(r.lines).toHaveLength(2)
+    expect(r.lines[1].id).toBe('a9')
+  })
+})

package/client/components/chat-echo-dedup.ts

@@ -72,6 +72,35 @@ export function receiveRemoteMessage(
   /* 내 발신 에코 흡수 — `_localId` 가 있는 줄은 이 클라이언트가 만든 것뿐이다.
    * 발신자 판정: 양쪽 email 이 있으면 같아야 하고, 방송에 발신자 email 이 없으면(단일 사용자·구형)
    * 내 것으로 본다. 다른 사용자의 메시지가 내 대기 줄을 삼키지 않도록 email 이 다르면 흡수하지 않는다. */
+  /* AI 답변 에코 흡수 — 사용자 발화와 **같은 이유**로 붙이지 않고 대기 줄에 흡수한다.
+   *
+   * 왜 필요한가(실제 사고): 방송은 mutation 응답보다 먼저 도착할 수 있다. 예전에는 assistant 방송을
+   * 새 줄로 붙였고, 뒤이어 mutation 응답이 "같은 서버 id 를 가진 다른 줄이 있다" 며 **대기 줄을 지웠다**.
+   * 그런데 대기 줄에만 있는 것이 있다 — **영속되지 않는 응답 데이터**(조치 제안 카드·접지 경고).
+   * 그래서 화면에서 실행 버튼이 사라졌다(제안 도구는 분명히 호출됐는데도).
+   *
+   * 흡수하면 서버가 보낸 본문(멘션 마커 포함)을 그 줄에 입히면서 대기 표시를 풀 수 있어, 답이 더
+   * 빨리 보이는 효과도 있다. */
+  if (m.role === 'assistant') {
+    const idx = lines.findIndex(l => l.role === 'assistant' && !l.id && !!l._localId)
+    if (idx >= 0) {
+      const nextLines = [...lines]
+      nextLines[idx] = {
+        ...nextLines[idx],
+        id: m.id,
+        /* 본문·영속 데이터는 서버 것으로 갱신하고, 이 줄이 들고 있던 값(제안 등)은 유지한다. */
+        content: m.content,
+        patchId: m.relatedPatchId ?? nextLines[idx].patchId,
+        toolUsages: Array.isArray(m.toolUsagesJson) ? m.toolUsagesJson : nextLines[idx].toolUsages,
+        groundingWarnings: Array.isArray(m.groundingWarningsJson)
+          ? m.groundingWarningsJson
+          : nextLines[idx].groundingWarnings,
+        pending: false
+      }
+      return { lines: nextLines, seen: nextSeen }
+    }
+  }
+
   if (m.role === 'user') {
     const echoEmail = m.creator?.email
     const idx = lines.findIndex(