npm - @simonyea/holysheep-cli - Versions diffs - 1.7.53 → 1.7.55 - Mend

@simonyea/holysheep-cli 1.7.53 → 1.7.55

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 (7) hide show

package/package.json +2 -2
package/src/commands/webui.js +42 -0
package/src/index.js +12 -0
package/src/tools/claude-process-proxy.js +37 -42
package/src/tools/codex.js +6 -8
package/src/webui/index.html +536 -0
package/src/webui/server.js +621 -0

package/src/webui/index.html ADDED Viewed

@@ -0,0 +1,536 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>HolySheep WebUI</title>
+<style>
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg: #f5f6fa; --surface: #fff; --surface2: #f0f1f5;
+  --text: #1a1a2e; --text2: #777; --border: #e2e4ea;
+  --primary: #e8a46a; --primary-dim: rgba(232,164,106,0.12);
+  --success: #22c55e; --success-dim: rgba(34,197,94,0.10);
+  --warning: #f59e0b; --warning-dim: rgba(245,158,11,0.10);
+  --error: #ef4444; --error-dim: rgba(239,68,68,0.10);
+  --radius: 12px; --shadow: 0 1px 4px rgba(0,0,0,0.06);
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --mono: "SF Mono", "Cascadia Code", Consolas, monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0d0d1a; --surface: #181828; --surface2: #1e1e32;
+    --text: #e4e4f0; --text2: #888; --border: #2a2a44;
+    --shadow: 0 1px 4px rgba(0,0,0,0.3);
+  }
+}
+html { font-size: 15px; }
+body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; }
+a { color: var(--primary); text-decoration: none; }
+a:hover { text-decoration: underline; }
+/* Layout */
+.app { max-width: 720px; margin: 0 auto; padding: 16px 20px 40px; }
+/* Header */
+.header { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 12px; }
+.header-left { display: flex; align-items: center; gap: 12px; }
+.header-left h1 { font-size: 1.3rem; font-weight: 700; }
+.header-left h1 span { color: var(--primary); }
+.header-left a { font-size: 0.8rem; color: var(--text2); }
+.header-right { display: flex; align-items: center; gap: 12px; }
+.lang-btn { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-size: 0.75rem; color: var(--text2); cursor: pointer; font-family: var(--font); }
+.lang-btn:hover { border-color: var(--primary); color: var(--primary); }
+.ver { color: var(--text2); font-size: 0.8rem; }
+/* Sections */
+.section { margin-bottom: 24px; }
+.section-title { font-size: 1rem; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
+.section-title .hint { font-size: 0.8rem; color: var(--text2); font-weight: 400; }
+/* Cards */
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
+/* Account */
+.account-card { margin-bottom: 24px; }
+.account-logged-in .account-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.account-top .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.dot-ok { background: var(--success); }
+.dot-warn { background: var(--warning); }
+.dot-err { background: var(--error); }
+.dot-gray { background: var(--text2); }
+.account-top .status-text { font-weight: 600; }
+.account-top .key-text { font-family: var(--mono); font-size: 0.85rem; color: var(--text2); }
+.account-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 12px; text-align: center; }
+.account-stats .stat-val { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
+.account-stats .stat-lbl { font-size: 0.75rem; color: var(--text2); margin-top: 2px; }
+.account-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.login-form { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
+.login-form input { flex: 1; font-family: var(--mono); background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; font-size: 0.9rem; outline: none; }
+.login-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-dim); }
+.register-link { font-size: 0.8rem; color: var(--text2); margin-top: 8px; }
+/* Buttons */
+.btn { font-family: var(--font); cursor: pointer; border: none; border-radius: 6px; padding: 7px 14px; font-size: 0.85rem; transition: all .15s; display: inline-flex; align-items: center; gap: 6px; }
+.btn-primary { background: var(--primary); color: #fff; font-weight: 600; }
+.btn-primary:hover { filter: brightness(1.08); }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
+.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
+.btn-danger { background: transparent; color: var(--error); border: 1px solid var(--error-dim); }
+.btn-danger:hover { background: var(--error-dim); }
+.btn-sm { padding: 5px 10px; font-size: 0.8rem; }
+.btn-link { background: none; color: var(--primary); padding: 0; font-size: 0.85rem; }
+.btn-link:hover { text-decoration: underline; }
+/* Tool cards */
+.tool-grid { display: flex; flex-direction: column; gap: 10px; }
+.tool-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .15s; }
+.tool-card:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
+.tool-card .tool-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+.tool-card .tool-body { flex: 1; min-width: 0; }
+.tool-card .tool-name { font-weight: 600; font-size: 0.95rem; }
+.tool-card .tool-meta { font-size: 0.8rem; color: var(--text2); margin-top: 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.tool-card .tool-hint { font-size: 0.78rem; color: var(--text2); margin-top: 4px; }
+.tool-card .tool-actions { display: flex; gap: 6px; flex-shrink: 0; }
+.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.72rem; font-weight: 600; }
+.badge-ok { background: var(--success-dim); color: var(--success); }
+.badge-warn { background: var(--warning-dim); color: var(--warning); }
+.badge-gray { background: var(--surface2); color: var(--text2); }
+/* Console */
+.console-area { margin-top: 12px; display: none; }
+.console-area.open { display: block; }
+.console-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.console-header span { font-size: 0.85rem; font-weight: 600; }
+.console { background: #111; color: #ccc; font-family: var(--mono); font-size: 0.78rem; padding: 12px; border-radius: 8px; max-height: 260px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; line-height: 1.6; }
+.console .ok { color: #4ade80; }
+.console .err { color: #f87171; }
+.console .warn { color: #fbbf24; }
+.console .info { color: #60a5fa; }
+/* Environment */
+.env-table { width: 100%; }
+.env-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.85rem; }
+.env-row:last-child { border-bottom: none; }
+.env-key { font-family: var(--mono); font-size: 0.8rem; flex: 1; }
+.env-val { font-size: 0.8rem; }
+.env-rc { font-size: 0.8rem; color: var(--text2); margin-top: 10px; }
+/* Footer */
+.footer { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 32px; text-align: center; }
+.footer-brand { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
+.footer-brand span { color: var(--primary); }
+.footer-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 0.85rem; margin-bottom: 8px; }
+.footer-sub { font-size: 0.78rem; color: var(--text2); }
+/* Misc */
+.loading { color: var(--text2); font-size: 0.85rem; }
+.hidden { display: none !important; }
+.mono { font-family: var(--mono); }
+</style>
+</head>
+<body>
+<div class="app" id="app">
+  <div class="header">
+    <div class="header-left">
+      <h1><span>HolySheep</span></h1>
+      <a href="https://holysheep.ai" target="_blank">holysheep.ai</a>
+    </div>
+    <div class="header-right">
+      <button class="lang-btn" onclick="toggleLang()" id="lang-btn"></button>
+      <span class="ver" id="version"></span>
+    </div>
+  </div>
+  <div id="account-section" class="section"></div>
+  <div id="tools-section" class="section"></div>
+  <div id="console-section" class="console-area" id="console-area">
+    <div class="console-header">
+      <span id="console-title"></span>
+      <button class="btn btn-sm btn-outline" onclick="closeConsole()" id="console-close-btn"></button>
+    </div>
+    <div class="console" id="console-output"></div>
+  </div>
+  <div id="env-section" class="section"></div>
+  <div id="footer-section"></div>
+</div>
+<script>
+// ── i18n ─────────────────────────────────────────────────────────────────────
+const I18N = {
+  zh: {
+    loggedIn: '已登录', notLoggedIn: '未登录', login: '登录', logout: '退出登录',
+    balance: '余额', today: '今日消费', month: '本月消费', calls: '累计调用',
+    recharge: '充值', register: '没有账号？去注册',
+    apiKeyPlaceholder: '请输入 API Key (cr_xxx)',
+    tools: 'AI 工具', toolsHint: '一键配置使用 HolySheep API',
+    installed: '已安装', notInstalled: '未安装', configured: '已配置', notConfigured: '未配置',
+    configure: '一键配置', reconfigure: '重新配置', reset: '重置', install: '安装',
+    installManual: '手动安装',
+    env: '环境变量', cleanConflicts: '清理冲突变量', cleaning: '清理中...',
+    set: '已设置', notSet: '未设置',
+    shellConfig: 'Shell 配置', managedBlock: '有托管块', noManagedBlock: '无托管块',
+    docs: '使用文档', pricing: '价格', support: '联系支持',
+    slogan: '官方 Claude / GPT / Gemini API 代理 · ¥1 = $1',
+    checking: '加载中...', close: '关闭', log: '操作日志',
+    confirmReset: '确认重置此工具的 HolySheep 配置？',
+    configSuccess: '配置成功', configFailed: '配置失败',
+    installSuccess: '安装完成', installFailed: '安装失败',
+    needLogin: '请先登录', cleanDone: '已清理',
+    hotReload: '已生效，无需重启', needRestart: '重启终端后生效',
+    launch: '启动命令',
+  },
+  en: {
+    loggedIn: 'Logged in', notLoggedIn: 'Not logged in', login: 'Login', logout: 'Logout',
+    balance: 'Balance', today: 'Today', month: 'This Month', calls: 'Total Calls',
+    recharge: 'Recharge', register: 'No account? Register',
+    apiKeyPlaceholder: 'Enter API Key (cr_xxx)',
+    tools: 'AI Tools', toolsHint: 'One-click setup for HolySheep API',
+    installed: 'Installed', notInstalled: 'Not installed', configured: 'Configured', notConfigured: 'Not configured',
+    configure: 'Configure', reconfigure: 'Reconfigure', reset: 'Reset', install: 'Install',
+    installManual: 'Manual install',
+    env: 'Environment Variables', cleanConflicts: 'Clean Conflicts', cleaning: 'Cleaning...',
+    set: 'Set', notSet: 'Not set',
+    shellConfig: 'Shell Config', managedBlock: 'managed block', noManagedBlock: 'no managed block',
+    docs: 'Docs', pricing: 'Pricing', support: 'Support',
+    slogan: 'Official Claude / GPT / Gemini API Proxy',
+    checking: 'Loading...', close: 'Close', log: 'Activity Log',
+    confirmReset: 'Reset HolySheep config for this tool?',
+    configSuccess: 'Configured', configFailed: 'Config failed',
+    installSuccess: 'Installed', installFailed: 'Install failed',
+    needLogin: 'Please login first', cleanDone: 'Cleaned',
+    hotReload: 'Active, no restart needed', needRestart: 'Restart terminal to apply',
+    launch: 'Launch',
+  },
+}
+let lang = localStorage.getItem('hs-lang') || (navigator.language.startsWith('zh') ? 'zh' : 'en')
+const t = (k) => I18N[lang]?.[k] || I18N['en'][k] || k
+function toggleLang() {
+  lang = lang === 'zh' ? 'en' : 'zh'
+  localStorage.setItem('hs-lang', lang)
+  init()
+}
+// ── State ────────────────────────────────────────────────────────────────────
+let busy = false
+// ── Init ─────────────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', init)
+async function init() {
+  document.getElementById('lang-btn').textContent = lang === 'zh' ? 'EN' : '中文'
+  document.getElementById('console-close-btn').textContent = t('close')
+  loadAccount()
+  loadTools()
+  loadEnv()
+  renderFooter()
+}
+// ── API helper ───────────────────────────────────────────────────────────────
+async function api(path, opts) {
+  const res = await fetch('/api/' + path, opts)
+  return res.json()
+}
+// ── Account section ──────────────────────────────────────────────────────────
+async function loadAccount() {
+  const el = document.getElementById('account-section')
+  el.innerHTML = `<div class="card account-card"><span class="loading">${t('checking')}</span></div>`
+  const [status, balance] = await Promise.allSettled([api('status'), api('balance')])
+  const s = status.value || {}
+  const b = balance.value || {}
+  document.getElementById('version').textContent = 'v' + (s.version || '')
+  if (s.loggedIn) {
+    const hasBalance = !b.error && typeof b.balance === 'number'
+    el.innerHTML = `<div class="card account-card account-logged-in">
+      <div class="account-top">
+        <span class="dot dot-ok"></span>
+        <span class="status-text">${t('loggedIn')}</span>
+        <span class="key-text">${esc(s.apiKey)}</span>
+      </div>
+      ${hasBalance ? `
+      <div class="account-stats">
+        <div><div class="stat-val">$${fmtNum(b.balance)}</div><div class="stat-lbl">${t('balance')}</div></div>
+        <div><div class="stat-val">$${fmtNum(b.todayCost)}</div><div class="stat-lbl">${t('today')}</div></div>
+        <div><div class="stat-val">$${fmtNum(b.monthCost)}</div><div class="stat-lbl">${t('month')}</div></div>
+        <div><div class="stat-val">${b.totalCalls.toLocaleString()}</div><div class="stat-lbl">${t('calls')}</div></div>
+      </div>` : ''}
+      <div class="account-actions">
+        <a class="btn btn-primary btn-sm" href="https://holysheep.ai/app/recharge" target="_blank">${t('recharge')} &rarr;</a>
+        <button class="btn btn-danger btn-sm" onclick="doLogout()">${t('logout')}</button>
+      </div>
+    </div>`
+  } else {
+    el.innerHTML = `<div class="card account-card">
+      <div style="display:flex;align-items:center;gap:8px">
+        <span class="dot dot-gray"></span>
+        <span>${t('notLoggedIn')}</span>
+      </div>
+      <div class="login-form">
+        <input type="password" id="login-key" placeholder="${t('apiKeyPlaceholder')}">
+        <button class="btn btn-primary" onclick="doLogin()" id="login-btn">${t('login')}</button>
+      </div>
+      <div class="register-link"><a href="https://holysheep.ai/register" target="_blank">${t('register')}</a></div>
+    </div>`
+  }
+}
+async function doLogin() {
+  const input = document.getElementById('login-key')
+  const key = input.value.trim()
+  if (!key) return
+  const btn = document.getElementById('login-btn')
+  btn.disabled = true
+  try {
+    const r = await api('login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey: key }) })
+    if (r.success) { init() } else { alert(r.message) }
+  } catch (e) { alert(e.message) }
+  btn.disabled = false
+}
+async function doLogout() {
+  await api('logout', { method: 'POST' })
+  init()
+}
+// ── Tools section ────────────────────────────────────────────────────────────
+async function loadTools() {
+  const el = document.getElementById('tools-section')
+  el.innerHTML = `<div class="section-title"><span>${t('tools')}</span><span class="hint">${t('toolsHint')}</span></div>
+    <div class="tool-grid"><span class="loading">${t('checking')}</span></div>`
+  const tools = await api('tools')
+  const grid = el.querySelector('.tool-grid')
+  grid.innerHTML = tools.map(tool => renderToolCard(tool)).join('')
+}
+function renderToolCard(tool) {
+  let dotClass, statusBadges, actions, hintLine
+  if (!tool.installed) {
+    dotClass = 'dot-gray'
+    statusBadges = `<span class="badge badge-gray">${t('notInstalled')}</span>`
+    if (tool.canAutoInstall) {
+      actions = `<button class="btn btn-primary btn-sm" onclick="doInstallTool('${tool.id}','${esc(tool.name)}')" ${busy ? 'disabled' : ''}>${t('install')}</button>`
+    } else {
+      actions = `<span class="badge badge-gray" style="font-weight:400">${t('installManual')}: ${esc(tool.installCmd)}</span>`
+    }
+    hintLine = ''
+  } else if (!tool.configured) {
+    dotClass = 'dot-warn'
+    statusBadges = `<span class="badge badge-ok">${t('installed')}</span> <span class="badge badge-warn">${t('notConfigured')}</span>`
+    actions = `<button class="btn btn-primary btn-sm" onclick="doConfigureTool('${tool.id}','${esc(tool.name)}')" ${busy ? 'disabled' : ''}>${t('configure')}</button>`
+    hintLine = tool.version ? `<span class="mono" style="font-size:0.78rem;color:var(--text2)">${esc(tool.version)}</span>` : ''
+  } else {
+    dotClass = 'dot-ok'
+    statusBadges = `<span class="badge badge-ok">${t('installed')}</span> <span class="badge badge-ok">${t('configured')}</span>`
+    actions = `<button class="btn btn-outline btn-sm" onclick="doConfigureTool('${tool.id}','${esc(tool.name)}')" ${busy ? 'disabled' : ''}>${t('reconfigure')}</button>
+      <button class="btn btn-danger btn-sm" onclick="doResetTool('${tool.id}','${esc(tool.name)}')" ${busy ? 'disabled' : ''}>${t('reset')}</button>`
+    hintLine = tool.version ? `<span class="mono" style="font-size:0.78rem;color:var(--text2)">${esc(tool.version)}</span>` : ''
+  }
+  const launchLine = tool.installed && tool.launchCmd
+    ? `<div class="tool-hint">${t('launch')}: <code class="mono">${esc(tool.launchCmd)}</code></div>`
+    : ''
+  const hintText = tool.installed && tool.hint
+    ? `<div class="tool-hint">${esc(tool.hint)}</div>`
+    : ''
+  return `<div class="tool-card" id="tool-${tool.id}">
+    <div class="tool-dot ${dotClass}"></div>
+    <div class="tool-body">
+      <div class="tool-name">${esc(tool.name)}</div>
+      <div class="tool-meta">${statusBadges} ${hintLine}</div>
+      ${hintText}${launchLine}
+    </div>
+    <div class="tool-actions">${actions}</div>
+  </div>`
+}
+// ── Tool actions ─────────────────────────────────────────────────────────────
+async function doConfigureTool(id, name) {
+  const status = await api('status')
+  if (!status.loggedIn) { alert(t('needLogin')); return }
+  if (busy) return
+  busy = true
+  openConsole(`${t('configure')}: ${name}`)
+  await streamSSE('/api/tool/configure', { toolId: id }, (ev) => {
+    if (ev.type === 'progress') appendLog(ev.message, 'info')
+    else if (ev.type === 'result') {
+      const cls = ev.status === 'ok' ? 'ok' : ev.status === 'warning' ? 'warn' : 'err'
+      appendLog(`${ev.status === 'ok' ? '✓' : '⚠'} ${ev.message}`, cls)
+      if (ev.file) appendLog(`  → ${ev.file}`, 'info')
+      if (ev.hot) appendLog(`  ${t('hotReload')}`, 'ok')
+      else if (ev.status === 'ok') appendLog(`  ${t('needRestart')}`, 'warn')
+      if (ev.steps) ev.steps.forEach(s => appendLog(`  · ${s}`, 'info'))
+    }
+    else if (ev.type === 'error') appendLog(`✗ ${ev.message}`, 'err')
+    else if (ev.type === 'done') {
+      appendLog(ev.success ? `\n✓ ${t('configSuccess')}` : `\n✗ ${t('configFailed')}`, ev.success ? 'ok' : 'err')
+    }
+  })
+  busy = false
+  loadTools()
+}
+async function doResetTool(id, name) {
+  if (!confirm(t('confirmReset'))) return
+  try {
+    await api('tool/reset', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ toolId: id }) })
+    loadTools()
+  } catch (e) { alert(e.message) }
+}
+async function doInstallTool(id, name) {
+  if (busy) return
+  busy = true
+  openConsole(`${t('install')}: ${name}`)
+  await streamSSE('/api/tool/install', { toolId: id }, (ev) => {
+    if (ev.type === 'progress') appendLog(ev.message, 'info')
+    else if (ev.type === 'output') appendLogRaw(ev.text)
+    else if (ev.type === 'done') {
+      appendLog(ev.success ? `\n✓ ${t('installSuccess')}` : `\n✗ ${t('installFailed')}`, ev.success ? 'ok' : 'err')
+    }
+  })
+  busy = false
+  loadTools()
+}
+// ── Console ──────────────────────────────────────────────────────────────────
+function openConsole(title) {
+  const area = document.getElementById('console-section')
+  document.getElementById('console-title').textContent = title || t('log')
+  document.getElementById('console-output').innerHTML = ''
+  area.classList.add('open')
+  area.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+}
+function closeConsole() {
+  document.getElementById('console-section').classList.remove('open')
+}
+function appendLog(msg, cls) {
+  const el = document.getElementById('console-output')
+  el.innerHTML += `<span class="${cls || ''}">${esc(msg)}</span>\n`
+  el.scrollTop = el.scrollHeight
+}
+function appendLogRaw(text) {
+  const el = document.getElementById('console-output')
+  el.innerHTML += esc(text)
+  el.scrollTop = el.scrollHeight
+}
+// ── SSE helper ───────────────────────────────────────────────────────────────
+async function streamSSE(url, body, onEvent) {
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  const reader = res.body.getReader()
+  const decoder = new TextDecoder()
+  let buffer = ''
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+    buffer += decoder.decode(value, { stream: true })
+    const parts = buffer.split('\n\n')
+    buffer = parts.pop()
+    for (const part of parts) {
+      const line = part.split('\n').find(l => l.startsWith('data: '))
+      if (!line) continue
+      try { onEvent(JSON.parse(line.slice(6))) } catch {}
+    }
+  }
+}
+// ── Environment section ──────────────────────────────────────────────────────
+async function loadEnv() {
+  const el = document.getElementById('env-section')
+  el.innerHTML = `<div class="section-title">${t('env')}</div><div class="card"><span class="loading">${t('checking')}</span></div>`
+  const data = await api('env')
+  const vars = data.vars || {}
+  const rcFiles = data.rcFiles || []
+  let rows = ''
+  for (const [k, v] of Object.entries(vars)) {
+    const isSet = v !== null
+    rows += `<div class="env-row">
+      <span class="dot ${isSet ? 'dot-ok' : 'dot-gray'}" style="width:8px;height:8px"></span>
+      <span class="env-key">${k}</span>
+      <span class="env-val" style="color:var(${isSet ? '--success' : '--text2'})">${isSet ? t('set') : t('notSet')}</span>
+    </div>`
+  }
+  let rcInfo = ''
+  if (rcFiles.length) {
+    rcInfo = `<div class="env-rc">${t('shellConfig')}: ${rcFiles.map(f =>
+      `<span class="mono">${esc(f.path)}</span> (${f.hasManagedBlock ? t('managedBlock') : t('noManagedBlock')})`
+    ).join(', ')}</div>`
+  }
+  el.innerHTML = `<div class="section-title">
+    <span>${t('env')}</span>
+    <button class="btn btn-outline btn-sm" onclick="doCleanEnv(this)">${t('cleanConflicts')}</button>
+  </div>
+  <div class="card">
+    <div class="env-table">${rows}</div>
+    ${rcInfo}
+  </div>`
+}
+async function doCleanEnv(btn) {
+  btn.disabled = true
+  btn.textContent = t('cleaning')
+  try {
+    const r = await api('env/clean', { method: 'POST' })
+    btn.textContent = `✓ ${t('cleanDone')}`
+    setTimeout(() => loadEnv(), 1500)
+  } catch (e) {
+    btn.textContent = e.message
+  }
+}
+// ── Footer ───────────────────────────────────────────────────────────────────
+function renderFooter() {
+  document.getElementById('footer-section').innerHTML = `<div class="footer">
+    <div class="footer-brand">🐑 <span>HolySheep</span></div>
+    <div class="footer-links">
+      <a href="https://holysheep.ai" target="_blank">${t('docs')}</a>
+      <a href="https://holysheep.ai/app/recharge" target="_blank">${t('recharge')}</a>
+      <a href="https://holysheep.ai/register" target="_blank">${lang === 'zh' ? '注册' : 'Register'}</a>
+      <a href="https://holysheep.ai/pricing" target="_blank">${t('pricing')}</a>
+    </div>
+    <div class="footer-sub">${t('slogan')}</div>
+  </div>`
+}
+// ── Util ─────────────────────────────────────────────────────────────────────
+function esc(s) {
+  if (!s) return ''
+  const d = document.createElement('div')
+  d.textContent = String(s)
+  return d.innerHTML
+}
+function fmtNum(n) {
+  if (n >= 10000) return Math.floor(n).toLocaleString()
+  if (n >= 100) return n.toFixed(1)
+  if (n >= 1) return n.toFixed(2)
+  return n.toFixed(4)
+}
+</script>
+</body>
+</html>