@bolloon/bolloon-agent 0.1.27 → 0.1.29

package/dist/web/client.js

@@ -106,6 +106,82 @@ async function loadChannels() {
   }
 }
 
+// v3: 全局 SSE 监听 (p2p-global channel) - 接收远端 chat.reply 等事件
+let v3GlobalEventSource = null;
+function startV3GlobalSSE() {
+  if (v3GlobalEventSource) return;
+  try {
+    v3GlobalEventSource = new EventSource('/events?channelId=p2p-global');
+    v3GlobalEventSource.onmessage = (e) => {
+      try {
+        const msg = JSON.parse(e.data);
+        if (msg.type === 'remote-chat-reply') {
+          // 找到当前打开的远端 chat modal 的 log
+          const log = document.getElementById('rcm-log');
+          const thinkingEl = document.getElementById('rcm-thinking');
+          if (thinkingEl) thinkingEl.style.display = 'none'; // 思考结束, 隐藏
+          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';
+            }
+            log.appendChild(bubble);
+            log.scrollTop = log.scrollHeight;
+          }
+        } else if (msg.type === 'remote-chat-thinking') {
+          // v3 新增: B 端实时显示 A 节点的思考过程
+          const phase = msg.phase;
+          const log = document.getElementById('rcm-log');
+          if (!log) return;
+
+          if (phase === 'start') {
+            // 头部插入"判断力依据"区块 (只第一次)
+            const judgments = msg.usedJudgments || { bound: [], candidates: [] };
+            const judgmentBlock = document.createElement('div');
+            judgmentBlock.className = 'rcm-judgment-block';
+            judgmentBlock.style.cssText = 'margin:6px 0;padding:8px 10px;background:#fef3c7;border-left:3px solid #f59e0b;border-radius:4px;font-size:12px;';
+            let jh = '<div style="font-weight:600;color:#92400e;margin-bottom:4px;">🛡️ 对方使用的判断力 (来自 ta 的 channel)</div>';
+            if (judgments.bound && judgments.bound.length > 0) {
+              jh += '<div style="color:#78350f;margin-bottom:4px;"><b>硬绑定</b> (必须遵循):</div>';
+              for (const j of judgments.bound) {
+                jh += `<div style="margin:2px 0;padding-left:8px;">• <b>${escapeHtml((j.decision || '').slice(0, 80))}</b>${j.reasons && j.reasons.length ? '<br><span style="color:#92400e;font-size:11px;">理由: ' + escapeHtml(j.reasons.join('; ').slice(0, 80)) + '</span>' : ''}</div>`;
+              }
+            }
+            if (judgments.candidates && judgments.candidates.length > 0) {
+              jh += `<div style="color:#78350f;margin-top:4px;"><b>候选池</b> (${judgments.candidates.length} 条, LLM 自选)</div>`;
+            }
+            log.appendChild(judgmentBlock);
+            // "思考中" 区块
+            const thinkingEl = document.createElement('div');
+            thinkingEl.id = 'rcm-thinking-live';
+            thinkingEl.style.cssText = 'margin:6px 0;padding:8px 10px;background:#ede9fe;border-left:3px solid #8b5cf6;border-radius:4px;font-size:12px;color:#5b21b6;font-style:italic;';
+            thinkingEl.textContent = '💭 对方正在思考...';
+            log.appendChild(thinkingEl);
+            log.scrollTop = log.scrollHeight;
+          } else if (phase === 'token') {
+            // 实时更新思考中的 partial
+            const thinkingEl = document.getElementById('rcm-thinking-live');
+            if (thinkingEl) {
+              thinkingEl.textContent = '💭 对方正在思考: ' + (msg.partial || '').slice(-200);
+              log.scrollTop = log.scrollHeight;
+            }
+          }
+        }
+      } catch (err) {
+        console.error('[v3] 全局 SSE 解析失败:', err);
+      }
+    };
+    v3GlobalEventSource.onerror = (e) => {
+      console.warn('[v3] 全局 SSE 错误');
+    };
+  } catch (err) {
+    console.error('[v3] 启动全局 SSE 失败:', err);
+  }
+}
+
 async function createChannel(name) {
   if (!name.trim()) return;
   try {
@@ -2020,12 +2096,6 @@ function hideJudgmentsModal() {
   if (judgmentsModal) judgmentsModal.classList.remove('active');
 }
 
-function escapeHtml(s) {
-  return String(s || '').replace(/[&<>"']/g, c => ({
-    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
-  }[c]));
-}
-
 let currentJudgmentTab = 'channel'; // 'channel' | 'global'
 let lastJudgmentsCache = []; // 最近一次 loadJudgments 拿到的原始列表, 切 tab / 切 channel 时复用
 
@@ -2492,15 +2562,17 @@ loadJudgments();
 setInterval(loadJudgments, 10000);
 
 // ============================================================================
-// v3: 远端智能体 (从 P2P 连接的 peer 拉取的 channel UI 元数据)
+// v3: P2P 好友 (known peers) + 收到的分享
 // ============================================================================
 
+let knownPeers = [];  // { name, publicKey, lastConnectedAt, addedAt }
+
 async function loadRemoteChannels() {
   try {
-    const res = await fetch('/api/remote-channels');
+    const res = await fetch('/api/p2p-peers');
     if (!res.ok) return;
     const data = await res.json();
-    remoteChannels = Array.isArray(data.peers) ? data.peers : [];
+    knownPeers = Array.isArray(data.peers) ? data.peers : [];
     renderRemoteChannels();
   } catch (err) {
     console.error('[v3] loadRemoteChannels 失败:', err);
@@ -2510,62 +2582,378 @@ async function loadRemoteChannels() {
 function renderRemoteChannels() {
   const list = document.getElementById('remote-channel-list');
   if (!list) return;
-  if (remoteChannels.length === 0) {
-    list.innerHTML = '<li style="color:var(--text-muted);font-size:11px;padding:8px 4px;text-align:center;">(暂无, 点 ↻ 刷新)</li>';
+
+  // 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;
   }
-  const html = remoteChannels.map(p => {
-    const peerShort = p.peerId.substring(0, 12) + '…';
+
+  // 按 peerId 分组 channels
+  const channelsByPeer = {};
+  for (const p of remoteChannels) {
+    channelsByPeer[p.peerId] = p.channels || [];
+  }
+
+  const html = knownPeers.map(peer => {
+    const peerChannels = channelsByPeer[peer.publicKey] || [];
+    const lastConn = peer.lastConnectedAt
+      ? new Date(peer.lastConnectedAt).toLocaleDateString()
+      : '从未连接';
     return `
-      <li class="remote-peer-group" style="margin-bottom:8px;">
-        <div style="font-size:10px;color:var(--text-muted);padding:2px 4px;display:flex;align-items:center;gap:4px;">
-          <span>🌐</span><span title="${escapeHtml(p.peerId)}">${escapeHtml(peerShort)}</span>
-          <span>·</span>
-          <span>${p.channels.length} 个</span>
+      <li class="remote-peer-group" style="margin-bottom:10px;">
+        <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>
+        </div>
+        <div class="remote-peer-channels" style="margin-top:4px;margin-left:8px;">
+          ${peerChannels.length === 0
+            ? '<div style="font-size:10px;color:var(--text-muted);padding:2px 4px;">(对方还没分享 channel 给你)</div>'
+            : peerChannels.map(c => `
+              <div class="remote-channel-row" data-peer-id="${escapeHtml(peer.publicKey)}" data-channel-id="${escapeHtml(c.id)}"
+                   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('')
+          }
         </div>
-        ${p.channels.map(c => `
-          <div class="remote-channel-row" data-peer-id="${escapeHtml(p.peerId)}" data-channel-id="${escapeHtml(c.id)}"
-               style="display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;border-radius:4px;font-size:12px;color:var(--text);">
-            <span>🤖</span>
-            <span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${escapeHtml(c.name || '')}">${escapeHtml(c.name || '(未命名)')}</span>
-            ${c.hasWallet ? '<span title="绑定钱包">⛓</span>' : ''}
-            <span title="绑定判断力数" style="font-size:10px;color:var(--text-muted);">🧠${c.boundJudgmentCount || 0}</span>
-          </div>
-        `).join('')}
       </li>
     `;
   }).join('');
   list.innerHTML = html;
 
-  // 绑定点击 — 暂时只是 console.log + 提示, Phase 2 接 chat
+  // 绑定: 点击 channel → 弹聊天窗口
   list.querySelectorAll('.remote-channel-row').forEach(row => {
     row.addEventListener('click', () => {
       const peerId = row.dataset.peerId;
       const channelId = row.dataset.channelId;
+      const channelName = row.querySelector('span[title]')?.getAttribute('title') || channelId;
       console.log('[v3] 点击远端 channel:', peerId.substring(0,12), channelId);
-      alert(`远端智能体点击 — Phase 2 实现 chat 调用\n\nPeer: ${peerId}\nChannel: ${channelId}`);
+      openRemoteChannelChat(peerId, channelId, channelName);
+    });
+  });
+  // 绑定: 点击 peer 头部 → 弹分享 modal (让 A 决定分享本机哪些 channel 给这个 peer)
+  list.querySelectorAll('.remote-peer-header').forEach(row => {
+    row.addEventListener('click', () => {
+      const peerName = row.dataset.peerName;
+      const peerPk = row.dataset.peerPk;
+      openShareToPeerModal(peerName, peerPk);
     });
   });
 }
 
-const refreshRemoteBtn = document.getElementById('refresh-remote-agents-btn');
-if (refreshRemoteBtn) {
-  refreshRemoteBtn.addEventListener('click', async (e) => {
-    e.stopPropagation(); // 防止冒泡触发折叠
-    refreshRemoteBtn.disabled = true;
-    refreshRemoteBtn.textContent = '⏳';
+/** v3: 分享 channel 给指定 peer 的 modal (A 侧用) */
+async function openShareToPeerModal(peerName, peerPublicKey) {
+  document.getElementById('share-to-peer-modal')?.remove();
+  let allChannels = [];
+  try {
+    const res = await fetch('/channels');
+    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>'
+    : 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}
+              </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>
+          <button id="spm-close" style="background:none;border:none;font-size:20px;color:#6b7280;cursor:pointer;">×</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>
+      </div>
+    </div>
+  `;
+  document.body.insertAdjacentHTML('beforeend', html);
+  const overlay = document.getElementById('share-to-peer-modal');
+  document.getElementById('spm-close').onclick = () => overlay.remove();
+  document.getElementById('spm-cancel').onclick = () => overlay.remove();
+  document.getElementById('spm-save').onclick = async () => {
+    const checkedIds = [...overlay.querySelectorAll('input[type=checkbox][data-cid]:checked')].map(el => el.dataset.cid);
+    // 对每个 channel 单独 PATCH — 设 shared_with_peers 为 checked 列表
+    let ok = 0, fail = 0;
+    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; // 没变化跳过
+      const newList = (ch.shared_with_peers || []).filter((p) => p !== peerPublicKey);
+      if (shouldShare) newList.push(peerPublicKey);
+      try {
+        const res = await fetch(`/channels/${encodeURIComponent(ch.id)}`, {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ shared_with_peers: newList })
+        });
+        if (res.ok) ok++; else fail++;
+      } catch { fail++; }
+    }
+    alert(`分享更新完成: 成功 ${ok}, 失败 ${fail}`);
+    overlay.remove();
+  };
+}
+
+/** v3: 跟远端 channel 聊天的简易弹窗 */
+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 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>
+          <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>
+        </div>
+        <div id="rcm-thinking" style="display:none;padding:8px 16px;background:#fef3c7;color:#92400e;font-size:12px;border-bottom:1px solid #e5e7eb;">
+          📥 正在从远端拉历史 + 判断力…
+        </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>
+      </div>
+    </div>
+  `;
+  document.body.insertAdjacentHTML('beforeend', html);
+
+  const log = document.getElementById('rcm-log');
+  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();
+
+  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);
+    log.scrollTop = log.scrollHeight;
+  };
+
+  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.textContent = text;
+    log.appendChild(el);
+    log.scrollTop = log.scrollHeight;
+  };
+
+  // v3 新增: 拉 A 端的 channel 历史 (含 messages + judgments)
+  async function loadHistory() {
+    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();
+      if (!res.ok) {
+        appendSystem(`拉取失败: ${data.error || 'unknown'}`, 'error');
+        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);
+      }
+    } catch (err) {
+      appendSystem(`拉取异常: ${err.message}`, 'error');
+    } finally {
+      thinkingEl.style.display = 'none';
+    }
+  }
+
+  const doSend = async () => {
+    const text = inputEl.value.trim();
+    if (!text) return;
+    append(text, 'user');
+    inputEl.value = '';
+    sendBtn.disabled = true;
+    sendBtn.textContent = '...';
+    try {
+      const res = await fetch('/api/remote-channels/chat-send', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ targetPublicKey: peerPublicKey, channelId, text })
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'send failed');
+      appendSystem('已发送, 等待对方回复...', 'info');
+    } catch (err) {
+      append('(发送失败: ' + (err.message || err) + ')', 'ai');
+    } finally {
+      sendBtn.disabled = false;
+      sendBtn.textContent = '发送';
+    }
+  };
+  sendBtn.onclick = doSend;
+  inputEl.onkeydown = (e) => { if (e.key === 'Enter') doSend(); };
+  inputEl.focus();
+  startV3GlobalSSE();
+
+  // 打开时立即拉历史
+  loadHistory();
+}
+
+// Phase 3: 我的 ID 按钮 → 弹窗显示并支持复制自己的 P2PDirect publicKey
+const showMyIdBtn = document.getElementById('show-my-p2p-id-btn');
+if (showMyIdBtn) {
+  showMyIdBtn.addEventListener('click', async (e) => {
+    e.stopPropagation();
+    try {
+      const res = await fetch('/api/p2p-publickey');
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      const pk = data.publicKey || '';
+      if (!pk || pk.length !== 64) {
+        alert('P2PDirect 还没启动, 刷新页面稍后再试');
+        return;
+      }
+      // 显示 + 一键复制
+      const ok = confirm(
+        `我的 P2P publicKey (64 字符 hex):\n\n${pk}\n\n` +
+        `点 "确定" 复制到剪贴板, 发给好友.\n` +
+        `好友点 "+ 好友" 粘贴这个 ID 就能加我.`
+      );
+      if (ok) {
+        try {
+          await navigator.clipboard.writeText(pk);
+          alert('✓ 已复制到剪贴板');
+        } catch {
+          // 旧浏览器 fallback
+          const ta = document.createElement('textarea');
+          ta.value = pk;
+          document.body.appendChild(ta);
+          ta.select();
+          document.execCommand('copy');
+          document.body.removeChild(ta);
+          alert('✓ 已复制到剪贴板 (fallback)');
+        }
+      }
+    } catch (err) {
+      alert('获取 publicKey 失败: ' + (err.message || err));
+    }
+  });
+}
+
+// Phase 3 重做: + 添加好友按钮 → 弹窗输入 publicKey + name, 同时 joinPeer
+const addPeerBtn = document.getElementById('add-p2p-peer-btn');
+if (addPeerBtn) {
+  addPeerBtn.addEventListener('click', async (e) => {
+    e.stopPropagation();
+    const name = prompt('给这个 P2P 好友起个名字 (如: 同事-张磊)');
+    if (!name) return;
+    const publicKey = prompt('粘贴对方的 P2PDirect publicKey (64 字符 hex):\n\n获取方式: 对方在 http://localhost:54188/api/p2p-publickey');
+    if (!publicKey) return;
+    if (publicKey.length !== 64) {
+      alert('publicKey 长度不对, 应该是 64 字符 hex');
+      return;
+    }
+    try {
+      // 调 p2p-connect (会 joinPeer + 持久化)
+      const res = await fetch('/api/remote-channels/p2p-connect', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ targetPublicKey: publicKey, name, persist: true })
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'connect failed');
+      alert(`已添加好友: ${name} (${publicKey.substring(0, 12)}...)\n重启后会自动重连`);
+      await loadRemoteChannels();
+    } catch (err) {
+      alert('添加失败: ' + (err.message || err));
+    }
+  });
+}
+
+// v3 双向刷新: 主动向所有好友发 agent.meta.list, 拿到 ta 们分享给我的 channel
+const refreshSharedBtn = document.getElementById('refresh-shared-btn');
+if (refreshSharedBtn) {
+  refreshSharedBtn.addEventListener('click', async (e) => {
+    e.stopPropagation();
+    const originalText = refreshSharedBtn.textContent;
+    refreshSharedBtn.disabled = true;
+    refreshSharedBtn.textContent = '...';
     try {
       const res = await fetch('/api/remote-channels/refresh', { method: 'POST' });
       const data = await res.json();
-      console.log('[v3] 刷新远端智能体:', data);
-      setTimeout(loadRemoteChannels, 1500);
+      if (!res.ok) throw new Error(data.error || 'refresh failed');
+      // 等 1.5s 让 RPC 回复回来 (向所有 peer 广播)
+      await new Promise(r => setTimeout(r, 1500));
+      await loadRemoteChannels();
+      console.log(`[v3] 双向刷新: 向 ${data.peerCount || 0} 个好友发 list 请求`);
     } catch (err) {
-      console.error('[v3] 刷新失败:', err);
+      alert('刷新失败: ' + (err.message || err));
     } finally {
-      setTimeout(() => {
-        refreshRemoteBtn.disabled = false;
-        refreshRemoteBtn.textContent = '↻ 刷新';
-      }, 2000);
+      refreshSharedBtn.disabled = false;
+      refreshSharedBtn.textContent = originalText;
     }
   });
 }

package/dist/web/index.html

@@ -69,17 +69,21 @@
         <div class="split-handle-grip"></div>
       </div>
 
-      <!-- v3: 远端智能体 — 从 P2P 连接的 peer 拉取的 channel UI 元数据 -->
+      <!-- v3 远端 P2P 好友 — 显式分享 + 持久化连接 -->
       <div class="sidebar-section" id="remote-agents-section">
         <div class="section-header" id="remote-agents-header" style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;cursor:pointer;user-select:none;">
           <span style="display:flex;align-items:center;gap:6px;">
             <span id="remote-agents-toggle" style="font-size:10px;color:var(--text-muted);transition:transform 0.2s;">▼</span>
-            <span class="section-title" style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);">远端智能体</span>
+            <span class="section-title" style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--text-muted);">P2P 好友</span>
+          </span>
+          <span style="display:flex;gap:4px;">
+            <button id="show-my-p2p-id-btn" title="查看并复制我的 P2P publicKey" style="background:none;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;padding:2px 6px;border-radius:4px;font-size:11px;line-height:1;">我的 ID</button>
+            <button id="refresh-shared-btn" title="向所有好友拉取最新分享列表 (双向: A 拉 B 的, B 拉 A 的)" style="background:none;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;padding:2px 6px;border-radius:4px;font-size:11px;line-height:1;">↻ 刷新</button>
+            <button id="add-p2p-peer-btn" title="添加 P2P 好友 (输入对方的 publicKey)" style="background:none;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;padding:2px 6px;border-radius:4px;font-size:11px;line-height:1;">+ 好友</button>
           </span>
-          <button id="refresh-remote-agents-btn" title="从已连接 P2P peer 拉取" style="background:none;border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;padding:2px 6px;border-radius:4px;font-size:11px;line-height:1;">↻ 刷新</button>
         </div>
         <ul class="channel-list" id="remote-channel-list" style="list-style:none;padding:0;margin:0;">
-          <li style="color:var(--text-muted);font-size:11px;padding:8px 4px;text-align:center;">(暂无, 点 ↻ 刷新)</li>
+          <li style="color:var(--text-muted);font-size:11px;padding:8px 4px;text-align:center;">(暂无好友, 点 + 添加)</li>
         </ul>
       </div>
 
@@ -120,15 +124,7 @@
               <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
             </svg>
           </button>
-          <button id="p2p-network-btn" class="header-action" title="P2P 网络">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="12" cy="5" r="3"></circle>
-              <circle cx="5" cy="19" r="3"></circle>
-              <circle cx="19" cy="19" r="3"></circle>
-              <line x1="12" y1="8" x2="5" y2="16"></line>
-              <line x1="12" y1="8" x2="19" y2="16"></line>
-            </svg>
-          </button>
+          <!-- v3: 顶栏 P2P 按钮 (旧 iroh/Diap 路径) 已移除, 改用侧边栏 "P2P 好友" → "+ 好友" -->
           <button id="wallet-btn" class="header-action" title="钱包管理">
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M21 12V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"></path>