@jesonliu/lark-claudecode-bridge 1.4.3 → 2.0.0

package/assets/web/js/pages/mcp.js

@@ -1,7 +1,8 @@
-// ============ MCP 管理页（#12）============
+// ============ MCP 管理 ============
 // 后端：GET /api/mcp · POST /api/mcp/action（add/update/remove）· POST /api/mcp/check（状态探测）
 // 四来源：bridge 自管（mcp/servers.json，页面管理 + 注入生效）/ 用户级·本机（~/.claude.json，展示+可删）/
-// 项目级（工作区 .mcp.json，只读）/ 已装插件内（<plugin-installPath>/.mcp.json，只读；未启用时标「（未启用）」）。
+// 项目级（工作区 .mcp.json，只读）/ 已装插件内（只读；未启用时标「（未启用）」）。
+// 搜索只匹配「名称」列；过滤只切换行显隐不重建 DOM（兼容中文输入法组合输入）。
 import { $, esc, toast, api } from '../core.js';
 import { openDrawer, closeDrawer, confirmDialog } from '../ui.js';
 
@@ -15,33 +16,45 @@ const sourceTag = (s) => {
   if (s.source === 'plugin') return `插件 · ${esc(s.pluginName || '?')}${s.pluginEnabled ? '' : '（未启用）'}`;
   return SOURCE_TAG[s.source] || s.source;
 };
+const sourceTagClass = (s) => (s.source === 'bridge' ? 'info' : s.source === 'plugin' ? 'off' : 'ghost');
 /** 来源是否可删（project / plugin 只读） */
 const isDeletable = (s) => s.source !== 'project' && s.source !== 'plugin';
 
 function renderMcp(el) {
   el.innerHTML = `
-  <div class="card">
-    <h3>MCP Servers</h3>
-    <div class="desc">stdio 走 command + args（本地进程），http/sse 走 url（远程服务）。页面添加的配置存 bridge 自管目录（见下方路径），运行中的任务即时生效；本机 ~/.claude.json 与工作区 .mcp.json 为只读来源（前者可删）；已装插件内 .mcp.json 或 plugin.json 内 mcpServers 字段只读展示。</div>
-    <div class="list-toolbar">
-      <button class="btn" id="mcpRefresh">刷新</button>
-      <button class="btn primary" id="mcpAdd">+ 添加 MCP</button>
+  <div class="panel">
+    <header class="panel-head"><h3>MCP Servers</h3>
+      <div class="panel-actions">
+        <input type="search" id="mcpSearch" placeholder="过滤：名称…" style="width:190px;padding:4px 10px;font-size:12.5px">
+        <button class="btn sm" id="mcpRefresh">刷新</button>
+        <button class="btn primary sm" id="mcpAdd">＋ 添加 MCP</button>
+      </div></header>
+    <div class="panel-body">
+      <table><thead><tr>
+        <th style="width:150px">名字</th><th>类型 / 连接</th><th style="width:150px">来源</th><th style="width:150px">状态 <span class="tip" data-tip="点击状态格检测该 server">ⓘ</span></th><th style="width:130px">操作</th>
+      </tr></thead>
+        <tbody id="mcpBody"><tr><td colspan="5" class="hint">加载中…</td></tr></tbody>
+      </table>
+      <div class="mini-note" id="mcpBridgePath" style="margin-top:10px"></div>
     </div>
-    <input type="search" class="list-search" id="mcpSearch" placeholder="按名字 / 来源 / 类型 / URL 过滤…">
-    <table><thead><tr>
-      <th style="width:150px">名字</th><th>类型 / 连接</th><th style="width:130px">来源</th><th style="width:130px">状态</th><th style="width:130px"></th>
-    </tr></thead>
-      <tbody id="mcpBody"><tr><td colspan="5" class="desc">加载中…</td></tr></tbody>
-    </table>
-    <div class="desc" id="mcpBridgePath" style="margin-top:10px"></div>
+    <footer class="panel-foot">stdio 走 command + args（本地进程），http/sse 走 url（远程服务）；页面添加落 bridge 自管目录、任务级热生效；本机 / 项目 / 插件来源只读（本机可删）。</footer>
   </div>`;
   $('#mcpRefresh').onclick = () => void loadMcp();
   $('#mcpAdd').onclick = addMcp;
-  $('#mcpSearch').oninput = filterMcpRows;
+  bindSearch();
   void loadMcp();
 }
 
-/** 搜索过滤：遍历 tr.dataset.searchText 切换 hidden */
+/** 搜索过滤：只匹配名称列；只切换 tr 显隐不重建 DOM；组合输入（中文 IME）期间暂停 */
+function bindSearch() {
+  const inp = $('#mcpSearch');
+  let composing = false;
+  inp.addEventListener('compositionstart', () => { composing = true; });
+  inp.addEventListener('compositionend', () => { composing = false; filterMcpRows(); });
+  inp.oninput = () => { if (!composing) filterMcpRows(); };
+}
+
+/** 搜索过滤：遍历 tr.dataset.searchText 切换 hidden（关键词只命中名称） */
 function filterMcpRows() {
   const q = ($('#mcpSearch').value || '').trim().toLowerCase();
   const body = $('#mcpBody');
@@ -63,7 +76,7 @@ async function loadMcp() {
   try {
     data = await api('GET', '/api/mcp');
   } catch (e) {
-    body.innerHTML = `<tr><td colspan="5" class="desc">加载失败：${esc(e.message)}</td></tr>`;
+    body.innerHTML = `<tr><td colspan="5" class="hint">加载失败：${esc(e.message)}</td></tr>`;
     return;
   }
   const bp = $('#mcpBridgePath');
@@ -76,25 +89,26 @@ async function loadMcp() {
   }
   const servers = data.servers || [];
   if (servers.length === 0) {
-    body.innerHTML = `<tr class="empty-row"><td colspan="5" class="desc">暂无 MCP server。可点「+ 添加 MCP」或在终端用 claude mcp add 添加（本机用户级会出现在此列表）。</td></tr>`;
+    body.innerHTML = `<tr class="empty-row"><td colspan="5" class="empty">暂无 MCP server<br><span class="mini-note">可点右上「＋ 添加 MCP」，或在终端用 claude mcp add 添加（本机用户级会出现在此列表）。</span></td></tr>`;
     return;
   }
   body.innerHTML = '';
   for (const s of servers) {
+    // 类型标签分色：stdio=本地进程（蓝）· http/sse=远程服务（橙）
     const conn = s.config.type === 'http' || s.config.type === 'sse'
-      ? `${esc(String(s.config.type))} · ${esc(String(s.config.url ?? ''))}`
-      : `${esc(String(s.config.type ?? 'stdio'))} · ${esc(String(s.config.command ?? ''))}${s.config.args ? ' ' + esc(JSON.stringify(s.config.args)) : ''}`;
-    const tag = sourceTag(s);
+      ? `<span class="tag warn">${esc(String(s.config.type))}</span> <span class="mono" style="font-size:11.5px">${esc(String(s.config.url ?? ''))}</span>`
+      : `<span class="tag info">${esc(String(s.config.type ?? 'stdio'))}</span> <span class="mono" style="font-size:11.5px">${esc(String(s.config.command ?? ''))}${s.config.args ? ' ' + esc(JSON.stringify(s.config.args)) : ''}</span>`;
     const tr = document.createElement('tr');
-    tr.dataset.searchText = `${s.name} ${sourceTag(s)} ${conn} ${s.config.url ?? ''} ${s.config.command ?? ''}`.toLowerCase();
+    // 搜索只匹配名称列
+    tr.dataset.searchText = String(s.name).toLowerCase();
     tr.innerHTML = `
-      <td><strong>${esc(s.name)}</strong></td>
+      <td><b>${esc(s.name)}</b></td>
       <td>${conn}</td>
-      <td><span class="chip">${tag}</span></td>
-      <td class="mcp-status" data-status-for="${esc(s.name)}"><span class="desc">未检测</span></td>
+      <td><span class="tag ${sourceTagClass(s)}">${sourceTag(s)}</span></td>
+      <td class="mcp-status" data-status-for="${esc(s.name)}"><span class="mut">未检测</span></td>
       <td class="ops">
         <button class="btn sm" data-view="${esc(s.name)}">查看</button>
-        ${isDeletable(s) ? `<button class="btn sm danger" data-del="${esc(s.name)}">删除</button>` : '<span class="desc">只读</span>'}
+        ${isDeletable(s) ? `<button class="btn sm danger" data-del="${esc(s.name)}">删除</button>` : '<span class="dim" style="font-size:11.5px">只读</span>'}
       </td>`;
     tr.querySelector('[data-view]').onclick = () => viewMcp(s);
     const delBtn = tr.querySelector('[data-del]');
@@ -111,7 +125,7 @@ async function loadMcp() {
 }
 
 async function checkMcp(s, cell) {
-  cell.innerHTML = '<span class="desc">检测中…</span>';
+  cell.innerHTML = '<span class="mut">检测中…</span>';
   try {
     const r = await api('POST', '/api/mcp/check', { name: s.name, source: s.source, workspaceName: s.workspaceName });
     const map = {
@@ -119,7 +133,7 @@ async function checkMcp(s, cell) {
       failed: `<span style="color:var(--err-tx)">✘ 异常</span>`,
       unreachable: `<span style="color:var(--warn-tx)">⚠ 不可达</span>`,
     };
-    cell.innerHTML = `${map[r.status] || esc(r.status)}<div class="desc" style="font-size:11px;white-space:normal">${esc(r.detail || '')}</div>`;
+    cell.innerHTML = `${map[r.status] || esc(r.status)}<div class="mini-note" style="white-space:normal">${esc(r.detail || '')}</div>`;
   } catch (e) {
     cell.innerHTML = `<span style="color:var(--err-tx)">检测失败</span>`;
     toast(e.message, true);
@@ -147,30 +161,30 @@ function viewMcp(s) {
       const missing = (s.missingEnv || []).includes(k) || ((s.resolvedEnv || {})[k] || '').includes('${');
       const raw = String((s.config.env || {})[k] ?? '');
       const cur = (s.resolvedEnv || {})[k] ?? raw;
-      return `<tr><td><code>${esc(k)}</code></td><td><code class="desc">${esc(raw)}</code></td>
+      return `<tr><td><code>${esc(k)}</code></td><td><code>${esc(raw)}</code></td>
         <td>${missing ? `<span style="color:var(--err-tx)">未设置（${esc(cur)}）</span>` : `<code>${esc(cur)}</code>`}</td></tr>`;
     }).join('')
-    : `<tr><td colspan="3" class="desc">（无 env 配置）</td></tr>`;
+    : `<tr><td colspan="3" class="mut">（无 env 配置）</td></tr>`;
   const onlyRead = !isDeletable(s);
   const editable = s.source === 'bridge'; // 后端 op:update 只写 bridge servers.json；machine-user 只能删
   openDrawer({
     title: `MCP · ${s.name}`,
     bodyHtml: `
-      <div class="hint" style="margin:0 0 8px">来源：${sourceTag(s)} · 配置文件：<code class="desc">${esc(s.path)}</code></div>
-      ${onlyRead ? `<div class="hint" style="margin:0 0 8px;color:var(--warn-tx)">只读来源——此 MCP 由 ${s.source === 'plugin' ? '插件' : '项目'}自带，编辑请前往 ${s.source === 'plugin' ? '插件目录' : '对应工作区目录'}手动修改。</div>` : ''}
-      ${!editable && !onlyRead ? `<div class="hint" style="margin:0 0 8px;color:var(--warn-tx)">用户级·本机来源不支持页面编辑（可删除）；如需修改请在 ~/.claude.json 手动改，或删除后到本页重新添加。</div>` : ''}
+      <div class="mini-note" style="margin:0 0 8px">来源：${sourceTag(s)} · 配置文件：<code>${esc(s.path)}</code></div>
+      ${onlyRead ? `<div class="banner warn" style="margin:0 0 8px"><span>只读来源——此 MCP 由 ${s.source === 'plugin' ? '插件' : '项目'}自带，编辑请前往 ${s.source === 'plugin' ? '插件目录' : '对应工作区目录'}手动修改。</span></div>` : ''}
+      ${!editable && !onlyRead ? `<div class="banner warn" style="margin:0 0 8px"><span>用户级·本机来源不支持页面编辑（可删除）；如需修改请在 ~/.claude.json 手动改，或删除后到本页重新添加。</span></div>` : ''}
       <div data-pane="view">
-        <label>配置（JSON 原文）</label>
+        <label class="fld">配置（JSON 原文）</label>
         <textarea readonly rows="10" style="min-height:140px">${esc(JSON.stringify(s.config, null, 2))}</textarea>
       </div>
       <div data-pane="edit" style="display:none">
-        <label>配置（JSON，可编辑——env 也在其中改）</label>
+        <label class="fld">配置（JSON，可编辑——env 也在其中改）</label>
         <textarea id="emJson" rows="12" style="min-height:180px">${esc(JSON.stringify(s.config, null, 2))}</textarea>
         <div class="hint" style="margin-top:6px">保存后立即对新任务生效（bridge 自管 servers.json 每任务现读）。</div>
       </div>
-      <label>环境变量（引用值 → 当前值；当前值已合并 飞书应用 env › Claude 认证 env › settings.json env › 系统环境，支持 \${VAR:-默认值}）</label>
+      <label class="fld" style="margin-top:12px">环境变量 <span class="tip" data-tip="当前值已合并：飞书应用 env › Claude 认证 env › settings.json env › 系统环境，支持 \${VAR:-默认值}">ⓘ</span></label>
       <table><thead><tr><th style="width:130px">变量</th><th>配置值</th><th>当前值</th></tr></thead><tbody>${envRows}</tbody></table>`,
-    footHtml: `${editable ? '<button class="btn" data-act="edit">编辑</button><button class="btn primary" data-act="save" style="display:none">保存</button>' : ''}<button class="btn" data-act="close">关闭</button>`,
+    footHtml: `${editable ? '<button class="btn" data-act="edit">编辑</button><button class="btn primary" data-act="save" style="display:none">保存</button>' : ''}<span class="sp"></span><button class="btn" data-act="close">关闭</button>`,
     onMount({ body, foot }) {
       foot.querySelector('[data-act="close"]').onclick = () => closeDrawer();
       const editBtn = foot.querySelector('[data-act="edit"]');
@@ -208,17 +222,17 @@ function addMcp() {
         <button data-tab="json">JSON 配置</button>
       </div>
       <div data-panel="cmd">
-        <label>粘贴 claude mcp add 命令（自动解析 command / args / env / header / url）</label>
+        <label class="fld">粘贴 claude mcp add 命令（自动解析 command / args / env / header / url）</label>
         <textarea id="amCmd" rows="4" placeholder='claude mcp add my-mcp -e API_KEY=xxx -- npx -y @scope/mcp-server&#10;claude mcp add my-mcp -t http -H "Authorization: Bearer xxx" https://example.com/mcp&#10;claude mcp add-json my-mcp {"type":"http","url":"https://…"}'></textarea>
-        <div class="hint" style="margin-top:8px">名字取命令第 4 个参数；scope（-s）忽略——统一存 bridge 目录。</div>
+        <div class="mini-note" style="margin-top:8px">名字取命令第 4 个参数；scope（-s）忽略——统一存 bridge 目录。</div>
       </div>
       <div data-panel="json" style="display:none">
-        <label>名字</label>
+        <label class="fld">名字</label>
         <input type="text" id="amName" placeholder="my-mcp">
-        <label>配置 JSON</label>
+        <label class="fld">配置 JSON</label>
         <textarea id="amJson" rows="6" placeholder='stdio：{"type":"stdio","command":"npx","args":["-y","mcp-server-foo"],"env":{"KEY":"val"}}&#10;http：{"type":"http","url":"https://example.com/mcp"}'></textarea>
       </div>`,
-    footHtml: `<button class="btn" data-act="cancel">取消</button><button class="btn primary" data-act="save">添加</button>`,
+    footHtml: `<span class="sp"></span><button class="btn" data-act="cancel">取消</button><button class="btn primary" data-act="save">添加</button>`,
     onMount({ body, foot }) {
       body.querySelectorAll('.subtabs [data-tab]').forEach((b) => {
         b.onclick = () => {
@@ -260,6 +274,8 @@ function addMcp() {
 export const page = {
   id: 'mcp',
   title: 'MCP',
+  desc: '四个来源的 MCP server 聚合；bridge 来源页面可管理，任务级热生效',
+  legend: false,
   icon: '<circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4M2 12h4m12 0h4M5 5l2.8 2.8m8.4 8.4L19 19M19 5l-2.8 2.8M7.8 16.2L5 19"/>',
   render: renderMcp,
 };

package/assets/web/js/pages/memory.js

@@ -9,7 +9,7 @@
 // 配置读写走标准 doc 管道（saveDoc → PUT /api/config，secret 自动回填）；测试连接走
 // /api/memory/test-connection（表单现值，不落盘）；安装/启停走 /api/memory/install|start|stop。
 import { S, $, esc, api, toast, saveDoc, hooks, refresh } from '../core.js';
-import { confirmDialog } from '../ui.js';
+import { confirmDialog, openModal, closeModal } from '../ui.js';
 
 /** 服务商预设（§6.8 填表助手：只预填已知值，全部可见可改）。预设只填主块（vlm）；
  *  向量块留空沿用主块——跨厂商组合时单独填向量端点/Key（P2 双端点拆分语义） */
@@ -532,7 +532,7 @@ function renderInstalled(el, { st, m, model, inst, state, meta, remoteConfigured
     infoCell('server', '运行方式', m.mode === 'embedded'
       ? `LCB 受管${inst.managedRunning ? '' : ' <span class="hint">（未运行）</span>'}`
       : `外部自管 <span class="hint">非 LCB 拉起</span>`),
-    ...(inst.managedSince ? [infoCell('clock', '运行时间', esc(fmtSince(inst.managedSince)))] : []),
+    // 运行时间不单独占格：上面「启动自举」已带（主人反馈 #2）
     // 随 LCB 启动的自动拉起结果：成功只作留痕，失败把「手动开启指引」摆到状态区
     // （自举失败不阻断 LCB，用户必须能从页面一眼看到该去哪手动起）
     ...(inst.autoStart ? [infoCell('clock', '启动自举', inst.autoStart.ready
@@ -732,49 +732,39 @@ function userRowHtml(u) {
 function studioGuideCardHtml(rk, endpoint) {
   const srcLabel = rk?.source === 'config' ? 'config.yaml 的 memory.api_key'
     : rk?.source === 'ov-conf' ? '受管 ov.conf 的 server.root_api_key' : '';
-  const state = rk?.configured
-    ? `<span style="color:var(--ok-tx);font-weight:600">✓ 已配置</span> <span class="hint">来源：${esc(srcLabel)}</span>`
-    : '<span style="color:var(--danger);font-weight:600">✗ 未配置</span> <span class="hint">请到「服务与配置」点「检查修复」重新生成</span>';
-  const login = (title, badge, key, body, btn) => `
-    <div style="flex:1;min-width:280px;border:1px solid var(--border);border-radius:10px;padding:12px 14px">
-      <div style="font-size:13px;font-weight:700">${esc(title)} ${esc(badge)}</div>
-      <div class="hint" style="margin-top:6px;line-height:1.8">${body}</div>
-      <div style="margin-top:8px">${btn}</div>
-    </div>`;
-  return `<div class="card" style="margin-top:12px;border-left:3px solid var(--accent)">
+  const stateHtml = rk?.configured
+    ? `<span class="tag ok">✓ 已配置</span> <span class="hint">来源：${esc(srcLabel)}；查看行为会留痕</span>`
+    : '<span class="tag err">✗ 未配置</span> <span class="hint">请到「服务与配置」点「检查修复」重新生成</span>';
+  // 精简（主人反馈）：hover 悬浮塞不下格式化长文 → ⓘ 改为「点击弹说明弹窗」，悬浮只留一句话
+  return `<div class="card" style="margin-top:12px">
     <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
       <b style="font-size:13.5px">🌐 连接 OpenViking Studio（${esc((endpoint || DEFAULT_ENDPOINT).replace(/\/+$/, ''))}/studio）</b>
+      <button class="btn sm ghost" id="memGuideInfo" title="Root 密钥与用户密钥的区别、如何进入某个机器人的记忆空间">ⓘ 连接说明</button>
       <span style="flex:1"></span>
       <button class="btn sm" id="memCopyRoot" title="复制 Root 密钥到剪贴板（查看行为留痕）" ${rk?.configured ? '' : 'disabled style="opacity:.5;cursor:not-allowed"'}>⧉ 复制 Root 密钥</button>
       <button class="btn sm primary" id="memOpenStudio" title="复制 Root 密钥 → 打开 Studio 新标签 → 在「Root 或账号管理员 API 密钥」框 Ctrl+V 即可进入">打开 Studio 并复制</button>
     </div>
-    <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:10px">
-      ${login(
-        '登录方式一 · 管理员', 'Root 密钥',
-        'root',
-        `用于<b>管理</b>：列出用户、复制/重置他人密钥、账号设置。<br>
-         用它登录后，Studio 里的身份<b>固定显示为 <code>default</code>，且无法切换</b>——
-         这是 Studio 的设计（管理员凭证不含具体用户身份），<b>不代表机器人记忆没隔离</b>。<br>
-         <span class="hint">密钥即受管 ov.conf 的 <code>server.root_api_key</code>；查看行为会留痕。</span>`,
-        `<button class="btn sm" data-root-copy title="复制 Root 密钥（查看行为留痕）" ${rk?.configured ? '' : 'disabled style="opacity:.5;cursor:not-allowed"'}>⧉ 复制 Root 密钥</button>`,
-      )}
-      ${login(
-        '登录方式二 · 查看某个机器人的记忆', '该机器人的用户密钥',
-        'user',
-        `用于<b>浏览某一个机器人（或网页用户）自己的记忆空间</b>。<br>
-         在下方用户列表点那一行的「打开记忆空间」，密钥自动进剪贴板并跳转，粘贴即以<b>该机器人身份</b>进入。<br>
-         <span class="hint">每个机器人一把独立密钥、一机一目录，数据物理隔离，互不可见。</span>`,
-        '<span class="hint">↓ 在下方「机器人」分组里点对应那一行的「打开记忆空间」</span>',
-      )}
-    </div>
-    <div class="hint" style="margin-top:10px;padding:8px 12px;background:var(--warn-bg);color:var(--warn-tx);border-radius:10px;line-height:1.7">
-      ⚠️ 两种登录态<b>不能互相切换</b>：想看 A 机器人的记忆就用 A 的密钥进，看 B 就用 B 的密钥进。
-      用 Root 进去只会看到管理员（default）视角，看不到各机器人的记忆。<br>
-      ⚠️ <b>更不要填</b>「模型配置」里那个模型厂商 API Key（智谱等）——那是调用模型用的，与 OpenViking 鉴权无关。
-    </div>
-    <div class="hint" style="margin-top:8px;line-height:1.7">Root 密钥状态：${state}</div>
-    <div id="memRootStatus" class="hint" style="margin-top:4px;line-height:1.7"></div>
-  </div>`;
+    <div id="memRootStatus" class="hint" style="margin-top:6px;line-height:1.7"></div>
+  </div>
+  <template id="memGuideState">${stateHtml}</template>`;
+}
+
+/** 「连接说明」弹窗（点击 ⓘ 打开；富文本排版，替代塞不下也看不清的 hover 长提示） */
+function openStudioGuideModal() {
+  const stateHtml = document.getElementById('memGuideState')?.innerHTML || '';
+  openModal({
+    title: '连接 OpenViking Studio 说明',
+    width: 'min(560px,92vw)',
+    bodyHtml: `
+      <div class="sub-title">方式一 · 管理员（Root 密钥）</div>
+      <div class="desc" style="margin:0 0 4px">用于<b>管理</b>：列出用户、复制/重置他人密钥、账号设置。用它登录后，Studio 里的身份<b>固定显示为 <code>default</code> 且无法切换</b>——这是 Studio 的设计（管理员凭证不含具体用户身份），<b>不代表机器人记忆没隔离</b>。</div>
+      <div class="sub-title" style="margin-top:14px">方式二 · 查看某个机器人的记忆（该机器人的用户密钥）</div>
+      <div class="desc" style="margin:0 0 4px">在下方用户列表点那一行<b>「打开记忆空间」</b>：密钥自动进剪贴板并打开该身份的记忆页，粘贴一次即可进入。每个机器人一把独立密钥、一机一目录，数据物理隔离。</div>
+      <div class="banner warn" style="margin-top:12px"><span>⚠️ 两种登录态<b>不能互相切换</b>：看 A 机器人就用 A 的密钥进。<br>⚠️ <b>不要</b>把「模型配置」里的模型厂商 API Key（智谱等）填进 Studio——那是调模型用的，与鉴权无关，填了必 401。</span></div>
+      <div class="hint" style="margin-top:12px">Root 密钥状态：${stateHtml}</div>`,
+    footHtml: `<span class="sp"></span><button class="btn primary" id="mgOk">知道了</button>`,
+  });
+  $('#mgOk').onclick = closeModal;
 }
 
 /** Tab2 主渲染：一键初始化 + Studio 接入指引 + 用户列表（网页管理 / 机器人分组）+ 粒度向导 */
@@ -826,9 +816,9 @@ function renderUsersTab(el, { st, m }) {
         ${u.authInitNeeded ? '<button class="btn sm primary" id="memUsersInit">⚡ 一键初始化</button>' : '<button class="btn sm" id="memUsersInit">⚡ 一键初始化</button>'}
         <button class="btn sm" id="memUsersRefresh">↻ 刷新</button>
       </div>
-      <div class="desc" style="margin-top:6px">api_key 模式：网页与每个机器人各持一把独立密钥（密钥落盘已加密、页面只脱敏显示，查看行为留痕审计）。「打开记忆空间」= 密钥进剪贴板 + 自动新标签打开文件系统页，粘贴一次即可连接。</div>
-      <div class="hint" style="margin-top:6px">ⓘ 1933 网页右上角的身份切换显示的是技术 ID（OpenViking 暂不支持显示名）——哪个 ID 对应哪台机器人，以本页对照为准。</div>
-      ${u.authInitNeeded ? `<div class="hint" style="margin-top:10px;padding:9px 14px;background:var(--warn-bg);color:var(--warn-tx);border-radius:10px">🔑 待初始化鉴权：网页端用户（web）尚未创建——浏览器打开记忆空间会 401。点右上「⚡ 一键初始化」自动创建网页 + 各机器人用户并签发密钥。</div>` : ''}
+      <div class="desc" style="margin-top:6px">网页与每个机器人各持一把独立密钥，页面脱敏显示、查看留痕。「打开记忆空间」= 密钥进剪贴板并自动打开该身份的记忆页。
+        <span class="tip" style="vertical-align:-1px" data-tip="密钥落盘已加密；1933 网页右上角身份显示的是技术 ID（OpenViking 暂不支持显示名），哪个 ID 对应哪台机器人以本页对照为准。">ⓘ</span></div>
+      ${u.authInitNeeded ? `<div class="hint" style="margin-top:10px;padding:9px 14px;background:var(--warn-bg);color:var(--warn-tx);border-radius:10px">🔑 待初始化鉴权：网页端用户尚未创建，浏览器打开记忆空间会 401——点右上「⚡ 一键初始化」自动创建并签发密钥。</div>` : ''}
       ${u.users.length === 0 && !u.authInitNeeded ? '<div class="hint" style="margin-top:12px">暂无用户——点「⚡ 一键初始化」创建。</div>' : ''}
       ${studioGuideCardHtml(u.rootKey, m.endpoint)}
       ${group('网页管理', webUsers, '浏览器打开记忆空间用这一把（Studio 里的「用户 API 密钥」也用它）')}
@@ -853,7 +843,8 @@ const granularityCardHtml = (gran) => `
         <label class="switch"><input type="checkbox" id="memGran" ${gran === 'bot-user' ? 'checked' : ''}><span class="track"></span></label>
       </label>
     </div>
-    <div class="hint" style="margin-top:8px;line-height:1.8">升级属<b>增量演进</b>：既有密钥与记忆不受影响、会话不中断，仅为新聊天者追加独立签发。建议触发条件（任一出现即升级）：同一 bot 服务 2 人以上且内容敏感 / 出现「记忆是谁写的」追溯需求 / 部署走向团队共享。</div>
+    <div class="hint" style="margin-top:8px;line-height:1.8">升级属<b>增量演进</b>：不影响既有密钥与记忆、会话不中断，仅为新聊天者追加独立签发。
+      <span class="tip" style="vertical-align:-1px" data-tip="建议触发条件（任一出现即升级）：同一 bot 服务 2 人以上且内容敏感；出现「记忆是谁写的」追溯需求；部署走向团队共享。">ⓘ</span></div>
   </div>`;
 
 function bindUsersTabActions(el, { m }) {
@@ -925,6 +916,9 @@ function bindUsersTabActions(el, { m }) {
   if (openStudioBtn) openStudioBtn.onclick = openStudio;
   // 指引卡内的「复制 Root 密钥」（同一 handler，多入口）
   el.querySelectorAll('[data-root-copy]').forEach((b) => { b.onclick = copyRoot; });
+  // ⓘ 连接说明 → 点击弹富文本弹窗（hover 塞不下长文案）
+  const guideBtn = $('#memGuideInfo');
+  if (guideBtn) guideBtn.onclick = openStudioGuideModal;
 
   // 打开记忆空间（最终方案 §三 决策 5）：密钥进剪贴板 → 自动新标签开 Web Studio 文件系统页
   //（深链 /studio/filesystem 直落记忆目录树，避开默认的 VikingBot 标签——那是 OpenViking
@@ -1005,6 +999,8 @@ function bindUsersTabActions(el, { m }) {
 export const page = {
   id: 'memory',
   title: '记忆增强',
+  desc: 'OpenViking 长期记忆：自动召回历史、归档提炼，按机器人命名空间隔离',
+  legend: false,
   icon: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/>',
   render: renderMemory,
 };