@bolloon/bolloon-agent 0.1.0

package/dist/web/components/p2p/index.js

@@ -0,0 +1,357 @@
+class P2PModalUI {
+  modal = null;
+  overlay = null;
+  constructor() {
+    this.createModal();
+  }
+  createModal() {
+    this.overlay = document.createElement("div");
+    this.overlay.className = "p2p-modal-overlay";
+    this.overlay.style.cssText = `
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.7);
+      z-index: 1000;
+      align-items: center;
+      justify-content: center;
+    `;
+    this.modal = document.createElement("div");
+    this.modal.className = "p2p-modal";
+    this.modal.style.cssText = `
+      width: 90%;
+      max-width: 650px;
+      max-height: 90vh;
+      background: var(--bg-sidebar, #222220);
+      border: 1px solid var(--border, #3a3a36);
+      border-radius: 12px;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    `;
+    this.overlay.appendChild(this.modal);
+    document.body.appendChild(this.overlay);
+    this.overlay.addEventListener("click", (e) => {
+      if (e.target === this.overlay) this.hide();
+    });
+    this.render();
+  }
+  async render() {
+    if (!this.modal) return;
+    let identityHtml = '<div class="p2p-loading">\u52A0\u8F7D\u4E2D...</div>';
+    try {
+      const resp = await fetch("/api/identity");
+      const data = await resp.json();
+      identityHtml = `
+        <div class="p2p-section">
+          <h3>\u8EAB\u4EFD\u4FE1\u606F</h3>
+          <div class="p2p-info-row">
+            <span class="label">\u540D\u79F0:</span>
+            <span class="value">${this.escapeHtml(data.name || "\u672A\u77E5")}</span>
+          </div>
+          <div class="p2p-info-row">
+            <span class="label">DID:</span>
+            <span class="value mono">${this.escapeHtml(data.did || "\u672A\u77E5")}</span>
+          </div>
+          <button class="p2p-btn-primary" id="p2p-copy-btn">\u590D\u5236 DID</button>
+        </div>
+      `;
+    } catch {
+      identityHtml = '<div class="p2p-error">\u65E0\u6CD5\u52A0\u8F7D\u8EAB\u4EFD\u4FE1\u606F</div>';
+    }
+    this.modal.innerHTML = `
+      <div class="p2p-header">
+        <h2>P2P \u7F51\u7EDC</h2>
+        <button class="p2p-close" id="p2p-close-btn">\xD7</button>
+      </div>
+      <div class="p2p-tabs">
+        <button class="p2p-tab active" data-tab="identity">\u8EAB\u4EFD</button>
+        <button class="p2p-tab" data-tab="connect">\u8FDE\u63A5</button>
+        <button class="p2p-tab" data-tab="messages">\u6D88\u606F</button>
+      </div>
+      <div class="p2p-content">
+        <div class="p2p-tab-content active" data-tab="identity">
+          ${identityHtml}
+        </div>
+        <div class="p2p-tab-content" data-tab="connect">
+          <div class="p2p-section">
+            <h3>\u8FDE\u63A5\u5230\u8282\u70B9</h3>
+            <div class="p2p-connect-form">
+              <input type="text" id="p2p-connect-input" placeholder="\u8F93\u5165\u8282\u70B9 ID \u6216 CID">
+              <button class="p2p-btn-primary" id="p2p-connect-btn">\u8FDE\u63A5</button>
+            </div>
+            <div id="p2p-connect-result" class="p2p-result"></div>
+          </div>
+        </div>
+        <div class="p2p-tab-content" data-tab="messages">
+          <div class="p2p-section">
+            <h3>\u6536\u5230\u7684\u6D88\u606F</h3>
+            <div id="p2p-messages-list" class="p2p-messages">
+              \u6682\u65E0\u6D88\u606F
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    this.bindEvents();
+  }
+  bindEvents() {
+    if (!this.modal) return;
+    const closeBtn = this.modal.querySelector("#p2p-close-btn");
+    closeBtn?.addEventListener("click", () => this.hide());
+    this.modal.querySelectorAll(".p2p-tab").forEach((tab) => {
+      tab.addEventListener("click", (e) => {
+        const target = e.target;
+        const tabName = target.dataset.tab;
+        if (tabName) this.switchTab(tabName);
+      });
+    });
+    const copyBtn = this.modal.querySelector("#p2p-copy-btn");
+    copyBtn?.addEventListener("click", async () => {
+      try {
+        const resp = await fetch("/api/identity");
+        const data = await resp.json();
+        if (data.did) {
+          await navigator.clipboard.writeText(data.did);
+          this.showToast("DID \u5DF2\u590D\u5236\u5230\u526A\u8D34\u677F");
+        }
+      } catch (e) {
+        console.error("\u590D\u5236\u5931\u8D25:", e);
+      }
+    });
+    const connectBtn = this.modal.querySelector("#p2p-connect-btn");
+    connectBtn?.addEventListener("click", () => this.handleConnect());
+  }
+  switchTab(tabName) {
+    if (!this.modal) return;
+    this.modal.querySelectorAll(".p2p-tab").forEach((tab) => {
+      tab.classList.toggle("active", tab.getAttribute("data-tab") === tabName);
+    });
+    this.modal.querySelectorAll(".p2p-tab-content").forEach((content) => {
+      content.classList.toggle("active", content.getAttribute("data-tab") === tabName);
+    });
+  }
+  async handleConnect() {
+    const input = document.getElementById("p2p-connect-input");
+    const result = document.getElementById("p2p-connect-result");
+    if (!input || !result) return;
+    const cid = input.value.trim();
+    if (!cid) return;
+    result.innerHTML = '<div class="p2p-loading">\u8FDE\u63A5\u4E2D...</div>';
+    result.className = "p2p-result";
+    try {
+      const resp = await fetch("/api/iroh/connect", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ cid })
+      });
+      const data = await resp.json();
+      if (data.ok) {
+        result.innerHTML = `<div class="p2p-success">\u8FDE\u63A5\u6210\u529F\uFF01\u8282\u70B9: ${this.escapeHtml(data.nodeName || cid.substring(0, 16))}...</div>`;
+        result.className = "p2p-result success";
+      } else {
+        result.innerHTML = `<div class="p2p-error">${this.escapeHtml(data.error || "\u8FDE\u63A5\u5931\u8D25")}</div>`;
+        result.className = "p2p-result error";
+      }
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "\u8FDE\u63A5\u5931\u8D25";
+      result.innerHTML = `<div class="p2p-error">${this.escapeHtml(msg)}</div>`;
+      result.className = "p2p-result error";
+    }
+  }
+  escapeHtml(str) {
+    const div = document.createElement("div");
+    div.textContent = str;
+    return div.innerHTML;
+  }
+  showToast(message) {
+    const toast = document.createElement("div");
+    toast.className = "p2p-toast";
+    toast.textContent = message;
+    toast.style.cssText = `
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 12px 24px;
+      background: var(--bg-sidebar, #222220);
+      border: 1px solid var(--accent, #c4d640);
+      border-radius: 8px;
+      color: var(--text, #d8d8c8);
+      font-size: 14px;
+      z-index: 2000;
+    `;
+    document.body.appendChild(toast);
+    setTimeout(() => toast.remove(), 2e3);
+  }
+  show() {
+    if (this.overlay) {
+      this.overlay.style.display = "flex";
+      this.render();
+    }
+  }
+  hide() {
+    if (this.overlay) {
+      this.overlay.style.display = "none";
+    }
+  }
+}
+const style = document.createElement("style");
+style.textContent = `
+  .p2p-modal-overlay { display: none; }
+  .p2p-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border, #3a3a36);
+  }
+  .p2p-header h2 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text, #d8d8c8);
+  }
+  .p2p-close {
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: var(--bg-active, #333330);
+    border: 1px solid var(--border, #3a3a36);
+    color: var(--text-muted, #606058);
+    font-size: 20px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .p2p-close:hover {
+    background: var(--error-bg, rgba(239, 68, 68, 0.1));
+    border-color: var(--error, #ef4444);
+    color: var(--error, #ef4444);
+  }
+  .p2p-tabs {
+    display: flex;
+    gap: 4px;
+    padding: 12px 20px;
+    border-bottom: 1px solid var(--border, #3a3a36);
+  }
+  .p2p-tab {
+    padding: 8px 16px;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-secondary, #909088);
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .p2p-tab:hover {
+    background: var(--bg-hover, #2a2a26);
+    color: var(--text, #d8d8c8);
+  }
+  .p2p-tab.active {
+    background: var(--bg-active, #333330);
+    color: var(--accent, #c4d640);
+  }
+  .p2p-content {
+    padding: 20px;
+    overflow-y: auto;
+    flex: 1;
+  }
+  .p2p-tab-content { display: none; }
+  .p2p-tab-content.active { display: block; }
+  .p2p-section { margin-bottom: 20px; }
+  .p2p-section h3 {
+    margin: 0 0 12px 0;
+    font-size: 14px;
+    color: var(--text-secondary, #909088);
+    font-weight: 500;
+  }
+  .p2p-info-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--border, #3a3a36);
+  }
+  .p2p-info-row .label {
+    min-width: 60px;
+    font-size: 13px;
+    color: var(--text-secondary, #909088);
+  }
+  .p2p-info-row .value {
+    flex: 1;
+    font-size: 13px;
+    color: var(--text, #d8d8c8);
+  }
+  .p2p-info-row .value.mono {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 12px;
+    word-break: break-all;
+  }
+  .p2p-btn-primary {
+    width: 100%;
+    padding: 12px;
+    background: var(--accent, #c4d640);
+    color: var(--bg, #1a1a18);
+    border: none;
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    margin-top: 12px;
+  }
+  .p2p-btn-primary:hover { opacity: 0.9; }
+  .p2p-connect-form { display: flex; gap: 8px; }
+  .p2p-connect-form input {
+    flex: 1;
+    padding: 12px;
+    background: var(--bg, #1a1a18);
+    border: 1px solid var(--border, #3a3a36);
+    border-radius: 8px;
+    color: var(--text, #d8d8c8);
+    font-size: 14px;
+    font-family: 'JetBrains Mono', monospace;
+  }
+  .p2p-connect-form input:focus {
+    outline: none;
+    border-color: var(--accent, #c4d640);
+  }
+  .p2p-result {
+    margin-top: 12px;
+    padding: 12px;
+    border-radius: 8px;
+    font-size: 14px;
+  }
+  .p2p-result.success {
+    background: var(--success-bg, rgba(34, 197, 94, 0.1));
+    border: 1px solid var(--success, #22c55e);
+    color: var(--success, #22c55e);
+  }
+  .p2p-result.error {
+    background: var(--error-bg, rgba(239, 68, 68, 0.1));
+    border: 1px solid var(--error, #ef4444);
+    color: var(--error, #ef4444);
+  }
+  .p2p-messages {
+    background: var(--bg, #1a1a18);
+    border: 1px solid var(--border, #3a3a36);
+    border-radius: 8px;
+    padding: 16px;
+    color: var(--text-muted, #606058);
+    font-size: 14px;
+    text-align: center;
+  }
+  .p2p-loading, .p2p-error {
+    padding: 20px;
+    text-align: center;
+    color: var(--text-muted, #606058);
+  }
+  .p2p-error { color: var(--error, #ef4444); }
+`;
+document.head.appendChild(style);
+const p2pModal = new P2PModalUI();
+window.p2pModal = p2pModal;
+window.showP2PModal = () => p2pModal.show();
+window.hideP2PModal = () => p2pModal.hide();
+console.log("[P2P Modal] \u5DF2\u521D\u59CB\u5316");

package/dist/web/components/p2p/p2p-connection.js

@@ -0,0 +1,161 @@
+/**
+ * P2P 连接管理
+ */
+import { ConnectionStatus } from './types.js';
+import { p2pStore } from './p2p-store-memory.js';
+const CID_REGEX = /^Qm[a-zA-Z0-9]{44}$|^bafy[a-zA-Z0-9]{59}$|^bafk[a-zA-Z0-9]{59}$/;
+const DID_REGEX = /^did:[a-z]+:[a-zA-Z0-9]+$/;
+export class P2PConnectionManager {
+    peers = new Map();
+    reconnectTimers = new Map();
+    connectionAttempts = new Map();
+    // 解析输入
+    parseInput(input) {
+        const trimmed = input.trim();
+        // URL scheme
+        if (trimmed.startsWith('bolloon://connect')) {
+            try {
+                const url = new URL(trimmed);
+                return {
+                    type: 'link',
+                    value: {
+                        did: url.searchParams.get('did') ?? undefined,
+                        cid: url.searchParams.get('cid') ?? undefined
+                    }
+                };
+            }
+            catch {
+                return { type: 'invalid', error: '无效的链接格式' };
+            }
+        }
+        // 纯 CID
+        if (CID_REGEX.test(trimmed)) {
+            return { type: 'cid', value: trimmed };
+        }
+        // JSON DiapDoc
+        try {
+            const parsed = JSON.parse(trimmed);
+            if (parsed.id || parsed.did) {
+                return { type: 'diapDoc', value: parsed };
+            }
+        }
+        catch { }
+        return { type: 'invalid', error: '无法识别的格式' };
+    }
+    // 连接到节点
+    async connect(input, onProgress) {
+        const parsed = this.parseInput(input);
+        if (parsed.type === 'invalid') {
+            return { success: false, error: parsed.error };
+        }
+        onProgress?.({ stage: 'validating', percent: 10, message: '验证输入格式...' });
+        let cid = '';
+        const value = parsed.value;
+        if (parsed.type === 'link' && typeof value !== 'string') {
+            cid = value.cid || '';
+        }
+        else if (parsed.type === 'cid' && typeof value === 'string') {
+            cid = value;
+        }
+        else if (parsed.type === 'diapDoc' && typeof value !== 'string') {
+            cid = value.cid || '';
+        }
+        if (!cid) {
+            return { success: false, error: '未找到 CID' };
+        }
+        onProgress?.({ stage: 'ipfs_fetch', percent: 40, message: '从 IPFS 获取节点文档...' });
+        try {
+            const res = await fetch('/api/iroh/connect', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ cid })
+            });
+            const data = await res.json();
+            if (res.ok) {
+                onProgress?.({ stage: 'connecting', percent: 80, message: '建立 P2P 连接...' });
+                // 保存到连接历史
+                if (data.did) {
+                    await p2pStore.addToHistory({
+                        did: data.did,
+                        name: data.name || 'Unknown',
+                        cid: cid,
+                        irohNodeId: data.irohNodeId || '',
+                        lastConnectedAt: Date.now(),
+                        lastMessageAt: Date.now(),
+                        totalMessages: 0,
+                        isPinned: false,
+                        tags: []
+                    });
+                }
+                // 更新本地状态
+                this.peers.set(data.irohNodeId, {
+                    nodeId: data.irohNodeId,
+                    status: ConnectionStatus.CONNECTED,
+                    info: data,
+                    lastSeen: Date.now()
+                });
+                onProgress?.({ stage: 'complete', percent: 100, message: '连接成功!' });
+                return { success: true, ...data };
+            }
+            else {
+                onProgress?.({ stage: 'error', percent: 0, message: data.error || '连接失败' });
+                return { success: false, error: data.error };
+            }
+        }
+        catch (e) {
+            return { success: false, error: e.message };
+        }
+    }
+    // 断开连接
+    async disconnect(nodeId) {
+        try {
+            await fetch('/api/iroh/disconnect', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ nodeId })
+            });
+        }
+        catch { }
+        this.peers.delete(nodeId);
+        this.clearReconnectTimer(nodeId);
+    }
+    // 获取所有已连接节点
+    getConnectedPeers() {
+        const connected = [];
+        this.peers.forEach((peer, peerNodeId) => {
+            if (peer.status === ConnectionStatus.CONNECTED) {
+                connected.push({ nodeId: peerNodeId, status: peer.status, info: peer.info, lastSeen: peer.lastSeen });
+            }
+        });
+        return connected;
+    }
+    // 清除重连定时器
+    clearReconnectTimer(nodeId) {
+        const timerId = this.reconnectTimers.get(nodeId);
+        if (timerId !== undefined) {
+            clearTimeout(timerId);
+            this.reconnectTimers.delete(nodeId);
+        }
+    }
+    // 获取节点数量
+    getPeerCount() {
+        return this.peers.size;
+    }
+    // 更新节点状态
+    updatePeerStatus(nodeId, status, info) {
+        const peer = this.peers.get(nodeId) || { nodeId, status, info: {}, lastSeen: 0 };
+        this.peers.set(nodeId, {
+            ...peer,
+            status,
+            info: info || peer.info,
+            lastSeen: Date.now()
+        });
+    }
+    // 销毁
+    destroy() {
+        this.reconnectTimers.forEach((timerId) => clearTimeout(timerId));
+        this.reconnectTimers.clear();
+        this.peers.clear();
+    }
+}
+export const p2pConnection = new P2PConnectionManager();

package/dist/web/components/p2p/p2p-identity.js

@@ -0,0 +1,78 @@
+/**
+ * P2P 身份管理
+ */
+import { p2pStore } from './p2p-store-memory.js';
+export class P2PIdentityManager {
+    identity = null;
+    initialized = false;
+    // 初始化身份
+    async init() {
+        if (this.initialized && this.identity) {
+            return this.identity;
+        }
+        try {
+            const res = await fetch('/api/iroh/init', { method: 'POST' });
+            const data = await res.json();
+            if (res.ok) {
+                this.identity = {
+                    did: data.did,
+                    cid: data.cid,
+                    irohNodeId: data.irohNodeId,
+                    name: data.name || `bolloon-${Date.now()}`
+                };
+                this.initialized = true;
+                // 保存到历史
+                await p2pStore.addToHistory({
+                    did: this.identity.did,
+                    name: '我的设备',
+                    cid: this.identity.cid,
+                    irohNodeId: this.identity.irohNodeId,
+                    lastConnectedAt: Date.now(),
+                    lastMessageAt: 0,
+                    totalMessages: 0,
+                    isPinned: true,
+                    tags: ['self']
+                });
+                console.log('[P2P Identity] 初始化成功:', this.identity.did?.substring(0, 20));
+            }
+            return this.identity;
+        }
+        catch (e) {
+            console.error('[P2P Identity] 初始化失败:', e);
+            throw e;
+        }
+    }
+    // 获取身份
+    get() {
+        return this.identity;
+    }
+    // 是否已初始化
+    isInitialized() {
+        return this.initialized;
+    }
+    // 生成分享链接
+    generateShareLink() {
+        if (!this.identity?.cid || !this.identity?.did) {
+            return null;
+        }
+        return `bolloon://connect?did=${encodeURIComponent(this.identity.did)}&cid=${encodeURIComponent(this.identity.cid)}`;
+    }
+    // 导出身份文件
+    exportIdentityFile() {
+        if (!this.identity)
+            return;
+        const data = JSON.stringify({
+            did: this.identity.did,
+            cid: this.identity.cid,
+            irohNodeId: this.identity.irohNodeId
+        }, null, 2);
+        const blob = new Blob([data], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'bolloon-identity.json';
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+}
+export const p2pIdentity = new P2PIdentityManager();

package/dist/web/components/p2p/p2p-manager.js

@@ -0,0 +1,82 @@
+/**
+ * P2P 核心管理器
+ */
+import { p2pStore } from './p2p-store-memory.js';
+import { p2pIdentity } from './p2p-identity.js';
+import { p2pConnection } from './p2p-connection.js';
+import { p2pMessages } from './p2p-messages.js';
+export class P2PManager {
+    identity = p2pIdentity;
+    connection = p2pConnection;
+    messages = p2pMessages;
+    // 初始化
+    async init() {
+        const identity = await this.identity.init();
+        this.messages.startListening();
+        return identity;
+    }
+    // 连接到节点
+    async connect(input, onProgress) {
+        return this.connection.connect(input, onProgress);
+    }
+    // 断开连接
+    async disconnect(nodeId) {
+        return this.connection.disconnect(nodeId);
+    }
+    // 发送消息
+    async sendMessage(content, targetNodeId) {
+        return this.messages.send(content, targetNodeId);
+    }
+    // 获取连接历史
+    async getHistory() {
+        return p2pStore.getHistory();
+    }
+    // 更新历史条目
+    async updateHistory(id, updates) {
+        return p2pStore.updateHistory(id, updates);
+    }
+    // 删除历史条目
+    async deleteHistory(id) {
+        return p2pStore.deleteHistory(id);
+    }
+    // 获取收到的消息
+    async getMessages() {
+        return this.messages.getReceivedMessages();
+    }
+    // 监听消息
+    onMessage(handler) {
+        this.messages.onMessage(handler);
+    }
+    // 获取未读数
+    getUnreadCount() {
+        return this.messages.getUnreadCount();
+    }
+    // 获取已连接节点
+    getConnectedPeers() {
+        return this.connection.getConnectedPeers();
+    }
+    // 获取节点数量
+    getPeerCount() {
+        return this.connection.getPeerCount();
+    }
+    // 获取离线队列
+    async getOfflineQueue() {
+        return this.messages.getOfflineQueue();
+    }
+    // 获取离线消息数量
+    async getOfflineQueueCount() {
+        return p2pStore.getQueueCount();
+    }
+    // 销毁
+    destroy() {
+        this.connection.destroy();
+        this.messages.destroy();
+    }
+}
+// 全局单例
+export const p2pManager = new P2PManager();
+// 挂载到全局
+if (typeof window !== 'undefined') {
+    window.p2pManager = p2pManager;
+}
+console.log('[P2P Manager] 已初始化');