dsh-agentone 0.5.0

package/lib/page.js

@@ -0,0 +1,857 @@
+// 状态页与授权完成页的 HTML/CSS/JS 模板（纯静态，无运行时依赖；
+// 从 index.js 拆出——那文件此前约 1600 行，其中约 780 行是模板字符串）。
+
+const PAGE_CSS = `
+:root {
+  --bg: #f6f8fa; --card: #ffffff; --text: #1f2328; --muted: #57606a; --line: #d8dee4;
+  --brand: #2f6feb; --brand-weak: #eaf1fe; --ok: #1a7f37; --ok-weak: #e6f4ea;
+  --warn: #9a6700; --warn-weak: #fff8c5; --err: #cf222e; --err-weak: #ffebe9;
+  --hover: #f0f2f5; --radius: 14px;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0d1117; --card: #161b22; --text: #e6edf3; --muted: #9ea7b3; --line: #30363d;
+    --brand: #4a8dff; --brand-weak: #16233a; --ok: #3fb950; --ok-weak: #12261e;
+    --warn: #d29922; --warn-weak: #2b2410; --err: #f85149; --err-weak: #3a1518;
+    --hover: #21262d;
+  }
+}
+* { box-sizing: border-box; }
+body {
+  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
+  background: var(--bg); color: var(--text); margin: 0; padding: 20px 16px 32px;
+  font-size: 14px; line-height: 1.6;
+}
+.wrap { max-width: 560px; margin: 0 auto; }
+.head { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; }
+.logo {
+  width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff;
+  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
+}
+.head h2 { margin: 0; font-size: 17px; flex: 1; }
+.pill {
+  font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 500;
+}
+.pill.ok { background: var(--ok-weak); color: var(--ok); }
+.pill.warn { background: var(--warn-weak); color: var(--warn); }
+.card {
+  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
+  padding: 16px 18px; margin-bottom: 14px;
+}
+.card h3 { margin: 0 0 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
+.card h3 .muted { font-weight: 400; font-size: 12px; }
+.muted { color: var(--muted); }
+.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
+.kv .k { color: var(--muted); flex-shrink: 0; }
+.kv .v { text-align: right; word-break: break-all; }
+button {
+  font: inherit; cursor: pointer; border-radius: 10px; transition: filter .15s, opacity .15s;
+  border: 1px solid transparent;
+}
+button:disabled { opacity: .55; cursor: default; }
+.btn { padding: 9px 20px; font-size: 14px; }
+.btn.primary { background: var(--brand); color: #fff; }
+.btn.primary:hover:not(:disabled) { filter: brightness(1.08); }
+.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
+.btn.ghost:hover:not(:disabled) { background: var(--hover); }
+.btn.danger { background: transparent; color: var(--err); border-color: var(--line); }
+.btn.danger:hover:not(:disabled) { background: var(--err-weak); }
+.btn.small { padding: 4px 12px; font-size: 12px; border-radius: 8px; }
+.row { display: flex; align-items: center; gap: 10px; }
+.hero { text-align: center; padding: 34px 20px; }
+.hero .big {
+  font-size: 16px; font-weight: 600; margin: 0 0 6px;
+}
+.hero p { margin: 0 0 18px; color: var(--muted); }
+.hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
+.banner {
+  border-radius: 10px; padding: 9px 14px; margin-bottom: 12px; font-size: 13px; display: none;
+}
+.banner.ok { background: var(--ok-weak); color: var(--ok); display: block; }
+.banner.err { background: var(--err-weak); color: var(--err); display: block; }
+/* toast 常驻可视区顶部：页面滚动到底部时操作反馈仍可见 */
+.toast-fixed { position: sticky; top: 8px; z-index: 10; }
+/* 首屏骨架占位：慢网下 status 未回来前不至于一片空白 */
+.skeleton {
+  height: 14px; border-radius: 7px; margin: 10px 0;
+  background: linear-gradient(90deg, var(--hover) 25%, var(--line) 50%, var(--hover) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+.skeleton.w60 { width: 60%; }
+@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+/* 窄屏（iframe 嵌设置弹窗/手机）下允许换行，避免 6 个 tab 挤爆裁切 */
+.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
+.tab {
+  padding: 8px 14px; font-size: 13.5px; border: none; background: transparent; color: var(--muted);
+  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0;
+}
+.tab:hover { background: var(--hover); color: var(--text); }
+.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
+.tabpane[hidden] { display: none; }
+.skill-item {
+  display: flex; align-items: center; gap: 10px; padding: 9px 0;
+  border-top: 1px solid var(--line);
+}
+.skill-item:first-of-type { border-top: none; }
+.skill-info { flex: 1; min-width: 0; }
+.skill-name { font-weight: 500; }
+.skill-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tag {
+  font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-left: 6px;
+  background: var(--brand-weak); color: var(--brand); vertical-align: 1px;
+}
+/* 分类徽章配色与 SkillHub skill_category.color 对齐 */
+.tag[data-cat="通用"] { background: rgba(107,114,128,.15); color: #6B7280; }
+.tag[data-cat="人力行政"] { background: rgba(139,92,246,.15); color: #8B5CF6; }
+.tag[data-cat="市场经营"] { background: rgba(245,158,11,.15); color: #F59E0B; }
+.tag[data-cat="工程技术"] { background: rgba(59,130,246,.15); color: #3B82F6; }
+.tag[data-cat="秩序安全"] { background: rgba(239,68,68,.15); color: #EF4444; }
+.tag[data-cat="环境品质"] { background: rgba(16,185,129,.15); color: #10B981; }
+.tag[data-cat="数字化"] { background: rgba(99,102,241,.15); color: #6366F1; }
+.tag[data-cat="客户服务"] { background: rgba(236,72,153,.15); color: #EC4899; }
+.search { display: flex; gap: 8px; margin: 4px 0 8px; }
+.search input {
+  flex: 1; font: inherit; padding: 8px 12px; border-radius: 10px;
+  border: 1px solid var(--line); background: var(--card); color: var(--text); outline: none;
+}
+.search input:focus { border-color: var(--brand); }
+.footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
+.spin {
+  width: 13px; height: 13px; border: 2px solid currentColor; border-top-color: transparent;
+  border-radius: 50%; display: inline-block; vertical-align: -2px; margin-right: 7px;
+  animation: spin .8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+`;
+
+const PAGE_JS = `
+const esc = (value) => String(value ?? '').replace(/[&<>"']/g, (ch) => ({
+  '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+})[ch]);
+const $ = (id) => document.getElementById(id);
+const statePill = $('state-pill');
+const loginCard = $('login-card');
+const mainCards = $('main-cards');
+const logoutBtn = $('logout-btn');
+const bootCard = $('boot-card');
+const toast = $('toast');
+let toastTimer = null;
+// 最近一次 /api/status 快照：CLI 页按需探测时读取（登录态/能力开关）
+let lastStatus = null;
+// 上一次轮询到的套餐状态（pending→active 自动同步模型用）
+let lastPlanState = null;
+const notify = (message, kind) => {
+  toast.className = 'banner ' + (kind || 'ok');
+  toast.textContent = message;
+  clearTimeout(toastTimer);
+  // 错误信息可能较长（含平台原因），给足阅读时间；成功提示维持 4s
+  toastTimer = setTimeout(() => { toast.className = 'banner'; }, kind === 'err' ? 10000 : 4000);
+};
+const withLoading = async (btn, action, okMessage) => {
+  const original = btn.innerHTML;
+  btn.disabled = true;
+  btn.innerHTML = '<span class="spin"></span>' + (btn.dataset.loading || '处理中…');
+  try {
+    const resp = await action();
+    const data = await resp.json().catch(() => ({}));
+    if (!resp.ok) throw new Error(data.error || '操作失败');
+    if (okMessage) notify(okMessage);
+  } catch (error) {
+    notify(error.message || '操作失败', 'err');
+  } finally {
+    btn.disabled = false;
+    btn.innerHTML = original;
+    await refresh();
+  }
+};
+// 卸载类破坏性操作的轻量二次确认：第一次点击把按钮变成「确认卸载？」，
+// 3 秒内再点才真正执行；超时自动还原。不引入弹窗。
+const confirmThen = (btn, armLabel, action, okMessage) => {
+  if (btn.dataset.confirming === '1') {
+    clearTimeout(Number(btn.dataset.confirmTimer));
+    delete btn.dataset.confirming;
+    delete btn.dataset.confirmTimer;
+    delete btn.dataset.originalLabel;
+    withLoading(btn, action, okMessage);
+    return;
+  }
+  btn.dataset.confirming = '1';
+  btn.dataset.originalLabel = btn.textContent;
+  btn.textContent = armLabel;
+  btn.dataset.confirmTimer = String(setTimeout(() => {
+    btn.textContent = btn.dataset.originalLabel || armLabel;
+    delete btn.dataset.confirming;
+    delete btn.dataset.confirmTimer;
+    delete btn.dataset.originalLabel;
+  }, 3000));
+};
+const activateTab = (name) => {
+  document.querySelectorAll('.tab').forEach((tab) => {
+    const active = tab.dataset.tab === name;
+    tab.classList.toggle('active', active);
+    tab.setAttribute('aria-selected', active ? 'true' : 'false');
+  });
+  document.querySelectorAll('.tabpane').forEach((pane) => {
+    pane.hidden = pane.id !== 'pane-' + name;
+  });
+  // 套餐 tab 每次切入重拉（审批状态随时可能变化）
+  if (name === 'plan') {
+    renderPlan();
+  }
+  // 插件列表按需加载：首次切到插件页时拉取（含版本/升级信息，开销大不做轮询）
+  if (name === 'plugins' && !renderPlugins._loaded) {
+    renderPlugins._loaded = true;
+    renderPlugins();
+  }
+  // CLI 状态按需探测（auth status 有进程开销，不进 5s 轮询；1 分钟内不重复）
+  if (name === 'cli') {
+    const now = Date.now();
+    if (!renderCli._probedAt || now - renderCli._probedAt > 60000) {
+      renderCli._probedAt = now;
+      renderCli(lastStatus);
+    }
+  }
+};
+// CLI 页手动重新检测：清掉节流时间戳立即重探
+$('cli-recheck-btn').onclick = () => {
+  renderCli._probedAt = 0;
+  renderCli(lastStatus);
+};
+document.querySelectorAll('.tab').forEach((tab) => {
+  tab.onclick = () => activateTab(tab.dataset.tab);
+});
+const skillAction = (slug, action, btn) => withLoading(
+  btn,
+  () => fetch('api/skill/' + action, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ slug }),
+  }),
+  action === 'install' ? '技能已安装' : '技能已卸载',
+);
+const PLAN_CAPABILITY_LABELS = {
+  image_understanding_enabled: '图片理解',
+  image_generation_enabled: 'AI 作图',
+  ppt_enabled: 'PPT 生成',
+  web_research_enabled: '联网搜索',
+};
+const formatTokenLimit = (limit) => {
+  const value = Number(limit) || 0;
+  if (!value) return '不限';
+  const units = [
+    [1_000_000_000_000, 'T'],
+    [1_000_000_000, 'B'],
+    [1_000_000, 'M'],
+    [1000, 'K'],
+  ];
+  for (const [size, unit] of units) {
+    if (value >= size) {
+      const scaled = value / size;
+      return (scaled % 1 ? scaled.toFixed(1) : String(scaled)) + unit + ' token/月';
+    }
+  }
+  return value + ' token/月';
+};
+const renderPlan = async () => {
+  const body = $('plan-body');
+  let data;
+  try {
+    const resp = await fetch('api/plan');
+    data = await resp.json().catch(() => ({}));
+    if (!resp.ok) throw new Error(data.error || '获取套餐状态失败');
+  } catch (error) {
+    body.innerHTML = '<div class="skill-sub" style="color:var(--err)">' + esc(error.message) + '</div>';
+    return;
+  }
+  // 套餐 tab 每次切入都重拉（审批状态可能刚变化）
+  if (data.state === 'active' && data.plan) {
+    const p = data.plan;
+    const caps = Object.entries(PLAN_CAPABILITY_LABELS)
+      .filter(([key]) => p[key])
+      .map(([, label]) => '<span class="tag">' + esc(label) + '</span>')
+      .join('');
+    const lines = [
+      '<div class="kv"><span class="k">当前套餐</span><span class="v">' + esc(p.name) + '</span></div>',
+      '<div class="kv"><span class="k">有效期</span><span class="v">'
+        + (p.ends_at ? '至 ' + new Date(p.ends_at).toLocaleDateString() : '长期') + '</span></div>',
+      '<div class="kv"><span class="k">Token 限额</span><span class="v">' + formatTokenLimit(p.monthly_token_limit) + '</span></div>',
+    ];
+    body.innerHTML = lines.join('') + (caps ? '<div class="skill-name" style="margin-top:6px">' + caps + '</div>' : '')
+      + '<div class="hint">套餐变更与续期请联系管理员。</div>';
+    return;
+  }
+  if (data.state === 'pending' && data.pending_request) {
+    const pending = data.pending_request;
+    body.innerHTML = '<div class="skill-item"><div class="skill-info"><div class="skill-name">'
+      + esc(pending.plan_name || '套餐申请')
+      + '<span class="pill warn" style="font-size:11px;margin-left:6px">审批中</span></div><div class="skill-sub">'
+      + (pending.created_at ? '提交于 ' + new Date(pending.created_at).toLocaleString() : '')
+      + '</div></div></div>'
+      + '<div class="hint">管理员审批通过后，模型会自动同步，无需手动操作。</div>';
+    return;
+  }
+  if (data.state === 'expired') {
+    body.innerHTML = '<div class="skill-sub" style="color:var(--warn)">套餐已到期，模型暂停使用。重新申请后自动恢复。</div>'
+      + '<div id="plan-apply-list"></div>';
+  } else {
+    const rejected = data.last_rejected;
+    const rejectedHint = rejected
+      ? '<div class="skill-sub" style="color:var(--err);margin-bottom:8px">上次申请被拒：' + esc(rejected.admin_note || '未说明原因') + '</div>'
+      : '';
+    body.innerHTML = '<div class="skill-sub" style="margin-bottom:8px">开通套餐后即可使用公司托管的模型。</div>'
+      + rejectedHint
+      + '<div id="plan-apply-list"></div>';
+  }
+  const list = body.querySelector('#plan-apply-list');
+  const plans = data.plans || [];
+  if (!plans.length) {
+    list.innerHTML = '<div class="skill-sub">暂无可申请套餐，请联系管理员。</div>';
+    return;
+  }
+  list.innerHTML = plans.map((plan) => {
+    const caps = Object.entries(PLAN_CAPABILITY_LABELS)
+      .filter(([key]) => plan[key])
+      .map(([, label]) => '<span class="tag">' + esc(label) + '</span>')
+      .join('');
+    return '<div class="skill-item"><div class="skill-info"><div class="skill-name">'
+      + esc(plan.name) + caps + '</div><div class="skill-sub">'
+      + esc(plan.description || '') + ' · ' + formatTokenLimit(plan.monthly_token_limit)
+      + '</div></div><button class="btn small primary" data-apply-plan="' + esc(plan.id) + '">申请</button></div>';
+  }).join('');
+  list.querySelectorAll('[data-apply-plan]').forEach((btn) => {
+    btn.dataset.loading = '提交中…';
+    btn.onclick = () => withLoading(
+      btn,
+      () => fetch('api/plan/apply', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ plan_id: btn.dataset.applyPlan, message: '' }),
+      }),
+      '申请已提交，等待管理员审批',
+    ).then(() => renderPlan());
+  });
+};
+const renderSkills = (s) => {
+  const skillhubEnabled = s.capabilities?.channels?.skillhub?.enabled !== false;
+  // null = 平台拉取失败（区别于 [] 套餐确实没配技能），见 /api/status 组装
+  const list = Array.isArray(s.skills?.skills) ? s.skills.skills : null;
+  const visible = s.logged_in && skillhubEnabled;
+  // 技能通道被平台关闭时连 tab 一起藏；当前停留在技能页则退回模型页
+  const skillsTab = document.querySelector('[data-tab="skills"]');
+  skillsTab.hidden = !visible;
+  if (!visible && $('pane-skills').hidden === false) activateTab('model');
+  if (!visible) return;
+  const names = s.skill_display_names || {};
+  const displayName = (canonical) => {
+    const bare = canonical.includes('--') ? canonical.split('--').slice(1).join('--') : canonical;
+    return names[canonical] || names[bare] || bare;
+  };
+  // 加载失败（list 为 null）不能误显示成「未配置技能」
+  if (list === null) {
+    $('skills-list').innerHTML =
+      '<div class="skill-sub" style="color:var(--err)">技能列表加载失败，稍后自动重试；也可检查网络后刷新页面。</div>';
+    $('skills-meta').innerHTML = '';
+    return;
+  }
+  const rows = list.map((skill) => {
+    const tag = skill.source === 'plan' ? '<span class="tag">套餐</span>' : '';
+    const meta = skill.installed
+      ? '已装 ' + esc(skill.installed_version || '')
+      : '<span class="muted">未安装</span>';
+    const action = skill.installed
+      ? '<button class="btn small danger" data-uninstall="' + esc(skill.canonical_slug) + '">卸载</button>'
+      : '<button class="btn small primary" data-install="' + esc(skill.canonical_slug) + '">安装</button>';
+    return '<div class="skill-item"><div class="skill-info"><div class="skill-name">'
+      + esc(displayName(skill.canonical_slug)) + tag + '</div><div class="skill-sub">'
+      + esc(skill.canonical_slug) + ' · ' + meta + '</div></div>' + action + '</div>';
+  });
+  const empty = rows.length ? '' : '<div class="skill-sub">套餐暂未配置技能，可在下方市场搜索安装</div>';
+  const metaLine = [];
+  if (s.skills_synced_at) metaLine.push('自动同步：' + new Date(s.skills_synced_at).toLocaleString());
+  if (s.skills_error) metaLine.push('<span style="color:var(--err)">' + esc(s.skills_error) + '</span>');
+  const metaHtml = metaLine.join(' · ');
+  // 5s 轮询会反复调用本函数：指纹（slug:装否:版本 + meta 行）没变时跳过
+  // innerHTML 重写，避免替换按钮节点吞掉正在进行的点击、打断卸载二次确认
+  const fingerprint = list.map((skill) =>
+    skill.canonical_slug + ':' + (skill.installed ? 1 : 0) + ':' + (skill.installed_version || ''),
+  ).join('|') + '#' + metaHtml;
+  if ($('skills-list').dataset.fingerprint !== fingerprint) {
+    $('skills-list').dataset.fingerprint = fingerprint;
+    $('skills-list').innerHTML = rows.join('') + empty;
+    $('skills-meta').innerHTML = metaHtml;
+    $('skills-list').querySelectorAll('[data-install]').forEach((btn) => {
+      btn.dataset.loading = '安装中…';
+      btn.onclick = () => skillAction(btn.dataset.install, 'install', btn);
+    });
+    $('skills-list').querySelectorAll('[data-uninstall]').forEach((btn) => {
+      btn.dataset.loading = '卸载中…';
+      btn.onclick = () => confirmThen(btn, '确认卸载？', () =>
+        fetch('api/skill/uninstall', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ slug: btn.dataset.uninstall }),
+        }), '技能已卸载');
+    });
+  }
+};
+const CLI_TOOL_META = {
+  'lark-cli': { label: '飞书开放工具', desc: '飞书消息、文档、日历等操作能力' },
+  'ccpg-cli': { label: '公司内部工具', desc: '公司内部业务系统操作能力' },
+};
+const renderCli = async (s) => {
+  const cliEnabled = s.capabilities?.cli_deployd_enabled !== false;
+  const body = $('cli-body');
+  if (!s.logged_in) {
+    body.innerHTML = '<div class="skill-sub">登录后可用公司托管的 CLI 工具。</div>';
+    return;
+  }
+  if (!cliEnabled) {
+    body.innerHTML = '<div class="skill-sub">平台未开启 CLI 功能。</div>';
+    return;
+  }
+  // 真实探测本机安装与授权态（数秒），期间先展示读取中
+  body.innerHTML = '<div class="skill-sub">检测中…</div>';
+  let tools;
+  try {
+    const resp = await fetch('api/cli/status');
+    const data = await resp.json().catch(() => ({}));
+    if (!resp.ok) throw new Error(data.error || '检测失败');
+    tools = data.tools || {};
+  } catch {
+    body.innerHTML = '<div class="skill-sub" style="color:var(--err)">CLI 状态检测失败，请稍后重试。</div>';
+    return;
+  }
+  const rows = Object.entries(CLI_TOOL_META).map(([name, meta]) => {
+    const state = tools[name] || 'missing';
+    const status = state === 'authorized'
+      ? '<span class="pill ok" style="font-size:11px">已授权</span>'
+      : state === 'unauthorized'
+        ? '<span class="pill warn" style="font-size:11px">未授权</span>'
+        : '<span class="pill warn" style="font-size:11px">未安装</span>';
+    return '<div class="skill-item"><div class="skill-info"><div class="skill-name">'
+      + esc(name) + status + '</div><div class="skill-sub">'
+      + esc(meta.desc) + ' · ' + esc(meta.label) + '</div></div></div>';
+  });
+  body.innerHTML = rows.join('')
+    + '<div class="hint">在对话中直接使用（如 /lark 帮助），由 dsh 自动调用。</div>'
+    + '<div class="hint">未安装/未授权时，请联系管理员在镜像或本机完成 lark-cli、ccpg-cli 的安装与授权。</div>';
+};
+const pluginAction = (name, action, btn) => withLoading(
+  btn,
+  () => fetch('api/plugin/' + action, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ name }),
+  }),
+  action === 'install' ? '插件已安装' : action === 'remove' ? '插件已卸载' : '插件已升级',
+).then(() => renderPlugins());
+const renderPlugins = async () => {
+  const list = $('plugins-list');
+  list.innerHTML = '<div class="skill-sub">读取中…</div>';
+  let data;
+  try {
+    const resp = await fetch('api/plugin/list');
+    data = await resp.json().catch(() => ({}));
+    if (!resp.ok) throw new Error(data.error || '读取插件列表失败');
+  } catch (error) {
+    list.innerHTML = '<div class="skill-sub" style="color:var(--err)">' + esc(error.message) + '</div>';
+    return;
+  }
+  // 渲染成功即标记已加载：避免切 tab 重复拉取（outdated 查询有网络开销）
+  renderPlugins._loaded = true;
+  if (!data.plugins?.length) {
+    list.innerHTML = '<div class="skill-sub">暂无已安装插件；内置插件缺失时会在 dsh 启动时自动恢复。</div>';
+    return;
+  }
+  const rows = data.plugins.map((plugin) => {
+    // 三态：未安装 → 安装按钮；已装 → 升级（有新版本时）+ 卸载（非内置非自身）
+    const statePill = !plugin.version
+      ? '<span class="pill warn" style="font-size:11px">未安装</span>'
+      : plugin.active
+        ? '<span class="pill ok" style="font-size:11px">已激活</span>'
+        : '<span class="pill warn" style="font-size:11px">未激活</span>';
+    const builtinTag = plugin.builtin
+      ? '<span class="tag">内置</span>'
+      : '';
+    const version = plugin.latest
+      ? esc(plugin.version) + ' → <b>' + esc(plugin.latest) + '</b>'
+      : esc(plugin.version || '—');
+    const desc = plugin.description
+      ? esc(plugin.description) + '<br>'
+      : '';
+    const actions = [];
+    if (!plugin.version) {
+      actions.push('<button class="btn small primary" data-install-pkg="' + esc(plugin.name) + '">安装</button>');
+    } else {
+      // 自身随平台镜像升级（self_managed 由后端下发）：不提供升级/卸载；
+      // 内置插件可升级但不提供卸载（后端同样拒绝）
+      if (plugin.latest && plugin.latest !== plugin.version && !plugin.self_managed) {
+        actions.push('<button class="btn small primary" data-upgrade="' + esc(plugin.name) + '">升级</button>');
+      }
+      if (!plugin.self_managed && !plugin.builtin) {
+        actions.push('<button class="btn small danger" data-remove="' + esc(plugin.name) + '">卸载</button>');
+      }
+    }
+    const actionHtml = actions.length
+      ? '<div style="display:flex;gap:6px">' + actions.join('') + '</div>'
+      : '';
+    return '<div class="skill-item"><div class="skill-info"><div class="skill-name">'
+      + esc(plugin.name) + builtinTag + statePill
+      + '</div><div class="skill-sub">' + desc + esc(plugin.source) + ' · ' + version
+      + (plugin.version && !plugin.active ? ' · 未在 bundle 层，重启 dsh 后生效' : '')
+      + '</div></div>' + actionHtml + '</div>';
+  });
+  list.innerHTML = rows.join('');
+  list.querySelectorAll('[data-install-pkg]').forEach((btn) => {
+    btn.dataset.loading = '安装中…';
+    btn.onclick = () => pluginAction(btn.dataset.installPkg, 'install', btn);
+  });
+  list.querySelectorAll('[data-upgrade]').forEach((btn) => {
+    btn.dataset.loading = '升级中…';
+    btn.onclick = () => pluginAction(btn.dataset.upgrade, 'upgrade', btn);
+  });
+  list.querySelectorAll('[data-remove]').forEach((btn) => {
+    btn.dataset.loading = '卸载中…';
+    btn.onclick = () => confirmThen(btn, '确认卸载？', () =>
+      fetch('api/plugin/remove', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: btn.dataset.remove }),
+      }).then(() => renderPlugins()), '插件已卸载');
+  });
+};
+const renderAbout = (s) => {
+  const lines = [
+    '<div class="kv"><span class="k">插件版本</span><span class="v">dsh-agentone v' + esc(s.plugin_version || '?') + '</span></div>',
+    '<div class="kv"><span class="k">登录账号</span><span class="v">' + esc(s.user_email || '未登录') + '</span></div>',
+    '<div class="kv"><span class="k">所属套餐</span><span class="v">' + esc(s.capabilities?.plan_name || '—') + '</span></div>',
+    '<div class="kv"><span class="k">平台地址</span><span class="v muted">' + esc(s.platform_url || '—') + '</span></div>',
+  ];
+  $('about-body').innerHTML = lines.join('');
+};
+const searchCatalog = async () => {
+  const btn = $('search-btn');
+  const q = $('search-input').value.trim();
+  btn.disabled = true;
+  btn.innerHTML = '<span class="spin"></span>搜索中';
+  try {
+    const resp = await fetch('api/skill/catalog?q=' + encodeURIComponent(q));
+    const data = await resp.json().catch(() => ({}));
+    if (!resp.ok) throw new Error(data.error || '搜索失败');
+    const installed = new Set((data.installed || []).map((skill) => skill.canonical_slug));
+    const rows = (data.items || []).map((item) => {
+      const known = installed.has(item.slug);
+      const action = known
+        ? '<span class="pill ok" style="font-size:11px">已安装</span>'
+        : '<button class="btn small primary" data-install="' + esc(item.slug) + '">安装</button>';
+      return '<div class="skill-item"><div class="skill-info"><div class="skill-name">'
+        + esc(item.display_name || item.slug)
+        + '<span class="tag" data-cat="' + esc(item.category || '') + '">' + esc(item.category || '技能') + '</span></div><div class="skill-sub">'
+        + esc(item.summary || item.slug) + ' · ' + (item.downloads || 0) + ' 次安装</div></div>' + action + '</div>';
+    });
+    $('search-results').innerHTML = rows.length
+      ? rows.join('')
+      : '<div class="skill-sub">没有匹配的技能</div>';
+    $('search-results').querySelectorAll('[data-install]').forEach((btn) => {
+      btn.dataset.loading = '安装中…';
+      btn.onclick = () => skillAction(btn.dataset.install, 'install', btn).then(() => searchCatalog());
+    });
+  } catch (error) {
+    notify(error.message, 'err');
+  } finally {
+    btn.disabled = false;
+    btn.innerHTML = '搜索';
+  }
+};
+const refresh = async () => {
+  let s;
+  try {
+    s = await (await fetch('api/status')).json();
+  } catch {
+    statePill.className = 'pill warn';
+    statePill.textContent = '连接中…';
+    return;
+  }
+  lastStatus = s;
+  const modelEnabled = s.capabilities?.channels?.model?.enabled !== false;
+  // 套餐审批通过检测：plan_state 由非 active 变为 active 时自动同步模型
+  const planState = s.capabilities?.plan_state;
+  if (s.logged_in && modelEnabled) {
+    if (planState === 'active' && lastPlanState && lastPlanState !== 'active') {
+      notify('套餐已生效，正在同步模型…');
+      fetch('api/model/sync', { method: 'POST' }).catch(() => {});
+    }
+    lastPlanState = planState || null;
+  }
+  statePill.className = 'pill ' + (s.logged_in ? 'ok' : 'warn');
+  statePill.textContent = s.logged_in ? '已登录' : '未登录';
+  // 首个状态到达：骨架占位让位给登录卡/主内容
+  bootCard.hidden = true;
+  loginCard.hidden = s.logged_in;
+  mainCards.hidden = !s.logged_in;
+  logoutBtn.hidden = !s.logged_in;
+  if (s.logged_in && s.model) {
+    const m = s.model;
+    const lines = [];
+    // 阻断判定优先看平台错误码（plan_required，见 plugin_gateway
+    // _plan_required_response）；中文正则仅作旧平台/无码时的兜底。
+    const planRequiredError = m.error
+      && (m.error_code === 'plan_required' || /申请套餐|暂无可用模型/.test(m.error));
+    const noModels = !m.default_model && !(m.models_count > 0);
+    const planBlocked = modelEnabled && Boolean(planRequiredError || (noModels && m.error));
+    if (!modelEnabled) {
+      lines.push('<div class="kv"><span class="k">模型同步</span><span class="v muted">平台未开启模型托管</span></div>');
+    } else if (planBlocked) {
+      const planText = s.capabilities?.plan_state === 'pending'
+        ? '套餐申请审批中，通过后模型自动可用。'
+        : '当前账号暂无可用模型，申请套餐通过后自动可用。';
+      lines.push('<div class="kv"><span class="k">模型使用</span><span class="v" style="color:var(--warn)">' + planText + '</span></div>');
+    } else {
+      lines.push('<div class="kv"><span class="k">默认模型</span><span class="v">' + esc(m.default_model || '未同步') + '</span></div>');
+      lines.push('<div class="kv"><span class="k">可用模型</span><span class="v">' + esc(m.models_count) + ' 个</span></div>');
+      if (m.synced_at) lines.push('<div class="kv"><span class="k">上次同步</span><span class="v">' + new Date(m.synced_at).toLocaleString() + '</span></div>');
+    }
+    if (!planBlocked && m.error) lines.push('<div class="kv"><span class="k">同步状态</span><span class="v" style="color:var(--err)">' + esc(m.error) + '</span></div>');
+    if (s.token_expires_at) {
+      lines.push('<div class="kv"><span class="k">登录有效期</span><span class="v muted">至 ' + new Date(s.token_expires_at).toLocaleDateString() + '（自动续期）</span></div>');
+    }
+    $('model-body').innerHTML = lines.join('')
+      + (planBlocked
+        ? '<div class="row" style="margin-top:10px"><button id="goto-plan-btn" class="btn primary small">去申请套餐</button></div>'
+        : '');
+    $('sync-btn').hidden = !modelEnabled || planBlocked;
+    const gotoPlan = $('goto-plan-btn');
+    if (gotoPlan) gotoPlan.onclick = () => activateTab('plan');
+  }
+  renderSkills(s);
+  renderAbout(s);
+};
+$('login-btn').onclick = async () => {
+  const btn = $('login-btn');
+  const base = location.pathname.replace(/\\/agentone\\/?$/, '');
+  const callbackUrl = location.pathname.startsWith('/portal/')
+    ? base + '/agentone/callback'
+    : location.origin + base + '/agentone/callback';
+  const resp = await fetch('api/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ callback_url: callbackUrl }),
+  });
+  const data = await resp.json();
+  if (!resp.ok) { notify(data.error || '发起登录失败', 'err'); return; }
+  // 新标签页（顶层上下文）打开：iframe 内跨源 localStorage 被浏览器分区隔离
+  window.open(data.login_url, '_blank');
+  // 按钮保持可点：授权窗被用户关掉后可立即重新发起，无需等 2 分钟
+  btn.textContent = '已打开授权窗口，完成后自动继续（可重开）';
+};
+$('sync-btn').onclick = () => withLoading(
+  $('sync-btn'),
+  () => fetch('api/model/sync', { method: 'POST' }),
+  '平台模型已同步',
+);
+logoutBtn.onclick = () => withLoading(
+  logoutBtn,
+  () => fetch('api/logout', { method: 'POST' }),
+  '已退出登录',
+);
+$('search-btn').onclick = searchCatalog;
+$('search-input').addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') searchCatalog();
+});
+// 页面隐藏时暂停轮询（后台标签页每 5s 打一次 status 是纯浪费），
+// 重新可见时立即刷新一次拿最新状态
+const pollTimer = setInterval(() => { if (!document.hidden) refresh(); }, 5000);
+document.addEventListener('visibilitychange', () => {
+  if (!document.hidden) refresh();
+});
+refresh();
+`;
+
+export function statusPageHtml() {
+  return `<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>AgentOne</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>${PAGE_CSS}</style>
+</head>
+<body>
+<div class="wrap">
+  <div class="head">
+    <div class="logo">A1</div>
+    <h2>AgentOne 平台</h2>
+    <span id="state-pill" class="pill warn">读取中…</span>
+    <button id="logout-btn" class="btn danger small" data-loading="退出中…" hidden>退出登录</button>
+  </div>
+  <div id="toast" class="banner toast-fixed"></div>
+
+  <div id="boot-card" class="card">
+    <div class="skeleton w60"></div>
+    <div class="skeleton"></div>
+    <div class="skeleton"></div>
+  </div>
+
+  <div id="login-card" class="card hero" hidden>
+    <p class="big">登录后申请套餐，即可使用公司托管的模型与技能</p>
+    <p>飞书账号一键授权，无需任何 API Key；套餐审批通过后模型自动配置。</p>
+    <button id="login-btn" class="btn primary">飞书登录</button>
+    <p class="hint">将在新窗口完成授权，此处自动继续。</p>
+  </div>
+
+  <div id="main-cards" hidden>
+    <nav class="tabs" id="tabs" role="tablist">
+      <button class="tab active" role="tab" aria-selected="true" data-tab="model">模型</button>
+      <button class="tab" role="tab" aria-selected="false" data-tab="plan">套餐</button>
+      <button class="tab" role="tab" aria-selected="false" data-tab="skills">技能</button>
+      <button class="tab" role="tab" aria-selected="false" data-tab="plugins">插件</button>
+      <button class="tab" role="tab" aria-selected="false" data-tab="cli">CLI</button>
+      <button class="tab" role="tab" aria-selected="false" data-tab="about">关于</button>
+    </nav>
+
+    <div class="tabpane" id="pane-model">
+      <div class="card">
+        <h3>平台模型</h3>
+        <div id="model-body"></div>
+        <div class="row" style="margin-top:10px">
+          <button id="sync-btn" class="btn ghost small" data-loading="同步中…">重新同步模型</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="tabpane" id="pane-plan" hidden>
+      <div class="card">
+        <h3>平台套餐 <span class="muted">决定能否使用平台模型</span></h3>
+        <div id="plan-body"><div class="skill-sub">读取中…</div></div>
+      </div>
+    </div>
+
+    <div class="tabpane" id="pane-skills" hidden>
+      <div class="card" id="skills-card">
+        <h3>平台技能 <span class="muted">套餐自动同步</span></h3>
+        <div id="skills-list"></div>
+        <div class="hint" id="skills-meta"></div>
+        <div class="search" style="margin-top:12px">
+          <input id="search-input" placeholder="搜索技能市场，如：数据 / 报告 / lark" />
+          <button id="search-btn" class="btn ghost small">搜索</button>
+        </div>
+        <div id="search-results"></div>
+      </div>
+    </div>
+
+    <div class="tabpane" id="pane-plugins" hidden>
+      <div class="card">
+        <h3>dsh 插件 <span class="muted">镜像内置与自行安装的插件</span></h3>
+        <div id="plugins-list"></div>
+        <div class="hint" id="plugins-hint">标注「内置」的插件由镜像预装，不可卸载，可升级到最新版。更多插件可在 dsh 设置的插件市场里安装。</div>
+      </div>
+    </div>
+
+    <div class="tabpane" id="pane-cli" hidden>
+      <div class="card">
+        <h3>CLI 工具
+          <button id="cli-recheck-btn" class="btn ghost small" style="margin-left:auto" data-loading="检测中…">重新检测</button>
+        </h3>
+        <div id="cli-body"></div>
+      </div>
+    </div>
+
+    <div class="tabpane" id="pane-about" hidden>
+      <div class="card">
+        <h3>关于</h3>
+        <div id="about-body"></div>
+        <div class="footer" style="margin-top:12px">
+          <span class="muted" style="font-size:12px">登录与配置自动续期，日常无需维护</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>${PAGE_JS}</script>
+</body>
+</html>`;
+}
+
+/** 授权回调后的完成页（顶层标签页）：引导用户返回 dsh，并尝试自动关闭。 */
+export function donePageHtml(ok) {
+  const body = ok
+    ? '<p class="big">✓ 已连接 AgentOne 平台</p><p>模型与技能正在自动配置，稍候即可关闭本页返回 dsh。</p>'
+    : '<p class="big">授权未完成</p><p>可以关闭本页，回到 dsh 设置里的「AgentOne」重新发起登录。</p>';
+  return `<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<title>AgentOne</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+body { font-family: system-ui, -apple-system, "PingFang SC", sans-serif; background:#f6f8fa;
+  color:#1f2328; display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0; }
+@media (prefers-color-scheme: dark) { body { background:#0d1117; color:#e6edf3; } .card { background:#161b22; border-color:#30363d; } }
+.card { background:#fff; border:1px solid #d8dee4; border-radius:16px; padding:32px 36px;
+  text-align:center; max-width:380px; margin:16px; }
+.big { font-size:17px; font-weight:600; margin:0 0 8px; }
+.card p { color:#57606a; margin:0 0 18px; font-size:14px; }
+button { font:inherit; padding:9px 22px; border-radius:10px; border:none; cursor:pointer;
+  background:#2f6feb; color:#fff; }
+.spin { width:14px;height:14px;border:2px solid #57606a;border-top-color:transparent;
+  border-radius:50%;display:inline-block;vertical-align:-2px;margin-right:8px;
+  animation:spin .8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+</style>
+</head>
+<body>
+<div class="card">
+  <div id="body">${body}</div>
+  <button onclick="window.close()">关闭本页</button>
+  <button id="retry-btn" style="display:none;margin-left:10px" onclick="retryModelSync()">重试同步</button>
+</div>
+  <script>
+    if (${ok ? 'true' : 'false'}) {
+      // 配置在宿主进程异步进行；就绪后给出可关闭提示并尝试自动关页。
+      // 模型同步失败时不再无限等待：展示原因并提供重试。
+      const timer = setInterval(async () => {
+        try {
+          const s = await (await fetch('api/status')).json();
+          if (s.logged_in && s.model?.default_model) {
+            clearInterval(timer);
+            document.getElementById('body').innerHTML =
+              '<p class="big">✓ 一切就绪</p><p>默认模型 ' + s.model.default_model +
+              '，技能已同步。请返回 dsh 继续使用。</p>';
+            setTimeout(() => window.close(), 1200);
+            return;
+          }
+          if (s.logged_in && s.model?.error) {
+            clearInterval(timer);
+            document.getElementById('body').innerHTML =
+              '<p class="big" style="color:#c0392b">模型配置未完成</p><p>' + s.model.error + '</p>';
+            document.getElementById('retry-btn').style.display = 'inline-block';
+          }
+        } catch { /* 继续等待 */ }
+      }, 1500);
+      setTimeout(() => clearInterval(timer), 120000);
+    }
+    const retryModelSync = async () => {
+      const btn = document.getElementById('retry-btn');
+      btn.disabled = true;
+      btn.textContent = '同步中…';
+      try {
+        const resp = await fetch('api/model/sync', { method: 'POST' });
+        const data = await resp.json().catch(() => ({}));
+        if (!resp.ok) throw new Error(data.error || '同步失败');
+        document.getElementById('body').innerHTML =
+          '<p class="big">✓ 一切就绪</p><p>默认模型 ' + data.default_model +
+          '。请返回 dsh 继续使用。</p>';
+        setTimeout(() => window.close(), 1200);
+      } catch (error) {
+        document.getElementById('body').innerHTML =
+          '<p class="big" style="color:#c0392b">模型配置未完成</p><p>' + error.message + '</p>';
+        btn.disabled = false;
+        btn.textContent = '重试同步';
+        btn.style.display = 'inline-block';
+      }
+    };
+  </script>
+</body>
+</html>`;
+}