hypercore-cli 1.1.0

package/dist/web/static/mirror.js

@@ -0,0 +1,1125 @@
+/**
+ * HyperMirror - 内观引擎 Dashboard Frontend
+ */
+
+const $ = (sel) => document.querySelector(sel);
+const $$ = (sel) => document.querySelectorAll(sel);
+
+const state = {
+  activeTab: 'overview',
+  refreshTimer: null,
+  testPollTimer: null,
+  selectedSuiteId: '',
+  testHistoryStatusFilter: 'all',
+  testHistoryVersionFilter: 'all',
+  testHistoryQuery: '',
+  testsSnapshot: null,
+  selectedRunId: '',
+  selectedRunLoading: false,
+  selectedRunError: '',
+  selectedRunDetail: null,
+  autoConfigSaving: false,
+};
+
+const TEST_PREFS_STORAGE_KEY = 'hypermirror.testprefs.v1';
+
+// ===== Utilities =====
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+async function fetchJSON(url) {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  return res.json();
+}
+
+async function postJSON(url, body = {}) {
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  const text = await res.text();
+  let json = {};
+  try {
+    json = text ? JSON.parse(text) : {};
+  } catch {
+    json = {};
+  }
+  if (!res.ok) {
+    throw new Error(json.error || `HTTP ${res.status}`);
+  }
+  return json;
+}
+
+function relativeTime(isoStr) {
+  if (!isoStr) return '';
+  const diff = Date.now() - new Date(isoStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return '刚刚';
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+const WUXING_MAP = {
+  '木': { icon: '\uD83C\uDF33', cls: 'wx-wood', en: 'Wood' },
+  '火': { icon: '\uD83D\uDD25', cls: 'wx-fire', en: 'Fire' },
+  '水': { icon: '\uD83C\uDF0A', cls: 'wx-water', en: 'Water' },
+  '金': { icon: '\u2699\uFE0F', cls: 'wx-metal', en: 'Metal' },
+  '土': { icon: '\uD83C\uDFD4\uFE0F', cls: 'wx-earth', en: 'Earth' },
+};
+
+const PRIORITY_LABELS = { S: 'S', A: 'A', B: 'B', C: 'C' };
+const STATUS_LABELS = { idea: 'Idea', planned: 'Planned', developing: 'Dev', done: 'Done', archived: 'Archived' };
+
+function badgePriority(p) {
+  return `<span class="badge badge-priority-${p}">${p}</span>`;
+}
+function badgeStatus(s) {
+  return `<span class="badge badge-status badge-status-${s}">${STATUS_LABELS[s] || s}</span>`;
+}
+function badgeWuxing(w) {
+  const info = WUXING_MAP[w];
+  return info ? `<span class="badge-wuxing" title="${info.en}">${info.icon}</span>` : '';
+}
+function badgeType(t) {
+  return `<span class="badge badge-type">${t}</span>`;
+}
+function badgeSeverity(s) {
+  return `<span class="badge badge-severity badge-severity-${s}">${s}</span>`;
+}
+function badgeVerdict(v) {
+  const labels = { effective: '有效', ineffective: '无效', pending: '待观察', 'no-data': '无数据' };
+  return `<span class="badge badge-verdict badge-verdict-${v}">${labels[v] || v}</span>`;
+}
+
+function emptyState(icon, text) {
+  return `<div class="mirror-empty"><div class="mirror-empty-icon">${icon}</div><div>${text}</div></div>`;
+}
+
+function loadTestPreferences() {
+  try {
+    const raw = localStorage.getItem(TEST_PREFS_STORAGE_KEY);
+    if (!raw) return;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== 'object') return;
+
+    if (typeof parsed.selectedSuiteId === 'string') state.selectedSuiteId = parsed.selectedSuiteId;
+    if (typeof parsed.statusFilter === 'string') state.testHistoryStatusFilter = parsed.statusFilter;
+    if (typeof parsed.versionFilter === 'string') state.testHistoryVersionFilter = parsed.versionFilter;
+    if (typeof parsed.query === 'string') state.testHistoryQuery = parsed.query;
+  } catch {
+    // ignore bad localStorage payload
+  }
+}
+
+function saveTestPreferences() {
+  try {
+    const payload = {
+      selectedSuiteId: state.selectedSuiteId || '',
+      statusFilter: state.testHistoryStatusFilter || 'all',
+      versionFilter: state.testHistoryVersionFilter || 'all',
+      query: state.testHistoryQuery || '',
+    };
+    localStorage.setItem(TEST_PREFS_STORAGE_KEY, JSON.stringify(payload));
+  } catch {
+    // ignore storage quota or privacy-mode errors
+  }
+}
+
+function formatDuration(ms) {
+  if (!ms || ms <= 0) return '-';
+  const sec = Math.round(ms / 1000);
+  if (sec < 60) return `${sec}s`;
+  const min = Math.floor(sec / 60);
+  const remain = sec % 60;
+  return `${min}m ${remain}s`;
+}
+
+function formatDateTime(isoStr) {
+  if (!isoStr) return '-';
+  const date = new Date(isoStr);
+  if (Number.isNaN(date.getTime())) return '-';
+  return date.toLocaleString();
+}
+
+function toMonospaceStatus(status) {
+  if (!status) return '';
+  const map = {
+    running: 'RUNNING',
+    passed: 'PASSED',
+    failed: 'FAILED',
+    timeout: 'TIMEOUT',
+  };
+  return map[status] || String(status).toUpperCase();
+}
+
+function syncTestPolling(running) {
+  if (running) {
+    if (!state.testPollTimer) {
+      state.testPollTimer = setInterval(loadTestsCard, 2000);
+    }
+  } else if (state.testPollTimer) {
+    clearInterval(state.testPollTimer);
+    state.testPollTimer = null;
+  }
+}
+
+function rerenderTestsCardFromState() {
+  if (state.testsSnapshot) {
+    renderTestsCard(state.testsSnapshot, null);
+  }
+}
+
+async function loadTestRunDetail(runId) {
+  if (!runId) return;
+  state.selectedRunId = runId;
+  state.selectedRunLoading = true;
+  state.selectedRunError = '';
+  rerenderTestsCardFromState();
+
+  try {
+    const detail = await fetchJSON(`/api/admin/tests/runs/${encodeURIComponent(runId)}`);
+    state.selectedRunDetail = detail;
+    state.selectedRunError = '';
+  } catch (err) {
+    state.selectedRunDetail = null;
+    state.selectedRunError = String(err?.message || err || 'unknown error');
+  } finally {
+    state.selectedRunLoading = false;
+    rerenderTestsCardFromState();
+  }
+}
+
+function renderTestsCard(data, err) {
+  const body = $('#card-tests-body');
+  if (!body) return;
+
+  if (err) {
+    body.innerHTML = emptyState('⚠', `测试状态加载失败: ${escapeHtml(String(err.message || err))}`);
+    syncTestPolling(false);
+    return;
+  }
+
+  state.testsSnapshot = data;
+
+  const manifest = data?.manifest || {};
+  const suites = Array.isArray(manifest.suites) ? manifest.suites : [];
+  const running = data?.running || null;
+  const latest = data?.latest || null;
+  const history = Array.isArray(data?.history) ? data.history : [];
+  const statusFilter = state.testHistoryStatusFilter || 'all';
+  const versionFilter = state.testHistoryVersionFilter || 'all';
+  const query = (state.testHistoryQuery || '').trim().toLowerCase();
+
+  const selectedId = state.selectedSuiteId
+    || running?.suiteId
+    || manifest.activeSuiteId
+    || suites[0]?.id
+    || '';
+  state.selectedSuiteId = selectedId;
+  saveTestPreferences();
+
+  const automation = data?.automation || null;
+  const autoConfig = automation?.config || {};
+  const autoRuntime = automation?.runtime || {};
+  const autoEnabled = !!autoConfig.enabled;
+  const autoSuiteId = autoConfig.suiteId || selectedId;
+  const autoInterval = Number(autoConfig.intervalMinutes) || 30;
+  const autoSchedulerState = autoRuntime.schedulerState || 'idle';
+  const autoSuiteOptions = suites.map((suite) => {
+    const selected = suite.id === autoSuiteId ? 'selected' : '';
+    const label = `${suite.name} (v${suite.version})`;
+    return `<option value="${escapeHtml(suite.id)}" ${selected}>${escapeHtml(label)}</option>`;
+  }).join('');
+  const autoStatusLabel = autoEnabled ? (autoSchedulerState === 'active' ? 'ACTIVE' : 'PAUSED') : 'OFF';
+  const autoStatusClass = autoEnabled
+    ? (autoSchedulerState === 'active' ? 'test-status-passed' : 'test-status-timeout')
+    : 'test-status-idle';
+  const autoNextRunText = autoRuntime.nextRunAt ? formatDateTime(autoRuntime.nextRunAt) : '未计划';
+  const autoLastAttemptText = autoRuntime.lastAttemptAt ? formatDateTime(autoRuntime.lastAttemptAt) : '暂无';
+  const autoLastRunText = autoRuntime.lastRunId || '暂无';
+  const autoLastErrorText = autoRuntime.lastError || '无';
+
+  const versionOptions = Array.from(new Set(history.map((item) => item.suiteVersion).filter(Boolean)));
+  const filteredHistory = history.filter((item) => {
+    if (statusFilter !== 'all' && item.status !== statusFilter) return false;
+    if (versionFilter !== 'all' && item.suiteVersion !== versionFilter) return false;
+    if (query) {
+      const searchable = `${item.runId} ${item.suiteId} ${item.suiteName} ${item.suiteVersion}`.toLowerCase();
+      if (!searchable.includes(query)) return false;
+    }
+    return true;
+  });
+
+  const completedRuns = filteredHistory.filter(item => item.status !== 'running');
+  const passedCount = completedRuns.filter(item => item.status === 'passed').length;
+  const failedCount = completedRuns.filter(item => item.status === 'failed').length;
+  const timeoutCount = completedRuns.filter(item => item.status === 'timeout').length;
+  const passRate = completedRuns.length > 0 ? `${Math.round((passedCount / completedRuns.length) * 100)}%` : '-';
+  const avgDurationMs = completedRuns.length > 0
+    ? Math.round(completedRuns.reduce((sum, item) => sum + (item.durationMs || 0), 0) / completedRuns.length)
+    : 0;
+  const latestFailed = history.find(item => item.status === 'failed' || item.status === 'timeout');
+
+  if (!state.selectedRunId && filteredHistory.length > 0) {
+    state.selectedRunId = filteredHistory[0].runId;
+  } else if (
+    state.selectedRunId
+    && filteredHistory.length > 0
+    && !filteredHistory.some(item => item.runId === state.selectedRunId)
+  ) {
+    state.selectedRunId = filteredHistory[0].runId;
+    state.selectedRunDetail = null;
+    state.selectedRunError = '';
+  } else if (filteredHistory.length === 0) {
+    state.selectedRunId = '';
+    state.selectedRunDetail = null;
+    state.selectedRunError = '';
+  }
+
+  const suiteOptions = suites.map((suite) => {
+    const selected = suite.id === selectedId ? 'selected' : '';
+    const label = `${suite.name} (v${suite.version})`;
+    return `<option value="${escapeHtml(suite.id)}" ${selected}>${escapeHtml(label)}</option>`;
+  }).join('');
+
+  const latestTitle = latest
+    ? `${latest.suiteName} v${latest.suiteVersion}`
+    : '暂无历史运行';
+  const latestStatus = latest
+    ? `<span class="test-status test-status-${latest.status}">${toMonospaceStatus(latest.status)}</span>`
+    : '<span class="test-status test-status-idle">IDLE</span>';
+  const latestMeta = latest
+    ? `${formatDuration(latest.durationMs)} · ${latest.endedAt ? new Date(latest.endedAt).toLocaleString() : '-'}`
+    : '-';
+
+  const runningLine = running
+    ? `<div class="test-running-line">运行中: ${escapeHtml(running.suiteName)} v${escapeHtml(running.suiteVersion)} · ${formatDuration(running.durationMs)}</div>`
+    : '';
+
+  const output = running?.outputTail || latest?.outputTail || '';
+  const outputBlock = output
+    ? `<pre class="test-log">${escapeHtml(output)}</pre>`
+    : '<div class="test-log-empty">暂无日志输出</div>';
+
+  const autoConfigPanel = `
+    <div class="test-auto-panel">
+      <div class="test-auto-header">
+        <div class="test-auto-title">自动回归策略</div>
+        <span class="test-status ${autoStatusClass}">${escapeHtml(autoStatusLabel)}</span>
+      </div>
+      <div class="test-auto-controls">
+        <label class="test-auto-toggle">
+          <input id="admin-test-auto-enabled" type="checkbox" ${autoEnabled ? 'checked' : ''}>
+          启用自动回归
+        </label>
+        <label>
+          套件
+          <select id="admin-test-auto-suite">
+            ${autoSuiteOptions}
+          </select>
+        </label>
+        <label>
+          间隔(分钟)
+          <input id="admin-test-auto-interval" type="number" min="5" max="1440" step="1" value="${escapeHtml(String(autoInterval))}">
+        </label>
+        <button id="btn-save-auto-tests" class="btn-test-secondary" ${state.autoConfigSaving ? 'disabled' : ''}>
+          ${state.autoConfigSaving ? '保存中…' : '保存自动策略'}
+        </button>
+        <button id="btn-run-auto-now" class="btn-test-secondary" ${running ? 'disabled' : ''}>立即执行策略</button>
+      </div>
+      <div class="test-auto-meta">
+        <span>下次运行: <strong>${escapeHtml(autoNextRunText)}</strong></span>
+        <span>最近触发: <strong>${escapeHtml(autoLastAttemptText)}</strong></span>
+        <span>最近运行ID: <strong>${escapeHtml(autoLastRunText)}</strong></span>
+      </div>
+      <div class="test-auto-error ${autoRuntime.lastError ? 'has-error' : ''}">
+        最近错误: ${escapeHtml(autoLastErrorText)}
+      </div>
+    </div>
+  `;
+
+  const historyHtml = filteredHistory.length === 0
+    ? '<div class="test-history-empty">当前筛选条件下无记录</div>'
+    : filteredHistory.map((item) => `
+      <div class="test-history-row ${item.runId === state.selectedRunId ? 'active' : ''}" data-run-id="${escapeHtml(item.runId)}">
+        <span class="test-history-suite">${escapeHtml(item.suiteName)} v${escapeHtml(item.suiteVersion)}</span>
+        <span class="test-status test-status-${item.status}">${toMonospaceStatus(item.status)}</span>
+        <span class="test-history-duration">${escapeHtml(formatDuration(item.durationMs))}</span>
+        <span class="test-history-time">${escapeHtml(item.endedAt ? new Date(item.endedAt).toLocaleString() : item.startedAt || '-')}</span>
+      </div>
+    `).join('');
+
+  const statusOptions = [
+    { value: 'all', label: '全部状态' },
+    { value: 'passed', label: 'PASSED' },
+    { value: 'failed', label: 'FAILED' },
+    { value: 'timeout', label: 'TIMEOUT' },
+    { value: 'running', label: 'RUNNING' },
+  ];
+  const statusOptionsHtml = statusOptions
+    .map(opt => `<option value="${opt.value}" ${statusFilter === opt.value ? 'selected' : ''}>${opt.label}</option>`)
+    .join('');
+  const versionOptionsHtml = [
+    `<option value="all" ${versionFilter === 'all' ? 'selected' : ''}>全部版本</option>`,
+    ...versionOptions.map(ver => `<option value="${escapeHtml(ver)}" ${versionFilter === ver ? 'selected' : ''}>v${escapeHtml(ver)}</option>`),
+  ].join('');
+
+  let detailBlock = '';
+  if (state.selectedRunId) {
+    if (state.selectedRunLoading) {
+      detailBlock = `
+        <div class="test-detail-panel">
+          <div class="test-detail-title">日志详情 #${escapeHtml(state.selectedRunId)}</div>
+          <div class="test-detail-loading">加载中…</div>
+        </div>`;
+    } else if (state.selectedRunError) {
+      detailBlock = `
+        <div class="test-detail-panel">
+          <div class="test-detail-title">日志详情 #${escapeHtml(state.selectedRunId)}</div>
+          <div class="test-detail-error">加载失败: ${escapeHtml(state.selectedRunError)}</div>
+        </div>`;
+    } else if (state.selectedRunDetail?.info?.runId === state.selectedRunId) {
+      const detail = state.selectedRunDetail;
+      const info = detail.info || {};
+      detailBlock = `
+        <div class="test-detail-panel">
+          <div class="test-detail-title">
+            ${escapeHtml(info.suiteName || '')} v${escapeHtml(info.suiteVersion || '')}
+            · #${escapeHtml(info.runId || '')}
+            · <span class="test-status test-status-${escapeHtml(info.status || 'failed')}">${toMonospaceStatus(info.status || 'failed')}</span>
+          </div>
+          <div class="test-detail-meta">
+            ${escapeHtml(formatDuration(info.durationMs))} · ${escapeHtml(info.endedAt ? new Date(info.endedAt).toLocaleString() : info.startedAt || '-')}
+          </div>
+          <div class="test-detail-actions">
+            <button class="btn-test-rerun-suite" data-suite-id="${escapeHtml(info.suiteId || '')}" ${running ? 'disabled' : ''}>重跑此套件</button>
+            <button class="btn-test-log-download" data-run-id="${escapeHtml(info.runId || '')}">下载日志</button>
+            <button class="btn-test-json-download" data-run-id="${escapeHtml(info.runId || '')}">导出 JSON</button>
+          </div>
+          <pre class="test-detail-log">${escapeHtml(detail.output || '')}</pre>
+        </div>`;
+    }
+  }
+
+  body.innerHTML = `
+    <div class="test-toolbar">
+      <div class="test-toolbar-left">
+        <label for="admin-test-suite-select">测试套件</label>
+        <select id="admin-test-suite-select" ${running ? 'disabled' : ''}>
+          ${suiteOptions}
+        </select>
+        <span class="test-schema">schema v${escapeHtml(String(manifest.schemaVersion || 1))}</span>
+      </div>
+      <button id="btn-run-tests" class="btn-run-tests" ${running ? 'disabled' : ''}>
+        ${running ? '运行中…' : '一键启动测试'}
+      </button>
+    </div>
+    ${runningLine}
+    <div class="test-latest-row">
+      <div class="test-latest-title">${escapeHtml(latestTitle)}</div>
+      <div class="test-latest-status">${latestStatus}</div>
+      <div class="test-latest-meta">${escapeHtml(latestMeta)}</div>
+    </div>
+    ${outputBlock}
+    ${autoConfigPanel}
+    <div class="test-history-title">最近运行记录</div>
+    <div class="test-history-summary">
+      <span class="test-summary-chip">通过率 <strong>${escapeHtml(passRate)}</strong></span>
+      <span class="test-summary-chip">失败 <strong>${failedCount}</strong></span>
+      <span class="test-summary-chip">超时 <strong>${timeoutCount}</strong></span>
+      <span class="test-summary-chip">平均耗时 <strong>${escapeHtml(formatDuration(avgDurationMs))}</strong></span>
+      <span class="test-summary-chip">最近失败 <strong>${escapeHtml(latestFailed ? relativeTime(latestFailed.endedAt || latestFailed.startedAt) : '无')}</strong></span>
+    </div>
+    <div class="test-history-filters">
+      <label>
+        状态
+        <select id="admin-test-filter-status">${statusOptionsHtml}</select>
+      </label>
+      <label>
+        版本
+        <select id="admin-test-filter-version">${versionOptionsHtml}</select>
+      </label>
+      <label class="test-query-label">
+        搜索
+        <input
+          id="admin-test-filter-query"
+          type="text"
+          value="${escapeHtml(state.testHistoryQuery || '')}"
+          placeholder="suite / runId / version"
+        />
+      </label>
+      <button id="admin-test-filter-reset" class="btn-test-filter-reset">重置筛选</button>
+      <span class="test-history-count">显示 ${filteredHistory.length} / ${history.length}</span>
+    </div>
+    <div class="test-history-list">${historyHtml}</div>
+    ${detailBlock}
+  `;
+
+  if (
+    state.selectedRunId
+    && !state.selectedRunLoading
+    && !state.selectedRunError
+    && state.selectedRunDetail?.info?.runId !== state.selectedRunId
+  ) {
+    queueMicrotask(() => {
+      loadTestRunDetail(state.selectedRunId);
+    });
+  }
+
+  syncTestPolling(!!running);
+}
+
+async function loadTestsCard() {
+  try {
+    const data = await fetchJSON('/api/admin/tests');
+    renderTestsCard(data, null);
+  } catch (err) {
+    renderTestsCard(null, err);
+  }
+}
+
+async function runTestsFromMirror(forcedSuiteId) {
+  const btn = $('#btn-run-tests');
+  if (btn) {
+    btn.disabled = true;
+    btn.textContent = '运行中…';
+  }
+
+  try {
+    const suiteId = forcedSuiteId || $('#admin-test-suite-select')?.value || undefined;
+    if (suiteId) state.selectedSuiteId = suiteId;
+    saveTestPreferences();
+    const data = await postJSON('/api/admin/tests/run', { suiteId });
+    renderTestsCard(data, null);
+    if (data?.running?.runId) {
+      await loadTestRunDetail(data.running.runId);
+    }
+  } catch (err) {
+    const body = $('#card-tests-body');
+    if (body) {
+      body.insertAdjacentHTML(
+        'afterbegin',
+        `<div class="test-inline-error">启动失败: ${escapeHtml(String(err.message || err))}</div>`
+      );
+    }
+    await loadTestsCard();
+  }
+}
+
+async function saveAutoRegressionConfig() {
+  if (state.autoConfigSaving) return;
+
+  const enabledInput = $('#admin-test-auto-enabled');
+  const suiteInput = $('#admin-test-auto-suite');
+  const intervalInput = $('#admin-test-auto-interval');
+
+  const enabled = !!enabledInput?.checked;
+  const suiteId = suiteInput?.value || state.selectedSuiteId || '';
+  const intervalMinutes = Number(intervalInput?.value || 0);
+
+  if (!suiteId) {
+    throw new Error('请选择自动回归套件');
+  }
+  if (!Number.isFinite(intervalMinutes) || intervalMinutes < 5 || intervalMinutes > 1440) {
+    throw new Error('自动回归间隔需在 5-1440 分钟');
+  }
+
+  state.autoConfigSaving = true;
+  const saveBtn = $('#btn-save-auto-tests');
+  if (saveBtn) {
+    saveBtn.disabled = true;
+    saveBtn.textContent = '保存中…';
+  }
+
+  try {
+    const snapshot = await postJSON('/api/admin/tests/auto', {
+      enabled,
+      suiteId,
+      intervalMinutes: Math.floor(intervalMinutes),
+    });
+    renderTestsCard(snapshot, null);
+  } finally {
+    state.autoConfigSaving = false;
+    const refreshedBtn = $('#btn-save-auto-tests');
+    if (refreshedBtn) {
+      refreshedBtn.disabled = false;
+      refreshedBtn.textContent = '保存自动策略';
+    }
+  }
+}
+
+// ===== Tab Switching =====
+
+function switchTab(tab) {
+  state.activeTab = tab;
+  $$('.tab-btn').forEach(b => b.classList.toggle('active', b.dataset.tab === tab));
+  $$('.tab-content').forEach(c => c.classList.toggle('active', c.id === `tab-${tab}`));
+
+  // Load data on first visit
+  const loaders = {
+    overview: loadOverview,
+    backlog: loadBacklog,
+    quality: loadQuality,
+    diagnose: loadDiagnose,
+    verify: loadVerify,
+    roadmap: loadRoadmap,
+    telemetry: loadTelemetry,
+  };
+  if (loaders[tab]) loaders[tab]();
+
+  // Auto-refresh only on overview
+  clearInterval(state.refreshTimer);
+  if (tab === 'overview') {
+    state.refreshTimer = setInterval(loadOverview, 15000);
+  }
+}
+
+// ===== Overview Tab =====
+
+async function loadOverview() {
+  try {
+    const [statusRes, qualityRes, testsRes] = await Promise.allSettled([
+      fetchJSON('/api/admin/status'),
+      fetchJSON('/api/admin/quality'),
+      fetchJSON('/api/admin/tests'),
+    ]);
+
+    const status = statusRes.status === 'fulfilled' ? statusRes.value : null;
+    const quality = qualityRes.status === 'fulfilled' ? qualityRes.value : null;
+    const tests = testsRes.status === 'fulfilled' ? testsRes.value : null;
+
+    // Health Score
+    const healthBody = $('#card-health-body');
+    if (quality) {
+      const score = quality.score;
+      const cls = score >= 80 ? 'score-high' : score >= 50 ? 'score-mid' : 'score-low';
+      const checksHtml = quality.checks.map(c =>
+        `<div class="health-check"><span class="dot ${c.ok ? 'ok' : 'fail'}"></span>${escapeHtml(c.name)}: ${escapeHtml(c.detail)}</div>`
+      ).join('');
+      healthBody.innerHTML = `
+        <div class="health-row">
+          <div class="health-score ${cls}">${score}</div>
+          <div class="health-checks">${checksHtml}</div>
+        </div>`;
+    } else {
+      healthBody.innerHTML = emptyState('\u2764', '质量数据加载失败');
+    }
+
+    // Backlog Stats
+    const blBody = $('#card-backlog-stats-body');
+    if (status && status.backlog) {
+      const bl = status.backlog;
+      const bs = bl.byStatus || {};
+      blBody.innerHTML = `
+        <div class="stat-grid">
+          <div class="stat-item"><div class="stat-value">${bl.total}</div><div class="stat-label">总计</div></div>
+          <div class="stat-item"><div class="stat-value">${bs.idea || 0}</div><div class="stat-label">Idea</div></div>
+          <div class="stat-item"><div class="stat-value">${bs.planned || 0}</div><div class="stat-label">Planned</div></div>
+          <div class="stat-item"><div class="stat-value">${bs.developing || 0}</div><div class="stat-label">Dev</div></div>
+          <div class="stat-item"><div class="stat-value">${bs.done || 0}</div><div class="stat-label">Done</div></div>
+        </div>`;
+    } else {
+      blBody.innerHTML = emptyState('\uD83D\uDCCB', '暂无需求');
+    }
+
+    // Wuxing Distribution
+    const wxBody = $('#card-wuxing-body');
+    if (status && status.backlog && status.backlog.byWuxing) {
+      const bw = status.backlog.byWuxing;
+      const total = Object.values(bw).reduce((s, v) => s + v, 0) || 1;
+      const order = ['木', '火', '水', '金', '土'];
+      wxBody.innerHTML = `<div class="wuxing-bars">${order.map(w => {
+        const count = bw[w] || 0;
+        const pct = Math.round(count / total * 100);
+        const info = WUXING_MAP[w];
+        return `<div class="wuxing-row">
+          <span class="wuxing-icon">${info.icon}</span>
+          <span class="wuxing-name">${w}</span>
+          <div class="wuxing-bar-track"><div class="wuxing-bar-fill ${info.cls}" style="width:${pct}%"></div></div>
+          <span class="wuxing-count">${count}</span>
+        </div>`;
+      }).join('')}</div>`;
+    } else {
+      wxBody.innerHTML = emptyState('\u262F', '暂无数据');
+    }
+
+    // Developing
+    const devBody = $('#card-developing-body');
+    if (status && status.developing && status.developing.length > 0) {
+      devBody.innerHTML = status.developing.map(d =>
+        `<div class="dev-item">
+          <span class="dev-id">#${d.id}</span>
+          ${badgeWuxing(d.wuxing)}
+          ${badgePriority(d.priority)}
+          <span class="dev-title">${escapeHtml(d.title)}</span>
+        </div>`
+      ).join('');
+    } else {
+      devBody.innerHTML = emptyState('\uD83D\uDEE0', '无进行中任务');
+    }
+
+    // Milestones
+    const msBody = $('#card-milestones-body');
+    if (status && status.milestones && status.milestones.length > 0) {
+      msBody.innerHTML = status.milestones.map(m =>
+        `<div class="milestone-mini">
+          <span class="badge-status badge-status-${m.status === 'active' ? 'developing' : m.status === 'done' ? 'done' : 'idea'}">${m.status}</span>
+          <span class="milestone-title">${escapeHtml(m.name)}</span>
+          <span class="milestone-percent" style="font-family:var(--font-mono);color:var(--text-muted)">${escapeHtml(m.version)}</span>
+        </div>`
+      ).join('');
+    } else {
+      msBody.innerHTML = emptyState('\uD83C\uDFAF', '暂无里程碑');
+    }
+
+    // Telemetry Summary
+    const tlBody = $('#card-telemetry-summary-body');
+    if (status && status.telemetry) {
+      const tl = status.telemetry;
+      tlBody.innerHTML = `
+        <div class="stat-grid">
+          <div class="stat-item"><div class="stat-value">${tl.totalEvents}</div><div class="stat-label">事件数</div></div>
+          <div class="stat-item"><div class="stat-value">${tl.avgSessionRounds ?? '-'}</div><div class="stat-label">平均轮次</div></div>
+          <div class="stat-item"><div class="stat-value">${tl.topErrors?.length || 0}</div><div class="stat-label">错误类型</div></div>
+        </div>`;
+    } else {
+      tlBody.innerHTML = emptyState('\uD83D\uDCE1', '暂无遥测数据');
+    }
+
+    if (testsRes.status === 'fulfilled') {
+      renderTestsCard(tests, null);
+    } else {
+      renderTestsCard(null, testsRes.reason);
+    }
+
+    $('#last-updated').textContent = new Date().toLocaleTimeString();
+  } catch (err) {
+    console.error('[Overview]', err);
+  }
+}
+
+// ===== Backlog Tab =====
+
+async function loadBacklog() {
+  const list = $('#backlog-list');
+  try {
+    const params = new URLSearchParams();
+    const status = $('#filter-status').value;
+    const priority = $('#filter-priority').value;
+    const wuxing = $('#filter-wuxing').value;
+    const type = $('#filter-type').value;
+    if (status) params.set('status', status);
+    if (priority) params.set('priority', priority);
+    if (wuxing) params.set('wuxing', wuxing);
+    if (type) params.set('type', type);
+
+    const data = await fetchJSON(`/api/admin/backlog?${params}`);
+    if (!data.items || data.items.length === 0) {
+      list.innerHTML = emptyState('\uD83D\uDCCB', '暂无符合条件的需求');
+      return;
+    }
+
+    list.innerHTML = data.items.map(item => `
+      <div class="list-item">
+        <span class="item-id">#${item.id}</span>
+        <div class="item-body">
+          <div class="item-title">${escapeHtml(item.title)}</div>
+          <div class="item-meta">
+            ${badgePriority(item.priority)}
+            ${badgeStatus(item.status)}
+            ${badgeWuxing(item.wuxing)}
+            ${badgeType(item.type)}
+            ${item.targetVersion ? `<span class="badge badge-type">${escapeHtml(item.targetVersion)}</span>` : ''}
+            <span style="color:var(--text-muted);font-size:10px">${relativeTime(item.updatedAt)}</span>
+          </div>
+          ${item.description ? `<div style="font-size:11px;color:var(--text-muted);margin-top:4px">${escapeHtml(item.description.slice(0, 120))}</div>` : ''}
+        </div>
+      </div>
+    `).join('');
+  } catch (err) {
+    list.innerHTML = emptyState('\u26A0', `加载失败: ${escapeHtml(String(err))}`);
+  }
+}
+
+// ===== Quality Tab =====
+
+async function loadQuality() {
+  const container = $('#quality-report');
+  try {
+    const report = await fetchJSON('/api/admin/quality');
+    const score = report.score;
+    const cls = score >= 80 ? 'score-high' : score >= 50 ? 'score-mid' : 'score-low';
+
+    container.innerHTML = `
+      <div class="quality-score-header">
+        <div class="health-score ${cls}">${score}</div>
+        <div>
+          <div style="font-size:14px;font-weight:600">质量评分</div>
+          <div style="font-size:12px;color:var(--text-secondary)">${report.timestamp ? new Date(report.timestamp).toLocaleString() : ''}</div>
+        </div>
+      </div>
+      <div class="quality-checks-grid">
+        ${report.checks.map(c => `
+          <div class="quality-check-card ${c.ok ? 'check-ok' : 'check-fail'}">
+            <div class="quality-check-name">${c.ok ? '\u2705' : '\u274C'} ${escapeHtml(c.name)}</div>
+            <div class="quality-check-detail">${escapeHtml(c.detail)}</div>
+            ${c.value !== undefined ? `<div class="quality-check-value">${c.value}${c.unit ? ' ' + c.unit : ''}</div>` : ''}
+          </div>
+        `).join('')}
+      </div>`;
+  } catch (err) {
+    container.innerHTML = emptyState('\u26A0', `质量检查失败: ${escapeHtml(String(err))}`);
+  }
+}
+
+// ===== Diagnose Tab =====
+
+async function loadDiagnose() {
+  const list = $('#diagnose-list');
+  try {
+    const days = $('#diagnose-days').value;
+    const data = await fetchJSON(`/api/admin/diagnose?days=${days}`);
+    if (!data.findings || data.findings.length === 0) {
+      list.innerHTML = emptyState('\u2705', '未发现问题，系统健康');
+      return;
+    }
+
+    list.innerHTML = data.findings.map(f => `
+      <div class="list-item">
+        <div class="item-body">
+          <div class="item-title">${escapeHtml(f.title)}</div>
+          <div class="item-meta">
+            ${badgeSeverity(f.severity)}
+            ${badgeWuxing(f.wuxing || '木')}
+            <span class="badge badge-type">${escapeHtml(f.rule || f.source || '')}</span>
+          </div>
+          <div style="font-size:11px;color:var(--text-muted);margin-top:4px">${escapeHtml(f.description || f.evidence || '')}</div>
+          ${f.suggestion ? `<div style="font-size:11px;color:var(--accent);margin-top:2px">\uD83D\uDCA1 ${escapeHtml(f.suggestion)}</div>` : ''}
+        </div>
+      </div>
+    `).join('');
+  } catch (err) {
+    list.innerHTML = emptyState('\u26A0', `诊断失败: ${escapeHtml(String(err))}`);
+  }
+}
+
+// ===== Verify Tab =====
+
+async function loadVerify() {
+  const summaryBar = $('#verify-summary');
+  const list = $('#verify-list');
+  try {
+    const report = await fetchJSON('/api/admin/verify');
+    const s = report.summary || {};
+
+    summaryBar.innerHTML = `
+      <div class="verify-stat"><strong>${s.total || 0}</strong> 待验证</div>
+      <div class="verify-stat" style="color:var(--green)"><strong>${s.effective || 0}</strong> 有效</div>
+      <div class="verify-stat" style="color:var(--red)"><strong>${s.ineffective || 0}</strong> 无效</div>
+      <div class="verify-stat" style="color:var(--yellow)"><strong>${s.pending || 0}</strong> 待观察</div>
+      <div class="verify-stat" style="color:var(--text-muted)"><strong>${s.noData || 0}</strong> 无数据</div>
+    `;
+
+    if (!report.results || report.results.length === 0) {
+      list.innerHTML = emptyState('\uD83D\uDD0D', '暂无待验证的需求');
+      return;
+    }
+
+    list.innerHTML = report.results.map(r => `
+      <div class="list-item">
+        <span class="item-id">#${r.itemId}</span>
+        <div class="item-body">
+          <div class="item-title">${escapeHtml(r.title)}</div>
+          <div class="item-meta">
+            ${badgeVerdict(r.verdict)}
+            <span class="badge badge-type">${escapeHtml(r.baselineKey)}</span>
+            ${r.changePercent !== null ? `<span style="font-family:var(--font-mono);font-size:11px;color:${r.changePercent <= 0 ? 'var(--green)' : 'var(--red)'}">${r.changePercent > 0 ? '+' : ''}${r.changePercent}%</span>` : ''}
+          </div>
+          <div style="font-size:11px;color:var(--text-muted);margin-top:4px">${escapeHtml(r.detail)}</div>
+        </div>
+      </div>
+    `).join('');
+  } catch (err) {
+    list.innerHTML = emptyState('\u26A0', `验证失败: ${escapeHtml(String(err))}`);
+  }
+}
+
+// ===== Roadmap Tab =====
+
+async function loadRoadmap() {
+  const container = $('#roadmap-content');
+  try {
+    const roadmap = await fetchJSON('/api/admin/roadmap');
+    if (!roadmap.versions || roadmap.versions.length === 0) {
+      container.innerHTML = emptyState('\uD83D\uDDFA', '暂无路线图数据');
+      return;
+    }
+
+    container.innerHTML = roadmap.versions.map(ver => {
+      const total = ver.stats ? ver.stats.total : (ver.items ? ver.items.length : 0);
+      const done = ver.stats ? ver.stats.done : (ver.items ? ver.items.filter(i => i.status === 'done').length : 0);
+      const pct = ver.stats ? ver.stats.progress : (total > 0 ? Math.round(done / total * 100) : 0);
+
+      return `
+        <div class="roadmap-version">
+          <div class="roadmap-version-header">
+            <span class="roadmap-version-tag">${escapeHtml(ver.version || 'Unversioned')}</span>
+            <div class="roadmap-progress">
+              <div class="roadmap-progress-bar"><div class="roadmap-progress-fill" style="width:${pct}%"></div></div>
+              <span>${done}/${total} (${pct}%)</span>
+            </div>
+          </div>
+          <div class="roadmap-items">
+            ${(ver.items || []).map(item => `
+              <div class="roadmap-item">
+                <span class="roadmap-item-dot ${item.status}"></span>
+                ${badgePriority(item.priority)}
+                ${badgeWuxing(item.wuxing)}
+                <span style="flex:1">${escapeHtml(item.title)}</span>
+                ${badgeStatus(item.status)}
+              </div>
+            `).join('')}
+          </div>
+        </div>`;
+    }).join('');
+  } catch (err) {
+    container.innerHTML = emptyState('\u26A0', `路线图加载失败: ${escapeHtml(String(err))}`);
+  }
+}
+
+// ===== Telemetry Tab =====
+
+async function loadTelemetry() {
+  const container = $('#telemetry-content');
+  try {
+    const days = $('#telemetry-days').value;
+    const summary = await fetchJSON(`/api/admin/telemetry?days=${days}`);
+
+    const cmdEntries = Object.entries(summary.cmdCounts || {});
+    const errors = summary.errors || [];
+
+    container.innerHTML = `
+      <div class="telemetry-grid">
+        <!-- 概览统计 -->
+        <div class="telemetry-card">
+          <div class="telemetry-card-title">概览 (${days}d)</div>
+          <div class="stat-grid">
+            <div class="stat-item"><div class="stat-value">${summary.totalEvents || 0}</div><div class="stat-label">总事件</div></div>
+            <div class="stat-item"><div class="stat-value">${summary.totalSessions || 0}</div><div class="stat-label">会话数</div></div>
+            <div class="stat-item"><div class="stat-value">${summary.avgSessionRounds ?? '-'}</div><div class="stat-label">平均轮次</div></div>
+          </div>
+        </div>
+
+        <!-- 命令统计 -->
+        <div class="telemetry-card">
+          <div class="telemetry-card-title">命令调用</div>
+          ${cmdEntries.length === 0 ? '<div style="color:var(--text-muted);font-size:12px">暂无命令调用记录</div>' :
+            cmdEntries.sort((a, b) => b[1].total - a[1].total).map(([cmd, stats]) => `
+              <div class="cmd-row">
+                <span class="cmd-name">${escapeHtml(cmd)}</span>
+                <span class="cmd-stats">${stats.total} 次${stats.fail > 0 ? ` <span class="cmd-fail">(${stats.fail} fail)</span>` : ''}</span>
+              </div>
+            `).join('')}
+        </div>
+
+        <!-- 错误列表 -->
+        <div class="telemetry-card">
+          <div class="telemetry-card-title">错误记录</div>
+          ${errors.length === 0 ? '<div style="color:var(--text-muted);font-size:12px">无错误记录</div>' :
+            errors.slice(0, 10).map(e => `
+              <div class="error-row">
+                <div class="error-msg">${escapeHtml(e.message || e.error || JSON.stringify(e))}</div>
+                <div class="error-count">${e.count || 1}x</div>
+              </div>
+            `).join('')}
+        </div>
+      </div>`;
+  } catch (err) {
+    container.innerHTML = emptyState('\u26A0', `遥测加载失败: ${escapeHtml(String(err))}`);
+  }
+}
+
+// ===== Init =====
+
+document.addEventListener('DOMContentLoaded', () => {
+  // Tab switching
+  $$('.tab-btn').forEach(btn => {
+    btn.addEventListener('click', () => switchTab(btn.dataset.tab));
+  });
+
+  // Refresh button
+  $('#btn-refresh').addEventListener('click', () => {
+    const btn = $('#btn-refresh');
+    btn.classList.add('spinning');
+    const loaders = {
+      overview: loadOverview,
+      backlog: loadBacklog,
+      quality: loadQuality,
+      diagnose: loadDiagnose,
+      verify: loadVerify,
+      roadmap: loadRoadmap,
+      telemetry: loadTelemetry,
+    };
+    const loader = loaders[state.activeTab];
+    if (loader) {
+      loader().finally(() => btn.classList.remove('spinning'));
+    } else {
+      btn.classList.remove('spinning');
+    }
+  });
+
+  // Mirror tests: run button + suite selector
+  document.addEventListener('click', (e) => {
+    const target = e.target;
+    if (!(target instanceof HTMLElement)) return;
+    if (target.id === 'btn-run-tests') {
+      runTestsFromMirror();
+      return;
+    }
+    if (target.id === 'btn-save-auto-tests') {
+      saveAutoRegressionConfig().catch(async (err) => {
+        const body = $('#card-tests-body');
+        if (body) {
+          body.insertAdjacentHTML(
+            'afterbegin',
+            `<div class="test-inline-error">自动策略保存失败: ${escapeHtml(String(err.message || err))}</div>`
+          );
+        }
+        await loadTestsCard();
+      });
+      return;
+    }
+    if (target.id === 'btn-run-auto-now') {
+      const suiteId = $('#admin-test-auto-suite')?.value;
+      if (suiteId) {
+        state.selectedSuiteId = suiteId;
+        saveTestPreferences();
+      }
+      runTestsFromMirror(suiteId || undefined);
+      return;
+    }
+    if (target.id === 'admin-test-filter-reset') {
+      state.testHistoryStatusFilter = 'all';
+      state.testHistoryVersionFilter = 'all';
+      state.testHistoryQuery = '';
+      state.selectedRunDetail = null;
+      state.selectedRunError = '';
+      saveTestPreferences();
+      rerenderTestsCardFromState();
+      return;
+    }
+    if (target.classList.contains('btn-test-rerun-suite')) {
+      const suiteId = target.dataset.suiteId;
+      if (suiteId) {
+        state.selectedSuiteId = suiteId;
+        saveTestPreferences();
+        runTestsFromMirror(suiteId);
+      }
+      return;
+    }
+    if (target.classList.contains('btn-test-log-download')) {
+      const runId = target.dataset.runId;
+      if (runId) {
+        const url = `/api/admin/tests/runs/${encodeURIComponent(runId)}/download`;
+        window.open(url, '_blank');
+      }
+      return;
+    }
+    if (target.classList.contains('btn-test-json-download')) {
+      const runId = target.dataset.runId;
+      if (runId) {
+        const url = `/api/admin/tests/runs/${encodeURIComponent(runId)}/export`;
+        window.open(url, '_blank');
+      }
+      return;
+    }
+    const row = target.closest('.test-history-row');
+    if (row && row instanceof HTMLElement) {
+      const runId = row.dataset.runId;
+      if (runId) {
+        loadTestRunDetail(runId);
+      }
+    }
+  });
+
+  document.addEventListener('change', (e) => {
+    const target = e.target;
+    if (!(target instanceof HTMLSelectElement)) return;
+    if (target.id === 'admin-test-suite-select') {
+      state.selectedSuiteId = target.value;
+      saveTestPreferences();
+      return;
+    }
+    if (target.id === 'admin-test-filter-status') {
+      state.testHistoryStatusFilter = target.value;
+      state.selectedRunDetail = null;
+      state.selectedRunError = '';
+      saveTestPreferences();
+      rerenderTestsCardFromState();
+      return;
+    }
+    if (target.id === 'admin-test-filter-version') {
+      state.testHistoryVersionFilter = target.value;
+      state.selectedRunDetail = null;
+      state.selectedRunError = '';
+      saveTestPreferences();
+      rerenderTestsCardFromState();
+    }
+  });
+
+  document.addEventListener('input', (e) => {
+    const target = e.target;
+    if (!(target instanceof HTMLInputElement)) return;
+    if (target.id === 'admin-test-filter-query') {
+      const caret = target.selectionStart ?? target.value.length;
+      state.testHistoryQuery = target.value || '';
+      state.selectedRunDetail = null;
+      state.selectedRunError = '';
+      saveTestPreferences();
+      rerenderTestsCardFromState();
+      queueMicrotask(() => {
+        const input = $('#admin-test-filter-query');
+        if (input instanceof HTMLInputElement) {
+          input.focus();
+          const pos = Math.min(caret, input.value.length);
+          input.setSelectionRange(pos, pos);
+        }
+      });
+    }
+  });
+
+  // Filter change handlers
+  ['filter-status', 'filter-priority', 'filter-wuxing', 'filter-type'].forEach(id => {
+    const el = $(`#${id}`);
+    if (el) el.addEventListener('change', loadBacklog);
+  });
+
+  // Diagnose days change
+  const diagDays = $('#diagnose-days');
+  if (diagDays) diagDays.addEventListener('change', loadDiagnose);
+
+  // Telemetry days change
+  const telDays = $('#telemetry-days');
+  if (telDays) telDays.addEventListener('change', loadTelemetry);
+
+  // Keyboard shortcut: R to refresh
+  document.addEventListener('keydown', (e) => {
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT' || e.target.tagName === 'TEXTAREA') return;
+    if (e.key === 'r' || e.key === 'R') {
+      $('#btn-refresh').click();
+    }
+  });
+
+  // Initial load
+  loadTestPreferences();
+  loadOverview();
+});