@jesonliu/lark-claudecode-bridge 0.17.0 → 0.18.0

package/assets/web/js/bootstrap.js

@@ -0,0 +1,97 @@
+// ============ 首装向导（bootstrap；非 tab 页，由 main.js 在 firstRun 时渲染） ============
+import { $, toast, api, refresh } from './core.js';
+import { pickDirectory } from './ui.js';
+
+export function renderBootstrap(el) {
+  el.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); }
+  };
+}

package/assets/web/js/core.js

@@ -0,0 +1,73 @@
+// ============ 公共底座：状态 / fetch / 保存 / 刷新 ============
+// 所有页面模块与 ui 模块的公共依赖；依赖方向：core ← ui ← {pages, bootstrap} ← main（无环）
+// 一步保存：无全局 savebar。抽屉编辑自带「保存/取消」（打开前拍快照）；页内表单卡各自带
+// 保存按钮（dirtyCards 跟踪未保存卡）；行内低风险操作（权限增删）直接落盘
+export const S = { status: null, doc: null, firstRun: false, dirtyCards: new Set() };
+export const $ = (sel, el = document) => el.querySelector(sel);
+export const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
+
+export 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);
+}
+export 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 深拷贝快照（抽屉取消回滚 / 打开前留存） */
+export const snapDoc = () => JSON.parse(JSON.stringify(S.doc));
+/** 页内表单卡未保存标记：cardDirty('ws', true) 显示卡头「未保存」小标 + 卡底保存行，并记入集合 */
+export 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 默认隐藏 */
+export function applyDirty() { for (const id of S.dirtyCards) cardDirty(id, true); }
+/** 全量 PUT 落盘（所有保存路径共用）；返回是否成功（失败保持当前编辑态） */
+export 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; }
+}
+
+/** 视图刷新回调：main.js 启动时注入 render（core 不感知页面注册表，破 core→pages 依赖环） */
+export const hooks = { rerender: () => {} };
+
+export 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);
+  hooks.rerender();
+}

package/assets/web/js/main.js

@@ -0,0 +1,75 @@
+// ============ 入口：页面注册表 + hash 路由 + 启动 ============
+// 新增配置页：js/pages/ 下新建模块（export const page = { id, title, icon, render(el) }）
+// 并在下方 import + PAGES 数组各加一行即可；后端 /js/* 静态服务自动覆盖新文件
+import { S, $, esc, hooks, refresh } from './core.js';
+import { initDrawer, isDrawerOpen, cancelDrawer } from './ui.js';
+import { renderBootstrap } from './bootstrap.js';
+import { page as pOverview } from './pages/overview.js';
+import { page as pApps } from './pages/apps.js';
+import { page as pWorkspaces } from './pages/workspaces.js';
+import { page as pClaude } from './pages/claude.js';
+import { page as pPermissions } from './pages/permissions.js';
+import { page as pSlash } from './pages/slash.js';
+import { page as pPlugins } from './pages/plugins.js';
+
+const PAGES = [pOverview, pApps, pWorkspaces, pClaude, pPermissions, pSlash, pPlugins];
+const pageById = new Map(PAGES.map((p) => [p.id, p]));
+const DEFAULT_TAB = 'overview';
+
+// 菜单图标包装：内联 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>`;
+
+// ---- hash 路由：#claude 等；刷新 / 分享链接 / 前进后退均可定位 ----
+const tabFromHash = () => { const id = location.hash.slice(1); return pageById.has(id) ? id : DEFAULT_TAB; };
+let activeTab = tabFromHash(); // 首载即定位（首次 render 前）
+let restoring = false;         // 拒绝导航后回写 hash 触发的 hashchange 自抑制标志
+
+/** 切页保护：抽屉编辑中 / 页内表单卡有未保存改动 → 确认后才切换（切走即丢弃） */
+function confirmLeave() {
+  if (isDrawerOpen()) {
+    if (!window.confirm('编辑抽屉尚未保存，确定放弃修改并切换页面？')) return false;
+    cancelDrawer(); // 回滚抽屉编辑（内部 rerender 旧页），再由调用方 render 新页
+  } else if (S.dirtyCards.size) {
+    if (!window.confirm(`有 ${S.dirtyCards.size} 处未保存的修改，切换页面将丢弃。确定切换？`)) return false;
+    S.dirtyCards.clear();
+  }
+  return true;
+}
+
+function render() {
+  renderNav();
+  if (S.firstRun) return renderBootstrap($('#main')); // 首装向导：无论 hash 是什么都渲染向导
+  $('#main').innerHTML = '';
+  void pageById.get(activeTab).render($('#main'));   // fire-and-forget（plugins 页为 async，同旧版）
+}
+
+function renderNav() {
+  $('#nav').innerHTML = PAGES.map((p) =>
+    `<button data-k="${p.id}" class="${p.id === activeTab ? 'active' : ''}">${ico(p.icon)}<span>${p.title}</span></button>`).join('');
+  $('#nav').querySelectorAll('button').forEach((b) =>
+    b.onclick = () => tryActivate(b.dataset.k));
+}
+
+/** nav 点击与 hashchange 的唯一汇聚点：确认 → 更新 activeTab + 同步 hash → 渲染 */
+function tryActivate(tab) {
+  if (tab === activeTab) return; // nav 点击后写 hash 引发的 hashchange 在此早退（无双重渲染）
+  if (!confirmLeave()) {
+    // 拒绝导航：把 hash 回滚到当前页；回写引发的 hashchange 用 restoring 吞掉
+    if (location.hash.slice(1) !== activeTab) { restoring = true; location.hash = activeTab; }
+    return;
+  }
+  activeTab = tab;
+  if (location.hash.slice(1) !== tab) location.hash = tab;
+  render();
+}
+
+window.addEventListener('hashchange', () => {
+  if (restoring) { restoring = false; return; }
+  tryActivate(tabFromHash()); // 覆盖手改地址栏 / 分享链接 / 前进后退
+});
+
+// ---- 启动 ----
+window.__lcbBooted = true; // index.html 兜底脚本标志：module 加载成功
+hooks.rerender = render;   // 破环注入：core 的 refresh/cancelDrawer 经 hooks 触发重渲染
+initDrawer();              // 抽屉全局监听（X / ESC / 点遮罩）一次性注册
+refresh().catch((e) => { $('#main').innerHTML = `<div class="card"><h3>加载失败</h3><div class="desc">${esc(e.message)}</div></div>`; });

package/assets/web/js/pages/apps.js

@@ -0,0 +1,206 @@
+// ============ 应用（列表 + 抽屉编辑；输入实时写回 S.doc.apps，抽屉「保存」一次落盘） ============
+import { S, $, esc, toast, snapDoc, saveDoc } from '../core.js';
+import { openDrawer, closeDrawer, cancelDrawer } from '../ui.js';
+
+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();
+      };
+    },
+  });
+}
+
+export const page = {
+  id: 'apps',
+  title: '飞书应用',
+  icon: '<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"/>',
+  render: renderApps,
+};