@jesonliu/lark-claudecode-bridge 0.17.0 → 0.18.0

package/assets/web/js/pages/claude.js

@@ -0,0 +1,322 @@
+// ============ Claude 认证 ============
+import { S, $, esc, toast, api, snapDoc, saveDoc, cardDirty, applyDirty, refresh } from '../core.js';
+import { openDrawer, closeDrawer, cancelDrawer, saveBarHtml, dirtyDotHtml, bindSaveBar } from '../ui.js';
+
+/** 模型拉取公共逻辑：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();
+      };
+    },
+  });
+}
+
+export const page = {
+  id: 'claude',
+  title: 'Claude 认证',
+  icon: '<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"/>',
+  render: renderClaude,
+};

package/assets/web/js/pages/overview.js

@@ -0,0 +1,214 @@
+// ============ 概览 ============
+// 桥接器启停 / 版本更新（宿主进程管理：embedded 页面随进程生死，独立页面经 PID 跨进程操作）
+import { S, $, esc, toast, api, refresh } from '../core.js';
+
+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(); // 恢复按钮
+  }
+}
+
+export const page = {
+  id: 'overview',
+  title: '概览',
+  icon: '<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"/>',
+  async render(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();
+  },
+};