@swimmingliu/autovpn 1.8.0 → 2.0.2

package/dist/web/renderer/views.js

@@ -1,22 +1,12 @@
 import { buildStageModel, PAGE_INDEX, PAGE_ORDER, resolveRunControlState } from './state.js';
+import { icon } from './icons.js';
 
 const FALLBACK_PROFILE = {
   sources: {
-    leiting: {
-      url: 'https://capture-1.vpn.example/api/v1/client/subscribe',
-      key: 'lt-demo-key',
-      enabled: true
-    },
-    heilong: {
-      url: 'https://capture-2.vpn.example/api/v1/client/nodes',
-      key: 'hl-demo-key',
-      enabled: true
-    },
-    custom: {
-      url: 'https://capture-3.vpn.example/custom.txt',
-      key: '',
-      enabled: false
-    }
+    leiting: { mode: 'credential', official_site: 'https://www.68123836.com', enabled: true, max_iterations: 4, plateau_limit: 2 },
+    heidong: { mode: 'credential', official_site: 'https://www.67986457.com', enabled: true, max_iterations: 4, plateau_limit: 2 },
+    mifeng: { mode: 'credential', official_site: 'https://www.86933221.com', enabled: true, max_iterations: 4, plateau_limit: 2 },
+    xuanfeng: { mode: 'credential', official_site: 'https://www.16863988.com', enabled: true, max_iterations: 4, plateau_limit: 2 }
   },
   speed_test: {
     min_download_mb_s: 1,
@@ -38,14 +28,7 @@ const FALLBACK_PROFILE = {
   }
 };
 
-const NAV_ICONS = {
-  dashboard: '⌂',
-  runs: '◉',
-  results: '▣',
-  subscriptions: '♢',
-  logs: '▤',
-  settings: '⚙'
-};
+// SVGs retain the same geometry across installed fonts and theme modes.
 
 const PAGE_STATUS = {
   dashboard: ['', 'neutral'],
@@ -57,7 +40,6 @@ const PAGE_STATUS = {
 };
 
 const LOG_FILTERS = ['全部', '运行日志', '错误', '按阶段'];
-const SUBSCRIPTION_FORMATS = ['Clash', 'Clash Meta', 'Sing-box', 'Surge'];
 const EMPTY_COUNTS = {
   raw_links: 0,
   deduped_links: 0,
@@ -66,7 +48,7 @@ const EMPTY_COUNTS = {
   postprocess_links: 0
 };
 
-const SOURCE_DISPLAY_ORDER = ['leiting', 'heidong', 'mifeng', 'xuanfeng-area', 'xuanfeng-all-area'];
+const SOURCE_DISPLAY_ORDER = ['leiting', 'heidong', 'mifeng', 'xuanfeng'];
 const RETRY_STAGE_ORDER = ['speedtest', 'availability', 'postprocess', 'render', 'obfuscate', 'deploy', 'verify'];
 const STAGE_DISPLAY_NAMES = {
   doctor: 'doctor',
@@ -114,8 +96,6 @@ export function buildViewModel(state, messages, language) {
     counts.deduped_links = dedupedSourceCount || counts.deduped_links || counts.postprocess_links || 0;
   }
   const subscriptionUrl = profile.deploy.subscription_url || FALLBACK_PROFILE.deploy.subscription_url;
-  const subscriptionCards = buildSubscriptionCards(subscriptionUrl);
-  const currentSubscription = subscriptionCards.find((card) => card.title === state.subscriptionFormat) ?? subscriptionCards[0];
   const displayLogs = (state.logEntries ?? []).map((entry, index) => ({
     logId: entry?.logId ?? `history-${index}`,
     ...classifyLogEntry(entry)
@@ -144,7 +124,6 @@ export function buildViewModel(state, messages, language) {
     profile,
     counts,
     subscriptionUrl,
-    subscriptionFormat: state.subscriptionFormat ?? 'Clash',
     qr: state.qr ?? { status: state.qrDataUrl ? 'success' : 'idle', dataUrl: state.qrDataUrl ?? '', message: '' },
     displayLogs,
     logFilter,
@@ -161,10 +140,9 @@ export function buildViewModel(state, messages, language) {
     outputFiles: state.outputFiles ?? [],
     nodeRows: state.nodeRows ?? [],
     regionStats: buildRegionStats(state.nodeRows ?? []),
-    subscriptionCards,
-    currentSubscription,
     sourceRows: buildSourceRows(profile),
     sourceCounts,
+    extractProgress: Object.values(state.extractProgress ?? {}),
     rawSourceMetricRows: buildSourceMetricRows(profile, sourceCounts, 'raw_links'),
     dedupedSourceMetricRows: buildSourceMetricRows(profile, sourceCounts, 'deduped_links'),
     retryContext: state.retryContext ?? {},
@@ -175,14 +153,24 @@ export function buildViewModel(state, messages, language) {
     retryStageOptions,
     selectedRetryStage,
     runControlState: resolveRunControlState(state.runState),
+    runOptions: state.runOptions ?? {},
+    activity: state.activity ?? [],
+    activityUnavailable: state.activityUnavailable ?? 0,
+    runState: state.runState ?? 'idle',
     statusItems: buildStatusItems(state, messages),
     currentStatusLabel: resolveCurrentStatusLabel(state, messages),
     currentTaskLabel: resolveCurrentTaskLabel(state, messages),
     runStateLabel: messages.runStateLabels[state.runState] ?? messages.runStateLabels.idle,
     runStateTone: runStateTone(state.runState),
     settingsDrawer: state.settingsDrawer ?? null,
+    accountPool: {
+      ...EMPTY_ACCOUNT_POOL,
+      ...(state.accountPool ?? {}),
+      recordsMarkup: buildAccountPoolRecords({ ...EMPTY_ACCOUNT_POOL, ...(state.accountPool ?? {}) })
+    },
     modalTransform: state.modalTransform ?? '',
-    runtime: state.runtime ?? 'electron'
+    runtime: state.runtime ?? 'electron',
+    themePreference: state.themePreference ?? 'system'
   };
 }
 
@@ -199,32 +187,24 @@ export function buildSidebarNav(messages, activePage) {
       id="${navId(page)}"
       class="nav-item ${activePage === page ? 'active' : ''}"
       data-page-target="${page}"
+      aria-label="${escapeHtml(messages.nav[page])}"
+      title="${escapeHtml(messages.nav[page])}"
       type="button"
       ${activePage === page ? 'aria-current="page"' : ''}
     >
-      <span class="nav-icon">${NAV_ICONS[page]}</span>
+      <span class="nav-icon">${icon(page)}</span>
       <span class="nav-copy">${escapeHtml(messages.nav[page])}</span>
     </button>
   `).join('');
 }
 
-export function buildTopbarActions(activePage, viewModel, messages, labels) {
-  const actionSets = {
-    dashboard: [
-      `<button class="btn btn-secondary" data-action="open-settings" type="button">${escapeHtml(messages.settingsButton)}</button>`,
-      `<button class="btn btn-danger" data-run-action="stop" type="button" ${labels.stopDisabled ? 'disabled' : ''}>${escapeHtml(labels.stopLabel)}</button>`,
-      `<button class="btn btn-primary" data-run-action="start" type="button" ${labels.runDisabled ? 'disabled' : ''}>${escapeHtml(labels.runLabel)}</button>`
-    ],
-    runs: [
-    ],
-    results: [
-    ],
-    subscriptions: [
-    ],
-    logs: [],
-    settings: []
-  };
-  return (actionSets[activePage] ?? []).join('');
+// Run actions belong to the state they affect; names remain available to
+// assistive technology and tooltips without repeating visible button text.
+function buildRunControls(vm, mobile = false) {
+  return `<div class="run-icon-controls ${mobile ? 'mobile-run-bar' : ''}" ${mobile ? 'data-mobile-run-bar' : ''}>
+    <button class="btn btn-primary icon-only" data-run-action="start" type="button" aria-label="立即运行" title="立即运行" ${vm.runControlState.runDisabled ? 'disabled' : ''}>${icon('play')}</button>
+    <button class="btn btn-secondary icon-only" data-run-action="stop" type="button" aria-label="停止运行" title="停止运行" ${vm.runControlState.stopDisabled ? 'disabled' : ''}>${icon('stop')}</button>
+  </div>`;
 }
 
 export function buildShortcutStrip(messages) {
@@ -281,8 +261,6 @@ function buildPageInner(activePage, vm, messages) {
       return buildRunsPage(vm, messages);
     case 'results':
       return buildResultsPage(vm, messages);
-    case 'subscriptions':
-      return buildSubscriptionsPage(vm, messages);
     case 'logs':
       return buildLogsPage(vm, messages);
     default:
@@ -290,50 +268,29 @@ function buildPageInner(activePage, vm, messages) {
   }
 }
 
+// Page construction and live updates share the same current-run state;
+// a retained artifact is never evidence that the active run succeeded.
+export function resolveDashboardRunSummary(vm) {
+  return { isRunning: vm.runControlState?.isBusy === true, failed: vm.runState === 'failed' || vm.runStateTone === 'danger' };
+}
+
+export function buildDashboardStateMarkup(vm) {
+  const { failed } = resolveDashboardRunSummary(vm);
+  return `<h3>${escapeHtml(vm.currentStatusLabel)}</h3>${failed ? '<p>运行失败，可在日志中查看原因</p><button class="btn btn-secondary small" data-page-target="logs" type="button">查看日志</button>' : ''}`;
+}
+
 function buildDashboardPage(vm, messages) {
+  const { isRunning } = resolveDashboardRunSummary(vm);
   return `
     <div id="dashboardOverview" class="page-grid dashboard-grid">
-      <article class="panel wide-panel status-hero-card">
-        <div>
-          <span class="panel-subcopy">当前运行状态</span>
-          <h3>${escapeHtml(vm.currentStatusLabel)}</h3>
-          <p>${vm.hasResult ? '最近一次运行已完成' : '系统就绪，等待运行'}</p>
-        </div>
-        <div class="status-orb">✓</div>
+      <article class="panel wide-panel status-hero-card ${isRunning ? 'is-running' : ''}" data-run-state="${escapeHtml(vm.hasResult ? 'result' : 'empty')}">
+        <div class="dashboard-state-copy">${buildDashboardStateMarkup(vm)}</div>
+        ${buildRunControls(vm)}
       </article>
 
       ${buildDashboardMetricsMarkup(vm)}
 
-      <article class="panel">
-        <div class="panel-headline">
-          <h3>最近运行结果</h3>
-          ${vm.hasResult ? renderBadge('成功', 'success') : renderBadge('未开始', 'neutral')}
-        </div>
-        <div class="key-value-list">
-          <div class="key-value-row"><span>状态</span><strong>${vm.hasResult ? '成功' : '未开始'}</strong></div>
-          <div class="key-value-row"><span>Artifact 目录</span><strong class="mono">${escapeHtml(vm.artifactDir || '—')}</strong></div>
-          <div class="key-value-row"><span>更新时间</span><strong>${escapeHtml(vm.lastUpdated)}</strong></div>
-        </div>
-      </article>
-
-      <article class="panel">
-        <div class="panel-headline">
-          <h3>系统状态</h3>
-          ${renderBadge(vm.runStateLabel, vm.runStateTone)}
-        </div>
-        <div class="key-value-list">
-          ${vm.statusItems.map((item) => `
-            <div class="key-value-row">
-              <span>${escapeHtml(item.label)}</span>
-              <strong>${escapeHtml(item.value)}</strong>
-            </div>
-          `).join('')}
-          <div class="key-value-row">
-            <span>${escapeHtml(messages.currentTaskLabel)}</span>
-            <strong>${escapeHtml(vm.currentTaskLabel)}</strong>
-          </div>
-        </div>
-      </article>
+      <div id="dashboardAnalytics" class="wide-panel"></div>
     </div>
   `;
 }
@@ -346,7 +303,6 @@ export function buildDashboardMetricsMarkup(vm) {
           <div class="metric-card ${metric.tone}" data-metric-key="${escapeHtml(metric.key)}">
             <span>${escapeHtml(metric.label)}</span>
             <strong>${escapeHtml(metric.value)}</strong>
-            <small>${escapeHtml(metric.detail)}</small>
             ${metric.key === 'raw_links'
               ? renderSourceMetricRows(vm.rawSourceMetricRows, '各数据源原始节点数')
               : metric.key === 'deduped_links'
@@ -365,15 +321,11 @@ function buildRunsPage(vm, messages) {
   const stageDisabled = vm.runControlState.isBusy || !vm.retryStageOptions.length ? 'disabled' : '';
   const retryDisabled = vm.runControlState.isBusy || !vm.selectedRetryArtifactDir || !vm.selectedRetryStage ? 'disabled' : '';
   return `
-    <div class="mobile-run-bar" data-mobile-run-bar>
-        <button class="btn btn-primary run-big" data-run-action="start" type="button" ${runDisabled}>▶ 开始运行</button>
-        <button class="btn btn-secondary run-big" data-run-action="stop" type="button" ${vm.runControlState.stopDisabled ? 'disabled' : ''}>■ 停止运行</button>
-    </div>
     <div class="page-grid runs-grid">
       <article class="panel wide-panel run-control-panel">
         <details class="run-secondary-controls">
-          <summary>重试历史、阶段与运行选项</summary>
-          <div class="retry-control-card">
+          <summary>${vm.retryArtifacts.length ? '重试与运行选项' : '运行选项'}</summary>
+          ${vm.retryArtifacts.length ? `<div class="retry-control-card">
           <div class="field compact retry-field retry-artifact-field">
             <span>历史 run</span>
             <select data-run-retry-artifact ${artifactDisabled}>
@@ -415,15 +367,15 @@ function buildRunsPage(vm, messages) {
               `
               : '<div class="empty-state">暂无可重试 run</div>'}
           </div>
-          <p class="retry-help">阶段重试会新建 artifact，并从所选阶段继续执行到 verify。</p>
           </div>
+          ` : ''}
           <div class="run-options">
           ${[
             ['跳过部署', 'skipDeploy', false],
             ['跳过验证', 'skipVerify', false],
             ['保存配置后运行', 'saveBeforeRun', true]
           ].map(([label, key, checked]) => `
-            <label class="checkbox-chip"><input data-run-option="${escapeHtml(key)}" type="checkbox" ${checked ? 'checked' : ''} />${escapeHtml(label)}</label>
+            <label class="checkbox-chip"><input data-run-option="${escapeHtml(key)}" type="checkbox" ${(vm.runOptions[key] ?? checked) ? 'checked' : ''} />${escapeHtml(label)}</label>
           `).join('')}
           </div>
         </details>
@@ -438,14 +390,15 @@ function buildRunsPage(vm, messages) {
 export function buildRunsStageProgressMarkup(vm) {
   return `
     <article id="runsStageProgress" class="panel timeline-panel">
-      <div class="panel-headline"><h3>阶段进度</h3><span class="panel-subcopy">全流程时间线</span></div>
-      <div class="timeline">
+      <div class="panel-headline"><h3>阶段进度</h3></div>
+      <div class="timeline" tabindex="0" role="region" aria-label="流水线阶段">
         ${vm.stageRows.map((stage) => `
           <div class="timeline-row">
             <span class="timeline-index ${stage.status}"></span>
             <span class="timeline-copy">${escapeHtml(stage.name)}</span>
             <span class="inline-state ${stateClass(stage.status)}">${escapeHtml(stageLabel(stage.status))}</span>
           </div>
+          ${stage.name === 'extract' && vm.extractProgress?.length ? `<div class="timeline-substeps">${vm.extractProgress.map((step) => `<div class="timeline-substep"><span>${escapeHtml(SOURCE_NAMES[step.source] ?? step.source)} · ${escapeHtml(step.platform)} · ${escapeHtml({ apk_download: 'APK 下载', apk_analysis: 'APK 解析', domain_discovery: '域名探测' }[step.substage])}</span><span class="inline-state ${step.status === 'cached' ? 'neutral' : stateClass(step.status)}">${step.status === 'cached' ? '缓存' : escapeHtml(stageLabel(step.status))}</span></div>`).join('')}</div>` : ''}
         `).join('')}
       </div>
     </article>
@@ -455,15 +408,15 @@ export function buildRunsStageProgressMarkup(vm) {
 export function buildRunsCurrentStageMarkup(vm) {
   return `
     <article id="runsCurrentStage" class="panel">
-      <div class="panel-headline"><h3>当前阶段详情</h3>${renderBadge(stageLabel(vm.currentStage.status), stateClass(vm.currentStage.status))}</div>
+      <div class="panel-headline run-stage-heading"><h3>当前阶段</h3>${renderBadge(stageLabel(vm.currentStage.status), stateClass(vm.currentStage.status))}</div>
+      <div data-current-stage-body>
       <div class="key-value-list">
         <div class="key-value-row"><span>阶段</span><strong>${escapeHtml(vm.currentStage.name)}</strong></div>
-        <div class="key-value-row"><span>状态</span><strong>${escapeHtml(stageLabel(vm.currentStage.status))}</strong></div>
         <div class="key-value-row"><span>开始时间</span><strong>${escapeHtml(vm.runStartedAt)}</strong></div>
         <div class="key-value-row"><span>已耗时</span><strong>${escapeHtml(vm.runElapsed)}</strong></div>
         <div class="key-value-row"><span>当前目标</span><strong>${escapeHtml(vm.currentStage.name === 'speedtest' ? '测速通过节点' : '流水线处理')}</strong></div>
       </div>
-      <div class="progress-track"><div class="progress-fill" style="width:35%"></div></div>
+      </div>
     </article>
   `;
 }
@@ -473,14 +426,16 @@ function buildResultsPage(vm, messages) {
   const verifyStage = vm.stageRows.find((row) => row.name === 'verify');
   return `
     <div id="resultsWorkspace" class="page-grid results-grid">
+      ${buildSubscriptionPanel(vm)}
+      <!-- Keep the artifact identity beside its actions without an introductory heading. -->
       <article class="panel wide-panel artifact-card">
         <div>
-          <span class="panel-subcopy">最终节点来源</span>
+          <span class="sr-only">最终节点来源</span>
           <strong class="mono">${escapeHtml(vm.artifactDir || '暂无')}</strong>
         </div>
         <div class="toolbar-right">
-          <button class="btn btn-secondary" data-action="copy-nodes" type="button">复制节点</button>
-          <button class="btn btn-secondary" data-action="open-artifact-dir" type="button">打开目录</button>
+          <button class="btn btn-secondary icon-only" data-action="copy-nodes" type="button" aria-label="复制节点" title="复制节点">${icon('copy')}</button>
+          ${vm.runtime === 'web' ? '' : `<button class="btn btn-secondary icon-only" data-action="open-artifact-dir" type="button" aria-label="打开目录" title="打开目录">${icon('folder')}</button>`}
         </div>
       </article>
 
@@ -499,7 +454,27 @@ function buildResultsPage(vm, messages) {
       ` : ''}
 
       <article class="panel wide-panel">
-        <div class="panel-headline"><h3>本次 deploy 目标</h3><span class="panel-subcopy">部署摘要</span></div>
+        <div class="panel-headline node-list-heading"><h3 class="sr-only">最终节点列表</h3><span class="panel-subcopy">${escapeHtml(vm.nodeRows.length)} 个节点</span></div>
+        <div id="resultNodePreview" class="table-wrap">
+          <table class="data-table decoded-node-table" data-column-table="nodes">
+            <thead><tr><th>#</th><th>节点名称</th><th>IP地址</th><th>协议</th><th>path</th></tr></thead>
+            <tbody>
+              ${vm.nodeRows.length ? vm.nodeRows.map((row, index) => `
+                <tr>
+                  <td><span class="node-card-field">序号</span><span>${index + 1}</span></td>
+                  <td><span class="node-card-field">节点名称</span><span>${escapeHtml(row.name || '—')}</span></td>
+                  <td><span class="node-card-field">IP地址</span><span>${escapeHtml(row.address || '—')}</span></td>
+                  <td><span class="node-card-field">协议</span><span>${escapeHtml(row.protocol || '—')}</span></td>
+                  <td class="mono"><span class="node-card-field">path</span><span>${escapeHtml(row.path || '—')}</span></td>
+                </tr>
+              `).join('') : '<tr><td colspan="5">暂无节点，运行完成后显示。</td></tr>'}
+            </tbody>
+          </table>
+        </div>
+      </article>
+      <!-- Low-frequency deployment paths used to bury the node comparison table. -->
+      <details class="panel wide-panel result-details" ${deployStage?.status === 'failed' || verifyStage?.status === 'failed' ? 'open' : ''}>
+        <summary>部署详情 ${renderBadge(stageLabel(deployStage?.status || 'pending'), stateClass(deployStage?.status || 'pending'))}</summary>
         <div class="key-value-list">
           <div class="key-value-row"><span>项目名称</span><strong>${escapeHtml(vm.deployment.project_name || '—')}</strong></div>
           <div class="key-value-row"><span>Pages 地址</span><strong class="mono">${escapeHtml(vm.deployment.pages_project_url || '—')}</strong></div>
@@ -508,10 +483,9 @@ function buildResultsPage(vm, messages) {
           <div class="key-value-row"><span>deploy 状态</span><strong>${escapeHtml(stageLabel(deployStage?.status || 'pending'))}</strong></div>
           <div class="key-value-row"><span>verify 状态</span><strong>${escapeHtml(stageLabel(verifyStage?.status || 'pending'))}</strong></div>
         </div>
-      </article>
+      </details>
 
-      <article class="panel wide-panel">
-        <div class="panel-headline"><h3>区域统计</h3><span class="panel-subcopy">按最终节点名称中的区域码统计</span></div>
+      <details class="panel wide-panel result-details"><summary>区域统计</summary>
         <div class="region-stat-grid">
           ${vm.regionStats.length ? vm.regionStats.map((item) => `
             <div class="region-stat-card">
@@ -520,68 +494,23 @@ function buildResultsPage(vm, messages) {
             </div>
           `).join('') : '<div class="empty-state">暂无区域统计，运行完成后显示。</div>'}
         </div>
-      </article>
+      </details>
 
-      <article class="panel wide-panel">
-        <div class="panel-headline"><h3>最终节点列表</h3><span class="panel-subcopy">${escapeHtml(vm.nodeRows.length)} 条</span></div>
-        <div id="resultNodePreview" class="table-wrap">
-          <table class="data-table decoded-node-table">
-            <thead><tr><th>#</th><th>节点名称</th><th>IP地址</th><th>协议</th><th>path</th></tr></thead>
-            <tbody>
-              ${vm.nodeRows.length ? vm.nodeRows.map((row, index) => `
-                <tr>
-                  <td><span class="node-card-field">序号</span><span>${index + 1}</span></td>
-                  <td><span class="node-card-field">节点名称</span><span>${escapeHtml(row.name || '—')}</span></td>
-                  <td><span class="node-card-field">IP地址</span><span>${escapeHtml(row.address || '—')}</span></td>
-                  <td><span class="node-card-field">协议</span><span>${escapeHtml(row.protocol || '—')}</span></td>
-                  <td class="mono"><span class="node-card-field">path</span><span>${escapeHtml(row.path || '—')}</span></td>
-                </tr>
-              `).join('') : '<tr><td colspan="5">暂无节点，运行完成后显示。</td></tr>'}
-            </tbody>
-          </table>
-        </div>
-      </article>
     </div>
   `;
 }
 
-function buildSubscriptionsPage(vm, messages) {
-  const primaryCard = vm.currentSubscription;
-  return `
-    <div id="subscriptionCards" class="page-grid subscriptions-grid">
-      <article class="panel subscriptions-primary-panel">
-        <div class="panel-headline"><h3>主订阅地址</h3>${renderBadge('自动生成', 'success')}</div>
-        <div class="subscription-primary-stack">
-          <div class="subscription-tab-scroller">
-            ${SUBSCRIPTION_FORMATS.map((format) => `
-              <button
-                class="subtab ${vm.subscriptionFormat === format ? 'active' : ''}"
-                data-subscription-format="${escapeHtml(format)}"
-                aria-pressed="${vm.subscriptionFormat === format}"
-                type="button"
-              >${escapeHtml(format)}</button>
-            `).join('')}
-          </div>
-          <div class="subscription-primary mono">${escapeHtml(primaryCard.url)}</div>
-          <div class="action-grid">
-            <button class="btn btn-primary" data-copy-text="${escapeHtml(primaryCard.url)}" type="button">复制链接</button>
-            <button class="btn btn-secondary" data-open-url="${escapeHtml(primaryCard.url)}" type="button">打开订阅</button>
-          </div>
-        </div>
-      </article>
-
-      <article class="panel slim-panel">
-        <div class="panel-headline"><h3>订阅二维码</h3></div>
-        <div class="qr-block">${renderQr(vm.qr)}</div>
-        <p class="panel-subcopy center-copy">扫码导入订阅</p>
-      </article>
-
-      <article class="panel wide-panel subscription-meta">
-        <div class="mini-stat"><span>最后生成时间</span><strong>${escapeHtml(vm.lastUpdated)}</strong></div>
-        <div class="mini-stat"><span>最终节点数量</span><strong>${escapeHtml(vm.counts.availability_links)} 个</strong></div>
-      </article>
+// Results contain the one canonical subscription. QR is an object action,
+// rather than a second navigation destination with a large permanent card.
+function buildSubscriptionPanel(vm) {
+  return `<article id="subscriptionCards" class="panel wide-panel results-subscription-card">
+    <div class="subscription-primary mono">${escapeHtml(vm.subscriptionUrl)}</div>
+    <div class="subscription-actions">
+      <button class="btn btn-primary icon-only" data-copy-text="${escapeHtml(vm.subscriptionUrl)}" type="button" aria-label="复制链接" title="复制链接">${icon('copy')}</button>
+      <button class="btn btn-secondary icon-only" data-open-url="${escapeHtml(vm.subscriptionUrl)}" type="button" aria-label="打开订阅" title="打开订阅">${icon('external')}</button>
+      <details class="subscription-qr"><summary class="icon-btn" aria-label="订阅二维码" title="订阅二维码">${icon('qr')}</summary><div class="subscription-qr-panel">${renderQr(vm.qr)}</div></details>
     </div>
-  `;
+  </article>`;
 }
 
 function buildLogsPage(vm, messages) {
@@ -601,16 +530,15 @@ function buildLogsPage(vm, messages) {
           </div>
           <div class="toolbar-right">
             <div class="log-utility-actions">
-              <button class="btn btn-secondary small" data-action="copy-log" type="button">复制日志</button>
-              ${vm.runtime === 'web' ? '' : '<button class="btn btn-primary small" data-action="open-log-file" type="button">打开日志文件</button>'}
+              <button class="btn btn-secondary small icon-only" data-action="copy-log" type="button" aria-label="复制日志" title="复制日志">${icon('copy')}</button>
+              ${vm.runtime === 'web' ? '' : `<button class="btn btn-secondary small icon-only" data-action="open-log-file" type="button" aria-label="打开日志文件" title="打开日志文件">${icon('folder')}</button>`}
             </div>
             <div class="log-destructive-actions">
-              <button class="btn btn-secondary small" data-action="clear-log" type="button">清空显示</button>
+              <button class="btn btn-secondary small icon-only" data-action="clear-log" type="button" aria-label="清空显示" title="清空显示">${icon('trash')}</button>
             </div>
+            <div class="log-state-actions">${buildLogStateActions(vm)}</div>
           </div>
         </div>
-        ${!vm.logView.follow && vm.logView.unseenCount > 0 ? `<button class="btn btn-primary small log-jump-latest" data-log-jump-latest type="button">回到底部 · ${vm.logView.unseenCount} 条新消息</button>` : ''}
-        ${vm.logView.clearedSnapshot ? '<button class="btn btn-secondary small log-undo-clear" data-log-undo-clear type="button">撤销清空</button>' : ''}
         <div id="logCenterTable" class="terminal-output log-stream" role="log" aria-live="polite">
           ${buildLogCenterMarkup(vm)}
         </div>
@@ -619,31 +547,182 @@ function buildLogsPage(vm, messages) {
   `;
 }
 
+// Transient log actions share the existing toolbar, so appearing feedback
+// never shifts the stream or covers a log line being read.
+export function buildLogStateActions(vm) {
+  const label = `回到底部 · ${vm.logView.unseenCount} 条新消息`;
+  return `${!vm.logView.follow && vm.logView.unseenCount > 0 ? `<button class="btn btn-primary small icon-only" data-log-jump-latest type="button" aria-label="${escapeHtml(label)}" title="${escapeHtml(label)}">${icon('download')}</button>` : ''}${vm.logView.clearedSnapshot ? `<button class="btn btn-secondary small icon-only" data-log-undo-clear type="button" aria-label="撤销清空" title="撤销清空">${icon('refresh')}</button>` : ''}`;
+}
+
 export function buildLogCenterMarkup(vm) {
   return vm.logFilter === '按阶段' ? renderLogGroups(vm.logGroups) : renderLogRows(vm.logRows);
 }
 
 function buildSettingsPage(vm, messages) {
+  // The entries already identify their editor. Repeated instructions used to
+  // push the account tools below the first viewport.
   return `
     <div id="settingsWorkspace" class="page-grid settings-grid">
       <article class="panel wide-panel settings-overview-panel">
-        <div class="panel-headline">
-          <h3>设置总览</h3>
-          <span class="panel-subcopy">点击卡片后在弹窗中编辑，并在弹窗内直接保存</span>
-        </div>
         <div class="settings-overview-grid">
-          ${buildSettingsCard('sources', '数据源配置', `已启用 ${vm.sourceRows.filter((row) => row.enabled).length} / ${vm.sourceRows.length} 个来源`, '管理抓取地址、密钥和启用状态')}
-          ${buildSettingsCard('speed_test', '测速配置', `最低 ${vm.profile.speed_test.min_download_mb_s} MB/s · 并发 ${vm.profile.speed_test.concurrency}`, '控制测速阈值、超时和并发')}
-          ${buildSettingsCard('availability_targets', 'AI可达性检测', `已启用 ${enabledAvailabilityTargetCount(vm.profile.availability_targets)} / ${Object.keys(vm.profile.availability_targets ?? {}).length} 个网站`, '配置 Gemini、ChatGPT、Claude 或自定义网站')}
-          ${buildSettingsCard('deploy', '部署配置', `项目 ${vm.profile.deploy.project_name || '未设置'}`, '项目名变化会自动联动默认 Pages 地址；手动修改 URL 后，后续不再自动覆盖')}
+          ${buildSettingsCard('sources', '数据源配置', `${vm.sourceRows.filter((row) => row.enabled).length} / ${vm.sourceRows.length} 个官网 · 双端并发`)}
+          ${buildSettingsCard('speed_test', '测速配置', `最低 ${vm.profile.speed_test.min_download_mb_s} MB/s · 并发 ${vm.profile.speed_test.concurrency}`)}
+          ${buildSettingsCard('availability_targets', 'AI可达性检测', `已启用 ${enabledAvailabilityTargetCount(vm.profile.availability_targets)} / ${Object.keys(vm.profile.availability_targets ?? {}).length} 个网站`)}
+          ${buildSettingsCard('deploy', '部署配置', `项目 ${vm.profile.deploy.project_name || '未设置'}`)}
+        </div>
+      </article>
+
+      <article class="panel wide-panel appearance-panel">
+        <h3>${icon('sun')}外观</h3>
+        <div class="theme-choices" role="group" aria-label="界面主题">
+          ${[['system', 'monitor', '跟随系统'], ['light', 'sun', '浅色'], ['dark', 'moon', '深色']].map(([value, glyph, label]) => `<button class="theme-choice" type="button" data-theme-choice="${value}" aria-pressed="${vm.themePreference === value}">${icon(glyph)}${label}</button>`).join('')}
         </div>
       </article>
 
+      ${buildAccountPoolPanel(vm)}
       ${buildSettingsDrawer(vm)}
     </div>
   `;
 }
 
+export function filterAccountPoolAccounts(pool = {}) {
+  const query = String(pool.query ?? '').trim().toLowerCase();
+  const status = pool.statusFilter ?? 'all';
+  const brand = pool.brandFilter ?? 'all';
+  const rows = (pool.accounts ?? []).filter((account) => {
+    if (status !== 'all' && account.status !== status) return false;
+    if (brand !== 'all' && account.brand !== brand) return false;
+    if (!query) return true;
+    return [account.account_masked, account.note, account.status_reason, SOURCE_NAMES[account.brand]]
+      .some((value) => String(value ?? '').toLowerCase().includes(query));
+  });
+  const sortBy = pool.sortBy ?? 'brand';
+  return rows.sort((left, right) => {
+    if (sortBy === 'recent') return String(right.last_used_at || '').localeCompare(String(left.last_used_at || '')) || left.id - right.id;
+    if (sortBy === 'uses') return Number(right.use_count ?? 0) - Number(left.use_count ?? 0) || left.id - right.id;
+    if (sortBy === 'expiry') return String(left.expires_at || '9999').localeCompare(String(right.expires_at || '9999')) || left.id - right.id;
+    return String(left.brand).localeCompare(String(right.brand)) || left.id - right.id;
+  });
+}
+
+export function buildAccountPoolRecords(pool = EMPTY_ACCOUNT_POOL) {
+  if (pool.status === 'loading') {
+    return '<div class="account-pool-empty" role="status">正在读取账号池…</div>';
+  }
+  if (pool.status === 'error' || pool.status === 'unavailable') {
+    return `<div class="account-pool-empty" role="alert">${escapeHtml(pool.error || '账号池不可用')}</div>`;
+  }
+  const rows = filterAccountPoolAccounts(pool);
+  if (rows.length === 0) {
+    const hasAny = (pool.accounts ?? []).length > 0;
+    return `<div class="account-pool-empty">${hasAny ? '没有匹配的账号' : '暂无账号，上传 CSV 后可用。'}</div>`;
+  }
+  return `
+    <div class="table-wrap account-pool-table-wrap">
+      <table class="data-table account-pool-table" data-column-table="accounts">
+        <colgroup>
+          <col class="account-col-account" />
+          <col class="account-col-brand" />
+          <col class="account-col-status" />
+          <col class="account-col-expiry" />
+          <col class="account-col-usage" />
+          <col class="account-col-actions" />
+        </colgroup>
+        <thead><tr><th>账号</th><th>加速器</th><th>状态</th><th>到期</th><th>使用</th><th>操作</th></tr></thead>
+        <tbody>
+          ${rows.map((account) => {
+            const meta = ACCOUNT_STATUS_META[account.status] ?? { label: account.status, tone: 'neutral' };
+            const retired = account.status !== 'active';
+            return `
+              <tr data-account-row="${account.id}">
+                <td data-field-label="账号"><code class="account-mask">${escapeHtml(account.account_masked)}</code>${account.note ? `<span class="account-note">${escapeHtml(account.note)}</span>` : ''}</td>
+                <td data-field-label="加速器">${escapeHtml(SOURCE_NAMES[account.brand] ?? account.brand)}</td>
+                <td data-field-label="状态">${renderBadge(meta.label, meta.tone)}${account.status_reason ? `<span class="account-note">${escapeHtml(account.status_reason)}</span>` : ''}</td>
+                <td data-field-label="到期">${escapeHtml(account.expires_at || '—')}</td>
+                <td data-field-label="使用"><span class="account-usage">${Number(account.use_count ?? 0)} 次</span><span class="account-note">${Number(account.success_count ?? 0)} 成功 / ${Number(account.fail_count ?? 0)} 失败</span></td>
+                <td data-field-label="操作"><button class="btn btn-secondary small ${retired ? '' : 'destructive'}" data-account-action="toggle" data-account-id="${account.id}" type="button" ${pool.busy ? 'disabled' : ''}>${retired ? '启用' : '停用'}</button></td>
+              </tr>
+            `;
+          }).join('')}
+        </tbody>
+      </table>
+    </div>
+    <p class="account-pool-count">显示 ${rows.length} / ${(pool.accounts ?? []).length} 个账号</p>
+  `;
+}
+
+export function buildAccountPoolPanel(vm) {
+  const pool = vm.accountPool ?? EMPTY_ACCOUNT_POOL;
+  const stats = pool.stats ?? { total: 0, active: 0, disabled: 0, expired: 0, invalid: 0, expiring_soon: 0, by_brand: [] };
+  const total = Number(stats.total ?? 0);
+  const segments = ['active', 'disabled', 'expired', 'invalid'];
+  const message = pool.message || (pool.status === 'error' ? pool.error : '');
+  // A failed load must not render a wall of zeros: "0 可用 / 共 0 个" reads as a
+  // real empty pool, and counts left over from the last good load read as a
+  // successful refresh. Show the state instead and let the records area carry
+  // the reason.
+  const unavailable = pool.status === 'error' || pool.status === 'unavailable';
+  const summary = unavailable
+    ? ''
+    : `
+      <div class="account-pool-summary">
+        <div class="account-pool-total">
+          <strong>${Number(stats.active ?? 0)}</strong>
+          <span>可用账号 / 共 ${total} 个</span>
+        </div>
+        <div class="account-pool-status-grid">
+          ${segments.filter((status) => status !== 'active').map((status) => `
+            <div class="account-pool-stat ${ACCOUNT_STATUS_META[status].tone}">
+              <span>${ACCOUNT_STATUS_META[status].label}</span>
+              <strong>${Number(stats[status] ?? 0)}</strong>
+            </div>
+          `).join('')}
+        </div>
+        ${Number(stats.expiring_soon ?? 0) > 0 ? `<p class="account-pool-expiry">7 天内到期 ${Number(stats.expiring_soon)} 个</p>` : ''}
+      </div>
+
+      <div class="account-pool-toolbar">
+        <label class="account-pool-search"><span class="sr-only">搜索</span><input data-account-search type="search" value="${escapeHtml(pool.query ?? '')}" placeholder="账号掩码或备注" /></label>
+        <label><span class="sr-only">状态</span><select data-account-status-filter>
+          <option value="all" ${pool.statusFilter === 'all' ? 'selected' : ''}>全部状态</option>
+          ${segments.map((status) => `<option value="${status}" ${pool.statusFilter === status ? 'selected' : ''}>${ACCOUNT_STATUS_META[status].label}</option>`).join('')}
+        </select></label>
+        <label><span class="sr-only">加速器</span><select data-account-brand-filter>
+          <option value="all" ${pool.brandFilter === 'all' ? 'selected' : ''}>全部加速器</option>
+          ${SOURCE_DISPLAY_ORDER.map((brand) => `<option value="${brand}" ${pool.brandFilter === brand ? 'selected' : ''}>${SOURCE_NAMES[brand]}</option>`).join('')}
+        </select></label>
+        <label><span class="sr-only">排序</span><select data-account-sort>
+          <option value="brand" ${pool.sortBy === 'brand' ? 'selected' : ''}>按加速器</option>
+          <option value="recent" ${pool.sortBy === 'recent' ? 'selected' : ''}>最近使用</option>
+          <option value="uses" ${pool.sortBy === 'uses' ? 'selected' : ''}>使用次数</option>
+          <option value="expiry" ${pool.sortBy === 'expiry' ? 'selected' : ''}>到期时间</option>
+        </select></label>
+      </div>
+    `;
+  return `
+    <article class="panel wide-panel account-pool-panel" id="accountPoolPanel" aria-busy="${pool.busy || pool.status === 'loading' ? 'true' : 'false'}">
+      <div class="panel-headline account-pool-headline">
+        <div>
+          <h3>账号池</h3>
+        </div>
+        <div class="account-pool-actions">
+          <button class="btn btn-secondary small icon-only" data-account-action="refresh" type="button" ${pool.busy ? 'disabled' : ''} aria-label="刷新账号池" title="刷新账号池">${icon('refresh')}</button>
+          <button class="btn btn-secondary small icon-only" data-account-action="template" type="button" ${pool.busy ? 'disabled' : ''} aria-label="下载模板" title="下载模板">${icon('download')}</button>
+          <button class="btn btn-primary small" data-account-action="upload" type="button" ${pool.busy ? 'disabled' : ''}>${icon('upload')}${pool.busy ? '导入中…' : '上传 CSV'}</button>
+          <input id="accountPoolFile" data-account-file type="file" accept=".csv,.txt,text/csv,text/plain" hidden aria-hidden="true" tabindex="-1" />
+        </div>
+      </div>
+
+      ${summary}
+
+      <div id="accountPoolRecords" class="account-pool-records">${pool.recordsMarkup ?? ''}</div>
+      <p class="account-pool-message ${pool.issues?.length ? 'warning' : ''}" role="status" aria-live="polite" ${message || pool.issues?.length ? '' : 'hidden'}>
+        ${escapeHtml(message)}${pool.issues?.length ? ` ${pool.issues.slice(0, 3).map((issue) => `第 ${escapeHtml(String(issue.line ?? ''))} 行：${escapeHtml(issue.message)}`).join('；')}${pool.issues.length > 3 ? `；另有 ${pool.issues.length - 3} 行` : ''}` : ''}
+      </p>
+    </article>
+  `;
+}
+
 function renderBoundField(label, type, value, id, binding = null) {
   const bindingAttrs = binding
     ? ` data-source="${escapeHtml(binding.source)}" data-key="${escapeHtml(binding.key)}"`
@@ -665,16 +744,17 @@ function renderProfileField(label, type, value, id, path) {
   `;
 }
 
-function buildSettingsCard(section, title, summary, detail) {
+function buildSettingsCard(section, title, summary) {
   return `
     <button
       class="settings-overview-card"
       data-settings-card="${section}"
       type="button"
     >
-      <span class="settings-card-kicker">${escapeHtml(title)}</span>
-      <strong class="settings-card-summary" id="settingsCardSummary-${section}">${escapeHtml(summary)}</strong>
-      <span class="settings-card-detail">${escapeHtml(detail)}</span>
+      <span class="settings-card-icon">${icon(section)}</span>
+      <span class="settings-card-copy"><span class="settings-card-kicker">${escapeHtml(title)}</span>
+      <span class="settings-card-summary" id="settingsCardSummary-${section}">${escapeHtml(summary)}</span></span>
+      ${icon('chevron', 'settings-card-arrow')}
     </button>
   `;
 }
@@ -702,13 +782,12 @@ function buildSettingsDrawer(vm) {
       <aside data-settings-dialog role="dialog" aria-modal="true" aria-labelledby="settingsDrawerTitle" class="settings-drawer-panel" ${style}>
         <div class="settings-drawer-head">
           <div>
-            <span class="settings-card-kicker">编辑配置</span>
             <h3 id="settingsDrawerTitle">${escapeHtml(title)}</h3>
           </div>
-          <button class="icon-btn settings-drawer-close" data-drawer-close="cancel" type="button" aria-label="关闭${escapeHtml(title)}">×</button>
+          <button class="icon-btn settings-drawer-close" data-drawer-close="cancel" type="button" aria-label="关闭${escapeHtml(title)}" title="关闭${escapeHtml(title)}">${icon('close')}</button>
         </div>
         <div class="settings-drawer-body">
-          ${isOpen ? buildSettingsDrawerBody(section, drawer.draft) : ''}
+          ${isOpen ? buildSettingsDrawerBody(section, drawer.draft, vm) : ''}
         </div>
         <div class="settings-drawer-actions">
           <button class="btn btn-secondary" data-drawer-close="cancel" type="button">取消</button>
@@ -720,54 +799,110 @@ function buildSettingsDrawer(vm) {
 }
 
 const SOURCE_NAMES = {
-  'leiting': '雷霆',
-  'heidong': '黑洞',
-  'mifeng': '蜜蜂',
-  'xuanfeng-area': '旋风部分区域',
-  'xuanfeng-all-area': '旋风全区域',
-  'heilong': '黑龙',
-  'custom': '自定义'
+  leiting: '雷霆',
+  heidong: '黑洞',
+  mifeng: '蜜蜂',
+  xuanfeng: '旋风'
+};
+
+const LEGACY_SOURCE_ALIASES = {
+  'xuanfeng-area': 'xuanfeng',
+  'xuanfeng-all-area': 'xuanfeng',
+  xuanfeng1: 'xuanfeng',
+  xuanfeng2: 'xuanfeng'
+};
+
+const ACCOUNT_STATUS_META = {
+  active: { label: '可用', tone: 'success' },
+  disabled: { label: '停用', tone: 'neutral' },
+  expired: { label: '到期', tone: 'warning' },
+  invalid: { label: '失效', tone: 'danger' }
+};
+
+const EMPTY_ACCOUNT_POOL = {
+  status: 'idle',
+  stats: null,
+  accounts: [],
+  error: '',
+  message: '',
+  issues: [],
+  query: '',
+  statusFilter: 'all',
+  brandFilter: 'all',
+  sortBy: 'brand',
+  busy: false
 };
 
-function buildSettingsDrawerBody(section, draft) {
+/** Credential sources are also configured by their official site. */
+const OFFICIAL_SITES = {
+  leiting: 'https://www.68123836.com',
+  xuanfeng: 'https://www.16863988.com',
+  heidong: 'https://www.67986457.com',
+  mifeng: 'https://www.86933221.com'
+};
+
+function buildSettingsDrawerBody(section, draft, vm = null) {
   if (section === 'sources') {
-    const sourceDraft = draft?.sources ?? {};
+    const sourceDraft = normalizeOfficialSourceDraft(draft?.sources ?? {});
     return `
+      <details class="context-help"><summary>抓取与早停规则</summary>
       <div class="source-drawer-settings">
-        ${renderDrawerField('最大迭代次数', 'number', draft?.maxIterations ?? 40, 'sources.maxIterations', true, 'data-source-max-iterations min="1"')}
-        ${renderDrawerField('早停次数', 'number', draft?.plateauLimit ?? 20, 'sources.plateauLimit', true, 'data-source-plateau-limit min="1"')}
-        ${renderDrawerField('区域起始', 'number', draft?.areaMin ?? 0, 'sources.areaMin', true, 'data-source-area-min')}
-        ${renderDrawerField('区域结束', 'number', draft?.areaMax ?? 100, 'sources.areaMax', true, 'data-source-area-max')}
+        <div class="source-drawer-settings-copy">
+          <strong>每个加速器只填官网</strong>
+          <span>密钥从 APK 自动发现，账号密码由账号池提供。Android 与 iOS 两个通道同时抓取，每条线路按「轮数」循环请求，连续「早停」轮没有新节点就停止。</span>
+        </div>
       </div>
+      </details>
       <div class="table-wrap">
         <table class="data-table settings-source-table">
           <colgroup>
             <col class="settings-col-enabled" />
             <col class="settings-col-name" />
-            <col class="settings-col-url" />
-            <col class="settings-col-key" />
+            <col class="settings-col-connection" />
+            <col class="settings-col-rounds" />
           </colgroup>
-          <thead><tr><th>启用</th><th>名称</th><th>地址</th><th>密钥</th></tr></thead>
+          <thead><tr><th>启用</th><th>加速器</th><th>官网</th><th>循环</th></tr></thead>
           <tbody>
-            ${Object.entries(sourceDraft).map(([name, source]) => `
+            ${SOURCE_DISPLAY_ORDER.map((name) => {
+              const source = sourceDraft[name];
+              const label = escapeHtml(SOURCE_NAMES[name] || name);
+              const pool = vm?.accountPool?.stats?.by_brand?.find((item) => item.brand === name);
+              const poolHint = vm?.accountPool?.stats
+                ? `账号池 ${Number(pool?.active ?? 0)} 个可用`
+                : '账号池未连接';
+              return `
               <tr data-settings-field-group>
-                <td data-field-label="启用"><input aria-label="${escapeHtml(SOURCE_NAMES[name] || name)}：启用" type="checkbox" data-drawer-source="${escapeHtml(name)}" data-drawer-key="enabled" ${source.enabled ? 'checked' : ''} /></td>
-                <td data-field-label="名称"><strong class="settings-source-name">${escapeHtml(SOURCE_NAMES[name] || name)}</strong></td>
-                <td data-field-label="地址">
-                  <textarea
-                    class="table-textarea mono"
-                    rows="3"
-                    aria-label="${escapeHtml(SOURCE_NAMES[name] || name)}：地址"
-                    data-drawer-source="${escapeHtml(name)}"
-                    data-drawer-key="url"
-                  >${escapeHtml(source.url ?? '')}</textarea>
+                <td data-field-label="启用"><input aria-label="${label}：启用" type="checkbox" data-drawer-source="${escapeHtml(name)}" data-drawer-key="enabled" ${source.enabled !== false ? 'checked' : ''} /></td>
+                <td data-field-label="加速器">
+                  <strong class="settings-source-name">${label}</strong>
+                  <span class="settings-source-hint ${Number(pool?.active ?? 0) > 0 ? 'ready' : 'empty'}">${escapeHtml(poolHint)}</span>
+                </td>
+                <td data-field-label="官网">
+                  <input aria-label="${label}：官网地址" inputmode="url" spellcheck="false" class="mono" data-drawer-source="${escapeHtml(name)}" data-drawer-key="official_site" placeholder="${escapeHtml(OFFICIAL_SITES[name] ?? '')}" value="${escapeHtml(source.official_site ?? '')}" />
+                </td>
+                <td data-field-label="循环">
+                  <div class="source-credential-rounds">
+                    <label class="source-field">
+                      <span>轮数</span>
+                      <input type="number" min="1" step="1" inputmode="numeric" aria-label="${label}：抓取轮数" title="每条线路循环请求的次数；每轮服务端会返回不同落地机" data-drawer-source="${escapeHtml(name)}" data-drawer-key="max_iterations" value="${escapeHtml(source.max_iterations ?? 4)}" />
+                    </label>
+                    <label class="source-field">
+                      <span>早停</span>
+                      <input type="number" min="1" step="1" inputmode="numeric" aria-label="${label}：连续空轮早停次数" title="连续多少轮没有新节点就停止" data-drawer-source="${escapeHtml(name)}" data-drawer-key="plateau_limit" value="${escapeHtml(source.plateau_limit ?? 2)}" />
+                    </label>
+                  </div>
+                  <span class="source-round-summary">双端并发</span>
                 </td>
-                <td data-field-label="密钥"><input aria-label="${escapeHtml(SOURCE_NAMES[name] || name)}：密钥" data-drawer-source="${escapeHtml(name)}" data-drawer-key="key" value="${escapeHtml(source.key ?? '')}" /></td>
               </tr>
-            `).join('')}
+            `;
+            }).join('')}
           </tbody>
         </table>
       </div>
+      <details class="context-help source-drawer-notice"><summary>账号与线路规则</summary>
+
+        <p>登录被拒会把该账号标记为失效并停用，会员到期会按日期自动停用；更换密码后重新上传 CSV 即可恢复。抓取结果里免费线路和中国大陆线路会被跳过。</p>
+      </details>
     `;
   }
 
@@ -803,7 +938,7 @@ function buildSettingsDrawerBody(section, draft) {
                 <td data-field-label="URL">
                   <textarea aria-label="${escapeHtml(formatAvailabilityName(target.name))}：URL" class="table-textarea mono" rows="3" data-availability-index="${index}" data-availability-key="url">${escapeHtml(target.url ?? '')}</textarea>
                 </td>
-                <td data-field-label="操作"><button class="btn btn-secondary small destructive" data-availability-action="remove" data-availability-index="${index}" type="button">删除</button></td>
+                <td data-field-label="操作"><button class="btn btn-secondary small destructive icon-only" data-availability-action="remove" data-availability-index="${index}" type="button" aria-label="删除${escapeHtml(formatAvailabilityName(target.name))}" title="删除${escapeHtml(formatAvailabilityName(target.name))}">${icon('trash')}</button></td>
               </tr>
             `).join('')}
           </tbody>
@@ -814,16 +949,16 @@ function buildSettingsDrawerBody(section, draft) {
 
   if (section === 'deploy') {
     return `
-      <div class="notice-card">
-        <strong>部署配置说明</strong>
+      <details class="context-help">
+        <summary>地址联动与验证规则</summary>
         <p>项目名变化会自动联动默认 Pages 地址；手动修改 URL 后，后续不再自动覆盖。verify 订阅地址用于 deploy 后的健康检查，不影响页面展示二维码。</p>
-      </div>
+      </details>
       <div class="form-grid compact-form-grid">
         ${renderDrawerField('项目名称', 'text', draft.project_name, 'deploy.project_name')}
+        ${renderDrawerField('最少节点数', 'number', draft.min_final_links ?? 10, 'deploy.min_final_links', false, 'min="0" step="1"')}
         ${renderDrawerField('Pages 地址', 'text', draft.pages_project_url, 'deploy.pages_project_url')}
         ${renderDrawerField('订阅地址', 'text', draft.subscription_url, 'deploy.subscription_url')}
         ${renderDrawerField('verify 订阅地址', 'text', draft.verify_subscription_url, 'deploy.verify_subscription_url')}
-        ${renderDrawerField('最少节点数', 'number', draft.min_final_links ?? 10, 'deploy.min_final_links', false, 'min="0" step="1"')}
         ${renderDrawerField('Cloudflare Token', 'password', draft.cloudflare_api_token, 'deploy.cloudflare_api_token')}
         ${renderDrawerField('Pages Secret ADMIN', 'password', draft.pages_secret_admin, 'deploy.pages_secret_admin')}
       </div>
@@ -845,15 +980,15 @@ function formatAvailabilityName(name) {
 
 function renderDrawerField(label, type, value, path, isCompact = false, extraAttrs = '') {
   return `
-    <label class="field ${isCompact ? 'compact' : ''}">
+    <label class="field ${isCompact ? 'compact' : ''} ${path.startsWith('deploy.') && (path.includes('url') || path.includes('token') || path.includes('secret')) ? 'field-wide' : ''}">
       <span>${escapeHtml(label)}</span>
       <input type="${type}" value="${escapeHtml(value ?? '')}" data-drawer-path="${escapeHtml(path)}" ${extraAttrs} />
     </label>
   `;
 }
 
-function renderBadge(text, tone) {
-  return `<span class="badge ${tone}">${escapeHtml(text)}</span>`;
+function renderBadge(text, tone, attributes = '') {
+  return `<span class="badge ${tone}"${attributes ? ` ${attributes}` : ''}>${escapeHtml(text)}</span>`;
 }
 
 function renderQr(qr) {
@@ -914,20 +1049,16 @@ function renderSourceMetricRows(rows, ariaLabel) {
   `;
 }
 
-function buildSubscriptionCards(baseUrl) {
-  return SUBSCRIPTION_FORMATS.map((title) => ({
-    title,
-    url: title === 'Clash' ? baseUrl : `${baseUrl}?format=${encodeURIComponent(title.toLowerCase().replaceAll(' ', '-'))}`
-  }));
-}
-
 function buildSourceRows(profile) {
   return Object.entries(profile.sources).map(([name, source], index) => ({
     name,
+    label: SOURCE_NAMES[name] || name,
     primary: index === 0,
-    enabled: Boolean(source.enabled),
-    url: source.url ?? '',
-    key: source.key ?? ''
+    enabled: source.enabled !== false,
+    mode: 'credential',
+    officialSite: source.official_site ?? '',
+    maxIterations: Number(source.max_iterations ?? 4),
+    plateauLimit: Number(source.plateau_limit ?? 2)
   }));
 }
 
@@ -980,14 +1111,19 @@ export function buildRegionStats(nodeRows = []) {
   return Array.from(counts.entries()).map(([region, count]) => ({ region, count }));
 }
 
+// Fresh profiles have no speed_test section. Reuse these defaults in both
+// the settings card and its draft so the displayed controls can always open.
+export function buildSpeedTestDraft(config = {}) {
+  return structuredClone({ ...FALLBACK_PROFILE.speed_test, ...config });
+}
+
 export function buildSourceIterationDraft(sources = {}) {
-  const firstSource = Object.values(sources)[0] ?? {};
+  const normalized = normalizeOfficialSourceDraft(sources);
+  const firstSource = Object.values(normalized)[0] ?? {};
   return {
-    sources: structuredClone(sources),
-    maxIterations: coercePositiveInteger(firstSource.max_iterations, 40),
-    plateauLimit: coercePositiveInteger(firstSource.plateau_limit, 20),
-    areaMin: coerceAreaValue(firstSource.area_min, 0),
-    areaMax: coerceAreaValue(firstSource.area_max, 100)
+    sources: normalized,
+    maxIterations: coercePositiveInteger(firstSource.max_iterations, 4),
+    plateauLimit: coercePositiveInteger(firstSource.plateau_limit, 2)
   };
 }
 
@@ -1043,25 +1179,52 @@ export function applyAvailabilityTargetDraft(draft = {}) {
 }
 
 export function applySourceIterationDraft(sources = {}, draft = {}) {
-  const maxIterations = coercePositiveInteger(draft.maxIterations, 40);
-  const plateauLimit = coercePositiveInteger(draft.plateauLimit, 20);
-  const areaMin = coerceAreaValue(draft.areaMin, 0);
-  const areaMax = coerceAreaValue(draft.areaMax, 100);
+  // The drawer edits each row's rounds in place, and each row is the source of
+  // truth when the draft carries rows. The shared `maxIterations` /
+  // `plateauLimit` fields remain only for callers that pass bare values, which
+  // then apply to every row.
+  if (draft?.sources) {
+    return normalizeOfficialSourceDraft(draft.sources);
+  }
+  const maxIterations = coercePositiveInteger(draft.maxIterations, 4);
+  const plateauLimit = coercePositiveInteger(draft.plateauLimit, 2);
+  const normalized = normalizeOfficialSourceDraft(sources);
   return Object.fromEntries(
-    Object.entries(sources).map(([name, source]) => [
+    Object.entries(normalized).map(([name, source]) => [
       name,
-      {
-        ...source,
-        max_iterations: maxIterations,
-        min_iterations: Math.min(coercePositiveInteger(source.min_iterations, 0), maxIterations),
-        plateau_limit: plateauLimit,
-        area_min: Math.min(areaMin, areaMax),
-        area_max: Math.max(areaMin, areaMax)
-      }
+      { ...source, max_iterations: maxIterations, plateau_limit: plateauLimit }
     ])
   );
 }
 
+export function validateSourceDraft(draft = {}) {
+  const sources = draft.sources ?? {};
+  for (const [name, source] of Object.entries(sources)) {
+    // Only the vendor rows are edited here. A custom url source is passed
+    // through untouched, so validating its `official_site` would reject a save
+    // for a field the drawer never showed.
+    if (!SOURCE_DISPLAY_ORDER.includes(name)) continue;
+    if (source.enabled === false) continue;
+    const value = String(source.official_site ?? '').trim();
+    let parsed;
+    try {
+      parsed = new URL(value);
+    } catch {
+      return `${SOURCE_NAMES[name] ?? name}：请填写有效的官网地址`;
+    }
+    if (!['http:', 'https:'].includes(parsed.protocol) || !parsed.hostname) {
+      return `${SOURCE_NAMES[name] ?? name}：官网地址必须以 http:// 或 https:// 开头`;
+    }
+  }
+  if (!Number.isFinite(Number(draft.maxIterations)) || Number(draft.maxIterations) < 1) {
+    return '循环轮数至少为 1';
+  }
+  if (!Number.isFinite(Number(draft.plateauLimit)) || Number(draft.plateauLimit) < 1) {
+    return '早停轮数至少为 1';
+  }
+  return '';
+}
+
 function inferNodeRegion(name = '') {
   const normalized = String(name).replace(/^[^\p{L}\p{N}]+/u, '').trim();
   const match = normalized.match(/^([A-Z]{2})(?:\b|[\s_-])/);
@@ -1092,7 +1255,10 @@ function buildLogRows(displayLogs, trimWindow = true) {
 }
 
 function selectLogWindow(entries, logView) {
-  if (logView?.follow !== false) return entries.slice(-28);
+  // With the compact shell, 28 lines fit entirely on a tall desktop window.
+  // That left no scroll range to pause following and shifted text on append.
+  // Keep the same bounded 120-line window in both follow and paused modes.
+  if (logView?.follow !== false) return entries.slice(-120);
   const anchorIndex = entries.findIndex((entry) => entry.logId === logView.anchorId);
   const start = anchorIndex >= 0
     ? Math.max(0, Math.min(anchorIndex - 8, Math.max(0, entries.length - 120)))
@@ -1178,6 +1344,65 @@ function inferLogStage(line) {
   return matches.at(-1) ?? '';
 }
 
+// Fields the drawer no longer edits. `min_iterations` and `platforms` stay: the
+// round policy and `resolveCredentialPlatforms` still read them, so a pinned
+// debug profile that sets them must survive a save from the drawer.
+const OBSOLETE_SOURCE_FIELDS = [
+  'url', 'key', 'account', 'password', 'platform',
+  'use_random_area', 'area_min', 'area_max', 'max_areas',
+  'resume_from_iteration', 'failure_limit'
+];
+
+export function normalizeOfficialSourceDraft(sources = {}) {
+  const collapsed = {};
+  // A non-vendor row (a custom `url` source) is kept out of the vendor table
+  // but must survive a save: the drawer does not render it, and dropping it
+  // would delete a working source the operator never touched.
+  const extras = {};
+  for (const [name, source] of Object.entries(sources ?? {})) {
+    const canonical = LEGACY_SOURCE_ALIASES[name] ?? name;
+    if (!SOURCE_DISPLAY_ORDER.includes(canonical)) {
+      extras[canonical] = { ...source };
+      continue;
+    }
+    const existing = collapsed[canonical];
+    collapsed[canonical] = existing
+      ? {
+          ...existing,
+          ...source,
+          // The first row listed the vendor's rounds; a legacy duplicate must
+          // not overwrite them just by appearing later in the file.
+          max_iterations: existing.max_iterations ?? source.max_iterations,
+          plateau_limit: existing.plateau_limit ?? source.plateau_limit,
+          enabled: existing.enabled !== false || source.enabled !== false
+        }
+      : { ...source };
+  }
+  const vendorRows = Object.fromEntries(SOURCE_DISPLAY_ORDER.map((name) => {
+    const source = collapsed[name] ?? {};
+    const wasCredential = source.mode === 'credential';
+    const normalized = {
+      ...source,
+      mode: 'credential',
+      // Fill the vendor default only for a row that has never been stored.
+      // A cleared input is a real edit, not a request for the default: refilling
+      // it here would undo what the operator just typed.
+      official_site: source.official_site === undefined
+        ? (OFFICIAL_SITES[name] ?? '')
+        : String(source.official_site).trim(),
+      enabled: source.enabled !== false,
+      max_iterations: wasCredential ? coercePositiveInteger(source.max_iterations, 4) : 4,
+      plateau_limit: wasCredential ? coercePositiveInteger(source.plateau_limit, 2) : 2
+    };
+    for (const field of OBSOLETE_SOURCE_FIELDS) delete normalized[field];
+    // A URL-mode floor is the same mismatch as its URL-mode cap: 10 URL fetches
+    // are not 10 route-loop rounds, so it goes with the rest of the old shape.
+    if (!wasCredential) delete normalized.min_iterations;
+    return [name, normalized];
+  }));
+  return { ...vendorRows, ...extras };
+}
+
 function mergeProfile(profile) {
   const workspace = profile?.workspace ?? {};
   const paths = profile?.paths ?? {};
@@ -1190,9 +1415,9 @@ function mergeProfile(profile) {
   return {
     ...FALLBACK_PROFILE,
     ...profile,
-    sources: profile?.sources ?? FALLBACK_PROFILE.sources,
+    sources: normalizeOfficialSourceDraft(profile?.sources ?? FALLBACK_PROFILE.sources),
     availability_targets: profile?.availability_targets ?? DEFAULT_AVAILABILITY_TARGETS,
-    speed_test: { ...FALLBACK_PROFILE.speed_test, ...(profile?.speed_test ?? {}) },
+    speed_test: buildSpeedTestDraft(profile?.speed_test),
     deploy: { ...FALLBACK_PROFILE.deploy, ...(profile?.deploy ?? {}) },
     paths: mergedPaths,
     workspace: mergedPaths
@@ -1264,9 +1489,12 @@ function runStatusLabel(status) {
 }
 
 function resolveCurrentStatusLabel(state, messages) {
+  // A retained result belongs to the previous run. Live state takes priority
+  // when another run starts through the service or another client.
+  if (state.runState === 'running') return '运行中';
+  if (state.runState === 'stopping') return '停止中';
   if (state.runResult === 'success' || state.runResult === 'demo') return '成功';
   if (state.runResult === 'failed') return '失败';
-  if (state.runState === 'running') return '运行中';
   return '空闲';
 }