npm - @simonyea/holysheep-cli - Versions diffs - 1.7.52 → 1.7.54 - Mend

@simonyea/holysheep-cli 1.7.52 → 1.7.54

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

package/README.md +1 -0
package/package.json +1 -1
package/src/commands/claude.js +10 -0
package/src/commands/webui.js +49 -0
package/src/index.js +12 -0
package/src/tools/claude-code.js +27 -0
package/src/tools/claude-process-proxy.js +37 -41
package/src/webui/index.html +873 -0
package/src/webui/server.js +506 -0

package/src/webui/index.html ADDED Viewed

@@ -0,0 +1,873 @@
+<!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>
+/* ── Reset & Base ──────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+:root {
+  --bg: #f5f6fa; --surface: #fff; --surface2: #eef0f4;
+  --text: #1a1a2e; --text2: #666; --border: #dde;
+  --primary: #e8a46a; --primary-dim: rgba(232,164,106,0.15);
+  --success: #22c55e; --success-dim: rgba(34,197,94,0.12);
+  --warning: #f59e0b; --warning-dim: rgba(245,158,11,0.12);
+  --error: #ef4444; --error-dim: rgba(239,68,68,0.12);
+  --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,0.06);
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #0f0f1a; --surface: #1a1a2e; --surface2: #222240;
+    --text: #e8e8f0; --text2: #888; --border: #333350;
+    --shadow: 0 1px 3px 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; }
+button { font-family: var(--font); cursor: pointer; border: none; border-radius: 6px; padding: 8px 16px; font-size: 0.9rem; transition: all .15s; }
+input[type="text"], input[type="password"] {
+  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; width: 100%; outline: none;
+}
+input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-dim); }
+/* ── Layout ────────────────────────────────────────────────────────────── */
+.app { max-width: 960px; margin: 0 auto; padding: 20px; }
+.header { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; margin-bottom: 8px; }
+.header h1 { font-size: 1.4rem; font-weight: 700; }
+.header h1 span { color: var(--primary); }
+.header .ver { color: var(--text2); font-size: 0.8rem; }
+/* ── Tabs ──────────────────────────────────────────────────────────────── */
+.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
+.tab { padding: 10px 18px; font-size: 0.9rem; color: var(--text2); background: none; border-radius: 8px 8px 0 0;
+  position: relative; transition: color .15s; }
+.tab:hover { color: var(--text); background: var(--surface); }
+.tab.active { color: var(--primary); font-weight: 600; }
+.tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--primary); }
+/* ── Cards ─────────────────────────────────────────────────────────────── */
+.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow); }
+.card h3 { font-size: 1rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
+.stat { text-align: center; padding: 12px; }
+.stat .value { font-size: 1.6rem; font-weight: 700; color: var(--primary); }
+.stat .label { font-size: 0.8rem; color: var(--text2); margin-top: 4px; }
+/* ── Buttons ───────────────────────────────────────────────────────────── */
+.btn-primary { background: var(--primary); color: #fff; font-weight: 600; }
+.btn-primary:hover { filter: brightness(1.1); }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
+.btn-secondary:hover { background: var(--border); }
+.btn-danger { background: var(--error); color: #fff; }
+.btn-danger:hover { filter: brightness(1.1); }
+.btn-sm { padding: 5px 10px; font-size: 0.8rem; }
+.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
+/* ── Status indicators ─────────────────────────────────────────────────── */
+.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
+.dot-ok { background: var(--success); }
+.dot-warn { background: var(--warning); }
+.dot-err { background: var(--error); }
+.dot-gray { background: var(--text2); }
+.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
+.badge-ok { background: var(--success-dim); color: var(--success); }
+.badge-warn { background: var(--warning-dim); color: var(--warning); }
+.badge-err { background: var(--error-dim); color: var(--error); }
+.badge-gray { background: var(--surface2); color: var(--text2); }
+/* ── Check list ────────────────────────────────────────────────────────── */
+.check-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
+.check-row:last-child { border-bottom: none; }
+.check-label { flex: 1; }
+.check-detail { color: var(--text2); font-size: 0.85rem; font-family: var(--mono); }
+/* ── Tool cards ────────────────────────────────────────────────────────── */
+.tool-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface);
+  border: 1px solid var(--border); border-radius: var(--radius); }
+.tool-icon { font-size: 1.5rem; width: 40px; text-align: center; }
+.tool-info { flex: 1; }
+.tool-info .name { font-weight: 600; font-size: 0.95rem; }
+.tool-info .meta { font-size: 0.8rem; color: var(--text2); margin-top: 2px; }
+.tool-actions { display: flex; gap: 6px; }
+/* ── Console ───────────────────────────────────────────────────────────── */
+.console { background: #111; color: #ccc; font-family: var(--mono); font-size: 0.8rem; padding: 14px;
+  border-radius: var(--radius); max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
+  line-height: 1.5; margin-top: 12px; }
+.console .ok { color: #4ade80; }
+.console .err { color: #f87171; }
+.console .warn { color: #fbbf24; }
+.console .info { color: #60a5fa; }
+/* ── Wizard steps ──────────────────────────────────────────────────────── */
+.steps { display: flex; gap: 0; margin-bottom: 20px; }
+.step { flex: 1; text-align: center; padding: 10px 6px; font-size: 0.8rem; color: var(--text2);
+  border-bottom: 3px solid var(--border); transition: all .2s; }
+.step.active { color: var(--primary); border-color: var(--primary); font-weight: 600; }
+.step.done { color: var(--success); border-color: var(--success); }
+/* ── Checkbox group ────────────────────────────────────────────────────── */
+.checkbox-group { display: flex; flex-direction: column; gap: 8px; }
+.checkbox-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface2);
+  border-radius: 8px; cursor: pointer; transition: background .15s; border: 1px solid transparent; }
+.checkbox-item:hover { border-color: var(--primary); }
+.checkbox-item input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
+.checkbox-item .cb-label { font-weight: 500; }
+.checkbox-item .cb-desc { font-size: 0.8rem; color: var(--text2); }
+/* ── Page visibility ───────────────────────────────────────────────────── */
+.page { display: none; }
+.page.active { display: block; }
+/* ── Misc ──────────────────────────────────────────────────────────────── */
+.loading { color: var(--text2); padding: 20px; text-align: center; }
+.mt { margin-top: 12px; }
+.mb { margin-bottom: 12px; }
+.flex-between { display: flex; justify-content: space-between; align-items: center; }
+.text-sm { font-size: 0.85rem; }
+.text-muted { color: var(--text2); }
+.mono { font-family: var(--mono); }
+hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
+.hidden { display: none !important; }
+</style>
+</head>
+<body>
+<div class="app" id="app">
+  <!-- Header -->
+  <div class="header">
+    <h1>🐑 <span>HolySheep</span> WebUI</h1>
+    <span class="ver" id="version"></span>
+  </div>
+  <!-- Tabs -->
+  <div class="tabs" id="tabs">
+    <button class="tab active" data-page="dashboard" id="tab-dashboard"></button>
+    <button class="tab" data-page="setup" id="tab-setup"></button>
+    <button class="tab" data-page="tools" id="tab-tools"></button>
+    <button class="tab" data-page="doctor" id="tab-doctor"></button>
+  </div>
+  <!-- ── Dashboard ─────────────────────────────────────────────────────── -->
+  <div class="page active" id="page-dashboard">
+    <div class="card-grid">
+      <div class="card">
+        <h3 id="lbl-login-status"></h3>
+        <div id="login-status-content" class="loading"></div>
+      </div>
+      <div class="card">
+        <h3 id="lbl-balance"></h3>
+        <div id="balance-content" class="loading"></div>
+      </div>
+    </div>
+    <div class="card">
+      <h3 id="lbl-quick-actions"></h3>
+      <div class="btn-group">
+        <button class="btn-primary" onclick="switchTab('setup')" id="btn-go-setup"></button>
+        <button class="btn-secondary" onclick="switchTab('doctor')" id="btn-go-doctor"></button>
+        <button class="btn-secondary" onclick="runUpgrade()" id="btn-go-upgrade"></button>
+      </div>
+    </div>
+  </div>
+  <!-- ── Setup Wizard ──────────────────────────────────────────────────── -->
+  <div class="page" id="page-setup">
+    <div class="steps" id="setup-steps"></div>
+    <div id="setup-content"></div>
+  </div>
+  <!-- ── Tools ─────────────────────────────────────────────────────────── -->
+  <div class="page" id="page-tools">
+    <div class="flex-between mb">
+      <h3 id="lbl-tools-title"></h3>
+      <button class="btn-secondary btn-sm" onclick="loadTools()" id="btn-refresh-tools"></button>
+    </div>
+    <div id="tools-list" class="loading"></div>
+  </div>
+  <!-- ── Doctor ────────────────────────────────────────────────────────── -->
+  <div class="page" id="page-doctor">
+    <div class="flex-between mb">
+      <h3 id="lbl-doctor-title"></h3>
+      <button class="btn-secondary btn-sm" onclick="loadDoctor()" id="btn-refresh-doctor"></button>
+    </div>
+    <div id="doctor-content" class="loading"></div>
+  </div>
+  <!-- ── Upgrade Modal ─────────────────────────────────────────────────── -->
+  <div id="upgrade-modal" class="hidden">
+    <div class="card">
+      <div class="flex-between mb">
+        <h3 id="lbl-upgrade-title"></h3>
+        <button class="btn-secondary btn-sm" onclick="closeUpgrade()">✕</button>
+      </div>
+      <div class="console" id="upgrade-console"></div>
+    </div>
+  </div>
+</div>
+<script>
+// ── i18n ──────────────────────────────────────────────────────────────────
+const I18N = {
+  'zh': {
+    dashboard: '仪表盘', setup: '配置向导', tools: '工具管理', doctor: '环境诊断',
+    loginStatus: '登录状态', balance: '余额', quickActions: '快捷操作',
+    loggedIn: '已登录', notLoggedIn: '未登录', keyValid: 'Key 有效', keyInvalid: 'Key 已失效',
+    checking: '检查中...', login: '登录', logout: '退出登录', recharge: '充值',
+    balanceLabel: '余额', todayCost: '今日消费', monthCost: '本月消费', totalCalls: '累计调用',
+    goSetup: '一键配置', goDoctor: '环境检查', goUpgrade: '升级工具',
+    apiKey: 'API Key', apiKeyPlaceholder: '请输入 API Key (cr_xxx)',
+    validate: '验证', validating: '验证中...',
+    next: '下一步', prev: '上一步', startSetup: '开始配置', done: '完成',
+    selectModels: '选择模型', selectTools: '选择工具', configuring: '配置中', summary: '配置结果',
+    installed: '已安装', notInstalled: '未安装', configured: '已配置', notConfigured: '未配置',
+    version: '版本', install: '安装', configure: '配置', reset: '重置', upgrade: '升级',
+    autoInstall: '自动安装未安装的工具',
+    confirmReset: '确认重置所有 HolySheep 配置？此操作不可撤销。',
+    resetSuccess: '已重置所有配置', resetFail: '重置失败',
+    refresh: '刷新', upgradeTitle: '升级工具',
+    nodeVersion: 'Node.js 版本', envVars: '环境变量', set: '已设置', notSet: '未设置',
+    connectivity: 'API 连通性', connected: '连通', notConnected: '未连通',
+    modelsAvailable: '个模型可用', toolsStatus: '工具状态',
+    savedAt: '保存时间',
+    step1: 'API Key', step2: '选择模型', step3: '选择工具', step4: '执行配置', step5: '完成',
+    configOk: '配置成功', configErr: '配置失败', configManual: '需手动配置',
+    configSkip: '已跳过', configWarning: '有警告',
+    hotReload: '热切换，无需重启', needRestart: '重启终端生效',
+    close: '关闭', noApiKey: '未登录',
+    loginFirst: '请先登录后查看', times: '次',
+  },
+  'en': {
+    dashboard: 'Dashboard', setup: 'Setup', tools: 'Tools', doctor: 'Diagnostics',
+    loginStatus: 'Login Status', balance: 'Balance', quickActions: 'Quick Actions',
+    loggedIn: 'Logged In', notLoggedIn: 'Not Logged In', keyValid: 'Key Valid', keyInvalid: 'Key Invalid',
+    checking: 'Checking...', login: 'Login', logout: 'Logout', recharge: 'Recharge',
+    balanceLabel: 'Balance', todayCost: 'Today', monthCost: 'Month', totalCalls: 'Total Calls',
+    goSetup: 'Setup', goDoctor: 'Diagnostics', goUpgrade: 'Upgrade',
+    apiKey: 'API Key', apiKeyPlaceholder: 'Enter API Key (cr_xxx)',
+    validate: 'Validate', validating: 'Validating...',
+    next: 'Next', prev: 'Back', startSetup: 'Start', done: 'Done',
+    selectModels: 'Select Models', selectTools: 'Select Tools', configuring: 'Configuring', summary: 'Summary',
+    installed: 'Installed', notInstalled: 'Not Installed', configured: 'Configured', notConfigured: 'Not Configured',
+    version: 'Version', install: 'Install', configure: 'Configure', reset: 'Reset', upgrade: 'Upgrade',
+    autoInstall: 'Auto-install missing tools',
+    confirmReset: 'Reset all HolySheep config? This cannot be undone.',
+    resetSuccess: 'All config reset', resetFail: 'Reset failed',
+    refresh: 'Refresh', upgradeTitle: 'Upgrade Tools',
+    nodeVersion: 'Node.js Version', envVars: 'Environment Variables', set: 'Set', notSet: 'Not Set',
+    connectivity: 'API Connectivity', connected: 'Connected', notConnected: 'Not Connected',
+    modelsAvailable: 'models available', toolsStatus: 'Tool Status',
+    savedAt: 'Saved at',
+    step1: 'API Key', step2: 'Models', step3: 'Tools', step4: 'Configure', step5: 'Done',
+    configOk: 'Configured', configErr: 'Failed', configManual: 'Manual Config',
+    configSkip: 'Skipped', configWarning: 'Warning',
+    hotReload: 'Hot reload, no restart', needRestart: 'Restart terminal to apply',
+    close: 'Close', noApiKey: 'Not logged in',
+    loginFirst: 'Please login first', times: 'calls',
+  },
+}
+const lang = navigator.language.startsWith('zh') ? 'zh' : 'en'
+const t = (k) => I18N[lang]?.[k] || I18N['en'][k] || k
+// ── State ─────────────────────────────────────────────────────────────────
+let currentTab = 'dashboard'
+let setupStep = 0
+let setupState = { apiKey: '', models: [], toolIds: [], autoInstall: true }
+let allModels = []
+let allTools = []
+// ── Init ──────────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  // Set i18n labels
+  document.getElementById('tab-dashboard').textContent = t('dashboard')
+  document.getElementById('tab-setup').textContent = t('setup')
+  document.getElementById('tab-tools').textContent = t('tools')
+  document.getElementById('tab-doctor').textContent = t('doctor')
+  document.getElementById('lbl-login-status').textContent = t('loginStatus')
+  document.getElementById('lbl-balance').textContent = t('balance')
+  document.getElementById('lbl-quick-actions').textContent = t('quickActions')
+  document.getElementById('btn-go-setup').textContent = t('goSetup')
+  document.getElementById('btn-go-doctor').textContent = t('goDoctor')
+  document.getElementById('btn-go-upgrade').textContent = t('goUpgrade')
+  document.getElementById('lbl-tools-title').textContent = t('tools')
+  document.getElementById('btn-refresh-tools').textContent = t('refresh')
+  document.getElementById('lbl-doctor-title').textContent = t('doctor')
+  document.getElementById('btn-refresh-doctor').textContent = t('refresh')
+  document.getElementById('lbl-upgrade-title').textContent = t('upgradeTitle')
+  // Tab clicks
+  document.querySelectorAll('.tab').forEach(tab => {
+    tab.addEventListener('click', () => switchTab(tab.dataset.page))
+  })
+  // Load initial data
+  loadDashboard()
+})
+function switchTab(page) {
+  currentTab = page
+  document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.page === page))
+  document.querySelectorAll('.page').forEach(p => p.classList.toggle('active', p.id === 'page-' + page))
+  if (page === 'dashboard') loadDashboard()
+  if (page === 'tools') loadTools()
+  if (page === 'doctor') loadDoctor()
+  if (page === 'setup') initSetup()
+}
+// ── API helpers ───────────────────────────────────────────────────────────
+async function api(path, opts) {
+  const res = await fetch('/api/' + path, opts)
+  return res.json()
+}
+// ── Dashboard ─────────────────────────────────────────────────────────────
+async function loadDashboard() {
+  loadStatus()
+  loadBalance()
+}
+async function loadStatus() {
+  const el = document.getElementById('login-status-content')
+  el.innerHTML = `<span class="text-muted">${t('checking')}</span>`
+  try {
+    const data = await api('status')
+    document.getElementById('version').textContent = 'v' + data.version
+    if (data.loggedIn) {
+      el.innerHTML = `
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
+          <span class="dot dot-ok"></span>
+          <span style="font-weight:600">${t('loggedIn')}</span>
+        </div>
+        <div class="text-sm mono" style="margin-bottom:4px">Key: ${esc(data.apiKey)}</div>
+        ${data.savedAt ? `<div class="text-sm text-muted">${t('savedAt')}: ${new Date(data.savedAt).toLocaleString()}</div>` : ''}
+        <div class="mt">
+          <button class="btn-danger btn-sm" onclick="doLogout()">${t('logout')}</button>
+        </div>`
+    } else {
+      el.innerHTML = `
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
+          <span class="dot dot-gray"></span>
+          <span>${t('notLoggedIn')}</span>
+        </div>
+        <div style="display:flex;gap:8px;align-items:center;margin-top:8px">
+          <input type="password" id="dash-key" placeholder="${t('apiKeyPlaceholder')}" style="flex:1">
+          <button class="btn-primary btn-sm" onclick="doLogin()">${t('login')}</button>
+        </div>
+        <div class="text-sm text-muted mt">
+          <a href="https://holysheep.ai/register" target="_blank">holysheep.ai/register</a>
+        </div>`
+    }
+  } catch (e) {
+    el.innerHTML = `<span class="text-muted">Error: ${esc(e.message)}</span>`
+  }
+}
+async function loadBalance() {
+  const el = document.getElementById('balance-content')
+  el.innerHTML = `<span class="text-muted">${t('checking')}</span>`
+  try {
+    const data = await api('balance')
+    if (data.error) {
+      el.innerHTML = `<span class="text-muted">${data.error === '未登录' ? t('loginFirst') : esc(data.error)}</span>`
+      return
+    }
+    el.innerHTML = `
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
+        <div class="stat"><div class="value">$${data.balance.toFixed(2)}</div><div class="label">${t('balanceLabel')}</div></div>
+        <div class="stat"><div class="value">$${data.todayCost.toFixed(4)}</div><div class="label">${t('todayCost')}</div></div>
+        <div class="stat"><div class="value">$${data.monthCost.toFixed(4)}</div><div class="label">${t('monthCost')}</div></div>
+        <div class="stat"><div class="value">${data.totalCalls.toLocaleString()}</div><div class="label">${t('totalCalls')}</div></div>
+      </div>
+      <div class="mt text-sm"><a href="https://holysheep.ai/app/recharge" target="_blank">${t('recharge')} →</a></div>`
+  } catch (e) {
+    el.innerHTML = `<span class="text-muted">${t('loginFirst')}</span>`
+  }
+}
+async function doLogin() {
+  const input = document.getElementById('dash-key')
+  const key = input.value.trim()
+  if (!key) return
+  input.disabled = true
+  try {
+    const data = await api('login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey: key }) })
+    if (data.success) { loadDashboard() } else { alert(data.message) }
+  } catch (e) { alert(e.message) }
+  input.disabled = false
+}
+async function doLogout() {
+  await api('logout', { method: 'POST' })
+  loadDashboard()
+}
+// ── Setup Wizard ──────────────────────────────────────────────────────────
+async function initSetup() {
+  setupStep = 0
+  setupState = { apiKey: '', models: [], toolIds: [], autoInstall: true }
+  // Load models & tools
+  try {
+    allModels = await api('models')
+    allTools = await api('tools')
+    const status = await api('status')
+    if (status.loggedIn) {
+      const config = await api('whoami')
+      // We have the masked key, but we need the real one for setup
+      // Check if we already have a key saved
+      setupState.apiKey = '__saved__'
+    }
+  } catch {}
+  renderSetup()
+}
+function renderSetup() {
+  const stepsEl = document.getElementById('setup-steps')
+  const contentEl = document.getElementById('setup-content')
+  const stepLabels = [t('step1'), t('step2'), t('step3'), t('step4'), t('step5')]
+  stepsEl.innerHTML = stepLabels.map((s, i) =>
+    `<div class="step ${i === setupStep ? 'active' : i < setupStep ? 'done' : ''}">${i + 1}. ${s}</div>`
+  ).join('')
+  if (setupStep === 0) renderSetupStep1(contentEl)
+  else if (setupStep === 1) renderSetupStep2(contentEl)
+  else if (setupStep === 2) renderSetupStep3(contentEl)
+  else if (setupStep === 3) renderSetupStep4(contentEl)
+  else if (setupStep === 4) renderSetupStep5(contentEl)
+}
+function renderSetupStep1(el) {
+  const saved = setupState.apiKey === '__saved__'
+  el.innerHTML = `
+    <div class="card">
+      <h3>${t('apiKey')}</h3>
+      ${saved ? `
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">
+          <span class="dot dot-ok"></span>
+          <span>${t('loggedIn')}</span>
+        </div>
+        <p class="text-sm text-muted mb">${lang === 'zh' ? '将使用已保存的 API Key 继续配置' : 'Will use saved API Key'}</p>
+        <p class="text-sm text-muted mb">${lang === 'zh' ? '或输入新的 Key：' : 'Or enter a new Key:'}</p>
+      ` : ''}
+      <div style="display:flex;gap:8px">
+        <input type="password" id="setup-key" placeholder="${t('apiKeyPlaceholder')}" style="flex:1">
+        <button class="btn-secondary btn-sm" onclick="validateSetupKey()" id="setup-validate-btn">${t('validate')}</button>
+      </div>
+      <div id="setup-key-status" class="text-sm mt"></div>
+      <div class="mt" style="text-align:right">
+        <button class="btn-primary" onclick="setupNext()">${t('next')}</button>
+      </div>
+    </div>`
+}
+async function validateSetupKey() {
+  const input = document.getElementById('setup-key')
+  const status = document.getElementById('setup-key-status')
+  const key = input.value.trim()
+  if (!key) return
+  if (!key.startsWith('cr_')) { status.innerHTML = `<span style="color:var(--error)">Key must start with cr_</span>`; return }
+  status.innerHTML = `<span class="text-muted">${t('validating')}</span>`
+  const btn = document.getElementById('setup-validate-btn')
+  btn.disabled = true
+  try {
+    const res = await api('login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ apiKey: key }) })
+    if (res.success) {
+      setupState.apiKey = key
+      status.innerHTML = `<span style="color:var(--success)">✓ ${t('keyValid')}</span>`
+      loadDashboard()
+    } else {
+      status.innerHTML = `<span style="color:var(--error)">✗ ${res.message}</span>`
+    }
+  } catch (e) {
+    status.innerHTML = `<span style="color:var(--error)">✗ ${e.message}</span>`
+  }
+  btn.disabled = false
+}
+function setupNext() {
+  if (setupStep === 0) {
+    const input = document.getElementById('setup-key')
+    if (input && input.value.trim()) setupState.apiKey = input.value.trim()
+    if (!setupState.apiKey) { alert(lang === 'zh' ? '请输入或验证 API Key' : 'Please enter API Key'); return }
+  }
+  if (setupStep === 1) {
+    setupState.models = [...document.querySelectorAll('#model-checks input:checked')].map(c => c.value)
+    if (setupState.models.length === 0) { alert(lang === 'zh' ? '请至少选择一个模型' : 'Select at least one model'); return }
+  }
+  if (setupStep === 2) {
+    setupState.toolIds = [...document.querySelectorAll('#tool-checks input:checked')].map(c => c.value)
+    setupState.autoInstall = document.getElementById('auto-install-toggle')?.checked || false
+    if (setupState.toolIds.length === 0) { alert(lang === 'zh' ? '请至少选择一个工具' : 'Select at least one tool'); return }
+  }
+  setupStep++
+  renderSetup()
+  if (setupStep === 3) executeSetup()
+}
+function setupPrev() {
+  if (setupStep > 0) { setupStep--; renderSetup() }
+}
+function renderSetupStep2(el) {
+  el.innerHTML = `
+    <div class="card">
+      <h3>${t('selectModels')}</h3>
+      <div class="checkbox-group" id="model-checks">
+        ${allModels.map(m => `
+          <label class="checkbox-item">
+            <input type="checkbox" value="${m.id}" checked>
+            <div>
+              <div class="cb-label">${esc(m.label)}</div>
+              <div class="cb-desc">${esc(m.id)} — ${esc(m.desc)}</div>
+            </div>
+          </label>
+        `).join('')}
+      </div>
+      <div class="mt" style="display:flex;justify-content:space-between">
+        <button class="btn-secondary" onclick="setupPrev()">${t('prev')}</button>
+        <button class="btn-primary" onclick="setupNext()">${t('next')}</button>
+      </div>
+    </div>`
+}
+function renderSetupStep3(el) {
+  const installed = allTools.filter(t => t.installed)
+  const notInstalled = allTools.filter(t => !t.installed)
+  el.innerHTML = `
+    <div class="card">
+      <h3>${t('selectTools')}</h3>
+      <div class="checkbox-group" id="tool-checks">
+        ${installed.length ? `<div class="text-sm text-muted mb" style="padding:4px 0">${t('installed')}</div>` : ''}
+        ${installed.map(tool => `
+          <label class="checkbox-item">
+            <input type="checkbox" value="${tool.id}" checked>
+            <div style="flex:1">
+              <div class="cb-label">${esc(tool.name)} <span class="badge badge-ok">${t('installed')}</span>
+                ${tool.configured ? `<span class="badge badge-ok">${t('configured')}</span>` : ''}
+              </div>
+              <div class="cb-desc">${tool.version || ''}</div>
+            </div>
+          </label>
+        `).join('')}
+        ${notInstalled.length ? `<div class="text-sm text-muted mb" style="padding:8px 0 4px">${t('notInstalled')}</div>` : ''}
+        ${notInstalled.map(tool => `
+          <label class="checkbox-item">
+            <input type="checkbox" value="${tool.id}">
+            <div style="flex:1">
+              <div class="cb-label">${esc(tool.name)} <span class="badge badge-gray">${t('notInstalled')}</span>
+                ${tool.canAutoInstall ? `<span class="badge badge-warn">${lang === 'zh' ? '可自动安装' : 'Auto-installable'}</span>` : ''}
+              </div>
+              <div class="cb-desc">${esc(tool.installCmd)}</div>
+            </div>
+          </label>
+        `).join('')}
+      </div>
+      <label class="checkbox-item mt" style="background:var(--primary-dim)">
+        <input type="checkbox" id="auto-install-toggle" checked>
+        <div class="cb-label">${t('autoInstall')}</div>
+      </label>
+      <div class="mt" style="display:flex;justify-content:space-between">
+        <button class="btn-secondary" onclick="setupPrev()">${t('prev')}</button>
+        <button class="btn-primary" onclick="setupNext()">${t('startSetup')}</button>
+      </div>
+    </div>`
+}
+function renderSetupStep4(el) {
+  el.innerHTML = `
+    <div class="card">
+      <h3>${t('configuring')}...</h3>
+      <div class="console" id="setup-console"></div>
+    </div>`
+}
+async function executeSetup() {
+  const consoleEl = document.getElementById('setup-console')
+  const actualKey = setupState.apiKey === '__saved__' ? null : setupState.apiKey
+  // If using saved key, we need to get it from the backend
+  let keyToUse = actualKey
+  if (!keyToUse) {
+    // Fetch real key from server config — we'll send a special marker
+    // Actually, the server can read the saved key itself
+    keyToUse = '__use_saved__'
+  }
+  const body = JSON.stringify({
+    apiKey: keyToUse,
+    models: setupState.models,
+    toolIds: setupState.toolIds,
+    autoInstall: setupState.autoInstall,
+  })
+  try {
+    const res = await fetch('/api/setup', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      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
+        const data = JSON.parse(line.slice(6))
+        appendConsole(consoleEl, data)
+        if (data.type === 'done') {
+          setupState.summary = data.summary
+          setupStep = 4
+          renderSetup()
+          return
+        }
+      }
+    }
+  } catch (e) {
+    appendConsole(consoleEl, { type: 'error', message: e.message })
+  }
+}
+function appendConsole(el, data) {
+  if (data.type === 'progress') {
+    const cls = data.status === 'ok' ? 'ok' : data.status === 'error' ? 'err' : data.status === 'warning' ? 'warn' : 'info'
+    el.innerHTML += `<span class="${cls}">${data.status === 'ok' ? '✓' : data.status === 'error' ? '✗' : '→'} ${esc(data.message)}</span>\n`
+  } else if (data.type === 'output') {
+    el.innerHTML += esc(data.text)
+  } else if (data.type === 'error') {
+    el.innerHTML += `<span class="err">✗ ${esc(data.message)}</span>\n`
+  }
+  el.scrollTop = el.scrollHeight
+}
+function renderSetupStep5(el) {
+  const s = setupState.summary || { ok: 0, errors: 0, total: 0, results: [] }
+  const results = s.results || []
+  el.innerHTML = `
+    <div class="card">
+      <h3>✅ ${t('done')}</h3>
+      <div style="display:flex;gap:20px;margin:16px 0">
+        <div class="stat"><div class="value" style="color:var(--success)">${s.ok}</div><div class="label">${t('configOk')}</div></div>
+        <div class="stat"><div class="value" style="color:var(--error)">${s.errors}</div><div class="label">${t('configErr')}</div></div>
+      </div>
+      <div>
+        ${results.map(r => {
+          const icon = r.status === 'ok' ? '✓' : r.status === 'error' ? '✗' : r.status === 'manual' ? '⚠' : r.status === 'skip' ? '○' : '!'
+          const badge = r.status === 'ok' ? 'badge-ok' : r.status === 'error' ? 'badge-err' : 'badge-warn'
+          const label = t('config' + r.status.charAt(0).toUpperCase() + r.status.slice(1)) || r.status
+          return `
+            <div class="check-row">
+              <span>${icon}</span>
+              <span class="check-label">${esc(r.tool)}</span>
+              <span class="badge ${badge}">${label}</span>
+              ${r.file ? `<span class="check-detail">${esc(r.file)}</span>` : ''}
+              ${r.hot ? `<span class="text-sm text-muted">${t('hotReload')}</span>` : ''}
+            </div>`
+        }).join('')}
+      </div>
+      <div class="mt" style="text-align:right">
+        <button class="btn-primary" onclick="switchTab('dashboard')">${t('done')}</button>
+      </div>
+    </div>`
+}
+// ── Tools ─────────────────────────────────────────────────────────────────
+async function loadTools() {
+  const el = document.getElementById('tools-list')
+  el.innerHTML = `<span class="text-muted">${t('checking')}</span>`
+  try {
+    const tools = await api('tools')
+    allTools = tools
+    el.innerHTML = `<div class="card-grid">${tools.map(tool => `
+      <div class="tool-card">
+        <div class="tool-info">
+          <div class="name">${esc(tool.name)}</div>
+          <div class="meta">
+            ${tool.installed
+              ? `<span class="badge badge-ok">${t('installed')}</span> ${tool.configured ? `<span class="badge badge-ok">${t('configured')}</span>` : `<span class="badge badge-warn">${t('notConfigured')}</span>`}`
+              : `<span class="badge badge-gray">${t('notInstalled')}</span>`}
+            ${tool.version ? `<span class="text-muted" style="margin-left:4px">${esc(tool.version)}</span>` : ''}
+          </div>
+          ${tool.hint ? `<div class="meta">${esc(tool.hint)}</div>` : ''}
+          ${tool.launchCmd ? `<div class="meta mono">${esc(tool.launchCmd)}</div>` : ''}
+        </div>
+        <div class="tool-actions">
+          ${!tool.installed && tool.canAutoInstall ? `<button class="btn-secondary btn-sm" onclick="installTool('${tool.id}','${esc(tool.name)}')">${t('install')}</button>` : ''}
+        </div>
+      </div>
+    `).join('')}</div>`
+  } catch (e) {
+    el.innerHTML = `<span class="text-muted">Error: ${esc(e.message)}</span>`
+  }
+}
+async function installTool(id, name) {
+  const el = document.getElementById('tools-list')
+  const consoleHtml = `<div class="card mt"><h3>${t('install')}: ${esc(name)}</h3><div class="console" id="install-console"></div></div>`
+  el.insertAdjacentHTML('beforeend', consoleHtml)
+  const consoleEl = document.getElementById('install-console')
+  try {
+    const res = await fetch('/api/tool/install', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ toolId: id }),
+    })
+    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
+        const data = JSON.parse(line.slice(6))
+        if (data.type === 'output') consoleEl.innerHTML += esc(data.text)
+        else if (data.type === 'done') {
+          consoleEl.innerHTML += data.success
+            ? `\n<span class="ok">✓ ${lang === 'zh' ? '安装完成' : 'Installed'}</span>\n`
+            : `\n<span class="err">✗ ${lang === 'zh' ? '安装失败' : 'Install failed'}</span>\n`
+          setTimeout(() => loadTools(), 1000)
+        }
+        consoleEl.scrollTop = consoleEl.scrollHeight
+      }
+    }
+  } catch (e) {
+    consoleEl.innerHTML += `<span class="err">Error: ${esc(e.message)}</span>`
+  }
+}
+// ── Doctor ─────────────────────────────────────────────────────────────────
+async function loadDoctor() {
+  const el = document.getElementById('doctor-content')
+  el.innerHTML = `<span class="text-muted">${t('checking')}</span>`
+  try {
+    const d = await api('doctor')
+    el.innerHTML = `
+      <div class="card">
+        <h3>${t('nodeVersion')}</h3>
+        <div class="check-row">
+          <span class="dot ${d.node.ok ? 'dot-ok' : 'dot-err'}"></span>
+          <span class="check-label">Node.js ${esc(d.node.version)}</span>
+          <span class="badge ${d.node.ok ? 'badge-ok' : 'badge-err'}">${d.node.ok ? '≥ 16 ✓' : '< 16 ✗'}</span>
+        </div>
+      </div>
+      <div class="card">
+        <h3>API Key</h3>
+        <div class="check-row">
+          <span class="dot ${d.apiKey.set ? 'dot-ok' : 'dot-err'}"></span>
+          <span class="check-label">${d.apiKey.set ? esc(d.apiKey.masked) : t('notSet')}</span>
+        </div>
+      </div>
+      <div class="card">
+        <h3>${t('envVars')}</h3>
+        ${Object.entries(d.envVars).map(([k, v]) => `
+          <div class="check-row">
+            <span class="dot ${v ? 'dot-ok' : 'dot-gray'}"></span>
+            <span class="check-label mono text-sm">${k}</span>
+            <span class="check-detail">${v ? t('set') : t('notSet')}</span>
+          </div>
+        `).join('')}
+      </div>
+      <div class="card">
+        <h3>${t('connectivity')}</h3>
+        <div class="check-row">
+          <span class="dot ${d.connectivity.ok ? 'dot-ok' : 'dot-err'}"></span>
+          <span class="check-label">${d.connectivity.ok ? t('connected') : t('notConnected')}</span>
+          ${d.connectivity.ok ? `<span class="check-detail">${d.connectivity.modelCount} ${t('modelsAvailable')}</span>` : ''}
+        </div>
+      </div>
+      <div class="card">
+        <h3>${t('toolsStatus')}</h3>
+        ${d.tools.map(tool => `
+          <div class="check-row">
+            <span class="dot ${tool.installed ? (tool.configured ? 'dot-ok' : 'dot-warn') : 'dot-gray'}"></span>
+            <span class="check-label">${esc(tool.name)}</span>
+            ${tool.installed
+              ? `<span class="badge ${tool.configured ? 'badge-ok' : 'badge-warn'}">${tool.configured ? t('configured') : t('notConfigured')}</span>
+                 ${tool.version ? `<span class="check-detail">${esc(tool.version)}</span>` : ''}`
+              : `<span class="badge badge-gray">${t('notInstalled')}</span>`}
+          </div>
+        `).join('')}
+      </div>`
+  } catch (e) {
+    el.innerHTML = `<span class="text-muted">Error: ${esc(e.message)}</span>`
+  }
+}
+// ── Upgrade ───────────────────────────────────────────────────────────────
+async function runUpgrade() {
+  const modal = document.getElementById('upgrade-modal')
+  const consoleEl = document.getElementById('upgrade-console')
+  modal.classList.remove('hidden')
+  consoleEl.innerHTML = ''
+  try {
+    const res = await fetch('/api/upgrade', { method: 'POST' })
+    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
+        const data = JSON.parse(line.slice(6))
+        if (data.type === 'tool') {
+          const cls = data.status === 'ok' ? 'ok' : data.status === 'error' ? 'err' : data.status === 'not-installed' ? 'warn' : 'info'
+          const msg = data.status === 'not-installed' ? `${data.name}: ${t('notInstalled')}`
+            : data.status === 'upgrading' ? `${data.name}: ${t('upgrade')}... (${data.localVer || '?'})`
+            : data.status === 'ok' ? `${data.name}: ✓ ${data.localVer || '?'} → ${data.newVer || 'latest'}`
+            : `${data.name}: ✗ ${t('configErr')}`
+          consoleEl.innerHTML += `<span class="${cls}">${msg}</span>\n`
+        } else if (data.type === 'output') {
+          consoleEl.innerHTML += esc(data.text)
+        } else if (data.type === 'done') {
+          consoleEl.innerHTML += `\n<span class="ok">✓ ${t('done')}</span>\n`
+        }
+        consoleEl.scrollTop = consoleEl.scrollHeight
+      }
+    }
+  } catch (e) {
+    consoleEl.innerHTML += `<span class="err">Error: ${esc(e.message)}</span>`
+  }
+}
+function closeUpgrade() {
+  document.getElementById('upgrade-modal').classList.add('hidden')
+}
+// ── Util ──────────────────────────────────────────────────────────────────
+function esc(s) {
+  if (!s) return ''
+  const d = document.createElement('div')
+  d.textContent = String(s)
+  return d.innerHTML
+}
+</script>
+</body>
+</html>