@things-factory/board-ai 10.0.0-beta.95 → 10.0.0-y.0

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

@@ -19,6 +19,7 @@ import { LitElement, css, html, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { unsafeHTML } from 'lit/directives/unsafe-html.js'
 import { client } from '@operato/graphql'
+import { auth } from '@things-factory/auth-base/dist-client/index.js'
 import { i18next, localize } from '@operato/i18n'
 import { ScrollbarStyles } from '@operato/styles'
 import gql from 'graphql-tag'
@@ -30,6 +31,7 @@ import {
   stripMentionRefids
 } from './markdown.js'
 import { buildChatMutationInput } from './chat-input-builder.js'
+import { receiveRemoteMessage, reconcileSentLine, remoteMessageToLine } from './chat-echo-dedup.js'
 import './mention-popup.js'
 import {
   buildMentionCandidates,
@@ -48,6 +50,13 @@ import { DEFAULT_SLASH_TEMPLATES } from './default-slash-templates.js'
 
 interface ChatLine {
   role: 'user' | 'assistant' | 'system'
+  /** 서버 ChatMessage.id — 실시간 방송 에코 dedup 의 키 (있을 때만). */
+  id?: string
+  /** 클라 임시 핸들 — 영속 id 부여 전 optimistic 라인을 index 비의존으로 식별/reconcile. */
+  _localId?: string
+  /** 보낸 사용자 id/name — 그룹챗 발신자 표시용 (다른 참여자 메시지 구분). */
+  senderId?: string
+  senderName?: string
   /** 메시지 본문. `#token{refid:N}` inline marker 가 포함될 수 있음 (영속된 메시지 / 사용자
    *  popup pick / AI resolved mention). 렌더링 시 추출해서 `<span data-refid="N">` 으로 변환. */
   content: string
@@ -87,10 +96,65 @@ const CHAT_MESSAGES_QUERY = gql`
       relatedPatchId
       toolUsagesJson
       createdAt
+      creator {
+        id
+        name
+      }
+    }
+  }
+`
+
+// C4 그룹챗 — 같은 세션의 메시지(사용자/AI/system) 실시간 방송 구독.
+// 자기 발신 에코는 message.id 로 dedup (mutation 응답으로 이미 렌더).
+const CHAT_MESSAGE_SUBSCRIPTION = gql`
+  subscription ChatMessageActivity($sessionId: String!) {
+    chatMessageActivity(sessionId: $sessionId) {
+      id
+      role
+      content
+      relatedPatchId
+      toolUsagesJson
+      createdAt
+      creator {
+        id
+        name
+      }
     }
   }
 `
 
+// C4 presence/roster — 세션 참여자 목록 + 마지막 접속(online 판정용).
+const CHAT_PARTICIPANTS_QUERY = gql`
+  query ChatSessionParticipants($sessionId: String!) {
+    chatSessionParticipants(sessionId: $sessionId) {
+      id
+      role
+      lastSeenAt
+      user {
+        id
+        name
+      }
+    }
+  }
+`
+const TOUCH_PRESENCE_MUTATION = gql`
+  mutation TouchPresence($sessionId: String!) {
+    touchPresence(sessionId: $sessionId)
+  }
+`
+// heartbeat 주기(ms) — 서버 PRESENCE_TTL_MS(75s)의 ~1/2.5. 로컬 online 판정도 동일 TTL.
+const PRESENCE_HEARTBEAT_MS = 30_000
+const PRESENCE_TTL_MS = 75_000
+
+/** 이름 → roster chip 이니셜 (한글 1자 / 영문 최대 2자). */
+function initials(name: string): string {
+  const n = (name || '?').trim()
+  if (!n) return '?'
+  const parts = n.split(/\s+/)
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase()
+  return /[a-zA-Z]/.test(n) ? n.slice(0, 2).toUpperCase() : n.slice(0, 1)
+}
+
 @customElement('ox-board-ai-chat')
 export class OxBoardAIChat extends LitElement {
   /** 영속 세션 id. 없으면 ad-hoc (메시지 영속 안 됨). */
@@ -221,6 +285,28 @@ export class OxBoardAIChat extends LitElement {
   @state()
   private errorMessage?: string
 
+  /** C4 presence/roster — 세션 참여자 목록. lastSeenAt 으로 online 판정. */
+  @state()
+  private participants: Array<{ id: string; role: string; lastSeenAt?: string; user?: { id: string; name?: string } }> = []
+
+  /** roster online 재평가 트리거 — heartbeat tick 마다 갱신(시간 경과 반영). */
+  @state()
+  private _presenceTick = 0
+
+  private _heartbeatTimer?: ReturnType<typeof setInterval>
+
+  /** C4 그룹챗 — 메시지 실시간 방송 구독 핸들 + 에코 dedup. */
+  private _messageSub?: { unsubscribe: () => void }
+  /** 이미 transcript 에 반영된 서버 메시지 id 집합 — 자기 에코·중복 방송 차단. */
+  private _seenMessageIds = new Set<string>()
+  /** optimistic 라인 임시 핸들 시퀀스 (index 비의존 reconcile 용). */
+  private _localSeq = 0
+
+  /** 현재 로그인 사용자 id — 그룹챗에서 내 메시지 vs 타인 메시지 구분 (발신자 표시). */
+  private get _myUserId(): string | undefined {
+    return (auth.credential as any)?.id
+  }
+
   /** Mention popup — `#` (컴포넌트) / `@` (카탈로그) / `/` (slash) 트리거 시 활성.
    *  단일 popup 재사용 — mentionTrigger 로 활성 trigger 추적. */
   @state()
@@ -307,6 +393,50 @@ export class OxBoardAIChat extends LitElement {
       background: var(--md-sys-color-surface, #ffffff);
     }
 
+    /* ── C4 Roster (participants + presence) ───────────── */
+    .roster {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 4px;
+      padding: 4px 8px;
+      border-bottom: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+    }
+    .roster-count {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      font-size: 10px;
+      opacity: 0.7;
+      margin-right: 2px;
+    }
+    .roster-count md-icon {
+      font-size: 13px;
+      width: 13px;
+      height: 13px;
+    }
+    .roster-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      padding: 1px 6px 1px 4px;
+      border-radius: 9px;
+      font-size: 10px;
+      background: var(--md-sys-color-surface-variant, #f1f5f9);
+    }
+    .roster-chip.offline {
+      opacity: 0.45;
+    }
+    .roster-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #cbd5e1;
+    }
+    .roster-chip.online .roster-dot {
+      background: #22c55e;
+    }
+
     /* ── Session tabs ─────────────────────────────────── */
     .session-tabs {
       display: flex;
@@ -616,6 +746,24 @@ export class OxBoardAIChat extends LitElement {
       /* margin-top 0 — .messages gap 으로만 spacing */
     }
 
+    /* 그룹챗 — 다른 참여자의 메시지. 내 메시지(우측 primary)와 구분: 좌측 정렬 + 보조 색. */
+    .msg-wrap.user.other {
+      align-self: flex-start;
+      align-items: flex-start;
+    }
+    .msg.user.other {
+      align-self: flex-start;
+      background: var(--md-sys-color-secondary-container, #e2e8f0);
+      color: var(--md-sys-color-on-secondary-container, #0f172a);
+      border-radius: 12px 12px 12px 3px;
+    }
+    /* 발신자 이름 라벨 — AI 라벨(대문자)과 달리 사람 이름은 그대로. */
+    .msg-label.sender {
+      text-transform: none;
+      letter-spacing: 0;
+      color: var(--md-sys-color-primary, #475569);
+    }
+
     .msg.assistant {
       align-self: flex-start;
       background: var(--md-sys-color-surface-container, #f8fafc);
@@ -1293,8 +1441,15 @@ export class OxBoardAIChat extends LitElement {
       this.cachedUserCandidates = []
       this.errorMessage = undefined
       this.input = ''
+      this.participants = []
+      this._seenMessageIds.clear() // 세션 전환 — 에코 dedup 컨텍스트 리셋
       if (this.sessionId) {
         this.loadHistory()
+        this._startPresence() // C4: roster 로드 + heartbeat 시작
+        this._startMessageSubscription() // C4: 메시지 실시간 방송 구독
+      } else {
+        this._stopPresence()
+        this._stopMessageSubscription()
       }
     }
     // 자동 스크롤
@@ -1302,6 +1457,119 @@ export class OxBoardAIChat extends LitElement {
     if (ms) ms.scrollTop = ms.scrollHeight
   }
 
+  disconnectedCallback() {
+    this._stopPresence()
+    this._stopMessageSubscription()
+    super.disconnectedCallback()
+  }
+
+  // ── C4 presence/roster ─────────────────────────────────────────────────────
+  private _startPresence() {
+    this._stopPresence()
+    this._loadParticipants()
+    this._touchPresence() // 즉시 1회 — 내 online 즉시 반영
+    this._heartbeatTimer = setInterval(() => {
+      this._touchPresence()
+      this._loadParticipants()
+      this._presenceTick++ // online 판정 재평가(시간 경과)
+    }, PRESENCE_HEARTBEAT_MS)
+  }
+
+  private _stopPresence() {
+    if (this._heartbeatTimer) {
+      clearInterval(this._heartbeatTimer)
+      this._heartbeatTimer = undefined
+    }
+  }
+
+  // ── C4 그룹챗 — 메시지 실시간 방송 구독 ─────────────────────────────────────
+  private _startMessageSubscription() {
+    this._stopMessageSubscription()
+    if (!this.sessionId) return
+    try {
+      this._messageSub = client
+        .subscribe({ query: CHAT_MESSAGE_SUBSCRIPTION, variables: { sessionId: this.sessionId } })
+        .subscribe({
+          next: ({ data }: any) => this._onRemoteMessage(data?.chatMessageActivity),
+          error: () => {
+            /* 구독 에러는 채팅 본 기능 무영향 — 히스토리 쿼리로 폴백 */
+          }
+        })
+    } catch {
+      /* 구독 미지원 환경 — 조용히 스킵 */
+    }
+  }
+
+  private _stopMessageSubscription() {
+    if (this._messageSub) {
+      try {
+        this._messageSub.unsubscribe()
+      } catch {
+        /* 이미 닫힘 */
+      }
+      this._messageSub = undefined
+    }
+  }
+
+  /** 서버 ChatMessage → ChatLine. */
+  private _msgToLine(m: any): ChatLine {
+    return remoteMessageToLine(m) as ChatLine
+  }
+
+  /**
+   * 원격(방송) 메시지 수신 — 에코·중복은 id 로 차단, 신규는 transcript 에 append.
+   * 자기 발신 메시지의 id 는 전송 reconcile 에서 이미 _seenMessageIds 에 등록됨.
+   */
+  private _onRemoteMessage(m: any) {
+    const next = receiveRemoteMessage(this.lines as any, this._seenMessageIds, m)
+    if (!next) return
+    this._seenMessageIds = next.seen
+    this.lines = next.lines as ChatLine[]
+  }
+
+  /**
+   * 전송한 optimistic 라인을 서버 id 로 reconcile (index 비의존 — _localId 로 탐색).
+   * 에코가 응답보다 먼저 도착해 이미 append 됐으면 optimistic 중복 라인을 제거한다.
+   */
+  private _reconcileSentLine(localId: string, serverId: string | undefined, patch: Partial<ChatLine>) {
+    const next = reconcileSentLine(this.lines as any, this._seenMessageIds, localId, serverId, patch as any)
+    this._seenMessageIds = next.seen
+    this.lines = next.lines as ChatLine[]
+  }
+
+  private async _loadParticipants() {
+    if (!this.sessionId) return
+    try {
+      const result = await client.query({
+        query: CHAT_PARTICIPANTS_QUERY,
+        variables: { sessionId: this.sessionId },
+        fetchPolicy: 'network-only'
+      })
+      this.participants = result.data?.chatSessionParticipants ?? []
+    } catch {
+      /* roster 로드 실패는 채팅 본 기능 무영향 — 조용히 무시 */
+    }
+  }
+
+  private async _touchPresence() {
+    if (!this.sessionId) return
+    try {
+      await client.mutate({ mutation: TOUCH_PRESENCE_MUTATION, variables: { sessionId: this.sessionId } })
+    } catch {
+      /* heartbeat 실패 무시 */
+    }
+  }
+
+  /** lastSeenAt 이 TTL 이내면 online. (_presenceTick 의존으로 주기 재평가.) */
+  private _isOnline(lastSeenAt?: string): boolean {
+    void this._presenceTick
+    if (!lastSeenAt) return false
+    const t = new Date(lastSeenAt).getTime()
+    if (!Number.isFinite(t)) return false
+    const age = Date.now() - t
+    return age >= 0 ? age <= PRESENCE_TTL_MS : true
+  }
+
   private async loadHistory() {
     if (!this.sessionId) return
     try {
@@ -1311,12 +1579,9 @@ export class OxBoardAIChat extends LitElement {
         fetchPolicy: 'network-only'
       })
       const msgs = result.data?.chatMessages ?? []
-      this.lines = msgs.map((m: any) => ({
-        role: m.role,
-        content: m.content,
-        patchId: m.relatedPatchId ?? undefined,
-        toolUsages: Array.isArray(m.toolUsagesJson) ? m.toolUsagesJson : undefined
-      }))
+      this.lines = msgs.map((m: any) => this._msgToLine(m))
+      // 로드된 메시지 id 를 seen 에 등록 — 이후 방송 에코 dedup 기준.
+      this._seenMessageIds = new Set<string>(msgs.map((m: any) => m.id).filter(Boolean))
     } catch (e: any) {
       this.errorMessage = `${i18next.t('board-ai.text.failed-to-load-history')}: ${e.message ?? e}`
     }
@@ -1329,20 +1594,29 @@ export class OxBoardAIChat extends LitElement {
         ? html`<div class="toast show">${this.toastMessage}</div>`
         : nothing}
       ${this.renderSessionTabs()}
+      ${this.renderRoster()}
       <div class="messages" @click=${this.onBubbleClick}>
         ${!hasMessages ? this.renderEmpty() : nothing}
-        ${this.lines.map((line, idx) => {
+        ${(() => {
+          const myId = this._myUserId
+          return this.lines.map((line, idx) => {
           const prev = this.lines[idx - 1]
           const showLabel = line.role === 'assistant' && (!prev || prev.role !== 'assistant')
+          // 그룹챗: 다른 참여자의 user 메시지는 좌측 + 보낸이 이름 표시(연속 동일 발신자는 1회만).
+          const isOther = line.role === 'user' && !!line.senderId && line.senderId !== myId
+          const prevSameSender = !!prev && prev.role === 'user' && prev.senderId === line.senderId
+          const showSenderLabel = isOther && !prevSameSender
           const content = (line.content ?? '').trim()
           const isMarkdown = line.role !== 'system' && content.length > 0
           const showActions = line.role !== 'system' && !line.pending && content.length > 0
           return html`
             ${showLabel
               ? html`<div class="msg-label">${i18next.t('board-ai.label.ai')}</div>`
-              : nothing}
-            <div class="msg-wrap ${line.role}">
-              <div class="msg ${line.role} ${line.pending ? 'pending' : ''}">
+              : showSenderLabel
+                ? 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' : ''}">
                 ${line.pending
                   ? html`<span class="typing-dots"><span></span><span></span><span></span></span>`
                   : isMarkdown
@@ -1376,7 +1650,8 @@ export class OxBoardAIChat extends LitElement {
               ${showActions ? this.renderMessageActions(idx, line, content) : nothing}
             </div>
           `
-        })}
+          })
+        })()}
       </div>
       ${this.errorMessage
         ? html`
@@ -1828,6 +2103,28 @@ export class OxBoardAIChat extends LitElement {
     `
   }
 
+  /** C4 roster — 세션 참여자 + online 표시. 참여자 2명 미만이면 숨김(혼자면 의미 없음). */
+  private renderRoster() {
+    if (!this.sessionId || this.participants.length < 2) return nothing
+    const online = this.participants.filter(p => this._isOnline(p.lastSeenAt)).length
+    return html`
+      <div class="roster" role="group" aria-label="participants">
+        <span class="roster-count" title=${`${online} online / ${this.participants.length} total`}>
+          <md-icon>group</md-icon>${online}/${this.participants.length}
+        </span>
+        ${this.participants.map(p => {
+          const name = p.user?.name || p.user?.id || '?'
+          const on = this._isOnline(p.lastSeenAt)
+          return html`<span
+            class="roster-chip ${on ? 'online' : 'offline'}"
+            title=${`${name} · ${p.role}${on ? ' · online' : ''}`}>
+            <span class="roster-dot"></span>${initials(name)}
+          </span>`
+        })}
+      </div>
+    `
+  }
+
   private _onSessionTabClick(sessionId: string) {
     if (sessionId === this.sessionId) return
     this.dispatchEvent(
@@ -2160,23 +2457,26 @@ export class OxBoardAIChat extends LitElement {
     let enrichedContent = injectMentionRefids(text, mentions)
     enrichedContent = injectMentionUserIds(enrichedContent, userMentions)
 
+    // optimistic 라인에 임시 핸들 — 방송 에코와의 reconcile 을 index 비의존으로.
+    const userLocalId = `local-${++this._localSeq}-u`
+    const asstLocalId = `local-${++this._localSeq}-a`
+
     this.lines = [
       ...this.lines,
-      { role: 'user', content: enrichedContent }
+      { role: 'user', content: enrichedContent, _localId: userLocalId }
     ]
     this.input = ''
     this.busy = true
     this.errorMessage = undefined
 
     // 가짜 pending 응답 표시 (UX 부드럽게)
-    const pendingIdx = this.lines.length
-    this.lines = [...this.lines, { role: 'assistant', content: '', pending: true }]
+    this.lines = [...this.lines, { role: 'assistant', content: '', pending: true, _localId: asstLocalId }]
 
     try {
-      // LLM 으로 보낼 history — user/assistant 만 (system 은 백엔드가 자동 합류)
+      // LLM 으로 보낼 history — user/assistant 만 (system 은 백엔드가 자동 합류).
+      // pending placeholder 와 system 은 제외 (index 비의존 — 방송 append 와 무관).
       const history = this.lines
-        .slice(0, pendingIdx) // pending 제외
-        .filter(l => l.role !== 'system')
+        .filter(l => !l.pending && l._localId !== asstLocalId && l.role !== 'system')
         .map(l => ({ role: l.role, content: l.content }))
 
       // 라이브 보드 우선 — 호스트의 캔버스가 사용자 수작업 편집을 들고 있을 수 있음.
@@ -2208,17 +2508,18 @@ export class OxBoardAIChat extends LitElement {
       this.pickedMentions.clear()
       this.pickedUserMentions.clear()
 
-      // pending 자리에 실제 응답
-      const replaced = [...this.lines]
-      replaced[pendingIdx] = {
+      // optimistic 라인을 서버 id 로 reconcile (방송 에코와 중복 방지, index 비의존).
+      // 사용자 라인: enrich 된 본문 유지, id 만 부여. AI 라인: pending → 실제 응답.
+      this._reconcileSentLine(userLocalId, out.userMessageId, {})
+      this._reconcileSentLine(asstLocalId, out.assistantMessageId, {
         role: 'assistant',
         content: out.reply,
         patchSummary: out.patch?.summary,
         followUp: out.followUp || undefined,
         patchId: out.patchId || undefined,
-        toolUsages: Array.isArray(out.toolUsages) ? out.toolUsages : undefined
-      }
-      this.lines = replaced
+        toolUsages: Array.isArray(out.toolUsages) ? out.toolUsages : undefined,
+        pending: false
+      })
 
       // 호스트로 patch 이벤트 전파
       if (out.patch) {
@@ -2256,8 +2557,8 @@ export class OxBoardAIChat extends LitElement {
         )
       }
     } catch (e: any) {
-      // pending 메시지 제거 + 에러 표시 + 마지막 입력 보존 (다시 시도용)
-      this.lines = this.lines.slice(0, pendingIdx)
+      // pending(AI) placeholder 만 제거 — 사용자 라인은 보존(재시도). index 비의존.
+      this.lines = this.lines.filter(l => l._localId !== asstLocalId)
       this.errorMessage = e?.message ?? String(e)
       this.lastFailedInput = text
     } finally {

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

@@ -0,0 +1,116 @@
+import { receiveRemoteMessage, reconcileSentLine, remoteMessageToLine, type DedupLine } from './chat-echo-dedup'
+
+const msg = (id: string, role = 'user', content = 'hi') => ({ id, role, content })
+
+describe('remoteMessageToLine', () => {
+  it('필드 매핑 + relatedPatchId/toolUsagesJson 변환', () => {
+    const line = remoteMessageToLine({
+      id: 'm1',
+      role: 'assistant',
+      content: 'done',
+      relatedPatchId: 'p1',
+      toolUsagesJson: [{ name: 'x' }]
+    })
+    expect(line).toMatchObject({ id: 'm1', role: 'assistant', content: 'done', patchId: 'p1' })
+    expect(line.toolUsages).toEqual([{ name: 'x' }])
+  })
+
+  it('toolUsagesJson 이 배열 아니면 undefined', () => {
+    expect(remoteMessageToLine({ id: 'm', role: 'user', content: 'x', toolUsagesJson: null }).toolUsages).toBeUndefined()
+  })
+
+  it('creator → senderId/senderName (그룹챗 발신자 표시)', () => {
+    const line = remoteMessageToLine({ id: 'm', role: 'user', content: 'x', creator: { id: 'u9', name: 'Kim' } })
+    expect(line.senderId).toBe('u9')
+    expect(line.senderName).toBe('Kim')
+  })
+
+  it('creator 없으면 sender 필드 undefined', () => {
+    const line = remoteMessageToLine({ id: 'm', role: 'user', content: 'x', creator: null })
+    expect(line.senderId).toBeUndefined()
+    expect(line.senderName).toBeUndefined()
+  })
+})
+
+describe('receiveRemoteMessage — 방송 수신/에코 차단', () => {
+  it('신규 id → append + seen 등록', () => {
+    const res = receiveRemoteMessage([], new Set(), msg('m1'))!
+    expect(res).not.toBeNull()
+    expect(res.lines).toHaveLength(1)
+    expect(res.lines[0].id).toBe('m1')
+    expect(res.seen.has('m1')).toBe(true)
+  })
+
+  it('이미 seen 인 id → null (에코·중복 차단)', () => {
+    expect(receiveRemoteMessage([], new Set(['m1']), msg('m1'))).toBeNull()
+  })
+
+  it('id 없는 메시지 → null', () => {
+    expect(receiveRemoteMessage([], new Set(), { role: 'user', content: 'x' } as any)).toBeNull()
+    expect(receiveRemoteMessage([], new Set(), null)).toBeNull()
+  })
+
+  it('불변 — 원본 배열/셋 미변경', () => {
+    const lines: DedupLine[] = []
+    const seen = new Set<string>()
+    receiveRemoteMessage(lines, seen, msg('m1'))
+    expect(lines).toHaveLength(0)
+    expect(seen.size).toBe(0)
+  })
+
+  it('다른 참여자 메시지 두 개 순차 append', () => {
+    let lines: DedupLine[] = []
+    let seen = new Set<string>()
+    ;({ lines, seen } = receiveRemoteMessage(lines, seen, msg('a'))!)
+    ;({ lines, seen } = receiveRemoteMessage(lines, seen, msg('b'))!)
+    expect(lines.map(l => l.id)).toEqual(['a', 'b'])
+  })
+})
+
+describe('reconcileSentLine — optimistic 라인 조정', () => {
+  const optimistic = (): DedupLine[] => [{ _localId: 'L1', role: 'user', content: 'typed' }]
+
+  it('정상(에코 전): serverId 부여 + seen 등록 + _localId 해제', () => {
+    const res = reconcileSentLine(optimistic(), new Set(), 'L1', 'srv1', {})
+    expect(res.lines).toHaveLength(1)
+    expect(res.lines[0].id).toBe('srv1')
+    expect(res.lines[0]._localId).toBeUndefined()
+    expect(res.seen.has('srv1')).toBe(true)
+  })
+
+  it('레이스(에코 먼저): serverId 가 이미 seen → optimistic 중복 제거', () => {
+    // 에코가 먼저 도착해 같은 메시지가 이미 append + seen 됨
+    const lines: DedupLine[] = [
+      { id: 'srv1', role: 'user', content: 'typed#enriched' }, // 방송 에코로 들어온 것
+      { _localId: 'L1', role: 'user', content: 'typed' } // optimistic 중복
+    ]
+    const res = reconcileSentLine(lines, new Set(['srv1']), 'L1', 'srv1', {})
+    expect(res.lines).toHaveLength(1)
+    expect(res.lines[0].id).toBe('srv1')
+    expect(res.lines.some(l => l._localId === 'L1')).toBe(false)
+  })
+
+  it('patch 병합 (AI 라인: pending → 실제 응답)', () => {
+    const lines: DedupLine[] = [{ _localId: 'A1', role: 'assistant', content: '', pending: true }]
+    const res = reconcileSentLine(lines, new Set(), 'A1', 'srv2', {
+      content: 'reply',
+      pending: false,
+      patchId: 'p9'
+    })
+    expect(res.lines[0]).toMatchObject({ id: 'srv2', content: 'reply', pending: false, patchId: 'p9' })
+  })
+
+  it('serverId 없음(ad-hoc 세션): 라인 유지 + _localId 만 해제, seen 불변', () => {
+    const seen = new Set<string>()
+    const res = reconcileSentLine(optimistic(), seen, 'L1', undefined, {})
+    expect(res.lines[0]._localId).toBeUndefined()
+    expect(res.lines[0].id).toBeUndefined()
+    expect(res.seen.size).toBe(0)
+  })
+
+  it('해당 _localId 없으면 변화 없음', () => {
+    const lines = optimistic()
+    const res = reconcileSentLine(lines, new Set(), 'NOPE', 'srv1', {})
+    expect(res.lines).toBe(lines)
+  })
+})