@bolloon/bolloon-agent 0.4.21 → 0.4.23

package/dist/web/mobile.js

@@ -16,6 +16,9 @@
     },
   };
 
+  // 一键入网默认 prompt: 交给智能体去读网关入网说明并执行入网 (人类只点一下)
+  const DEFAULT_JOIN_PROMPT = 'read https://bolloon.cn/bolloon-gateway-join.md';
+
   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' },
@@ -66,7 +69,7 @@
     });
   } catch (e) {}
 
-  const TITLES = { main: '首页', network: '网络', me: '我' };
+  const TITLES = { main: '首页', friends: '好友', network: '网络', me: '我' };
   let currentTab = 'main';
   function switchTab(tab) {
     currentTab = tab;
@@ -75,7 +78,8 @@
     $('#topbar-title').textContent = TITLES[tab] || '会话';
     const cs = $('#btn-create-session'); if (cs) cs.hidden = tab !== 'main';
     const ta = $('#topbar-actions'); if (ta) ta.hidden = tab === 'me';   // 我 页不显示 加号/刷新
-    if (tab === 'network') { loadContacts(); loadMcpTools(); loadApprovals(); loadNetMembers(); loadP2PStatus(); loadAgentServices(); loadX402Info(); }
+    if (tab === 'friends') { loadContacts(); loadP2PStatus(); }
+    if (tab === 'network') { loadAgentControl(); loadApprovals(); loadNetMembers(); loadAgentServices(); loadX402Info(); }
     if (tab === 'main') { loadAgentCovers(); }
     window.__mobileTouch?.('tab', tab);
   }
@@ -131,30 +135,135 @@
     } catch (e) { /* 忽略 */ }
   }
 
-  async function loadMcpTools() {
-    const box = $('#mcp-tools');
+  // 智能体控制 = MCP 控制 + Skills 控制 (不是屏幕触控!)
+  //  - MCP 工具: 真正的工具调用 (gateway_status / join / register …)
+  //  - Skills:   电脑端 ~/.bolloon/skills/ 同步下来的本机技能
+  // 屏幕触控(无障碍) 挪到 设置 → 无障碍服务 (屏幕触控)。
+  function mkOverlayPage(id, title, inner) {
+    const page = document.createElement('div');
+    page.className = 'chat-page';
+    page.id = id;
+    page.style.zIndex = '70';
+    page.innerHTML = `<div class="chat-topbar">
+        <button class="icon-btn" id="${id}-back">←</button>
+        <div style="flex:1;font-weight:600">${escapeHtml(title)}</div>
+      </div>
+      <div id="${id}-body" style="padding:12px;flex:1;min-height:0;overflow:auto">${inner}</div>`;
+    document.body.appendChild(page);
+    page.querySelector(`#${id}-back`).addEventListener('click', () => page.remove());
+    return page;
+  }
+
+  async function loadAgentControl() {
+    const box = $('#agent-control');
     if (!box) return;
-    box.innerHTML = '<div style="padding:12px 16px;color:var(--text-muted)">加载 MCP 工具...</div>';
+    const iconMcp = '<svg class="ico" viewBox="0 0 24 24"><path d="M14.5 4.5a3.5 3.5 0 0 0-4.9 4.2L4 14.3V20h5.7l5.6-5.6a3.5 3.5 0 0 0 4.2-4.9l-2.4 2.4-2.1-2.1z"/></svg>';
+    const iconSkill = '<svg class="ico" viewBox="0 0 24 24"><path d="M5 4h11l3 3v13H5z"/><path d="M9 12h6M9 16h4M9 8h4"/></svg>';
+    let tools = []; let skills = [];
+    try { tools = (await api.get('/api/mcp/tools')) || []; } catch (e) { tools = []; }
+    try { skills = (await api.get('/api/skills')) || []; } catch (e) { skills = []; }
+    const skillSub = skills.length
+      ? skills.slice(0, 3).map((s) => '/' + String(s.name || '')).join('  ')
+      : '尚无本机技能 —— 点开后从电脑端同步';
+    box.innerHTML = `
+      <div class="list-item" id="item-mcp"><span class="list-icon">${iconMcp}</span>
+        <span style="flex:1"><span style="display:block">MCP 工具 · ${tools.length} 个</span>
+        <span class="conv-preview" style="display:block">点开读工具说明并调用（gateway_status / join / register / call）</span></span>
+        <span class="list-arrow">›</span></div>
+      <div class="list-item" id="item-skills"><span class="list-icon">${iconSkill}</span>
+        <span style="flex:1"><span style="display:block">Skills · ${skills.length} 个</span>
+        <span class="conv-preview" style="display:block">${escapeHtml(skillSub)}</span></span>
+        <span class="list-arrow">›</span></div>`;
+    const mcpEl = $('#item-mcp'); if (mcpEl) mcpEl.addEventListener('click', () => void openMcpPage(tools));
+    const skEl = $('#item-skills'); if (skEl) skEl.addEventListener('click', () => void openSkillsPage());
+  }
+
+  async function openMcpPage(toolsIn) {
+    if ($('#mcp-page')) return;
+    const page = mkOverlayPage('mcp-page', 'MCP 工具', '<div style="font-size:12px;color:var(--text-muted)">读取中…</div>');
+    let tools = toolsIn;
+    if (!Array.isArray(tools) || !tools.length) {
+      try { tools = (await api.get('/api/mcp/tools')) || []; } catch (e) { tools = []; }
+    }
+    const body = page.querySelector('#mcp-page-body');
+    if (!tools.length) { body.innerHTML = '<div style="padding:20px;text-align:center;color:var(--text-muted)">没有可用的 MCP 工具</div>'; return; }
+    body.innerHTML = tools.map((t, i) => `<div class="conv-item" data-ti="${i}">
+        <div class="conv-avatar">${escapeHtml(String(t.name || 'M').charAt(0))}</div>
+        <div class="conv-body"><div class="conv-name">${escapeHtml(String(t.name || ''))}</div>
+        <div class="conv-preview">${escapeHtml(String(t.description || ''))}</div></div></div>`).join('')
+      + '<div style="font-size:11px;color:var(--text-muted);margin-top:12px;line-height:1.7">点一下 = 让本机智能体调用该工具（gateway_* 需要先加入 Agent 网络）</div>';
+    body.querySelectorAll('[data-ti]').forEach((el) => el.addEventListener('click', () => void runMcpTool(tools[Number(el.dataset.ti)])));
+  }
+
+  async function runMcpTool(t) {
+    const name = String((t && t.name) || '');
+    if (!name) return;
+    let args = {};
     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>';
+      if (name === 'gateway_join') {
+        const link = prompt('gateway_join 需要网络链接：\norbitdb://… 或 ipns://… 或 https://…/registry', '');
+        if (!link) return;
+        args = { link };
+      } else if (name === 'gateway_register') {
+        const svc = prompt('注册为服务提供者，填一个服务名（例如 手机端助手）：', '');
+        if (!svc) return;
+        let agentId = '';
+        try { const id2 = await api.get('/api/auth/status'); agentId = (id2 && (id2.agentId || id2.did)) || ''; } catch (e) { agentId = ''; }
+        if (!agentId) { alert('还没有身份（我 → 登录），无法注册为服务提供者'); return; }
+        args = { self: { agentId, name: svc, service: { name: svc } } };
+      } else if (name === 'gateway_call') {
+        const svc = prompt('要调用的服务（名称或 agentId）：', '');
+        if (!svc) return;
+        args = { service: svc };
+      }
+      const r = await api.post('/api/mcp/call', { name, args });
+      const ok = r && r.ok !== false;
+      alert(`${name} ${ok ? '✔' : '✘'}\n\n${(r && r.output) || JSON.stringify(r)}`);
+      void loadAgentControl();
+    } catch (e) {
+      alert(`${name} 调用失败：${(e && e.message) || e}`);
+    }
+  }
+
+  async function openSkillsPage() {
+    if ($('#skills-page')) return;
+    const page = mkOverlayPage('skills-page', 'Skills', '<div style="font-size:12px;color:var(--text-muted)">读取中…</div>');
+    const bar = document.createElement('div');
+    bar.style.cssText = 'padding:0 12px 14px';
+    bar.innerHTML = '<button id="skills-sync" style="width:100%;padding:11px;border-radius:10px;border:1px solid var(--border);background:var(--bg-hover);color:var(--accent);font-size:14px">从电脑端同步</button>';
+    page.appendChild(bar);
+    const render = async () => {
+      let skills = []; let err = '';
+      try { skills = (await api.get('/api/skills')) || []; } catch (e) { skills = []; err = (e && e.message) || ''; }
+      const body = page.querySelector('#skills-page-body');
+      if (!body) return;
+      if (!skills.length) {
+        body.innerHTML = `<div style="padding:18px 8px;text-align:center;color:var(--text-muted);line-height:1.8">
+          还没有技能列表<br><span style="font-size:12px">电脑端 ~/.bolloon/skills/ 下的 skills，会在「从电脑端同步」后出现在这里</span>
+          ${err ? `<div style="font-size:11px;margin-top:8px">（读取失败：${escapeHtml(err)}）</div>` : ''}</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"><svg class="ico" viewBox="0 0 24 24"><path d="M9 3.5v4.5M15 3.5v4.5"/><path d="M6.5 8h11v3.2a5.5 5.5 0 0 1-11 0z"/><path d="M12 16.7V20.5"/></svg></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); });
-        box.appendChild(el);
-      });
-    } catch (e) { box.innerHTML = '<div style="padding:12px 16px;color:var(--text-muted)">MCP 工具加载失败</div>'; }
+      body.innerHTML = skills.map((s, i) => `<div class="conv-item" data-sk="${i}">
+          <div class="conv-avatar">${escapeHtml(String(s.name || 'S').charAt(0).toUpperCase())}</div>
+          <div class="conv-body"><div class="conv-name">/${escapeHtml(String(s.name || ''))}</div>
+          <div class="conv-preview">${escapeHtml(String(s.description || '（无说明）').slice(0, 60))}</div></div></div>`).join('')
+        + `<div style="font-size:11px;color:var(--text-muted);margin-top:12px">共 ${skills.length} 个 · 来自电脑端 ~/.bolloon/skills/</div>`;
+      body.querySelectorAll('[data-sk]').forEach((el) => el.addEventListener('click', () => {
+        const s = skills[Number(el.dataset.sk)] || {};
+        alert(`/${s.name || ''}\n\n${s.description || '（无说明）'}`);
+      }));
+    };
+    await render();
+    const btn = page.querySelector('#skills-sync');
+    if (btn) btn.addEventListener('click', async () => {
+      btn.disabled = true; const old = btn.textContent; btn.textContent = '同步中…';
+      try {
+        const r = await api.post('/api/desktop/sync');
+        if (r && r.ok === false) { alert('同步失败：' + (r.error || '未知错误')); }
+        else { alert('同步完成' + (r && r.counts ? '：' + JSON.stringify(r.counts) : '')); }
+      } catch (e) { alert('同步失败：' + ((e && e.message) || e)); }
+      finally { btn.disabled = false; btn.textContent = old; await render(); }
+    });
   }
 
   async function loadApprovals() {
@@ -681,6 +790,155 @@
   let chatEventSource = null;
   let chatStepCancel = null;
   let streamingBubble = null;
+  let chatLoadPromise = Promise.resolve();   // openChat 的首次历史加载 (供一键入网等自动发消息等它完成, 免被清屏抹掉)
+
+  function fmtAgo(ts) {
+    if (!ts) return '';
+    const d = Date.now() - ts;
+    if (d < 60e3) return '刚刚';
+    if (d < 3600e3) return Math.floor(d / 60e3) + ' 分钟前';
+    if (d < 86400e3) return Math.floor(d / 3600e3) + ' 小时前';
+    if (d < 7 * 86400e3) return Math.floor(d / 86400e3) + ' 天前';
+    return new Date(ts).toLocaleDateString();
+  }
+
+  // 左上角「索引」: 最近历史会话 (本机 IndexedDB 里的 sessions, 按更新时间倒序)
+  async function openIndexPanel() {
+    if ($('#index-page')) return;
+    const page = document.createElement('div');
+    page.className = 'chat-page';
+    page.id = 'index-page';
+    page.style.zIndex = '70';
+    page.innerHTML = `
+      <div class="chat-topbar">
+        <button class="icon-btn" id="index-back">←</button>
+        <div style="flex:1;font-weight:600">索引 · 最近会话</div>
+        <button class="icon-btn" id="index-settings" title="设置">⚙</button>
+      </div>
+      <div id="index-body" style="padding:12px;flex:1;min-height:0;overflow:auto">
+        <div style="font-size:12px;color:var(--text-muted)">读取最近会话…</div>
+      </div>`;
+    document.body.appendChild(page);
+    $('#index-back').addEventListener('click', () => page.remove());
+    $('#index-settings').addEventListener('click', () => { page.remove(); openSettings(); });
+
+    let snap = null;
+    try { snap = await api.get('/api/data/snapshot'); } catch (e) { snap = null; }
+    const channels = (snap && snap.channels) || [];
+    const sessions = (snap && snap.sessions) || [];
+    const byId = new Map();
+    channels.forEach((c) => byId.set(c.id, c));
+    const rows = sessions.map((s) => {
+      const msgs = s.messages || [];
+      const last = msgs[msgs.length - 1];
+      return {
+        ch: byId.get(s.channelId) || { id: s.channelId, name: '（会话已删除）' },
+        updatedAt: s.updatedAt || (last && last.ts) || 0,
+        count: msgs.length,
+        lastText: (last && last.content) || '（无消息）',
+      };
+    }).sort((a, b) => b.updatedAt - a.updatedAt);
+
+    const head = `<div style="font-size:12px;color:var(--text-muted);margin:2px 0 10px">本机智能体 ${channels.length} 个 · 有历史会话 ${rows.length} 个</div>`;
+    const list = rows.length
+      ? rows.map((r, i) => `<div class="conv-item" data-si="${i}">
+          <div class="conv-avatar">${escapeHtml(String(r.ch.name || 'A').charAt(0))}</div>
+          <div class="conv-body">
+            <div class="conv-name">${escapeHtml(String(r.ch.name || r.ch.id))}</div>
+            <div class="conv-preview">${escapeHtml(String(r.lastText).slice(0, 40))}</div>
+          </div>
+          <span style="font-size:11px;color:var(--text-muted);text-align:right;flex:0 0 auto">${escapeHtml(fmtAgo(r.updatedAt))}<br>${r.count} 条</span>
+        </div>`).join('')
+      : '<div style="padding:24px;text-align:center;color:var(--text-muted)">还没有历史会话<br><span style="font-size:12px">从下面的 ＋ 新建一个智能体开始</span></div>';
+    const body = $('#index-body');
+    if (body) {
+      body.innerHTML = head + list;
+      body.querySelectorAll('[data-si]').forEach((el) => el.addEventListener('click', () => {
+        const r = rows[Number(el.dataset.si)];
+        page.remove();
+        openChat(r.ch);
+      }));
+    }
+  }
+
+  // 右上角「搜索」: 本机智能体 + 好友 + 全局智能体 (协议发现) 一起搜
+  async function openSearch() {
+    if ($('#search-page')) return;
+    const page = document.createElement('div');
+    page.className = 'chat-page';
+    page.id = 'search-page';
+    page.style.zIndex = '70';
+    page.innerHTML = `
+      <div class="chat-topbar">
+        <button class="icon-btn" id="search-back">←</button>
+        <div style="flex:1;font-weight:600">搜索</div>
+      </div>
+      <div style="padding:12px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0">
+        <input id="search-input" type="search" autocomplete="off" placeholder="搜智能体 / 好友：名称、DID、节点 ID"
+          style="padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-hover);color:var(--text);font-size:14px">
+        <div id="search-hint" style="font-size:12px;color:var(--text-muted)">正在建立索引…</div>
+        <div id="search-results" style="flex:1;overflow:auto;-webkit-overflow-scrolling:touch"></div>
+      </div>`;
+    document.body.appendChild(page);
+    $('#search-back').addEventListener('click', () => page.remove());
+
+    let channels = []; let peers = []; let services = [];
+    try { channels = (await api.get('/channels')) || []; } catch (e) { channels = []; }
+    try { const p = await api.get('/api/peers'); peers = Array.isArray(p) ? p : ((p && p.peers) || []); } catch (e) { peers = []; }
+    try { const d = await api.get('/api/social/discover'); services = (d && d.services) || []; } catch (e) { services = []; }
+
+    const rows = [
+      ...channels.map((c) => ({
+        tag: '本机智能体', name: c.name || c.agentId || c.id, sub: c.id || '',
+        hay: [c.name, c.id, c.agentId, c.did, c.description].filter(Boolean).join(' '),
+        act: () => { page.remove(); openChat(c); },
+      })),
+      ...peers.map((p) => ({
+        tag: '好友', name: p.name || String(p.publicKey || p.id || '好友').slice(0, 12),
+        sub: String(p.publicKey || p.id || p.address || '').slice(0, 28),
+        hay: [p.name, p.publicKey, p.id, p.address, p.did].filter(Boolean).join(' '),
+        act: () => alert(`好友信息\n名称: ${p.name || '(未命名)'}\n节点ID: ${p.publicKey || p.id || '—'}\n地址: ${p.address || '—'}`),
+      })),
+      ...services.map((s) => ({
+        tag: '全局智能体',
+        name: (s.service && s.service.name) || s.name || s.agentId || 'agent',
+        sub: (s.service && s.service.description) || s.description || '',
+        hay: [(s.service && s.service.name), s.serviceName, s.name, s.agentId, s.description, s.did].filter(Boolean).join(' '),
+        act: () => { page.remove(); openTradeCall(s); },
+      })),
+    ];
+    rows.forEach((r) => { r.hay = String(r.hay || '').toLowerCase(); });
+
+    const hint = $('#search-hint');
+    const box = $('#search-results');
+    const render = (q) => {
+      const k = String(q || '').trim().toLowerCase();
+      const hits = rows.filter((r) => !k || r.hay.includes(k) || r.name.toLowerCase().includes(k));
+      if (hint) hint.innerHTML = `本机智能体 ${channels.length} · 好友 ${peers.length} · 全局智能体 ${services.length}` + (k ? ` · 命中 ${hits.length}` : '');
+      if (!box) return;
+      if (!hits.length) {
+        box.innerHTML = `<div style="padding:24px;text-align:center;color:var(--text-muted);font-size:13px">没有匹配「${escapeHtml(String(q))}」的智能体或好友</div>`;
+        return;
+      }
+      let html = '';
+      let lastTag = '';
+      hits.forEach((r, i) => {
+        if (r.tag !== lastTag) { html += `<div class="section-label">${escapeHtml(r.tag)}</div>`; lastTag = r.tag; }
+        html += `<div class="conv-item" data-ri="${i}">
+          <div class="conv-avatar">${escapeHtml(String(r.name || 'A').charAt(0))}</div>
+          <div class="conv-body">
+            <div class="conv-name">${escapeHtml(String(r.name))}</div>
+            <div class="conv-preview">${escapeHtml(String(r.sub).slice(0, 48))}</div>
+          </div>
+        </div>`;
+      });
+      box.innerHTML = html;
+      box.querySelectorAll('[data-ri]').forEach((el) => el.addEventListener('click', () => hits[Number(el.dataset.ri)].act()));
+    };
+    render('');
+    const input = $('#search-input');
+    if (input) { input.addEventListener('input', () => render(input.value)); input.focus(); }
+  }
 
    function openChat(ch) {
      activeChannel = ch;
@@ -710,7 +968,7 @@
        $('#chat-send').addEventListener('click', sendChat);
        $('#chat-input').addEventListener('keydown', (e) => { if (e.key === 'Enter') sendChat(); });
        attachStepListener();
-       loadMessages();
+       chatLoadPromise = loadMessages().catch(() => {});
        openChatSse();
        window.__mobileTouch?.('chat', ch.id);
        }
@@ -1451,9 +1709,10 @@
       <div style="padding:12px">
         <div class="conv-item" id="api-config-item"><span class="list-icon">${ICONS.chip}</span><span>API 配置</span><span class="list-arrow">›</span></div>
         <div class="conv-item" id="theme-toggle"><span class="list-icon" id="theme-icon">${ICONS.themeAuto}</span><span id="theme-text">跟随系统</span></div>
-        <div class="conv-item" id="settings-network"><span class="list-icon">${ICONS.globe}</span><span>网络与同步</span><span class="list-arrow">›</span></div>
+        <div class="conv-item" id="settings-data"><span class="list-icon">${ICONS.chip}</span><span style="flex:1;min-width:0"><span style="display:block">本机数据</span><span class="conv-preview" style="display:block">读取中…</span></span><span class="list-arrow">›</span></div>
         <div class="conv-item" id="settings-desktop"><span class="list-icon">${ICONS.globe}</span><span>电脑端同步</span><span class="list-arrow">›</span></div>
         <div class="conv-item" id="settings-chain"><span class="list-icon">${ICONS.chip}</span><span>链上配置 (RPC/网络)</span><span class="list-arrow">›</span></div>
+        <div class="conv-item" id="settings-accessibility"><span class="list-icon">${ICONS.globe}</span><span>无障碍服务 (屏幕触控)</span><span class="list-arrow">›</span></div>
         <div class="conv-item" id="settings-ipfs"><span class="list-icon">${ICONS.chip}</span><span>IPFS 存储</span><span class="list-arrow">›</span></div>
         <div class="conv-item" id="settings-helia"><span class="list-icon">${ICONS.globe}</span><span>本机 IPFS 节点</span><span class="list-arrow">›</span></div>
         <div class="conv-item" id="settings-selfcard"><span class="list-icon">${ICONS.chip}</span><span id="selfcard-text">显示本机卡片: 开</span></div>
@@ -1467,7 +1726,36 @@
       const next = currentTheme === 'auto' ? 'light' : (currentTheme === 'light' ? 'dark' : 'auto');
       applyTheme(next, true);
     });
-    $('#settings-network').addEventListener('click', () => switchTab('network'));
+    // 无障碍服务: 屏幕触控 (电脑端 phone.tap / phone.swipe) 的前提 — 与 MCP/Skills 控制无关
+    $('#settings-accessibility').addEventListener('click', async () => {
+      const cap = window.Capacitor;
+      const bridge = cap && cap.Plugins && cap.Plugins.RokidBridge;
+      if (!bridge) { alert('仅真机可用：App 内可把屏幕触控能力授权给电脑端'); return; }
+      let st = {};
+      try { st = (await bridge.touchStatus()) || {}; } catch (e) { st = {}; }
+      if (st.ready) { alert('触控已就绪：电脑端可发 phone.tap / phone.swipe 操作这台手机'); return; }
+      try { await bridge.openAccessibilitySettings(); }
+      catch (e) { alert('请手动开启：设置 → 辅助功能 → 已安装的服务 → Bolloon Agent'); }
+    });
+
+    // 本机数据: 直接读 IndexedDB 快照 (智能体/会话/消息都在本机, 重开 App 不会丢)
+    const dataEl = $('#settings-data');
+    if (dataEl) {
+      const subEl = dataEl.querySelector('.conv-preview');
+      void (async () => {
+        try {
+          const snap = await api.get('/api/data/snapshot');
+          const chs = (snap && snap.channels) || [];
+          const ses = (snap && snap.sessions) || [];
+          const msgs = ses.reduce((n, s) => n + ((s.messages || []).length), 0);
+          if (subEl) subEl.textContent = `已保存 ${chs.length} 个智能体 · ${ses.length} 个会话 · ${msgs} 条消息（本机 IndexedDB）`;
+        } catch (e) { if (subEl) subEl.textContent = '读取失败: ' + ((e && e.message) || e); }
+      })();
+      dataEl.addEventListener('click', () => {
+        const sp = $('#settings-page'); if (sp) sp.remove();
+        void openIndexPanel();
+      });
+    }
     $('#settings-desktop').addEventListener('click', openDesktopSync);
     // 本机卡片显示开关 (移除后从这里恢复)
     const drawSelfCardToggle = () => {
@@ -1493,14 +1781,25 @@
   }
 
   // === API 配置 (LLM 供应商) ===
-  const LLM_PROVIDERS = ['deepseek', 'openai', 'anthropic', 'minimax', 'openrouter', '自定义'];
-  const LLM_DEFAULTS = {
-    deepseek: { baseUrl: 'https://api.deepseek.com/v1', model: 'deepseek-chat' },
-    openai: { baseUrl: 'https://api.openai.com/v1', model: 'gpt-4o-mini' },
-    anthropic: { baseUrl: 'https://api.anthropic.com/v1', model: 'claude-3-5-sonnet-latest' },
-    minimax: { baseUrl: 'https://api.minimax.chat/v1', model: 'MiniMax-M2.7' },
-    openrouter: { baseUrl: 'https://openrouter.ai/api/v1', model: 'openai/gpt-4o-mini' },
-  };
+  // 注意: 手机端 RemoteLlm 走 OpenAI 兼容协议 (baseUrl + /chat/completions) —— 新增 provider 必须是
+  // OpenAI 兼容端点 (gemini 用 /v1beta/openai, 智谱 v4 / dashscope compatible-mode 都兼容)。
+  const LLM_PROVIDERS = [
+    { id: 'deepseek', label: 'DeepSeek', baseUrl: 'https://api.deepseek.com/v1', model: 'deepseek-chat' },
+    { id: 'openai', label: 'OpenAI', baseUrl: 'https://api.openai.com/v1', model: 'gpt-4o-mini' },
+    { id: 'anthropic', label: 'Anthropic', baseUrl: 'https://api.anthropic.com/v1', model: 'claude-3-5-sonnet-latest' },
+    { id: 'gemini', label: 'Gemini', baseUrl: 'https://generativelanguage.googleapis.com/v1beta/openai', model: 'gemini-3.5-flash' },
+    { id: 'xai', label: 'Grok', baseUrl: 'https://api.x.ai/v1', model: 'grok-2-latest' },
+    { id: 'qwen', label: '通义千问', baseUrl: 'https://dashscope.aliyuncs.com/compatible-mode/v1', model: 'qwen-plus' },
+    { id: 'zhipu', label: '智谱 GLM', baseUrl: 'https://open.bigmodel.cn/api/paas/v4', model: 'glm-4-plus' },
+    { id: 'moonshot', label: 'Kimi', baseUrl: 'https://api.moonshot.cn/v1', model: 'moonshot-v1-8k' },
+    { id: 'minimax', label: 'MiniMax', baseUrl: 'https://api.minimax.chat/v1', model: 'MiniMax-M2.7' },
+    { id: 'siliconflow', label: '硅基流动', baseUrl: 'https://api.siliconflow.cn/v1', model: 'deepseek-ai/DeepSeek-V3' },
+    { id: 'groq', label: 'Groq', baseUrl: 'https://api.groq.com/openai/v1', model: 'llama-3.3-70b-versatile' },
+    { id: 'openrouter', label: 'OpenRouter', baseUrl: 'https://openrouter.ai/api/v1', model: 'openai/gpt-4o-mini' },
+    { id: 'ollama', label: '本地 Ollama', baseUrl: 'http://localhost:11434/v1', model: 'qwen2.5:7b' },
+    { id: 'custom', label: '自定义', baseUrl: '', model: '' },
+  ];
+  const LLM_BY_ID = LLM_PROVIDERS.reduce((m, p) => (m[p.id] = p, m), {});
   async function openApiConfig() {
     let cfg;
     try { cfg = await api.get('/api/llm-config'); } catch { cfg = null; }
@@ -1516,10 +1815,11 @@
         <div style="flex:1;font-weight:600">API 配置</div>
       </div>
       <div style="padding:12px;display:flex;flex-direction:column;gap:12px">
-        <label style="font-size:13px;color:var(--text-secondary)">供应商</label>
-        <select id="api-provider" style="padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-hover);color:var(--text)">
-          ${LLM_PROVIDERS.map((p) => `<option value="${p}" ${p === provider ? 'selected' : ''}>${p}</option>`).join('')}
-        </select>
+        <label style="font-size:13px;color:var(--text-secondary)">供应商 <span id="api-provider-count" style="opacity:.55"></span></label>
+        <div class="provider-chips" id="api-provider-chips">
+          ${LLM_PROVIDERS.map((p) => `<button type="button" class="provider-chip${p.id === provider ? ' active' : ''}" data-provider="${p.id}">${p.label}</button>`).join('')}
+        </div>
+        <div id="api-hint" style="font-size:12px;color:var(--text-muted)"></div>
         <label style="font-size:13px;color:var(--text-secondary)">Base URL</label>
         <input id="api-baseurl" placeholder="https://api.xxx.com/v1" value="${escapeHtml(pc.baseUrl || '')}" style="padding:10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-hover);color:var(--text)">
         <label style="font-size:13px;color:var(--text-secondary)">API Key</label>
@@ -1530,15 +1830,37 @@
       </div>`;
     document.body.appendChild(page);
     $('#api-config-back').addEventListener('click', () => page.remove());
-    const provSel = $('#api-provider');
-    provSel.addEventListener('change', () => {
-      const p = provSel.value;
-      const d = LLM_DEFAULTS[p];
-      if (d) { $('#api-baseurl').value = d.baseUrl; $('#api-model').value = d.model; }
-      if (p === '自定义') { $('#api-baseurl').value = ''; $('#api-model').value = ''; $('#api-key').value = ''; }
+    // 供应商选择: 芯片式 (原来是一个原生 select, 小屏上难点、也看不出有哪些可选)
+    let picked = LLM_BY_ID[provider] ? provider : 'deepseek';
+    const fillFrom = (id) => {
+      const saved = (cfg.providers && cfg.providers[id]) || {};
+      const d = LLM_BY_ID[id] || {};
+      $('#api-baseurl').value = saved.baseUrl || d.baseUrl || '';
+      $('#api-model').value = saved.model || d.model || '';
+      $('#api-key').value = saved.apiKey || '';
+      const hint = $('#api-hint');
+      if (hint) {
+        hint.textContent = id === 'custom'
+          ? '自定义: 填任意 OpenAI 兼容的 baseUrl (/chat/completions)'
+          : (saved.apiKey ? '该供应商已保存过 key（改完记得再点保存）'
+                          : '填官方文档里的 API key; 保存后本机智能体就走它');
+      }
+    };
+    const paintChips = () => {
+      $$('#api-provider-chips .provider-chip').forEach((c) => c.classList.toggle('active', c.dataset.provider === picked));
+    };
+    const configured = Object.keys(cfg.providers || {}).filter((k) => cfg.providers[k] && cfg.providers[k].apiKey);
+    $('#api-provider-count').textContent = configured.length ? `（已配 ${configured.length} 个: ${configured.join(' / ')}）` : '';
+    $('#api-provider-chips').addEventListener('click', (e) => {
+      const b = e.target.closest && e.target.closest('.provider-chip');
+      if (!b) return;
+      picked = b.dataset.provider;
+      paintChips();
+      fillFrom(picked);
     });
+    fillFrom(picked);
     $('#api-save').addEventListener('click', async () => {
-      const p = provSel.value === '自定义' ? 'custom' : provSel.value;
+      const p = picked;
       const next = (cfg && cfg.providers) ? cfg : { activeProvider: cfg.activeProvider, providers: {}, updatedAt: Date.now() };
       next.activeProvider = p;
       next.providers[p] = Object.assign({}, (next.providers[p] || {}), {
@@ -1734,6 +2056,38 @@
   function showSheet(id) { const s = $(id); if (s) s.hidden = false; }
   function hideSheet(id) { const s = $(id); if (s) s.hidden = true; }
 
+  /**
+   * 一键入网 (全球智能体网络): 把默认 prompt 发给智能体, 由它读网关入网说明并执行入网。
+   * 人类只点一下 — 没有可用会话时先建一个 (与"新建会话"同一条路径)。
+   */
+  async function joinGlobalNetwork() {
+    showToast('正在加入全球智能体网络…');
+    try {
+      let ch = activeChannel;
+      if (!ch) {
+        let channels = [];
+        try { channels = await api.get('/channels'); } catch { channels = []; }
+        ch = (Array.isArray(channels) && channels[0]) || null;
+        if (!ch) {
+          await api.post('/api/channels/create', {});
+          await new Promise((r) => setTimeout(r, 700));
+          channels = await api.get('/channels').catch(() => []);
+          ch = (Array.isArray(channels) && channels[0]) || null;
+        }
+      }
+      if (!ch) { showToast('没有可用会话: 先在电脑端连上你的智能体'); return; }
+      openChat(ch);
+      await chatLoadPromise;   // 等首次历史加载完成再发, 免得用户气泡被清屏抹掉
+      const input = $('#chat-input');
+      if (!input) return;
+      input.value = DEFAULT_JOIN_PROMPT;
+      await sendChat();
+      showToast('入网指令已交给智能体');
+    } catch (e) {
+      showToast('入网失败: ' + ((e && e.message) || e));
+    }
+  }
+
   // 创建智能体: 无输入框, 底部滑入加载 sheet, 完成后滑出
   async function createSession() {
     showSheet('#create-sheet');
@@ -1840,11 +2194,13 @@
       try { await api.post('/api/auth/logout', {}); await loadMe(); } catch (e) { alert('注销失败: ' + (e.message || e)); }
     });
     $('#btn-add').addEventListener('click', addFriend);
+    const bIdx = $('#btn-index'); if (bIdx) bIdx.addEventListener('click', () => void openIndexPanel());
+    const bSearch = $('#btn-search'); if (bSearch) bSearch.addEventListener('click', () => void openSearch());
     const cs = $('#btn-create-session'); if (cs) cs.addEventListener('click', createSession);
     const csScan = $('#choice-scan'); if (csScan) csScan.addEventListener('click', addFriendScan);
     const csMan = $('#choice-manual'); if (csMan) csMan.addEventListener('click', addFriendManual);
     const csCan = $('#choice-cancel'); if (csCan) csCan.addEventListener('click', () => hideSheet('#addfriend-sheet'));
-    $('#item-p2p').addEventListener('click', () => { switchTab('network'); });
+    $('#item-p2p').addEventListener('click', () => { switchTab('friends'); void loadContacts(); });
     const itTrade = $('#item-trade');
     if (itTrade) itTrade.addEventListener('click', async () => {
       await loadAgentServices();
@@ -1855,6 +2211,10 @@
       try { const net = await api.get('/api/network/status'); const p2p = net && net.nodeId; alert('P2P ID (通信ID, ≠ DID):\n' + (p2p || '未连接')); }
       catch (e) { alert('P2P ID: 获取失败'); }
     });
+    // #1 一键入网 (全球智能体网络): 点一下 → 默认 prompt 交给智能体执行
+    const joinGlobalBtn = $('#item-join-global');
+    if (joinGlobalBtn) joinGlobalBtn.addEventListener('click', () => { void joinGlobalNetwork(); });
+
     // #2 加入网络 (点按式): sheet → [附近的电脑/设备] [扫电脑上的二维码] [粘贴链接兜底]
     const joinNetBtn = $('#item-join-net');
     if (joinNetBtn) joinNetBtn.addEventListener('click', () => showSheet('#network-sheet'));
@@ -2323,7 +2683,7 @@
       if (!msg || msg.type !== 'ui' || !msg.action) return;
       const d = msg.data || {};
       switch (msg.action) {
-        case 'switchTab': if (d.tab && ['main', 'network', 'me'].includes(d.tab)) switchTab(d.tab); break;
+        case 'switchTab': if (d.tab && ['main', 'friends', 'network', 'me'].includes(d.tab)) switchTab(d.tab); break;
         case 'openSettings': openSettings(); break;
         case 'showToast': alert(d.message || ''); break;
         case 'goBack': closeCardDetail(); closeChat(); break;
@@ -2409,11 +2769,85 @@
     } catch (e) {}
   }
 
+  // === 手势 (2026-09-14): 滑动切 tab / 点空白关弹窗 / 右滑返回上一层 ===
+  // 优先级: 有浮层 → 右滑 = 返回上一层 (关浮层); 无浮层 → 左右滑 = 依次切 tab
+  function topOverlay() {
+    const all = $$('.crop-modal:not([hidden]), .sheet:not([hidden]), .chat-page:not([hidden]), .card-detail:not([hidden])');
+    if (!all.length) return null;
+    return all
+      .map((el) => ({ el, z: parseFloat(getComputedStyle(el).zIndex) || 0 }))
+      .sort((a, b) => a.z - b.z)
+      .pop().el;
+  }
+  function closeOverlay(el) {
+    if (!el) return false;
+    if (el.classList.contains('sheet')) { el.hidden = true; return true; }
+    if (el.classList.contains('card-detail')) {
+      const b = el.querySelector('#detail-back'); if (b) { b.click(); return true; }
+      el.hidden = true; return true;
+    }
+    if (el.classList.contains('crop-modal')) {
+      const b = el.querySelector('[id$="-cancel"], [id$="-close"], .icon-btn');
+      if (b) { b.click(); return true; }
+      el.hidden = true; return true;
+    }
+    if (el.classList.contains('chat-page')) {
+      const b = el.querySelector('.chat-topbar .icon-btn');   // 各页左上角 ← : 走它自带的清理
+      if (b) { b.click(); return true; }
+      el.remove(); return true;
+    }
+    return false;
+  }
+  function goBack() { return closeOverlay(topOverlay()); }
+  function inHorizontalScroller(node) {
+    for (let n = node; n && n !== document.body && n.nodeType === 1; n = n.parentElement) {
+      if (!n.scrollWidth || n.scrollWidth <= n.clientWidth + 4) continue;
+      const ox = getComputedStyle(n).overflowX;
+      if (ox === 'auto' || ox === 'scroll') return true;
+    }
+    return false;
+  }
+  function setupGestures() {
+    const TAB_ORDER = ['main', 'friends', 'network', 'me'];
+    let sx = 0, sy = 0, st = 0, active = false, startTarget = null;
+    document.addEventListener('touchstart', (e) => {
+      if (e.touches.length !== 1) { active = false; return; }
+      sx = e.touches[0].clientX; sy = e.touches[0].clientY;
+      st = Date.now(); active = true; startTarget = e.target;
+    }, { passive: true });
+    document.addEventListener('touchend', (e) => {
+      if (!active) return;
+      active = false;
+      const t = e.changedTouches[0];
+      const dx = t.clientX - sx, dy = t.clientY - sy;
+      if (Date.now() - st > 900) return;                                  // 慢拖不算滑
+      if (Math.abs(dx) < 60 || Math.abs(dx) < Math.abs(dy) * 1.4) return;  // 不够横向
+      if (inHorizontalScroller(startTarget)) return;                       // 横向列表/卡片轨道里不抢手势
+      const ov = topOverlay();
+      if (ov) {
+        if (dx > 0) closeOverlay(ov);           // 浮层内右滑 = 返回上一层 (输入框选中文本时不触发: dx 门槛已过滤)
+        return;
+      }
+      const i = TAB_ORDER.indexOf(currentTab);
+      if (dx < 0) { if (i + 1 < TAB_ORDER.length) switchTab(TAB_ORDER[i + 1]); }
+      else { if (i > 0) switchTab(TAB_ORDER[i - 1]); }
+    }, { passive: true });
+
+    // 点空白关弹窗: 点 sheet 的暗背景 (非 .sheet-inner 内容) 即关
+    document.addEventListener('click', (e) => {
+      const t = e.target;
+      if (!t || !t.closest) return;
+      const sheet = t.closest('.sheet');
+      if (sheet && !sheet.hasAttribute('hidden') && !t.closest('.sheet-inner')) sheet.hidden = true;
+    });
+  }
+
   function init() {
     bindMenu();
     applyTheme(resolveThemePref(), false);
     switchTab('main');
     setupUiControl();
+    setupGestures();
     installDeepLinkListeners();
     loadAgentCovers();
     loadMe();