@bolloon/bolloon-agent 0.1.33 → 0.1.35

package/src/web/client.js

@@ -4,8 +4,6 @@ if (typeof marked === 'undefined') {
 }
 
 const messagesEl = document.getElementById('messages');
-const agentStatusEl = document.getElementById('agent-status');
-const agentStatusTextEl = document.getElementById('agent-status-text');
 const input = document.getElementById('input');
 const sendBtn = document.getElementById('send');
 const sidebar = document.getElementById('sidebar');
@@ -29,6 +27,62 @@ let reconnectAttempts = new Map(); // channelId -> attempts
 let reconnectTimers = new Map(); // channelId -> timer
 let heartbeatTimers = new Map(); // channelId -> setInterval handle (防止泄漏)
 let lastUserCommand = ''; // 防止用户消息重复显示
+
+// 2026-06-10: P2P peer-group 折叠状态持久化 (跨刷新)
+// key = bolloon.p2p.collapsedPeers, value = JSON array of publicKey hex
+const COLLAPSED_PEERS_KEY = 'bolloon.p2p.collapsedPeers';
+const SEEN_PEERS_KEY = 'bolloon.p2p.seenPeers';
+let collapsedPeers = (function loadCollapsed() {
+  try {
+    const raw = localStorage.getItem(COLLAPSED_PEERS_KEY);
+    return new Set(raw ? JSON.parse(raw) : []);
+  } catch { return new Set(); }
+})();
+let seenPeers = (function loadSeen() {
+  try {
+    const raw = localStorage.getItem(SEEN_PEERS_KEY);
+    return new Set(raw ? JSON.parse(raw) : []);
+  } catch { return new Set(); }
+})();
+function saveCollapsedPeers() {
+  try { localStorage.setItem(COLLAPSED_PEERS_KEY, JSON.stringify([...collapsedPeers])); } catch {}
+}
+function saveSeenPeers() {
+  try { localStorage.setItem(SEEN_PEERS_KEY, JSON.stringify([...seenPeers])); } catch {}
+}
+function togglePeerCollapsed(peerPk) {
+  if (collapsedPeers.has(peerPk)) {
+    collapsedPeers.delete(peerPk);
+  } else {
+    collapsedPeers.add(peerPk);
+  }
+  saveCollapsedPeers();
+  renderRemoteChannels();
+  // 2026-06-10: 通知 header 切换按钮同步图标
+  if (typeof window.__syncP2PToggleAllBtn === 'function') window.__syncP2PToggleAllBtn();
+}
+// 2026-06-10: 一键展开/折叠所有 P2P peer (header 按钮调用)
+function expandAllPeers() {
+  // 从 remoteChannels + knownPeers 收集所有 publicKey
+  const allPks = new Set([
+    ...knownPeers.map(p => p.publicKey),
+    ...remoteChannels.map(g => g.peerId)
+  ]);
+  for (const pk of allPks) collapsedPeers.delete(pk);
+  saveCollapsedPeers();
+  renderRemoteChannels();
+  if (typeof window.__syncP2PToggleAllBtn === 'function') window.__syncP2PToggleAllBtn();
+}
+function collapseAllPeers() {
+  const allPks = new Set([
+    ...knownPeers.map(p => p.publicKey),
+    ...remoteChannels.map(g => g.peerId)
+  ]);
+  for (const pk of allPks) collapsedPeers.add(pk);
+  saveCollapsedPeers();
+  renderRemoteChannels();
+  if (typeof window.__syncP2PToggleAllBtn === 'function') window.__syncP2PToggleAllBtn();
+}
 let lastAiContent = ''; // 防止 AI 消息重复显示
 let messagesContainers = new Map(); // channelId -> messages container div
 let sessionMessages = new Map(); // channelId:sessionId -> messages array
@@ -100,6 +154,8 @@ async function loadChannels() {
     channels.forEach((ch, i) => {
       console.log(`  [${i}] ${ch.name} - did: "${ch.did}"`);
     });
+    // 2026-06-11: 全部默认不展开 (用户需要手动点 caret 展开 session 列表)
+    // 之前默认展开第一个会喧宾夺主, 用户看不到完整 channel 列表
     renderChannels();
   } catch (err) {
     console.error('[加载频道] 失败:', err);
@@ -116,20 +172,34 @@ function startV3GlobalSSE() {
       try {
         const msg = JSON.parse(e.data);
         if (msg.type === 'remote-chat-reply') {
-          // 找到当前打开的远端 chat modal 的 log
+          // 2026-06-10: 复用本地 addMessage 渲染 — 自动 marked + 剥 think/env + 主题样式
+          // 之前是 textContent 硬编码灰底, 跟 Step 3 重写的 modal 风格不一致,
+          // 而且 SSE 异步回到时 modal 可能已被切到 thinking 占满, 用户看不到 reply.
           const log = document.getElementById('rcm-log');
           const thinkingEl = document.getElementById('rcm-thinking');
           if (thinkingEl) thinkingEl.style.display = 'none'; // 思考结束, 隐藏
+          // 也清掉 "对方正在思考..." 行 (流式 token 留下的)
+          const liveThinking = document.getElementById('rcm-thinking-live');
+          if (liveThinking) liveThinking.remove();
           if (log) {
-            const bubble = document.createElement('div');
-            bubble.style.cssText = 'padding:8px 10px;margin:4px 0;border-radius:6px;font-size:13px;line-height:1.4;max-width:80%;word-wrap:break-word;background:#e5e7eb;color:#111;';
-            bubble.textContent = msg.text || '(空回复)';
             if (msg.error) {
-              bubble.textContent = '(错误: ' + msg.error + ')';
-              bubble.style.background = '#fca5a5';
+              // 错误用 sysmsg 样式 (跟 modal 风格一致)
+              const errEl = document.createElement('div');
+              errEl.className = 'remote-chat-sysmsg remote-chat-sysmsg-error';
+              errEl.textContent = `❌ 对方回复出错: ${msg.error}`;
+              log.appendChild(errEl);
+            } else {
+              // 走本地 addMessage, 跟主聊天框完全一致 (marked + think/env 折叠 + 主题色)
+              const prefix = `🤖 远端 AI 回复\n\n`;
+              addMessage(prefix + (msg.text || '(空回复)'), 'ai', false, log);
             }
-            log.appendChild(bubble);
             log.scrollTop = log.scrollHeight;
+          } else {
+            // modal 没开 → 用右下 toast 提示用户"对方回了, 打开聊天看"
+            if (typeof showSimpleToast === 'function') {
+              const preview = (msg.text || '').slice(0, 50);
+              showSimpleToast(`💬 远端 channel 有新回复: ${preview}${msg.text && msg.text.length > 50 ? '…' : ''}`);
+            }
           }
         } else if (msg.type === 'remote-chat-thinking') {
           // v3 新增: B 端实时显示 A 节点的思考过程
@@ -182,6 +252,44 @@ function startV3GlobalSSE() {
             log.appendChild(toast);
             log.scrollTop = log.scrollHeight;
           }
+        } else if (msg.type === 'remote-channel-update') {
+          // v3 新增: 远端节点发来新分享 / 删除 / 改名, 立即更新本地 cache
+          const peerId = msg.peerId;
+          const channels = msg.channels || [];
+          const peerName = msg.peerName || null;   // 2026-06-10: 同步接收对方名字
+          let group = remoteChannels.find(g => g.peerId === peerId);
+          if (!group) {
+            group = { peerId, channels: [], peerName: peerName || ('peer-' + peerId.substring(0, 8)) };
+            remoteChannels.push(group);
+          } else if (peerName) {
+            group.peerName = peerName;  // 更新名字
+          }
+          group.channels = channels;
+          // 2026-06-10: 如果对面告知名字, 同步刷新 knownPeers 列表, 避免陌生 peer 状态
+          if (peerName && !knownPeers.find(p => p.publicKey === peerId)) {
+            knownPeers.push({
+              publicKey: peerId,
+              name: peerName,
+              addedAt: new Date().toISOString(),
+              lastConnectedAt: new Date().toISOString(),
+            });
+            console.log(`[v3] 远端 ${peerId.substring(0,12)}... 自报名字 = ${peerName}, 已加到 knownPeers`);
+          }
+          renderRemoteChannels();
+          console.log(`[v3] 收到远端 ${peerId.substring(0,12)}... 的 ${channels.length} 个 channel 更新 (name=${peerName || '?'})`);
+        } else if (msg.type === 'friend-request') {
+          // v3 新增: 收到好友申请
+          showFriendRequestModal(msg);
+        } else if (msg.type === 'friend-request-ack') {
+          // 2026-06-10: 收到对方 ack, 给发送方提示"已送达"
+          const pending = window.__pendingFriendRequests;
+          if (pending && msg.requestId && pending.has(msg.requestId)) {
+            const { name } = pending.get(msg.requestId);
+            pending.delete(msg.requestId);
+            console.log(`[v3-friend] ✅ ack 收到: ${name} 已收到好友申请`);
+            // 简短 toast (右下角), 不阻塞
+            showSimpleToast(`📬 ${name} 已收到你的好友申请, 等对方接受`);
+          }
         }
       } catch (err) {
         console.error('[v3] 全局 SSE 解析失败:', err);
@@ -489,6 +597,50 @@ function toggleAgentExpand(channelId, e) {
   renderChannels();
 }
 
+/**
+ * 2026-06-11 性能优化: 切 channel 时用轻量 patch, 不重建整个 sidebar 列表
+ * 只更新: (1) active class (2) 当前 session label + count (3) expanded 状态
+ * 避免每次切 channel 都 innerHTML='' + 重建 ~10 个 channel 节点
+ */
+function renderChannelsLite(activeChannelId, activeSessionId) {
+  if (!channelList) return;
+  // 1. 更新所有 .agent-row 的 active class
+  channelList.querySelectorAll('.agent-row').forEach(row => {
+    const li = row.closest('.agent-group');
+    const chId = li?.dataset.channelId;
+    row.classList.toggle('active', chId === activeChannelId);
+  });
+  // 2. 当前 channel 的展开状态: 强制展开, 其他不动
+  if (activeChannelId) expandedAgents.add(activeChannelId);
+  // 3. 当前 channel 行展开 + 只切 session-item 的 active class (不再 innerHTML 重渲!)
+  //    原因: 重渲 innerHTML 会清掉原始 renderChannels 绑的 session-item click handler,
+  //    即使补绑也会因为 lite HTML 结构 (.session-dot + .session-msg-count) 跟原始不同
+  //    导致"第 1 次点不动 (原始), 第 2 次点才能用 (lite)" 现象
+  //    修法: 完全不动 session-list DOM, 只 toggle .active
+  const activeLi = channelList.querySelector(`.agent-group[data-channel-id="${activeChannelId}"]`);
+  if (activeLi) {
+    activeLi.classList.add('expanded');
+    // 只切 active class, 不动 innerHTML (避免清掉原始 click handler)
+    const ch = channels.find(c => c.id === activeChannelId);
+    // 2026-06-11: 原始 renderChannels 已经给 session-item 加了 data-session-id (line 791),
+    // 这里先清空所有 .active 再设新的, 避免多个 active 共存 (因为 renderChannels 初始 DOM
+    // 上会有一个 active 标记旧 session, 新切 session 容易出现两个 active)
+    activeLi.querySelectorAll('.session-item').forEach(sessLi => {
+      const sessId = sessLi.dataset.sessionId;
+      const shouldBeActive = sessId === activeSessionId;
+      sessLi.classList.toggle('active', shouldBeActive);
+    });
+    // 更新顶部 current session label
+    if (ch) {
+      const currentSess = Array.isArray(ch.sessions) ? ch.sessions.find(s => s.id === activeSessionId) : null;
+      const labelEl = activeLi.querySelector('.agent-current-session');
+      if (labelEl) {
+        labelEl.textContent = currentSess ? '· ' + formatSessionName(currentSess) : '';
+      }
+    }
+  }
+}
+
 function renderChannels() {
   if (!channelList) return;
   channelList.innerHTML = '';
@@ -532,12 +684,9 @@ function renderChannels() {
     const currentSessLabel = currentSess ? formatSessionName(currentSess) : '';
     const sessionCount = Array.isArray(ch.sessions) ? ch.sessions.length : 0;
 
-    const walletBadge = ch.walletAddress
-      ? `<span class="agent-wallet-badge" title="已绑定钱包: ${escapeHtml(ch.walletAddress)}">⛓</span>`
-      : '';
-    const toolsBadge = ch.autoInvokeTools
-      ? `<span class="agent-tools-badge" title="自动工具调用已开启">⚡</span>`
-      : '';
+    // 2026-06-10: 隐藏 channel 行右侧的勋章 (钱包 / 工具) — UI 简洁
+    const walletBadge = '';
+    const toolsBadge = '';
 
     row.innerHTML = `
       <svg class="agent-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -621,6 +770,7 @@ function renderChannels() {
         const sessLi = document.createElement('li');
         const isActive = ch.id === currentChannelId && sess.id === ch.currentSessionId;
         sessLi.className = `session-item ${isActive ? 'active' : ''}`;
+        sessLi.dataset.sessionId = sess.id;  // 2026-06-11: 给 session-item 加上 data-session-id, renderChannelsLite 才能 toggle active class
         sessLi.innerHTML = `
           <span class="session-name" title="${escapeHtml(formatSessionName(sess))}">${escapeHtml(formatSessionName(sess))}</span>
           <button class="session-delete" title="删除会话">×</button>
@@ -731,7 +881,11 @@ async function selectChannel(channelId, targetSessionId = null) {
     console.log('[selectChannel] 频道:', channel.name, 'session:', currentSessionId);
   }
 
-  renderChannels();
+  // 2026-06-11 提速: 切 channel 时 sidebar 渲染降级 — 只更新 active 样式, 不重渲整列表
+  // renderChannels() 仍然要调 (current session label 等可能变了), 但加一层判断: 如果只是切 channel (没增删), 走 patch 路径
+  const t0 = performance.now();
+  renderChannelsLite(channelId, currentSessionId);
+  console.log(`[selectChannel] renderChannelsLite 耗时 ${(performance.now() - t0).toFixed(1)}ms`);
 
   // 确保该频道有消息容器
   const container = ensureMessageContainer(channelId);
@@ -750,10 +904,19 @@ async function selectChannel(channelId, targetSessionId = null) {
   try {
     const res = await fetch(`/sessions/${channelId}?sessionId=${encodeURIComponent(currentSessionId)}`);
     const session = await res.json();
-    if (session.messages && session.messages.length > 0) {
-      session.messages.forEach(msg => {
-        addMessage(msg.content, msg.type, false, container);
-      });
+    const msgs = session.messages || [];
+    if (msgs.length > 0) {
+      // 2026-06-11 提速: 用 DocumentFragment 一次性 append 避免多次 reflow
+      const frag = document.createDocumentFragment();
+      const tmpContainer = document.createElement('div');
+      tmpContainer.style.display = 'none';
+      for (const msg of msgs) {
+        addMessage(msg.content, msg.type, false, tmpContainer, msg.metadata?.usedJudgmentIds || []);
+      }
+      while (tmpContainer.firstChild) {
+        frag.appendChild(tmpContainer.firstChild);
+      }
+      container.appendChild(frag);
     } else {
       addMessage('你好！我是 Bolloon Agent。有什么我可以帮你的吗？', 'ai', false, container);
     }
@@ -773,7 +936,7 @@ async function loadSession(channelId, sessionId = null) {
     container.innerHTML = '';
     if (session.messages && session.messages.length > 0) {
       session.messages.forEach(msg => {
-        addMessage(msg.content, msg.type, false, container);
+        addMessage(msg.content, msg.type, false, container, msg.metadata?.usedJudgmentIds || []);
       });
     } else {
       addMessage('你好！我是 Bolloon Agent。有什么我可以帮你的吗？', 'ai', false, container);
@@ -785,7 +948,7 @@ async function loadSession(channelId, sessionId = null) {
   }
 }
 
-function addMessage(content, type, save = true, container) {
+function addMessage(content, type, save = true, container, usedJudgmentIds = []) {
   const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
 
   // 浏览器侧内存保护: 单个 channel 的消息容器超过 MAX_MESSAGES_PER_CHANNEL
@@ -816,12 +979,6 @@ function addMessage(content, type, save = true, container) {
   const div = document.createElement('div');
   div.className = `message message-${type}`;
 
-  // 清理工具结果容器（当新的 AI 消息到达时）
-  if (type === 'ai' && toolResultContainer) {
-    toolResultContainer.remove();
-    toolResultContainer = null;
-  }
-
   // 清理内容：移除 tool call 标记和其他不应该显示的内容
   let cleanContent = content
     .replace(/\[TOOL_CALL\][\s\S]*?\[\/TOOL_CALL\]/g, '')
@@ -1005,12 +1162,13 @@ function addMessage(content, type, save = true, container) {
 
     actionsDiv.appendChild(copyBtn);
 
-    // "存为判断" 按钮: 把这条消息正文作为 decision 存到判断库
+    // "存为判断" 按钮: AI 蒸馏 (30-80 字) + 自动演化对齐
     const saveJudgmentBtn = document.createElement('button');
     saveJudgmentBtn.className = 'action-btn save-as-judgment';
-    saveJudgmentBtn.title = '把这条消息存为判断';
-    saveJudgmentBtn.setAttribute('data-decision', rawContent.substring(0, 800)); // 截断防超长
-    saveJudgmentBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z"></path><path d="M9 12l2 2 4-4"></path></svg> 存为判断`;
+    saveJudgmentBtn.title = 'AI 蒸馏为 30-80 字判断力 + 自动演化对齐';
+    saveJudgmentBtn.setAttribute('data-decision', rawContent.substring(0, 800));
+    if (currentChannelId) saveJudgmentBtn.setAttribute('data-channel-id', currentChannelId);
+    saveJudgmentBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L4 6v6c0 5 3.5 9.5 8 10 4.5-.5 8-5 8-10V6l-8-4z"></path><path d="M9 12l2 2 4-4"></path></svg> 蒸馏为判断`;
     actionsDiv.appendChild(saveJudgmentBtn);
     if (type === 'ai') {
       actionsDiv.appendChild(regenerateBtn);
@@ -1018,199 +1176,206 @@ function addMessage(content, type, save = true, container) {
     div.appendChild(actionsDiv);
   }
 
+  // P0.5: 反向引用链接 (AI 消息) — 极简, 点击跳判断力 modal
+  if (type === 'ai' && Array.isArray(usedJudgmentIds) && usedJudgmentIds.length > 0) {
+    const link = document.createElement('a');
+    link.className = 'used-judgments-link';
+    link.style.cssText = 'display:inline-block;margin-top:4px;font-size:11px;color:#0369a1;text-decoration:underline;cursor:pointer;';
+    link.textContent = `📎 参考 ${usedJudgmentIds.length} 条原则`;
+    link.onclick = (e) => {
+      e.preventDefault();
+      openJudgmentsModalWithFilter(usedJudgmentIds);
+    };
+    div.appendChild(link);
+  }
+
   div.appendChild(time);
   msgContainer.appendChild(div);
 
   msgContainer.scrollTop = msgContainer.scrollHeight;
 }
 
-// Agent status bar — sits between the message list and the input box.
-// Two visual states: "planning" (spinner) and "executing" (glowing icon).
-// The text alternates to convey the action loop.
-let agentStatusState = null; // 'planning' | 'executing' | null
-let agentStatusTextIdx = 0;
-
-const AGENT_STATUS_TEXTS = {
-  planning: ['正在计划', '正在分析', '正在思考'],
-  executing: ['正在执行', '正在调用工具', '正在处理'],
+// ============================================================
+// Loop timeline panel (Claude Code 风格)
+// ============================================================
+
+let timelinePanelEl = null;
+let timelineRowsEl = null;
+let currentTokenRow = null;
+let currentTokenText = '';
+let lastUsedJudgmentIds = []; // 用于 finalizeTimelineAsMessage 给 addMessage 第 5 参
+
+const PHASE_TEXT = {
+  gate_compute: '正在检索相关判断力...',
+  gate_done:    '已注入 {usedCount} 条原则',
+  d_detect:     'D 触发: 监测对话...',
+  d_distill:    'D 触发: 蒸馏判断力...',
+  d_done:       'D 触发: 已入库',
+  d_skip:       'D 触发: 跳过',
+  d_error:      'D 触发: 错误',
 };
 
-function setAgentStatus(state) {
-  if (!agentStatusEl || !agentStatusTextEl) return;
-  if (state === null) {
-    agentStatusEl.hidden = true;
-    agentStatusEl.removeAttribute('data-mode');
-    agentStatusState = null;
-    return;
-  }
-  agentStatusEl.hidden = false;
-  agentStatusEl.setAttribute('data-mode', state);
-  agentStatusState = state;
-  // 重排一下文本, 避免长时间停留过于单调
-  agentStatusTextIdx = (agentStatusTextIdx + 1) % AGENT_STATUS_TEXTS[state].length;
-  agentStatusTextEl.textContent = AGENT_STATUS_TEXTS[state][agentStatusTextIdx];
+function initTimelinePanel() {
+  if (timelinePanelEl) return;
+  timelinePanelEl = document.getElementById('loop-timeline-panel');
+  timelineRowsEl = document.getElementById('loop-timeline-rows');
+  const abortBtn = document.getElementById('loop-abort-btn');
+  if (abortBtn) abortBtn.addEventListener('click', abortCurrentRun);
 }
 
-function showTyping(container) {
-  hideTyping();
-  // 兼容旧路径: container 参数保留但不再使用, status bar 是全局唯一的
-  void container;
-  setAgentStatus('planning');
+function resetTimeline() {
+  if (timelineRowsEl) timelineRowsEl.innerHTML = '';
+  currentTokenRow = null;
+  currentTokenText = '';
+  lastUsedJudgmentIds = [];
+  const title = document.getElementById('loop-timeline-title');
+  if (title) title.textContent = '▸ 运行中';
 }
 
-function hideTyping() {
-  setAgentStatus(null);
-  // 兜底: 旧版本的 #typing 元素可能还残留在 DOM 里, 顺手清掉
-  const old = document.getElementById('typing');
-  if (old) old.remove();
-  hideStreaming();
+function showTimelinePanel() {
+  initTimelinePanel();
+  resetTimeline();
+  if (timelinePanelEl) timelinePanelEl.hidden = false;
 }
 
-let streamingMessageEl = null;
-
-function showStreaming(container) {
-  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
-  hideStreaming();
-  streamingMessageEl = document.createElement('div');
-  streamingMessageEl.className = 'message message-ai';
-  streamingMessageEl.id = 'streaming';
-  const bubble = document.createElement('div');
-  bubble.className = 'bubble bubble-ai streaming-content';
-  streamingMessageEl.appendChild(bubble);
-  msgContainer.appendChild(streamingMessageEl);
-  msgContainer.scrollTop = msgContainer.scrollHeight;
+function hideTimelinePanel() {
+  if (timelinePanelEl) timelinePanelEl.hidden = true;
 }
 
-function hideStreaming() {
-  if (streamingMessageEl) {
-    streamingMessageEl.remove();
-    streamingMessageEl = null;
-  }
+function scrollTimelineToBottom() {
+  if (timelinePanelEl) timelinePanelEl.scrollTop = timelinePanelEl.scrollHeight;
 }
 
-function updateStreamingContent(content, container) {
-  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
-  if (streamingMessageEl) {
-    const bubble = streamingMessageEl.querySelector('.streaming-content');
-    if (bubble) {
-      bubble.textContent = content;
-      msgContainer.scrollTop = msgContainer.scrollHeight;
-    }
-  }
+function appendPhaseRow(text, status) {
+  if (!timelineRowsEl) return;
+  const row = document.createElement('div');
+  row.className = 'loop-row loop-row-phase';
+  row.style.cssText = 'padding:2px 0;color:#374151;';
+  const icon = status === 'done' ? '✓' : status === 'error' ? '✗' : '●';
+  row.innerHTML = `<span style="color:#6b7280;">${icon}</span> <span>${escapeHtml(text)}</span>`;
+  timelineRowsEl.appendChild(row);
+  scrollTimelineToBottom();
 }
 
-function handleStreamEvent(data, container) {
-  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
-  // 始终确保有工作流显示区域
-  if (!workflowDisplayEl) {
-    workflowDisplayEl = createWorkflowDisplay();
-    msgContainer.appendChild(workflowDisplayEl);
+function appendOrUpdateTokenRow(delta) {
+  if (!timelineRowsEl) return;
+  if (!currentTokenRow) {
+    currentTokenRow = document.createElement('div');
+    currentTokenRow.className = 'loop-row loop-row-token';
+    currentTokenRow.style.cssText = 'padding:2px 0 2px 16px;color:#1f2937;white-space:pre-wrap;word-break:break-word;';
+    currentTokenText = '';
+    timelineRowsEl.appendChild(currentTokenRow);
   }
-
-  if (data.streamType === 'thinking') {
-    showStreaming(msgContainer);
-    updateStreamingContent(data.content || '思考中...', msgContainer);
-  } else if (data.streamType === 'token') {
-    showStreaming(msgContainer);
-    const current = streamingMessageEl?.querySelector('.streaming-content')?.textContent || '';
-    updateStreamingContent(current + data.content, msgContainer);
+  currentTokenText += delta;
+  currentTokenRow.textContent = currentTokenText;
+  scrollTimelineToBottom();
+}
+
+function appendToolRow(toolName, status) {
+  if (!timelineRowsEl) return;
+  const row = document.createElement('div');
+  row.className = 'loop-row loop-row-tool';
+  row.dataset.status = status;
+  row.style.cssText = 'padding:2px 0;color:#1e40af;cursor:pointer;user-select:none;';
+  const icon = status === 'done' ? '✓' : status === 'error' ? '✗' : '●';
+  row.innerHTML = `<span style="color:#6b7280;">${icon}</span> ${escapeHtml(toolName)} <span class="toggle" style="color:#6b7280;">▸</span>`;
+  row.addEventListener('click', () => {
+    const detail = row.nextElementSibling;
+    if (detail && detail.classList.contains('loop-row-tool-detail')) {
+      const isHidden = detail.style.display === 'none';
+      detail.style.display = isHidden ? 'block' : 'none';
+      const tg = row.querySelector('.toggle');
+      if (tg) tg.textContent = isHidden ? '▾' : '▸';
+    }
+  });
+  timelineRowsEl.appendChild(row);
+  return row;
+}
+
+function appendToolDetail(row, content) {
+  if (!row || !timelineRowsEl) return;
+  const detail = document.createElement('div');
+  detail.className = 'loop-row loop-row-tool-detail';
+  detail.style.cssText = 'padding:4px 0 6px 24px;color:#4b5563;font-size:11px;white-space:pre-wrap;word-break:break-word;background:#f3f4f6;border-radius:3px;margin-bottom:4px;';
+  detail.textContent = content;
+  detail.style.display = 'none';
+  timelineRowsEl.insertBefore(detail, row.nextSibling);
+  scrollTimelineToBottom();
+}
+
+function findLastPendingToolRow() {
+  if (!timelineRowsEl) return null;
+  const rows = timelineRowsEl.querySelectorAll('.loop-row-tool');
+  for (let i = rows.length - 1; i >= 0; i--) {
+    if (rows[i].dataset.status === 'pending') return rows[i];
+  }
+  return null;
+}
+
+function handlePhaseEventTimeline(data) {
+  initTimelinePanel();
+  const tmpl = PHASE_TEXT[data.phase];
+  if (!tmpl) return;
+  if (timelinePanelEl.hidden) showTimelinePanel();
+  let text = tmpl;
+  if (data.usedCount !== undefined) text = text.replace('{usedCount}', String(data.usedCount));
+  if (data.detail && (data.phase === 'd_done' || data.phase === 'd_skip' || data.phase === 'd_error')) {
+    text = `${text} — ${data.detail}`;
   }
+  const status = data.phase.endsWith('_done') || data.phase === 'd_skip' ? 'done'
+               : data.phase === 'd_error' ? 'error' : 'pending';
+  appendPhaseRow(text, status);
 }
 
-function handleStatusEvent(data, container) {
-  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
-  // 检查是否是工具调用结果
+function handleStatusEventTimeline(data) {
+  initTimelinePanel();
   const content = data.content || '';
   const isJsonResult = content.startsWith('{') && content.includes('"success"');
-
-  if (isJsonResult) {
-    // 工具结果：折叠显示
-    showToolResult(data.tool, content, msgContainer);
+  if (data.tool) {
+    // 工具事件: 折叠行 + 可选挂 output
+    const pending = findLastPendingToolRow();
+    if (pending && pending.textContent && pending.textContent.includes(data.tool) && content.length > 100) {
+      // 把 output 挂到上一个同工具的 pending 行
+      pending.dataset.status = 'done';
+      const iconEl = pending.firstElementChild;
+      if (iconEl) iconEl.textContent = '✓';
+      const tg = pending.querySelector('.toggle');
+      if (tg) tg.textContent = '▸';
+      appendToolDetail(pending, content);
+    } else {
+      const status = isJsonResult ? 'done' : 'pending';
+      const row = appendToolRow(data.tool, status);
+      if (isJsonResult) appendToolDetail(row, content);
+    }
+    scrollTimelineToBottom();
   } else {
-    // 普通状态：流式显示
-    showStreaming(msgContainer);
-    const icon = data.tool ? `🔧 ${data.tool}: ` : '';
-    updateStreamingContent(icon + data.content, msgContainer);
+    // 普通 status: 当作 phase done
+    if (timelinePanelEl.hidden) showTimelinePanel();
+    const label = (data.tool ? `🔧 ${data.tool}: ` : '') + content;
+    appendPhaseRow(label, 'done');
   }
 }
 
-// 显示工具调用结果（折叠）
-let toolResultContainer = null;
-
-function showToolResult(toolName, resultJson, container) {
-  const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
-  // 清理之前的流式显示
-  hideStreaming();
-
-  // 获取或创建工具结果容器
-  if (!toolResultContainer) {
-    toolResultContainer = document.createElement('div');
-    toolResultContainer.className = 'tool-results-container';
-    msgContainer.appendChild(toolResultContainer);
-  }
-
-  // 尝试解析并格式化 JSON
-  let formattedResult = resultJson;
-  try {
-    const parsed = JSON.parse(resultJson);
-    formattedResult = formatToolResult(parsed);
-  } catch {}
-
-  // 创建折叠项
-  const resultEl = document.createElement('div');
-  resultEl.className = 'tool-result-item collapsed';
-
-  const toolDisplayName = toolName || '工具结果';
-  const headerEl = document.createElement('div');
-  headerEl.className = 'tool-result-header';
-  headerEl.innerHTML = `
-    <span class="tool-result-icon">🔧</span>
-    <span class="tool-result-name">${toolDisplayName}</span>
-    <span class="tool-result-toggle">▸</span>
-  `;
-  // 绑定事件处理器（避免内联 onclick）
-  headerEl.addEventListener('click', () => {
-    resultEl.classList.toggle('collapsed');
-    resultEl.classList.toggle('expanded');
-  });
-
-  const contentEl = document.createElement('div');
-  contentEl.className = 'tool-result-content';
-  contentEl.innerHTML = `<pre>${formattedResult}</pre>`;
-
-  resultEl.appendChild(headerEl);
-  resultEl.appendChild(contentEl);
-  toolResultContainer.appendChild(resultEl);
-  msgContainer.scrollTop = msgContainer.scrollHeight;
+function handleStreamTokenEvent(data) {
+  initTimelinePanel();
+  if (timelinePanelEl.hidden) showTimelinePanel();
+  appendOrUpdateTokenRow(data.content || '');
 }
 
-// 格式化工具结果为易读格式
-function formatToolResult(obj, indent = 0) {
-  const spaces = '  '.repeat(indent);
-
-  if (obj === null || obj === undefined) {
-    return 'null';
-  }
-
-  if (typeof obj === 'object') {
-    if (Array.isArray(obj)) {
-      if (obj.length === 0) return '[]';
-      return obj.map(item => spaces + '- ' + formatToolResult(item, indent + 1)).join('\n');
-    }
-
-    const keys = Object.keys(obj);
-    if (keys.length === 0) return '{}';
+function handleQueueUpdateTimeline(data) {
+  const title = document.getElementById('loop-timeline-title');
+  if (!title) return;
+  title.textContent = data.queueLength > 0
+    ? `▸ 运行中 · 队列 +${data.queueLength}`
+    : '▸ 运行中';
+}
 
-    return keys.map(key => {
-      const value = obj[key];
-      if (typeof value === 'object') {
-        return `${spaces}${key}:\n${formatToolResult(value, indent + 1)}`;
-      }
-      return `${spaces}${key}: ${value}`;
-    }).join('\n');
+function finalizeTimelineAsMessage() {
+  const container = messagesContainers.get(currentChannelId) || messagesEl;
+  if (currentTokenText.trim().length > 0) {
+    addMessage(currentTokenText, 'ai', true, container, lastUsedJudgmentIds);
   }
-
-  return String(obj);
+  // tool 折叠行保留在 timeline 内, 用户能回看
 }
 
 // 工作流状态显示
@@ -1364,7 +1529,7 @@ function handleWorkflowLoopEvent(data, container) {
 // 用户命令可视化 - 当用户发送命令时调用
 let userCommandDisplayEl = null;
 
-function showUserCommand(command, container) {
+function showUserCommand(command, container, opts) {
   const msgContainer = container || messagesContainers.get(currentChannelId) || messagesEl;
   // 先移除之前的消息中的 user bubble（如果有重复的话）
   const existingUserBubbles = msgContainer.querySelectorAll('.message-user');
@@ -1378,12 +1543,17 @@ function showUserCommand(command, container) {
   // 创建美化版本的命令显示
   userCommandDisplayEl = document.createElement('div');
   userCommandDisplayEl.className = 'message message-user';
+  // v3 新增: 远端访客消息加 tag (source === 'remote' 表示是 B 通过 P2P 发来的)
+  const sourceTag = (opts && opts.source === 'remote')
+    ? `<div style="font-size:10px;color:#6b7280;margin-bottom:2px;">🌐 远端访客${opts.fromPublicKey ? ' (' + opts.fromPublicKey.substring(0, 8) + '…)' : ''} → A 的 channel</div>`
+    : '';
   userCommandDisplayEl.innerHTML = `
     <div class="user-command-display">
       <div class="command-prompt">
         <span class="prompt-icon">›</span>
         <span class="prompt-text">${command}</span>
       </div>
+      ${sourceTag}
     </div>
   `;
 
@@ -1397,6 +1567,12 @@ function showUserCommand(command, container) {
   msgContainer.scrollTop = msgContainer.scrollHeight;
 }
 
+// ============================================================
+// 状态条 + phase + queue + abort (UI 体验补丁) — 旧版, 已被 timeline panel 取代
+// ============================================================
+
+
+
 function connect(channelId) {
   const targetChannelId = channelId || currentChannelId;
   if (!targetChannelId) return;
@@ -1490,30 +1666,39 @@ function connect(channelId) {
       const container = messagesContainers.get(msgChannelId) || messagesEl;
 
       if (data.type === 'user') {
-        showUserCommand(data.content, container);
+        // 2026-06-11 修: 不再走 showUserCommand (› 装饰条) 路径, 因为:
+        // 1. sendMessage 已经在客户端 addMessage(text, 'user', true) 渲染成 .bubble-user 气泡
+        // 2. SSE 推 user 又调 showUserCommand → 同时出现气泡 + 装饰条 (双重显示)
+        // 3. 第二次切 channel 时, showUserCommand 会 remove 已有 .message-user 元素 (line 1477),
+        //    但 .bubble-user class 不是 .message-user → 残留装饰条, 表现"模式变了"
+        // 改法: SSE 收到 user 后, 跳过显示 (lastUserCommand 已经匹配, addMessage(save=true) 内部去重)
+        // 但要确保 lastUserCommand 已经设过 — sendMessage 调 addMessage(true) 时会设
+        // 远端 user (source === 'remote') 不会被 sendMessage 渲染, 需要走 addMessage 一次
+        if (data.source === 'remote') {
+          // 远端访客 (B 通过 P2P 发来的), sendMessage 没渲染它, 这里补上气泡
+          addMessage(data.content, 'user', true, container);
+        }
+        // 本地 user 已经由 sendMessage 渲染 + 去重, 这里不再显示
       } else if (data.type === 'ai') {
-        addMessage(data.content, 'ai', true, container);
-        hideTyping();
+        addMessage(data.content, 'ai', true, container, lastUsedJudgmentIds);
       } else if (data.type === 'stream') {
-        handleStreamEvent(data, container);
-        setAgentStatus('executing');
+        if (data.streamType === 'thinking' || data.streamType === 'token') {
+          handleStreamTokenEvent(data);
+        }
       } else if (data.type === 'regenerating') {
+        // 删旧的最后一条 AI 消息, 准备重新生成
         const messages = container.querySelectorAll('.message-ai');
         if (messages.length > 0) {
           const lastAiMsg = messages[messages.length - 1];
           lastAiMsg.remove();
         }
-        showTyping(container);
+        showTimelinePanel();
       } else if (data.type === 'status') {
-        handleStatusEvent(data, container);
-        setAgentStatus('executing');
+        handleStatusEventTimeline(data);
       } else if (data.type === 'done') {
-        hideTyping();
-        // AI 回复完, 把最后一条 ai 消息落盘 (兜底, 避免 server saveSession 漏写)
-        const lastAi = container.querySelector('.message-ai:last-of-type .message-content');
-        if (lastAi) {
-          persistLastMessageToServer('ai', lastAi.textContent || '');
-        }
+        // AI 回复生成完, 从 timeline 拿出 token 文本作为正式消息
+        finalizeTimelineAsMessage();
+        hideTimelinePanel();
       } else if (data.type === 'renamed') {
         const channel = channels.find(c => c.id === data.channelId);
         if (channel) {
@@ -1524,7 +1709,6 @@ function connect(channelId) {
           }
         }
       } else if (data.type === 'error') {
-        hideTyping();
         addMessage('错误: ' + data.content, 'ai', true, container);
       } else if (data.type === 'task_status') {
         handleTaskStatusEvent(data, container);
@@ -1532,6 +1716,13 @@ function connect(channelId) {
         handleWorkflowStepEvent(data, container);
       } else if (data.type === 'workflow_loop') {
         handleWorkflowLoopEvent(data, container);
+      } else if (data.type === 'phase') {
+        handlePhaseEventTimeline(data);
+      } else if (data.type === 'queue_update') {
+        handleQueueUpdateTimeline(data);
+      } else if (data.type === 'used_judgments' && Array.isArray(data.usedIds)) {
+        // 注入门回传: 保存 usedIds, finalizeTimelineAsMessage 时给 addMessage
+        lastUsedJudgmentIds = data.usedIds;
       }
     } catch (parseErr) {
       console.error('[SSE] 解析错误', parseErr);
@@ -1543,8 +1734,16 @@ async function sendMessage() {
   const text = input.value.trim();
   if (!text) return;
 
+  // 2026-06-11: 立即把用户消息渲染成气泡上屏 (走 .bubble-user, 跟本地聊天一致)
+  // 之前只靠 SSE `type: user` 回调显示, 但 addMessage(user) 默认 save=true 走去重, 容易跟 SSE 二次显示冲突/丢失
+  // 现在: sendMessage 自己上屏, SSE `user` 回调来时因为 lastUserCommand 已匹配, 自动跳过 → 不重复
+  const container = messagesContainers.get(currentChannelId) || messagesEl;
+  addMessage(text, 'user', true, container);
+  // 滚动到底
+  if (container) container.scrollTop = container.scrollHeight;
+
   input.value = '';
-  showTyping();
+  showTimelinePanel();
 
   // 立即把用户消息落盘, 避免切走再切回时丢失
   persistLastMessageToServer('user', text);
@@ -1566,11 +1765,11 @@ async function sendMessage() {
     });
 
     if (!res.ok) {
-      hideTyping();
+      hideTimelinePanel();
       addMessage('发送失败', 'ai');
     }
   } catch (err) {
-    hideTyping();
+    hideTimelinePanel();
     addMessage('连接错误', 'ai');
     console.error('Send error', err);
   }
@@ -1731,13 +1930,23 @@ function applyMention(channel) {
 }
 
 function updateMentionDropdown() {
-  if (!mentionChannels.length) return;
+  // 2026-06-10 修: 数组空时主动刷一次, 不再静默 return
+  // 之前 `if (!mentionChannels.length) return` 导致初始化 0-8s 窗口按 @ 看不到任何 item
+  if (!mentionChannels.length) {
+    refreshMentionChannels().then(() => {
+      // 拉完再重试一次 (异步, 不阻塞当前键击)
+      if (mentionChannels.length) updateMentionDropdown();
+    });
+    return;
+  }
   const m = getCurrentMentionQuery();
   if (!m) { closeMentionDropdown(); return; }
   // 只在 dropdown 刚打开时设置 anchor (blockEnd 跟着 insert 走)
   if (mentionAnchor === -1) {
     mentionAnchor = m.anchor;
     mentionBlockEnd = m.anchor + 1 + (m.query || '').length;
+    // dropdown 首次打开 → 强制刷一次, 保证 remote 列表最新
+    refreshMentionChannels();
   }
   mentionQuery = m.query;
   const q = m.query.toLowerCase();
@@ -1876,12 +2085,20 @@ function setupMentionAutocomplete(inputEl) {
   }
 
   function update() {
-    if (!mentionChannels.length) return;
+    // 2026-06-10 修: 与主输入框同步 — 数组空时主动刷新, 首次打开 dropdown 强制刷新
+    if (!mentionChannels.length) {
+      refreshMentionChannels().then(() => {
+        if (mentionChannels.length) update();
+      });
+      return;
+    }
     const m = detectQuery();
     if (!m) { closeLocal(); return; }
     if (localAnchor === -1) {
       localAnchor = m.anchor;
       localBlockEnd = m.anchor + 1 + (m.query || '').length;
+      // dropdown 首次打开 → 强制刷一次保证 remote 最新
+      refreshMentionChannels();
     }
     localQuery = m.query;
     const q = m.query.toLowerCase();
@@ -2428,11 +2645,45 @@ function switchJudgmentTab(tab) {
   renderJudgments(lastJudgmentsCache);
 }
 
+function switchStatusFilter(status) {
+  currentStatusFilter = status;
+  document.querySelectorAll('.judgment-status-tab').forEach(btn => {
+    const active = btn.dataset.status === status;
+    btn.classList.toggle('active', active);
+    btn.style.background = active ? '#2563eb' : '#e5e7eb';
+    btn.style.color = active ? '#fff' : '#374151';
+  });
+  loadJudgments();
+}
+
+/**
+ * P0.5: 打开判断力 modal 并 filter 到指定 ids
+ * - 调 openJudgmentsModal() + 等 loadJudgments() 完成
+ * - 然后用 ids filter lastJudgmentsCache
+ */
+function openJudgmentsModalWithFilter(ids) {
+  if (!Array.isArray(ids) || ids.length === 0) return;
+  if (typeof openJudgmentsModal === 'function') {
+    openJudgmentsModal();
+  } else if (judgmentsModal) {
+    judgmentsModal.classList.add('active');
+  }
+  // 等 loadJudgments 完成 (它会 await fetch 然后 renderJudgments)
+  setTimeout(() => {
+    if (typeof lastJudgmentsCache === 'undefined') return;
+    lastJudgmentsCache = (lastJudgmentsCache || []).filter((j) => ids.includes(j.id));
+    if (typeof renderJudgments === 'function') {
+      renderJudgments(lastJudgmentsCache);
+    }
+  }, 150);
+}
+
 function hideJudgmentsModal() {
   if (judgmentsModal) judgmentsModal.classList.remove('active');
 }
 
 let currentJudgmentTab = 'channel'; // 'channel' | 'global'
+let currentStatusFilter = 'all'; // 'all' | 'active' | 'superseded' | 'violations'
 let lastJudgmentsCache = []; // 最近一次 loadJudgments 拿到的原始列表, 切 tab / 切 channel 时复用
 
 /**
@@ -2504,6 +2755,19 @@ function renderJudgmentItems(items, opts) {
     const reason = (j.reasons && j.reasons[0]) ? escapeHtml(j.reasons[0]) : '';
     const domain = (j.context && j.context.domain) ? escapeHtml(j.context.domain) : 'general';
     const stakes = (j.context && j.context.stakes) ? escapeHtml(j.context.stakes) : 'medium';
+    const isSuperseded = j.status === 'superseded';
+    const isRejected = j.status === 'rejected';
+    const dimmedStyle = isSuperseded || isRejected
+      ? 'opacity:0.55;background:#f3f4f6;'
+      : '';
+    const statusTag = isSuperseded
+      ? `<span style="display:inline-block;background:#fef3c7;color:#92400e;font-size:10px;padding:1px 6px;border-radius:3px;margin-left:6px;" title="已被新判断力演化替代">已过时</span>`
+      : isRejected
+      ? `<span style="display:inline-block;background:#fee2e2;color:#991b1b;font-size:10px;padding:1px 6px;border-radius:3px;margin-left:6px;">已拒绝</span>`
+      : '';
+    const evolveNote = isSuperseded && j.supersededBy
+      ? `<div style="font-size:10px;color:#6b7280;margin-top:2px;">被新条替代 · ${escapeHtml(j.evolutionReason || 'merged')} · ${escapeHtml(j.evolvedAt || '').substring(0,10)}</div>`
+      : '';
     const bindBtn = showBindToggle
       ? isBound
         ? `<button class="judgment-toggle-btn" data-id="${escapeHtml(j.id)}" data-action="unbind" title="从当前 channel 移除" style="background:none;border:1px solid #fca5a5;color:#b91c1c;padding:1px 8px;border-radius:3px;cursor:pointer;font-size:11px;">× 移除</button>`
@@ -2513,18 +2777,18 @@ function renderJudgmentItems(items, opts) {
       <div class="task-item completed judgment-row"
            data-judgment-id="${escapeHtml(j.id)}"
            draggable="true"
-           style="cursor:grab;">
+           style="cursor:grab;${dimmedStyle}">
         <div class="task-item-header">
           <label class="judgment-checkbox" style="display:flex;align-items:center;cursor:pointer;margin-right:8px;" onclick="event.stopPropagation();">
             <input type="checkbox" class="judgment-select-cb" data-id="${escapeHtml(j.id)}" style="cursor:pointer;" onclick="event.stopPropagation();">
           </label>
           <div class="task-item-title">
-            <span>🛡️</span>
-            <span class="judgment-decision">${escapeHtml(j.decision)}</span>
+            <span class="judgment-decision">${escapeHtml(j.decision)}</span>${statusTag}
           </div>
           <span class="task-item-status completed">${stakes}</span>
         </div>
         ${reason ? `<div class="task-item-desc" style="color:#555;font-size:13px;margin-top:4px;">理由: ${reason}</div>` : ''}
+        ${evolveNote}
         <div class="task-item-meta" style="color:#999;font-size:11px;margin-top:4px;display:flex;justify-content:space-between;align-items:center;">
           <span>${domain} · ${escapeHtml(j.timestamp)} · ${escapeHtml(j.id)}</span>
           <span style="display:flex;gap:4px;">
@@ -2541,14 +2805,53 @@ function renderJudgmentItems(items, opts) {
 async function loadJudgments() {
   if (!judgmentsList) return;
   try {
-    const res = await fetch('/api/judgments');
+    // P3: 违规记录走单独 API
+    if (currentStatusFilter === 'violations') {
+      const res = await fetch('/api/judgments/violations?limit=50');
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      const data = await res.json();
+      renderViolations(data.items || []);
+      judgmentsLoaded = true;
+      return;
+    }
+
+    // 类 B: 自适应扫描建议
+    if (currentStatusFilter === 'adaptive') {
+      const res = await fetch('/api/judgments/adaptive-suggestions');
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      const data = await res.json();
+      renderAdaptiveSuggestions(data);
+      judgmentsLoaded = true;
+      return;
+    }
+
+    // 阶段 2: causal-judge 因果分析
+    if (currentStatusFilter === 'causal') {
+      const res = await fetch('/api/judgments/causal/correlation?topN=10');
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      const data = await res.json();
+      renderCausalAnalysis(data.items || []);
+      judgmentsLoaded = true;
+      return;
+    }
+
+    const res = await fetch('/api/judgments?status=' + encodeURIComponent(currentStatusFilter));
     if (!res.ok) throw new Error('HTTP ' + res.status);
     const data = await res.json();
     lastJudgmentsCache = data.judgments || [];
     renderJudgments(lastJudgmentsCache);
     if (judgmentsBadge) {
-      if (data.count > 0) {
-        judgmentsBadge.textContent = data.count;
+      // 徽章永远显示 active 数量; 不跟 filter 变
+      // 当 filter=active 时, 主 fetch 已经返回的就是 active 列表, 直接用 data.count
+      // 当 filter=all/superseded 时, 从主列表本地数 active 条 (status ?? 'active' 兼容老数据)
+      let activeCount;
+      if (currentStatusFilter === 'active') {
+        activeCount = data.count;
+      } else {
+        activeCount = lastJudgmentsCache.filter((j) => (j.status ?? 'active') === 'active').length;
+      }
+      if (activeCount > 0) {
+        judgmentsBadge.textContent = activeCount;
         judgmentsBadge.style.display = '';
       } else {
         judgmentsBadge.style.display = 'none';
@@ -2560,6 +2863,245 @@ async function loadJudgments() {
   }
 }
 
+/**
+ * P3 渲染违规记录 (与 renderJudgments 同位置, 但内容不同)
+ */
+function renderViolations(items) {
+  if (!judgmentsList) return;
+  if (!items || items.length === 0) {
+    judgmentsList.innerHTML = '<div class="task-empty">暂无违规记录 (AI 回复未违反注入原则).</div>';
+    return;
+  }
+  judgmentsList.innerHTML = items.map((v) => {
+    const ts = escapeHtml((v.ts || '').substring(0, 19).replace('T', ' '));
+    const userPrev = escapeHtml(v.userInputPreview || '');
+    const aiPrev = escapeHtml(v.aiReplyPreview || '');
+    const principles = (v.result?.violatedPrinciples || []).map((p) =>
+      `<div style="margin-top:3px;padding:4px 8px;background:#fef2f2;border-radius:3px;">
+        <span style="color:#dc2626;">⚠</span> <strong>${escapeHtml(p.principle || '')}</strong>
+        <span style="color:#991b1b;">— ${escapeHtml(p.reason || '')}</span>
+      </div>`
+    ).join('');
+    return `
+      <div class="task-item" style="border-left:3px solid #dc2626;padding:8px 12px;background:#fffbfb;">
+        <div style="font-size:11px;color:#6b7280;margin-bottom:4px;">${ts} · confidence=${escapeHtml(String(v.result?.confidence ?? 0))}</div>
+        <div style="font-size:12px;color:#1f2937;"><strong>用户:</strong> ${userPrev}</div>
+        <div style="font-size:12px;color:#1f2937;margin-top:2px;"><strong>AI:</strong> ${aiPrev}</div>
+        <div style="margin-top:6px;">${principles}</div>
+      </div>
+    `;
+  }).join('');
+}
+
+/**
+ * 类 B 自适应建议渲染
+ *  - rising (绿色 boost 标记): 7 天使用率高于 30 天均值的 1.5 倍
+ *  - stale (黄色 deprecate 标记): 90 天未用 + 总使用 < 3
+ *  - unused (灰色 review 标记): 30 天未用 + 总使用 < 5
+ * 每条带 "✓ 接受" / "✗ 拒绝" 按钮, 接受会真改库, 拒绝只留痕
+ */
+function renderAdaptiveSuggestions(data) {
+  if (!judgmentsList) return;
+  const { judgmentsTotal, usageEntriesScanned, suggestions, scannedAt } = data;
+  const ts = escapeHtml((scannedAt || '').substring(0, 19).replace('T', ' '));
+
+  if (!suggestions || suggestions.length === 0) {
+    judgmentsList.innerHTML = `
+      <div class="task-empty">📊 自适应扫描: 无建议
+        <div style="margin-top:8px;font-size:11px;color:#6b7280;">扫了 ${judgmentsTotal} 条原则, ${usageEntriesScanned} 条使用记录, 都挺健康.</div>
+        <div style="margin-top:4px;font-size:11px;color:#6b7280;">扫描于 ${ts}</div>
+      </div>`;
+    return;
+  }
+
+  const KIND_STYLE = {
+    rising:  { color: '#059669', bg: '#ecfdf5', label: '↑ rising',  action: 'boost' },
+    stale:   { color: '#92400e', bg: '#fef3c7', label: '⏰ stale',  action: 'deprecate' },
+    unused:  { color: '#6b7280', bg: '#f3f4f6', label: '👀 unused', action: 'review' },
+  };
+
+  const header = `
+    <div style="padding:8px 12px;background:#f9fafb;border-radius:4px;margin-bottom:8px;font-size:11px;color:#374151;">
+      📊 扫描于 ${ts} · ${judgmentsTotal} 条原则 · ${usageEntriesScanned} 条使用记录 · <strong>${suggestions.length}</strong> 条建议
+      <button class="rescan-btn" style="margin-left:8px;background:none;border:1px solid #6b7280;color:#374151;padding:1px 8px;border-radius:3px;cursor:pointer;font-size:11px;">🔄 重新扫描</button>
+    </div>
+  `;
+
+  const rows = suggestions.map((s) => {
+    const style = KIND_STYLE[s.kind] || KIND_STYLE.unused;
+    const m = s.metrics || {};
+    return `
+      <div class="task-item" data-suggestion-key="${escapeHtml(s.key)}"
+           style="border-left:3px solid ${style.color};padding:8px 12px;background:${style.bg};margin-bottom:6px;">
+        <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
+          <span style="color:${style.color};font-weight:600;font-size:12px;">${style.label}</span>
+          <span style="font-size:11px;color:#6b7280;">${s.action === 'boost' ? '建议加权' : s.action === 'deprecate' ? '建议废弃' : '建议审视'}</span>
+        </div>
+        <div style="font-size:12px;color:#1f2937;margin-bottom:4px;"><strong>${escapeHtml(s.decision)}</strong></div>
+        <div style="font-size:11px;color:#6b7280;margin-bottom:6px;">${escapeHtml(s.reason)}</div>
+        <div style="font-size:11px;color:#9ca3af;margin-bottom:6px;">
+          7天 ${m.usage7d || 0} · 30天 ${m.usage30d || 0} · 共 ${m.totalUsage || 0} · 上次用 ${m.daysSinceLastUse || 0} 天前
+        </div>
+        <div style="display:flex;gap:6px;">
+          <button class="adaptive-accept" data-key="${escapeHtml(s.key)}" data-id="${escapeHtml(s.judgmentId)}" data-action-kind="${escapeHtml(s.action)}"
+                  style="background:#059669;color:#fff;border:none;padding:2px 10px;border-radius:3px;cursor:pointer;font-size:11px;">✓ 接受</button>
+          <button class="adaptive-reject" data-key="${escapeHtml(s.key)}" data-id="${escapeHtml(s.judgmentId)}" data-action-kind="${escapeHtml(s.action)}"
+                  style="background:none;border:1px solid #d1d5db;color:#6b7280;padding:2px 10px;border-radius:3px;cursor:pointer;font-size:11px;">✗ 拒绝</button>
+        </div>
+      </div>
+    `;
+  }).join('');
+
+  judgmentsList.innerHTML = header + rows;
+
+  // 绑定按钮
+  const rescanBtn = judgmentsList.querySelector('.rescan-btn');
+  if (rescanBtn) {
+    rescanBtn.onclick = async () => {
+      rescanBtn.disabled = true;
+      rescanBtn.textContent = '🔄 扫描中...';
+      try {
+        const r = await fetch('/api/judgments/adaptive-suggestions?force=1');
+        if (r.ok) renderAdaptiveSuggestions(await r.json());
+      } catch (err) {
+        console.error('[adaptive] rescan failed:', err);
+      } finally {
+        rescanBtn.disabled = false;
+        rescanBtn.textContent = '🔄 重新扫描';
+      }
+    };
+  }
+  judgmentsList.querySelectorAll('.adaptive-accept').forEach((btn) => {
+    btn.onclick = () => applyAdaptiveSuggestion(btn.dataset.key, btn.dataset.id, btn.dataset.actionKind, 'accept');
+  });
+  judgmentsList.querySelectorAll('.adaptive-reject').forEach((btn) => {
+    btn.onclick = () => applyAdaptiveSuggestion(btn.dataset.key, btn.dataset.id, btn.dataset.actionKind, 'reject');
+  });
+}
+
+async function applyAdaptiveSuggestion(key, judgmentId, actionKind, decision) {
+  const row = judgmentsList?.querySelector(`[data-suggestion-key="${key}"]`);
+  if (row) row.style.opacity = '0.5';
+  try {
+    const res = await fetch('/api/judgments/adaptive-apply', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        action: decision,
+        suggestion: {
+          key,
+          judgmentId,
+          kind: actionKind,
+          action: actionKind,
+          decision: '',
+          reason: '',
+          metrics: {},
+          scannedAt: new Date().toISOString(),
+        },
+      }),
+    });
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    // 视觉反馈: 隐藏该行
+    if (row) row.style.display = 'none';
+  } catch (err) {
+    if (row) row.style.opacity = '';
+    console.error('[adaptive] apply failed:', err);
+    alert('操作失败: ' + (err && err.message || 'unknown'));
+  }
+}
+
+// ============================================================
+// 阶段 2: causal-judge 渲染
+// ============================================================
+
+/**
+ * 渲染关联分析 (top 5 互信息对)
+ * - 显示每对: judgmentA ↔ judgmentB + 互信息 + co-occurrence + 因果方向
+ * - 每条 judgment 旁加"🔬 跑 do-calculus"按钮, 异步显示 causalEffect
+ */
+function renderCausalAnalysis(items) {
+  if (!judgmentsList) return;
+  if (!items || items.length === 0) {
+    judgmentsList.innerHTML = `
+      <div class="task-empty">🔍 因果分析: 无高关联对
+        <div style="margin-top:8px;font-size:11px;color:#6b7280;">usage 数据不足 (至少 3 条同现), 或 LLM 不可用. 多用 bolloon 一段时间后重试.</div>
+      </div>`;
+    return;
+  }
+
+  const rows = items.map((p, idx) => `
+    <div class="task-item" data-causal-idx="${idx}" data-judgment-a="${escapeHtml(p.judgmentA)}" data-judgment-b="${escapeHtml(p.judgmentB)}"
+         style="border-left:3px solid #7c3aed;padding:8px 12px;background:#faf5ff;margin-bottom:6px;">
+      <div style="display:flex;align-items:center;gap:6px;margin-bottom:4px;">
+        <span style="color:#7c3aed;font-weight:600;font-size:12px;">${escapeHtml(p.causalDirection)}</span>
+        <span style="font-size:11px;color:#6b7280;">MI=${p.mutualInfo} · co=${p.coOccurrence}</span>
+      </div>
+      <div style="font-size:11px;color:#374151;margin-bottom:4px;">${escapeHtml(p.explanation || '(无 LLM 解释)')}</div>
+      <div style="font-size:10px;color:#9ca3af;">A: ${escapeHtml(p.judgmentA)} ↔ B: ${escapeHtml(p.judgmentB)}</div>
+      <div style="margin-top:6px;display:flex;gap:6px;">
+        <button class="causal-intervention-a" data-jid="${escapeHtml(p.judgmentA)}"
+                style="background:#7c3aed;color:#fff;border:none;padding:2px 10px;border-radius:3px;cursor:pointer;font-size:11px;">🔬 do(A)</button>
+        <button class="causal-intervention-b" data-jid="${escapeHtml(p.judgmentB)}"
+                style="background:#7c3aed;color:#fff;border:none;padding:2px 10px;border-radius:3px;cursor:pointer;font-size:11px;">🔬 do(B)</button>
+      </div>
+      <div class="causal-result" data-jid="" style="display:none;margin-top:6px;padding:6px;background:#f3e8ff;border-radius:3px;font-size:11px;"></div>
+    </div>
+  `).join('');
+
+  judgmentsList.innerHTML = `
+    <div style="padding:8px 12px;background:#f9fafb;border-radius:4px;margin-bottom:8px;font-size:11px;color:#374151;">
+      🔍 关联分析 (top ${items.length} 互信息对) · <span style="color:#7c3aed;">LLM 推断方向</span>
+      <button class="causal-refresh" style="margin-left:8px;background:none;border:1px solid #7c3aed;color:#7c3aed;padding:1px 8px;border-radius:3px;cursor:pointer;font-size:11px;">🔄 重新跑</button>
+    </div>
+    ${rows}
+  `;
+
+  // 按钮: 重新跑
+  const refresh = judgmentsList.querySelector('.causal-refresh');
+  if (refresh) {
+    refresh.onclick = async () => {
+      refresh.disabled = true;
+      refresh.textContent = '🔄 跑中...';
+      try {
+        const r = await fetch('/api/judgments/causal/correlation?topN=10');
+        if (r.ok) renderCausalAnalysis((await r.json()).items || []);
+      } finally {
+        refresh.disabled = false;
+        refresh.textContent = '🔄 重新跑';
+      }
+    };
+  }
+
+  // 按钮: 跑 do-calculus
+  judgmentsList.querySelectorAll('.causal-intervention-a, .causal-intervention-b').forEach((btn) => {
+    btn.onclick = async () => {
+      const jid = btn.getAttribute('data-jid');
+      const resultDiv = btn.closest('.task-item')?.querySelector('.causal-result');
+      if (!resultDiv) return;
+      resultDiv.style.display = 'block';
+      resultDiv.textContent = '🔬 跑 do-calculus (LLM 模拟反事实)...';
+      btn.disabled = true;
+      try {
+        const r = await fetch(`/api/judgments/causal/intervention?judgmentId=${encodeURIComponent(jid)}`);
+        if (!r.ok) throw new Error('HTTP ' + r.status);
+        const data = await r.json();
+        const effect = data.causalEffect;
+        const sign = effect > 0 ? '+' : '';
+        const color = Math.abs(effect) > 0.5 ? '#dc2626' : Math.abs(effect) > 0.2 ? '#d97706' : '#059669';
+        resultDiv.innerHTML = `
+          <div style="color:${color};font-weight:600;">do-calculus: causalEffect = ${sign}${effect} (${data.marginalContribution})</div>
+          <div style="color:#374151;margin-top:4px;">${escapeHtml(data.reasoning)}</div>
+          <div style="color:#9ca3af;margin-top:4px;">confidence=${data.confidence}</div>
+        `;
+      } catch (err) {
+        resultDiv.innerHTML = `<div style="color:#dc2626;">失败: ${escapeHtml(err.message)}</div>`;
+      } finally {
+        btn.disabled = false;
+      }
+    };
+  });
+}
+
 /** 把 judgment id 加进 / 移出当前 channel.bound_judgment_ids, 然后刷新两边 UI */
 async function toggleChannelJudgment(judgmentId, action) {
   if (!currentChannelId) {
@@ -2626,6 +3168,11 @@ if (judgmentsList) {
     btn.addEventListener('click', () => switchJudgmentTab(btn.dataset.tab));
   });
 
+  // status 过滤
+  document.querySelectorAll('.judgment-status-tab').forEach(btn => {
+    btn.addEventListener('click', () => switchStatusFilter(btn.dataset.status));
+  });
+
   // 拖拽: 每条 judgment 是 drag source, dataTransfer 装 decision text
   judgmentsList.addEventListener('dragstart', (e) => {
     const row = e.target.closest && e.target.closest('.judgment-row');
@@ -2866,13 +3413,84 @@ if (judgmentImportFile) {
   });
 }
 
-// --- 从对话里 "存为判断": 事件委托到消息容器, 匹配 .save-as-judgment ---
+// --- 从对话里 "蒸馏为判断": 事件委托到消息容器, 匹配 .save-as-judgment ---
+// 两条路径:
+// 1. 有 data-channel-id → 调 /api/judgments/distill-from-conversation (B 触发, AI 蒸馏 + 演化对齐)
+// 2. 没有 channelId (老按钮 / 历史数据) → fallback 到老 /api/judgments (直存)
 document.addEventListener('click', async (e) => {
   const btn = e.target.closest && e.target.closest('.save-as-judgment');
   if (!btn) return;
   e.preventDefault();
   e.stopPropagation();
+
+  const channelId = btn.getAttribute('data-channel-id');
   const decision = (btn.getAttribute('data-decision') || '').trim();
+
+  if (channelId) {
+    btn.classList.add('loading');
+    btn.disabled = true;
+    try {
+      const res = await fetch('/api/judgments/distill-from-conversation', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ channelId }),
+      });
+      const out = await res.json();
+      if (!res.ok) throw new Error(out.error || 'HTTP ' + res.status);
+
+      if (!out.triggered) {
+        btn.classList.remove('loading');
+        btn.disabled = false;
+        btn.title = '蒸馏失败: ' + (out.reason || '无内容');
+        return;
+      }
+
+      const j = out.judgment;
+      const ev = out.evolved || { merged: 0, superseded: 0 };
+      btn.classList.remove('loading');
+      btn.classList.add('saved');
+      btn.title = '已蒸馏为判断';
+
+      // inline 确认弹框 (在按钮下方出现, 5 秒后自动消失)
+      showDistillConfirm(btn, {
+        value: j.decision,
+        evidence: (j.reasons && j.reasons[0]) || '',
+        merged: ev.merged,
+        superseded: ev.superseded,
+        onEdit: async (newText) => {
+          try {
+            await fetch('/api/judgments/' + encodeURIComponent(j.id), {
+              method: 'PATCH',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ decision: newText }),
+            });
+          } catch (err) {
+            console.error('[judgments] edit failed:', err);
+          }
+        },
+        onReject: async () => {
+          try {
+            await fetch('/api/judgments/' + encodeURIComponent(j.id), {
+              method: 'DELETE',
+            });
+          } catch (err) {
+            console.error('[judgments] reject failed:', err);
+          }
+        },
+      });
+
+      // 刷新判断力库缓存
+      setTimeout(() => loadJudgments(), 100);
+    } catch (err) {
+      console.error('[judgments] distill-from-chat failed:', err);
+      btn.classList.remove('loading');
+      btn.disabled = false;
+      btn.title = '蒸馏失败: ' + err.message;
+    }
+    return;
+  }
+
+  // 老路径 fallback (没有 channelId, 直接存原文)
   if (!decision) return;
   try {
     const res = await fetch('/api/judgments', {
@@ -2884,12 +3502,65 @@ document.addEventListener('click', async (e) => {
     if (!out.ok) throw new Error(out.error || 'failed');
     btn.classList.add('saved');
     btn.title = '已存为判断';
-    // 顶部徽章会通过 setInterval 拉新数据, 不用手动触发
   } catch (err) {
     console.error('[judgments] save-from-chat failed:', err);
     btn.title = '保存失败: ' + err.message;
   }
 });
+
+/**
+ * inline 蒸馏确认弹框 — 在按钮下方出现, 显示凝练结果 + 演化结果
+ * 5 秒后自动消失, 用户可点 "编辑" / "拒绝"
+ */
+function showDistillConfirm(btn, opts) {
+  const { value, evidence, merged, superseded, onEdit, onReject } = opts;
+  const old = document.getElementById('distill-confirm-popup');
+  if (old) old.remove();
+
+  const popup = document.createElement('div');
+  popup.id = 'distill-confirm-popup';
+  popup.style.cssText = `
+    position:absolute; z-index:1000;
+    background:#fff; border:1px solid #d1d5db; border-radius:6px;
+    box-shadow:0 4px 12px rgba(0,0,0,0.1);
+    padding:10px 12px; min-width:280px; max-width:380px;
+    font-size:13px; color:#1f2937;
+  `;
+  let evolveNote = '';
+  if (merged > 0 || superseded > 0) {
+    evolveNote = `<div style="font-size:11px;color:#059669;margin-top:6px;">✓ 演化对齐: ${merged} 条已合并${superseded > 0 ? `, ${superseded} 条已淘汰` : ''}</div>`;
+  }
+  popup.innerHTML = `
+    <div style="font-weight:600;margin-bottom:4px;">已蒸馏为判断力</div>
+    <div style="background:#f9fafb;padding:6px 8px;border-radius:4px;line-height:1.4;">${escapeHtml(value)}</div>
+    ${evidence ? `<div style="font-size:11px;color:#6b7280;margin-top:4px;">证据: ${escapeHtml(evidence)}</div>` : ''}
+    ${evolveNote}
+    <div style="display:flex;gap:6px;margin-top:8px;">
+      <button class="dc-edit" style="background:none;border:1px solid #d1d5db;color:#374151;padding:2px 10px;border-radius:3px;cursor:pointer;font-size:11px;">编辑</button>
+      <button class="dc-reject" style="background:none;border:1px solid #fca5a5;color:#b91c1c;padding:2px 10px;border-radius:3px;cursor:pointer;font-size:11px;">拒绝</button>
+      <button class="dc-close" style="margin-left:auto;background:none;border:none;color:#6b7280;cursor:pointer;font-size:14px;">×</button>
+    </div>
+  `;
+
+  // 定位
+  const rect = btn.getBoundingClientRect();
+  popup.style.top = (window.scrollY + rect.bottom + 4) + 'px';
+  popup.style.left = (window.scrollX + rect.left) + 'px';
+  document.body.appendChild(popup);
+
+  // 绑定按钮
+  popup.querySelector('.dc-edit').onclick = () => {
+    const newText = prompt('编辑判断力:', value);
+    if (newText && newText.trim() && onEdit) onEdit(newText.trim());
+    popup.remove();
+  };
+  popup.querySelector('.dc-reject').onclick = () => {
+    if (onReject) onReject();
+    popup.remove();
+  };
+  popup.querySelector('.dc-close').onclick = () => popup.remove();
+  setTimeout(() => popup.remove(), 5000);
+}
 if (judgmentSubmitBtn) judgmentSubmitBtn.addEventListener('click', submitJudgment);
 
 // 启动时拉一次, 让徽章显示总数 (不打开 modal 也能看到)
@@ -2905,11 +3576,33 @@ let knownPeers = [];  // { name, publicKey, lastConnectedAt, addedAt }
 
 async function loadRemoteChannels() {
   try {
+    // 1) 拉 known peers (好友列表)
     const res = await fetch('/api/p2p-peers');
-    if (!res.ok) return;
-    const data = await res.json();
-    knownPeers = Array.isArray(data.peers) ? data.peers : [];
+    if (res.ok) {
+      const data = await res.json();
+      knownPeers = Array.isArray(data.peers) ? data.peers : [];
+    }
+    // 2) 2026-06-10 修: 同时拉 /api/remote-channels, 兜底 SSE 推送漏掉的情况
+    //    (页面刷新后 remoteChannels[] = [], 必须主动拉一次才有数据)
+    const r2 = await fetch('/api/remote-channels');
+    if (r2.ok) {
+      const data2 = await r2.json();
+      const peers = Array.isArray(data2.peers) ? data2.peers : [];
+      // 合并到 remoteChannels[]: 按 peerId 覆盖
+      for (const p of peers) {
+        let group = remoteChannels.find(g => g.peerId === p.peerId);
+        if (!group) {
+          group = { peerId: p.peerId, channels: [], peerName: ('peer-' + p.peerId.substring(0, 8)) };
+          remoteChannels.push(group);
+        }
+        group.channels = p.channels || [];
+      }
+    }
     renderRemoteChannels();
+    // 3) 远端数据可能变化, 同步 @-mention 列表
+    if (typeof refreshMentionChannels === 'function') {
+      refreshMentionChannels();
+    }
   } catch (err) {
     console.error('[v3] loadRemoteChannels 失败:', err);
   }
@@ -2919,30 +3612,60 @@ function renderRemoteChannels() {
   const list = document.getElementById('remote-channel-list');
   if (!list) return;
 
-  // Phase 3 重做: 好友列表 + 收到的 channel 分组
-  if (knownPeers.length === 0) {
-    list.innerHTML = '<li style="color:var(--text-muted);font-size:11px;padding:8px 4px;text-align:center;">(暂无好友, 点 + 添加)</li>';
-    return;
-  }
-
   // 按 peerId 分组 channels
   const channelsByPeer = {};
   for (const p of remoteChannels) {
     channelsByPeer[p.peerId] = p.channels || [];
   }
 
-  const html = knownPeers.map(peer => {
+  // 2026-06-10 修: 之前 UI 只渲染 knownPeers, 但对面 publicKey 可能跟本机 known_peers 不匹配
+  // (例如对面重启 / 换 role / 第一次相连还没加为好友), 导致 remoteChannels 里有数据 UI 却空白.
+  // 修法: 把 remoteChannels 里的 "陌生 peer" (不在 known_peers 里) 也渲染出来, 标记为未加好友.
+  const knownPks = new Set(knownPeers.map(p => p.publicKey));
+  const strangerPeers = remoteChannels
+    .filter(p => !knownPks.has(p.peerId))
+    .map(p => ({
+      publicKey: p.peerId,
+      name: p.peerName || ('未授权 ' + p.peerId.substring(0, 8)),
+      lastConnectedAt: null,
+      _isStranger: true
+    }));
+  const allPeers = [...knownPeers, ...strangerPeers];
+
+  if (allPeers.length === 0) {
+    list.innerHTML = '<li style="color:var(--text-muted);font-size:11px;padding:8px 4px;text-align:center;">(暂无好友, 点 + 添加)</li>';
+    return;
+  }
+
+  const html = allPeers.map(peer => {
     const peerChannels = channelsByPeer[peer.publicKey] || [];
     const lastConn = peer.lastConnectedAt
       ? new Date(peer.lastConnectedAt).toLocaleDateString()
-      : '从未连接';
+      : (peer._isStranger ? '陌生 peer' : '从未连接');
+    const strangerStyle = peer._isStranger ? 'border:1px dashed var(--border-light);' : '';
+    const strangerIcon = peer._isStranger ? '❔' : '👤';
+    // 2026-06-11: 折叠逻辑 (全不展开)
+    // - 所有 peer 首次见都默认 *折叠* (包括 known_peers 第一个) — 用户一进来看到完整 peer 列表
+    // - 标题栏右侧 "X ch" 提示有内容, 用户点 caret 展开
+    // - 已见过: 沿用 collapsedPeers (用户上次选择)
+    // - "全部展开/折叠" 按钮在 P2P header (id=p2p-toggle-all-btn)
+    if (!seenPeers.has(peer.publicKey)) {
+      seenPeers.add(peer.publicKey);
+      collapsedPeers.add(peer.publicKey);  // 全部默认折叠
+      saveSeenPeers();
+      saveCollapsedPeers();
+    }
+    const isCollapsed = collapsedPeers.has(peer.publicKey);
+    const caretChar = '▾';  // CSS rotate -90deg 处理折叠态
     return `
-      <li class="remote-peer-group" style="margin-bottom:10px;">
+      <li class="remote-peer-group ${isCollapsed ? 'collapsed' : ''}" style="margin-bottom:10px;${strangerStyle}">
         <div class="remote-peer-header" data-peer-name="${escapeHtml(peer.name)}" data-peer-pk="${escapeHtml(peer.publicKey)}"
-             style="display:flex;align-items:center;gap:6px;padding:4px 6px;background:var(--bg-hover);border-radius:4px;cursor:pointer;">
-          <span style="font-size:12px;">👤</span>
-          <span style="flex:1;font-size:12px;font-weight:600;" title="${escapeHtml(peer.publicKey)}">${escapeHtml(peer.name)}</span>
-          <span style="font-size:9px;color:var(--text-muted);">${lastConn}</span>
+             style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--bg-hover);border-radius:4px;cursor:pointer;">
+          <button class="peer-caret-btn" data-toggle-peer="${escapeHtml(peer.publicKey)}" title="折叠/展开"
+                  style="background:var(--bg-active);border:1px solid var(--border);color:var(--text);cursor:pointer;width:22px;height:22px;border-radius:4px;font-size:12px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;flex:0 0 auto;">${caretChar}</button>
+          <span style="font-size:13px;">${strangerIcon}</span>
+          <span style="flex:1;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escapeHtml(peer.publicKey)}">${escapeHtml(peer.name)}</span>
+          <span style="font-size:9px;color:var(--text-muted);">${peerChannels.length > 0 ? `${peerChannels.length} ch · ` : ''}${lastConn}</span>
         </div>
         <div class="remote-peer-channels" style="margin-top:4px;margin-left:8px;">
           ${peerChannels.length === 0
@@ -2952,7 +3675,6 @@ function renderRemoteChannels() {
                    style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;border-radius:4px;font-size:12px;">
                 <span>🤖</span>
                 <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escapeHtml(c.name || '')}">${escapeHtml(c.name || '(未命名)')}</span>
-                <span title="对方 judgment 数 (不会同步到本地)" style="font-size:9px;color:var(--text-muted);">🧠${c.boundJudgmentCount || 0}</span>
               </div>
             `).join('')
           }
@@ -2962,6 +3684,15 @@ function renderRemoteChannels() {
   }).join('');
   list.innerHTML = html;
 
+  // 2026-06-10: 折叠按钮点击 → 切折叠 (stopPropagation 防止冒泡触发 header 的分享 modal)
+  list.querySelectorAll('.peer-caret-btn[data-toggle-peer]').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const pk = btn.getAttribute('data-toggle-peer');
+      togglePeerCollapsed(pk);
+    });
+  });
+
   // 绑定: 点击 channel → 弹聊天窗口
   list.querySelectorAll('.remote-channel-row').forEach(row => {
     row.addEventListener('click', () => {
@@ -2974,15 +3705,104 @@ function renderRemoteChannels() {
   });
   // 绑定: 点击 peer 头部 → 弹分享 modal (让 A 决定分享本机哪些 channel 给这个 peer)
   list.querySelectorAll('.remote-peer-header').forEach(row => {
-    row.addEventListener('click', () => {
+    row.addEventListener('click', (e) => {
+      // 2026-06-10: 防御 — 点 caret 时已 stopPropagation, 但万一冒泡逃逸再挡一道
+      if (e.target.closest('.peer-caret')) return;
       const peerName = row.dataset.peerName;
       const peerPk = row.dataset.peerPk;
       openShareToPeerModal(peerName, peerPk);
     });
   });
+
+  // 2026-06-10: 每个 peer 头部双击 → 改名字 / 改备注
+  list.querySelectorAll('.remote-peer-header').forEach(row => {
+    row.addEventListener('dblclick', (e) => {
+      if (e.target.closest('.peer-caret-btn')) return;
+      const peerName = row.dataset.peerName;
+      const peerPk = row.dataset.peerPk;
+      openEditPeerModal(peerName, peerPk);
+    });
+  });
+
+  // 2026-06-10: 渲染完成后同步 header 切换按钮图标
+  if (typeof window.__syncP2PToggleAllBtn === 'function') window.__syncP2PToggleAllBtn();
+}
+
+/** v3: 改 peer 名字 / 备注 modal (持久化到 known_peers.json) */
+async function openEditPeerModal(peerName, peerPublicKey) {
+  document.getElementById('edit-peer-modal')?.remove();
+  // 先读 known_peers 拿到现有 notes
+  let currentNotes = '';
+  let currentName = peerName;
+  try {
+    const r = await fetch('/api/p2p-peers');
+    if (r.ok) {
+      const d = await r.json();
+      const entry = (d.peers || []).find(p => p.publicKey === peerPublicKey);
+      if (entry) {
+        currentName = entry.name || peerName;
+        currentNotes = entry.notes || '';
+      }
+    }
+  } catch {}
+  const html = `
+    <div id="edit-peer-modal" class="friend-req-overlay">
+      <div class="friend-req-shell" style="width:520px;">
+        <div class="friend-req-header">
+          <span style="font-size:18px;">✏️</span>
+          <div style="flex:1;min-width:0;">
+            <div class="friend-req-title">编辑好友</div>
+            <div class="friend-req-meta">publicKey: ${escapeHtml(peerPublicKey.substring(0,16))}…</div>
+          </div>
+        </div>
+        <div class="friend-req-body">
+          <label style="display:block;margin-bottom:6px;font-size:12px;color:var(--text-secondary);">显示名字</label>
+          <input id="epm-name" type="text" value="${escapeHtml(currentName)}"
+                 style="width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-main);color:var(--text);font-family:inherit;font-size:13px;box-sizing:border-box;margin-bottom:12px;">
+          <label style="display:block;margin-bottom:6px;font-size:12px;color:var(--text-secondary);">备注 (自由文本, 例如合作领域 / 怎么认识的)</label>
+          <textarea id="epm-notes" rows="4" placeholder="例如: 2026-06 合作 LLM 代发验证"
+                    style="width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-main);color:var(--text);font-family:inherit;font-size:13px;box-sizing:border-box;resize:vertical;">${escapeHtml(currentNotes)}</textarea>
+        </div>
+        <div class="friend-req-actions">
+          <button id="epm-cancel" class="friend-req-btn-deny">取消</button>
+          <button id="epm-save" class="friend-req-btn-accept">保存</button>
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.insertAdjacentHTML('beforeend', html);
+  const close = () => document.getElementById('edit-peer-modal')?.remove();
+  document.getElementById('epm-cancel').onclick = close;
+  document.getElementById('epm-save').onclick = async () => {
+    const newName = document.getElementById('epm-name').value.trim() || currentName;
+    const newNotes = document.getElementById('epm-notes').value;
+    try {
+      const r = await fetch(`/api/p2p-peers/${encodeURIComponent(peerName)}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: newName, notes: newNotes })
+      });
+      const data = await r.json();
+      if (!r.ok) throw new Error(data.error || 'save failed');
+      console.log('[v3] 改 peer 成功:', newName, '备注:', newNotes);
+      showSimpleToast(`✅ 已保存 ${newName}`);
+      close();
+      // 重新拉 known_peers + 远程 channels 重新渲染
+      const r2 = await fetch('/api/p2p-peers');
+      if (r2.ok) {
+        const d2 = await r2.json();
+        knownPeers = Array.isArray(d2.peers) ? d2.peers : [];
+      }
+      renderRemoteChannels();
+    } catch (err) {
+      console.error('[v3] 保存 peer 失败:', err);
+      alert('保存失败: ' + (err.message || err));
+    }
+  };
 }
 
 /** v3: 分享 channel 给指定 peer 的 modal (A 侧用) */
+/** v3: 分享 channel 给指定 peer 的 modal (A 侧用) — 2026-06-11 改用 Step 3 风格 class */
 async function openShareToPeerModal(peerName, peerPublicKey) {
   document.getElementById('share-to-peer-modal')?.remove();
   let allChannels = [];
@@ -2991,36 +3811,37 @@ async function openShareToPeerModal(peerName, peerPublicKey) {
     if (res.ok) allChannels = await res.json();
   } catch (err) { console.error('openShareToPeerModal:', err); }
   const rows = allChannels.length === 0
-    ? '<div style="color:#6b7280;padding:12px;text-align:center;">还没有 channel</div>'
+    ? '<div class="share-modal-empty">还没有 channel</div>'
     : allChannels.map(ch => {
         const isShared = Array.isArray(ch.shared_with_peers) && ch.shared_with_peers.includes(peerPublicKey);
         return `
-          <label style="display:flex;align-items:flex-start;gap:8px;padding:6px 4px;cursor:pointer;border-bottom:1px solid #f3f4f6;">
-            <input type="checkbox" data-cid="${escapeHtml(ch.id)}" ${isShared ? 'checked' : ''} style="margin-top:4px;cursor:pointer;">
-            <div style="flex:1;min-width:0;">
-              <div style="font-size:13px;font-weight:500;">${escapeHtml(ch.name)}</div>
-              <div style="font-size:10px;color:#9ca3af;margin-top:2px;">
-                ${isShared ? '✓ 已分享' : '未分享'} · ${ch.id}
+          <label class="share-modal-row">
+            <input type="checkbox" data-cid="${escapeHtml(ch.id)}" ${isShared ? 'checked' : ''} class="share-modal-cb">
+            <div class="share-modal-row-info">
+              <div class="share-modal-row-name">${escapeHtml(ch.name)}</div>
+              <div class="share-modal-row-meta">
+                ${isShared ? '✓ 已分享' : '未分享'} · ${escapeHtml(ch.id.slice(0, 24))}…
               </div>
             </div>
           </label>
         `;
       }).join('');
   const html = `
-    <div id="share-to-peer-modal" style="position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:10003;display:flex;align-items:center;justify-content:center;">
-      <div style="background:#fff;border-radius:8px;width:480px;max-width:92vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,0.2);">
-        <div style="padding:12px 16px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;">
-          <div>
-            <div style="font-size:15px;font-weight:600;">分享 channel 给 ${escapeHtml(peerName)}</div>
-            <div style="font-size:11px;color:#6b7280;margin-top:2px;">${escapeHtml(peerPublicKey.substring(0,16))}…</div>
+    <div id="share-to-peer-modal" class="friend-req-overlay">
+      <div class="friend-req-shell share-modal-shell">
+        <div class="friend-req-header">
+          <span style="font-size:18px;">📤</span>
+          <div style="flex:1;min-width:0;">
+            <div class="friend-req-title">分享 channel 给 ${escapeHtml(peerName)}</div>
+            <div class="friend-req-meta">${escapeHtml(peerPublicKey.substring(0,16))}…</div>
           </div>
-          <button id="spm-close" style="background:none;border:none;font-size:20px;color:#6b7280;cursor:pointer;">×</button>
+          <button id="spm-close" class="friend-req-btn-close">×</button>
         </div>
-        <div style="padding:8px 12px;background:#f9fafb;font-size:12px;color:#6b7280;">勾选要分享的 channel, 对方才能看到</div>
-        <div id="spm-list" style="flex:1;overflow-y:auto;padding:8px 16px;">${rows}</div>
-        <div style="padding:12px 20px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:8px;">
-          <button id="spm-cancel" style="padding:6px 14px;border:1px solid #d1d5db;background:#fff;border-radius:4px;cursor:pointer;font-size:13px;">取消</button>
-          <button id="spm-save" style="padding:6px 14px;background:#2563eb;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;">保存分享</button>
+        <div class="share-modal-hint">勾选要分享的 channel, 对方才能看到</div>
+        <div id="spm-list" class="share-modal-list">${rows}</div>
+        <div class="friend-req-actions">
+          <button id="spm-cancel" class="friend-req-btn-deny">取消</button>
+          <button id="spm-save" class="friend-req-btn-accept">保存分享</button>
         </div>
       </div>
     </div>
@@ -3036,7 +3857,7 @@ async function openShareToPeerModal(peerName, peerPublicKey) {
     for (const ch of allChannels) {
       const shouldShare = checkedIds.includes(ch.id);
       const wasShared = Array.isArray(ch.shared_with_peers) && ch.shared_with_peers.includes(peerPublicKey);
-      if (shouldShare === wasShared) continue; // 没变化跳过
+      if (shouldShare === wasShared) continue;
       const newList = (ch.shared_with_peers || []).filter((p) => p !== peerPublicKey);
       if (shouldShare) newList.push(peerPublicKey);
       try {
@@ -3048,34 +3869,36 @@ async function openShareToPeerModal(peerName, peerPublicKey) {
         if (res.ok) ok++; else fail++;
       } catch { fail++; }
     }
-    alert(`分享更新完成: 成功 ${ok}, 失败 ${fail}`);
+    showSimpleToast(`分享更新完成: 成功 ${ok}, 失败 ${fail}`, ok > 0 ? 'info' : (fail > 0 ? 'error' : 'info'));
     overlay.remove();
   };
 }
 
-/** v3: 跟远端 channel 聊天的简易弹窗 */
+/** v3: 跟远端 channel 聊天的简易弹窗
+ *  2026-06-10 重写: UI 完全对齐本地聊天 (复用 addMessage / .messages / .bubble 整套样式),
+ *  marked.parse + cleanThink + cleanEnv 自动生效, 不再裸文本.
+ */
 function openRemoteChannelChat(peerPublicKey, channelId, channelName) {
   // 移除已有 modal
   document.getElementById('remote-chat-modal')?.remove();
   const html = `
-    <div id="remote-chat-modal" style="position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:10002;display:flex;align-items:center;justify-content:center;">
-      <div style="background:#fff;border-radius:8px;width:560px;max-width:92vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,0.2);">
-        <div style="padding:12px 16px;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;">
+    <div id="remote-chat-modal" class="remote-chat-overlay">
+      <div class="remote-chat-shell">
+        <div class="remote-chat-header">
           <div style="flex:1;min-width:0;">
-            <div style="font-size:15px;font-weight:600;">跟 ${escapeHtml(channelName)} 聊天</div>
-            <div style="font-size:11px;color:#6b7280;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">远端 peer: ${escapeHtml(peerPublicKey.substring(0,16))}… · ${escapeHtml(channelId)}</div>
+            <div class="remote-chat-title">🌐 跟 ${escapeHtml(channelName)} 聊天</div>
+            <div class="remote-chat-meta">远端 peer: ${escapeHtml(peerPublicKey.substring(0,16))}… · ${escapeHtml(channelId)}</div>
           </div>
-          <button id="rcm-refresh-history" title="重新拉历史" style="background:none;border:1px solid var(--border);color:#6b7280;cursor:pointer;padding:2px 8px;border-radius:4px;font-size:11px;margin-right:6px;">↻ 历史</button>
-          <button id="rcm-close" style="background:none;border:none;font-size:20px;color:#6b7280;cursor:pointer;">×</button>
+          <button id="rcm-refresh-history" title="重新拉历史" class="remote-chat-btn-secondary">↻ 历史</button>
+          <button id="rcm-close" class="remote-chat-btn-close">×</button>
         </div>
-        <div id="rcm-thinking" style="display:none;padding:8px 16px;background:#fef3c7;color:#92400e;font-size:12px;border-bottom:1px solid #e5e7eb;">
+        <div id="rcm-thinking" class="remote-chat-thinking" style="display:none;">
           📥 正在从远端拉历史 + 判断力…
         </div>
-        <div id="rcm-log" style="flex:1;overflow-y:auto;padding:12px 16px;min-height:240px;max-height:60vh;background:#f9fafb;"></div>
-        <div style="padding:10px 12px;border-top:1px solid #e5e7eb;display:flex;gap:6px;">
-          <input id="rcm-input" type="text" placeholder="输入消息, 发送到远端 channel..."
-                 style="flex:1;padding:8px 10px;border:1px solid #d1d5db;border-radius:4px;font-size:13px;">
-          <button id="rcm-send" style="padding:8px 14px;background:#2563eb;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;">发送</button>
+        <div id="rcm-log" class="messages remote-chat-log"></div>
+        <div class="remote-chat-input-row">
+          <input id="rcm-input" type="text" placeholder="输入消息, 发送到远端 channel..." class="remote-chat-input">
+          <button id="rcm-send" class="remote-chat-btn-send">发送</button>
         </div>
       </div>
     </div>
@@ -3086,40 +3909,51 @@ function openRemoteChannelChat(peerPublicKey, channelId, channelName) {
   const inputEl = document.getElementById('rcm-input');
   const sendBtn = document.getElementById('rcm-send');
   const thinkingEl = document.getElementById('rcm-thinking');
-  document.getElementById('rcm-close').onclick = () => document.getElementById('remote-chat-modal').remove();
-  document.getElementById('rcm-refresh-history').onclick = () => loadHistory();
+  let historyRefreshTimer = null;
+  document.getElementById('rcm-close').onclick = () => {
+    if (historyRefreshTimer) { clearInterval(historyRefreshTimer); historyRefreshTimer = null; }
+    document.getElementById('remote-chat-modal').remove();
+  };
+  document.getElementById('rcm-refresh-history').onclick = () => loadHistory(false);
 
+  // 2026-06-10 改: 直接复用本地 addMessage, 自动获得 marked + think 折叠 + env 折叠 + 主题变量
   const append = (text, role) => {
-    const bubble = document.createElement('div');
-    const isUser = role === 'user';
-    bubble.style.cssText = `padding:8px 10px;margin:4px 0;border-radius:6px;font-size:13px;line-height:1.4;max-width:80%;word-wrap:break-word;${
-      isUser ? 'background:#2563eb;color:#fff;margin-left:auto;text-align:left;'
-             : 'background:#e5e7eb;color:#111;'
-    }`;
-    bubble.textContent = text;
-    log.appendChild(bubble);
+    addMessage(text, role === 'user' ? 'user' : 'ai', false, log);
     log.scrollTop = log.scrollHeight;
   };
 
+  // 系统提示用更轻量的样式 (不走 addMessage, 避免被当聊天记录裁剪)
   const appendSystem = (text, kind = 'info') => {
     const el = document.createElement('div');
-    const colors = {
-      info: { bg: '#dbeafe', fg: '#1e40af' },
-      warn: { bg: '#fef3c7', fg: '#92400e' },
-      error: { bg: '#fca5a5', fg: '#7f1d1d' }
-    };
-    const c = colors[kind] || colors.info;
-    el.style.cssText = `margin:6px 0;padding:6px 10px;background:${c.bg};color:${c.fg};border-radius:4px;font-size:11px;text-align:center;`;
+    el.className = `remote-chat-sysmsg remote-chat-sysmsg-${kind}`;
     el.textContent = text;
     log.appendChild(el);
     log.scrollTop = log.scrollHeight;
   };
 
   // v3 新增: 拉 A 端的 channel 历史 (含 messages + judgments)
-  async function loadHistory() {
+  async function loadHistory(isSilent) {
+    if (!document.getElementById('remote-chat-modal')) return; // modal 已关闭
+
+    if (isSilent) {
+      try {
+        const res = await fetch(`/api/remote-channels/chat-history?targetPublicKey=${encodeURIComponent(peerPublicKey)}&channelId=${encodeURIComponent(channelId)}`);
+        if (!res.ok || !document.getElementById('remote-chat-modal')) return;
+        const data = await res.json();
+        const newMsgs = data.messages || [];
+        const oldCount = log.querySelectorAll('.message').length;
+        if (newMsgs.length === oldCount) return;
+        const scrollWasAtBottom = log.scrollTop + log.clientHeight >= log.scrollHeight - 30;
+        renderHistory(data);
+        if (scrollWasAtBottom) {
+          setTimeout(() => { log.scrollTop = log.scrollHeight; }, 50);
+        }
+      } catch (_) { /* 静默失败 */ }
+      return;
+    }
+
     thinkingEl.style.display = 'block';
     log.innerHTML = '';
-    appendSystem('正在拉取远端 channel 的历史和判断力...', 'info');
     try {
       const res = await fetch(`/api/remote-channels/chat-history?targetPublicKey=${encodeURIComponent(peerPublicKey)}&channelId=${encodeURIComponent(channelId)}`);
       const data = await res.json();
@@ -3128,63 +3962,55 @@ function openRemoteChannelChat(peerPublicKey, channelId, channelName) {
         thinkingEl.style.display = 'none';
         return;
       }
-      // 清掉 loading
-      log.innerHTML = '';
-
-      // 1. 显示 judgment 依据 (header)
-      const judgments = data.judgments || { bound: [], candidates: [] };
-      if (judgments.bound && judgments.bound.length > 0) {
-        const jh = document.createElement('div');
-        jh.style.cssText = 'margin:0 0 8px;padding:8px 10px;background:#fef3c7;border-left:3px solid #f59e0b;border-radius:4px;font-size:12px;';
-        let h = `<div style="font-weight:600;color:#92400e;margin-bottom:4px;">🛡️ 对方 channel 绑定的判断力 (${judgments.bound.length} 条硬约束)</div>`;
-        for (const j of judgments.bound) {
-          h += `<div style="margin:3px 0;padding-left:8px;">• <b>${escapeHtml((j.decision || '').slice(0, 100))}</b>${j.domain ? `<span style="color:#a16207;font-size:10px;"> [${escapeHtml(j.domain)}${j.stakes ? '/' + escapeHtml(j.stakes) : ''}]</span>` : ''}${j.reasons && j.reasons.length ? '<br><span style="color:#92400e;font-size:11px;">理由: ' + escapeHtml(j.reasons.join('; ').slice(0, 100)) + '</span>' : ''}</div>`;
-        }
-        if (judgments.candidates && judgments.candidates.length > 0) {
-          h += `<div style="margin-top:6px;color:#92400e;font-size:11px;">+ ${judgments.candidates.length} 条候选判断力 (LLM 可自选参考)</div>`;
-        }
-        jh.innerHTML = h;
-        log.appendChild(jh);
+      renderHistory(data);
+    } catch (err) {
+      appendSystem(`拉取异常: ${err.message}`, 'error');
+    } finally {
+      thinkingEl.style.display = 'none';
+    }
+  }
+
+  function renderHistory(data) {
+    log.innerHTML = '';
+
+    // 1. 显示 judgment 依据 (header) — 保留, 但用 class 化样式
+    const judgments = data.judgments || { bound: [], candidates: [] };
+    if (judgments.bound && judgments.bound.length > 0) {
+      const jh = document.createElement('div');
+      jh.className = 'remote-chat-judgments';
+      let h = `<div class="remote-chat-judgments-title">🛡️ 对方 channel 绑定的判断力 (${judgments.bound.length} 条硬约束)</div>`;
+      for (const j of judgments.bound) {
+        h += `<div class="remote-chat-judgment-item">• <b>${escapeHtml((j.decision || '').slice(0, 100))}</b>${j.domain ? `<span class="remote-chat-judgment-tag"> [${escapeHtml(j.domain)}${j.stakes ? '/' + escapeHtml(j.stakes) : ''}]</span>` : ''}${j.reasons && j.reasons.length ? '<br><span class="remote-chat-judgment-reason">理由: ' + escapeHtml(j.reasons.join('; ').slice(0, 100)) + '</span>' : ''}</div>`;
+      }
+      if (judgments.candidates && judgments.candidates.length > 0) {
+        h += `<div class="remote-chat-judgments-foot">+ ${judgments.candidates.length} 条候选判断力 (LLM 可自选参考)</div>`;
       }
+      jh.innerHTML = h;
+      log.appendChild(jh);
+    }
 
-      // 2. 显示历史 messages (带 source 标签: 内部 owner vs 远端访客)
-      const msgs = data.messages || [];
-      if (msgs.length === 0) {
-        appendSystem('还没有历史消息, 在下面发第一条吧', 'info');
-      } else {
-        appendSystem(`从远端拉到 ${msgs.length} 条历史消息 (A 内部 owner + B 远端访客 都会显示)`, 'info');
-        for (const m of msgs) {
-          const isUser = m.type === 'user';
-          // v3: 加 source 标签
-          let tag = '';
-          if (isUser) {
-            if (m.source === 'remote') {
-              tag = `<div style="font-size:10px;color:#6b7280;margin-bottom:2px;">🌐 远端访客${m.fromPublicKey ? ' (' + m.fromPublicKey.substring(0, 8) + '…)' : ''} → A 的 channel</div>`;
-            } else {
-              tag = `<div style="font-size:10px;color:#6b7280;margin-bottom:2px;">👤 A (内部 owner) → A 的 channel</div>`;
-            }
+    // 2. 显示历史 messages — 完全复用本地 addMessage 渲染
+    const msgs = data.messages || [];
+    if (msgs.length === 0) {
+      appendSystem('还没有历史消息, 在下面发第一条吧', 'info');
+    } else {
+      for (const m of msgs) {
+        // 远端 owner 的 user 消息 vs 远端访客 (B) 的 user 消息 vs A 的 LLM 回复
+        // 全部走 addMessage, 让 marked/think/env 自动处理. 来源用一个小 prefix 标记.
+        const type = m.type === 'user' ? 'user' : 'ai';
+        let prefix = '';
+        if (m.type === 'user') {
+          if (m.source === 'remote') {
+            prefix = `🌐 远端访客${m.fromPublicKey ? ' (' + m.fromPublicKey.substring(0, 8) + '…)' : ''}\n\n`;
           } else {
-            tag = `<div style="font-size:10px;color:#6b7280;margin-bottom:2px;">🤖 A 的 LLM (在 A 节点上跑)</div>`;
+            prefix = `👤 A (内部 owner)\n\n`;
           }
-          const bubble = document.createElement('div');
-          const isRemoteUser = isUser && m.source === 'remote';
-          bubble.style.cssText = `padding:8px 10px;margin:4px 0;border-radius:6px;font-size:13px;line-height:1.4;max-width:80%;word-wrap:break-word;${
-            isUser
-              ? (isRemoteUser
-                  ? 'background:#dbeafe;color:#1e3a8a;margin-right:auto;text-align:left;border:1px solid #93c5fd;'
-                  : 'background:#f3f4f6;color:#374151;margin-left:auto;text-align:left;border:1px solid #d1d5db;')
-              : 'background:#e5e7eb;color:#111;'
-          }`;
-          bubble.innerHTML = tag + `<div>${escapeHtml(m.content || '')}</div>`;
-          log.appendChild(bubble);
+        } else {
+          prefix = `🤖 A 的 LLM\n\n`;
         }
-        // 滚到底部
-        setTimeout(() => { log.scrollTop = log.scrollHeight; }, 50);
+        addMessage(prefix + (m.content || ''), type, false, log);
       }
-    } catch (err) {
-      appendSystem(`拉取异常: ${err.message}`, 'error');
-    } finally {
-      thinkingEl.style.display = 'none';
+      setTimeout(() => { log.scrollTop = log.scrollHeight; }, 50);
     }
   }
 
@@ -3203,9 +4029,9 @@ function openRemoteChannelChat(peerPublicKey, channelId, channelName) {
       });
       const data = await res.json();
       if (!res.ok) throw new Error(data.error || 'send failed');
-      appendSystem('已发送, 等待对方回复...', 'info');
+      // 不再 appendSystem('已发送...') —— 用户看到自己消息已上屏就知道, 系统提示是噪音
     } catch (err) {
-      append('(发送失败: ' + (err.message || err) + ')', 'ai');
+      appendSystem('发送失败: ' + (err.message || err), 'error');
     } finally {
       sendBtn.disabled = false;
       sendBtn.textContent = '发送';
@@ -3219,7 +4045,10 @@ function openRemoteChannelChat(peerPublicKey, channelId, channelName) {
   startV3GlobalSSE();
 
   // 打开时立即拉历史
-  loadHistory();
+  loadHistory(false);
+
+  // 每 15 秒自动静默刷新, 同步远端 owner 或其他访客的新消息
+  historyRefreshTimer = setInterval(() => loadHistory(true), 15000);
 }
 
 // Phase 3: 我的 ID 按钮 → 真 modal (避免 confirm 在某些环境被禁用)
@@ -3305,20 +4134,166 @@ if (addPeerBtn) {
       return;
     }
     try {
-      // 调 p2p-connect (会 joinPeer + 持久化)
-      const res = await fetch('/api/remote-channels/p2p-connect', {
+      // v3 新增: 改用 friend-request RPC — 不光 joinPeer, 还发申请到对方
+      // 对方会收到 SSE friend-request 事件, 弹一个申请 modal
+      const res = await fetch('/api/friend-request', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ targetPublicKey: publicKey, name, persist: true })
+        body: JSON.stringify({ targetPublicKey: publicKey, name, message: '想加你为 P2P 好友, 共享 channel 协作' })
       });
       const data = await res.json();
+      if (res.status === 502) {
+        // 2026-06-10: 区分"对方不在线"和"写失败" — 让用户知道是否需要重试
+        const reason = data.code === 'NO_CONN' ? '对方未在线或 P2P 握手超时' : '写入 P2P 通道失败';
+        alert(`好友申请发送失败: ${reason}\n\n本地已记住对方 publicKey (${publicKey.substring(0,8)}...), 等对方上线后可在 P2P 面板手动重试.`);
+        await loadRemoteChannels();
+        return;
+      }
       if (!res.ok) throw new Error(data.error || 'connect failed');
-      alert(`已添加好友: ${name} (${publicKey.substring(0, 12)}...)\n重启后会自动重连`);
+      // 成功 — 但不阻塞地等 ack (ack 经 SSE 'friend-request-ack' 推回, 由 v3GlobalEventSource 处理)
+      window.__pendingFriendRequests = window.__pendingFriendRequests || new Map();
+      if (data.requestId) {
+        window.__pendingFriendRequests.set(data.requestId, { name, publicKey, at: Date.now() });
+        // 8s 后还没 ack → 提示用户对方可能跑旧版 (无 ack 协议)
+        setTimeout(() => {
+          if (window.__pendingFriendRequests.has(data.requestId)) {
+            window.__pendingFriendRequests.delete(data.requestId);
+            console.warn(`[v3-friend] 申请超时未收到 ack (requestId=${data.requestId.substring(0,8)})`);
+            showSimpleToast(`⚠️ 对方未确认收到 (可能是旧版客户端, 申请已发出但无法验证)`, 'warn');
+          }
+        }, 8000);
+      }
+      alert(`已发送好友申请给 ${name} (${publicKey.substring(0, 12)}...)\n对方收到后自己端弹申请 modal, 接受后会出现在 P2P 好友区.`);
       await loadRemoteChannels();
     } catch (err) {
-      alert('添加失败: ' + (err.message || err));
+      alert('申请失败: ' + (err.message || err));
+    }
+  });
+}
+
+/**
+ * v3 新增: 收到好友申请时, 弹一个 modal 让用户接受或拒绝
+ */
+function showFriendRequestModal(req) {
+  // 移除已有 modal
+  document.getElementById('friend-request-modal')?.remove();
+  // 2026-06-10: 同 Step 3 远端 chat modal 一样, 改用 class + CSS 变量, 跟本地风格统一
+  const html = `
+    <div id="friend-request-modal" class="friend-req-overlay">
+      <div class="friend-req-shell">
+        <div class="friend-req-header">
+          <span style="font-size:20px;">🤝</span>
+          <div style="flex:1;min-width:0;">
+            <div class="friend-req-title">好友申请</div>
+            <div class="friend-req-meta">来自 ${escapeHtml(req.fromName)} (${escapeHtml(req.fromPublicKey.substring(0, 16))}…)</div>
+          </div>
+        </div>
+        <div class="friend-req-body">
+          <p style="margin:0 0 8px;">${escapeHtml(req.message || '想加你为 P2P 好友')}</p>
+          <p style="margin:0;color:var(--text-muted);font-size:11px;">接受后: 双方互加好友, 对方分享的 channel 会自动出现在 P2P 好友区.</p>
+        </div>
+        <div class="friend-req-actions">
+          <button id="frm-deny" class="friend-req-btn-deny">拒绝</button>
+          <button id="frm-accept" class="friend-req-btn-accept">接受</button>
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.insertAdjacentHTML('beforeend', html);
+  const close = () => document.getElementById('friend-request-modal')?.remove();
+  document.getElementById('frm-deny').onclick = close;
+  document.getElementById('frm-accept').onclick = async () => {
+    close();
+    try {
+      const res = await fetch('/api/friend-accept', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ fromPublicKey: req.fromPublicKey, name: req.fromName })
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'accept failed');
+      console.log('[v3-friend] 接受了好友申请:', req.fromName);
+      // 立刻拉一次 — 对方刚 accept, ta 的 channel 列表会被推到我们这
+      setTimeout(loadRemoteChannels, 1000);
+      showSimpleToast(`✅ 已接受 ${req.fromName} 的好友申请`);
+    } catch (err) {
+      console.error('[v3-friend] accept 失败:', err);
+      alert('接受失败: ' + (err.message || err));
+    }
+  };
+}
+
+/**
+ * 2026-06-10: 简单的右下 toast, 3s 自动消失. 用于 ack / 接受好友 等非阻塞反馈
+ */
+function showSimpleToast(text, kind = 'info') {
+  const containerId = 'simple-toast-container';
+  let container = document.getElementById(containerId);
+  if (!container) {
+    container = document.createElement('div');
+    container.id = containerId;
+    container.style.cssText = 'position:fixed;right:16px;bottom:16px;z-index:10005;display:flex;flex-direction:column;gap:8px;max-width:320px;';
+    document.body.appendChild(container);
+  }
+  const el = document.createElement('div');
+  el.className = `simple-toast simple-toast-${kind}`;
+  el.style.cssText = `background:var(--bg-sidebar);color:var(--text);border:1px solid var(--border);padding:10px 14px;border-radius:6px;font-size:12px;box-shadow:0 4px 16px rgba(0,0,0,0.3);font-family:inherit;animation:toast-in .2s ease-out;`;
+  el.textContent = text;
+  container.appendChild(el);
+  setTimeout(() => {
+    el.style.transition = 'opacity .3s, transform .3s';
+    el.style.opacity = '0';
+    el.style.transform = 'translateX(20px)';
+    setTimeout(() => el.remove(), 320);
+  }, 3000);
+}
+
+// 2026-06-10: P2P 全部展开/折叠切换按钮 (单按钮, 根据当前多数态切换)
+const p2pToggleAllBtn = document.getElementById('p2p-toggle-all-btn');
+if (p2pToggleAllBtn) {
+  // 同步图标/文字: 多数 peer 折叠 → 显示 "⊞ 展开"; 多数展开 → 显示 "⊟ 折叠"
+  function syncToggleAllBtn() {
+    const allPks = new Set([
+      ...knownPeers.map(p => p.publicKey),
+      ...remoteChannels.map(g => g.peerId)
+    ]);
+    if (allPks.size === 0) {
+      p2pToggleAllBtn.textContent = '⊞ 展开';
+      p2pToggleAllBtn.title = '切换全部展开/折叠';
+      return;
+    }
+    let collapsedCount = 0;
+    for (const pk of allPks) if (collapsedPeers.has(pk)) collapsedCount++;
+    const majorityCollapsed = collapsedCount >= allPks.size / 2;
+    if (majorityCollapsed) {
+      p2pToggleAllBtn.textContent = '⊞ 展开';
+      p2pToggleAllBtn.title = '点击展开所有 P2P 好友';
+    } else {
+      p2pToggleAllBtn.textContent = '⊟ 折叠';
+      p2pToggleAllBtn.title = '点击折叠所有 P2P 好友';
+    }
+  }
+  p2pToggleAllBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const allPks = new Set([
+      ...knownPeers.map(p => p.publicKey),
+      ...remoteChannels.map(g => g.peerId)
+    ]);
+    if (allPks.size === 0) return;
+    // 多数折叠 → 全展开; 否则全折叠
+    let collapsedCount = 0;
+    for (const pk of allPks) if (collapsedPeers.has(pk)) collapsedCount++;
+    const majorityCollapsed = collapsedCount >= allPks.size / 2;
+    if (majorityCollapsed) {
+      expandAllPeers();
+    } else {
+      collapseAllPeers();
     }
+    syncToggleAllBtn();
   });
+  // 暴露给 renderRemoteChannels 渲染后调用 (保持图标跟实际状态一致)
+  window.__syncP2PToggleAllBtn = syncToggleAllBtn;
+  syncToggleAllBtn();  // 首次同步
 }
 
 // v3 双向刷新: 主动向所有好友发 agent.meta.list, 拿到 ta 们分享给我的 channel
@@ -3349,6 +4324,8 @@ if (refreshSharedBtn) {
 // 启动时拉一次 + 定期轮询 (SSE 接收 P2P reply 后也会更新)
 loadRemoteChannels();
 setInterval(loadRemoteChannels, 8000);
+// 全局 SSE — 接收 remote-channel-update / remote-chat-reply / friend-request
+startV3GlobalSSE();
 
 // ============ v3: 折叠 + 拖拽分隔线 ============