@jesonliu/lark-claudecode-bridge 0.13.0 → 0.14.2

package/README.md

@@ -94,14 +94,15 @@ lcb start
 
 | 命令 | 说明 |
 |---|---|
-| /new | 开新会话 |
-| /resume | 列出/恢复历史会话（`/resume <编号>` 恢复指定会话） |
+| /new | 开新会话（历史保留，`/resume` 可随时切回） |
+| /resume | 列出/恢复历史会话（`/resume <编号>` 恢复指定会话；列表标注当前续接的会话） |
 | /stop | 停止当前任务 |
 | /status | 当前状态 |
 | /ws list / /ws use \<名字\> | 工作区（切换仅 admin 可用） |
 | /model | 查看当前模型；`/model <名字>` 通道级切换；`/model reset` 恢复默认 |
 | /skills / /plugins / /mcp | 查看本会话实际加载的技能 / 插件 / MCP 服务 |
 | /plugin | 插件管理：`/plugin list`（全员，含本机 ~/.claude 与托管目录两处清单）；`install/uninstall/enable/disable/marketplace …`（仅 admin，默认装 ~/.claude，`--dir=managed` 装托管目录），装好下一条消息自动加载 |
+| /reload-plugins | 重载插件：清插件发现缓存，下一条消息重新扫描加载（终端命令的 bridge 等价物） |
 | /help | 帮助 |
 | 其它 `/xxx` | **原文透传**给 Claude Code 派发斜杠命令（如 `/superpowers:brainstorming` 触发插件技能） |
 
@@ -167,6 +168,8 @@ concurrency: 3             # 通道间并发上限（未单独配置的 app 沿
 
 配置页「Claude 认证」tab 可视化切换；managed 模式下认证/模型改动保存后即对后续任务生效（无需重启）。
 
+**managed 模式的 MCP 与环境继承**（0.14.0 起，`lcb start` 时自动完成）：本机 `~/.claude.json` 的全局 `mcpServers` 单向同步到托管目录（CLI 读 `$CLAUDE_CONFIG_DIR/.claude.json`，不同步则托管会话丢掉全部 user 级 MCP）；本机 `~/.claude/settings.json` env 块中的**非认证键**（MCP 工具依赖的 `IMAGE_GEN_*`、`API_HOST` 等自定义变量）并入托管 settings.json。需要覆盖继承值或本机没有这些配置时，用**显式配置**：配置页「Claude 认证」→「环境变量」行编辑器（或 config.yaml 的 `claude.env` 键值对），优先级 `claude.env` > 本机继承 > 托管目录既有值；认证与模型 4 键（`ANTHROPIC_AUTH_TOKEN/API_KEY/BASE_URL/MODEL`）不在此生效——永远以认证表单为准。
+
 **插件双目录（managed 模式）**：新装插件默认装到本机 `~/.claude`（与本机 claude CLI 共用一份），`/plugin install xxx --dir=managed` 或配置页安装框选「bridge 托管目录」可装到托管目录；启停/卸载自动按插件所在目录执行，两处清单在配置页「插件」tab 与 `/plugin list` 中均带来源标记。
 
 ### 开发场景工作流（`type: code-dev`）
@@ -174,11 +177,13 @@ concurrency: 3             # 通道间并发上限（未单独配置的 app 沿
 给代码开发类工作区设置 `type: code-dev` 后，每个任务自动走「先计划、后执行」：
 
 1. **计划审批**：任务以 plan mode 启动（期间只允许读操作），Claude 查阅代码后提交计划 → 飞书收到计划卡片：
-   - **✅ 批准执行**：SDK 自动切回可编辑模式，按计划开工（后续每次写文件仍会弹带红绿 diff 的确认卡）
+   - **✅ 批准执行**：批准即授权——Claude 自动切入 acceptEdits 模式按计划开工，**后续写文件不再逐次弹确认卡**（对齐本机 CLI「批准计划 → accept edits on」语义；Bash 危险命令黑名单仍生效，命中照弹确认）
    - **📝 按意见修改**：在卡片输入框填修改意见后点击，Claude 修订计划重新提交（同一会话内循环，直到批准或放弃）
    - **❌ 放弃计划**：任务终止；10 分钟无操作自动放弃
 2. **收尾汇总 diff**：任务完成后不再把改动文件逐个上传，而是发**汇总 diff 卡片**（标题含文件数与 +X/-Y 行统计，正文红绿着色，超长自动拆多张）。改动以 `git diff HEAD` + untracked 新文件为准，因此 **code-dev 工作区需要是 git 仓库**（非 git 仓库自动回退为旧的文件上传行为，并提示 `git init`）
 
+**执行器为 Streaming Input 模式**（0.14.0 起）：prompt 经持久输入流送入 CLI，stdin 全程保持打开——这是计划审批与提问卡片能稳定工作的前提（旧版单轮模式在轮次边界会触发 CLI 的 "Stream closed" 中断，属 Agent SDK 已知问题）。**提问卡片**：Claude 调用 AskUserQuestion 时飞书收到问题选项卡，点选项作答（多选题可多选）、全部作答后「提交答案」——答案直接回传模型继续任务。
+
 **读操作免确认**：读工具与 Bash 默认直通（`ls`/`cat`/`grep` 不再弹卡），命中 `dangerous_commands` 黑名单（`rm -rf`、`sudo`、`git push --force` 等）仍弹确认卡；「本次会话不再询问」的记忆同样绕不过黑名单。想放行其它工具（如 `Edit`）往 `permissions.allow_tools` 追加即可——注意配置即**整体替换**内置默认，需把内置读工具一并写上。
 
 > plan 卡片与 permissions 配置的改动需重启 bridge 进程生效（`workspaces[].type` 改动亦然）。

package/assets/web/index.html

@@ -65,6 +65,8 @@
   .br-mask { position: fixed; inset: 0; background: rgba(15,19,24,.5); z-index: 90; display: flex; align-items: center; justify-content: center; }
   .br-mask-card { background: var(--card); border-radius: 12px; padding: 24px 32px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.18); max-width: 440px; font-size: 14px; }
   .br-spin { width: 26px; height: 26px; margin: 0 auto 12px; border: 3px solid #d9e2f5; border-top-color: var(--primary); border-radius: 50%; animation: brspin .9s linear infinite; }
+  /* 表格内小号 spinner（斜杠命令远端拉取等异步加载占位） */
+  .br-spin-sm { width: 18px; height: 18px; margin: 0 auto 10px; border: 2px solid #d9e2f5; border-top-color: var(--primary); border-radius: 50%; animation: brspin .9s linear infinite; }
   @keyframes brspin { to { transform: rotate(360deg); } }
   .app-card { border: 1px solid var(--border); border-radius: 8px; padding: 4px 16px 14px; margin-bottom: 12px; position: relative; }
   .app-card .del { position: absolute; top: 10px; right: 12px; }
@@ -88,6 +90,31 @@
   .subtabs { display: flex; gap: 8px; margin-bottom: 14px; }
   .subtabs button { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: none; cursor: pointer; font: inherit; color: var(--text); }
   .subtabs button.active { background: #eef3ff; color: var(--primary); border-color: var(--primary); font-weight: 600; }
+  /* 居中 modal：目录选择等轻量交互（z-index 低于全页断连遮罩 br-mask=90） */
+  .modal-mask { position: fixed; inset: 0; background: rgba(15,19,24,.42); z-index: 80; display: flex; align-items: center; justify-content: center; }
+  .modal { width: min(560px, 92vw); background: var(--card); border-radius: 12px; padding: 16px 20px; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
+  .dir-list { border: 1px solid var(--border); border-radius: 8px; max-height: 46vh; overflow-y: auto; margin-top: 10px; }
+  .dir-list button { display: block; width: 100%; text-align: left; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--border); background: none; cursor: pointer; font: inherit; }
+  .dir-list button:last-child { border-bottom: 0; }
+  .dir-list button:hover { background: #eef3ff; color: var(--primary); }
+  .dir-list .empty { padding: 14px 12px; color: var(--muted); font-size: 12.5px; }
+  /* 输入框 + 行内按钮组合（路径框带「浏览」） */
+  .input-btn { display: flex; gap: 6px; }
+  .input-btn > input { flex: 1; min-width: 0; }
+  .input-btn > .btn { flex: 0 0 auto; align-self: center; }
+  /* 可搜索 combobox（安装插件选择器）：输入过滤 + 结果面板 */
+  .combo { position: relative; }
+  .combo-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14); max-height: 320px; overflow-y: auto; z-index: 40; }
+  .combo-panel[hidden] { display: none; }
+  .combo-item { padding: 7px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
+  .combo-item:last-child { border-bottom: 0; }
+  .combo-item:hover { background: #eef3ff; }
+  .combo-item b { margin-right: 6px; }
+  .combo-empty { padding: 12px; color: var(--muted); font-size: 12.5px; }
+  /* 操作进度弹框：进度条（update-all 真实 i/N，单操作时间缓动模拟） */
+  .prog { height: 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; margin-top: 12px; }
+  .prog-bar { height: 100%; width: 0%; background: var(--primary); border-radius: 999px; transition: width .3s; }
+  .prog-bar.done { background: var(--ok); }
 </style>
 </head>
 <body>
@@ -171,6 +198,81 @@ async function saveDoc() {
   } catch (e) { toast(`保存失败：${e.message}`, true); return false; }
 }
 
+// ============ 目录选择弹层（工作区路径等；数据源 GET /api/fs/dirs） ============
+/** 后端返回的绝对路径 + 子目录名拼完整路径（Windows 反斜杠 / posix 正斜杠，按 base 自带分隔符判断） */
+const joinPath = (base, name) => {
+  if (!base) return name;
+  const sepCh = base.includes('\\') ? '\\' : '/';
+  return base.replace(/[\\/]+$/, '') + sepCh + name;
+};
+/**
+ * 打开目录浏览弹层：盘符/根层 → 逐级进入 → 「选择此目录」确定。
+ * resolve(选中的绝对路径) / resolve(null)（取消）。手输路径可直接跳转，
+ * 路径不存在等错误在弹层内联提示（不关层、可改可回退）。
+ */
+function pickDirectory(initialPath) {
+  return new Promise((resolveP) => {
+    const mask = document.createElement('div');
+    mask.className = 'modal-mask';
+    mask.innerHTML = `
+    <div class="modal" role="dialog" aria-modal="true">
+      <h3 style="margin:0 0 10px">选择目录</h3>
+      <div class="row">
+        <input type="text" class="pd-jump" placeholder="输入或粘贴路径，回车前往">
+        <button class="btn pd-go" title="跳转到输入的路径">前往</button>
+        <button class="btn pd-up" title="返回上一级">⬆ 上级</button>
+      </div>
+      <div class="hint pd-cur" style="margin:8px 0 0;word-break:break-all"></div>
+      <div class="dir-list"><div class="empty">加载中…</div></div>
+      <div class="savebar">
+        <span class="hint pd-note"></span><span style="flex:1"></span>
+        <button class="btn pd-cancel">取消</button>
+        <button class="btn primary pd-ok">选择此目录</button>
+      </div>
+    </div>`;
+    document.body.appendChild(mask);
+    const list = mask.querySelector('.dir-list');
+    const cur = mask.querySelector('.pd-cur');
+    const upBtn = mask.querySelector('.pd-up');
+    const okBtn = mask.querySelector('.pd-ok');
+    const note = mask.querySelector('.pd-note');
+    const jumpInput = mask.querySelector('.pd-jump');
+    let current = '';      // '' = 盘符/根层（此层不可作为选择结果）
+    let currentParent = null;
+    const close = (val) => { mask.remove(); resolveP(val); };
+    const render = (r) => {
+      current = r.path || '';
+      currentParent = r.parent;
+      cur.textContent = r.drives ? '此电脑（选择一个盘符）' : (r.path || '');
+      upBtn.hidden = !r.parent;
+      okBtn.disabled = !current;
+      note.textContent = r.error || '';
+      const items = r.drives
+        ? r.drives.map((d) => ({ label: d, next: d }))
+        : (r.dirs || []).map((d) => ({ label: d, next: joinPath(current, d) }));
+      list.innerHTML = items.length
+        ? items.map((it) => `<button data-next="${esc(it.next)}">📁 ${esc(it.label)}</button>`).join('')
+        : `<div class="empty">${r.error ? '（上述路径无法列出子目录）' : '（没有子目录）'}</div>`;
+      list.querySelectorAll('button[data-next]').forEach((b) => b.onclick = () => go(b.dataset.next));
+    };
+    const go = async (p) => {
+      list.innerHTML = '<div class="empty">加载中…</div>';
+      try { render(await api('GET', `/api/fs/dirs?p=${encodeURIComponent(p)}`)); }
+      catch (e) { list.innerHTML = `<div class="empty">加载失败：${esc(e.message)}</div>`; }
+    };
+    const jump = () => { const v = jumpInput.value.trim(); if (v) go(v); };
+    mask.querySelector('.pd-go').onclick = jump;
+    jumpInput.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); jump(); } };
+    upBtn.onclick = () => { if (currentParent) go(currentParent); };
+    okBtn.onclick = () => { if (current) close(current); };
+    mask.querySelector('.pd-cancel').onclick = () => close(null);
+    mask.onclick = (e) => { if (e.target === mask) close(null); };
+    // 初始位置：现值路径存在则从它开始，否则停在盘符/根层（跳转框预填现值方便改错）
+    jumpInput.value = initialPath || '';
+    go(initialPath || '');
+  });
+}
+
 // ============ Tab 注册 ============
 // 菜单图标：内联 SVG 线性图标（Lucide 风格，stroke:currentColor 自动跟随选中态配色）
 const ico = (inner) => `<span class="ico"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${inner}</svg></span>`;
@@ -262,7 +364,12 @@ function renderBootstrap() {
     <h3 style="margin-top:20px">② 本机工作区（Claude 的工作目录）</h3>
     <div class="row">
       <div><label>名字（如 demo）</label><input type="text" id="bsWsName" placeholder="demo"></div>
-      <div><label>本机绝对路径</label><input type="text" id="bsWsPath" placeholder="F:\\workspace\\demo"></div>
+      <div><label>本机绝对路径</label>
+        <div class="input-btn">
+          <input type="text" id="bsWsPath" placeholder="F:\\workspace\\demo">
+          <button class="btn sm" id="bsWsBrowse" title="浏览选择目录">浏览</button>
+        </div>
+      </div>
     </div>
     <h3 style="margin-top:20px">③ Claude 认证（可稍后在「Claude 认证」页配置）</h3>
     <div class="radio-row">
@@ -300,6 +407,10 @@ function renderBootstrap() {
   };
   addAppRow();
   $('#bsAddApp').onclick = addAppRow;
+  $('#bsWsBrowse').onclick = async () => {
+    const picked = await pickDirectory($('#bsWsPath').value.trim());
+    if (picked != null) $('#bsWsPath').value = picked;
+  };
   document.querySelectorAll('input[name=bsMode]').forEach((r) => r.onchange = () => {
     $('#bsManaged').style.display = $('[name=bsMode]:checked').value === 'managed' ? '' : 'none';
   });
@@ -782,7 +893,10 @@ function renderWorkspaces(el) {
     const tr = document.createElement('tr');
     tr.innerHTML = `
       <td><input type="text" data-f="name" value="${esc(ws.name || '')}"></td>
-      <td><input type="text" data-f="path" value="${esc(ws.path || '')}"></td>
+      <td><div class="input-btn">
+        <input type="text" data-f="path" value="${esc(ws.path || '')}">
+        <button class="btn sm" data-browse="path" title="浏览选择目录">浏览</button>
+      </div></td>
       <td><select data-f="type">
         <option value="generic" ${ws.type !== 'code-dev' ? 'selected' : ''}>通用（generic）</option>
         <option value="code-dev" ${ws.type === 'code-dev' ? 'selected' : ''}>开发工作流（code-dev）</option>
@@ -810,6 +924,14 @@ function renderWorkspaces(el) {
       cardDirty('ws', true);
       renderWorkspaces(el);
     };
+    // 浏览选目录：回填后手动同步 ws.path（直接改 input.value 不触发 oninput）
+    tr.querySelector('[data-browse]').onclick = async () => {
+      const picked = await pickDirectory(ws.path || '');
+      if (picked == null) return;
+      ws.path = picked;
+      tr.querySelector('input[data-f=path]').value = picked;
+      cardDirty('ws', true);
+    };
     body.appendChild(tr);
   };
   doc.workspaces.forEach(renderRow);
@@ -855,6 +977,7 @@ function renderClaude(el) {
       <tr><td>模型</td><td>${cur.model ? `<code>${esc(cur.model)}</code>` : '<span class="hint">未设置（CLI 默认）</span>'}</td></tr>
       <tr><td>Auth Token</td><td>${hint(cur.authToken)}</td></tr>
       <tr><td>API Key</td><td>${hint(cur.apiKey)}</td></tr>
+      <tr><td>自定义环境变量</td><td>${cur.envCount ? `${cur.envCount} 个（写入托管 settings.json env 块，MCP 工具可用）` : '<span class="hint">无</span>'}</td></tr>
       <tr><td>settings.json</td><td><code>${esc(S.status?.claude?.settingsPath || '—')}</code></td></tr>
     </table>
     ${mode !== 'managed' ? '<div class="desc" style="margin-top:8px">inherit 模式上表为本机 ~/.claude 实际状态，本页不修改本机登录。要管理多厂商档案并一键切换，请切到 bridge 托管。</div>' : ''}
@@ -888,6 +1011,10 @@ function renderClaude(el) {
           <div class="hint" style="margin-top:6px">「拉取模型」用当前表单的 BASE_URL 与凭证（未填则用已保存值）请求模型列表：自动兼容带 / 不带 /v1 的地址与 Bearer / x-api-key 认证；失败可手动填写。</div>
         </div>
       </details>
+      <h4 style="margin:14px 0 2px;font-size:13.5px">环境变量（写入托管 settings.json，MCP 工具依赖的自定义变量在此配置）</h4>
+      <div class="hint" style="margin-bottom:6px">本机 ~/.claude/settings.json 已有的非认证键会自动继承；此处配置的键<b>优先级更高</b>（覆盖继承值）。认证相关（ANTHROPIC_AUTH_TOKEN / API_KEY / BASE_URL / MODEL）不在此生效，请用上方认证表单。</div>
+      <table><thead><tr><th style="width:38%">KEY</th><th>VALUE</th><th style="width:44px"></th></tr></thead><tbody id="claudeEnvBody"></tbody></table>
+      <button class="btn sm" id="claudeEnvAdd" style="margin-top:6px">+ 添加变量</button>
       ${saveBarHtml('claude')}
     </div>
     <div class="footer-note">managed 模式把认证写入 <code>~/.lark-claudecode-bridge/claude/settings.json</code>，与本机 ~/.claude 完全隔离；认证/模型改动保存后对后续任务即生效，模式切换需重启。</div>
@@ -921,6 +1048,42 @@ function renderClaude(el) {
   };
   $('#baseUrl').oninput = () => { c.base_url = $('#baseUrl').value.trim() || undefined; cardDirty('claude', true); };
   $('#model').oninput = () => { c.model = $('#model').value.trim() || undefined; cardDirty('claude', true); };
+  // ---- 环境变量行编辑（claude.env）：对象 ↔ 行数组，KEY/VALUE 实时写回（同 apps 抽屉 env 模式） ----
+  const cEnvRows = Object.entries(c.env || {}).map(([key, value]) => ({ key, value: String(value) }));
+  const syncClaudeEnv = () => {
+    const obj = {};
+    for (const r of cEnvRows) if (r.key.trim()) obj[r.key.trim()] = r.value;
+    if (Object.keys(obj).length) c.env = obj; else delete c.env;
+  };
+  const renderClaudeEnv = () => {
+    const tb = $('#claudeEnvBody');
+    if (!tb) return;
+    tb.innerHTML = cEnvRows.length ? cEnvRows.map((r, i) => `
+      <tr>
+        <td><input type="text" data-cei="${i}" data-col="key" value="${esc(r.key)}" placeholder="SOME_KEY"></td>
+        <td><input type="text" data-cei="${i}" data-col="value" value="${esc(r.value)}" placeholder="some-value"></td>
+        <td><button class="btn sm danger" data-crm="${i}">删</button></td>
+      </tr>`).join('') : '<tr><td colspan="3" class="hint">未配置（本机 ~/.claude 的非认证键自动继承）</td></tr>';
+    tb.querySelectorAll('input[data-cei]').forEach((input) => input.oninput = () => {
+      cEnvRows[Number(input.dataset.cei)][input.dataset.col] = input.value;
+      syncClaudeEnv();
+      cardDirty('claude', true);
+    });
+    tb.querySelectorAll('button[data-crm]').forEach((b) => b.onclick = () => {
+      cEnvRows.splice(Number(b.dataset.crm), 1);
+      syncClaudeEnv();
+      cardDirty('claude', true);
+      renderClaudeEnv();
+    });
+  };
+  const envAdd = $('#claudeEnvAdd');
+  if (envAdd) envAdd.onclick = () => { cEnvRows.push({ key: '', value: '' }); renderClaudeEnv(); tbFocusLastKey(); };
+  const tbFocusLastKey = () => {
+    const inputs = document.querySelectorAll('#claudeEnvBody input[data-col=key]');
+    const last = inputs[inputs.length - 1];
+    if (last) last.focus();
+  };
+  renderClaudeEnv();
   $('#btnModels').onclick = () => {
     const typed = $('#credVal').value.trim();
     const key = document.querySelector('input[name=cred]:checked').value;
@@ -1207,7 +1370,7 @@ function renderSlash(el) {
       <button class="btn" id="scBuiltins">补齐内置命令</button>
     </div>
     <table style="margin-top:12px"><thead><tr><th style="width:170px">命令</th><th>描述</th><th style="width:150px">图标</th><th style="width:130px">操作</th></tr></thead>
-    <tbody id="scBody"><tr><td colspan="4" class="hint">加载中…</td></tr></tbody></table>
+    <tbody id="scBody"><tr><td colspan="4" style="padding:36px 0"><div class="br-spin-sm"></div><div class="hint" style="text-align:center">正在从飞书拉取斜杆命令…</div></td></tr></tbody></table>
     <pre class="report" id="scReport" style="display:none;margin-top:12px"></pre>
   </div>`;
   const appSel = $('#scApp');
@@ -1223,7 +1386,7 @@ function renderSlash(el) {
   };
   const loadRemote = async () => {
     if (!appSel.value) { $('#scBody').innerHTML = '<tr><td colspan="4" class="hint">无可用应用（先到「飞书应用」页配置并保存）</td></tr>'; return; }
-    $('#scBody').innerHTML = '<tr><td colspan="4" class="hint">加载中…</td></tr>';
+    $('#scBody').innerHTML = '<tr><td colspan="4" style="padding:36px 0"><div class="br-spin-sm"></div><div class="hint" style="text-align:center">正在从飞书拉取斜杆命令…</div></td></tr>';
     try {
       const r = await api('GET', `/api/slash-commands/remote?app=${encodeURIComponent(appSel.value)}`);
       $('#scBody').innerHTML = r.remote.map((x) => `
@@ -1319,21 +1482,27 @@ async function renderPlugins(el) {
   <div class="card">
     <h3>Claude Code 插件</h3>
     <div class="desc">两处目录的已启用插件都会自动加载（managed 托管目录优先）：本机 <code>~/.claude</code>（来源「本机」，与本机 claude CLI 共用）与 bridge 托管目录 <code id="pluginDir">…</code>。装好后下一条消息自动加载。飞书端同样可用 <code>/plugin install xxx@marketplace</code>（仅管理员）。</div>
-    <table><thead><tr><th>插件</th><th>市场</th><th>来源</th><th>版本</th><th style="width:90px">状态</th><th style="width:200px">操作</th></tr></thead>
+    <table><thead><tr><th>插件</th><th>市场</th><th>来源</th><th>版本</th><th style="width:90px">状态</th><th style="width:250px">操作</th></tr></thead>
     <tbody id="plBody"><tr><td colspan="6" class="hint">加载中…</td></tr></tbody></table>
   </div>
   <div class="card">
     <h3>安装 / 市场</h3>
-    <div class="row" style="max-width:680px">
-      <input type="text" id="plInstall" placeholder="name 或 name@marketplace">
+    <div class="desc">安装来源为已添加的市场：新插件先「添加市场」，再从下拉选择安装。</div>
+    <label>从市场安装插件</label>
+    <div class="row" style="max-width:760px">
+      <div class="combo">
+        <input type="text" id="plInstall" placeholder="（加载中…）" autocomplete="off">
+        <div class="combo-panel" id="plInstallPanel" hidden></div>
+      </div>
       <select id="plDir" style="max-width:170px">
         <option value="user" selected>装到本机 ~/.claude</option>
         <option value="bridge">装到 bridge 托管目录</option>
       </select>
       <button class="btn primary" id="plDoInstall">安装</button>
     </div>
-    <div class="hint" style="margin:6px 0">默认装本机 ~/.claude：本机 claude CLI 与桥接器两处共用一份，无须安装两次。</div>
-    <div class="row" style="max-width:680px;margin-top:10px">
+    <div class="hint" style="margin:6px 0">默认装本机 ~/.claude：本机 claude CLI 与桥接器两处共用一份，无须安装两次。装好后下一条消息自动加载。</div>
+    <label style="margin-top:14px">管理市场</label>
+    <div class="row" style="max-width:760px">
       <input type="text" id="plMarket" placeholder="marketplace git 地址或本机路径">
       <select id="plMarketDir" style="max-width:170px">
         <option value="user" selected>本机 ~/.claude</option>
@@ -1342,51 +1511,235 @@ async function renderPlugins(el) {
       <button class="btn" id="plDoMarketAdd">添加市场</button>
       <button class="btn" id="plDoMarketUpdate">全部更新</button>
     </div>
+    <div class="hint" style="margin:6px 0">「全部更新」= 刷新市场索引 + 逐个更新该目录所有已装插件。</div>
     <pre class="report" id="plReport" style="display:none;margin-top:12px"></pre>
   </div>`;
   const report = (title, text) => {
     $('#plReport').style.display = '';
     $('#plReport').textContent = `${title}\n${text}`;
   };
+  let available = [];        // 当前目录可装清单（扁平化，combobox 数据源）
+  let selectedInstall = '';  // 已选中安装参数 name@marketplace（输入改动即失效）
+  let installed = [];        // 已装清单缓存（update-all 前端编排取该目录步骤用）
+  const busyText = {
+    install: '安装中…', uninstall: '卸载中…', update: '更新中…', 'update-all': '更新中…',
+    'marketplace-add': '添加中…', 'marketplace-remove': '移除中…', enable: '处理中…', disable: '处理中…',
+  };
+  const opNames = { install: '安装', uninstall: '卸载', update: '更新', 'update-all': '全部更新', 'marketplace-add': '添加市场', 'marketplace-remove': '移除市场', enable: '启用', disable: '停用' };
   const load = async () => {
     try {
       const r = await api('GET', '/api/plugins');
+      installed = r.plugins || [];
       $('#pluginDir').textContent = r.configDir;
       const body = $('#plBody');
-      if (!r.plugins.length) {
+      if (!installed.length) {
         body.innerHTML = '<tr><td colspan="6" class="hint">尚未安装任何插件</td></tr>';
         return;
       }
-      body.innerHTML = r.plugins.map((p) => `
+      body.innerHTML = installed.map((p) => `
         <tr>
           <td><b>${esc(p.name)}</b></td>
           <td>${esc(p.marketplace || '-')}</td>
           <td>${p.source === 'bridge' ? '<span class="tag warn">bridge 托管</span>' : '<span class="tag off">本机 ~/.claude</span>'}</td>
-          <td class="hint">${esc(p.version || '-')}</td>
+          <td class="hint">${esc(p.version || '-')}${p.latestVersion ? ` <span class="tag warn">→ ${esc(p.latestVersion)}</span>` : ''}</td>
           <td>${p.enabled ? '<span class="tag ok">已启用</span>' : '<span class="tag off">未启用</span>'}</td>
           <td>
+            <button class="btn sm" data-op="update" data-arg="${esc(p.key)}" data-dir="${p.source}">更新</button>
             <button class="btn sm" data-op="${p.enabled ? 'disable' : 'enable'}" data-arg="${esc(p.key)}" data-dir="${p.source}">${p.enabled ? '停用' : '启用'}</button>
             <button class="btn sm danger" data-op="uninstall" data-arg="${esc(p.key)}" data-dir="${p.source}">卸载</button>
           </td>
         </tr>`).join('');
-      body.querySelectorAll('button[data-op]').forEach((b) => b.onclick = () => act(b.dataset.op, b.dataset.arg, b.dataset.dir));
+      body.querySelectorAll('button[data-op]').forEach((b) => b.onclick = () => {
+        // 慢操作走进度弹框；亚秒级启停走轻量 act（弹框一闪而过反而干扰）
+        if (b.dataset.op === 'enable' || b.dataset.op === 'disable') act(b.dataset.op, b.dataset.arg, b.dataset.dir, b);
+        else runOpDialog(b.dataset.op, b.dataset.arg, b.dataset.dir, b);
+      });
     } catch (e) {
+      installed = [];
       $('#plBody').innerHTML = `<tr><td colspan="6" class="hint">加载失败：${esc(e.message)}</td></tr>`;
     }
   };
-  const act = async (op, arg, dir) => {
-    report(`执行中：${op} ${arg}${dir ? `（${dir === 'bridge' ? 'bridge 托管目录' : '本机 ~/.claude'}）` : ''}`, '…（安装/更新可能需要拉取仓库，请稍候）');
+  /** 轻量操作（enable/disable 亚秒级）：按钮瞬时 loading + toast，不弹框 */
+  const act = async (op, arg, dir, btn) => {
+    const pageBtns = el.querySelectorAll('button');
+    const old = btn ? btn.textContent : '';
+    pageBtns.forEach((b) => { b.disabled = true; });
+    if (btn) btn.textContent = busyText[op] || '处理中…';
     try {
       const r = await api('POST', '/api/plugins/action', { op, arg, ...(dir ? { dir } : {}) });
       report(r.ok ? `✅ ${op} 完成` : `❌ ${op} 失败`, r.text);
-      if (r.ok) { await load(); toast(`${op} 完成`); }
-      else toast(`${op} 失败：${r.text.slice(0, 120)}`, true);
-    } catch (e) { report(`❌ ${op} 失败`, e.message); toast(e.message, true); }
+      await load();
+      toast(r.ok ? `${opNames[op] || op}完成，下一条消息生效` : `${opNames[op] || op}失败：${r.text.slice(0, 120)}`, !r.ok);
+    } catch (e) {
+      report(`❌ ${op} 失败`, e.message);
+      toast(e.message, true);
+    } finally {
+      pageBtns.forEach((b) => { b.disabled = false; });
+      if (btn) btn.textContent = old;
+    }
+  };
+  /**
+   * 慢操作进度弹框（install/update/uninstall/marketplace-add/update-all）：
+   * spinner + 进度条 + 逐步日志。update-all 走前端编排（marketplace-update + 逐插件
+   * update，每步一请求）→ 进度真实（i/N）；单操作是单请求无内部进度 → 时间缓动模拟
+   * （前 2s 直线推进，之后渐缓封顶 90%，完成跳 100%）。进行中不可关闭；完成后列表刷新。
+   */
+  const runOpDialog = async (op, arg, dir, btn) => {
+    const dirLabel = dir === 'bridge' ? 'bridge 托管目录' : '本机 ~/.claude';
+    const title = op === 'update-all'
+      ? `全部更新（${dirLabel}）`
+      : `${opNames[op] || op} ${arg}${dir ? `（${dirLabel}）` : ''}`;
+    // update-all 编排步骤：刷新市场索引 + 该目录逐个已装插件（失败不中断，与后端聚合语义一致）
+    const steps = op === 'update-all'
+      ? [{ op: 'marketplace-update', arg: '', label: '刷新市场索引' },
+        ...installed.filter((p) => p.source === dir).map((p) => ({ op: 'update', arg: p.key, label: `更新 ${p.key}` }))]
+      : [{ op, arg, label: `${opNames[op] || op} ${arg}` }];
+    // 弹框 DOM（遮罩不可点击关闭；关闭按钮完成前不存在）
+    const mask = document.createElement('div');
+    mask.className = 'modal-mask';
+    mask.innerHTML = `
+    <div class="modal" role="dialog" aria-modal="true" style="width:min(640px,94vw)">
+      <div style="display:flex;align-items:center;gap:10px">
+        <div class="br-spin" style="margin:0"></div>
+        <b id="podTitle">${esc(title)}</b>
+      </div>
+      <div class="prog"><div class="prog-bar" id="podBar"></div></div>
+      <pre class="report" id="podLog" style="margin-top:12px;max-height:220px">正在执行 claude plugin …（安装/更新可能需要拉取仓库，请稍候）</pre>
+      <div class="savebar" style="justify-content:flex-end">
+        <button class="btn primary" id="podClose" hidden>关闭</button>
+      </div>
+    </div>`;
+    document.body.appendChild(mask);
+    const bar = mask.querySelector('#podBar');
+    const log = mask.querySelector('#podLog');
+    const spin = mask.querySelector('.br-spin');
+    const titleEl = mask.querySelector('#podTitle');
+    const closeBtn = mask.querySelector('#podClose');
+    const setBar = (pct) => { bar.style.width = `${pct}%`; };
+    const appendLog = (line) => { log.textContent += `\n${line}`; log.scrollTop = log.scrollHeight; };
+    // 单请求无内部进度：缓动模拟；update-all 用真实 i/N 不走此定时器
+    let fakePct = 0;
+    const startedAt = Date.now();
+    const timer = op === 'update-all' ? null : setInterval(() => {
+      const elapsed = Date.now() - startedAt;
+      fakePct = elapsed < 2000 ? Math.min(70, (elapsed / 2000) * 70) : Math.min(90, fakePct + 1);
+      setBar(fakePct);
+    }, 300);
+    // 操作互斥 + 被点按钮进行时文案（遮罩之外的双保险）
+    const pageBtns = el.querySelectorAll('button');
+    const old = btn ? btn.textContent : '';
+    pageBtns.forEach((b) => { b.disabled = true; });
+    if (btn) btn.textContent = busyText[op] || '处理中…';
+    report(`执行中：${op} ${arg}${dir ? `（${dirLabel}）` : ''}`, '…（安装/更新可能需要拉取仓库，请稍候）');
+    const close = async () => { mask.remove(); await Promise.all([load(), loadAvailable()]); };
+    try {
+      let allOk = true;
+      const lines = [];
+      for (let i = 0; i < steps.length; i++) {
+        const s = steps[i];
+        if (op === 'update-all') setBar(Math.round(((i + 1) / steps.length) * 100));
+        const r = await api('POST', '/api/plugins/action', { op: s.op, arg: s.arg, ...(dir ? { dir } : {}) });
+        const line = `${r.ok ? '✅' : '❌'} ${s.label}${r.ok ? '' : `：${(r.text || '').split('\n').slice(0, 3).join(' ⏎ ').slice(0, 300)}`}`;
+        lines.push(line);
+        appendLog(line);
+        if (!r.ok) allOk = false;
+      }
+      if (timer) clearInterval(timer);
+      setBar(100);
+      bar.classList.add('done');
+      spin.style.display = 'none';
+      titleEl.textContent = `${allOk ? '✅' : '❌'} ${title} · ${allOk ? '完成' : '部分失败（详见日志与底部全文）'}`;
+      report(allOk ? `✅ ${op} 完成` : `❌ ${op} 部分失败`, lines.join('\n'));
+      closeBtn.hidden = false;
+      closeBtn.onclick = () => void close();
+    } catch (e) {
+      if (timer) clearInterval(timer);
+      setBar(100);
+      spin.style.display = 'none';
+      titleEl.textContent = `❌ ${title} · 失败`;
+      appendLog(`❌ 请求失败：${e.message}`);
+      report(`❌ ${op} 失败`, e.message);
+      closeBtn.hidden = false;
+      closeBtn.onclick = () => void close();
+    } finally {
+      pageBtns.forEach((b) => { b.disabled = false; });
+      if (btn) btn.textContent = old;
+    }
+  };
+  /** 安装 combobox 数据：该目录已添加市场里的可安装插件（扁平化 + 关键词过滤面板） */
+  const loadAvailable = async () => {
+    const input = $('#plInstall');
+    if (!input) return;
+    try {
+      const r = await api('GET', `/api/plugins/available?dir=${$('#plDir').value}`);
+      available = [];
+      for (const m of r.marketplaces || []) {
+        for (const p of m.plugins || []) {
+          available.push({ key: `${p.name}@${m.name}`, name: p.name, market: m.name, version: p.version || '', description: p.description || '' });
+        }
+      }
+      $('#plDoInstall').disabled = !available.length;
+      input.placeholder = available.length ? '输入关键词搜索插件，从结果中选择' : '（请先在下方添加市场）';
+    } catch (e) {
+      available = [];
+      $('#plDoInstall').disabled = true;
+      input.placeholder = `（加载失败：${e.message}）`;
+    }
+    input.value = '';
+    selectedInstall = '';
+    hidePanel();
+  };
+  const hidePanel = () => { const p = $('#plInstallPanel'); if (p) p.hidden = true; };
+  const pickInstall = (key) => {
+    selectedInstall = key;
+    $('#plInstall').value = key;
+    hidePanel();
+  };
+  const showMatches = () => {
+    const panel = $('#plInstallPanel');
+    if (!panel) return;
+    const q = $('#plInstall').value.trim().toLowerCase();
+    const hits = q
+      ? available.filter((it) => `${it.name} ${it.description} ${it.market}`.toLowerCase().includes(q))
+      : available;
+    const shown = hits.slice(0, 50);
+    panel.hidden = false;
+    panel.innerHTML = shown.length
+      ? shown.map((it) => `<div class="combo-item" data-key="${esc(it.key)}"><b>${esc(it.name)}</b><span class="tag off">${esc(it.market)}</span>${it.version ? ` <span class="hint">v${esc(it.version)}</span>` : ''}${it.description ? `<div class="hint">${esc(it.description.slice(0, 80))}</div>` : ''}</div>`).join('')
+        + (hits.length > shown.length ? `<div class="combo-empty">仅显示前 ${shown.length} 项，继续输入关键词缩小范围</div>` : '')
+      : `<div class="combo-empty">${q ? '无匹配插件' : '（该目录还没有可安装插件）'}</div>`;
+    panel.querySelectorAll('.combo-item').forEach((item) => {
+      item.onmousedown = (e) => { e.preventDefault(); pickInstall(item.dataset.key); }; // mousedown+preventDefault 防输入框 blur 抢先收起面板
+    });
+  };
+  $('#plInstall').oninput = () => { selectedInstall = ''; showMatches(); };
+  $('#plInstall').onfocus = showMatches;
+  $('#plInstall').onkeydown = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const first = $('#plInstallPanel')?.querySelector('.combo-item');
+      if (first) pickInstall(first.dataset.key);
+    } else if (e.key === 'Escape') hidePanel();
+  };
+  // 点击 combobox 之外收起面板（只注册一次：$ 按 id 查询当前 DOM，重渲染后仍指向新面板）
+  if (!document.body._plComboHideBound) {
+    document.body._plComboHideBound = true;
+    document.addEventListener('click', (e) => {
+      if (!(e.target instanceof Element) || !e.target.closest('.combo')) hidePanel();
+    });
+  }
+  $('#plDoInstall').onclick = () => {
+    if (!selectedInstall) return toast('请从搜索结果中选择要安装的插件', true);
+    runOpDialog('install', selectedInstall, $('#plDir').value, $('#plDoInstall'));
+  };
+  $('#plDir').onchange = loadAvailable; // 安装目标目录切换 → 可装清单随之变化
+  $('#plDoMarketAdd').onclick = () => {
+    const v = $('#plMarket').value.trim();
+    if (!v) return toast('请填写 marketplace git 地址或本机路径', true);
+    runOpDialog('marketplace-add', v, $('#plMarketDir').value, $('#plDoMarketAdd'));
   };
-  $('#plDoInstall').onclick = () => act('install', $('#plInstall').value.trim(), $('#plDir').value);
-  $('#plDoMarketAdd').onclick = () => act('marketplace-add', $('#plMarket').value.trim(), $('#plMarketDir').value);
-  $('#plDoMarketUpdate').onclick = () => act('marketplace-update', '', $('#plMarketDir').value);
-  await load();
+  $('#plDoMarketUpdate').onclick = () => runOpDialog('update-all', '', $('#plMarketDir').value, $('#plDoMarketUpdate'));
+  await Promise.all([load(), loadAvailable()]);
 }
 
 // ============ 初始化 ============

package/dist/claude-config.d.ts

@@ -9,11 +9,16 @@ export declare function resolveClaudeDir(config: BridgeConfig): string;
  * 现有内容整体保留（enabledPlugins / 用户或 CLI 写入的其余键），仅重写 bridge 领土键——
  * env.ANTHROPIC_AUTH_TOKEN / ANTHROPIC_API_KEY / ANTHROPIC_BASE_URL / ANTHROPIC_MODEL 与顶层 model。
  * config.yaml 的 claude 段是这几个键的唯一事实源：字段清空 = 删除对应键。
- * env 块中非领土键（如有）原样保留。
+ * env 块非领土键的合并优先级（低→高）：托管目录既有值 → userEnv（本机 ~/.claude
+ * settings env 自动继承，已剔除领土键）→ configEnv（claude.env 显式配置）。
+ * 两处入口都过滤领土键：认证与模型由 config 认证字段全权决定，清空即删除的语义
+ * 不能被本机值或 env 配置绕过。
  */
-export declare function buildManagedSettings(existing: unknown, claude: ClaudeConfig): Record<string, unknown>;
+export declare function buildManagedSettings(existing: unknown, claude: ClaudeConfig, userEnv?: Record<string, string>, configEnv?: Record<string, string>): Record<string, unknown>;
 /**
- * managed 模式初始化：建目录 + 把 claude 段最新值合并进 settings.json。
- * lcb start 启动 bridge 前调用，保证首条消息前认证就位；非 managed 模式为 no-op。
+ * managed 模式初始化：建目录 + 把 claude 段最新值合并进 settings.json，
+ * 并从本机 ~/.claude 继承 MCP servers（.claude.json mcpServers）与自定义环境变量
+ * （settings.json env 块，领土键除外）——否则托管会话读不到用户全局 MCP 及其依赖变量。
+ * lcb start 启动 bridge 前调用，保证首条消息前认证/环境就位；非 managed 模式为 no-op。
  */
-export declare function initManagedClaudeDir(config: BridgeConfig): void;
+export declare function initManagedClaudeDir(config: BridgeConfig, userClaudeDir?: string): void;