@bolloon/bolloon-agent 0.1.24 → 0.1.26

package/src/web/client.js

@@ -23,6 +23,7 @@ let eventSources = new Map(); // channelId -> EventSource
 let currentChannelId = null;
 let currentAgentId = '';
 let channels = [];
+let remoteChannels = []; // v3: 远端 channel UI 元数据 (按 peer 分组)
 let isSidebarCollapsed = false;
 let reconnectAttempts = new Map(); // channelId -> attempts
 let reconnectTimers = new Map(); // channelId -> timer
@@ -623,6 +624,11 @@ async function selectChannel(channelId, targetSessionId = null) {
   currentChannelId = channelId;
   reconnectAttempts.set(channelId, 0);
 
+  // v3: 盾牌弹窗打开时, 切 channel 要刷列表 (tab 标题 + 已绑/未绑 分组)
+  if (typeof judgmentsModal !== 'undefined' && judgmentsModal && judgmentsModal.classList.contains('active')) {
+    if (typeof lastJudgmentsCache !== 'undefined') renderJudgments(lastJudgmentsCache);
+  }
+
   // 找到当前频道和 session
   const channel = channels.find(c => c.id === channelId);
   if (channel) {
@@ -1996,6 +2002,18 @@ let judgmentsLoaded = false;
 function showJudgmentsModal() {
   if (judgmentsModal) judgmentsModal.classList.add('active');
   if (!judgmentsLoaded) loadJudgments();
+  else renderJudgments(lastJudgmentsCache); // 打开时按当前 channel / tab 重渲
+}
+
+function switchJudgmentTab(tab) {
+  currentJudgmentTab = tab;
+  document.querySelectorAll('.judgment-tab').forEach(btn => {
+    const active = btn.dataset.tab === tab;
+    btn.classList.toggle('active', active);
+    btn.style.borderBottomColor = active ? '#2563eb' : 'transparent';
+    btn.style.color = active ? '#2563eb' : '#6b7280';
+  });
+  renderJudgments(lastJudgmentsCache);
 }
 
 function hideJudgmentsModal() {
@@ -2008,16 +2026,83 @@ function escapeHtml(s) {
   }[c]));
 }
 
+let currentJudgmentTab = 'channel'; // 'channel' | 'global'
+let lastJudgmentsCache = []; // 最近一次 loadJudgments 拿到的原始列表, 切 tab / 切 channel 时复用
+
+/**
+ * v3 重做: 渲染判断力列表 (受 tab + 当前 channel 影响)
+ *   tab = 'channel': 拆为"已绑定" + "未绑定"两组, 每条带 + / × 按钮
+ *   tab = 'global':  全部 judgment 列表, 无 + / × 按钮
+ * 如果没选 channel, 'channel' tab 自动显示提示 + 全部 judgment
+ */
 function renderJudgments(items) {
   if (!judgmentsList) return;
-  if (!items || items.length === 0) {
+  const all = items || [];
+  const titleEl = document.getElementById('judgments-list-title');
+  const chNameEl = document.getElementById('judgments-tab-channel-name');
+  const currentCh = currentChannelId
+    ? channels.find(c => c.id === currentChannelId)
+    : null;
+
+  if (chNameEl) {
+    chNameEl.textContent = currentCh ? `(${currentCh.name})` : '(未选)';
+  }
+
+  if (all.length === 0) {
     judgmentsList.innerHTML = '<div class="task-empty">还没有判断, 在上面记录第一条吧</div>';
+    if (titleEl) titleEl.textContent = '本 channel 的判断力';
+    return;
+  }
+
+  if (currentJudgmentTab === 'global') {
+    // 全局 tab: 全部 judgment, 简单列表
+    if (titleEl) titleEl.textContent = `全局判断力 (${all.length} 条)`;
+    judgmentsList.innerHTML = renderJudgmentItems(all, { showBindToggle: false });
+    return;
+  }
+
+  // channel tab: 必须有 channel
+  if (!currentCh) {
+    if (titleEl) titleEl.textContent = '本 channel 的判断力';
+    judgmentsList.innerHTML = `
+      <div style="padding:24px 12px;text-align:center;color:#6b7280;font-size:13px;">
+        请先在左侧选中一个 channel,<br>然后这里会显示已绑定和可加入的判断力。
+      </div>
+    `;
     return;
   }
-  const html = items.map(j => {
+
+  const boundIds = new Set(
+    Array.isArray(currentCh.bound_judgment_ids) ? currentCh.bound_judgment_ids : []
+  );
+  const bound = all.filter(j => boundIds.has(j.id));
+  const unbound = all.filter(j => !boundIds.has(j.id));
+
+  if (titleEl) titleEl.textContent = `${currentCh.name} 的判断力 (已绑 ${bound.length} / 共 ${all.length})`;
+
+  let html = '';
+  if (bound.length > 0) {
+    html += `<div style="font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px;padding:8px 4px 4px;">已绑定 (${bound.length})</div>`;
+    html += renderJudgmentItems(bound, { showBindToggle: true, isBound: true });
+  }
+  if (unbound.length > 0) {
+    html += `<div style="font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:0.5px;padding:14px 4px 4px;">未绑定 (${unbound.length})</div>`;
+    html += renderJudgmentItems(unbound, { showBindToggle: true, isBound: false });
+  }
+  judgmentsList.innerHTML = html;
+}
+
+function renderJudgmentItems(items, opts) {
+  const { showBindToggle, isBound } = opts || {};
+  return items.map(j => {
     const reason = (j.reasons && j.reasons[0]) ? escapeHtml(j.reasons[0]) : '';
     const domain = (j.context && j.context.domain) ? escapeHtml(j.context.domain) : 'general';
     const stakes = (j.context && j.context.stakes) ? escapeHtml(j.context.stakes) : 'medium';
+    const bindBtn = showBindToggle
+      ? isBound
+        ? `<button class="judgment-toggle-btn" data-id="${escapeHtml(j.id)}" data-action="unbind" title="从当前 channel 移除" style="background:none;border:1px solid #fca5a5;color:#b91c1c;padding:1px 8px;border-radius:3px;cursor:pointer;font-size:11px;">× 移除</button>`
+        : `<button class="judgment-toggle-btn" data-id="${escapeHtml(j.id)}" data-action="bind" title="加进当前 channel" style="background:none;border:1px solid #6b7280;color:#6b7280;padding:1px 8px;border-radius:3px;cursor:pointer;font-size:11px;">+ 加入</button>`
+      : '';
     return `
       <div class="task-item completed judgment-row"
            data-judgment-id="${escapeHtml(j.id)}"
@@ -2037,6 +2122,7 @@ function renderJudgments(items) {
         <div class="task-item-meta" style="color:#999;font-size:11px;margin-top:4px;display:flex;justify-content:space-between;align-items:center;">
           <span>${domain} · ${escapeHtml(j.timestamp)} · ${escapeHtml(j.id)}</span>
           <span style="display:flex;gap:4px;">
+            ${bindBtn}
             <button class="judgment-edit-btn" data-id="${escapeHtml(j.id)}" title="编辑判断" style="background:none;border:1px solid #d1d5db;color:#374151;padding:1px 8px;border-radius:3px;cursor:pointer;font-size:11px;">编辑</button>
             <button class="judgment-del-btn" data-id="${escapeHtml(j.id)}" title="删除判断" style="background:none;border:1px solid #fca5a5;color:#b91c1c;padding:1px 8px;border-radius:3px;cursor:pointer;font-size:11px;">删除</button>
           </span>
@@ -2044,7 +2130,6 @@ function renderJudgments(items) {
       </div>
     `;
   }).join('');
-  judgmentsList.innerHTML = html;
 }
 
 async function loadJudgments() {
@@ -2053,7 +2138,8 @@ async function loadJudgments() {
     const res = await fetch('/api/judgments');
     if (!res.ok) throw new Error('HTTP ' + res.status);
     const data = await res.json();
-    renderJudgments(data.judgments);
+    lastJudgmentsCache = data.judgments || [];
+    renderJudgments(lastJudgmentsCache);
     if (judgmentsBadge) {
       if (data.count > 0) {
         judgmentsBadge.textContent = data.count;
@@ -2068,11 +2154,46 @@ async function loadJudgments() {
   }
 }
 
+/** 把 judgment id 加进 / 移出当前 channel.bound_judgment_ids, 然后刷新两边 UI */
+async function toggleChannelJudgment(judgmentId, action) {
+  if (!currentChannelId) {
+    showJudgmentError('请先选中一个 channel');
+    return;
+  }
+  const ch = channels.find(c => c.id === currentChannelId);
+  if (!ch) return;
+  const set = new Set(Array.isArray(ch.bound_judgment_ids) ? ch.bound_judgment_ids : []);
+  if (action === 'bind') set.add(judgmentId);
+  else set.delete(judgmentId);
+  const next = Array.from(set);
+  try {
+    const res = await fetch(`/channels/${currentChannelId}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ bound_judgment_ids: next })
+    });
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({}));
+      throw new Error(err.error || `HTTP ${res.status}`);
+    }
+    const updated = await res.json();
+    const idx = channels.findIndex(c => c.id === currentChannelId);
+    if (idx >= 0) channels[idx] = updated;
+    // 弹窗开着就刷新, 关着就跳过
+    if (judgmentsModal && judgmentsModal.classList.contains('active')) {
+      renderJudgments(lastJudgmentsCache);
+    }
+  } catch (err) {
+    showJudgmentError('绑定失败: ' + err.message);
+  }
+}
+
 // 列表内编辑/删除 + 拖拽 — 事件委托
 if (judgmentsList) {
   judgmentsList.addEventListener('click', async (e) => {
     const editBtn = e.target.closest && e.target.closest('.judgment-edit-btn');
     const delBtn = e.target.closest && e.target.closest('.judgment-del-btn');
+    const toggleBtn = e.target.closest && e.target.closest('.judgment-toggle-btn');
     if (editBtn) {
       const id = editBtn.getAttribute('data-id');
       await editJudgment(id);
@@ -2087,9 +2208,18 @@ if (judgmentsList) {
       } catch (err) {
         showJudgmentError('删除失败: ' + err.message);
       }
+    } else if (toggleBtn) {
+      const id = toggleBtn.getAttribute('data-id');
+      const action = toggleBtn.getAttribute('data-action');
+      await toggleChannelJudgment(id, action);
     }
   });
 
+  // tab 切换
+  document.querySelectorAll('.judgment-tab').forEach(btn => {
+    btn.addEventListener('click', () => switchJudgmentTab(btn.dataset.tab));
+  });
+
   // 拖拽: 每条 judgment 是 drag source, dataTransfer 装 decision text
   judgmentsList.addEventListener('dragstart', (e) => {
     const row = e.target.closest && e.target.closest('.judgment-row');
@@ -2361,6 +2491,163 @@ loadJudgments();
 // 后台定期刷新 (与 modal 打开/关闭无关, 任何时候都保持徽章新鲜)
 setInterval(loadJudgments, 10000);
 
+// ============================================================================
+// v3: 远端智能体 (从 P2P 连接的 peer 拉取的 channel UI 元数据)
+// ============================================================================
+
+async function loadRemoteChannels() {
+  try {
+    const res = await fetch('/api/remote-channels');
+    if (!res.ok) return;
+    const data = await res.json();
+    remoteChannels = Array.isArray(data.peers) ? data.peers : [];
+    renderRemoteChannels();
+  } catch (err) {
+    console.error('[v3] loadRemoteChannels 失败:', err);
+  }
+}
+
+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>';
+    return;
+  }
+  const html = remoteChannels.map(p => {
+    const peerShort = p.peerId.substring(0, 12) + '…';
+    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>
+        </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
+  list.querySelectorAll('.remote-channel-row').forEach(row => {
+    row.addEventListener('click', () => {
+      const peerId = row.dataset.peerId;
+      const channelId = row.dataset.channelId;
+      console.log('[v3] 点击远端 channel:', peerId.substring(0,12), channelId);
+      alert(`远端智能体点击 — Phase 2 实现 chat 调用\n\nPeer: ${peerId}\nChannel: ${channelId}`);
+    });
+  });
+}
+
+const refreshRemoteBtn = document.getElementById('refresh-remote-agents-btn');
+if (refreshRemoteBtn) {
+  refreshRemoteBtn.addEventListener('click', async (e) => {
+    e.stopPropagation(); // 防止冒泡触发折叠
+    refreshRemoteBtn.disabled = true;
+    refreshRemoteBtn.textContent = '⏳';
+    try {
+      const res = await fetch('/api/remote-channels/refresh', { method: 'POST' });
+      const data = await res.json();
+      console.log('[v3] 刷新远端智能体:', data);
+      setTimeout(loadRemoteChannels, 1500);
+    } catch (err) {
+      console.error('[v3] 刷新失败:', err);
+    } finally {
+      setTimeout(() => {
+        refreshRemoteBtn.disabled = false;
+        refreshRemoteBtn.textContent = '↻ 刷新';
+      }, 2000);
+    }
+  });
+}
+
+// 启动时拉一次 + 定期轮询 (SSE 接收 P2P reply 后也会更新)
+loadRemoteChannels();
+setInterval(loadRemoteChannels, 8000);
+
+// ============ v3: 折叠 + 拖拽分隔线 ============
+
+// 给本地/远端 section 加 flex 修饰类 (CSS variable 驱动比例)
+const localSection = document.querySelector('.sidebar-section'); // 第一个 section = 本地 channel
+const remoteSection = document.getElementById('remote-agents-section');
+if (localSection) localSection.classList.add('local-flex');
+if (remoteSection) remoteSection.classList.add('remote-flex');
+
+// 折叠: 点 header 切换 collapsed 类
+const remoteHeader = document.getElementById('remote-agents-header');
+if (remoteHeader && remoteSection) {
+  remoteHeader.addEventListener('click', (e) => {
+    // 阻止刷新按钮的事件冒泡在 refreshRemoteBtn 里已处理
+    remoteSection.classList.toggle('collapsed');
+  });
+}
+
+// 拖拽分隔线: 鼠标按下开始拖, mousemove 改 --local-flex / --remote-flex, mouseup 结束
+const splitHandle = document.getElementById('sidebar-split-handle');
+if (splitHandle && localSection && remoteSection) {
+  // 初始化等分
+  const updateFlexVars = (localRatio, remoteRatio) => {
+    localSection.style.setProperty('--local-flex', String(localRatio));
+    remoteSection.style.setProperty('--remote-flex', String(remoteRatio));
+  };
+  updateFlexVars(1, 1);
+
+  let isDragging = false;
+  let dragStartY = 0;
+  let startLocalFlex = 1;
+  let startRemoteFlex = 1;
+  let sidebarHeight = 0;
+
+  splitHandle.addEventListener('mousedown', (e) => {
+    isDragging = true;
+    splitHandle.classList.add('dragging');
+    dragStartY = e.clientY;
+    // 读当前 CSS variable 拿真实 flex 值
+    const lf = parseFloat(getComputedStyle(localSection).getPropertyValue('--local-flex')) || 1;
+    const rf = parseFloat(getComputedStyle(remoteSection).getPropertyValue('--remote-flex')) || 1;
+    startLocalFlex = lf;
+    startRemoteFlex = rf;
+    // 父容器可用高度 = sidebar-section 总和 (本地+远端+handle)
+    const sidebar = document.querySelector('.sidebar');
+    if (sidebar) sidebarHeight = sidebar.clientHeight;
+    e.preventDefault();
+    document.body.style.cursor = 'ns-resize';
+  });
+
+  document.addEventListener('mousemove', (e) => {
+    if (!isDragging) return;
+    const deltaY = e.clientY - dragStartY;
+    if (sidebarHeight <= 0) return;
+    // deltaY 正 = 鼠标下移 = 拉大本地 / 缩小远端
+    // 转换: 1 像素 ≈ sidebarHeight 中 0.005 的比例
+    const deltaRatio = deltaY / sidebarHeight * 4; // 4 倍灵敏
+    let newLocal = Math.max(0.1, startLocalFlex + deltaRatio);
+    let newRemote = Math.max(0.1, startRemoteFlex - deltaRatio);
+    updateFlexVars(newLocal, newRemote);
+  });
+
+  document.addEventListener('mouseup', () => {
+    if (!isDragging) return;
+    isDragging = false;
+    splitHandle.classList.remove('dragging');
+    document.body.style.cursor = '';
+  });
+
+  // 双击分隔线 = 重置为等分
+  splitHandle.addEventListener('dblclick', () => {
+    updateFlexVars(1, 1);
+  });
+}
+
 if (taskModal) {
   taskModal.addEventListener('click', (e) => {
     if (e.target === taskModal) {
@@ -2831,7 +3118,10 @@ if (agentAddConfirmBtn) {
         const res = await fetch(`/channels/${channelId}`, {
           method: 'PATCH',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ walletAddress: walletAddress || null, autoInvokeTools })
+          body: JSON.stringify({
+            walletAddress: walletAddress || null,
+            autoInvokeTools
+          })
         });
         if (!res.ok) throw new Error('update failed');
         const updated = await res.json();
@@ -2846,4 +3136,3 @@ if (agentAddConfirmBtn) {
     }
   });
 }
-

package/src/web/index.html

@@ -64,6 +64,25 @@
         <ul class="channel-list" id="channel-list"></ul>
       </div>
 
+      <!-- v3: 本地/远端分隔线 — 可拖拽改变两边高度 -->
+      <div id="sidebar-split-handle" title="拖动调整上方/下方高度">
+        <div class="split-handle-grip"></div>
+      </div>
+
+      <!-- v3: 远端智能体 — 从 P2P 连接的 peer 拉取的 channel UI 元数据 -->
+      <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>
+          <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>
+        </ul>
+      </div>
+
       <div class="sidebar-footer">
         <div class="agent-status">
           <span class="status-dot"></span>
@@ -236,8 +255,19 @@
               <input type="file" id="judgment-import-file" accept=".json,.yaml,.yml,.md,.txt,.html,.htm" style="display:none">
             </div>
             <div id="judgment-error" class="form-info" style="display:none;color:#b91c1c;"></div>
-            <h3 style="margin-top:24px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
-              <span>已记录的判断</span>
+            <!-- v3 重做: tab 切换 — 默认显示当前 channel 的 judgment 上下文, 切换后才是全部 -->
+            <div id="judgments-tabs" style="display:flex;border-bottom:1px solid #e5e7eb;margin-top:20px;">
+              <button class="judgment-tab active" data-tab="channel"
+                      style="flex:1;padding:10px 12px;background:none;border:none;border-bottom:2px solid #2563eb;color:#2563eb;font-size:13px;font-weight:600;cursor:pointer;">
+                本 channel <span id="judgments-tab-channel-name" style="font-weight:normal;color:#6b7280;"></span>
+              </button>
+              <button class="judgment-tab" data-tab="global"
+                      style="flex:1;padding:10px 12px;background:none;border:none;border-bottom:2px solid transparent;color:#6b7280;font-size:13px;font-weight:600;cursor:pointer;">
+                全局
+              </button>
+            </div>
+            <h3 style="margin-top:16px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
+              <span id="judgments-list-title">本 channel 的判断力</span>
               <span style="display:flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;font-weight:normal;">
                 <label style="display:flex;align-items:center;gap:4px;cursor:pointer;color:#6b7280;">
                   <input type="checkbox" id="judgment-select-all" style="cursor:pointer;"> 全选