@things-factory/board-ai 10.0.2 → 10.0.4

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

@@ -135,6 +135,18 @@ export declare class OxBoardAIChat extends LitElement {
     private toastMessage?;
     /** 복사 confirmation feedback (메시지 idx → 짧은 시간 동안 ✓ 표시) */
     private copiedIdx?;
+    /** 원본 JSON 을 펼친 단계(라인:단계) — 목록은 한 줄 요약으로 훑고 필요한 것만 펼친다. */
+    private openToolSteps;
+    /** 이미 실행을 요청한 제안 키 — 같은 카드를 두 번 눌러 되돌릴 수 없는 명령이 두 번 나가지 않게. */
+    private sentProposals;
+    /**
+     * 이 대화가 길어져 앞부분이 프롬프트에서 접혔다는 **사실**(서버 보고). 주제 이탈을 판정한 것이
+     * 아니다 — 판정하면 오탐이 생기고, 오탐이 생기면 사용자는 안내 자체를 무시한다.
+     * 사실만 알리고 "새 대화로 시작할지" 는 사용자가 정한다.
+     */
+    private historyFolded?;
+    /** 안내를 닫았는가 — 한 번 닫으면 이 세션에서는 다시 띄우지 않는다(잔소리 금지). */
+    private foldNoticeDismissed;
     private busy;
     private errorMessage?;
     /** C4 presence/roster — 세션 참여자 목록. lastSeenAt 으로 online 판정. */
@@ -268,6 +280,42 @@ export declare class OxBoardAIChat extends LitElement {
      *   system    : 없음
      */
     private renderMessageActions;
+    /**
+     * "대화가 길어졌습니다" 안내 — **사실만** 알리고 결정은 사용자에게 맡긴다.
+     *
+     * 주제가 바뀌었는지 판정하지 않는다: 판정하면 오탐이 생기고, 오탐이 생기면 사용자는 안내 자체를
+     * 무시한다(접지 경고에서 배운 것과 같다). 근거는 "앞부분이 프롬프트에서 접혔다" 는 객관적 사실뿐이다.
+     *
+     * 왜 알려야 하는가: 한 대화에 주제가 여럿 섞이면 (1) 옛 맥락이 새 답을 오염시키고 (2) 요약이
+     * 뭉개지고 (3) 목록의 대화 이름이 거짓말이 된다. 그걸 아는 사람은 사용자뿐이다.
+     */
+    private renderFoldNotice;
+    /**
+     * 새 대화로 — **맥락을 옮기지 않는다.** 주제를 바꾸려고 새로 시작하는 것이므로, 옮기면 그 이유가
+     * 사라진다(승격은 이어가려는 것이고 이건 끊으려는 것이다). 세션 생성은 호스트의 몫이다.
+     */
+    private startNewFromNotice;
+    /**
+     * 조치 제안 카드 — AI 는 제안까지, **실행은 사용자**.
+     *
+     * 왜 카드인가: 되돌릴 수 없는 현장 명령을 문장 속 링크로 흘리면 실수로 눌린다. 무엇을·왜 하는지
+     * 한 줄로 보이고 실행이 **분명한 한 번의 행동**이어야 한다.
+     * 실행 결과는 호스트가 **대화에 기록**한다 — 누가 무엇을 실행했는지가 협의 이력에 남아야 한다.
+     */
+    private renderProposals;
+    /**
+     * 제안 식별 키 — 같은 조치를 두 번 실행하지 않도록 **효과**(명령·대상·인자)로만 만든다.
+     *
+     * 인자는 **키 순서를 정렬**해 직렬화한다: 같은 인자를 다른 순서로 받았을 뿐인데 키가 달라지면
+     * 한 카드를 실행한 뒤에도 다른 카드가 살아 있어 **같은 명령이 두 번 나간다**(실제로 그랬다).
+     * 설명 문구(label·reason)는 키에 넣지 않는다 — 문구가 달라도 같은 조치다.
+     */
+    private proposalKey;
+    /**
+     * 실행은 호스트가 한다 — 이 컴포넌트는 도메인(트윈 명령 채널)을 모른다.
+     * 확인 대화·명령 전송·결과 기록은 호스트의 몫이고, 여기서는 중복 클릭만 막는다.
+     */
+    private executeProposal;
     /**
      * 접지 경고 — 답이 언급했지만 **근거에 없던** 대상을 알린다.
      *
@@ -286,6 +334,21 @@ export declare class OxBoardAIChat extends LitElement {
     private renderToolUsages;
     /** 시스템 기록 펼치기/접기 — 곁줄이 길어도 대화가 가려지지 않게. */
     private toggleSystemNote;
+    /**
+     * 판단 과정의 한 단계 — 턴 구분 · 도구 · 배지 · **한 줄 요약**.
+     *
+     * 원본 JSON 을 처음부터 펼쳐 두면 눈이 흐려져 정작 중요한 것(무엇이 거절됐는지, 무엇이 접혔는지)이
+     * 안 보인다. 한 줄로 줄이고 원본은 항목별로 눌러서 본다.
+     */
+    private renderToolStep;
+    /** 배지 문구 — 코드가 아니라 사람 말로. */
+    private outcomeLabel;
+    /**
+     * 결과 한 줄 — 무엇을 얻었는지/왜 막혔는지만. 목록에서 훑어 읽을 수 있어야 한다.
+     * 거절이면 사유를, 조회면 대표적인 개수를, 제안이면 무엇을 제안했는지.
+     */
+    private stepSummary;
+    private toggleToolStep;
     private toggleToolUsages;
     private formatJson;
     private copyMessage;

package/dist-client/client/components/board-ai-chat.js

@@ -44,7 +44,9 @@ const BOARD_AI_CHAT_MUTATION = gql `
       patchId
       toolUsages
       actions
+      proposals
       groundingWarnings
+      historyFolded
     }
   }
 `;
@@ -153,6 +155,12 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
         this.revertedPatchIds = new Set();
         /** mini action — 인라인 예시 토글 */
         this.examplesOpen = false;
+        /** 원본 JSON 을 펼친 단계(라인:단계) — 목록은 한 줄 요약으로 훑고 필요한 것만 펼친다. */
+        this.openToolSteps = new Set();
+        /** 이미 실행을 요청한 제안 키 — 같은 카드를 두 번 눌러 되돌릴 수 없는 명령이 두 번 나가지 않게. */
+        this.sentProposals = new Set();
+        /** 안내를 닫았는가 — 한 번 닫으면 이 세션에서는 다시 띄우지 않는다(잔소리 금지). */
+        this.foldNoticeDismissed = false;
         this.busy = false;
         /** C4 presence/roster — 세션 참여자 목록. lastSeenAt 으로 online 판정. */
         this.participants = [];
@@ -229,6 +237,14 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
                 composed: true
             }));
         };
+        /**
+         * 새 대화로 — **맥락을 옮기지 않는다.** 주제를 바꾸려고 새로 시작하는 것이므로, 옮기면 그 이유가
+         * 사라진다(승격은 이어가려는 것이고 이건 끊으려는 것이다). 세션 생성은 호스트의 몫이다.
+         */
+        this.startNewFromNotice = () => {
+            this.foldNoticeDismissed = true;
+            this.dispatchEvent(new CustomEvent('board-ai-start-new-session', { bubbles: true, composed: true }));
+        };
     }
     static { OxBoardAIChat_1 = this; }
     /** 현재 로그인 사용자 email — 그룹챗에서 내 메시지 vs 타인 메시지 구분.
@@ -902,6 +918,126 @@ let OxBoardAIChat = 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;
@@ -1026,6 +1162,76 @@ let OxBoardAIChat = 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;
@@ -1568,6 +1774,7 @@ let OxBoardAIChat = 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}
@@ -1595,6 +1802,7 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
             </div>
           `
             : nothing}
+      ${this.renderFoldNotice()}
       <div class="composer ${hasMessages ? '' : 'no-actions'}">
         ${hasMessages
             ? html `
@@ -2148,6 +2356,115 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
       </div>
     `;
     }
+    /**
+     * "대화가 길어졌습니다" 안내 — **사실만** 알리고 결정은 사용자에게 맡긴다.
+     *
+     * 주제가 바뀌었는지 판정하지 않는다: 판정하면 오탐이 생기고, 오탐이 생기면 사용자는 안내 자체를
+     * 무시한다(접지 경고에서 배운 것과 같다). 근거는 "앞부분이 프롬프트에서 접혔다" 는 객관적 사실뿐이다.
+     *
+     * 왜 알려야 하는가: 한 대화에 주제가 여럿 섞이면 (1) 옛 맥락이 새 답을 오염시키고 (2) 요약이
+     * 뭉개지고 (3) 목록의 대화 이름이 거짓말이 된다. 그걸 아는 사람은 사용자뿐이다.
+     */
+    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>
+    `;
+    }
+    /**
+     * 조치 제안 카드 — AI 는 제안까지, **실행은 사용자**.
+     *
+     * 왜 카드인가: 되돌릴 수 없는 현장 명령을 문장 속 링크로 흘리면 실수로 눌린다. 무엇을·왜 하는지
+     * 한 줄로 보이고 실행이 **분명한 한 번의 행동**이어야 한다.
+     * 실행 결과는 호스트가 **대화에 기록**한다 — 누가 무엇을 실행했는지가 협의 이력에 남아야 한다.
+     */
+    renderProposals(line) {
+        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)는 키에 넣지 않는다 — 문구가 달라도 같은 조치다.
+     */
+    proposalKey(p) {
+        const stable = (v) => {
+            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 ?? ''}`;
+        }
+    }
+    /**
+     * 실행은 호스트가 한다 — 이 컴포넌트는 도메인(트윈 명령 채널)을 모른다.
+     * 확인 대화·명령 전송·결과 기록은 호스트의 몫이고, 여기서는 중복 클릭만 막는다.
+     */
+    executeProposal(p, key) {
+        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
+        }));
+    }
     /**
      * 접지 경고 — 답이 언급했지만 **근거에 없던** 대상을 알린다.
      *
@@ -2186,35 +2503,39 @@ let OxBoardAIChat = 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}
@@ -2230,6 +2551,88 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
         next[idx] = { ...line, systemOpen: !line.systemOpen };
         this.lines = next;
     }
+    /**
+     * 판단 과정의 한 단계 — 턴 구분 · 도구 · 배지 · **한 줄 요약**.
+     *
+     * 원본 JSON 을 처음부터 펼쳐 두면 눈이 흐려져 정작 중요한 것(무엇이 거절됐는지, 무엇이 접혔는지)이
+     * 안 보인다. 한 줄로 줄이고 원본은 항목별로 눌러서 본다.
+     */
+    renderToolStep(lineIdx, u, i, prev) {
+        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>
+    `;
+    }
+    /** 배지 문구 — 코드가 아니라 사람 말로. */
+    outcomeLabel(outcome) {
+        const map = {
+            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 });
+    }
+    /**
+     * 결과 한 줄 — 무엇을 얻었는지/왜 막혔는지만. 목록에서 훑어 읽을 수 있어야 한다.
+     * 거절이면 사유를, 조회면 대표적인 개수를, 제안이면 무엇을 제안했는지.
+     */
+    stepSummary(u) {
+        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);
+    }
+    toggleToolStep(key) {
+        const next = new Set(this.openToolSteps);
+        next.has(key) ? next.delete(key) : next.add(key);
+        this.openToolSteps = next;
+    }
     toggleToolUsages(idx) {
         const next = [...this.lines];
         const line = next[idx];
@@ -2383,6 +2786,8 @@ let OxBoardAIChat = 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();
@@ -2397,6 +2802,7 @@ let OxBoardAIChat = 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
             });
             // 호스트로 patch 이벤트 전파
@@ -2532,6 +2938,22 @@ __decorate([
     state(),
     __metadata("design:type", Number)
 ], OxBoardAIChat.prototype, "copiedIdx", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "openToolSteps", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "sentProposals", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "historyFolded", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "foldNoticeDismissed", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)