@simonyea/holysheep-cli 1.7.54 → 1.7.55

package/src/webui/index.html

@@ -5,869 +5,532 @@
 <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;
+  --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: #0f0f1a; --surface: #1a1a2e; --surface2: #222240;
-    --text: #e8e8f0; --text2: #888; --border: #333350;
-    --shadow: 0 1px 3px rgba(0,0,0,0.3);
+    --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; }
-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%; }
+/* 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); }
-.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
+.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-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 */
+.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; }
 
-/* ── 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; }
+/* 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">
-  <!-- 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 class="header-left">
+      <h1><span>HolySheep</span></h1>
+      <a href="https://holysheep.ai" target="_blank">holysheep.ai</a>
     </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 class="header-right">
+      <button class="lang-btn" onclick="toggleLang()" id="lang-btn"></button>
+      <span class="ver" id="version"></span>
     </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 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 ──────────────────────────────────────────────────────────────────
+// ── 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: '配置结果',
+  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: '未配置',
-    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: '次',
+    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': {
-    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',
+  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',
   },
 }
-const lang = navigator.language.startsWith('zh') ? 'zh' : 'en'
+
+let lang = localStorage.getItem('hs-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))
-  })
+function toggleLang() {
+  lang = lang === 'zh' ? 'en' : 'zh'
+  localStorage.setItem('hs-lang', lang)
+  init()
+}
 
-  // 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()
+// ── 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 helpers ───────────────────────────────────────────────────────────
+// ── API helper ───────────────────────────────────────────────────────────────
 async function api(path, opts) {
   const res = await fetch('/api/' + path, opts)
   return res.json()
 }
 
-// ── Dashboard ─────────────────────────────────────────────────────────────
-async function loadDashboard() {
-  loadStatus()
-  loadBalance()
-}
+// ── 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>`
 
-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>`
-  }
-}
+  const [status, balance] = await Promise.allSettled([api('status'), api('balance')])
+  const s = status.value || {}
+  const b = balance.value || {}
 
-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>
+  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>
-      <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>`
+      ${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('dash-key')
+  const input = document.getElementById('login-key')
   const key = input.value.trim()
   if (!key) return
-  input.disabled = true
+  const btn = document.getElementById('login-btn')
+  btn.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) }
+    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) }
-  input.disabled = false
+  btn.disabled = false
 }
 
 async function doLogout() {
   await api('logout', { method: 'POST' })
-  loadDashboard()
+  init()
 }
 
-// ── 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()
-}
+// ── 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>`
 
-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)
+  const tools = await api('tools')
+  const grid = el.querySelector('.tool-grid')
+  grid.innerHTML = tools.map(tool => renderToolCard(tool)).join('')
 }
 
-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>`
-}
+function renderToolCard(tool) {
+  let dotClass, statusBadges, actions, hintLine
 
-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()
+  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 {
-      status.innerHTML = `<span style="color:var(--error)">✗ ${res.message}</span>`
+      actions = `<span class="badge badge-gray" style="font-weight:400">${t('installManual')}: ${esc(tool.installCmd)}</span>`
     }
-  } catch (e) {
-    status.innerHTML = `<span style="color:var(--error)">✗ ${e.message}</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>` : ''
   }
-  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() }
+  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>`
 }
 
-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>`
-}
+// ── 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')
+    }
+  })
 
-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>`
+  busy = false
+  loadTools()
 }
 
-function renderSetupStep4(el) {
-  el.innerHTML = `
-    <div class="card">
-      <h3>${t('configuring')}...</h3>
-      <div class="console" id="setup-console"></div>
-    </div>`
+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 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__'
-  }
+async function doInstallTool(id, name) {
+  if (busy) return
+  busy = true
+  openConsole(`${t('install')}: ${name}`)
 
-  const body = JSON.stringify({
-    apiKey: keyToUse,
-    models: setupState.models,
-    toolIds: setupState.toolIds,
-    autoInstall: setupState.autoInstall,
+  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')
+    }
   })
 
-  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 })
-  }
+  busy = false
+  loadTools()
 }
 
-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
+// ── 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 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>`
+function closeConsole() {
+  document.getElementById('console-section').classList.remove('open')
 }
 
-// ── 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>`
-  }
+function appendLog(msg, cls) {
+  const el = document.getElementById('console-output')
+  el.innerHTML += `<span class="${cls || ''}">${esc(msg)}</span>\n`
+  el.scrollTop = el.scrollHeight
 }
 
-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')
+function appendLogRaw(text) {
+  const el = document.getElementById('console-output')
+  el.innerHTML += esc(text)
+  el.scrollTop = el.scrollHeight
+}
 
-  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
-      }
+// ── 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 {}
     }
-  } 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>
+// ── 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>`
+  }
 
-      <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>`
+  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>`
   }
-}
 
-// ── Upgrade ───────────────────────────────────────────────────────────────
-async function runUpgrade() {
-  const modal = document.getElementById('upgrade-modal')
-  const consoleEl = document.getElementById('upgrade-console')
-  modal.classList.remove('hidden')
-  consoleEl.innerHTML = ''
+  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 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
-      }
-    }
+    const r = await api('env/clean', { method: 'POST' })
+    btn.textContent = `✓ ${t('cleanDone')}`
+    setTimeout(() => loadEnv(), 1500)
   } catch (e) {
-    consoleEl.innerHTML += `<span class="err">Error: ${esc(e.message)}</span>`
+    btn.textContent = e.message
   }
 }
 
-function closeUpgrade() {
-  document.getElementById('upgrade-modal').classList.add('hidden')
+// ── 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 ──────────────────────────────────────────────────────────────────
+// ── 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>