npm - @jesonliu/lark-claudecode-bridge - Versions diffs - 0.11.0 → 0.14.2 - Mend

@jesonliu/lark-claudecode-bridge 0.11.0 → 0.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/README.md +89 -49
package/assets/web/index.html +1769 -0
package/config.example.yaml +22 -2
package/dist/auth-precheck.d.ts +5 -2
package/dist/auth-precheck.js +8 -2
package/dist/auth-precheck.js.map +1 -1
package/dist/bin/lcb.js +32 -3
package/dist/bin/lcb.js.map +1 -1
package/dist/claude-config.d.ts +24 -0
package/dist/claude-config.js +143 -0
package/dist/claude-config.js.map +1 -0
package/dist/cli/setup-wizard.d.ts +1 -0
package/dist/cli/setup-wizard.js +4 -0
package/dist/cli/setup-wizard.js.map +1 -1
package/dist/config-defaults.d.ts +4 -0
package/dist/config-defaults.js +15 -0
package/dist/config-defaults.js.map +1 -0
package/dist/config.d.ts +7 -0
package/dist/config.js +207 -6
package/dist/config.js.map +1 -1
package/dist/executor/claude-executor.d.ts +7 -2
package/dist/executor/claude-executor.js +62 -17
package/dist/executor/claude-executor.js.map +1 -1
package/dist/executor/output-collector.d.ts +2 -0
package/dist/executor/output-collector.js +15 -3
package/dist/executor/output-collector.js.map +1 -1
package/dist/executor/permission-gate.d.ts +37 -3
package/dist/executor/permission-gate.js +86 -16
package/dist/executor/permission-gate.js.map +1 -1
package/dist/executor/plugin-discovery.d.ts +30 -0
package/dist/executor/plugin-discovery.js +68 -1
package/dist/executor/plugin-discovery.js.map +1 -1
package/dist/executor/plugin-manager.d.ts +35 -0
package/dist/executor/plugin-manager.js +109 -0
package/dist/executor/plugin-manager.js.map +1 -0
package/dist/feishu/slash-commands.d.ts +77 -0
package/dist/feishu/slash-commands.js +188 -0
package/dist/feishu/slash-commands.js.map +1 -0
package/dist/gateway/card-builder.d.ts +18 -0
package/dist/gateway/card-builder.js +61 -1
package/dist/gateway/card-builder.js.map +1 -1
package/dist/gateway/feishu-gateway.d.ts +10 -0
package/dist/gateway/feishu-gateway.js +4 -0
package/dist/gateway/feishu-gateway.js.map +1 -1
package/dist/gateway/progress-card.d.ts +8 -0
package/dist/gateway/progress-card.js +16 -0
package/dist/gateway/progress-card.js.map +1 -1
package/dist/index.d.ts +2 -0
package/dist/index.js +210 -28
package/dist/index.js.map +1 -1
package/dist/session/commands.d.ts +16 -1
package/dist/session/commands.js +77 -17
package/dist/session/commands.js.map +1 -1
package/dist/session/plugin-command.d.ts +14 -0
package/dist/session/plugin-command.js +110 -0
package/dist/session/plugin-command.js.map +1 -0
package/dist/session/session-store.d.ts +14 -1
package/dist/session/session-store.js +15 -0
package/dist/session/session-store.js.map +1 -1
package/dist/types.d.ts +69 -1
package/dist/util/open-browser.d.ts +1 -0
package/dist/util/open-browser.js +20 -0
package/dist/util/open-browser.js.map +1 -0
package/dist/util/server-url.d.ts +3 -0
package/dist/util/server-url.js +10 -0
package/dist/util/server-url.js.map +1 -0
package/dist/web/config-api.d.ts +52 -0
package/dist/web/config-api.js +186 -0
package/dist/web/config-api.js.map +1 -0
package/dist/web/lifecycle.d.ts +52 -0
package/dist/web/lifecycle.js +167 -0
package/dist/web/lifecycle.js.map +1 -0
package/dist/web/model-list.d.ts +36 -0
package/dist/web/model-list.js +101 -0
package/dist/web/model-list.js.map +1 -0
package/dist/web/server.d.ts +22 -0
package/dist/web/server.js +618 -0
package/dist/web/server.js.map +1 -0
package/dist/web/update.d.ts +26 -0
package/dist/web/update.js +64 -0
package/dist/web/update.js.map +1 -0
package/package.json +2 -1

package/assets/web/index.html ADDED Viewed

@@ -0,0 +1,1769 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>飞书ClaudeCode桥接器</title>
+<style>
+  :root {
+    --bg: #f5f6f8; --card: #fff; --border: #e2e5ea; --text: #1f2329; --muted: #646a73;
+    --primary: #3370ff; --danger: #f54f4f; --ok: #34c724; --warn: #ff8800; --radius: 10px;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; font: 14px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); }
+  header { background: var(--card); border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 10; }
+  header h1 { font-size: 17px; margin: 0; display: flex; align-items: center; gap: 9px; }
+  header .meta { color: var(--muted); font-size: 12px; }
+  header .spacer { flex: 1; }
+  .layout { display: flex; min-height: calc(100vh - 61px); }
+  nav { width: 170px; padding: 16px 8px; background: var(--card); border-right: 1px solid var(--border); }
+  nav button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 14px; margin: 2px 0; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text); }
+  nav button .ico { display: flex; align-items: center; }
+  nav button:hover { background: var(--bg); }
+  nav button.active { background: #eef3ff; color: var(--primary); font-weight: 600; }
+  main { flex: 1; padding: 20px 32px; }
+  @media (min-width: 1800px) { main { max-width: 1560px; } }
+  @media (max-width: 860px) {
+    .layout { flex-direction: column; }
+    nav { width: auto; display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border); }
+  }
+  .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
+  .card h3 { margin: 0 0 4px; font-size: 15px; }
+  .card .desc { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
+  label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; }
+  input[type=text], input[type=password], input[type=number], select, textarea {
+    width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font: inherit; background: #fff; color: var(--text);
+  }
+  input:focus, select:focus, textarea:focus { outline: 2px solid #c9d8ff; border-color: var(--primary); }
+  textarea { font-family: Consolas, monospace; font-size: 12.5px; min-height: 90px; resize: vertical; }
+  .row { display: flex; gap: 12px; } .row > * { flex: 1; min-width: 0; }
+  /* .row 内按钮按内容宽：内联 flex:0 展开为 0 1 0% 会把按钮压到单字宽（一字一行），一律走类规则 */
+  .row > .btn, .row > .btn-wrap { flex: 0 0 auto; align-self: end; }
+  .btn-wrap { display: flex; }
+  .btn, nav button, .savebar .btn, .subtabs button, .chip { white-space: nowrap; }
+  .btn { padding: 7px 16px; border-radius: 7px; border: 1px solid var(--border); background: var(--card); cursor: pointer; font: inherit; }
+  .btn:hover { border-color: var(--primary); color: var(--primary); }
+  .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
+  .btn.danger { color: var(--danger); } .btn.danger:hover { border-color: var(--danger); }
+  .btn.sm { padding: 3px 10px; font-size: 12px; }
+  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
+  .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-family: Consolas, monospace; }
+  .chip button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 13px; }
+  .chip button:hover { color: var(--danger); }
+  table { width: 100%; border-collapse: collapse; font-size: 13px; }
+  th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
+  th { color: var(--muted); font-weight: 500; font-size: 12px; }
+  .tag { display: inline-block; padding: 1px 8px; border-radius: 5px; font-size: 11.5px; }
+  .tag.ok { background: #e8f7e6; color: var(--ok); } .tag.off { background: var(--bg); color: var(--muted); }
+  .tag.warn { background: #fff3e0; color: var(--warn); } .tag.err { background: #fee; color: var(--danger); }
+  .radio-row { display: flex; gap: 20px; margin: 8px 0; }
+  .radio-row label { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text); font-size: 13.5px; cursor: pointer; }
+  #toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); background: #2b2f36; color: #fff; padding: 10px 22px; border-radius: 8px; font-size: 13px; opacity: 0; transition: opacity .25s; pointer-events: none; max-width: 80vw; z-index: 100; }
+  #toast.show { opacity: .95; }
+  #toast.err { background: var(--danger); }
+  /* 桥接器重启/已离线全页遮罩 */
+  .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; }
+  .hint { font-size: 12px; color: var(--muted); }
+  .footer-note { color: var(--muted); font-size: 12px; margin-top: 8px; }
+  pre.report { background: #f7f8fa; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 12px; overflow: auto; white-space: pre-wrap; }
+  .savebar { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
+  .savebar .state { font-size: 12px; color: var(--warn); }
+  .card h3 .dirty-dot { display: none; margin-left: 6px; font-size: 11.5px; color: var(--warn); font-weight: 500; }
+  .stale-bar { background: #fff3e0; color: var(--warn); padding: 8px 24px; font-size: 13px; border-bottom: 1px solid var(--border); }
+  .stale-bar[hidden] { display: none; }
+  /* 右侧抽屉：应用编辑 / 斜杆命令编辑 / 档案编辑共用 */
+  .drawer-mask { position: fixed; inset: 0; background: rgba(15,19,24,.36); z-index: 50; display: flex; justify-content: flex-end; }
+  .drawer-mask[hidden] { display: none; }
+  .drawer { width: min(980px, 94vw); height: 100%; background: var(--card); border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.08); }
+  .drawer > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--border); }
+  .drawer > header h3 { margin: 0; font-size: 15px; }
+  .drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
+  .drawer-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; }
+  .drawer-foot .spacer { flex: 1; }
+  .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>
+<header>
+  <h1><svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="#3370ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>飞书ClaudeCode桥接器</h1>
+  <span class="meta" id="hMeta">加载中…</span>
+  <span class="spacer"></span>
+  <span class="meta" id="hFirstRun"></span>
+</header>
+<div class="stale-bar" id="staleBar" hidden>⚠️ 配置页服务进程为旧版本（页面文件已更新）：进程启停 / 重启 / 一键更新需重启桥接器（<code>lcb start</code> 或页面所在进程）后可用。</div>
+<div class="layout">
+  <nav id="nav"></nav>
+  <main id="main"></main>
+</div>
+<div class="drawer-mask" id="drawerMask" hidden>
+  <aside class="drawer" role="dialog" aria-modal="true">
+    <header><h3 id="drawerTitle"></h3><button class="btn" id="drawerClose">✕ 关闭</button></header>
+    <div class="drawer-body" id="drawerBody"></div>
+    <footer class="drawer-foot" id="drawerFoot"></footer>
+  </aside>
+</div>
+<div id="toast"></div>
+<script>
+'use strict';
+// ============ 全局状态 ============
+// 一步保存：无全局 savebar。抽屉编辑自带「保存/取消」（打开前拍快照）；页内表单卡各自带
+// 保存按钮（dirtyCards 跟踪未保存卡）；行内低风险操作（权限增删）直接落盘
+const S = { status: null, doc: null, firstRun: false, dirtyCards: new Set() };
+const $ = (sel, el = document) => el.querySelector(sel);
+const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+function toast(msg, isErr) {
+  const t = $('#toast');
+  t.textContent = msg;
+  t.className = 'show' + (isErr ? ' err' : '');
+  clearTimeout(t._h);
+  t._h = setTimeout(() => { t.className = ''; }, isErr ? 6000 : 3200);
+}
+async function api(method, path, body) {
+  const res = await fetch(path, {
+    method,
+    headers: body !== undefined ? { 'Content-Type': 'application/json; charset=utf-8' } : undefined,
+    body: body !== undefined ? JSON.stringify(body) : undefined,
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  return data;
+}
+/** doc 深拷贝快照（抽屉取消回滚 / 打开前留存） */
+const snapDoc = () => JSON.parse(JSON.stringify(S.doc));
+/** 页内表单卡未保存标记：cardDirty('ws', true) 显示卡头「未保存」小标 + 卡底保存行，并记入集合 */
+function cardDirty(id, on) {
+  if (on) S.dirtyCards.add(id); else S.dirtyCards.delete(id);
+  const dot = $(`#dirty-${id}`);
+  if (dot) dot.style.display = on ? 'inline' : 'none'; // '' 会回落到 CSS 默认 display:none，圆点永不显示
+  const bar = $(`#bar-${id}`);
+  if (bar) bar.style.display = on ? 'flex' : 'none';
+}
+/** 整卡重渲染（innerHTML 重建）后回放各卡 dirty 可见性：集合是真相源，新建的 bar/dot 默认隐藏 */
+function applyDirty() { for (const id of S.dirtyCards) cardDirty(id, true); }
+/** 卡级保存行（页内表单卡通用）：保存 = saveDoc 落盘；还原 = 重拉磁盘配置 */
+const saveBarHtml = (id) => `<div class="savebar" id="bar-${id}" style="display:none"><span class="state">有未保存的修改</span><span style="flex:1"></span><button class="btn" data-discard="${id}">还原</button><button class="btn primary" data-save="${id}">保存</button></div>`;
+const dirtyDotHtml = (id) => `<span class="dirty-dot" id="dirty-${id}">· 未保存</span>`;
+function bindSaveBar(el, id) {
+  el.querySelector(`[data-save="${id}"]`)?.addEventListener('click', () => void saveDoc());
+  el.querySelector(`[data-discard="${id}"]`)?.addEventListener('click', async () => {
+    await refresh();
+    toast('已还原为磁盘配置');
+  });
+}
+/** 全量 PUT 落盘（所有保存路径共用）；返回是否成功（失败保持当前编辑态） */
+async function saveDoc() {
+  if (S.firstRun) return false;
+  try {
+    const r = await api('PUT', '/api/config', S.doc);
+    if (r.restartRequired?.length) toast(`已保存。注意：${r.restartRequired.join('、')} 段改动需重启 lcb start 后生效`, true);
+    else toast('已保存（运行中的桥接器下一条消息自动生效）');
+    S.dirtyCards.clear();
+    await refresh();
+    return true;
+  } 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>`;
+const ICONS = {
+  overview: '<rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/>',
+  apps: '<path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>',
+  workspaces: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
+  claude: '<circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/>',
+  permissions: '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1 1 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>',
+  slash: '<path d="m4 17 6-6-6-6"/><path d="M12 19h8"/>',
+  plugins: '<path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.23 8.77c.24-.24.581-.353.917-.303.515.077.877.528 1.073 1.01a2.5 2.5 0 1 0 3.259-3.259c-.482-.196-.933-.558-1.01-1.073-.05-.336.062-.676.303-.917l1.525-1.525A2.402 2.402 0 0 1 12 1.998c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z"/>',
+};
+const TABS = [
+  { key: 'overview', title: '概览', icon: 'overview' },
+  { key: 'apps', title: '飞书应用', icon: 'apps' },
+  { key: 'workspaces', title: '工作区', icon: 'workspaces' },
+  { key: 'claude', title: 'Claude 认证', icon: 'claude' },
+  { key: 'permissions', title: '权限', icon: 'permissions' },
+  { key: 'slash', title: '斜杠命令', icon: 'slash' },
+  { key: 'plugins', title: '插件', icon: 'plugins' },
+];
+let activeTab = 'overview';
+function renderNav() {
+  $('#nav').innerHTML = TABS.map((t) =>
+    `<button data-k="${t.key}" class="${t.key === activeTab ? 'active' : ''}">${ico(ICONS[t.icon])}<span>${t.title}</span></button>`).join('');
+  $('#nav').querySelectorAll('button').forEach((b) =>
+    b.onclick = () => {
+      // 未保存保护：抽屉编辑中 / 页内表单卡有未保存改动 → 确认后才切换（切走即丢弃）
+      if (!$('#drawerMask').hidden) {
+        if (!window.confirm('编辑抽屉尚未保存，确定放弃修改并切换页面？')) return;
+        cancelDrawer();
+      } else if (S.dirtyCards.size) {
+        if (!window.confirm(`有 ${S.dirtyCards.size} 处未保存的修改，切换页面将丢弃。确定切换？`)) return;
+        S.dirtyCards.clear();
+      }
+      activeTab = b.dataset.k;
+      render();
+    });
+}
+// ============ 通用右侧抽屉 ============
+let drawerOnMount = null;
+let drawerSnap = null; // 抽屉打开前的 doc 快照（取消回滚用；远端 CRUD 抽屉不传 snap 则不回滚）
+/** 打开抽屉：snap = 调用方在 mutate doc 之前拍的快照；onMount({body, foot}) 里绑定事件 */
+function openDrawer({ title, bodyHtml, footHtml, onMount, snap }) {
+  $('#drawerTitle').textContent = title;
+  $('#drawerBody').innerHTML = bodyHtml;
+  $('#drawerFoot').innerHTML = footHtml || '';
+  $('#drawerMask').hidden = false;
+  drawerSnap = snap ?? null;
+  drawerOnMount = onMount || null;
+  drawerOnMount?.({ body: $('#drawerBody'), foot: $('#drawerFoot') });
+}
+function closeDrawer() {
+  if ($('#drawerMask').hidden) return;
+  $('#drawerMask').hidden = true;
+  drawerOnMount = null;
+  drawerSnap = null;
+}
+/** 抽屉取消：回滚到打开前快照（含「新增未保存」行一并撤销）并重渲染 */
+function cancelDrawer() {
+  if (drawerSnap) S.doc = JSON.parse(JSON.stringify(drawerSnap));
+  closeDrawer();
+  render();
+}
+// X / ESC / 点遮罩 = 取消：本地编辑抽屉（有快照）回滚未保存修改；远端 CRUD 抽屉直接关闭
+const dismissDrawer = () => (drawerSnap ? cancelDrawer() : closeDrawer());
+$('#drawerClose').onclick = dismissDrawer;
+$('#drawerMask').addEventListener('mousedown', (e) => { if (e.target === e.currentTarget) dismissDrawer(); });
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape') dismissDrawer(); });
+function render() {
+  renderNav();
+  if (S.firstRun) return renderBootstrap();
+  const fn = { overview: renderOverview, apps: renderApps, workspaces: renderWorkspaces,
+    claude: renderClaude, permissions: renderPermissions, slash: renderSlash, plugins: renderPlugins }[activeTab];
+  $('#main').innerHTML = '';
+  fn($('#main'));
+}
+// ============ 首装向导（bootstrap） ============
+function renderBootstrap() {
+  $('#main').innerHTML = `
+  <div class="card">
+    <h3>👋 欢迎使用 lark-claudecode-bridge</h3>
+    <div class="desc">首次安装：完成下面三步即可开始使用。需要先在 <a href="https://open.feishu.cn/app" target="_blank">飞书开放平台</a> 创建应用并启用机器人能力（详见 README）。建议为每个应用填写名字——概览页与飞书 /status 将显示该名字，缺省显示 App ID。</div>
+    <h3 style="margin-top:16px">① 飞书应用凭证</h3>
+    <div id="bsApps"></div>
+    <button class="btn sm" id="bsAddApp">+ 再添一个应用（多机器人）</button>
+    <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>
+        <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">
+      <label><input type="radio" name="bsMode" value="skip" checked> 使用本机已有 ~/.claude 登录</label>
+      <label><input type="radio" name="bsMode" value="managed"> 填 API Key / Token（无需本机登录）</label>
+    </div>
+    <div id="bsManaged" style="display:none">
+      <div class="radio-row">
+        <label><input type="radio" name="bsCred" value="auth_token" checked> AUTH_TOKEN（中转站常用）</label>
+        <label><input type="radio" name="bsCred" value="api_key"> API_KEY（官方）</label>
+      </div>
+      <div class="row">
+        <div><label id="bsCredLabel">Auth Token</label><input type="password" id="bsCred" placeholder="sk-…"></div>
+        <div><label>BASE_URL（中转站端点，官方留空）</label><input type="text" id="bsBaseUrl" placeholder="https://relay.example.com"></div>
+      </div>
+      <label>模型（如 claude-sonnet-5，可留空）</label><input type="text" id="bsModel" placeholder="claude-sonnet-5">
+    </div>
+    <div style="margin-top:20px">
+      <button class="btn primary" id="bsSubmit" style="padding:9px 28px">完成配置</button>
+      <span class="hint">提交后运行 <code>lcb start</code> 启动桥接器</span>
+    </div>
+  </div>`;
+  const appsBox = $('#bsApps');
+  const addAppRow = () => {
+    const div = document.createElement('div');
+    div.className = 'row';
+    div.style.marginBottom = '8px';
+    div.innerHTML = `
+      <div><label>App ID（cli_ 开头）</label><input type="text" class="bs-appid" placeholder="cli_aabbccddeeff0011"></div>
+      <div><label>应用名字（建议填写）</label><input type="text" class="bs-name" placeholder="如：素材收集（概览/状态页显示用）"></div>
+      <div><label>App Secret</label><input type="password" class="bs-secret" placeholder=""></div>
+      <div class="btn-wrap"><button class="btn sm danger bs-del">删除</button></div>`;
+    div.querySelector('.bs-del').onclick = () => div.remove();
+    appsBox.appendChild(div);
+  };
+  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';
+  });
+  document.querySelectorAll('input[name=bsCred]').forEach((r) => r.onchange = () => {
+    $('#bsCredLabel').textContent = $('[name=bsCred]:checked').value === 'api_key' ? 'API Key' : 'Auth Token';
+  });
+  $('#bsSubmit').onclick = async () => {
+    const apps = [...appsBox.querySelectorAll('.row')].map((row) => {
+      const appId = row.querySelector('.bs-appid').value.trim();
+      const name = row.querySelector('.bs-name').value.trim();
+      const secret = row.querySelector('.bs-secret').value.trim();
+      return { app_id: appId, ...(name ? { name } : {}), app_secret: secret };
+    }).filter((a) => a.app_id && a.app_secret);
+    const ws = { name: $('#bsWsName').value.trim(), path: $('#bsWsPath').value.trim() };
+    if (!apps.length) return toast('至少需要一个有效的应用（App ID + App Secret）', true);
+    if (!ws.name || !ws.path) return toast('工作区名字与路径不能为空', true);
+    const body = { apps, workspace: ws };
+    if ($('[name=bsMode]:checked').value === 'managed') {
+      const cred = $('[name=bsCred]:checked').value;
+      const val = $('#bsCred').value.trim();
+      if (!val) return toast('请填写 Auth Token / API Key', true);
+      body.claude = { mode: 'managed', [cred]: val };
+      const baseUrl = $('#bsBaseUrl').value.trim();
+      const model = $('#bsModel').value.trim();
+      if (baseUrl) body.claude.base_url = baseUrl;
+      if (model) body.claude.model = model;
+    }
+    try {
+      const r = await api('POST', '/api/bootstrap', body);
+      toast(r.message || '配置完成');
+      await refresh();
+      toast('✅ 配置已写入，请运行 lcb start（若正在运行请重启）');
+    } catch (e) { toast(e.message, true); }
+  };
+}
+// ============ 概览 ============
+// 桥接器启停 / 版本更新（宿主进程管理：embedded 页面随进程生死，独立页面经 PID 跨进程操作）
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+const UPD = { checkedAt: 0, data: null };
+function showMask(inner) {
+  let m = $('#brMask');
+  if (!m) {
+    m = document.createElement('div');
+    m.id = 'brMask'; m.className = 'br-mask';
+    document.body.appendChild(m);
+  }
+  m.innerHTML = `<div class="br-mask-card">${inner}</div>`;
+  m.style.display = 'flex';
+}
+function hideMask() { const m = $('#brMask'); if (m) m.style.display = 'none'; }
+/** 启停请求的容错：embedded 停止/重启时进程退出可能先于响应到达，网络断开视为已受理 */
+async function bridgeActionSafe(op) {
+  try { return await api('POST', '/api/bridge/action', { op }); }
+  catch (e) {
+    if (/fetch|network|load failed/i.test(e.message)) return { ok: true, message: '已提交（连接关闭属预期）' };
+    throw e;
+  }
+}
+/** 等配置页服务恢复（重启轮询）：连续两次成功才确认，排除旧进程残影 */
+async function waitServerBack(timeoutMs = 45000) {
+  const t0 = Date.now();
+  await sleep(2500); // 留给旧进程退场：立刻探测可能命中尚未退出的旧 server
+  while (Date.now() - t0 < timeoutMs) {
+    try {
+      await api('GET', '/api/status');
+      await sleep(1000);
+      await api('GET', '/api/status');
+      return;
+    } catch {}
+    await sleep(1500);
+  }
+  throw new Error('重启超时：请手动刷新页面查看状态');
+}
+async function startFlow() {
+  try {
+    const r = await bridgeActionSafe('start');
+    toast(r.message || '✅ 已在后台启动');
+    setTimeout(() => refresh(), 2500); // 后台进程写 PID / 起长连接需数秒
+    setTimeout(() => refresh(), 7000);
+  } catch (e) { toast(e.message, true); }
+}
+async function stopFlow() {
+  const embedded = !!S.status?.embedded;
+  const msg = embedded
+    ? '停止后本配置页将随桥接器进程一同关闭。\n之后可运行 lcb ui 重开配置页（并在其中重新启动桥接器）。确定停止？'
+    : '停止后机器人将不再响应消息。确定停止桥接器进程？';
+  if (!confirm(msg)) return;
+  try {
+    const r = await bridgeActionSafe('stop');
+    if (embedded) {
+      toast(r.message || '正在停止…');
+      await sleep(2500);
+      try { await api('GET', '/api/status'); await refresh(); } // 进程仍在（异常场景）：正常刷新
+      catch { showMask('<b>桥接器已停止</b><div class="hint" style="margin-top:8px">本配置页已随进程离线。重新打开请运行 lcb ui；启动桥接器请运行 lcb start。</div>'); }
+    } else {
+      toast(r.message || '已发送停止信号');
+      setTimeout(() => refresh(), 1500); // 硬终止无 PID 清理：陈旧文件由探活兜底删除
+      setTimeout(() => refresh(), 4000);
+    }
+  } catch (e) { toast(e.message, true); }
+}
+async function restartFlow() {
+  if (S.status?.embedded) {
+    showMask('<div class="br-spin"></div>正在重启桥接器，页面将自动恢复…');
+    try { await bridgeActionSafe('restart'); } catch (e) { hideMask(); toast(e.message, true); return; }
+    try { await waitServerBack(); hideMask(); toast('✅ 桥接器已重启'); await refresh(); }
+    catch (e) { hideMask(); toast(e.message, true); }
+  } else {
+    try { const r = await bridgeActionSafe('restart'); toast(r.message || '正在重启…'); }
+    catch (e) { toast(e.message, true); return; }
+    setTimeout(() => refresh(), 4000);
+    setTimeout(() => refresh(), 10000);
+  }
+}
+function renderUpdateResult() {
+  const el = $('#updLatest');
+  const r = UPD.data;
+  if (!el) return;
+  if (!r) { el.innerHTML = '<span class="hint">未检查</span>'; return; }
+  el.innerHTML = r.hasUpdate
+    ? `<span class="tag warn">有新版本</span> <span class="chip">v${esc(r.latest)}</span>`
+    : `<span class="tag ok">已是最新</span> <span class="chip">v${esc(r.latest)}</span>`;
+  const area = $('#updArea');
+  if (!area) return;
+  if (r.hasUpdate && r.mode === 'global') {
+    area.innerHTML = '<button class="btn primary" id="btnUpdRun">一键更新</button>';
+    $('#btnUpdRun').onclick = runUpdateFlow;
+  } else if (r.hasUpdate) {
+    area.innerHTML = '<span class="hint">当前非 npm 全局安装运行，请手动更新</span>';
+  } else area.innerHTML = '';
+}
+async function doCheckUpdate() {
+  const el = $('#updLatest'); if (!el) return;
+  el.innerHTML = '<span class="hint">检查中…</span>';
+  try {
+    UPD.data = await api('GET', '/api/update/check');
+    UPD.checkedAt = Date.now();
+    renderUpdateResult();
+  } catch (e) {
+    el.innerHTML = `<span class="hint">检查失败：${esc(e.message)}</span>`;
+  }
+}
+async function runUpdateFlow() {
+  const running = S.status?.embedded || S.status?.bridge?.running;
+  const extra = running ? '，完成后自动重启桥接器（页面将短暂失联后自动恢复）' : '（桥接器未在运行，下次启动生效）';
+  if (!confirm(`将通过 npm 安装最新版本${extra}，可能需要 1-2 分钟。继续？`)) return;
+  const btn = $('#btnUpdRun');
+  if (btn) { btn.disabled = true; btn.textContent = '更新中…'; }
+  try {
+    await api('POST', '/api/update/run');
+    UPD.checkedAt = 0;
+    if (running) await restartFlow();
+    else toast('✅ 更新完成，下次启动生效');
+    await refresh();
+  } catch (e) {
+    toast(`更新失败：${e.message}`, true);
+    renderUpdateResult(); // 恢复按钮
+  }
+}
+async function renderOverview(el) {
+  const st = S.status || {};
+  const claudeTag = st.claude?.hasAuth === null ? '<span class="tag off">未知</span>'
+    : st.claude?.hasAuth ? '<span class="tag ok">已就绪</span>' : '<span class="tag err">未认证</span>';
+  const stale = !st.bridge; // 旧版本进程（API 无 bridge 字段）：进程托管功能整体不可用
+  const br = stale ? { running: st.embedded === true, pid: null, spawnable: false } : st.bridge;
+  const ctl = stale
+    ? '<div class="hint" style="margin-top:10px">⚠️ 配置页服务进程为旧版本，页面启停 / 重启 / 更新不可用：请重启桥接器（lcb start）后刷新本页。</div>'
+    : br.spawnable === false
+    ? '<div class="hint" style="margin-top:10px">当前运行方式不支持页面托管启停（如源码运行），请在服务器上手动运行 lcb start。</div>'
+    : `<div style="display:flex; gap:10px; margin-top:12px">${
+        br.running
+          ? '<button class="btn" id="btnBrRestart">重启</button><button class="btn danger" id="btnBrStop">停止</button>'
+          : '<button class="btn primary" id="btnBrStart">启动</button>'
+      }</div>
+      <div class="hint" style="margin-top:8px">${st.embedded
+        ? '本页随桥接器进程运行：停止后页面将离线（可运行 lcb ui 重开）；重启会短暂失联后自动恢复。'
+        : '本页独立运行（lcb ui）：在此启动的桥接器为后台进程，运行日志见 ~/.lark-claudecode-bridge/bridge.log。'}</div>`;
+  el.innerHTML = `
+  <div class="card">
+    <h3>运行状态</h3>
+    <table>
+      <tr><td>版本</td><td>v${esc(st.version)}</td></tr>
+      <tr><td>模式</td><td>${st.embedded ? '随 lcb start 常驻' : 'lcb ui 独立（桥接器未随本页启动）'}</td></tr>
+      <tr><td>桥接器进程</td><td>${stale
+        ? (st.embedded ? '<span class="tag warn">运行中（旧版本进程）</span>' : '<span class="tag off">状态未知（旧版本进程）</span>')
+        : br.running
+          ? `<span class="tag ok">运行中</span> <span class="hint">PID ${esc(br.pid)}</span>`
+          : '<span class="tag off">未运行</span>'}</td></tr>
+      <tr><td>配置文件</td><td><code>${esc(st.configPath)}</code></td></tr>
+      <tr><td>配置页</td><td><code>${esc(location.host)}</code></td></tr>
+      <tr><td>Claude 认证</td><td>${claudeTag}（模式：${esc(st.claude?.mode || 'inherit')}）</td></tr>
+    </table>
+    ${ctl}
+    <div class="desc" style="margin-top:10px">${st.claude?.hasAuth === false ? '⚠️ 未检测到认证：到「Claude 认证」页填写，或在配置页所在机器执行 claude login。' : ''}</div>
+  </div>
+  <div class="card">
+    <h3>版本与更新</h3>
+    <table>
+      <tr><td>当前版本</td><td><span class="chip">v${esc(st.version)}</span></td></tr>
+      <tr><td>最新版本</td><td id="updLatest"><span class="hint">未检查</span></td></tr>
+    </table>
+    <div style="display:flex; gap:10px; margin-top:12px; align-items:center">
+      <button class="btn" id="btnUpdCheck">检查更新</button>
+      <span id="updArea"></span>
+    </div>
+  </div>
+  <div class="card">
+    <h3>机器人应用</h3>
+    <table><thead><tr><th>名称</th><th>App ID</th><th>状态</th></tr></thead><tbody>
+    ${(st.apps || []).map((a) => `<tr><td>${esc(a.name)}</td><td><code>${esc(a.appId)}</code></td><td>${
+      a.started === true ? '<span class="tag ok">运行中</span>' : a.started === false ? '<span class="tag err">启动失败</span>' : '<span class="tag off">未随本页启动</span>'
+    }</td></tr>`).join('') || '<tr><td colspan="3" class="hint">无</td></tr>'}
+    </tbody></table>
+  </div>
+  <div class="card">
+    <h3>常用命令</h3>
+    <div class="desc">在飞书聊天框输入 <code>/</code> 触发；其它 / 开头消息原文透传给 Claude Code。斜杠面板需先到「斜杠命令」页注册（补齐内置命令）。</div>
+    <table><thead><tr><th style="width:150px">命令</th><th>说明</th></tr></thead><tbody>
+    ${(st.commands || []).map((c) => `<tr><td><code>/${esc(c.command)}</code></td><td>${esc(c.description)}</td></tr>`).join('') || '<tr><td colspan="2" class="hint">无</td></tr>'}
+    </tbody></table>
+  </div>
+  <div class="card">
+    <h3>常用指引</h3>
+    <div class="desc">飞书端与机器人对话即可使用；<code>/help</code> 查看全部命令。配置修改后：<b>应用 / 认证 / server 段需重启 lcb start</b>，工作区 / 权限 / 触发词下一条消息自动生效。</div>
+  </div>`;
+  // 启停按钮 + 版本更新；自动检查 30s 节流（切回概览 tab 不重复打 npm）
+  const bind = (id, fn) => { const b = $(id); if (b) b.onclick = fn; };
+  bind('#btnBrStart', startFlow); bind('#btnBrStop', stopFlow); bind('#btnBrRestart', restartFlow);
+  bind('#btnUpdCheck', doCheckUpdate);
+  if (UPD.data && Date.now() - UPD.checkedAt < 30000) renderUpdateResult();
+  else doCheckUpdate();
+}
+// ============ 应用（列表 + 抽屉编辑；输入实时写回 S.doc.apps，抽屉「保存」一次落盘） ============
+function renderApps(el) {
+  const apps = S.doc.apps || (S.doc.apps = []);
+  el.innerHTML = `
+  <div class="card">
+    <h3>飞书应用（机器人）</h3>
+    <div class="desc">每个应用一条独立长连接与会话池。点击行或「编辑」在抽屉中配置；App Secret 已脱敏，留空 = 保持不变。凭证 / 名称 / 域名 / 默认工作区 / 并发 / 人格 / 环境变量改动需重启 lcb start；触发词与显式插件热生效。</div>
+    <div style="display:flex;justify-content:flex-end;margin-bottom:10px">
+      <button class="btn primary" id="addApp">+ 新增应用</button>
+    </div>
+    <table>
+      <thead><tr><th>名称</th><th>App ID</th><th style="width:80px">域名</th><th>默认工作区</th><th style="width:110px">状态</th><th style="width:64px"></th></tr></thead>
+      <tbody id="appsBody"></tbody>
+    </table>
+    <div class="footer-note">⚠️ 应用段改动需重启 lcb start 后生效（触发词 / 显式插件除外，下一条消息自动生效）。</div>
+  </div>`;
+  const statusTag = (app) => {
+    const st = S.status?.apps?.find((s) => s.name === (app.name || app.app_id))?.started;
+    return st === true ? '<span class="tag ok">运行中</span>'
+      : st === false ? '<span class="tag err">启动失败</span>'
+      : '<span class="tag off">未随本页启动</span>';
+  };
+  $('#appsBody').innerHTML = apps.map((app, i) => `
+    <tr data-i="${i}" style="cursor:pointer">
+      <td><b>${esc(app.name || app.app_id || '（未命名）')}</b></td>
+      <td><code>${esc(app.app_id || '')}</code></td>
+      <td>${esc(app.domain === 'lark' ? 'lark' : 'feishu')}</td>
+      <td>${esc(app.default_workspace || '（全局默认）')}</td>
+      <td>${statusTag(app)}</td>
+      <td><button class="btn sm">编辑</button></td>
+    </tr>`).join('');
+  $('#appsBody').querySelectorAll('tr').forEach((tr) =>
+    tr.onclick = () => openAppDrawer(apps, Number(tr.dataset.i), el));
+  $('#addApp').onclick = () => {
+    const snap = snapDoc(); // 快照先于 push：取消时连同新增空行一起回滚
+    apps.push({ app_id: '', app_secret: '' });
+    renderApps(el);
+    openAppDrawer(apps, apps.length - 1, el, snap);
+  };
+}
+/**
+ * 应用编辑抽屉：输入实时 mutate app 对象，「保存」PUT 落盘（applySecrets / 注文保护链路零改动）。
+ * secret 语义逐字保留：非空 = 明文写入；空 = 保持脱敏对象（PUT 端按 app_id 回填磁盘现值）。
+ * 「取消」/ X / ESC = 回滚到打开前快照（新增未保存的应用行一并撤销）。
+ */
+function openAppDrawer(apps, idx, el, snap) {
+  const app = apps[idx];
+  const secret = app.app_secret || {};
+  const wsNames = (S.doc.workspaces || []).map((w) => w.name || '').filter(Boolean);
+  const globalDef = S.doc.defaults?.workspace || '';
+  openDrawer({
+    title: `应用：${app.name || app.app_id || '（新应用）'}`,
+    snap: snap ?? snapDoc(),
+    bodyHtml: `
+      <div class="row">
+        <div><label>应用名字（概览页与飞书 /status 显示用，缺省取 App ID）</label>
+          <input type="text" data-f="name" value="${esc(app.name || '')}" placeholder="素材收集"></div>
+        <div><label>App ID</label>
+          <input type="text" data-f="app_id" value="${esc(app.app_id || '')}" placeholder="cli_…"></div>
+      </div>
+      <label>App Secret ${secret.secretSet ? `（已设置 ${esc(secret.secretHint)}，留空不改）` : ''}</label>
+      <input type="password" data-f="app_secret" placeholder="${secret.secretSet ? '••••••••（留空保持不变）' : '未设置'}">
+      <div class="row">
+        <div><label>域名</label><select data-f="domain">
+          <option value="" ${!app.domain || app.domain === 'feishu' ? 'selected' : ''}>feishu（国内）</option>
+          <option value="lark" ${app.domain === 'lark' ? 'selected' : ''}>lark（国际）</option>
+        </select></div>
+        <div><label>默认工作区${globalDef ? `（缺省用全局默认：${esc(globalDef)}）` : '（缺省用全局默认）'}</label>
+          <select data-f="default_workspace">
+            <option value="" ${!app.default_workspace ? 'selected' : ''}>（全局默认）</option>
+            ${wsNames.map((n) => `<option value="${esc(n)}" ${app.default_workspace === n ? 'selected' : ''}>${esc(n)}</option>`).join('')}
+          </select></div>
+        <div><label>并发上限（1-100）</label>
+          <input type="number" data-f="concurrency" min="1" max="100" value="${esc(app.concurrency ?? '')}" placeholder="缺省用全局"></div>
+      </div>
+      <label>人格补充（追加到该机器人每个会话的 system prompt，多机器人差异化定位；改动需重启生效）</label>
+      <textarea data-f="append_system_prompt" placeholder="你是一个素材收集助手…">${esc(app.append_system_prompt || '')}</textarea>
+      <h4 style="margin:18px 0 2px;font-size:13.5px">触发词（命中即改写消息后再发给 Claude；下一条消息热生效）</h4>
+      <div class="hint" style="margin-bottom:6px">match 以 <code>/</code> 开头 = 消息首词精确匹配，否则 = 关键词包含；rewrite 可用 <code>{text}</code>=原文全文、<code>{args}</code>=首词后的参数；本地命令（/stop 等）不受影响；按序首个命中生效。</div>
+      <table><thead><tr><th style="width:42%">match</th><th>rewrite</th><th style="width:44px"></th></tr></thead><tbody data-list="triggers"></tbody></table>
+      <button class="btn sm" data-add="triggers" style="margin-top:6px">+ 添加规则</button>
+      <h4 style="margin:18px 0 2px;font-size:13.5px">显式插件（本地插件源码目录；同名优先于 ~/.claude 自动发现；热生效）</h4>
+      <div class="hint" style="margin-bottom:6px">须为包含 <code>.claude-plugin/plugin.json</code> 的目录；一般用户无须配置，多用于开发期直指源码。</div>
+      <table><thead><tr><th style="width:30%">name</th><th>path</th><th style="width:44px"></th></tr></thead><tbody data-list="plugins"></tbody></table>
+      <button class="btn sm" data-add="plugins" style="margin-top:6px">+ 添加插件</button>
+      <h4 style="margin:18px 0 2px;font-size:13.5px">环境变量（注入该机器人 Claude 子进程，覆盖本机同名值；改动需重启生效）</h4>
+      <div class="hint" style="margin-bottom:6px">~/.claude/settings.json 已配置的键会被 CLI 自身应用且优先，无须在此重复。</div>
+      <table><thead><tr><th style="width:38%">KEY</th><th>VALUE</th><th style="width:44px"></th></tr></thead><tbody data-list="env"></tbody></table>
+      <button class="btn sm" data-add="env" style="margin-top:6px">+ 添加变量</button>`,
+    footHtml: `<button class="btn danger" id="dwDel">删除应用</button><span class="spacer"></span><button class="btn" id="dwCancel">取消</button><button class="btn primary" id="dwSave">保存</button>`,
+    onMount: ({ body, foot }) => {
+      // ---- 普通字段（语义与旧卡片版逐字一致；改动只进内存，抽屉「保存」落盘） ----
+      body.querySelectorAll('[data-f]').forEach((input) => {
+        input.oninput = input.onchange = () => {
+          const f = input.dataset.f;
+          if (f === 'default_workspace') {
+            if (input.value) app.default_workspace = input.value; else delete app.default_workspace;
+            return;
+          }
+          if (f === 'app_secret') {
+            if (input.value.trim()) { app.app_secret = input.value; }
+            else if (typeof app.app_secret === 'string') { app.app_secret = { secretSet: secret.secretSet }; }
+            return;
+          }
+          if (f === 'concurrency') {
+            if (input.value.trim()) app.concurrency = Number(input.value); else delete app.concurrency;
+            return;
+          }
+          if (input.value.trim() || f === 'name' || f === 'app_id') { app[f] = input.value; }
+          else { delete app[f]; }
+        };
+      });
+      // ---- 触发词 / 显式插件：数组行编辑，实时写回 ----
+      const LIST_DEFS = {
+        triggers: { key: 'triggers', cols: [['match', '/produce 或 关键词'], ['rewrite', '请执行内容生产流程：{args}']] },
+        plugins: { key: 'plugins', cols: [['name', 'my-plugin'], ['path', 'F:/dev/my-plugin']] },
+      };
+      const renderPairList = (name) => {
+        const def = LIST_DEFS[name];
+        const list = app[def.key] || [];
+        const tb = body.querySelector(`[data-list="${name}"]`);
+        tb.innerHTML = list.map((item, i) => `
+          <tr>
+            ${def.cols.map(([col, ph]) => `<td><input type="text" data-l="${i}" data-c="${col}" value="${esc(item?.[col] ?? '')}" placeholder="${esc(ph)}"></td>`).join('')}
+            <td><button class="btn sm danger" data-rm="${i}">删</button></td>
+          </tr>`).join('');
+        tb.querySelectorAll('input[data-l]').forEach((input) => input.oninput = () => {
+          app[def.key][Number(input.dataset.l)][input.dataset.c] = input.value;
+        });
+        tb.querySelectorAll('button[data-rm]').forEach((b) => b.onclick = () => {
+          app[def.key].splice(Number(b.dataset.rm), 1);
+          if (!app[def.key].length) delete app[def.key];
+          renderPairList(name);
+        });
+      };
+      for (const name of Object.keys(LIST_DEFS)) renderPairList(name);
+      // ---- 环境变量：对象 ↔ 行数组同步（key 改名 / 删除即时生效到 app.env） ----
+      const envRows = Object.entries(app.env || {}).map(([key, value]) => ({ key, value: String(value) }));
+      const syncEnv = () => {
+        const obj = {};
+        for (const r of envRows) if (r.key.trim()) obj[r.key.trim()] = r.value;
+        if (Object.keys(obj).length) app.env = obj; else delete app.env;
+      };
+      const renderEnv = () => {
+        const tb = body.querySelector('[data-list="env"]');
+        tb.innerHTML = envRows.map((r, i) => `
+          <tr>
+            <td><input type="text" data-ei="${i}" data-c="key" value="${esc(r.key)}" placeholder="SOME_KEY"></td>
+            <td><input type="text" data-ei="${i}" data-c="value" value="${esc(r.value)}" placeholder="some-value"></td>
+            <td><button class="btn sm danger" data-rm="${i}">删</button></td>
+          </tr>`).join('');
+        tb.querySelectorAll('input[data-ei]').forEach((input) => input.oninput = () => {
+          envRows[Number(input.dataset.ei)][input.dataset.c] = input.value;
+          syncEnv();
+        });
+        tb.querySelectorAll('button[data-rm]').forEach((b) => b.onclick = () => {
+          envRows.splice(Number(b.dataset.rm), 1);
+          syncEnv();
+          renderEnv();
+        });
+      };
+      renderEnv();
+      // ---- 添加行 ----
+      body.querySelectorAll('[data-add]').forEach((b) => b.onclick = () => {
+        const name = b.dataset.add;
+        if (name === 'env') { envRows.push({ key: '', value: '' }); renderEnv(); return; }
+        const def = LIST_DEFS[name];
+        (app[def.key] = app[def.key] || []).push({ [def.cols[0][0]]: '', [def.cols[1][0]]: '' });
+        renderPairList(name);
+        body.querySelector(`[data-list="${name}"] tbody input`)?.focus();
+      });
+      // ---- 删除 / 保存 / 取消 ----
+      foot.querySelector('#dwDel').onclick = async () => {
+        if (apps.length <= 1) return toast('至少保留一个应用', true);
+        if (!window.confirm(`确认删除应用「${app.name || app.app_id || '未命名'}」？删除将立即保存生效。`)) return;
+        apps.splice(idx, 1);
+        if (await saveDoc()) closeDrawer();
+        else cancelDrawer(); // 落盘失败：回滚删除，保留编辑现场让用户重试
+      };
+      foot.querySelector('#dwCancel').onclick = cancelDrawer;
+      foot.querySelector('#dwSave').onclick = async () => {
+        // 清理半填的空行：triggers/plugins 行两列全空剔除；env 以 key 非空为准（syncEnv 已过滤）。数组空则整键删除
+        for (const name of Object.keys(LIST_DEFS)) {
+          const def = LIST_DEFS[name];
+          const list = app[def.key];
+          if (!Array.isArray(list)) continue;
+          const filtered = list.filter((item) => def.cols.some(([col]) => String(item?.[col] ?? '').trim()));
+          if (filtered.length) app[def.key] = filtered;
+          else delete app[def.key];
+        }
+        if (await saveDoc()) closeDrawer();
+      };
+    },
+  });
+}
+// ============ 工作区（行内编辑 + 卡级保存；改动落盘后热生效） ============
+function renderWorkspaces(el) {
+  const doc = S.doc;
+  doc.workspaces = doc.workspaces || [];
+  el.innerHTML = `
+  <div class="card">
+    <h3>工作区${dirtyDotHtml('ws')}</h3>
+    <div class="desc">Claude 的工作目录白名单。「开发工作流（code-dev）」类型：先出计划（飞书批准）+ 收尾汇总 diff。</div>
+    <div style="display:flex;justify-content:flex-end;margin-bottom:10px">
+      <button class="btn sm" id="wsAdd">+ 添加工作区</button>
+    </div>
+    <table><thead><tr><th style="width:180px">名字</th><th>路径</th><th style="width:170px">类型</th><th style="width:50px"></th></tr></thead>
+    <tbody id="wsBody"></tbody></table>
+    ${saveBarHtml('ws')}
+    <div class="footer-note">运行中的桥接器下一条消息自动生效，无需重启。</div>
+  </div>
+  <div class="card">
+    <h3>全局默认${dirtyDotHtml('def')}</h3>
+    <div class="row">
+      <div><label>默认工作区（defaults.workspace）</label><select id="defWs"></select></div>
+      <div><label>全局并发（concurrency）</label><input type="number" id="globalCc" min="1" max="100"></div>
+    </div>
+    ${saveBarHtml('def')}
+  </div>`;
+  bindSaveBar(el, 'ws');
+  bindSaveBar(el, 'def');
+  /** 重建默认工作区下拉选项：保留当前选中；现值不在工作区列表（手工编辑过的脏配置）时注入该值本身，防静默丢数据 */
+  const syncDefWsOptions = () => {
+    const sel = $('#defWs');
+    if (!sel) return;
+    const cur = doc.defaults?.workspace || '';
+    const names = doc.workspaces.map((w) => w.name || '').filter(Boolean);
+    const extra = cur && !names.includes(cur) ? [cur] : [];
+    sel.innerHTML = ['', ...names, ...extra].map((n) =>
+      `<option value="${esc(n)}"${n === cur ? ' selected' : ''}>${n === '' ? '（未设置）' : esc(n)}${extra.includes(n) ? '（配置中不存在）' : ''}</option>`).join('');
+  };
+  const body = $('#wsBody');
+  const renderRow = (ws, idx) => {
+    const tr = document.createElement('tr');
+    tr.innerHTML = `
+      <td><input type="text" data-f="name" value="${esc(ws.name || '')}"></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>
+      </select></td>
+      <td><button class="btn sm danger">删</button></td>`;
+    tr.querySelectorAll('[data-f]').forEach((input) => {
+      input.oninput = input.onchange = () => {
+        const f = input.dataset.f;
+        if (f === 'type') { if (input.value === 'code-dev') ws.type = 'code-dev'; else delete ws.type; }
+        else if (f === 'name') {
+          // 改名联动：全局默认指向旧名时同步，否则保存会因 defaults.workspace 不在工作区列表报错
+          if (doc.defaults?.workspace && doc.defaults.workspace === ws.name) {
+            doc.defaults = { ...(doc.defaults || {}), workspace: input.value };
+          }
+          ws.name = input.value;
+          syncDefWsOptions();
+        }
+        else ws[f] = input.value;
+        cardDirty('ws', true);
+      };
+    });
+    tr.querySelector('.btn').onclick = () => {
+      if (doc.workspaces.length <= 1) return toast('至少保留一个工作区', true);
+      doc.workspaces.splice(idx, 1);
+      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);
+  $('#wsAdd').onclick = () => { doc.workspaces.push({ name: '', path: '' }); cardDirty('ws', true); renderWorkspaces(el); };
+  syncDefWsOptions();
+  $('#defWs').onchange = () => { doc.defaults = { ...(doc.defaults || {}), workspace: $('#defWs').value }; cardDirty('def', true); };
+  $('#globalCc').value = doc.concurrency ?? 3;
+  $('#globalCc').oninput = () => { doc.concurrency = Number($('#globalCc').value) || 3; cardDirty('def', true); };
+  applyDirty(); // 增删行等操作先 cardDirty 再整卡重渲染：回放防止保存条/圆点随重建丢失
+}
+// ============ Claude 认证 ============
+/** 模型拉取公共逻辑：getBody() 组请求体（凭证仅携带本次输入的明文，空则不带给后端回落磁盘值） */
+async function pullModels(getBody, btn, datalistId) {
+  btn.disabled = true;
+  const old = btn.textContent;
+  btn.textContent = '拉取中…';
+  try {
+    const r = await api('POST', '/api/models/fetch', getBody());
+    const dl = document.getElementById(datalistId);
+    if (dl) dl.innerHTML = (r.models || []).map((m) => `<option value="${esc(m)}"></option>`).join('');
+    toast(`获取到 ${(r.models || []).length} 个模型：在模型框下拉选择，或继续手动输入`);
+  } catch (e) { toast(e.message, true); }
+  btn.disabled = false;
+  btn.textContent = old;
+}
+function renderClaude(el) {
+  const c = S.doc.claude || (S.doc.claude = {});
+  c.profiles = c.profiles || [];
+  const mode = c.mode || 'inherit';
+  const hasToken = c.auth_token?.secretSet, hasKey = c.api_key?.secretSet;
+  const credType = hasToken ? 'auth_token' : 'api_key';
+  const cur = S.status?.claude?.current || {};
+  const hint = (h) => h?.secretSet ? `已设置（${esc(h.secretHint)}）` : '未设置';
+  el.innerHTML = `
+  <div class="card">
+    <h3>当前生效配置</h3>
+    <div class="desc">认证模式与实际生效的值（凭证脱敏显示）。managed 模式改动保存后对后续任务即生效；模式切换需重启。</div>
+    <table>
+      <tr><td style="width:150px">认证模式</td><td>${mode === 'managed' ? 'bridge 托管（managed）' : '继承本机 ~/.claude（inherit）'}</td></tr>
+      <tr><td>BASE_URL</td><td>${cur.baseUrl ? `<code>${esc(cur.baseUrl)}</code>` : '<span class="hint">官方默认（api.anthropic.com）</span>'}</td></tr>
+      <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>' : ''}
+  </div>
+  <div class="card">
+    <h3>认证模式${dirtyDotHtml('claude')}</h3>
+    <div class="radio-row">
+      <label><input type="radio" name="mode" value="inherit" ${mode === 'inherit' ? 'checked' : ''}> 继承本机 ~/.claude（已在本机 claude login）</label>
+      <label><input type="radio" name="mode" value="managed" ${mode === 'managed' ? 'checked' : ''}> bridge 托管（填 API Key / Token，无需本机登录）</label>
+    </div>
+    <div id="managedBox" style="${mode === 'managed' ? '' : 'display:none'}">
+      <div class="desc" style="margin:6px 0 2px">常规用法：在下方「厂商档案」保存凭证后点「设为当前」即可，无须手动填写。</div>
+      <details style="margin-top:4px">
+        <summary style="cursor:pointer;font-size:13px;color:var(--muted)">高级：手动编辑当前生效凭证</summary>
+        <div style="margin-top:10px">
+          <div class="radio-row">
+            <label><input type="radio" name="cred" value="auth_token" ${credType === 'auth_token' ? 'checked' : ''}> AUTH_TOKEN（中转站常用，Bearer）</label>
+            <label><input type="radio" name="cred" value="api_key" ${credType === 'api_key' ? 'checked' : ''}> API_KEY（官方，x-api-key）</label>
+          </div>
+          <div class="row">
+            <div><label id="credLabel">Auth Token ${hasToken ? `（已设置 ${esc(c.auth_token.secretHint)}，留空不改）` : ''}</label>
+              <input type="password" id="credVal" placeholder="${hasToken || hasKey ? '留空保持不变' : 'sk-…'}"></div>
+            <div><label>BASE_URL（中转站端点，官方留空）</label><input type="text" id="baseUrl" value="${esc(c.base_url || '')}" placeholder="https://relay.example.com"></div>
+          </div>
+          <div class="row" style="align-items:end">
+            <div style="flex:1"><label>模型（写入 settings.json，可留空）</label>
+              <input type="text" id="model" list="modelList" value="${esc(c.model || '')}" placeholder="claude-sonnet-5 或任意厂商模型名">
+              <datalist id="modelList"></datalist></div>
+            <button class="btn" id="btnModels">拉取模型</button>
+          </div>
+          <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>
+  </div>
+  <div class="card" id="pfCard" style="${mode === 'managed' ? '' : 'display:none'}">
+    <h3>厂商档案</h3>
+    <div class="desc">保存多套厂商 / 中转站凭证，每个档案可维护多个候选模型（如 fable / opus / sonnet / haiku）。「设为当前」整套切换；点候选模型即时切换当前模型。档案在抽屉「保存」后即可切换。</div>
+    <div style="display:flex;justify-content:flex-end;margin-bottom:10px"><button class="btn sm primary" id="pfAdd">+ 新增档案</button></div>
+    <table><thead><tr><th style="width:120px">名称</th><th style="width:100px">凭证类型</th><th>BASE_URL</th><th>模型（点击切换）</th><th style="width:190px">操作</th></tr></thead>
+    <tbody id="pfBody"></tbody></table>
+  </div>`;
+  document.querySelectorAll('input[name=mode]').forEach((r) => r.onchange = () => {
+    c.mode = document.querySelector('input[name=mode]:checked').value;
+    cardDirty('claude', c.mode === 'managed'); // inherit 无 managed 表单语义：不标记未保存
+    renderClaude(el); // 模式切换影响多卡显隐，整页重渲染（radio 状态由 c.mode 驱动）
+  });
+  bindSaveBar(el, 'claude');
+  const updCredLabel = () => {
+    const v = document.querySelector('input[name=cred]:checked').value;
+    $('#credLabel').innerHTML = (v === 'api_key' ? 'API Key' : 'Auth Token')
+      + (v === 'auth_token' && hasToken ? `（已设置 ${esc(c.auth_token.secretHint)}，留空不改）` : '')
+      + (v === 'api_key' && hasKey ? `（已设置 ${esc(c.api_key.secretHint)}，留空不改）` : '');
+  };
+  document.querySelectorAll('input[name=cred]').forEach((r) => r.onchange = () => { updCredLabel(); cardDirty('claude', true); });
+  $('#credVal').oninput = () => {
+    const v = $('#credVal').value.trim();
+    const key = document.querySelector('input[name=cred]:checked').value;
+    const other = key === 'auth_token' ? 'api_key' : 'auth_token';
+    if (v) { c[key] = v; c[other] = ''; } else { c[key] = { secretSet: key === 'auth_token' ? hasToken : hasKey }; }
+    cardDirty('claude', true);
+  };
+  $('#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;
+    pullModels(() => ({ base_url: $('#baseUrl').value.trim(), ...(typed ? { [key]: typed } : {}) }), $('#btnModels'), 'modelList');
+  };
+  // ---- 厂商档案列表 ----
+  const renderProfiles = () => {
+    const body = $('#pfBody');
+    if (!body) return;
+    if (!c.profiles.length) { body.innerHTML = '<tr><td colspan="5" class="hint">尚无档案，点右上「+ 新增档案」创建</td></tr>'; return; }
+    const inUse = (p) => {
+      // 前端无凭证明文，用尾 4 位提示 + baseUrl 近似判断「使用中」（当前模型在 chips 上单独高亮）
+      const credSame = (p.auth_token?.secretHint && cur.authToken?.secretHint === p.auth_token.secretHint)
+        || (p.api_key?.secretHint && cur.apiKey?.secretHint === p.api_key.secretHint);
+      return credSame && (p.base_url || '') === (cur.baseUrl || '');
+    };
+    const modelChips = (p, active, i) => {
+      const list = [...(p.models || []), ...(p.model && !(p.models || []).includes(p.model) ? [p.model] : [])];
+      return list.map((m) => `<button class="btn sm${active && cur.model === m ? ' primary' : ''}" data-op="usemodel" data-i="${i}" data-m="${esc(m)}" title="点击切换为当前模型">${esc(m)}${active && cur.model === m ? ' ✓' : ''}</button>`).join(' ')
+        || '<span class="hint">—</span>';
+    };
+    body.innerHTML = c.profiles.map((p, i) => {
+      const active = inUse(p);
+      return `
+      <tr>
+        <td><b>${esc(p.name)}</b>${active ? '<br><span class="tag ok">使用中</span>' : ''}</td>
+        <td>${p.auth_token?.secretSet ? 'AUTH_TOKEN' : p.api_key?.secretSet ? 'API_KEY' : '<span class="hint">未设凭证</span>'}</td>
+        <td>${p.base_url ? `<code>${esc(p.base_url)}</code>` : '<span class="hint">官方</span>'}</td>
+        <td>${modelChips(p, active, i)}</td>
+        <td>
+          <button class="btn sm" data-op="use" data-i="${i}">设为当前</button>
+          <button class="btn sm" data-op="edit" data-i="${i}">编辑</button>
+          <button class="btn sm danger" data-op="del" data-i="${i}">删除</button>
+        </td>
+      </tr>`;
+    }).join('');
+    body.querySelectorAll('button[data-op]').forEach((b) => b.onclick = async () => {
+      const i = Number(b.dataset.i);
+      const p = c.profiles[i];
+      if (b.dataset.op === 'use' || b.dataset.op === 'usemodel') {
+        // 切换走后端端点（档案凭证明文不出进程）；编辑中先收尾，未保存改动自动落盘再切（如认证模式切换）
+        if (!$('#drawerMask').hidden) return toast('请先完成档案编辑（保存或取消）', true);
+        if (S.dirtyCards.size && !(await saveDoc())) return; // 保存失败已 toast 原因，保持编辑态不切换
+        try {
+          const reqBody = { name: p.name };
+          if (b.dataset.op === 'usemodel') reqBody.model = b.dataset.m;
+          else if (p.model || (p.models || [])[0]) reqBody.model = p.model || p.models[0];
+          const r = await api('POST', '/api/claude/use-profile', reqBody);
+          toast(r.message || '已切换');
+          await refresh();
+        } catch (e) { toast(e.message, true); }
+        return;
+      }
+      if (b.dataset.op === 'del') {
+        if (!window.confirm(`确认删除档案「${p.name || '未命名'}」？删除将立即保存生效。`)) return;
+        c.profiles.splice(i, 1);
+        await saveDoc();
+        return;
+      }
+      openProfileDrawer(c, i, el);
+    });
+  };
+  renderProfiles();
+  $('#pfAdd').onclick = () => {
+    const snap = snapDoc(); // 快照先于 push：取消时连同新增空档案一并回滚
+    c.profiles.push({ name: '' });
+    renderClaude(el);
+    openProfileDrawer(c, c.profiles.length - 1, el, snap);
+  };
+  applyDirty(); // 模式切换等 handler 先 cardDirty 再整卡重渲染：回放防止保存条/圆点随重建丢失
+}
+/** 档案编辑抽屉：实时 mutate profile 对象，「保存」一次落盘；凭证留空 = 保持不变（PUT 按 name 对齐回填）。
+ * 模型候选 chips：手输 / 「拉取模型」下拉添加，点 × 删除；默认模型（「设为当前」用）从候选中选 */
+function openProfileDrawer(c, i, el, snap) {
+  const p = c.profiles[i];
+  const hasT = p.auth_token?.secretSet, hasK = p.api_key?.secretSet;
+  const ctype = hasT ? 'auth_token' : 'api_key';
+  openDrawer({
+    title: `厂商档案${p.name ? `：${p.name}` : '（新档案）'}`,
+    snap: snap ?? snapDoc(),
+    bodyHtml: `
+      <label>档案名（显示用，如「官方」「中转站A」）</label>
+      <input type="text" id="dwPfName" value="${esc(p.name || '')}" placeholder="中转站A">
+      <div class="radio-row">
+        <label><input type="radio" name="dwCred" value="auth_token" ${ctype === 'auth_token' ? 'checked' : ''}> AUTH_TOKEN（Bearer，中转站常用）</label>
+        <label><input type="radio" name="dwCred" value="api_key" ${ctype === 'api_key' ? 'checked' : ''}> API_KEY（官方，x-api-key）</label>
+      </div>
+      <label id="dwPfCredLabel">${ctype === 'api_key' ? 'API Key' : 'Auth Token'} ${hasT || hasK ? '（已设置，留空不改）' : ''}</label>
+      <input type="password" id="dwPfCred" placeholder="${hasT || hasK ? '留空保持不变' : 'sk-…'}">
+      <label>BASE_URL（中转站端点，官方留空）</label>
+      <input type="text" id="dwPfBase" value="${esc(p.base_url || '')}" placeholder="https://relay.example.com">
+      <h4 style="margin:18px 0 4px;font-size:13.5px">候选模型（fable / opus / sonnet / haiku 等，各存一条；列表页点击即切换当前模型）</h4>
+      <div class="chips" id="dwPfModels"></div>
+      <div class="row" style="align-items:end;max-width:600px">
+        <div style="flex:1"><input type="text" id="dwPfNewModel" list="dwPfModelList" placeholder="输入或下拉选择后点「添加」">
+          <datalist id="dwPfModelList"></datalist></div>
+        <div class="btn-wrap"><button class="btn" id="dwPfAddModel">添加</button></div>
+        <div class="btn-wrap"><button class="btn" id="dwPfPull">拉取模型</button></div>
+      </div>
+      <div class="row" style="align-items:end;margin-top:12px;max-width:600px">
+        <div style="flex:1"><label>默认模型（点「设为当前」时使用，通常为候选之一）</label>
+          <input type="text" id="dwPfModel" list="dwPfModelsList" value="${esc(p.model || '')}" placeholder="留空 = 切换时不指定">
+          <datalist id="dwPfModelsList"></datalist></div>
+      </div>`,
+    footHtml: `<button class="btn danger" id="dwPfDel">删除档案</button><span class="spacer"></span><button class="btn" id="dwPfCancel">取消</button><button class="btn primary" id="dwPfSave">保存</button>`,
+    onMount: () => {
+      document.querySelectorAll('input[name=dwCred]').forEach((r) => r.onchange = () => {
+        const v = document.querySelector('input[name=dwCred]:checked').value;
+        const t = v === 'auth_token' && hasT ? `（已设置 ${esc(p.auth_token.secretHint)}，留空不改）` : '';
+        const k = v === 'api_key' && hasK ? `（已设置 ${esc(p.api_key.secretHint)}，留空不改）` : '';
+        document.getElementById('dwPfCredLabel').textContent = `${v === 'api_key' ? 'API Key' : 'Auth Token'}${t || k}`;
+      });
+      document.getElementById('dwPfName').oninput = (e) => { p.name = e.target.value.trim(); };
+      document.getElementById('dwPfCred').oninput = (e) => {
+        const v = e.target.value.trim();
+        const key = document.querySelector('input[name=dwCred]:checked').value;
+        const other = key === 'auth_token' ? 'api_key' : 'auth_token';
+        if (v) { p[key] = v; delete p[other]; }
+        else if (!(p[key] && typeof p[key] === 'object')) delete p[key]; // 空输入：保留原脱敏对象（未修改语义）
+      };
+      document.getElementById('dwPfBase').oninput = (e) => { p.base_url = e.target.value.trim() || undefined; };
+      // ---- 候选模型 chips：本地数组编辑，同步 p.models ----
+      const models = [...(p.models || [])];
+      const syncModels = () => {
+        if (models.length) p.models = [...models];
+        else delete p.models;
+        const box = document.getElementById('dwPfModels');
+        box.innerHTML = models.map((m, mi) =>
+          `<span class="chip">${esc(m)}<button type="button" data-rm="${mi}" title="移除">×</button></span>`).join('')
+          || '<span class="hint">尚无候选模型（不影响使用，可随时添加）</span>';
+        box.querySelectorAll('button[data-rm]').forEach((b) => b.onclick = () => {
+          models.splice(Number(b.dataset.rm), 1);
+          syncModels();
+        });
+        document.getElementById('dwPfModelsList').innerHTML = models.map((m) => `<option value="${esc(m)}"></option>`).join('');
+      };
+      syncModels();
+      const addModel = () => {
+        const inp = document.getElementById('dwPfNewModel');
+        const v = inp.value.trim();
+        if (!v) return;
+        if (!models.includes(v)) models.push(v);
+        inp.value = '';
+        syncModels();
+      };
+      document.getElementById('dwPfAddModel').onclick = addModel;
+      document.getElementById('dwPfNewModel').onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); addModel(); } };
+      document.getElementById('dwPfModel').oninput = (e) => { p.model = e.target.value.trim() || undefined; };
+      document.getElementById('dwPfPull').onclick = () => {
+        const typed = document.getElementById('dwPfCred').value.trim();
+        const key = document.querySelector('input[name=dwCred]:checked').value;
+        pullModels(() => ({
+          base_url: document.getElementById('dwPfBase').value.trim(),
+          ...(p.name ? { profile_name: p.name } : {}),
+          ...(typed ? { [key]: typed } : {}),
+        }), document.getElementById('dwPfPull'), 'dwPfModelList');
+      };
+      document.getElementById('dwPfDel').onclick = async () => {
+        if (!window.confirm(`确认删除档案「${p.name || '未命名'}」？删除将立即保存生效。`)) return;
+        c.profiles.splice(i, 1);
+        if (await saveDoc()) closeDrawer();
+        else cancelDrawer();
+      };
+      document.getElementById('dwPfCancel').onclick = cancelDrawer;
+      document.getElementById('dwPfSave').onclick = async () => {
+        if (await saveDoc()) closeDrawer();
+      };
+    },
+  });
+}
+// ============ 权限 ============
+let permTab = 'allow'; // 页内子 tab 状态：免确认工具 / 危险命令黑名单（重渲染保持）
+function renderPermissions(el) {
+  const p = S.doc.permissions || (S.doc.permissions = {});
+  p.allow_tools = p.allow_tools || [];
+  p.dangerous_commands = p.dangerous_commands || [];
+  el.innerHTML = `
+  <div class="card">
+    <div class="subtabs">
+      <button data-t="allow" class="${permTab === 'allow' ? 'active' : ''}">免确认工具</button>
+      <button data-t="danger" class="${permTab === 'danger' ? 'active' : ''}">危险命令黑名单</button>
+    </div>
+    <div id="permPanel"></div>
+  </div>`;
+  el.querySelectorAll('.subtabs button').forEach((b) =>
+    b.onclick = () => { permTab = b.dataset.t; renderPermissions(el); });
+  const panel = $('#permPanel');
+  if (permTab === 'danger') renderDangerTab(panel, p, el);
+  else renderAllowTab(panel, p, el);
+}
+function renderAllowTab(panel, p, el) {
+  const defaults = S.status?.permissionDefaults?.allowTools || [];
+  const isDefault = defaults.length > 0 && JSON.stringify(p.allow_tools) === JSON.stringify(defaults);
+  panel.innerHTML = `
+    <div class="desc">名单内工具直接放行不弹确认卡（配置即整体替换内置默认）。Bash 仍受危险命令黑名单约束。</div>
+    <div class="row" style="max-width:480px;margin:8px 0 10px">
+      <input type="text" id="newTool" placeholder="工具名，如 Write">
+      <div class="btn-wrap"><button class="btn sm" id="addTool">添加</button></div>
+      <div class="btn-wrap"><button class="btn sm" id="resetTools" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button></div>
+    </div>
+    ${p.allow_tools.length === 0 ? '<div style="background:#fff3e0;color:var(--warn);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 名单为空：所有工具（含 Write/Edit）都会弹确认卡</div>' : ''}
+    ${isDefault ? '<div class="hint" style="margin:8px 0"><span class="tag off">与内置默认一致</span></div>' : ''}
+    <table><tbody id="toolBody"></tbody></table>
+    <div class="footer-note">权限改动即时保存并经热重载对下一条消息生效（新通道/重启后全量生效）。</div>`;
+  $('#toolBody').innerHTML = p.allow_tools.map((t, i) =>
+    `<tr><td><code>${esc(t)}</code></td><td style="width:80px"><button class="btn sm danger" data-i="${i}">删除</button></td></tr>`).join('')
+    || '<tr><td colspan="2" class="hint">（空）</td></tr>';
+  // 即时保存：低风险高频操作，免去「改完再点保存」两步；失败回滚内存保持一致
+  $('#toolBody').querySelectorAll('button').forEach((b) =>
+    b.onclick = async () => {
+      const old = [...p.allow_tools];
+      p.allow_tools.splice(Number(b.dataset.i), 1);
+      if (!await saveDoc()) p.allow_tools = old;
+    });
+  $('#addTool').onclick = async () => {
+    const v = $('#newTool').value.trim();
+    if (!v || p.allow_tools.includes(v)) return;
+    p.allow_tools.push(v);
+    if (!await saveDoc()) p.allow_tools.splice(p.allow_tools.indexOf(v), 1);
+    else if ($('#newTool')) $('#newTool').value = '';
+  };
+  $('#resetTools').onclick = async () => {
+    if (!defaults.length) return;
+    if (!window.confirm('恢复为内置默认名单？当前自定义项将被覆盖（立即保存生效）。')) return;
+    const old = [...p.allow_tools];
+    p.allow_tools = [...defaults];
+    if (!await saveDoc()) p.allow_tools = old;
+  };
+}
+function renderDangerTab(panel, p, el) {
+  const defaults = S.status?.permissionDefaults?.dangerousCommands || [];
+  const isDefault = defaults.length > 0 && JSON.stringify(p.dangerous_commands) === JSON.stringify(defaults);
+  panel.innerHTML = `
+    <div class="desc">正则源串（不区分大小写），命中即弹确认卡。删除正则 = 放宽对应命令为直通，请谨慎。</div>
+    <div class="row" style="max-width:680px;margin:8px 0 10px">
+      <input type="text" id="newDc" placeholder="正则源串，如 \\bgit\\s+push\\b.*--force">
+      <div class="btn-wrap"><button class="btn sm" id="addDc">添加</button></div>
+      <div class="btn-wrap"><button class="btn sm" id="resetDc" ${defaults.length ? '' : 'disabled title="status 不可用，无法取默认值"'}>恢复默认</button></div>
+    </div>
+    ${p.dangerous_commands.length === 0 ? '<div style="background:#fee;color:var(--danger);border-radius:7px;padding:7px 12px;margin:8px 0">⚠️ 黑名单为空：所有 Bash 命令（含 rm -rf、sudo）将免确认直通，请确认有意为之</div>' : ''}
+    ${isDefault ? '<div class="hint" style="margin:8px 0"><span class="tag off">与内置默认一致</span></div>' : ''}
+    <table><tbody id="dcBody"></tbody></table>
+    <div class="footer-note">权限改动即时保存并经热重载对下一条消息生效（新通道/重启后全量生效）。</div>`;
+  $('#dcBody').innerHTML = p.dangerous_commands.map((s, i) =>
+    `<tr><td style="width:90%"><code>${esc(s)}</code></td><td><button class="btn sm danger" data-i="${i}">删除</button></td></tr>`).join('')
+    || '<tr><td colspan="2" class="hint">（空）</td></tr>';
+  $('#dcBody').querySelectorAll('button').forEach((b) =>
+    b.onclick = async () => {
+      const old = [...p.dangerous_commands];
+      p.dangerous_commands.splice(Number(b.dataset.i), 1);
+      if (!await saveDoc()) p.dangerous_commands = old;
+    });
+  $('#addDc').onclick = async () => {
+    const v = $('#newDc').value.trim();
+    if (!v) return;
+    try { new RegExp(v, 'i'); } catch (e) { return toast(`正则无效：${e.message}`, true); }
+    p.dangerous_commands.push(v);
+    if (!await saveDoc()) p.dangerous_commands.splice(p.dangerous_commands.indexOf(v), 1);
+    else if ($('#newDc')) $('#newDc').value = '';
+  };
+  $('#resetDc').onclick = async () => {
+    if (!defaults.length) return;
+    if (!window.confirm('恢复为内置默认黑名单？当前自定义项将被覆盖（立即保存生效）。')) return;
+    const old = [...p.dangerous_commands];
+    p.dangerous_commands = [...defaults];
+    if (!await saveDoc()) p.dangerous_commands = old;
+  };
+}
+// ============ 斜杠命令（远端直操作飞书 API；本页与 config.yaml / 保存按钮无关） ============
+function renderSlash(el) {
+  el.innerHTML = `
+  <div class="card">
+    <h3>飞书斜杠命令（远端管理）</h3>
+    <div class="desc">直接读写飞书开放平台已注册的斜杠命令；聊天输入 <code>/</code> 弹出指令面板，选中后可继续输入描述再发送。需给应用开通 <code>application:app_slash_command</code> 读写权限并发布版本；改动约 5 分钟后生效（PC 端 7.70+）。<b>本页操作即时提交飞书，与底部「保存」按钮无关。</b></div>
+    <div class="row" style="align-items:end">
+      <div style="max-width:320px"><label>目标应用</label><select id="scApp"></select></div>
+      <button class="btn" id="scReload">刷新列表</button>
+      <button class="btn primary" id="scAdd">+ 新增命令</button>
+      <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" 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');
+  (S.status?.apps || []).forEach((a) => {
+    const opt = document.createElement('option');
+    opt.value = a.name;
+    opt.textContent = `${a.name}（${a.appId}）`;
+    appSel.appendChild(opt);
+  });
+  const showReport = (title, content) => {
+    $('#scReport').style.display = '';
+    $('#scReport').textContent = `${title}\n${content}`;
+  };
+  const loadRemote = async () => {
+    if (!appSel.value) { $('#scBody').innerHTML = '<tr><td colspan="4" class="hint">无可用应用（先到「飞书应用」页配置并保存）</td></tr>'; return; }
+    $('#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) => `
+        <tr data-cid="${esc(x.command_id)}" data-cmd="${esc(x.command)}">
+          <td><code>/${esc(x.command)}</code></td>
+          <td>${esc(x.description?.default_value || '')}</td>
+          <td class="hint">${esc(x.description?.icon?.icon_key || '—')}</td>
+          <td>
+            <button class="btn sm" data-op="edit">编辑</button>
+            <button class="btn sm danger" data-op="del">删除</button>
+          </td>
+        </tr>`).join('') || '<tr><td colspan="4" class="hint">远端暂无命令；点「补齐内置命令」一键注册 bridge 内置指令</td></tr>';
+      $('#scBody').querySelectorAll('button[data-op]').forEach((b) => b.onclick = () => {
+        const tr = b.closest('tr');
+        if (b.dataset.op === 'del') return delRemote(tr.dataset.cid, tr.dataset.cmd);
+        openSlashDrawer({
+          commandId: tr.dataset.cid,
+          command: tr.dataset.cmd,
+          description: tr.children[1].textContent,
+          icon: tr.children[2].textContent === '—' ? '' : tr.children[2].textContent,
+        });
+      });
+    } catch (e) {
+      $('#scBody').innerHTML = `<tr><td colspan="4" class="hint">加载失败：${esc(e.message)}（确认已开通斜杠命令权限后点「刷新列表」重试）</td></tr>`;
+    }
+  };
+  const delRemote = async (cid, cmd) => {
+    if (!window.confirm(`确认删除远端命令 /${cmd}？（约 5 分钟后从飞书面板消失，不可恢复）`)) return;
+    try {
+      await api('POST', '/api/slash-commands/action', { op: 'delete', app: appSel.value, commandId: cid });
+      toast(`已删除 /${cmd}`);
+      loadRemote();
+    } catch (e) { toast(e.message, true); }
+  };
+  const openSlashDrawer = ({ commandId, command, description, icon }) => {
+    const isCreate = !commandId;
+    openDrawer({
+      title: isCreate ? '新增斜杠命令' : `编辑 /${command}`,
+      bodyHtml: `
+        <label>命令（不带 /）</label>
+        <input type="text" id="dcCmd" ${isCreate ? '' : 'disabled title="飞书侧命令名不可修改（如需改名请删除后重建）"'} value="${esc(command || '')}" placeholder="produce">
+        <label>描述（指令面板展示）</label>
+        <input type="text" id="dcDesc" value="${esc(description || '')}" placeholder="内容生产流程">
+        <label>图标 icon_key（可空，取值见飞书开放平台图标列表）</label>
+        <input type="text" id="dcIcon" value="${esc(icon || '')}" placeholder="skill_outlined">`,
+      footHtml: `<button class="btn primary" id="dcSave">${isCreate ? '创建（即时提交飞书）' : '保存（即时提交飞书）'}</button>`,
+      onMount: () => {
+        document.getElementById('dcSave').onclick = async () => {
+          const cmd = document.getElementById('dcCmd').value.trim();
+          const desc = document.getElementById('dcDesc').value.trim();
+          const ic = document.getElementById('dcIcon').value.trim();
+          if (!desc) return toast('描述不能为空', true);
+          try {
+            if (isCreate) {
+              if (!cmd) return toast('命令名不能为空', true);
+              await api('POST', '/api/slash-commands/action', { op: 'create', app: appSel.value, command: cmd, description: desc, icon: ic });
+            } else {
+              await api('POST', '/api/slash-commands/action', { op: 'update', app: appSel.value, commandId, description: desc, icon: ic });
+            }
+            toast(isCreate ? `已创建 /${cmd}` : '已保存');
+            closeDrawer();
+            loadRemote();
+          } catch (e) { toast(e.message, true); }
+        };
+      },
+    });
+  };
+  appSel.onchange = loadRemote;
+  $('#scReload').onclick = loadRemote;
+  $('#scAdd').onclick = () => openSlashDrawer({ command: '', description: '', icon: '' });
+  $('#scBuiltins').onclick = async () => {
+    if (!appSel.value) return;
+    $('#scBuiltins').disabled = true;
+    try {
+      const r = await api('POST', '/api/slash-commands/sync', { app: appSel.value, mode: 'builtins-only' });
+      const lines = [
+        r.created.length ? `✅ 新建 ${r.created.length}：${r.created.join('、')}` : '· 内置命令已齐全（无新建）',
+        ...(r.errors.length ? [`⚠️ 失败 ${r.errors.length}：`, ...r.errors.map((e) => `  ${e.command}: ${e.error}`)] : []),
+        '（只补缺失的内置命令，不会删除或修改远端已有命令）',
+      ];
+      showReport('补齐内置命令完成（约 5 分钟后飞书生效）', lines.join('\n'));
+      toast(r.errors.length ? `补齐完成，但 ${r.errors.length} 条失败（详见报告）` : '✅ 内置命令已补齐，约 5 分钟后生效');
+      loadRemote();
+    } catch (e) { showReport('补齐失败', e.message); toast(e.message, true); }
+    $('#scBuiltins').disabled = false;
+  };
+  loadRemote();
+}
+// ============ 插件 ============
+async function renderPlugins(el) {
+  el.innerHTML = `
+  <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: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="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>
+    <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>
+        <option value="bridge">bridge 托管目录</option>
+      </select>
+      <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 (!installed.length) {
+        body.innerHTML = '<tr><td colspan="6" class="hint">尚未安装任何插件</td></tr>';
+        return;
+      }
+      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 || '-')}${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（弹框一闪而过反而干扰）
+        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>`;
+    }
+  };
+  /** 轻量操作（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);
+      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'));
+  };
+  $('#plDoMarketUpdate').onclick = () => runOpDialog('update-all', '', $('#plMarketDir').value, $('#plDoMarketUpdate'));
+  await Promise.all([load(), loadAvailable()]);
+}
+// ============ 初始化 ============
+async function refresh() {
+  S.status = await api('GET', '/api/status').catch(() => null);
+  try {
+    S.doc = await api('GET', '/api/config');
+    S.firstRun = false;
+    $('#hFirstRun').textContent = '';
+  } catch (e) {
+    if (String(e.message).includes('bootstrap')) {
+      S.firstRun = true;
+      S.doc = null;
+      $('#hFirstRun').textContent = '首次安装向导';
+    } else { throw e; }
+  }
+  const st = S.status || {};
+  $('#hMeta').textContent = `v${st.version || '?'} · ${location.host}`;
+  // 版本错位检测：静态页每次现读磁盘（新），API 属于运行中进程（旧）——status 无 bridge
+  // 字段说明进程早于「页面托管启停」功能，提示重启而非让用户撞「未知端点」
+  $('#staleBar').hidden = !(S.status && S.status.bridge === undefined);
+  render();
+}
+refresh().catch((e) => { $('#main').innerHTML = `<div class="card"><h3>加载失败</h3><div class="desc">${esc(e.message)}</div></div>`; });
+</script>
+</body>
+</html>