@bolloon/bolloon-agent 0.4.9 → 0.4.11

package/dist/web/index.html

@@ -5,6 +5,19 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Bolloon Agent</title>
 
+  <!-- 2026-08-12: 手机端 (Capacitor webview / 移动浏览器) 跳转专门的手机端 UI (mobile.html, 微信风格) -->
+  <script>
+    (function () {
+      try {
+        var isCapacitor = window.Capacitor && window.Capacitor.isNativePlatform && window.Capacitor.isNativePlatform();
+        var isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+        if ((isCapacitor || isMobile) && !location.pathname.endsWith('/mobile.html')) {
+          location.replace('./mobile.html');
+        }
+      } catch (e) { /* 跳转失败静默, 继续桌面 UI */ }
+    })();
+  </script>
+
   <!-- Favicon -->
   <link rel="icon" type="image/x-icon" href="./icons/favicon.ico">
   <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png">

package/dist/web/mobile.css

@@ -0,0 +1,173 @@
+/* 手机端 UI — 微信风格 + bolloon WebUI 主题 (配色不变) */
+:root {
+  --bg: #1a1a18;
+  --bg-card: #222220;
+  --bg-hover: #2a2a26;
+  --text: #d8d8c8;
+  --text-secondary: #909088;
+  --text-muted: #606058;
+  --accent: #c4d640;
+  --accent-hover: #d4e650;
+  --border: #3a3a36;
+  --radius: 12px;
+  --tabbar-h: 60px;
+  --topbar-h: 56px;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
+html, body { height: 100%; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
+  overflow: hidden;
+  touch-action: manipulation;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+/* 顶部栏 */
+.topbar {
+  height: var(--topbar-h);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  padding-top: env(safe-area-inset-top);
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+}
+.topbar-title { font-size: 18px; font-weight: 600; color: var(--text); }
+.topbar-actions { display: flex; gap: 12px; }
+.icon-btn {
+  width: 36px; height: 36px;
+  border: none; border-radius: 8px;
+  background: var(--bg-hover);
+  color: var(--accent);
+  font-size: 22px;
+  display: flex; align-items: center; justify-content: center;
+}
+
+/* 页面容器 */
+.page-container { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
+.page { min-height: 100%; }
+
+/* 列表 */
+.list { padding: 8px 0; }
+.list-item {
+  display: flex; align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+}
+.list-item:active { background: var(--bg-hover); }
+.list-icon { font-size: 20px; width: 32px; text-align: center; }
+.list-item span:nth-child(2) { flex: 1; }
+.list-arrow { color: var(--text-muted); }
+
+/* 分组标签 */
+.section-label {
+  padding: 12px 16px 4px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* 会话 / 联系人条目 */
+.conv-item {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 16px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+}
+.conv-item:active { background: var(--bg-hover); }
+.conv-avatar {
+  width: 44px; height: 44px; border-radius: 8px;
+  background: var(--accent);
+  color: var(--bg);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 18px; font-weight: 600;
+}
+.conv-body { flex: 1; min-width: 0; }
+.conv-name { font-size: 16px; color: var(--text); }
+.conv-preview { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* 我 tab 卡片 */
+.profile-card {
+  display: flex; align-items: center; gap: 14px;
+  padding: 20px 16px;
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+}
+.avatar {
+  width: 56px; height: 56px; border-radius: 12px;
+  background: var(--accent); color: var(--bg);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 24px; font-weight: 700;
+}
+.profile-name { font-size: 18px; font-weight: 600; }
+.profile-did { font-size: 12px; color: var(--text-muted); word-break: break-all; margin-top: 4px; }
+
+/* 底部 tab */
+.tabbar {
+  height: var(--tabbar-h);
+  display: flex;
+  padding-bottom: env(safe-area-inset-bottom);
+  background: var(--bg-card);
+  border-top: 1px solid var(--border);
+}
+.tab {
+  flex: 1;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  gap: 2px;
+  border: none; background: transparent;
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+.tab.active { color: var(--accent); }
+.tab-icon { font-size: 20px; }
+
+/* 聊天页 */
+.chat-page {
+  position: fixed; inset: 0;
+  display: flex; flex-direction: column;
+  background: var(--bg);
+  z-index: 10;
+}
+.chat-topbar {
+  height: var(--topbar-h);
+  display: flex; align-items: center;
+  padding: 0 12px; padding-top: env(safe-area-inset-top);
+  background: var(--bg-card);
+  border-bottom: 1px solid var(--border);
+  gap: 8px;
+}
+.chat-messages { flex: 1; overflow-y: auto; padding: 12px; }
+.chat-input-bar {
+  display: flex; gap: 8px; padding: 8px 12px;
+  padding-bottom: calc(8px + env(safe-area-inset-bottom));
+  background: var(--bg-card);
+  border-top: 1px solid var(--border);
+}
+.chat-input-bar input {
+  flex: 1; height: 38px; padding: 0 12px;
+  border: 1px solid var(--border); border-radius: 8px;
+  background: var(--bg-hover); color: var(--text);
+  outline: none;
+}
+.chat-input-bar button {
+  height: 38px; padding: 0 16px;
+  border: none; border-radius: 8px;
+  background: var(--accent); color: var(--bg);
+  font-weight: 600;
+}
+.bubble { max-width: 75%; padding: 8px 12px; border-radius: 10px; margin: 4px 0; word-break: break-word; }
+.bubble.user { margin-left: auto; background: var(--accent); color: var(--bg); }
+.bubble.ai { background: var(--bg-card); color: var(--text); }

package/dist/web/mobile.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+<title>Bolloon 手机端</title>
+<link rel="stylesheet" href="./mobile.css">
+</head>
+<body>
+<div id="app" class="app">
+  <!-- 顶部导航 -->
+  <header class="topbar">
+    <div class="topbar-title" id="topbar-title">微信</div>
+    <div class="topbar-actions">
+      <button class="icon-btn" id="btn-add" title="添加好友">＋</button>
+    </div>
+  </header>
+
+  <!-- 页面容器 (切换 4 个 tab) -->
+  <main class="page-container">
+    <!-- 微信 tab: 会话列表 -->
+    <section class="page" id="page-wechat" data-tab="wechat">
+      <div class="list" id="conversation-list"></div>
+    </section>
+
+    <!-- 通讯录 tab -->
+    <section class="page" id="page-contacts" data-tab="contacts" hidden>
+      <div class="list" id="contacts-list"></div>
+    </section>
+
+    <!-- 发现 tab -->
+    <section class="page" id="page-discover" data-tab="discover" hidden>
+      <div class="list">
+        <div class="list-item" id="item-p2p"><span class="list-icon">🌐</span><span>P2P 好友</span></div>
+        <div class="list-item" id="item-p2p-id"><span class="list-icon">🪪</span><span>我的 P2P ID</span></div>
+      </div>
+      <div class="section-label">MCP 工具 (触控调用)</div>
+      <div class="list" id="mcp-tools"></div>
+      <div class="section-label">A2UI 动态面板 (智能体生成)</div>
+      <div id="a2ui-root"></div>
+    </section>
+
+    <!-- 我 tab -->
+    <section class="page" id="page-me" data-tab="me" hidden>
+      <div class="profile-card" id="profile-card">
+        <div class="avatar" id="me-avatar">?</div>
+        <div class="profile-info">
+          <div class="profile-name" id="me-name">未登录</div>
+          <div class="profile-did" id="me-did"></div>
+        </div>
+      </div>
+      <div class="list">
+        <div class="list-item" id="item-settings"><span class="list-icon">⚙️</span><span>设置</span><span class="list-arrow">›</span></div>
+        <div class="list-item" id="item-wallet"><span class="list-icon">👛</span><span>钱包</span><span class="list-arrow">›</span></div>
+        <div class="list-item" id="item-judgments"><span class="list-icon">🧠</span><span>判断力 API</span><span class="list-arrow">›</span></div>
+        <div class="list-item" id="item-did"><span class="list-icon">🪪</span><span>DID 身份</span><span class="list-arrow">›</span></div>
+        <div class="list-item" id="item-login"><span class="list-icon">🔐</span><span id="login-label">登录</span><span class="list-arrow">›</span></div>
+        <div class="list-item" id="item-logout"><span class="list-icon">🚪</span><span>注销</span></div>
+      </div>
+    </section>
+  </main>
+
+  <!-- 底部 tab -->
+  <nav class="tabbar">
+    <button class="tab active" data-tab="wechat"><span class="tab-icon">💬</span><span>微信</span></button>
+    <button class="tab" data-tab="contacts"><span class="tab-icon">📇</span><span>通讯录</span></button>
+    <button class="tab" data-tab="discover"><span class="tab-icon">🧭</span><span>发现</span></button>
+    <button class="tab" data-tab="me"><span class="tab-icon">🙂</span><span>我</span></button>
+  </nav>
+</div>
+
+<script src="./mobile.js"></script>
+<!-- 2026-08-12: A2UI 渲染器 (智能体生成动态 UI, 挂载 #a2ui-root) -->
+<script src="./a2ui-client.js"></script>
+</body>
+</html>

package/dist/web/mobile.js

@@ -0,0 +1,346 @@
+/**
+ * mobile.js — 手机端 UI 交互 (微信风格, Capacitor webview)
+ * bolloon WebUI 主题配色. 数据来自 bolloon server HTTP API + SSE 流式聊天.
+ * 触控组件: tab 切换 / 列表点击 / 聊天输入 / 设置 / MCP 工具调用.
+ */
+(function () {
+  const $ = (sel) => document.querySelector(sel);
+  const $$ = (sel) => Array.from(document.querySelectorAll(sel));
+
+  const api = {
+    async get(path) {
+      const r = await fetch(path);
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return r.json();
+    },
+    async post(path, body) {
+      const r = await fetch(path, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: body ? JSON.stringify(body) : undefined,
+      });
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      return r.json();
+    },
+  };
+
+  // === 主题 (外观切换, 复用 WebUI 主题变量) ===
+  const THEMES = {
+    dark: { '--bg': '#1a1a18', '--bg-card': '#222220', '--bg-hover': '#2a2a26', '--text': '#d8d8c8', '--text-secondary': '#909088', '--accent': '#c4d640', '--border': '#3a3a36' },
+    light: { '--bg': '#f5f5f0', '--bg-card': '#ffffff', '--bg-hover': '#eeeeea', '--text': '#1a1a18', '--text-secondary': '#606058', '--accent': '#8a9430', '--border': '#d0d0c8' },
+  };
+  function applyTheme(name) {
+    const t = THEMES[name] || THEMES.dark;
+    const root = document.documentElement;
+    Object.entries(t).forEach(([k, v]) => root.style.setProperty(k, v));
+    localStorage.setItem('bolloon_theme', name);
+    const btn = $('#theme-toggle');
+    if (btn) btn.textContent = name === 'dark' ? '🌙 深色' : '☀️ 浅色';
+  }
+
+  // === tab 切换 ===
+  const TITLES = { wechat: '微信', contacts: '通讯录', discover: '发现', me: '我' };
+  function switchTab(tab) {
+    $$('.page').forEach((p) => { p.hidden = p.dataset.tab !== tab; });
+    $$('.tab').forEach((t) => t.classList.toggle('active', t.dataset.tab === tab));
+    $('#topbar-title').textContent = TITLES[tab] || '微信';
+    if (tab === 'discover') loadMcpTools();
+    window.__mobileTouch?.('tab', tab);
+  }
+  $$('.tab').forEach((t) => t.addEventListener('click', () => switchTab(t.dataset.tab)));
+
+  // === 会话列表 ===
+  async function loadConversations() {
+    try {
+      const channels = await api.get('/channels');
+      const list = $('#conversation-list');
+      list.innerHTML = '';
+      if (!Array.isArray(channels) || channels.length === 0) {
+        list.innerHTML = '<div style="padding:20px;text-align:center;color:var(--text-muted)">暂无会话, 点右上角 + 添加</div>';
+        return;
+      }
+      channels.forEach((ch) => {
+        const name = ch.persona?.name || ch.name || ch.agentId || '智能体';
+        const el = document.createElement('div');
+        el.className = 'conv-item';
+        el.innerHTML = `
+          <div class="conv-avatar">${escapeHtml(name.charAt(0))}</div>
+          <div class="conv-body">
+            <div class="conv-name">${escapeHtml(name)}</div>
+            <div class="conv-preview">${escapeHtml(ch.preview || '开始对话')}</div>
+          </div>`;
+        el.addEventListener('click', () => openChat(ch));
+        list.appendChild(el);
+      });
+    } catch (e) {
+      $('#conversation-list').innerHTML = `<div style="padding:20px;color:var(--error)">加载失败: ${escapeHtml(e.message)}</div>`;
+    }
+  }
+
+  // === 通讯录 ===
+  async function loadContacts() {
+    try {
+      let peers = [];
+      try { peers = await api.get('/api/peers'); } catch { peers = []; }
+      const list = $('#contacts-list');
+      list.innerHTML = '';
+      if (!Array.isArray(peers) || peers.length === 0) {
+        list.innerHTML = '<div style="padding:20px;text-align:center;color:var(--text-muted)">暂无好友</div>';
+        return;
+      }
+      peers.forEach((p) => {
+        const name = p.name || p.publicKey?.slice(0, 12) || '好友';
+        const el = document.createElement('div');
+        el.className = 'conv-item';
+        el.innerHTML = `<div class="conv-avatar">${escapeHtml(name.charAt(0))}</div>
+          <div class="conv-body"><div class="conv-name">${escapeHtml(name)}</div></div>`;
+        list.appendChild(el);
+      });
+    } catch (e) { /* 忽略 */ }
+  }
+
+  // === 发现: MCP 工具列表 (MCP 前端支持) ===
+  async function loadMcpTools() {
+    const box = $('#mcp-tools');
+    if (!box) return;
+    box.innerHTML = '<div style="padding:12px 16px;color:var(--text-muted)">加载 MCP 工具...</div>';
+    try {
+      const r = await api.get('/api/mcp/tools').catch(() => null);
+      const tools = r?.tools || r || [];
+      if (!Array.isArray(tools) || tools.length === 0) {
+        box.innerHTML = '<div style="padding:12px 16px;color:var(--text-muted)">暂无可用 MCP 工具</div>';
+        return;
+      }
+      box.innerHTML = '';
+      tools.forEach((t) => {
+        const name = t.name || t.function?.name || '工具';
+        const desc = t.description || t.function?.description || '';
+        const el = document.createElement('div');
+        el.className = 'conv-item';
+        el.innerHTML = `<div class="conv-avatar">🔌</div>
+          <div class="conv-body"><div class="conv-name">${escapeHtml(name)}</div>
+          <div class="conv-preview">${escapeHtml(desc)}</div></div>`;
+        el.addEventListener('click', () => { window.__mobileTouch?.('mcp', name); alert('MCP 工具: ' + name + '\n可在对话中让智能体调用'); });
+        box.appendChild(el);
+      });
+    } catch (e) { box.innerHTML = '<div style="padding:12px 16px;color:var(--text-muted)">MCP 工具加载失败</div>'; }
+  }
+
+  // === 我的页 ===
+  async function loadMe() {
+    try {
+      const s = await api.get('/api/auth/status');
+      $('#me-avatar').textContent = (s.name || 'U').charAt(0);
+      $('#me-name').textContent = s.name || '未登录';
+      $('#me-did').textContent = s.didShort || s.did || '';
+      const hasAccount = (s.accounts && s.accounts.length > 0);
+      $('#login-label').textContent = hasAccount ? '已登录账号' : '登录';
+      $('#settings-did').textContent = 'DID: ' + (s.did || '未生成');
+      $('#settings-login-state').textContent = hasAccount ? '已登录 (' + (s.accounts.map(a => a.provider).join(',')) + ')' : '未登录';
+    } catch (e) { /* 默认 */ }
+  }
+
+  // === 聊天页 (SSE 流式) ===
+  let activeChannel = null;
+  let chatEventSource = null;
+  let streamingBubble = null;
+
+  function openChat(ch) {
+    activeChannel = ch;
+    const page = document.createElement('div');
+    page.className = 'chat-page';
+    page.id = 'chat-page';
+    const name = ch.persona?.name || ch.name || ch.agentId || '智能体';
+    page.innerHTML = `
+      <div class="chat-topbar">
+        <button class="icon-btn" id="chat-back">‹</button>
+        <div style="flex:1;font-weight:600">${escapeHtml(name)}</div>
+      </div>
+      <div class="chat-messages" id="chat-messages"></div>
+      <div class="chat-input-bar">
+        <input id="chat-input" placeholder="输入消息...">
+        <button id="chat-send">发送</button>
+      </div>`;
+    document.body.appendChild(page);
+    $('#chat-back').addEventListener('click', closeChat);
+    $('#chat-send').addEventListener('click', sendChat);
+    $('#chat-input').addEventListener('keydown', (e) => { if (e.key === 'Enter') sendChat(); });
+    loadMessages();
+    openChatSse();
+    window.__mobileTouch?.('chat', ch.id);
+  }
+
+  function closeChat() {
+    if (chatEventSource) { chatEventSource.close(); chatEventSource = null; }
+    const p = $('#chat-page');
+    if (p) p.remove();
+    activeChannel = null;
+    loadConversations();
+  }
+
+  function openChatSse() {
+    if (chatEventSource) chatEventSource.close();
+    if (!activeChannel) return;
+    // 订阅全局事件流, 过滤当前 channel 的 AI 流式回复 (step/token/ai)
+    try {
+      chatEventSource = new EventSource('/events');
+      chatEventSource.onmessage = (e) => {
+        if (!activeChannel || !e.data) return;
+        let msg;
+        try { msg = JSON.parse(e.data); } catch { return; }
+        const box = $('#chat-messages');
+        if (!box) return;
+        // AI 消息 / token 流 → 流式气泡
+        if (msg.type === 'ai' || msg.type === 'token' || msg.role === 'ai') {
+          const content = msg.content || msg.text || '';
+          if (msg.channelId && msg.channelId !== activeChannel.id) return;
+          if (!streamingBubble || !streamingBubble.isConnected) {
+            streamingBubble = document.createElement('div');
+            streamingBubble.className = 'bubble ai';
+            box.appendChild(streamingBubble);
+          }
+          streamingBubble.textContent += content;
+          box.scrollTop = box.scrollHeight;
+        } else if (msg.type === 'done') {
+          streamingBubble = null;
+          setTimeout(loadMessages, 300);
+        }
+      };
+      chatEventSource.onerror = () => { /* SSE 断线静默重连 */ };
+    } catch (e) { /* SSE 不支持则退回轮询 */ }
+  }
+
+  async function loadMessages() {
+    if (!activeChannel) return;
+    const box = $('#chat-messages');
+    try {
+      const data = await api.get(`/sessions/${encodeURIComponent(activeChannel.id)}`);
+      const msgs = data?.messages || [];
+      box.innerHTML = '';
+      msgs.slice(-50).forEach((m) => {
+        const role = (m.role || m.type || '') === 'user' ? 'user' : 'ai';
+        const d = document.createElement('div');
+        d.className = 'bubble ' + role;
+        d.textContent = m.content || '';
+        box.appendChild(d);
+      });
+      box.scrollTop = box.scrollHeight;
+    } catch (e) { box.innerHTML = '<div style="color:var(--text-muted)">暂无历史消息</div>'; }
+  }
+
+  async function sendChat() {
+    const input = $('#chat-input');
+    const text = input.value.trim();
+    if (!text || !activeChannel) return;
+    input.value = '';
+    const box = $('#chat-messages');
+    const userBubble = document.createElement('div');
+    userBubble.className = 'bubble user';
+    userBubble.textContent = text;
+    box.appendChild(userBubble);
+    box.scrollTop = box.scrollHeight;
+    try {
+      await api.post('/message', { text, channelId: activeChannel.id });
+      // AI 回复走 SSE 流式 (openChatSse)
+      setTimeout(() => { if (!streamingBubble) loadMessages(); }, 1500);
+    } catch (e) {
+      const ai = document.createElement('div');
+      ai.className = 'bubble ai';
+      ai.textContent = '发送失败: ' + (e.message || '');
+      box.appendChild(ai);
+    }
+  }
+
+  // === 设置页 (弹层) ===
+  function openSettings() {
+    const page = document.createElement('div');
+    page.className = 'chat-page';
+    page.id = 'settings-page';
+    page.innerHTML = `
+      <div class="chat-topbar">
+        <button class="icon-btn" id="settings-back">‹</button>
+        <div style="flex:1;font-weight:600">设置</div>
+      </div>
+      <div style="padding:12px">
+        <div class="conv-item" id="theme-toggle">🌙 深色</div>
+        <div class="conv-item" id="settings-api"><span class="list-icon">🔧</span><span>API 配置</span><span class="list-arrow">›</span></div>
+        <div class="conv-item" id="settings-wallet"><span class="list-icon">👛</span><span>钱包</span><span class="list-arrow">›</span></div>
+        <div class="conv-item" id="settings-judgments"><span class="list-icon">🧠</span><span>判断力 API</span><span class="list-arrow">›</span></div>
+        <div class="conv-item" id="settings-did">🪪 DID</div>
+        <div class="conv-item" id="settings-login-state">🔐 登录状态</div>
+      </div>`;
+    document.body.appendChild(page);
+    const theme = localStorage.getItem('bolloon_theme') || 'dark';
+    applyTheme(theme);
+    $('#settings-back').addEventListener('click', () => page.remove());
+    $('#theme-toggle').addEventListener('click', () => applyTheme(localStorage.getItem('bolloon_theme') === 'dark' ? 'light' : 'dark'));
+    $('#settings-api').addEventListener('click', () => openUrl('/api-config'));
+    $('#settings-wallet').addEventListener('click', () => alert('钱包管理 (桌面 Web UI 提供)'));
+    $('#settings-judgments').addEventListener('click', () => alert('判断力 API (桌面 Web UI 提供)'));
+    $('#settings-did').addEventListener('click', () => { api.get('/api/auth/status').then((s) => alert('DID: ' + (s.did || '未生成'))); });
+  }
+
+  // === 菜单绑定 ===
+  function bindMenu() {
+    $('#item-settings').addEventListener('click', openSettings);
+    $('#item-wallet').addEventListener('click', () => { alert('钱包管理 (桌面 Web UI 提供)'); });
+    $('#item-judgments').addEventListener('click', () => { alert('判断力 API (桌面 Web UI 提供)'); });
+    $('#item-did').addEventListener('click', () => { api.get('/api/auth/status').then((s) => alert('DID: ' + (s.did || '未生成'))); });
+    $('#item-login').addEventListener('click', () => { openUrl('/api-config'); });
+    $('#item-logout').addEventListener('click', () => { api.post('/api/auth/logout', { provider: 'github' }).then(() => loadMe()); });
+    $('#btn-add').addEventListener('click', () => { alert('添加好友: 在桌面 Web UI 的 P2P 好友中添加'); });
+    $('#item-p2p').addEventListener('click', () => { switchTab('contacts'); });
+    $('#item-p2p-id').addEventListener('click', () => { alert('我的 P2P ID 见桌面 Web UI'); });
+  }
+
+  function openUrl(url) {
+    if (window.Capacitor && window.Capacitor.isNativePlatform?.()) location.href = url;
+    else window.open(url, '_blank');
+  }
+
+  function escapeHtml(s) {
+    return String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+  }
+
+  // === MCP 触控钩子 ===
+  window.__mobileTouch = (type, data) => {
+    // 预留: 触控事件上报/控制
+  };
+
+  // === MCP 驱动前端 UI (2026-08-12): 订阅 /events, 收到 {type:'ui'} 指令执行组件动作 ===
+  function setupUiControl() {
+    try {
+      const es = new EventSource('/events');
+      es.onmessage = (e) => {
+        if (!e.data) return;
+        let msg;
+        try { msg = JSON.parse(e.data); } catch { return; }
+        if (msg.type !== 'ui' || !msg.action) return;
+        const d = msg.data || {};
+        switch (msg.action) {
+          case 'switchTab': if (d.tab && ['wechat', 'contacts', 'discover', 'me'].includes(d.tab)) switchTab(d.tab); break;
+          case 'openSettings': openSettings(); break;
+          case 'openWallet': alert('钱包管理 (桌面 Web UI 提供)'); break;
+          case 'openAddFriend': alert('添加好友: 在桌面 Web UI 的 P2P 好友中添加'); break;
+          case 'showToast': alert(d.message || ''); break;
+          case 'goBack': { const p = $('#chat-page'); if (p) closeChat(); else openSettings(); break; }
+          default: break;
+        }
+        window.__mobileTouch?.('ui', msg.action);
+      };
+      es.onerror = () => { /* SSE 断线静默重连 */ };
+    } catch (e) { /* 忽略 */ }
+  }
+
+  function init() {
+    bindMenu();
+    applyTheme(localStorage.getItem('bolloon_theme') || 'dark');
+    switchTab('wechat');
+    setupUiControl();
+    loadConversations();
+    loadContacts();
+    loadMe();
+  }
+  document.addEventListener('DOMContentLoaded', init);
+  if (document.readyState !== 'loading') init();
+})();

package/dist/web/server.js

@@ -2785,6 +2785,39 @@ ${goalDesc}
             res.status(400).json({ ok: false, severity: 'block', reason: e?.message ?? 'parse error' });
         }
     });
+    // 2026-08-12: MCP 工具列表 (MCP 前端支持 — 手机端/桌面 UI 展示可用 MCP 工具)
+    app.get('/api/mcp/tools', async (_req, res) => {
+        try {
+            const mcp = await import('../pi-ecosystem-mcp/index.js');
+            await mcp.initializeMcpAdapter().catch(() => { });
+            const tools = mcp.listTools().map((t) => ({ name: t.name, description: t.description || '' }));
+            res.json({ tools });
+        }
+        catch (e) {
+            res.status(500).json({ error: e?.message });
+        }
+    });
+    // 2026-08-12: MCP 驱动前端 UI — 把 broadcast 注入 ui-tools, agent 调 UI 工具时广播 {type:'ui'} 给前端 SSE
+    (async () => {
+        try {
+            const { setUiBroadcast, registerUiControlTools } = await import('../pi-ecosystem-mcp/ui-tools.js');
+            setUiBroadcast(broadcast);
+            registerUiControlTools();
+        }
+        catch (e) {
+            console.warn('[ui-tools] UI 广播注入失败 (非致命):', e?.message?.slice(0, 120));
+        }
+    })();
+    // 2026-08-12: A2UI (Agent to UI) — 把 broadcast 注入 a2ui 模块, agent 调 a2ui_* 工具时广播 {type:'a2ui'} 给前端 SSE
+    (async () => {
+        try {
+            const { setA2uiBroadcast } = await import('../pi-ecosystem-a2ui/index.js');
+            setA2uiBroadcast(broadcast);
+        }
+        catch (e) {
+            console.warn('[a2ui] 广播注入失败 (非致命):', e?.message?.slice(0, 120));
+        }
+    })();
     app.get('/api/health', (_req, res) => {
         res.json(healthCheck(getPackageVersion()));
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolloon/bolloon-agent",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "type": "module",
   "description": "P2P AI Document Agent - 全局安装后执行 `bolloon` 启动产品",
   "main": "dist/cli-entry.js",
@@ -55,6 +55,8 @@
     "src/constraint-runtime"
   ],
   "dependencies": {
+    "@a2ui/react": "^0.10.2",
+    "@a2ui/web_core": "^0.10.6",
     "@bolloon/constraint-runtime": "0.1.0",
     "@capacitor/android": "^8.5.0",
     "@capacitor/core": "^8.5.0",