@bolloon/bolloon-agent 0.1.0 → 0.1.2

package/src/web/components/p2p/P2PModal.tsx

@@ -1,6 +1,12 @@
 import { useState, useEffect, useCallback } from 'react';
 import { p2pManager } from './p2p-manager.js';
-import type { P2PIdentity, P2PMessage, ConnectionHistoryEntry, ConnectProgress } from './types.js';
+import type {
+  P2PIdentity,
+  P2PMessage,
+  ConnectionHistoryEntry,
+  ConnectProgress,
+  PersistentConnection
+} from './types.js';
 
 type Tab = 'identity' | 'connect' | 'history' | 'messages';
 type Status = 'idle' | 'connecting' | 'online' | 'error';
@@ -24,10 +30,16 @@ export function P2PModal({ visible, onClose }: P2PModalProps) {
   const [messages, setMessages] = useState<P2PMessage[]>([]);
   const [unreadCount, setUnreadCount] = useState(0);
   const [peers, setPeers] = useState<{ nodeId: string; info: any }[]>([]);
+  const [persistentConnections, setPersistentConnections] = useState<PersistentConnection[]>([]);
   const [toast, setToast] = useState<string | null>(null);
 
   useEffect(() => {
     if (visible && !initialized) {
+      console.log('[P2P Modal] visible=true, initialized=false, calling initP2P');
+      initP2P();
+    } else if (visible && initialized && !identity) {
+      // 已初始化但没有identity，可能是首次未触发
+      console.log('[P2P Modal] visible=true, initialized=true, but no identity, calling initP2P again');
       initP2P();
     }
   }, [visible, initialized]);
@@ -64,6 +76,7 @@ export function P2PModal({ visible, onClose }: P2PModalProps) {
         break;
       case 'connect':
         loadPeers();
+        loadPersistentConnections();
         break;
     }
   }
@@ -93,6 +106,38 @@ export function P2PModal({ visible, onClose }: P2PModalProps) {
     setPeers(connectedPeers);
   }
 
+  async function loadPersistentConnections() {
+    try {
+      const connections = await p2pManager.getPersistentConnections();
+      setPersistentConnections(connections);
+    } catch (e) {
+      console.error('[P2P Modal] 加载持久连接失败:', e);
+    }
+  }
+
+  async function handleToggleConnection(connection: PersistentConnection) {
+    const newStatus = connection.status === 'connected' ? 'disconnected' : 'connected';
+    const enable = newStatus === 'connected';
+
+    try {
+      const success = await p2pManager.toggleConnection(connection, enable);
+      if (success) {
+        await loadPersistentConnections();
+        loadPeers();
+        showToast(enable ? '正在连接...' : '已断开');
+      } else {
+        showToast('操作失败');
+      }
+    } catch (e) {
+      showToast('操作失败');
+    }
+  }
+
+  async function handleOpenChannel(channelId: string) {
+    showToast(`打开通道: ${channelId}`);
+    onClose();
+  }
+
   async function handleConnect() {
     if (!connectInput.trim()) return;
 
@@ -101,13 +146,14 @@ export function P2PModal({ visible, onClose }: P2PModalProps) {
     setConnectResult(null);
 
     try {
-      const result = await p2pManager.connect(connectInput, (p) => setProgress(p));
+      const result = await p2pManager.connectAndCreateChannel(connectInput, (p) => setProgress(p));
 
       if (result.success) {
         setConnectResult({ type: 'success', text: `已连接到 ${result.name || '节点'}` });
         setConnectInput('');
         await loadHistory();
         loadPeers();
+        loadPersistentConnections();
       } else {
         setConnectResult({ type: 'error', text: result.error || '连接失败' });
       }
@@ -248,8 +294,50 @@ export function P2PModal({ visible, onClose }: P2PModalProps) {
               </div>
             )}
 
+            {/* 持久连接列表 */}
+            <div className="persistent-peers-section">
+              <h4>持久连接 ({persistentConnections.length})</h4>
+              {persistentConnections.length === 0 ? (
+                <div className="empty-hint">暂无持久连接</div>
+              ) : (
+                persistentConnections.map((conn) => (
+                  <div key={conn.id} className={`persistent-peer-item ${conn.status}`}>
+                    <div className="peer-status-indicator">
+                      <span className={`dot ${conn.status === 'connected' ? 'online' : 'offline'}`}></span>
+                    </div>
+                    <div className="peer-info">
+                      <div className="peer-name">
+                        {conn.peerName || 'Unknown'}
+                        {conn.isAutoConnect && <span className="auto-badge">自动</span>}
+                      </div>
+                      <div className="peer-meta">
+                        <span>DID: {conn.peerDid?.substring(0, 16)}...</span>
+                        <span>状态: {conn.status === 'connected' ? '已连接' : '未连接'}</span>
+                      </div>
+                    </div>
+                    <div className="peer-actions">
+                      <button
+                        className={`btn-sm ${conn.status === 'connected' ? 'btn-danger' : 'btn-primary'}`}
+                        onClick={() => handleToggleConnection(conn)}
+                      >
+                        {conn.status === 'connected' ? '断开' : '连接'}
+                      </button>
+                      {conn.channelId && (
+                        <button
+                          className="btn-sm btn-secondary"
+                          onClick={() => handleOpenChannel(conn.channelId!)}
+                        >
+                          对话
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+
             <div className="peers-section">
-              <h4>已连接节点 ({peers.length})</h4>
+              <h4>当前连接 ({peers.length})</h4>
               <div id="p2p-peers-list">
                 {peers.length === 0 && <div className="empty-hint">暂无连接</div>}
                 {peers.map((peer, i) => (

package/src/web/components/p2p/index.ts

@@ -5,6 +5,7 @@
 class P2PModalUI {
   private modal: HTMLElement | null = null;
   private overlay: HTMLElement | null = null;
+  private connectedPeers: Map<string, { nodeId: string; name: string; time: number }> = new Map();
 
   constructor() {
     this.createModal();
@@ -53,23 +54,54 @@ class P2PModalUI {
   private async render(): Promise<void> {
     if (!this.modal) return;
 
+    // 加载连接历史
+    await this.loadConnectionHistory();
+
     // 获取身份信息
     let identityHtml = '<div class="p2p-loading">加载中...</div>';
+    let identityData: any = { name: '未知', did: '未知', cid: '未知' };
     try {
-      const resp = await fetch('/api/identity');
-      const data = await resp.json();
+      // 尝试获取 iroh 身份（包含 CID）
+      const irohResp = await fetch('/api/iroh/init', { method: 'POST' });
+      const irohData = await irohResp.json();
+      if (irohData.cid) {
+        identityData = {
+          name: irohData.name || irohData.name?.split('-').slice(-1)[0] || 'Bolloon',
+          did: irohData.did || '未知',
+          cid: irohData.cid || '未知',
+          nodeId: irohData.irohNodeId ? irohData.irohNodeId.substring(0, 20) + '...' : '未知'
+        };
+      } else {
+        // 回退到 /api/identity
+        const resp = await fetch('/api/identity');
+        identityData = await resp.json();
+        identityData.cid = identityData.cid || '未初始化';
+        identityData.nodeId = identityData.nodeId || '未知';
+      }
       identityHtml = `
         <div class="p2p-section">
           <h3>身份信息</h3>
           <div class="p2p-info-row">
             <span class="label">名称:</span>
-            <span class="value">${this.escapeHtml(data.name || '未知')}</span>
+            <span class="value">${this.escapeHtml(identityData.name || '未知')}</span>
+          </div>
+          <div class="p2p-info-row">
+            <span class="label">CID:</span>
+            <span class="value mono">${this.escapeHtml(identityData.cid || '未知')}</span>
           </div>
           <div class="p2p-info-row">
             <span class="label">DID:</span>
-            <span class="value mono">${this.escapeHtml(data.did || '未知')}</span>
+            <span class="value mono">${this.escapeHtml(identityData.did || '未知')}</span>
+          </div>
+          <div class="p2p-info-row">
+            <span class="label">Node ID:</span>
+            <span class="value mono">${this.escapeHtml(identityData.nodeId || '未知')}</span>
+          </div>
+          <div class="p2p-actions">
+            <button class="p2p-btn-secondary" id="p2p-copy-cid-btn">复制 CID</button>
+            <button class="p2p-btn-secondary" id="p2p-copy-did-btn">复制 DID</button>
+            <button class="p2p-btn-secondary" id="p2p-copy-nodeid-btn">复制 Node ID</button>
           </div>
-          <button class="p2p-btn-primary" id="p2p-copy-btn">复制 DID</button>
         </div>
       `;
     } catch {
@@ -99,6 +131,12 @@ class P2PModalUI {
             </div>
             <div id="p2p-connect-result" class="p2p-result"></div>
           </div>
+          <div class="p2p-section">
+            <h3>已连接的节点</h3>
+            <div id="p2p-connected-peers" class="p2p-connected-peers">
+              暂无连接
+            </div>
+          </div>
         </div>
         <div class="p2p-tab-content" data-tab="messages">
           <div class="p2p-section">
@@ -131,12 +169,27 @@ class P2PModalUI {
       });
     });
 
+    // 复制 CID
+    const copyCidBtn = this.modal.querySelector('#p2p-copy-cid-btn');
+    copyCidBtn?.addEventListener('click', async () => {
+      try {
+        const irohResp = await fetch('/api/iroh/init', { method: 'POST' });
+        const data = await irohResp.json();
+        if (data.cid) {
+          await navigator.clipboard.writeText(data.cid);
+          this.showToast('CID 已复制到剪贴板');
+        }
+      } catch (e) {
+        console.error('复制失败:', e);
+      }
+    });
+
     // 复制 DID
-    const copyBtn = this.modal.querySelector('#p2p-copy-btn');
-    copyBtn?.addEventListener('click', async () => {
+    const copyDidBtn = this.modal.querySelector('#p2p-copy-did-btn');
+    copyDidBtn?.addEventListener('click', async () => {
       try {
-        const resp = await fetch('/api/identity');
-        const data = await resp.json();
+        const irohResp = await fetch('/api/iroh/init', { method: 'POST' });
+        const data = await irohResp.json();
         if (data.did) {
           await navigator.clipboard.writeText(data.did);
           this.showToast('DID 已复制到剪贴板');
@@ -146,6 +199,21 @@ class P2PModalUI {
       }
     });
 
+    // 复制 Node ID
+    const copyNodeIdBtn = this.modal.querySelector('#p2p-copy-nodeid-btn');
+    copyNodeIdBtn?.addEventListener('click', async () => {
+      try {
+        const irohResp = await fetch('/api/iroh/init', { method: 'POST' });
+        const data = await irohResp.json();
+        if (data.irohNodeId) {
+          await navigator.clipboard.writeText(data.irohNodeId);
+          this.showToast('Node ID 已复制到剪贴板');
+        }
+      } catch (e) {
+        console.error('复制失败:', e);
+      }
+    });
+
     // 连接按钮
     const connectBtn = this.modal.querySelector('#p2p-connect-btn');
     connectBtn?.addEventListener('click', () => this.handleConnect());
@@ -185,6 +253,23 @@ class P2PModalUI {
       if (data.ok) {
         result.innerHTML = `<div class="p2p-success">连接成功！节点: ${this.escapeHtml(data.nodeName || cid.substring(0, 16))}...</div>`;
         result.className = 'p2p-result success';
+        // 清空输入框
+        input.value = '';
+        // 保存已连接节点到后端
+        try {
+          await fetch('/api/p2p/history', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              cid: cid,  // 输入的 CID 或 Node ID
+              irohNodeId: data.targetNodeId,
+              did: data.targetNodeId,  // 用 Node ID 作为 DID
+              name: data.nodeName || cid.substring(0, 16)
+            })
+          });
+        } catch (e) {
+          console.error('保存连接失败:', e);
+        }
       } else {
         result.innerHTML = `<div class="p2p-error">${this.escapeHtml(data.error || '连接失败')}</div>`;
         result.className = 'p2p-result error';
@@ -196,6 +281,48 @@ class P2PModalUI {
     }
   }
 
+  private async loadConnectionHistory(): Promise<void> {
+    try {
+      const resp = await fetch('/api/p2p/history');
+      const history = await resp.json();
+      this.connectedPeers.clear();
+      for (const entry of history) {
+        this.connectedPeers.set(entry.irohNodeId || entry.did, {
+          nodeId: entry.irohNodeId || entry.did,
+          name: entry.name || 'Unknown',
+          time: entry.lastConnectedAt || Date.now()
+        });
+      }
+      this.updateConnectedPeersDisplay();
+    } catch (e) {
+      console.error('加载连接历史失败:', e);
+    }
+  }
+
+  private updateConnectedPeersDisplay(): void {
+    const container = document.getElementById('p2p-connected-peers');
+    if (!container) return;
+
+    if (this.connectedPeers.size === 0) {
+      container.innerHTML = '<div class="p2p-empty">暂无连接</div>';
+      return;
+    }
+
+    let html = '';
+    for (const [nodeId, info] of this.connectedPeers) {
+      const shortId = nodeId.substring(0, 16) + '...';
+      const time = new Date(info.time).toLocaleTimeString();
+      html += `
+        <div class="p2p-peer-item">
+          <span class="p2p-peer-name">${this.escapeHtml(info.name || shortId)}</span>
+          <span class="p2p-peer-id">${shortId}</span>
+          <span class="p2p-peer-time">${time}</span>
+        </div>
+      `;
+    }
+    container.innerHTML = html;
+  }
+
   private escapeHtml(str: string): string {
     const div = document.createElement('div');
     div.textContent = str;
@@ -390,6 +517,41 @@ style.textContent = `
     color: var(--text-muted, #606058);
   }
   .p2p-error { color: var(--error, #ef4444); }
+  .p2p-connected-peers {
+    background: var(--bg, #1a1a18);
+    border: 1px solid var(--border, #3a3a36);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .p2p-connected-peers .p2p-empty {
+    padding: 16px;
+    text-align: center;
+    color: var(--text-muted, #606058);
+    font-size: 14px;
+  }
+  .p2p-peer-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--border, #3a3a36);
+  }
+  .p2p-peer-item:last-child { border-bottom: none; }
+  .p2p-peer-name {
+    font-size: 14px;
+    color: var(--text, #d8d8c8);
+    min-width: 80px;
+  }
+  .p2p-peer-id {
+    flex: 1;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    color: var(--text-secondary, #909088);
+  }
+  .p2p-peer-time {
+    font-size: 12px;
+    color: var(--text-muted, #606058);
+  }
 `;
 document.head.appendChild(style);
 

package/src/web/components/p2p/p2p-connection.ts

@@ -2,7 +2,15 @@
  * P2P 连接管理
  */
 
-import type { ConnectResult, ConnectProgress, ParsedInput, ConnectedPeer } from './types.js';
+import type {
+  ConnectResult,
+  ConnectProgress,
+  ParsedInput,
+  ConnectedPeer,
+  PersistentConnection,
+  CIDResolveResult,
+  PersistentConnectionStatus
+} from './types.js';
 import { ConnectionStatus } from './types.js';
 import { p2pStore } from './p2p-store-memory.js';
 
@@ -181,6 +189,150 @@ export class P2PConnectionManager {
     this.reconnectTimers.clear();
     this.peers.clear();
   }
+
+  // 从 CID 解析身份
+  async resolveFromCID(cid: string): Promise<CIDResolveResult> {
+    try {
+      const res = await fetch('/api/p2p/resolve-cid', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ cid })
+      });
+
+      if (res.ok) {
+        const data = await res.json();
+        return {
+          success: true,
+          did: data.doc?.id || data.doc?.did,
+          cid: cid,
+          name: data.doc?.name,
+          peerId: data.doc?.peerId
+        };
+      } else {
+        return { success: false, error: 'CID 解析失败' };
+      }
+    } catch (e) {
+      return { success: false, error: (e as Error).message };
+    }
+  }
+
+  // 获取所有持久连接
+  async getPersistentConnections(): Promise<PersistentConnection[]> {
+    try {
+      const res = await fetch('/api/p2p/persistent-connections');
+      if (res.ok) {
+        return await res.json();
+      }
+      return [];
+    } catch {
+      return [];
+    }
+  }
+
+  // 切换连接状态
+  async toggleConnection(connection: PersistentConnection, enable: boolean): Promise<boolean> {
+    try {
+      if (enable) {
+        // 建立连接
+        const result = await this.connect(connection.cid);
+        if (result.success) {
+          await fetch('/api/p2p/connection-status', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              id: connection.id,
+              status: 'connected',
+              channelId: connection.channelId
+            })
+          });
+          return true;
+        }
+        return false;
+      } else {
+        // 断开连接
+        if (connection.peerId) {
+          await this.disconnect(connection.peerId);
+        }
+        await fetch('/api/p2p/connection-status', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            id: connection.id,
+            status: 'disconnected'
+          })
+        });
+        return true;
+      }
+    } catch {
+      return false;
+    }
+  }
+
+  // 连接并创建对话通道
+  async connectAndCreateChannel(
+    input: string,
+    onProgress?: (progress: ConnectProgress) => void
+  ): Promise<ConnectResult> {
+    const parsed = this.parseInput(input);
+    if (parsed.type === 'invalid') {
+      return { success: false, error: parsed.error };
+    }
+
+    onProgress?.({ stage: 'validating', percent: 10, message: '验证输入格式...' });
+
+    let cid = '';
+    let did = '';
+    const value = parsed.value;
+
+    if (parsed.type === 'link' && typeof value !== 'string') {
+      cid = (value as { did?: string; cid?: string }).cid || '';
+      did = (value as { did?: string; cid?: string }).did || '';
+    } else if (parsed.type === 'cid' && typeof value === 'string') {
+      cid = value;
+    } else if (parsed.type === 'diapDoc' && typeof value !== 'string') {
+      cid = (value as { id?: string; did?: string; cid?: string }).cid || '';
+      did = (value as { id?: string; did?: string }).id || (value as { id?: string; did?: string }).did || '';
+    }
+
+    if (!cid) {
+      return { success: false, error: '未找到 CID' };
+    }
+
+    // 如果没有 DID，从 CID 解析
+    if (!did) {
+      onProgress?.({ stage: 'resolving', percent: 30, message: '从 IPFS 解析身份...' });
+      const resolveResult = await this.resolveFromCID(cid);
+      if (resolveResult.success) {
+        did = resolveResult.did || '';
+        onProgress?.({ stage: 'identity_resolved', percent: 50, message: `身份解析完成: ${resolveResult.name}` });
+      }
+    }
+
+    // 创建对话通道
+    onProgress?.({ stage: 'creating_channel', percent: 60, message: '创建对话通道...' });
+    try {
+      const channelRes = await fetch('/api/p2p/create-channel', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          peerDid: did,
+          peerName: did.substring(0, 16),
+          cid: cid,
+          peerId: ''
+        })
+      });
+
+      if (!channelRes.ok) {
+        return { success: false, error: '创建对话通道失败' };
+      }
+    } catch (e) {
+      return { success: false, error: (e as Error).message };
+    }
+
+    // 执行连接
+    onProgress?.({ stage: 'connecting', percent: 80, message: '建立 P2P 连接...' });
+    return this.connect(input, onProgress);
+  }
 }
 
 export const p2pConnection = new P2PConnectionManager();

package/src/web/components/p2p/p2p-manager.ts

@@ -11,7 +11,9 @@ import type {
   ConnectResult,
   ConnectProgress,
   P2PMessage,
-  ConnectionHistoryEntry
+  ConnectionHistoryEntry,
+  PersistentConnection,
+  CIDResolveResult
 } from './types.js';
 
 export class P2PManager {
@@ -96,6 +98,42 @@ export class P2PManager {
     this.connection.destroy();
     this.messages.destroy();
   }
+
+  // 获取持久连接列表
+  async getPersistentConnections(): Promise<PersistentConnection[]> {
+    return this.connection.getPersistentConnections();
+  }
+
+  // 更新连接状态
+  async updateConnectionStatus(
+    id: string,
+    status: string,
+    channelId?: string
+  ): Promise<void> {
+    await fetch('/api/p2p/connection-status', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ id, status, channelId })
+    });
+  }
+
+  // 切换连接状态
+  async toggleConnection(connection: PersistentConnection, enable: boolean): Promise<boolean> {
+    return this.connection.toggleConnection(connection, enable);
+  }
+
+  // CID 解析
+  async resolveFromCID(cid: string): Promise<CIDResolveResult> {
+    return this.connection.resolveFromCID(cid);
+  }
+
+  // 连接并创建对话通道
+  async connectAndCreateChannel(
+    input: string,
+    onProgress?: (progress: ConnectProgress) => void
+  ): Promise<ConnectResult> {
+    return this.connection.connectAndCreateChannel(input, onProgress);
+  }
 }
 
 // 全局单例

package/src/web/components/p2p/p2p-store-memory.ts

@@ -27,7 +27,7 @@ export class P2PStoreMemory {
   // ==================== 连接历史 ====================
 
   async addToHistory(entry: Omit<ConnectionHistoryEntry, 'id'>): Promise<string> {
-    const existingIndex = this.history.findIndex(h => h.did === entry.did);
+    const existingIndex = this.history.findIndex(h => h.cid === entry.cid);
 
     if (existingIndex >= 0) {
       this.history[existingIndex] = {