@winspan/claude-forge 8.13.1 → 8.16.0

package/dist/web/static/index.html

@@ -5,6 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Claude Forge 管理后台</title>
   <script src="vendor/chart.umd.min.js"></script>
+  <!-- Monaco Editor CDN (Phase 4 Feature 1) -->
+  <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js"></script>
   <style>
     /* === Reset & Theme === */
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -351,14 +353,14 @@
       <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
       注入
     </a>
-    <a onclick="nav('live')" id="nav-live">
-      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/></svg>
-      实时
-    </a>
     <div class="nav-section-title">配置</div>
-    <a onclick="nav('rules')" id="nav-rules">
-      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
-      规则
+    <a onclick="nav('ai-config')" id="nav-ai-config">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6M5.6 5.6l4.2 4.2m4.2 4.2l4.2 4.2M1 12h6m6 0h6M5.6 18.4l4.2-4.2m4.2-4.2l4.2-4.2"/></svg>
+      AI 配置
+    </a>
+    <a onclick="nav('routing')" id="nav-routing">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M9 6h9M6 9v9"/></svg>
+      Agent 路由
     </a>
   </aside>
 
@@ -453,23 +455,197 @@
         </div>
       </div>
 
-      <!-- Live -->
-      <div id="page-live" class="page">
-        <div class="toolbar">
-          <span id="live-status" class="badge badge-warn">未连接</span>
-          <button class="btn btn-primary" id="live-btn" onclick="toggleLive()">连接</button>
-          <button class="btn" onclick="document.getElementById('live-log').innerHTML=''">清空</button>
+      <!-- AI Config -->
+      <div id="page-ai-config" class="page">
+        <div class="panel">
+          <div class="panel-header">
+            <span class="panel-title">AI 配置</span>
+            <div style="display:flex;gap:0.5rem">
+              <button class="btn" onclick="testAIConnection()">🔌 测试连接</button>
+              <button class="btn btn-primary" onclick="saveAIConfig()">💾 保存</button>
+            </div>
+          </div>
+          <div class="panel-body">
+            <div style="max-width:600px">
+              <div style="margin-bottom:1rem">
+                <label style="display:block;margin-bottom:0.25rem;font-weight:500;font-size:0.875rem">API Key</label>
+                <div style="display:flex;gap:0.5rem">
+                  <input type="password" id="ai-api-key" class="search-box" style="flex:1" placeholder="sk-...">
+                  <button class="btn" onclick="toggleAPIKeyVisibility()" id="toggle-api-key-btn">👁️ 显示</button>
+                </div>
+              </div>
+              <div style="margin-bottom:1rem">
+                <label style="display:block;margin-bottom:0.25rem;font-weight:500;font-size:0.875rem">Base URL</label>
+                <input type="text" id="ai-base-url" class="search-box" placeholder="https://api.anthropic.com">
+              </div>
+              <div style="margin-bottom:1rem">
+                <label style="display:block;margin-bottom:0.25rem;font-weight:500;font-size:0.875rem">Provider</label>
+                <input type="text" id="ai-provider" class="search-box" value="anthropic" readonly style="background:var(--bg-secondary)">
+              </div>
+              <div style="margin-bottom:1rem">
+                <label style="display:block;margin-bottom:0.25rem;font-weight:500;font-size:0.875rem">Model</label>
+                <div style="display:flex;gap:0.5rem">
+                  <select id="ai-model" class="btn" style="flex:1">
+                    <option value="">加载中...</option>
+                  </select>
+                  <button class="btn" onclick="refreshAIModels()">↻ 刷新模型列表</button>
+                </div>
+              </div>
+              <div id="ai-config-success" style="margin-top:1rem;padding:0.75rem;background:var(--primary);color:white;border-radius:var(--radius-sm);display:none"></div>
+              <div id="ai-config-error" style="margin-top:1rem;padding:0.75rem;background:var(--red);color:white;border-radius:var(--radius-sm);display:none"></div>
+              <div style="margin-top:1rem;padding:0.75rem;background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:0.875rem;color:var(--text-muted)">
+                <strong>提示：</strong>配置保存后需要重启 daemon 才能生效。<br>
+                运行 <code style="background:var(--bg-card);padding:0.125rem 0.375rem;border-radius:4px">cf daemon stop && cf daemon start</code>
+              </div>
+            </div>
+          </div>
         </div>
-        <div class="live-log" id="live-log"></div>
       </div>
 
-      <!-- Rules -->
-      <div id="page-rules" class="page">
-        <div class="toolbar">
-          <input class="search-box" id="rules-search" placeholder="搜索规则..." oninput="filterRules()">
+      <!-- Agent Routing -->
+      <div id="page-routing" class="page">
+        <div class="toolbar" style="display:flex;gap:0.5rem;align-items:center">
+          <div style="display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden">
+            <button class="btn" id="routing-tab-overview" onclick="routingTab('overview')" style="border-radius:0;border:none">总览</button>
+            <button class="btn" id="routing-tab-events" onclick="routingTab('events')" style="border-radius:0;border:none">决策明细</button>
+            <button class="btn" id="routing-tab-refusals" onclick="routingTab('refusals')" style="border-radius:0;border:none">违抗聚合</button>
+            <button class="btn" id="routing-tab-editor" onclick="routingTab('editor')" style="border-radius:0;border:none">路由调优</button>
+            <button class="btn" id="routing-tab-experiments" onclick="routingTab('experiments')" style="border-radius:0;border:none">A/B 测试</button>
+            <button class="btn" id="routing-tab-recommendations" onclick="routingTab('recommendations')" style="border-radius:0;border:none">规则推荐</button>
+          </div>
+          <div style="flex:1"></div>
+          <select class="btn" id="routing-window" onchange="loadRouting()" style="display:none">
+            <option value="24">近 24 小时</option>
+            <option value="168" selected>近 7 天</option>
+            <option value="720">近 30 天</option>
+          </select>
+        </div>
+
+        <!-- Overview subpanel -->
+        <div id="routing-sub-overview">
+          <div class="cards" id="routing-cards"></div>
+          <div class="grid-2" style="margin-top:1.25rem">
+            <div class="panel">
+              <div class="panel-header"><span class="panel-title">按 Agent 听话率</span></div>
+              <div class="panel-body" id="routing-by-agent"></div>
+            </div>
+            <div class="panel">
+              <div class="panel-header"><span class="panel-title">注入话术版本 A/B</span></div>
+              <div class="panel-body" id="routing-by-version"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Events subpanel -->
+        <div id="routing-sub-events" style="display:none">
+          <div class="toolbar" style="display:flex;gap:0.5rem">
+            <select class="btn" id="routing-filter-obeyed" onchange="loadRoutingEvents()">
+              <option value="">全部状态</option>
+              <option value="forced">已强路由</option>
+              <option value="1">遵守 (obeyed)</option>
+              <option value="0">违抗 (refused)</option>
+              <option value="null">待判定/未路由</option>
+            </select>
+            <input class="search-box" id="routing-filter-agent" placeholder="按 agent 名过滤..." oninput="loadRoutingEvents()">
+          </div>
+          <div class="panel">
+            <table>
+              <thead><tr><th>时间</th><th>Agent</th><th>状态</th><th>首个工具</th><th>Prompt 摘要</th></tr></thead>
+              <tbody id="routing-events-tbody"></tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Refusals subpanel -->
+        <div id="routing-sub-refusals" style="display:none">
+          <div class="panel">
+            <div class="panel-header"><span class="panel-title">违抗聚合 (taskType × agent)</span></div>
+            <div class="panel-body" id="routing-refusals"></div>
+          </div>
         </div>
-        <div class="panel" id="rules-panel">
-          <div id="rules-list"></div>
+
+        <!-- Editor subpanel (Phase 3 Feature 2, upgraded to Monaco in Phase 4 Feature 1) -->
+        <div id="routing-sub-editor" style="display:none">
+          <div class="panel">
+            <div class="panel-header">
+              <span class="panel-title">路由配置编辑器</span>
+              <div style="display:flex;gap:0.5rem">
+                <button class="btn" onclick="loadRoutingConfig()">↻ 重新加载</button>
+                <button class="btn btn-primary" onclick="saveRoutingConfig()">💾 保存</button>
+              </div>
+            </div>
+            <div class="panel-body">
+              <div style="margin-bottom:0.5rem;font-size:0.875rem;color:var(--text-dim)">
+                <span id="routing-config-source"></span>
+                <span id="routing-config-path" style="font-family:monospace;margin-left:0.5rem"></span>
+              </div>
+              <div id="routing-config-editor" style="width:100%;height:500px;border:1px solid var(--border);border-radius:var(--radius-sm)"></div>
+              <div id="routing-config-error" style="margin-top:0.5rem;padding:0.75rem;background:var(--danger,#dc2626);color:white;border-radius:var(--radius-sm);display:none"></div>
+              <div id="routing-config-success" style="margin-top:0.5rem;padding:0.75rem;background:var(--primary);color:white;border-radius:var(--radius-sm);display:none"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Experiments subpanel (Phase 5 Feature 1) -->
+        <div id="routing-sub-experiments" style="display:none">
+          <div class="panel" style="margin-bottom:1rem">
+            <div class="panel-header">
+              <span class="panel-title">实验配置</span>
+              <div style="display:flex;gap:0.5rem">
+                <button class="btn" onclick="loadExperimentsConfig()">↻ 重新加载</button>
+                <button class="btn btn-primary" onclick="saveExperimentsConfig()">💾 保存</button>
+              </div>
+            </div>
+            <div class="panel-body">
+              <div style="margin-bottom:0.5rem;font-size:0.875rem;color:var(--text-dim)">
+                <span id="experiments-config-source"></span>
+                <span id="experiments-config-path" style="font-family:monospace;margin-left:0.5rem"></span>
+              </div>
+              <div id="experiments-config-editor" style="width:100%;height:400px;border:1px solid var(--border);border-radius:var(--radius-sm)"></div>
+              <div id="experiments-config-error" style="margin-top:0.5rem;padding:0.75rem;background:var(--danger,#dc2626);color:white;border-radius:var(--radius-sm);display:none"></div>
+              <div id="experiments-config-success" style="margin-top:0.5rem;padding:0.75rem;background:var(--primary);color:white;border-radius:var(--radius-sm);display:none"></div>
+            </div>
+          </div>
+          <div class="panel">
+            <div class="panel-header">
+              <span class="panel-title">分析对比</span>
+              <div style="display:flex;gap:0.5rem">
+                <button class="btn" onclick="loadExperimentsAnalysis()">↻ 刷新分析</button>
+              </div>
+            </div>
+            <div class="panel-body">
+              <div id="experiments-summary" style="margin-bottom:1rem;font-size:0.875rem"></div>
+              <div id="experiments-analysis"></div>
+              <div id="experiments-winner" style="margin-top:1rem;display:none"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Recommendations subpanel (Phase 5 Feature 3) -->
+        <div id="routing-sub-recommendations" style="display:none">
+          <div class="panel">
+            <div class="panel-header">
+              <span class="panel-title">规则推荐</span>
+              <div style="display:flex;gap:0.5rem;align-items:center">
+                <label style="font-size:0.875rem;color:var(--text-dim)">窗口
+                  <select class="btn" id="recommendations-days" onchange="loadRecommendations()">
+                    <option value="1">1 天</option>
+                    <option value="7" selected>7 天</option>
+                    <option value="30">30 天</option>
+                  </select>
+                </label>
+                <button class="btn" onclick="loadRecommendations()">↻ 刷新</button>
+              </div>
+            </div>
+            <div class="panel-body">
+              <div style="margin-bottom:0.75rem;font-size:0.875rem;color:var(--text-dim)">
+                基于历史决策分析，对比"当前路由规则"与"Claude 实际使用的 agent"，
+                推荐更贴近实际行为的路由。<br>
+                样本阈值：单类任务 ≥ 10 条；挑战者使用率 &gt; 50%。
+              </div>
+              <div id="recommendations-list"></div>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -494,8 +670,7 @@
 
 <script>
 const API = '';
-let allEvents = [], allSessions = [], allInjections = [], allRules = [];
-let liveSource = null;
+let allEvents = [], allSessions = [], allInjections = [];
 let charts = {};
 
 // === Navigation ===
@@ -506,15 +681,15 @@ function nav(page) {
   const pageEl = document.getElementById('page-' + page);
   if (navEl) navEl.classList.add('active');
   if (pageEl) pageEl.classList.add('active');
-  const titles = { dashboard:'仪表盘', sessions:'会话', events:'事件', injections:'注入', live:'实时', rules:'规则' };
+  const titles = { dashboard:'仪表盘', sessions:'会话', events:'事件', injections:'注入', 'ai-config':'AI 配置', routing:'Agent 路由' };
   document.getElementById('topbar-title').textContent = titles[page] || page;
   closeDrawer();
   if (page === 'dashboard') loadDashboard();
   else if (page === 'sessions') loadSessions();
   else if (page === 'events') loadEvents();
   else if (page === 'injections') loadInjections();
-  else if (page === 'rules') loadRules();
-  else if (page === 'live' && !liveSource) toggleLive();
+  else if (page === 'ai-config') loadAIConfig();
+  else if (page === 'routing') loadRouting();
 }
 
 function refreshPage() {
@@ -648,41 +823,6 @@ function renderToolChart(data) {
   });
 }
 
-// === Live ===
-function toggleLive() {
-  if (liveSource) {
-    liveSource.close(); liveSource = null;
-    document.getElementById('live-status').textContent = '未连接';
-    document.getElementById('live-status').className = 'badge badge-warn';
-    document.getElementById('live-btn').textContent = '连接';
-    document.getElementById('live-btn').className = 'btn btn-primary';
-    return;
-  }
-  liveSource = new EventSource(API + '/api/events/stream');
-  document.getElementById('live-status').textContent = '实时中';
-  document.getElementById('live-status').className = 'badge badge-live';
-  document.getElementById('live-btn').textContent = '断开连接';
-  document.getElementById('live-btn').className = 'btn';
-  liveSource.onmessage = function(ev) {
-    try {
-      const e = JSON.parse(ev.data);
-      if (e.type === 'connected') return;
-      const log = document.getElementById('live-log');
-      const line = document.createElement('div');
-      line.className = 'live-log-line';
-      const tool = e.tool_name ? `<span style="color:#93c5fd">${e.tool_name}</span>` : '';
-      const detail = (e.user_prompt || e.tool_input?.command || e.tool_input?.file_path || '').toString().slice(0, 60);
-      line.innerHTML = `<span style="color:#64748b">${fmtTime(e.timestamp)}</span> ${badgeHook(e.hook_type)} ${tool} <span style="color:#cbd5e1">${detail}</span>`;
-      log.appendChild(line);
-      log.scrollTop = log.scrollHeight;
-    } catch {}
-  };
-  liveSource.onerror = function() {
-    document.getElementById('live-status').textContent = '连接错误';
-    document.getElementById('live-status').className = 'badge badge-block';
-  };
-}
-
 // === Sessions ===
 function sessionListItem(s) {
   const prompt = (s.first_prompt || '(无提示词)').slice(0, 60);
@@ -932,31 +1072,754 @@ function openInjDrawer(inj) {
 }
 
 // === Rules ===
-async function loadRules() {
-  document.getElementById('rules-list').innerHTML = loading();
+
+// === Agent Routing ===
+let routingCurrentTab = 'overview';
+
+function routingTab(tab) {
+  routingCurrentTab = tab;
+  ['overview', 'events', 'refusals', 'editor', 'experiments', 'recommendations'].forEach(t => {
+    const btn = document.getElementById('routing-tab-' + t);
+    const sub = document.getElementById('routing-sub-' + t);
+    if (btn) btn.classList.toggle('active', t === tab);
+    if (sub) sub.style.display = (t === tab) ? '' : 'none';
+  });
+
+  // Show/hide time window selector (not needed for editor/experiments/recommendations tabs)
+  const windowSelector = document.getElementById('routing-window');
+  if (windowSelector) {
+    windowSelector.style.display =
+      (tab === 'editor' || tab === 'experiments' || tab === 'recommendations') ? 'none' : '';
+  }
+
+  loadRouting();
+}
+
+async function loadRouting() {
+  if (routingCurrentTab === 'overview') return loadRoutingOverview();
+  if (routingCurrentTab === 'events') return loadRoutingEvents();
+  if (routingCurrentTab === 'refusals') return loadRoutingRefusals();
+  if (routingCurrentTab === 'editor') return loadRoutingConfig();
+  if (routingCurrentTab === 'experiments') {
+    await loadExperimentsConfig();
+    return loadExperimentsAnalysis();
+  }
+  if (routingCurrentTab === 'recommendations') return loadRecommendations();
+}
+
+// === AI Config ===
+let aiApiKeyMasked = true;
+let aiApiKeyOriginal = '';
+
+async function loadAIConfig() {
   try {
-    const res = await fetch(API + '/api/rules');
-    allRules = await res.json();
-    renderRules(allRules);
-  } catch {
-    document.getElementById('rules-list').innerHTML = empty('加载规则失败');
+    const r = await fetch(API + '/api/config/ai');
+    if (!r.ok) throw new Error('Failed to load config');
+    const data = await r.json();
+
+    document.getElementById('ai-api-key').value = data.api_key || '';
+    document.getElementById('ai-base-url').value = data.base_url || '';
+    document.getElementById('ai-provider').value = data.provider || 'anthropic';
+    aiApiKeyOriginal = data.api_key || '';
+    aiApiKeyMasked = true;
+    document.getElementById('ai-api-key').type = 'password';
+    document.getElementById('toggle-api-key-btn').textContent = '👁️ 显示';
+
+    // Pre-fill model dropdown with current model
+    const modelSelect = document.getElementById('ai-model');
+    modelSelect.innerHTML = `<option value="${data.model}">${data.model}</option>`;
+  } catch (err) {
+    showAIError(`加载配置失败: ${err.message}`);
+  }
+}
+
+function toggleAPIKeyVisibility() {
+  const input = document.getElementById('ai-api-key');
+  const btn = document.getElementById('toggle-api-key-btn');
+  if (input.type === 'password') {
+    input.type = 'text';
+    btn.textContent = '🙈 隐藏';
+  } else {
+    input.type = 'password';
+    btn.textContent = '👁️ 显示';
+  }
+}
+
+async function refreshAIModels() {
+  const modelSelect = document.getElementById('ai-model');
+  const currentValue = modelSelect.value;
+  modelSelect.innerHTML = '<option value="">加载中...</option>';
+  try {
+    const r = await fetch(API + '/api/ai/models');
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({ error: r.statusText }));
+      throw new Error(err.error || r.statusText);
+    }
+    const data = await r.json();
+    const models = data.data || [];
+    if (models.length === 0) {
+      modelSelect.innerHTML = '<option value="">无可用模型</option>';
+      showAIError('未找到可用模型');
+      return;
+    }
+    modelSelect.innerHTML = models.map(m => {
+      const selected = m.id === currentValue ? 'selected' : '';
+      return `<option value="${m.id}" ${selected}>${m.id}</option>`;
+    }).join('');
+    showAISuccess(`已加载 ${models.length} 个模型`);
+  } catch (err) {
+    modelSelect.innerHTML = `<option value="${currentValue}">${currentValue}</option>`;
+    showAIError(`加载模型列表失败: ${err.message}`);
+  }
+}
+
+async function saveAIConfig() {
+  const apiKeyInput = document.getElementById('ai-api-key').value;
+  const baseUrl = document.getElementById('ai-base-url').value;
+  const provider = document.getElementById('ai-provider').value;
+  const model = document.getElementById('ai-model').value;
+
+  const body = { base_url: baseUrl, provider, model };
+
+  // Only send api_key if user changed it (not the masked placeholder)
+  if (apiKeyInput && apiKeyInput !== aiApiKeyOriginal && !apiKeyInput.includes('***')) {
+    body.api_key = apiKeyInput;
+  }
+
+  try {
+    const r = await fetch(API + '/api/config/ai', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    });
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({ error: r.statusText }));
+      throw new Error(err.error || r.statusText);
+    }
+    showAISuccess('✓ 保存成功！重启 daemon 后生效');
+    loadAIConfig();
+  } catch (err) {
+    showAIError(`保存失败: ${err.message}`);
+  }
+}
+
+async function testAIConnection() {
+  showAISuccess('正在测试连接...');
+  try {
+    // Use the /api/ai/models endpoint as a connectivity test (less costly than /messages)
+    const r = await fetch(API + '/api/ai/models');
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({ error: r.statusText }));
+      throw new Error(err.error || r.statusText);
+    }
+    const data = await r.json();
+    const count = (data.data || []).length;
+    showAISuccess(`✓ 连接成功！上游返回 ${count} 个模型`);
+  } catch (err) {
+    showAIError(`连接失败: ${err.message}`);
+  }
+}
+
+function showAISuccess(msg) {
+  const el = document.getElementById('ai-config-success');
+  const errEl = document.getElementById('ai-config-error');
+  el.textContent = msg;
+  el.style.display = 'block';
+  errEl.style.display = 'none';
+  setTimeout(() => { el.style.display = 'none'; }, 5000);
+}
+
+function showAIError(msg) {
+  const el = document.getElementById('ai-config-error');
+  const okEl = document.getElementById('ai-config-success');
+  el.textContent = msg;
+  el.style.display = 'block';
+  okEl.style.display = 'none';
+}
+
+function routingWindow() {
+  const el = document.getElementById('routing-window');
+  return el ? el.value : '168';
+}
+
+function pct(n) { return n == null ? '—' : (n * 100).toFixed(1) + '%'; }
+function ms(n) { return n == null ? '—' : n + 'ms'; }
+
+async function loadRoutingOverview() {
+  try {
+    const r = await fetch(API + '/api/routing/stats?window=' + routingWindow());
+    const data = await r.json();
+
+    const statusColor =
+      data.obedienceRate == null ? 'badge-info' :
+      data.obedienceRate >= 0.8 ? 'badge-allow' :
+      data.obedienceRate >= 0.6 ? 'badge-warn' : 'badge-block';
+
+    document.getElementById('routing-cards').innerHTML = [
+      card('事件总数', data.total),
+      card('强路由次数', data.forced),
+      card('听话率', pct(data.obedienceRate), statusColor),
+      card('违抗率', pct(data.refusalRate)),
+      card('兜底比例', pct(data.fallbackRate)),
+      card('AI 分类 p95', ms(data.latency.p95)),
+    ].join('');
+
+    const byAgent = Object.entries(data.byAgent || {})
+      .sort((a, b) => b[1].total - a[1].total);
+    document.getElementById('routing-by-agent').innerHTML = byAgent.length === 0
+      ? empty('暂无数据')
+      : '<table><thead><tr><th>Agent</th><th>总数</th><th>遵守</th><th>违抗</th><th>未判定</th><th>听话率</th></tr></thead><tbody>'
+        + byAgent.map(([name, b]) => {
+            const rate = (b.obeyed + b.refused) === 0 ? null : b.obeyed / (b.obeyed + b.refused);
+            return '<tr><td style="font-family:monospace">' + name + '</td><td>' + b.total + '</td>'
+              + '<td style="color:var(--primary)">' + b.obeyed + '</td>'
+              + '<td style="color:var(--danger,#dc2626)">' + b.refused + '</td>'
+              + '<td style="color:var(--text-dim)">' + b.unknown + '</td>'
+              + '<td>' + pct(rate) + '</td></tr>';
+          }).join('')
+        + '</tbody></table>';
+
+    const byVersion = Object.entries(data.byVersion || {});
+    document.getElementById('routing-by-version').innerHTML = byVersion.length === 0
+      ? empty('暂无版本数据')
+      : '<table><thead><tr><th>版本</th><th>总数</th><th>遵守</th><th>听话率</th></tr></thead><tbody>'
+        + byVersion.map(([v, b]) => '<tr><td style="font-family:monospace;font-size:0.8rem">' + v
+          + '</td><td>' + b.total + '</td><td>' + b.obeyed + '</td><td>'
+          + pct(b.total === 0 ? null : b.obeyed / b.total) + '</td></tr>').join('')
+        + '</tbody></table>';
+  } catch (err) {
+    document.getElementById('routing-cards').innerHTML = empty('加载失败: ' + err.message);
   }
 }
 
-function renderRules(list) {
-  document.getElementById('rules-list').innerHTML = list.length === 0 ? empty('未找到规则') : list.map(r => '<div class="list-item fade-in" onclick="openRuleDrawer(' + JSON.stringify(r).replace(/"/g,'&quot;') + ')"><div style="flex:1;min-width:0"><div style="font-size:0.875rem;font-weight:500;margin-bottom:2px">' + (r.name || r.id) + '</div><div style="font-size:0.75rem;color:var(--text-dim)">' + (r.description || '') + '</div></div><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="color:var(--text-dim);flex-shrink:0"><polyline points="9 18 15 12 9 6"/></svg></div>').join('');
+function card(label, value, color) {
+  return '<div class="panel" style="padding:1rem">'
+    + '<div style="font-size:0.75rem;color:var(--text-dim);margin-bottom:0.25rem">' + label + '</div>'
+    + '<div style="font-size:1.5rem;font-weight:600' + (color ? ';color:var(--primary)' : '') + '">' + value + '</div>'
+    + '</div>';
 }
 
-function filterRules() {
-  const q = document.getElementById('rules-search').value.toLowerCase();
-  renderRules(allRules.filter(r => (r.name||'').toLowerCase().includes(q) || (r.description||'').toLowerCase().includes(q)));
+async function loadRoutingEvents() {
+  try {
+    const obeyed = document.getElementById('routing-filter-obeyed')?.value || '';
+    const agent = document.getElementById('routing-filter-agent')?.value || '';
+    const params = new URLSearchParams({ limit: '100' });
+    // 'forced' is a client-side filter: keep is_forced=1 rows regardless of obeyed.
+    if (obeyed !== '' && obeyed !== 'forced') params.set('obeyed', obeyed);
+    if (agent) params.set('agent', agent);
+    const r = await fetch(API + '/api/routing/events?' + params.toString());
+    let rows = await r.json();
+    if (obeyed === 'forced') rows = rows.filter(e => e.is_forced === 1);
+    const tbody = document.getElementById('routing-events-tbody');
+    if (!rows || rows.length === 0) {
+      tbody.innerHTML = '<tr><td colspan="5">' + empty('暂无路由事件') + '</td></tr>';
+      return;
+    }
+    tbody.innerHTML = rows.map(e => {
+      let status;
+      if (!e.is_forced) {
+        status = '<span class="badge" style="background:var(--bg-secondary);color:var(--text-dim)">未路由</span>';
+      } else if (e.obeyed === 1) {
+        status = '<span class="badge badge-allow">遵守</span>';
+      } else if (e.obeyed === 0) {
+        status = '<span class="badge badge-block">违抗</span>';
+      } else {
+        status = '<span class="badge badge-info">未判定</span>';
+      }
+      const ts = new Date(e.ts).toLocaleString('zh-CN', { month:'2-digit', day:'2-digit', hour:'2-digit', minute:'2-digit' });
+      return '<tr onclick="openRoutingEventDrawer(' + JSON.stringify(e).replace(/"/g,'&quot;') + ')">'
+        + '<td style="color:var(--text-dim);font-size:0.8rem">' + ts + '</td>'
+        + '<td style="font-family:monospace">' + (e.routed_to_name || '—') + '</td>'
+        + '<td>' + status + '</td>'
+        + '<td style="font-size:0.8rem;color:var(--text-dim)">' + (e.first_tool_name || '—') + '</td>'
+        + '<td style="font-size:0.8rem">' + (e.prompt || '').slice(0, 80) + '</td></tr>';
+    }).join('');
+  } catch (err) {
+    document.getElementById('routing-events-tbody').innerHTML = '<tr><td colspan="5">' + empty('加载失败: ' + err.message) + '</td></tr>';
+  }
 }
 
-function openRuleDrawer(r) {
-  let html = '<div class="detail-section"><div class="detail-label">名称</div><div class="detail-value" style="font-weight:600">' + (r.name || '—') + '</div></div>';
-  html += '<div class="detail-section"><div class="detail-label">描述</div><div class="detail-value">' + (r.description || '—') + '</div></div>';
-  if (r.stats) html += '<div class="detail-section"><div class="detail-label">统计</div><div class="detail-value">触发 ' + (r.stats.totalTriggers || 0) + ' 次 | 阻断 ' + (r.stats.blockCount || 0) + ' 次 | 警告 ' + (r.stats.warnCount || 0) + ' 次</div></div>';
-  openDrawer(r.name || '规则', html);
+function openRoutingEventDrawer(e) {
+  let intent = {};
+  try { intent = JSON.parse(e.intent_json || '{}'); } catch { /* ignore */ }
+  let chain = [];
+  try { chain = JSON.parse(e.downstream_task_chain || '[]'); } catch { /* ignore */ }
+  const html = [
+    '<div style="margin-bottom:1rem"><div style="font-size:0.75rem;color:var(--text-dim)">Prompt</div>',
+    '<div style="white-space:pre-wrap;font-size:0.875rem">' + (e.prompt || '—') + '</div></div>',
+    '<div style="margin-bottom:1rem"><div style="font-size:0.75rem;color:var(--text-dim)">Intent</div>',
+    '<pre style="font-size:0.75rem;background:var(--bg-secondary);padding:0.5rem;border-radius:4px;overflow:auto">'
+      + JSON.stringify(intent, null, 2) + '</pre></div>',
+    '<div style="margin-bottom:1rem"><div style="font-size:0.75rem;color:var(--text-dim)">路由</div>',
+    '<div>type=<b>' + (e.routed_to_type || '—') + '</b>, name=<b>' + (e.routed_to_name || '—')
+      + '</b>, is_forced=' + (e.is_forced ? 'yes' : 'no') + '</div></div>',
+    '<div style="margin-bottom:1rem"><div style="font-size:0.75rem;color:var(--text-dim)">判定</div>',
+    '<div>obeyed=<b>' + (e.obeyed === null || e.obeyed === undefined ? 'null' : e.obeyed)
+      + '</b>, first_tool=' + (e.first_tool_name || '—') + '</div></div>',
+    chain.length > 0 ? '<div style="margin-bottom:1rem"><div style="font-size:0.75rem;color:var(--text-dim)">下游 Task 链</div><code>'
+      + chain.join(' → ') + '</code></div>' : '',
+    e.refusal_reason ? '<div style="margin-bottom:1rem"><div style="font-size:0.75rem;color:var(--text-dim)">违抗原因</div>'
+      + '<div style="padding:0.5rem;background:var(--bg-secondary);border-left:3px solid var(--danger,#dc2626)">'
+      + e.refusal_reason + '</div></div>' : '',
+    '<div style="font-size:0.75rem;color:var(--text-dim)">classification_ms=' + (e.classification_ms || '—')
+      + ' · fallback_used=' + (e.fallback_used ? 'yes' : 'no')
+      + ' · injection_version=' + (e.injection_version || '—') + '</div>',
+  ].join('');
+  openDrawer('路由事件 #' + e.id, html);
+}
+
+async function loadRoutingRefusals() {
+  try {
+    // Load refusals, violations, and rule-states in parallel.
+    const [refusalsRes, violationsRes, rulesRes] = await Promise.all([
+      fetch(API + '/api/routing/refusals?window=' + routingWindow()),
+      fetch(API + '/api/routing/violations?window=' + routingWindow()),
+      fetch(API + '/api/routing/rule-states'),
+    ]);
+    const refusalsData = await refusalsRes.json();
+    const violationsData = await violationsRes.json();
+    const ruleStatesData = await rulesRes.json();
+    const disabledMap = new Map();
+    (ruleStatesData.ruleStates || []).forEach(s => {
+      disabledMap.set(s.task_type + '__' + s.agent, s);
+    });
+
+    const container = document.getElementById('routing-refusals');
+
+    // Show violations alerts first (Phase 3 Feature 3)
+    let html = '';
+    if (violationsData.violations && violationsData.violations.length > 0) {
+      const criticalViolations = violationsData.violations.filter(v => v.severity === 'critical' || v.severity === 'high');
+      if (criticalViolations.length > 0) {
+        html += '<div style="margin-bottom:1rem;padding:1rem;background:var(--danger,#dc2626);color:white;border-radius:var(--radius-sm)">';
+        html += '<div style="font-weight:600;margin-bottom:0.5rem">⚠️ 检测到 ' + criticalViolations.length + ' 个高风险违抗模式</div>';
+        html += '<div style="font-size:0.875rem">以下路由规则的违抗率过高，建议调整或禁用：</div>';
+        html += '<ul style="margin:0.5rem 0 0 1.5rem;padding:0">';
+        criticalViolations.forEach(v => {
+          html += '<li style="margin-bottom:0.25rem"><code>' + v.taskType + '</code> → <code>' + v.agent + '</code> ';
+          html += '(违抗率 ' + (v.refusalRate * 100).toFixed(0) + '%, ' + v.refusals + '/' + v.totalAttempts + ' 次)</li>';
+        });
+        html += '</ul></div>';
+      }
+
+      // Show all violations with severity badges
+      html += '<div style="margin-bottom:1rem"><div style="font-weight:600;margin-bottom:0.5rem">违抗模式分析</div>';
+      violationsData.violations.forEach(v => {
+        const severityColor = {
+          critical: 'background:#dc2626;color:white',
+          high: 'background:#f59e0b;color:white',
+          medium: 'background:#3b82f6;color:white',
+          low: 'background:var(--bg-secondary);color:var(--text-dim)',
+        }[v.severity];
+        const severityLabel = { critical: '严重', high: '高', medium: '中', low: '低' }[v.severity];
+
+        html += '<details style="margin-bottom:0.5rem;border:1px solid var(--border);border-radius:4px;padding:0.5rem">';
+        html += '<summary style="cursor:pointer;display:flex;gap:0.5rem;align-items:center">';
+        html += '<span style="padding:0.25rem 0.5rem;border-radius:4px;font-size:0.75rem;font-weight:600;' + severityColor + '">' + severityLabel + '</span>';
+        html += '<code>' + v.taskType + '</code> → <code>' + v.agent + '</code>';
+        const state = disabledMap.get(v.taskType + '__' + v.agent);
+        if (state && state.disabled === 1) {
+          const tag = state.auto_disabled === 1 ? '自动禁用' : '手动禁用';
+          html += '<span style="padding:0.25rem 0.5rem;border-radius:4px;font-size:0.75rem;background:var(--text-dim);color:white">' + tag + '</span>';
+        }
+        html += '<span style="margin-left:auto;font-size:0.875rem;color:var(--text-dim)">违抗率 ' + (v.refusalRate * 100).toFixed(0) + '% (' + v.refusals + '/' + v.totalAttempts + ')</span>';
+        const isDisabled = state && state.disabled === 1;
+        const btnLabel = isDisabled ? '启用' : '禁用';
+        html += '<button class="btn" style="margin-left:0.5rem;padding:0.25rem 0.5rem;font-size:0.75rem" onclick="event.preventDefault();event.stopPropagation();toggleRuleState(\'' + v.taskType + '\', \'' + v.agent + '\', ' + (!isDisabled) + ')">' + btnLabel + '</button>';
+        html += '</summary>';
+        html += '<div style="margin-top:0.5rem;padding:0.5rem;background:var(--bg-secondary);border-radius:4px;font-size:0.875rem">';
+        html += '<div style="margin-bottom:0.5rem">最近 5 次尝试中违抗 ' + v.recentRefusals + ' 次</div>';
+        if (v.samples.length > 0) {
+          html += '<div style="font-weight:600;margin-bottom:0.25rem">样例：</div><ul style="margin:0;padding:0 0 0 1rem">';
+          v.samples.forEach(s => {
+            html += '<li style="margin-bottom:0.5rem">';
+            html += '<div>' + s.prompt + '</div>';
+            if (s.refusal_reason) {
+              html += '<div style="font-size:0.75rem;color:var(--text-dim);margin-top:2px">↳ ' + s.refusal_reason + '</div>';
+            }
+            html += '</li>';
+          });
+          html += '</ul>';
+        }
+        html += '</div></details>';
+      });
+      html += '</div>';
+    }
+
+    // Show original refusals grouping (for backward compatibility)
+    if (!refusalsData.groups || refusalsData.groups.length === 0) {
+      if (html === '') {
+        container.innerHTML = empty('暂无违抗事件');
+      } else {
+        container.innerHTML = html;
+      }
+      return;
+    }
+
+    html += '<div style="margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)">';
+    html += '<div style="font-weight:600;margin-bottom:0.5rem">违抗事件列表</div>';
+    html += refusalsData.groups.map(g => {
+      const samples = g.samples.map(s =>
+        '<li style="margin-bottom:0.5rem">'
+        + '<div style="font-size:0.8rem">' + s.prompt + '</div>'
+        + (s.refusal_reason ? '<div style="font-size:0.75rem;color:var(--text-dim);margin-top:2px">↳ ' + s.refusal_reason + '</div>' : '')
+        + '</li>'
+      ).join('');
+      return '<details style="margin-bottom:0.5rem;border:1px solid var(--border);border-radius:4px;padding:0.5rem">'
+        + '<summary style="cursor:pointer;display:flex;gap:0.5rem;align-items:center">'
+        + '<span class="badge badge-block">' + g.count + '</span>'
+        + '<code>' + g.taskType + '</code> → <code>' + g.agent + '</code></summary>'
+        + '<ul style="margin:0.5rem 0 0 1rem;padding:0">' + samples + '</ul>'
+        + '</details>';
+    }).join('');
+    html += '</div>';
+
+    container.innerHTML = html;
+  } catch (err) {
+    document.getElementById('routing-refusals').innerHTML = empty('加载失败: ' + err.message);
+  }
+}
+
+async function toggleRuleState(taskType, agent, disabled) {
+  const verb = disabled ? '禁用' : '启用';
+  if (!confirm(verb + ' ' + taskType + ' → ' + agent + ' 的路由规则？')) return;
+  try {
+    const r = await fetch(API + '/api/routing/rule-states', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ taskType, agent, disabled, reason: disabled ? '手动禁用（Web UI）' : null }),
+    });
+    if (!r.ok) {
+      const err = await r.json();
+      throw new Error(err.error || 'Unknown error');
+    }
+    await loadRoutingRefusals();
+  } catch (err) {
+    alert(verb + '失败: ' + err.message);
+  }
+}
+
+// === Routing Config Editor (Phase 3 Feature 2, upgraded to Monaco in Phase 4 Feature 1) ===
+
+let monacoEditor = null;
+
+function initMonacoEditor() {
+  if (monacoEditor) return; // already initialized
+
+  require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' } });
+  require(['vs/editor/editor.main'], function () {
+    monacoEditor = monaco.editor.create(document.getElementById('routing-config-editor'), {
+      value: '',
+      language: 'yaml',
+      theme: 'vs',
+      automaticLayout: true,
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      fontSize: 14,
+      lineNumbers: 'on',
+      renderWhitespace: 'selection',
+      tabSize: 2,
+    });
+  });
+}
+
+async function loadRoutingConfig() {
+  try {
+    const r = await fetch(API + '/api/routing/config');
+    const data = await r.json();
+
+    // Initialize Monaco Editor if not already done
+    if (!monacoEditor) {
+      initMonacoEditor();
+      // Wait for Monaco to initialize
+      await new Promise(resolve => {
+        const checkInterval = setInterval(() => {
+          if (monacoEditor) {
+            clearInterval(checkInterval);
+            resolve();
+          }
+        }, 100);
+      });
+    }
+
+    // Set editor content
+    if (monacoEditor) {
+      monacoEditor.setValue(data.content || '');
+    }
+
+    const sourceLabel = data.source === 'user' ? '用户配置' : data.source === 'default' ? '默认配置' : '无配置';
+    document.getElementById('routing-config-source').textContent = sourceLabel;
+    document.getElementById('routing-config-path').textContent = data.source === 'user' ? data.userPath : data.defaultPath;
+
+    // Hide error/success messages
+    document.getElementById('routing-config-error').style.display = 'none';
+    document.getElementById('routing-config-success').style.display = 'none';
+  } catch (err) {
+    document.getElementById('routing-config-error').textContent = '加载失败: ' + err.message;
+    document.getElementById('routing-config-error').style.display = 'block';
+  }
+}
+
+async function saveRoutingConfig() {
+  if (!monacoEditor) {
+    alert('编辑器未初始化');
+    return;
+  }
+
+  const content = monacoEditor.getValue();
+  const errorEl = document.getElementById('routing-config-error');
+  const successEl = document.getElementById('routing-config-success');
+
+  errorEl.style.display = 'none';
+  successEl.style.display = 'none';
+
+  try {
+    const r = await fetch(API + '/api/routing/config', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content }),
+    });
+
+    if (!r.ok) {
+      const err = await r.json();
+      throw new Error(err.error || 'Unknown error');
+    }
+
+    const result = await r.json();
+    successEl.textContent = '✓ 保存成功！配置已写入 ' + result.path + '（热加载将在几秒内生效）';
+    successEl.style.display = 'block';
+
+    // Reload to show updated source
+    setTimeout(() => loadRoutingConfig(), 1000);
+  } catch (err) {
+    errorEl.textContent = '保存失败: ' + err.message;
+    errorEl.style.display = 'block';
+  }
+}
+
+// === A/B Testing (Phase 5 Feature 1) ===
+
+let experimentsEditor = null;
+
+function initExperimentsEditor() {
+  if (experimentsEditor) return;
+  require.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs' } });
+  require(['vs/editor/editor.main'], function () {
+    experimentsEditor = monaco.editor.create(document.getElementById('experiments-config-editor'), {
+      value: '',
+      language: 'yaml',
+      theme: 'vs',
+      automaticLayout: true,
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      fontSize: 14,
+      lineNumbers: 'on',
+      renderWhitespace: 'selection',
+      tabSize: 2,
+    });
+  });
+}
+
+async function loadExperimentsConfig() {
+  try {
+    const r = await fetch(API + '/api/routing/experiments/config');
+    const data = await r.json();
+
+    if (!experimentsEditor) {
+      initExperimentsEditor();
+      await new Promise(resolve => {
+        const tick = setInterval(() => {
+          if (experimentsEditor) { clearInterval(tick); resolve(); }
+        }, 100);
+      });
+    }
+
+    experimentsEditor.setValue(data.content || '');
+    document.getElementById('experiments-config-source').textContent =
+      data.source === 'user' ? '用户配置' : '未配置（保存将创建新文件）';
+    document.getElementById('experiments-config-path').textContent = data.path || '';
+
+    document.getElementById('experiments-config-error').style.display = 'none';
+    document.getElementById('experiments-config-success').style.display = 'none';
+  } catch (err) {
+    document.getElementById('experiments-config-error').textContent = '加载失败: ' + err.message;
+    document.getElementById('experiments-config-error').style.display = 'block';
+  }
+}
+
+async function saveExperimentsConfig() {
+  if (!experimentsEditor) { alert('编辑器未初始化'); return; }
+  const content = experimentsEditor.getValue();
+  const errorEl = document.getElementById('experiments-config-error');
+  const successEl = document.getElementById('experiments-config-success');
+  errorEl.style.display = 'none';
+  successEl.style.display = 'none';
+
+  try {
+    const r = await fetch(API + '/api/routing/experiments/config', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content }),
+    });
+    if (!r.ok) {
+      const err = await r.json();
+      throw new Error(err.error || 'Unknown error');
+    }
+    const result = await r.json();
+    successEl.textContent = '✓ 保存成功！配置已写入 ' + result.path;
+    successEl.style.display = 'block';
+    setTimeout(() => { loadExperimentsConfig(); loadExperimentsAnalysis(); }, 1000);
+  } catch (err) {
+    errorEl.textContent = '保存失败: ' + err.message;
+    errorEl.style.display = 'block';
+  }
+}
+
+async function loadExperimentsAnalysis() {
+  const summaryEl = document.getElementById('experiments-summary');
+  const tableEl = document.getElementById('experiments-analysis');
+  const winnerEl = document.getElementById('experiments-winner');
+  summaryEl.innerHTML = '';
+  tableEl.innerHTML = loading();
+  winnerEl.style.display = 'none';
+  winnerEl.innerHTML = '';
+
+  try {
+    const r = await fetch(API + '/api/routing/experiments/analysis');
+    const data = await r.json();
+
+    if (!data.experimentId) {
+      tableEl.innerHTML = empty('当前没有活跃实验。编辑上方 YAML 配置并保存后即可开始。');
+      return;
+    }
+
+    const endedLabel = data.endedAt ? ' · 已结束 ' + fmt(data.endedAt) : (data.enabled ? ' · 进行中' : ' · 未启用');
+    summaryEl.innerHTML =
+      '<strong>' + (data.experimentName || data.experimentId) + '</strong>' +
+      '<span style="color:var(--text-dim)"> (' + data.experimentId + ')</span>' +
+      '<span style="color:var(--text-dim)">' + endedLabel + '</span>' +
+      '<br><small style="color:var(--text-dim)">开始于 ' + fmt(data.startedAt) + '</small>';
+
+    const rows = (data.groups || []).map(g => {
+      const rate = g.obeyedRate == null ? '—' : (g.obeyedRate * 100).toFixed(1) + '%';
+      const avg = g.avgClassificationMs == null ? '—' : g.avgClassificationMs.toFixed(0) + 'ms';
+      return '<tr>' +
+        '<td><strong>' + g.id + '</strong> <span style="color:var(--text-dim)">(' + g.name + ')</span></td>' +
+        '<td>' + g.weight + '%</td>' +
+        '<td>' + g.total + '</td>' +
+        '<td>' + g.obeyed + '</td>' +
+        '<td>' + g.refused + '</td>' +
+        '<td>' + g.unknown + '</td>' +
+        '<td>' + rate + '</td>' +
+        '<td>' + avg + '</td>' +
+        '</tr>';
+    }).join('');
+
+    tableEl.innerHTML =
+      '<table>' +
+      '<thead><tr>' +
+      '<th>组</th><th>权重</th><th>样本</th><th>听话</th><th>违抗</th><th>未知</th><th>听话率</th><th>平均分类耗时</th>' +
+      '</tr></thead><tbody>' + rows + '</tbody></table>';
+
+    if (data.zScore !== null && data.zScore !== undefined) {
+      const zline =
+        '<div style="margin-top:0.5rem;font-size:0.875rem;color:var(--text-dim)">' +
+        'z-score = ' + data.zScore.toFixed(3) +
+        (data.sampleAdequate ? ' (样本充足)' : ' (样本不足，需每组 ≥ 50)') +
+        '</div>';
+      tableEl.insertAdjacentHTML('beforeend', zline);
+    }
+
+    if (data.suggestedWinner && !data.endedAt) {
+      winnerEl.style.display = 'block';
+      winnerEl.innerHTML =
+        '<div style="padding:1rem;background:var(--primary);color:white;border-radius:var(--radius-sm)">' +
+        '<div style="margin-bottom:0.5rem"><strong>建议获胜方案：' + data.suggestedWinner + '</strong> (z &gt; 1.96)</div>' +
+        '<button class="btn" style="background:white;color:var(--primary)" onclick="promoteExperiment(\'' + data.suggestedWinner + '\')">一键应用该组规则到 routing.yaml</button>' +
+        '</div>';
+    } else if (!data.endedAt && data.groups && data.groups.length >= 2) {
+      winnerEl.style.display = 'block';
+      const buttons = data.groups.map(g =>
+        '<button class="btn" onclick="promoteExperiment(\'' + g.id + '\')">手动晶升 ' + g.id + '</button>'
+      ).join(' ');
+      winnerEl.innerHTML =
+        '<div style="padding:1rem;background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-sm)">' +
+        '<div style="margin-bottom:0.5rem;color:var(--text-dim)">尚未达到显著差异。如确定要提前收尾实验：</div>' +
+        buttons + '</div>';
+    }
+  } catch (err) {
+    tableEl.innerHTML = empty('加载失败: ' + err.message);
+  }
+}
+
+async function promoteExperiment(groupId) {
+  if (!confirm('将 ' + groupId + ' 组的规则写入 routing.yaml 并结束当前实验？原 routing.yaml 会备份为 .bak 文件。')) return;
+  try {
+    const r = await fetch(API + '/api/routing/experiments/promote', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ groupId }),
+    });
+    if (!r.ok) {
+      const err = await r.json();
+      throw new Error(err.error || 'Unknown error');
+    }
+    const result = await r.json();
+    alert('✓ 已晶升 ' + result.promoted + ' 组到 routing.yaml' +
+      (result.backupPath ? '\n备份：' + result.backupPath : '') +
+      '\n实验结束于 ' + result.endedAt);
+    await loadExperimentsConfig();
+    await loadExperimentsAnalysis();
+  } catch (err) {
+    alert('晶升失败: ' + err.message);
+  }
+}
+
+// === Rule Recommendations (Phase 5 Feature 3) ===
+
+async function loadRecommendations() {
+  const container = document.getElementById('recommendations-list');
+  container.innerHTML = loading();
+  const days = document.getElementById('recommendations-days')?.value || '7';
+  try {
+    const r = await fetch(API + '/api/routing/recommendations?days=' + days);
+    const data = await r.json();
+    const list = data.recommendations || [];
+    if (list.length === 0) {
+      container.innerHTML = empty('暂无推荐。样本量不足或当前规则已贴近实际行为。');
+      return;
+    }
+
+    let html = '<table>';
+    html += '<thead><tr>' +
+      '<th>任务类型</th><th>复杂度</th>' +
+      '<th>当前路由</th><th>建议路由</th>' +
+      '<th>样本</th><th>当前听话率</th><th>建议 agent 使用率</th>' +
+      '<th>置信度</th><th>说明</th>' +
+    '</tr></thead><tbody>';
+    list.forEach(rec => {
+      const pctFmt = v => (v * 100).toFixed(0) + '%';
+      const conf = (rec.confidence * 100).toFixed(0) + '%';
+      html += '<tr>' +
+        '<td><code>' + rec.taskType + '</code></td>' +
+        '<td>' + (rec.complexity || '—') + '</td>' +
+        '<td>' + (rec.currentAgent ? '<code>' + rec.currentAgent + '</code>' : '<span style="color:var(--text-dim)">(skill 回退)</span>') + '</td>' +
+        '<td><code style="color:var(--primary)">' + rec.recommendedAgent + '</code></td>' +
+        '<td>' + rec.sampleSize + '</td>' +
+        '<td>' + pctFmt(rec.currentObeyedRate) + '</td>' +
+        '<td>' + pctFmt(rec.recommendedUsageRate) + '</td>' +
+        '<td>' + conf + '</td>' +
+        '<td style="font-size:0.85rem;color:var(--text-dim)">' + rec.reason + '</td>' +
+      '</tr>';
+    });
+    html += '</tbody></table>';
+    html += '<div style="margin-top:0.75rem;font-size:0.85rem;color:var(--text-dim)">' +
+      '要应用某条推荐，打开"路由调优"tab，手动更新对应 when 块的 agent 名称并保存。' +
+      '</div>';
+    container.innerHTML = html;
+  } catch (err) {
+    container.innerHTML = empty('加载推荐失败: ' + err.message);
+  }
 }
 
 // === Init ===