@bolloon/bolloon-agent 0.1.33 → 0.1.34

package/dist/web/client.js

@@ -29,6 +29,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 +156,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 +174,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 +254,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 +599,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 +686,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 +772,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 +883,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 +906,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);
+      }
+      while (tmpContainer.firstChild) {
+        frag.appendChild(tmpContainer.firstChild);
+      }
+      container.appendChild(frag);
     } else {
       addMessage('你好！我是 Bolloon Agent。有什么我可以帮你的吗？', 'ai', false, container);
     }
@@ -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>
   `;
 
@@ -1490,7 +1660,19 @@ 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();
@@ -1543,6 +1725,14 @@ 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();
 
@@ -1731,13 +1921,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 +2076,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();
@@ -2519,7 +2727,6 @@ function renderJudgmentItems(items, opts) {
             <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>
           </div>
           <span class="task-item-status completed">${stakes}</span>
@@ -2905,11 +3112,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 +3148,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 +3211,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 +3220,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 +3241,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 +3347,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 +3393,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 +3405,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 +3445,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 +3498,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 +3565,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 +3581,10 @@ function openRemoteChannelChat(peerPublicKey, channelId, channelName) {
   startV3GlobalSSE();
 
   // 打开时立即拉历史
-  loadHistory();
+  loadHistory(false);
+
+  // 每 15 秒自动静默刷新, 同步远端 owner 或其他访客的新消息
+  historyRefreshTimer = setInterval(() => loadHistory(true), 15000);
 }
 
 // Phase 3: 我的 ID 按钮 → 真 modal (避免 confirm 在某些环境被禁用)
@@ -3305,20 +3670,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 +3860,8 @@ if (refreshSharedBtn) {
 // 启动时拉一次 + 定期轮询 (SSE 接收 P2P reply 后也会更新)
 loadRemoteChannels();
 setInterval(loadRemoteChannels, 8000);
+// 全局 SSE — 接收 remote-channel-update / remote-chat-reply / friend-request
+startV3GlobalSSE();
 
 // ============ v3: 折叠 + 拖拽分隔线 ============