@things-factory/board-ai 10.0.1 → 10.0.3

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

@@ -67,9 +67,32 @@ 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[]
+  /**
+   * 접지 경고 — 이 답이 언급했으나 모델이 받은 근거(프롬프트·보드 문맥·이력·도구 결과)에 없던 식별자.
+   * 있으면 그 대상은 만들어 낸 것일 수 있다는 주의를 답 아래에 표시한다(답 자체는 그대로 보여준다).
+   */
+  groundingWarnings?: string[]
 }
 
 const BOARD_AI_CHAT_MUTATION = gql`
@@ -85,6 +108,9 @@ const BOARD_AI_CHAT_MUTATION = gql`
       patchId
       toolUsages
       actions
+      proposals
+      groundingWarnings
+      historyFolded
     }
   }
 `
@@ -97,6 +123,7 @@ const CHAT_MESSAGES_QUERY = gql`
       content
       relatedPatchId
       toolUsagesJson
+      groundingWarningsJson
       createdAt
       creator {
         name
@@ -116,6 +143,7 @@ const CHAT_MESSAGE_SUBSCRIPTION = gql`
       content
       relatedPatchId
       toolUsagesJson
+      groundingWarningsJson
       createdAt
       creator {
         name
@@ -253,6 +281,15 @@ export class OxBoardAIChat extends LitElement {
   @property({ type: Boolean, attribute: 'board-tools' })
   boardTools = true
 
+  /**
+   * 라이브 상태를 다루는 대화면인가 — true 면 **첫 턴에 도구 호출을 강제**한다.
+   *
+   * 접지 가드는 지어낸 식별자를 잡지만 식별자 없는 상황 서술("바쁘게 움직이고 있다")은 잡지 못한다.
+   * 그건 도구를 부르지 않고 답한 경우이므로, 조회를 먼저 하게 만들어 원천을 막는다.
+   */
+  @property({ type: Boolean, attribute: 'require-grounding-tools' })
+  requireGroundingTools = false
+
   /** board-import registry scopes. */
   @property({ type: Array })
   scopes?: string[]
@@ -300,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
 
@@ -951,6 +1008,21 @@ export 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;
@@ -1039,6 +1111,150 @@ 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;
+      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;
@@ -1139,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;
@@ -1645,12 +1931,22 @@ export 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' : ''}">
@@ -1672,6 +1968,10 @@ 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}
                 ${line.toolUsages && line.toolUsages.length > 0
                   ? this.renderToolUsages(idx, line)
                   : nothing}
@@ -1696,6 +1996,7 @@ export class OxBoardAIChat extends LitElement {
             </div>
           `
         : nothing}
+      ${this.renderFoldNotice()}
       <div class="composer ${hasMessages ? '' : 'no-actions'}">
         ${hasMessages
           ? html`
@@ -2327,6 +2628,148 @@ 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
+      })
+    )
+  }
+
+  /**
+   * 접지 경고 — 답이 언급했지만 **근거에 없던** 대상을 알린다.
+   *
+   * 왜 답을 지우지 않는가: 판정은 식별자 대조라 확정이 아니다(예: 사용자가 화면에서 본 이름을
+   * 대화 밖에서 알고 말한 경우). 그래서 답은 그대로 보여주고, 검증되지 않았다는 사실만 붙인다 —
+   * 사용자가 그 대상을 실제 작업의 근거로 삼기 전에 알아야 하는 정보다.
+   */
+  private renderGroundingWarning(line: ChatLine) {
+    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 박스.
    *
@@ -2341,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}
@@ -2379,6 +2824,99 @@ export class OxBoardAIChat extends LitElement {
     `
   }
 
+  /** 시스템 기록 펼치기/접기 — 곁줄이 길어도 대화가 가려지지 않게. */
+  private toggleSystemNote(idx: number) {
+    const next = [...this.lines]
+    const line = next[idx]
+    if (!line) return
+    next[idx] = { ...line, systemOpen: !line.systemOpen }
+    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]
@@ -2534,6 +3072,7 @@ export 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,
@@ -2546,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()
@@ -2560,6 +3102,8 @@ export 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
       })