@things-factory/board-ai 10.0.1 → 10.0.3

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

@@ -44,6 +44,9 @@ const BOARD_AI_CHAT_MUTATION = gql `
       patchId
       toolUsages
       actions
+      proposals
+      groundingWarnings
+      historyFolded
     }
   }
 `;
@@ -55,6 +58,7 @@ const CHAT_MESSAGES_QUERY = gql `
       content
       relatedPatchId
       toolUsagesJson
+      groundingWarningsJson
       createdAt
       creator {
         name
@@ -73,6 +77,7 @@ const CHAT_MESSAGE_SUBSCRIPTION = gql `
       content
       relatedPatchId
       toolUsagesJson
+      groundingWarningsJson
       createdAt
       creator {
         name
@@ -136,6 +141,13 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
         this.selectedRefids = [];
         /** 코어 보드 편집 도구 사용 여부. 기본 true. 보드를 고칠 이유가 없는 면에서 false. */
         this.boardTools = true;
+        /**
+         * 라이브 상태를 다루는 대화면인가 — true 면 **첫 턴에 도구 호출을 강제**한다.
+         *
+         * 접지 가드는 지어낸 식별자를 잡지만 식별자 없는 상황 서술("바쁘게 움직이고 있다")은 잡지 못한다.
+         * 그건 도구를 부르지 않고 답한 경우이므로, 조회를 먼저 하게 만들어 원천을 막는다.
+         */
+        this.requireGroundingTools = false;
         this.placeholder = '자연어로 명령하세요 (Shift+Enter 줄바꿈, Enter 전송)';
         this.lines = [];
         this.input = '';
@@ -143,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 = [];
@@ -219,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 타인 메시지 구분.
@@ -789,6 +815,21 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
       margin: 0;
       border: 0;
     }
+    /* 시스템 기록은 **곁줄**이다 — 길면 화면을 잡아먹어 대화가 안 보인다(옮겨온 대화를 한 덩어리로
+       넣었을 때 실제로 그랬다). 세 줄로 접고 눌러서 펼친다. */
+    .msg.system .sys-text {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+      white-space: pre-wrap;
+      cursor: pointer;
+    }
+    .msg.system.open .sys-text {
+      display: block;
+      -webkit-line-clamp: unset;
+      overflow: visible;
+    }
 
     .msg.pending {
       opacity: 0.5;
@@ -877,6 +918,150 @@ 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;
+      align-items: flex-start;
+      gap: 6px;
+      margin-top: 4px;
+      padding: 5px 8px;
+      border-radius: 6px;
+      border: 1px solid var(--md-sys-color-error, #dc2626);
+      background: var(--md-sys-color-error-container, #fef2f2);
+      color: var(--md-sys-color-on-error-container, #7f1d1d);
+      font-size: 10.5px;
+      line-height: 1.45;
+    }
+    .grounding-warning md-icon {
+      --md-icon-size: 14px;
+      flex-shrink: 0;
+    }
+    .grounding-warning .ids {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-weight: 600;
+      word-break: break-all;
+    }
+
     /* ── Tool usages fold-able 박스 — AI 도구 호출 trace ───── */
     .tool-usages {
       margin-top: 4px;
@@ -977,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;
@@ -1482,12 +1737,22 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
                         ? html `<div class="msg-label sender">${line.senderName || i18next.t('board-ai.label.participant')}</div>`
                         : nothing}
             <div class="msg-wrap ${line.role} ${isOther ? 'other' : ''}">
-              <div class="msg ${line.role} ${isOther ? 'other' : ''} ${line.pending ? 'pending' : ''}">
+              <div
+                class="msg ${line.role} ${isOther ? 'other' : ''} ${line.pending ? 'pending' : ''} ${line.systemOpen
+                    ? 'open'
+                    : ''}">
                 ${line.pending
                     ? html `<span class="typing-dots"><span></span><span></span><span></span></span>`
                     : isMarkdown
                         ? html `<div class="md-body">${unsafeHTML(renderMarkdown(content))}</div>`
-                        : content}
+                        : line.role === 'system'
+                            ? html `<span
+                          class="sys-text"
+                          title=${i18next.t('board-ai.text.toggle-system-note', { defaultValue: '눌러서 펼치기' })}
+                          @click=${() => this.toggleSystemNote(idx)}
+                          >${content}</span
+                        >`
+                            : content}
                 ${line.patchId
                     ? html `
                       <div class="summary ${this.revertedPatchIds.has(line.patchId) ? 'reverted' : ''}">
@@ -1509,6 +1774,10 @@ 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}
                 ${line.toolUsages && line.toolUsages.length > 0
                     ? this.renderToolUsages(idx, line)
                     : nothing}
@@ -1533,6 +1802,7 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
             </div>
           `
             : nothing}
+      ${this.renderFoldNotice()}
       <div class="composer ${hasMessages ? '' : 'no-actions'}">
         ${hasMessages
             ? html `
@@ -2086,6 +2356,138 @@ 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
+        }));
+    }
+    /**
+     * 접지 경고 — 답이 언급했지만 **근거에 없던** 대상을 알린다.
+     *
+     * 왜 답을 지우지 않는가: 판정은 식별자 대조라 확정이 아니다(예: 사용자가 화면에서 본 이름을
+     * 대화 밖에서 알고 말한 경우). 그래서 답은 그대로 보여주고, 검증되지 않았다는 사실만 붙인다 —
+     * 사용자가 그 대상을 실제 작업의 근거로 삼기 전에 알아야 하는 정보다.
+     */
+    renderGroundingWarning(line) {
+        const ids = line.groundingWarnings ?? [];
+        if (ids.length === 0)
+            return nothing;
+        return html `
+      <div class="grounding-warning" role="note">
+        <md-icon>report</md-icon>
+        <span>
+          ${i18next.t('board-ai.text.ungrounded-mention', {
+            defaultValue: '확인되지 않은 대상을 언급했습니다 — 실제 데이터에 없습니다:'
+        })}
+          <span class="ids">${ids.join(', ')}</span>
+        </span>
+      </div>
+    `;
+    }
     /**
      * "AI 가 이런 도구를 사용했습니다" fold-able 박스.
      *
@@ -2101,41 +2503,136 @@ 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}
       </div>
     `;
     }
+    /** 시스템 기록 펼치기/접기 — 곁줄이 길어도 대화가 가려지지 않게. */
+    toggleSystemNote(idx) {
+        const next = [...this.lines];
+        const line = next[idx];
+        if (!line)
+            return;
+        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];
@@ -2277,6 +2774,7 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
                         hostContext: this.hostContext,
                         toolCategories: this.toolCategories,
                         boardTools: this.boardTools,
+                        requireGroundingTools: this.requireGroundingTools,
                         knownTypes: this.knownTypes,
                         categories: this.categories,
                         componentSchemas: this.componentSchemas,
@@ -2288,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();
@@ -2301,6 +2801,8 @@ let OxBoardAIChat = class OxBoardAIChat extends LitElement {
                 followUp: out.followUp || undefined,
                 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 이벤트 전파
@@ -2384,6 +2886,10 @@ __decorate([
     property({ type: Boolean, attribute: 'board-tools' }),
     __metadata("design:type", Object)
 ], OxBoardAIChat.prototype, "boardTools", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'require-grounding-tools' }),
+    __metadata("design:type", Object)
+], OxBoardAIChat.prototype, "requireGroundingTools", void 0);
 __decorate([
     property({ type: Array }),
     __metadata("design:type", Array)
@@ -2432,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)