@bolloon/bolloon-agent 0.1.32 → 0.1.34

package/src/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 节点的思考过程
@@ -169,6 +241,57 @@ function startV3GlobalSSE() {
               log.scrollTop = log.scrollHeight;
             }
           }
+        } else if (msg.type === 'cross-mention-received') {
+          // v3 新增: A 节点上, 某个 channel 的 LLM @-mention 了另一个 channel, SSE 推过来
+          // 在所有打开的 chat modal 上显示"AI 跨渠道 @-mention" 提示
+          const allModals = document.querySelectorAll('.rcm-mention-toast, [id^="rcm-log"]');
+          for (const log of allModals) {
+            if (!log.id) continue;
+            const toast = document.createElement('div');
+            toast.style.cssText = 'margin:6px 0;padding:8px 10px;background:#fce7f3;border-left:3px solid #ec4899;border-radius:4px;font-size:12px;color:#831843;';
+            const fromTxt = msg.source === 'ai-mention-remote' ? `远端节点 ${(msg.fromPublicKey || '').substring(0, 8)}… 的 ${msg.originChannelName}` : `${msg.originChannelName} (本地)`;
+            toast.innerHTML = `📡 <b>${fromTxt}</b> @-mention → 当前 channel: <i>${escapeHtml((msg.text || '').slice(0, 100))}</i>${msg.text && msg.text.length > 100 ? '…' : ''}`;
+            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);
@@ -476,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 = '';
@@ -519,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">
@@ -608,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>
@@ -718,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);
@@ -737,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);
     }
@@ -1351,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');
@@ -1365,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>
   `;
 
@@ -1477,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();
@@ -1530,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();
 
@@ -1586,6 +1789,347 @@ input.addEventListener('keydown', (e) => {
   }
 });
 
+// ============ v3 新增: @-mention 单选自动补全 (主聊天框 #input) ============
+let mentionChannels = []; // { id, name, source: 'local'|'remote', ownerPublicKey? }
+let mentionDropdownEl = null;
+let mentionHighlightIdx = -1;
+let mentionQuery = null;
+let mentionAnchor = -1;        // @ 字符的绝对位置 (固定, 直到 dropdown 关闭)
+let mentionBlockEnd = -1;      // 插入区块的终点 (单选模式下 = anchor + 1 + query)
+let mentionDocMousedownBound = false; // 防止重复注册 document mousedown
+
+function ensureMentionDocMousedown() {
+  if (mentionDocMousedownBound) return;
+  mentionDocMousedownBound = true;
+  document.addEventListener('mousedown', (e) => {
+    if (mentionDropdownEl && !mentionDropdownEl.contains(e.target) && e.target !== input) {
+      closeMentionDropdown();
+    }
+  });
+}
+
+async function refreshMentionChannels() {
+  try {
+    const res = await fetch('/channels');
+    const local = res.ok ? await res.json() : [];
+    const r2 = await fetch('/api/remote-channels');
+    const remoteData = r2.ok ? await r2.json() : { peers: [] };
+    const remote = [];
+    for (const p of (remoteData.peers || [])) {
+      for (const c of (p.channels || [])) {
+        remote.push({ id: c.id, name: c.name, source: 'remote', ownerPublicKey: p.peerId });
+      }
+    }
+    mentionChannels = [
+      ...(Array.isArray(local) ? local.map(c => ({ id: c.id, name: c.name, source: 'local' })) : []),
+      ...remote
+    ];
+  } catch (err) {
+    console.warn('[mention] 加载渠道列表失败:', err);
+  }
+}
+
+function closeMentionDropdown() {
+  if (mentionDropdownEl) { mentionDropdownEl.remove(); mentionDropdownEl = null; }
+  mentionHighlightIdx = -1;
+  mentionQuery = null;
+  mentionAnchor = -1;
+  mentionBlockEnd = -1;
+  // 不重置 mentionDocMousedownBound — 监听器是空操作 (mentionDropdownEl === null) 留着无妨, 避免重复绑
+}
+
+function getCurrentMentionQuery() {
+  const pos = input.selectionStart || input.value.length;
+  const before = input.value.slice(0, pos);
+  const m = before.match(/@([一-龥A-Za-z0-9_\-]{0,30})$/);
+  return m ? { query: m[1], anchor: pos - m[0].length } : null;
+}
+
+function renderMentionDropdown(items) {
+  if (!mentionDropdownEl) {
+    mentionDropdownEl = document.createElement('div');
+    mentionDropdownEl.id = 'mention-dropdown';
+    mentionDropdownEl.style.cssText = 'position:fixed;background:#fff;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.15);max-height:240px;overflow-y:auto;z-index:10000;font-size:13px;min-width:240px;';
+    document.body.appendChild(mentionDropdownEl);
+    ensureMentionDocMousedown();
+  }
+  // v3 简化: 单选 + 立即填入输入框
+  const headerHtml = `<div style="padding:6px 10px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:11px;color:#6b7280;display:flex;justify-content:space-between;align-items:center;">
+    <span>💡 点击或回车选中 → 自动填入输入框</span>
+    <span style="color:#9ca3af;">↑↓ 移动</span>
+  </div>`;
+
+  if (items.length === 0) {
+    mentionDropdownEl.innerHTML = headerHtml + '<div style="padding:10px 12px;color:#6b7280;font-size:12px;">没有匹配的渠道</div>';
+  } else {
+    const rows = items.map((c, i) => {
+      const isLocal = c.source === 'local';
+      const tag = isLocal ? '🏠 本地' : '🌐 远端';
+      const owner = !isLocal && c.ownerPublicKey ? ` <span style="color:#9ca3af;font-size:11px;">(${c.ownerPublicKey.substring(0, 8)}…)</span>` : '';
+      // 浅蓝 = 键盘高亮, 白 = 普通
+      const bg = i === mentionHighlightIdx ? '#eff6ff' : '#fff';
+      const borderLeft = i === mentionHighlightIdx ? '3px solid #93c5fd' : '3px solid transparent';
+      return `<div class="mention-item" data-idx="${i}" data-channel-id="${escapeHtml(c.id)}" data-channel-name="${escapeHtml(c.name)}" style="padding:8px 12px;cursor:pointer;background:${bg};border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:8px;border-left:${borderLeft};">
+        <span style="font-size:10px;color:${isLocal ? '#059669' : '#2563eb'};background:${isLocal ? '#d1fae5' : '#dbeafe'};padding:1px 6px;border-radius:3px;white-space:nowrap;">${tag}</span>
+        <span style="flex:1;">${escapeHtml(c.name)}</span>${owner}
+      </div>`;
+    }).join('');
+    mentionDropdownEl.innerHTML = headerHtml + rows;
+    mentionDropdownEl.querySelectorAll('.mention-item').forEach((el) => {
+      const idx = parseInt(el.getAttribute('data-idx'));
+      el.onclick = () => {
+        // 单击 → 立即填入输入框 + 关闭 dropdown
+        applyMention(items[idx]);
+      };
+      // v3 关键修复: mouseenter 只更新高亮, 不重建 dropdown — 否则用户实际点击的 element 被销毁,
+      // click 事件落到新 element, 但实际触发的是新 element 的 onclick (空), 而不是被销毁前那个
+      el.onmouseenter = () => {
+        if (mentionHighlightIdx === idx) return;
+        mentionHighlightIdx = idx;
+        // 只更新背景色 + 左边框, 不重建 innerHTML
+        const itemEls = mentionDropdownEl.querySelectorAll('.mention-item');
+        itemEls.forEach((ie, ii) => {
+          const isHi = ii === idx;
+          ie.style.background = isHi ? '#eff6ff' : '#fff';
+          ie.style.borderLeft = isHi ? '3px solid #93c5fd' : '3px solid transparent';
+        });
+      };
+    });
+  }
+  const rect = input.getBoundingClientRect();
+  mentionDropdownEl.style.left = rect.left + 'px';
+  mentionDropdownEl.style.top = 'auto';
+  mentionDropdownEl.style.bottom = (window.innerHeight - rect.top + 4) + 'px';
+}
+
+/** v3 单选: 把 @xxx 替换为 @渠道名 + 空格, 关闭 dropdown, 光标放空格后 */
+function applyMention(channel) {
+  const anchor = mentionAnchor;
+  const blockEnd = mentionBlockEnd >= 0 ? mentionBlockEnd : (anchor + 1 + (mentionQuery || '').length);
+  if (anchor < 0 || anchor > input.value.length || input.value[anchor] !== '@') {
+    closeMentionDropdown();
+    return;
+  }
+  const before = input.value.slice(0, anchor);   // 含 @
+  const after = input.value.slice(blockEnd);     // query 之后 (可能用户已输入正文)
+  const insert = `@${channel.name} `;
+  input.value = before + insert + after;
+  const newPos = before.length + insert.length;
+  input.focus();
+  input.setSelectionRange(newPos, newPos);
+  closeMentionDropdown();
+}
+
+function updateMentionDropdown() {
+  // 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();
+  const items = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+  mentionHighlightIdx = items.length > 0 ? 0 : -1;
+  renderMentionDropdown(items);
+}
+
+input.addEventListener('input', () => {
+  updateMentionDropdown();
+});
+input.addEventListener('keydown', (e) => {
+  if (!mentionDropdownEl) return;
+  const items = mentionDropdownEl.querySelectorAll('.mention-item');
+  if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    if (items.length === 0) return;
+    mentionHighlightIdx = (mentionHighlightIdx + 1) % items.length;
+    const q = (mentionQuery || '').toLowerCase();
+    const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+    renderMentionDropdown(filtered);
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    if (items.length === 0) return;
+    mentionHighlightIdx = (mentionHighlightIdx - 1 + items.length) % items.length;
+    const q = (mentionQuery || '').toLowerCase();
+    const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+    renderMentionDropdown(filtered);
+  } else if (e.key === 'Enter' || e.key === 'Tab') {
+    // 单选: Enter/Tab 立即填入 + 关闭 dropdown
+    if (items.length > 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      const q = (mentionQuery || '').toLowerCase();
+      const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+      const cur = filtered[mentionHighlightIdx];
+      if (cur) applyMention(cur);
+    }
+  } else if (e.key === 'Escape') {
+    e.preventDefault();
+    closeMentionDropdown();
+  }
+}, true);  // capture phase, 先于 sendMessage 那个 keydown
+
+// 初始化
+refreshMentionChannels();
+// 定时刷新 (channel 列表可能变化)
+setInterval(refreshMentionChannels, 5000);
+// 远端 channel 列表变化时也刷新 (loadRemoteChannels 是 function declaration, 不能重新赋值)
+// 用 setInterval 兜底: 每 5s 刷一次 (已经有定时器, 这里不重复)
+// 实际上 refreshMentionChannels() 已经在 setInterval 里跑了
+
+// v3 新增: 通用版 @-autocomplete (任意 input 元素都能挂, 比如 B 端的 #rcm-input)
+function setupMentionAutocomplete(inputEl) {
+  if (!inputEl || inputEl.__mentionBound) return;
+  inputEl.__mentionBound = true;
+  let localQuery = null;
+  let localAnchor = -1;       // @ 字符的绝对位置 (固定, 直到 dropdown 关闭)
+  let localBlockEnd = -1;     // 插入区块的终点
+  let localHighlight = -1;
+
+  function closeLocal() {
+    if (inputEl.__mentionDD) { inputEl.__mentionDD.remove(); inputEl.__mentionDD = null; }
+    localHighlight = -1; localQuery = null; localAnchor = -1; localBlockEnd = -1;
+  }
+
+  function detectQuery() {
+    const pos = inputEl.selectionStart || inputEl.value.length;
+    const before = inputEl.value.slice(0, pos);
+    const m = before.match(/@([一-龥A-Za-z0-9_\-]{0,30})$/);
+    return m ? { query: m[1], anchor: pos - m[0].length } : null;
+  }
+
+  // v3 单选: 点击 / Enter 立即填入输入框 + 关闭 dropdown
+  function applyLocal(channel) {
+    const anchor = localAnchor;
+    const blockEnd = localBlockEnd >= 0 ? localBlockEnd : (anchor + 1 + (localQuery || '').length);
+    if (anchor < 0 || anchor > inputEl.value.length || inputEl.value[anchor] !== '@') {
+      closeLocal();
+      return;
+    }
+    const before = inputEl.value.slice(0, anchor);   // 含 @
+    const after = inputEl.value.slice(blockEnd);
+    const insert = `@${channel.name} `;
+    inputEl.value = before + insert + after;
+    const newPos = before.length + insert.length;
+    inputEl.focus();
+    inputEl.setSelectionRange(newPos, newPos);
+    closeLocal();
+  }
+
+  function renderLocal(items) {
+    if (!inputEl.__mentionDD) {
+      inputEl.__mentionDD = document.createElement('div');
+      inputEl.__mentionDD.style.cssText = 'position:fixed;background:#fff;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.15);max-height:240px;overflow-y:auto;z-index:10001;font-size:13px;min-width:240px;';
+      document.body.appendChild(inputEl.__mentionDD);
+    }
+    const headerHtml = `<div style="padding:6px 10px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:11px;color:#6b7280;display:flex;justify-content:space-between;align-items:center;">
+      <span>💡 点击或回车选中 → 自动填入输入框</span>
+      <span style="color:#9ca3af;">↑↓ 移动</span>
+    </div>`;
+    if (items.length === 0) {
+      inputEl.__mentionDD.innerHTML = headerHtml + '<div style="padding:10px 12px;color:#6b7280;font-size:12px;">没有匹配的渠道</div>';
+    } else {
+      inputEl.__mentionDD.innerHTML = headerHtml + items.map((c, i) => {
+        const isLocal = c.source === 'local';
+        const tag = isLocal ? '🏠 本地' : '🌐 远端';
+        const owner = !isLocal && c.ownerPublicKey ? ` <span style="color:#9ca3af;font-size:11px;">(${c.ownerPublicKey.substring(0, 8)}…)</span>` : '';
+        const bg = i === localHighlight ? '#eff6ff' : '#fff';
+        const borderLeft = i === localHighlight ? '3px solid #93c5fd' : '3px solid transparent';
+        return `<div class="mention-item" data-idx="${i}" data-channel-id="${escapeHtml(c.id)}" data-channel-name="${escapeHtml(c.name)}" style="padding:8px 12px;cursor:pointer;background:${bg};border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:8px;border-left:${borderLeft};">
+          <span style="font-size:10px;color:${isLocal ? '#059669' : '#2563eb'};background:${isLocal ? '#d1fae5' : '#dbeafe'};padding:1px 6px;border-radius:3px;white-space:nowrap;">${tag}</span>
+          <span style="flex:1;">${escapeHtml(c.name)}</span>${owner}
+        </div>`;
+      }).join('');
+      inputEl.__mentionDD.querySelectorAll('.mention-item').forEach((el) => {
+        const idx = parseInt(el.getAttribute('data-idx'));
+        el.onclick = () => applyLocal(items[idx]);
+        // v3 关键修复: mouseenter 只更新高亮, 不重建 dropdown (同主 input)
+        el.onmouseenter = () => {
+          if (localHighlight === idx) return;
+          localHighlight = idx;
+          const itemEls = inputEl.__mentionDD.querySelectorAll('.mention-item');
+          itemEls.forEach((ie, ii) => {
+            const isHi = ii === idx;
+            ie.style.background = isHi ? '#eff6ff' : '#fff';
+            ie.style.borderLeft = isHi ? '3px solid #93c5fd' : '3px solid transparent';
+          });
+        };
+      });
+    }
+    const rect = inputEl.getBoundingClientRect();
+    inputEl.__mentionDD.style.left = rect.left + 'px';
+    inputEl.__mentionDD.style.top = 'auto';
+    inputEl.__mentionDD.style.bottom = (window.innerHeight - rect.top + 4) + 'px';
+  }
+
+  function update() {
+    // 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();
+    const items = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+    localHighlight = items.length > 0 ? 0 : -1;
+    renderLocal(items);
+  }
+
+  inputEl.addEventListener('input', update);
+  inputEl.addEventListener('keydown', (e) => {
+    if (!inputEl.__mentionDD) return;
+    const items = inputEl.__mentionDD.querySelectorAll('.mention-item');
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      if (items.length === 0) return;
+      localHighlight = (localHighlight + 1) % items.length;
+      const q = (localQuery || '').toLowerCase();
+      renderLocal(mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8));
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (items.length === 0) return;
+      localHighlight = (localHighlight - 1 + items.length) % items.length;
+      const q = (localQuery || '').toLowerCase();
+      renderLocal(mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8));
+    } else if (e.key === 'Enter' || e.key === 'Tab') {
+      if (items.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        const q = (localQuery || '').toLowerCase();
+        const filtered = mentionChannels.filter(c => c.name.toLowerCase().includes(q)).slice(0, 8);
+        const cur = filtered[localHighlight];
+        if (cur) applyLocal(cur);
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      closeLocal();
+    }
+  }, true);
+}
+
 // 拖拽落点: 把判断库里的判断拖到输入框, 直接作为指令发给 AI (走"代我决定"路径).
 // 用户拖进来后输入框被预填, 点发送就把这条判断作为指令交给当前 agent.
 const inputArea = document.querySelector('.input-area');
@@ -2183,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>
@@ -2569,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);
   }
@@ -2583,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
@@ -2616,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('')
           }
@@ -2626,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', () => {
@@ -2638,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 = [];
@@ -2655,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>
@@ -2700,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 {
@@ -2712,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>
@@ -2750,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();
@@ -2792,37 +3498,7 @@ 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);
-      }
-
-      // 2. 显示历史 messages
-      const msgs = data.messages || [];
-      if (msgs.length === 0) {
-        appendSystem('还没有历史消息, 在下面发第一条吧', 'info');
-      } else {
-        appendSystem(`从远端拉到 ${msgs.length} 条历史消息`, 'info');
-        for (const m of msgs) {
-          append(m.content || '', m.type === 'user' ? 'user' : 'ai');
-        }
-        // 滚到底部
-        setTimeout(() => { log.scrollTop = log.scrollHeight; }, 50);
-      }
+      renderHistory(data);
     } catch (err) {
       appendSystem(`拉取异常: ${err.message}`, 'error');
     } finally {
@@ -2830,6 +3506,50 @@ function openRemoteChannelChat(peerPublicKey, channelId, channelName) {
     }
   }
 
+  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 — 完全复用本地 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 {
+            prefix = `👤 A (内部 owner)\n\n`;
+          }
+        } else {
+          prefix = `🤖 A 的 LLM\n\n`;
+        }
+        addMessage(prefix + (m.content || ''), type, false, log);
+      }
+      setTimeout(() => { log.scrollTop = log.scrollHeight; }, 50);
+    }
+  }
+
   const doSend = async () => {
     const text = inputEl.value.trim();
     if (!text) return;
@@ -2845,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 = '发送';
@@ -2855,11 +3575,16 @@ function openRemoteChannelChat(peerPublicKey, channelId, channelName) {
   };
   sendBtn.onclick = doSend;
   inputEl.onkeydown = (e) => { if (e.key === 'Enter') doSend(); };
+  // v3 新增: B 端远端 chat 也支持 @-autocomplete
+  setupMentionAutocomplete(inputEl);
   inputEl.focus();
   startV3GlobalSSE();
 
   // 打开时立即拉历史
-  loadHistory();
+  loadHistory(false);
+
+  // 每 15 秒自动静默刷新, 同步远端 owner 或其他访客的新消息
+  historyRefreshTimer = setInterval(() => loadHistory(true), 15000);
 }
 
 // Phase 3: 我的 ID 按钮 → 真 modal (避免 confirm 在某些环境被禁用)
@@ -2945,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
@@ -2989,6 +3860,8 @@ if (refreshSharedBtn) {
 // 启动时拉一次 + 定期轮询 (SSE 接收 P2P reply 后也会更新)
 loadRemoteChannels();
 setInterval(loadRemoteChannels, 8000);
+// 全局 SSE — 接收 remote-channel-update / remote-chat-reply / friend-request
+startV3GlobalSSE();
 
 // ============ v3: 折叠 + 拖拽分隔线 ============
 
@@ -3407,19 +4280,23 @@ function openAgentAddModal(existingChannel) {
   if (existingChannel) {
     agentAddTitle.textContent = '配置智能体：' + existingChannel.name;
     agentAddName.value = existingChannel.name || '';
-    agentAddName.readOnly = true; // 改名走 PATCH
+    agentAddName.readOnly = false; // v3: 名字改成可编辑 (PATCH 支持更新 name)
+    agentAddName.placeholder = '输入新名称';
     agentAddWallet.value = existingChannel.walletAddress || '';
     agentAddAutoTools.checked = !!existingChannel.autoInvokeTools;
     agentAddConfirmBtn.dataset.mode = 'update';
     agentAddConfirmBtn.dataset.channelId = existingChannel.id;
+    agentAddConfirmBtn.dataset.originalName = existingChannel.name || '';
   } else {
     agentAddTitle.textContent = '添加智能体';
     agentAddName.value = '';
     agentAddName.readOnly = false;
+    agentAddName.placeholder = '例如: 交易助手';
     agentAddWallet.value = '';
     agentAddAutoTools.checked = true;
     agentAddConfirmBtn.dataset.mode = 'create';
     delete agentAddConfirmBtn.dataset.channelId;
+    delete agentAddConfirmBtn.dataset.originalName;
   }
   agentAddWalletInfo.style.display = 'none';
   agentAddWalletInfo.innerHTML = '';
@@ -3531,13 +4408,16 @@ if (agentAddConfirmBtn) {
       } else {
         // update
         const channelId = agentAddConfirmBtn.dataset.channelId;
+        const originalName = agentAddConfirmBtn.dataset.originalName || '';
+        // v3 新增: 名字改了才发 (没改就不发, 保持原状)
+        const body = { walletAddress: walletAddress || null, autoInvokeTools };
+        if (name && name !== originalName) {
+          body.name = name;
+        }
         const res = await fetch(`/channels/${channelId}`, {
           method: 'PATCH',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            walletAddress: walletAddress || null,
-            autoInvokeTools
-          })
+          body: JSON.stringify(body)
         });
         if (!res.ok) throw new Error('update failed');
         const updated = await res.json();