@winspan/claude-forge 8.19.0 → 8.25.1

package/dist/web/static/index.html

@@ -541,6 +541,12 @@
           </select>
           <button class="btn" onclick="loadExecutionTraces()">↻ 刷新</button>
         </div>
+        <div class="panel" style="margin-bottom:1rem">
+          <div class="panel-header"><span class="panel-title">实时状态</span></div>
+          <div class="panel-body">
+            <div id="trace-live-status" style="max-height:200px;overflow-y:auto;font-size:0.875rem"></div>
+          </div>
+        </div>
         <div class="panel">
           <div class="panel-body">
             <div id="trace-list"></div>
@@ -604,6 +610,8 @@
             <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-performance" onclick="routingTab('performance')" style="border-radius:0;border:none">性能分析</button>
+            <button class="btn" id="routing-tab-ai-optimization" onclick="routingTab('ai-optimization')" style="border-radius:0;border:none">AI 优化</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>
@@ -659,6 +667,57 @@
           </div>
         </div>
 
+        <!-- Performance subpanel -->
+        <div id="routing-sub-performance" style="display:none">
+          <div class="cards" id="routing-performance-cards"></div>
+          <div class="grid-2" style="margin-top:1.25rem">
+            <div class="panel">
+              <div class="panel-header"><span class="panel-title">每日路由趋势</span></div>
+              <div class="panel-body"><div class="chart-wrap"><canvas id="chart-routing-trend"></canvas></div></div>
+            </div>
+            <div class="panel">
+              <div class="panel-header"><span class="panel-title">平均真实执行耗时趋势</span></div>
+              <div class="panel-body"><div class="chart-wrap"><canvas id="chart-routing-latency"></canvas></div></div>
+            </div>
+          </div>
+          <div class="grid-2" style="margin-top:1.25rem">
+            <div class="panel">
+              <div class="panel-header"><span class="panel-title">Per-agent 指标</span></div>
+              <div class="panel-body">
+                <table>
+                  <thead><tr><th>Agent</th><th>总次数</th><th>已判定</th><th>遵守率</th><th>违抗率</th><th>分类耗时</th><th>真实耗时</th></tr></thead>
+                  <tbody id="routing-performance-by-agent"></tbody>
+                </table>
+              </div>
+            </div>
+            <div class="panel">
+              <div class="panel-header"><span class="panel-title">高违抗率榜单</span></div>
+              <div class="panel-body" id="routing-high-refusal"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- AI optimization subpanel -->
+        <div id="routing-sub-ai-optimization" style="display:none">
+          <div class="panel">
+            <div class="panel-header">
+              <span class="panel-title">AI 优化建议</span>
+              <div style="display:flex;gap:0.5rem;align-items:center">
+                <label style="font-size:0.875rem;color:var(--text-dim)">最小样本
+                  <input id="ai-opt-min-attempts" type="number" value="10" min="1" max="100" style="width:72px;margin-left:0.25rem" class="btn">
+                </label>
+                <button class="btn" onclick="loadRoutingAIOptimization()">↻ 生成建议</button>
+              </div>
+            </div>
+            <div class="panel-body">
+              <div style="margin-bottom:0.75rem;font-size:0.875rem;color:var(--text-dim)">
+                基于高违抗率 agent、规则推荐、执行追踪证据，由 AI 生成针对 agent / skill / routing rule 的优化建议。
+              </div>
+              <div id="routing-ai-optimization"></div>
+            </div>
+          </div>
+        </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">
@@ -767,6 +826,10 @@
 const API = '';
 let allEvents = [], allSessions = [], allInjections = [];
 let charts = {};
+let traceStream = null;
+let traceRefreshTimer = null;
+let currentPatchPreview = null;
+let currentAIOptimizationData = null;
 
 // === Navigation ===
 function nav(page) {
@@ -1176,7 +1239,7 @@ let routingCurrentTab = 'overview';
 
 function routingTab(tab) {
   routingCurrentTab = tab;
-  ['overview', 'events', 'refusals', 'editor', 'experiments', 'recommendations'].forEach(t => {
+  ['overview', 'events', 'refusals', 'performance', 'ai-optimization', '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);
@@ -1197,6 +1260,8 @@ async function loadRouting() {
   if (routingCurrentTab === 'overview') return loadRoutingOverview();
   if (routingCurrentTab === 'events') return loadRoutingEvents();
   if (routingCurrentTab === 'refusals') return loadRoutingRefusals();
+  if (routingCurrentTab === 'performance') return loadRoutingPerformance();
+  if (routingCurrentTab === 'ai-optimization') return loadRoutingAIOptimization();
   if (routingCurrentTab === 'editor') return loadRoutingConfig();
   if (routingCurrentTab === 'experiments') {
     await loadExperimentsConfig();
@@ -1434,6 +1499,9 @@ async function viewAgent(name) {
           ${data.tools ? `<span class="badge badge-allow">${data.tools}</span>` : ''}
         </div>
       </div>
+      <div style="margin-bottom:1rem;display:flex;gap:0.5rem">
+        <button class="btn" onclick="viewAgentVersions('${name}')">📜 版本历史</button>
+      </div>
       <div style="background:var(--bg-secondary);padding:1rem;border-radius:var(--radius-sm);max-height:60vh;overflow-y:auto">
         <pre style="margin:0;white-space:pre-wrap;font-size:0.875rem">${escapeHtml(data.content)}</pre>
       </div>
@@ -1517,6 +1585,87 @@ async function loadSkills() {
   }
 }
 
+async function viewAgentVersions(name) {
+  try {
+    const r = await fetch(API + `/api/agents/${name}/versions`);
+    if (!r.ok) throw new Error('Failed to load versions');
+    const data = await r.json();
+
+    if (data.versions.length === 0) {
+      alert('暂无版本历史');
+      return;
+    }
+
+    const html = `
+      <div style="margin-bottom:1rem">
+        <h3>版本历史: ${name}</h3>
+        <p style="color:var(--text-dim)">共 ${data.versions.length} 个备份版本</p>
+      </div>
+      <div style="max-height:60vh;overflow-y:auto">
+        ${data.versions.map(v => `
+          <div style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.75rem;margin-bottom:0.5rem">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
+              <div>
+                <div style="font-weight:500">${new Date(v.mtime).toLocaleString('zh-CN')}</div>
+                <div style="font-size:0.75rem;color:var(--text-dim)">${(v.size / 1024).toFixed(1)} KB</div>
+              </div>
+              <div style="display:flex;gap:0.25rem">
+                <button class="btn" onclick="viewAgentVersion('${name}', '${v.timestamp}')">查看</button>
+                <button class="btn btn-primary" onclick="rollbackAgent('${name}', '${v.timestamp}')">回滚</button>
+              </div>
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+    openDrawer(`版本历史: ${name}`, html);
+  } catch (err) {
+    alert('加载失败: ' + err.message);
+  }
+}
+
+async function viewAgentVersion(name, timestamp) {
+  try {
+    const r = await fetch(API + `/api/agents/${name}/versions/${encodeURIComponent(timestamp)}`);
+    if (!r.ok) throw new Error('Failed to load version');
+    const data = await r.json();
+
+    const html = `
+      <div style="margin-bottom:1rem">
+        <h3>历史版本: ${name}</h3>
+        <p style="color:var(--text-dim)">${new Date(timestamp).toLocaleString('zh-CN')}</p>
+      </div>
+      <div style="background:var(--bg-secondary);padding:1rem;border-radius:var(--radius-sm);max-height:60vh;overflow-y:auto">
+        <pre style="margin:0;white-space:pre-wrap;font-size:0.875rem">${escapeHtml(data.content)}</pre>
+      </div>
+    `;
+    openDrawer(`历史版本: ${name}`, html);
+  } catch (err) {
+    alert('加载失败: ' + err.message);
+  }
+}
+
+async function rollbackAgent(name, timestamp) {
+  if (!confirm(`确定要回滚到 ${new Date(timestamp).toLocaleString('zh-CN')} 的版本吗？\n\n当前版本会自动备份。`)) {
+    return;
+  }
+
+  try {
+    const r = await fetch(API + `/api/agents/${name}/rollback`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ timestamp }),
+    });
+    if (!r.ok) throw new Error('Failed to rollback');
+    const data = await r.json();
+    alert(`✓ 回滚成功！\n\n当前版本已备份到:\n${data.backup}`);
+    closeDrawer();
+    loadAgents();
+  } catch (err) {
+    alert('回滚失败: ' + err.message);
+  }
+}
+
 async function viewSkill(name) {
   try {
     const r = await fetch(API + `/api/skills/${name}`);
@@ -1532,6 +1681,9 @@ async function viewSkill(name) {
           <span class="badge ${data.source === 'official' ? 'badge-allow' : 'badge-warn'}">${data.source === 'official' ? '官方' : '用户'}</span>
         </div>
       </div>
+      <div style="margin-bottom:1rem;display:flex;gap:0.5rem">
+        <button class="btn" onclick="viewSkillVersions('${name}')">📜 版本历史</button>
+      </div>
       <div style="background:var(--bg-secondary);padding:1rem;border-radius:var(--radius-sm);max-height:60vh;overflow-y:auto">
         <pre style="margin:0;white-space:pre-wrap;font-size:0.875rem">${escapeHtml(data.content)}</pre>
       </div>
@@ -1542,6 +1694,87 @@ async function viewSkill(name) {
   }
 }
 
+async function viewSkillVersions(name) {
+  try {
+    const r = await fetch(API + `/api/skills/${name}/versions`);
+    if (!r.ok) throw new Error('Failed to load versions');
+    const data = await r.json();
+
+    if (data.versions.length === 0) {
+      alert('暂无版本历史');
+      return;
+    }
+
+    const html = `
+      <div style="margin-bottom:1rem">
+        <h3>版本历史: ${name}</h3>
+        <p style="color:var(--text-dim)">共 ${data.versions.length} 个备份版本</p>
+      </div>
+      <div style="max-height:60vh;overflow-y:auto">
+        ${data.versions.map(v => `
+          <div style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.75rem;margin-bottom:0.5rem">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
+              <div>
+                <div style="font-weight:500">${new Date(v.mtime).toLocaleString('zh-CN')}</div>
+                <div style="font-size:0.75rem;color:var(--text-dim)">${(v.size / 1024).toFixed(1)} KB</div>
+              </div>
+              <div style="display:flex;gap:0.25rem">
+                <button class="btn" onclick="viewSkillVersion('${name}', '${v.timestamp}')">查看</button>
+                <button class="btn btn-primary" onclick="rollbackSkill('${name}', '${v.timestamp}')">回滚</button>
+              </div>
+            </div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+    openDrawer(`版本历史: ${name}`, html);
+  } catch (err) {
+    alert('加载失败: ' + err.message);
+  }
+}
+
+async function viewSkillVersion(name, timestamp) {
+  try {
+    const r = await fetch(API + `/api/skills/${name}/versions/${encodeURIComponent(timestamp)}`);
+    if (!r.ok) throw new Error('Failed to load version');
+    const data = await r.json();
+
+    const html = `
+      <div style="margin-bottom:1rem">
+        <h3>历史版本: ${name}</h3>
+        <p style="color:var(--text-dim)">${new Date(timestamp).toLocaleString('zh-CN')}</p>
+      </div>
+      <div style="background:var(--bg-secondary);padding:1rem;border-radius:var(--radius-sm);max-height:60vh;overflow-y:auto">
+        <pre style="margin:0;white-space:pre-wrap;font-size:0.875rem">${escapeHtml(data.content)}</pre>
+      </div>
+    `;
+    openDrawer(`历史版本: ${name}`, html);
+  } catch (err) {
+    alert('加载失败: ' + err.message);
+  }
+}
+
+async function rollbackSkill(name, timestamp) {
+  if (!confirm(`确定要回滚到 ${new Date(timestamp).toLocaleString('zh-CN')} 的版本吗？\n\n当前版本会自动备份。`)) {
+    return;
+  }
+
+  try {
+    const r = await fetch(API + `/api/skills/${name}/rollback`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ timestamp }),
+    });
+    if (!r.ok) throw new Error('Failed to rollback');
+    const data = await r.json();
+    alert(`✓ 回滚成功！\n\n当前版本已备份到:\n${data.backup}`);
+    closeDrawer();
+    loadSkills();
+  } catch (err) {
+    alert('回滚失败: ' + err.message);
+  }
+}
+
 async function editSkill(name) {
   try {
     const r = await fetch(API + `/api/skills/${name}`);
@@ -1625,11 +1858,47 @@ async function loadExecutionTraces() {
       ).join('');
 
     renderTraces();
+    ensureTraceStream();
   } catch (err) {
     console.error('Failed to load traces:', err);
   }
 }
 
+function ensureTraceStream() {
+  if (traceStream) return;
+  traceStream = new EventSource(API + '/api/execution-trace/stream');
+  traceStream.onmessage = (e) => {
+    try {
+      const data = JSON.parse(e.data);
+      if (data.type === 'execution-status') {
+        appendLiveStatus(data);
+        if (traceRefreshTimer) clearTimeout(traceRefreshTimer);
+        traceRefreshTimer = setTimeout(() => loadExecutionTraces(), 500);
+      }
+    } catch (err) {
+      console.error('Failed to parse SSE:', err);
+    }
+  };
+  traceStream.onerror = () => {
+    traceStream.close();
+    traceStream = null;
+  };
+}
+
+function appendLiveStatus(data) {
+  const statusBox = document.getElementById('trace-live-status');
+  if (!statusBox) return;
+  const time = new Date(data.timestamp).toLocaleTimeString('zh-CN');
+  const statusBadge = data.status === 'routing' ? '<span class="badge badge-info">正在路由</span>'
+    : data.status === 'executing' ? '<span class="badge badge-warn">正在执行</span>'
+    : data.status === 'completed' ? '<span class="badge badge-allow">已完成</span>'
+    : '<span class="badge badge-block">失败</span>';
+  const item = `<div style="padding:0.5rem;border-bottom:1px solid var(--border)">${time} · Session ${data.sessionId.slice(0,8)} · ${statusBadge}${data.tool ? ` · ${data.tool}` : ''}${data.error ? ` · ${data.error}` : ''}</div>`;
+  statusBox.innerHTML = item + statusBox.innerHTML;
+  const children = statusBox.children;
+  while (children.length > 20) statusBox.removeChild(children[children.length - 1]);
+}
+
 function renderTraces() {
   const searchTerm = document.getElementById('trace-search').value.toLowerCase();
   const filtered = allTraces.filter(t =>
@@ -1668,6 +1937,14 @@ function renderTraces() {
       ? `<span class="badge badge-allow">AI 分类 (${t.classificationMs}ms)</span>`
       : '';
 
+    const executionBadge = t.totalExecutionMs
+      ? `<span class="badge" style="background:var(--purple-soft);color:var(--purple)">真实耗时: ${t.totalExecutionMs}ms</span>`
+      : '';
+
+    const completionBadge = t.completionReason
+      ? `<span class="badge" style="background:var(--bg-secondary)">完成来源: ${t.completionReason}</span>`
+      : '';
+
     return `
       <div style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem;margin-bottom:0.75rem;cursor:pointer;transition:background 0.2s"
            onclick="viewTraceDetails('${t.sessionId}')"
@@ -1687,6 +1964,8 @@ function renderTraces() {
           ${intentBadge}
           ${firstToolBadge}
           ${classificationBadge}
+          ${executionBadge}
+          ${completionBadge}
           ${t.taskChain.length > 0 ? `<span class="badge badge-info">子 Agent: ${t.taskChain.join(' → ')}</span>` : ''}
         </div>
       </div>
@@ -1743,10 +2022,23 @@ async function viewTraceDetails(sessionId) {
           <div><strong>路由类型:</strong> ${routing.routedToType || '无'}</div>
           <div><strong>路由目标:</strong> ${routing.routedToName || '—'}</div>
           <div><strong>执行状态:</strong> ${obeyedText}</div>
+          <div><strong>完成来源:</strong> ${routing.completionReason || '—'}</div>
           ${routing.refusalReason ? `<div style="margin-top:0.5rem;color:var(--red)"><strong>违抗原因:</strong> ${escapeHtml(routing.refusalReason)}</div>` : ''}
         </div>
       </div>
 
+      <div style="margin-bottom:1.5rem">
+        <h4 style="margin-bottom:0.5rem">时间分解</h4>
+        <div style="background:var(--bg-secondary);padding:0.75rem;border-radius:var(--radius-sm);font-size:0.875rem">
+          <div><strong>路由开始:</strong> ${routing.timestamp ? new Date(routing.timestamp).toLocaleString('zh-CN') : '—'}</div>
+          <div><strong>首工具时间:</strong> ${routing.firstToolTs ? new Date(routing.firstToolTs).toLocaleString('zh-CN') : '—'}</div>
+          <div><strong>执行完成:</strong> ${routing.completedTs ? new Date(routing.completedTs).toLocaleString('zh-CN') : '—'}</div>
+          <div><strong>分类耗时:</strong> ${routing.classificationMs ? routing.classificationMs + 'ms' : '—'}</div>
+          <div><strong>首工具延迟:</strong> ${routing.firstToolTs ? (routing.firstToolTs - routing.timestamp) + 'ms' : '—'}</div>
+          <div><strong>真实执行耗时:</strong> ${routing.totalExecutionMs ? routing.totalExecutionMs + 'ms' : '—'}</div>
+        </div>
+      </div>
+
       <div style="margin-bottom:1.5rem">
         <h4 style="margin-bottom:0.5rem">实际执行</h4>
         <div style="background:var(--bg-secondary);padding:0.75rem;border-radius:var(--radius-sm);font-size:0.875rem">
@@ -1851,6 +2143,279 @@ function card(label, value, color) {
     + '</div>';
 }
 
+async function loadRoutingPerformance() {
+  try {
+    const r = await fetch(API + '/api/routing/performance?window=' + routingWindow() + '&minAttempts=10');
+    const data = await r.json();
+
+    document.getElementById('routing-performance-cards').innerHTML = [
+      card('总路由数', data.summary.totalRouted),
+      card('已判定', data.summary.totalJudged),
+      card('遵守率', pct(data.summary.obedienceRate)),
+      card('违抗率', pct(data.summary.refusalRate)),
+      card('平均分类耗时', ms(data.summary.avgClassificationMs)),
+      card('平均真实耗时', ms(data.summary.avgExecutionMs)),
+    ].join('');
+
+    const byAgentTbody = document.getElementById('routing-performance-by-agent');
+    byAgentTbody.innerHTML = (data.byAgent || []).length === 0
+      ? '<tr><td colspan="7">' + empty('暂无性能数据') + '</td></tr>'
+      : data.byAgent.map(a => '<tr>'
+          + '<td style="font-family:monospace">' + a.agent + '</td>'
+          + '<td>' + a.total + '</td>'
+          + '<td>' + a.judged + '</td>'
+          + '<td>' + pct(a.obedienceRate) + '</td>'
+          + '<td>' + pct(a.refusalRate) + '</td>'
+          + '<td>' + ms(a.avgClassificationMs) + '</td>'
+          + '<td>' + ms(a.avgExecutionMs) + '</td>'
+          + '</tr>').join('');
+
+    const highRefusal = document.getElementById('routing-high-refusal');
+    highRefusal.innerHTML = (data.highRefusalAgents || []).length === 0
+      ? empty('暂无达到阈值的高违抗率 Agent')
+      : '<table><thead><tr><th>Agent</th><th>样本</th><th>违抗率</th><th>分类耗时</th><th>真实耗时</th></tr></thead><tbody>'
+        + data.highRefusalAgents.map(a => '<tr>'
+          + '<td style="font-family:monospace">' + a.agent + '</td>'
+          + '<td>' + a.totalAttempts + '</td>'
+          + '<td>' + pct(a.refusalRate) + '</td>'
+          + '<td>' + ms(a.avgClassificationMs) + '</td>'
+          + '<td>' + ms(a.avgExecutionMs) + '</td>'
+          + '</tr>').join('')
+        + '</tbody></table>';
+
+    renderRoutingPerformanceCharts(data.dailyTrend || []);
+  } catch (err) {
+    document.getElementById('routing-performance-cards').innerHTML = empty('加载失败: ' + err.message);
+    document.getElementById('routing-performance-by-agent').innerHTML = '<tr><td colspan="7">' + empty('加载失败: ' + err.message) + '</td></tr>';
+    document.getElementById('routing-high-refusal').innerHTML = empty('加载失败: ' + err.message);
+  }
+}
+
+function renderRoutingPerformanceCharts(trend) {
+  const labels = trend.map(d => d.date.slice(5));
+  const total = trend.map(d => d.total);
+  const obeyed = trend.map(d => d.obeyed);
+  const refused = trend.map(d => d.refused);
+  const latency = trend.map(d => d.avgExecutionMs ?? 0);
+
+  if (charts.routingTrend) charts.routingTrend.destroy();
+  if (charts.routingLatency) charts.routingLatency.destroy();
+
+  const trendCtx = document.getElementById('chart-routing-trend');
+  if (trendCtx) {
+    charts.routingTrend = new Chart(trendCtx, {
+      type: 'line',
+      data: {
+        labels,
+        datasets: [
+          { label: '总路由', data: total, borderColor: '#4f46e5', backgroundColor: 'rgba(79,70,229,0.12)', tension: 0.25 },
+          { label: '遵守', data: obeyed, borderColor: '#16a34a', backgroundColor: 'rgba(22,163,74,0.12)', tension: 0.25 },
+          { label: '违抗', data: refused, borderColor: '#dc2626', backgroundColor: 'rgba(220,38,38,0.12)', tension: 0.25 },
+        ],
+      },
+      options: { responsive: true, maintainAspectRatio: false },
+    });
+  }
+
+  const latencyCtx = document.getElementById('chart-routing-latency');
+  if (latencyCtx) {
+    charts.routingLatency = new Chart(latencyCtx, {
+      type: 'bar',
+      data: {
+        labels,
+        datasets: [{ label: '平均真实执行耗时(ms)', data: latency, backgroundColor: 'rgba(37,99,235,0.65)' }],
+      },
+      options: { responsive: true, maintainAspectRatio: false },
+    });
+  }
+}
+
+async function loadRoutingAIOptimization() {
+  const container = document.getElementById('routing-ai-optimization');
+  container.innerHTML = loading();
+  try {
+    const minAttempts = parseInt(document.getElementById('ai-opt-min-attempts').value) || 10;
+    const r = await fetch(API + '/api/routing/ai-optimization?window=' + routingWindow() + '&minAttempts=' + minAttempts);
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({ error: r.statusText }));
+      throw new Error(err.error || r.statusText);
+    }
+    const data = await r.json();
+    currentAIOptimizationData = data;
+
+    const priorities = (data.priorities || []).length === 0
+      ? empty('暂无优先级建议')
+      : (data.priorities || []).map((p, idx) => `
+          <div style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.75rem;margin-bottom:0.5rem">
+            <div style="display:flex;justify-content:space-between;gap:0.5rem;align-items:center;margin-bottom:0.35rem">
+              <strong>#${idx + 1} ${escapeHtml(p.area || '优化项')}</strong>
+              <span class="badge badge-info">${Math.round((p.confidence || 0) * 100)}%</span>
+            </div>
+            <div style="font-size:0.875rem;margin-bottom:0.25rem"><strong>发现：</strong>${escapeHtml(p.finding || '')}</div>
+            <div style="font-size:0.875rem"><strong>影响：</strong>${escapeHtml(p.impact || '')}</div>
+          </div>
+        `).join('');
+
+    const changes = (data.suggestedChanges || []).length === 0
+      ? empty('暂无可执行改动建议')
+      : (data.suggestedChanges || []).map((c, idx) => `
+          <div style="border:1px solid var(--border);border-radius:var(--radius-sm);padding:0.75rem;margin-bottom:0.5rem">
+            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.35rem">
+              <strong>#${idx + 1} ${escapeHtml(c.targetType || '')}: ${escapeHtml(c.targetName || '—')}</strong>
+              <div style="display:flex;gap:0.5rem">
+                <span class="badge ${c.targetType === 'routing_rule' ? 'badge-warn' : 'badge-allow'}">${escapeHtml(c.targetType || '—')}</span>
+                <button class="btn" style="font-size:0.75rem;padding:0.25rem 0.5rem" onclick="previewPatch(${idx})">预览 Patch</button>
+              </div>
+            </div>
+            <div style="font-size:0.875rem;margin-bottom:0.25rem"><strong>建议：</strong>${escapeHtml(c.recommendation || '')}</div>
+            <div style="font-size:0.875rem;margin-bottom:0.25rem"><strong>理由：</strong>${escapeHtml(c.rationale || '')}</div>
+            <div style="font-size:0.875rem;color:var(--text-dim)"><strong>收益：</strong>${escapeHtml(c.expectedBenefit || '')}</div>
+          </div>
+        `).join('');
+
+    const evidence = data.evidence || {};
+    container.innerHTML = `
+      <div class="cards" style="margin-bottom:1rem">
+        ${card('高违抗率 Agent', (evidence.highRefusalAgents || []).length)}
+        ${card('违抗模式', (evidence.topViolations || []).length)}
+        ${card('规则建议', (evidence.ruleRecommendations || []).length)}
+      </div>
+      <div class="grid-2">
+        <div class="panel">
+          <div class="panel-header"><span class="panel-title">AI 摘要</span></div>
+          <div class="panel-body" style="white-space:pre-wrap;line-height:1.6">${escapeHtml(data.summary || '—')}</div>
+        </div>
+        <div class="panel">
+          <div class="panel-header"><span class="panel-title">优先级</span></div>
+          <div class="panel-body">${priorities}</div>
+        </div>
+      </div>
+      <div class="grid-2" style="margin-top:1rem">
+        <div class="panel">
+          <div class="panel-header"><span class="panel-title">可执行改动建议</span></div>
+          <div class="panel-body">${changes}</div>
+        </div>
+        <div class="panel">
+          <div class="panel-header"><span class="panel-title">证据</span></div>
+          <div class="panel-body">
+            <details open style="margin-bottom:0.5rem"><summary style="cursor:pointer;font-weight:600">高违抗率 Agent</summary><pre style="white-space:pre-wrap;font-size:0.8rem;background:var(--bg-secondary);padding:0.5rem;border-radius:4px">${escapeHtml(JSON.stringify(evidence.highRefusalAgents || [], null, 2))}</pre></details>
+            <details style="margin-bottom:0.5rem"><summary style="cursor:pointer;font-weight:600">违抗模式</summary><pre style="white-space:pre-wrap;font-size:0.8rem;background:var(--bg-secondary);padding:0.5rem;border-radius:4px">${escapeHtml(JSON.stringify(evidence.topViolations || [], null, 2))}</pre></details>
+            <details><summary style="cursor:pointer;font-weight:600">规则建议</summary><pre style="white-space:pre-wrap;font-size:0.8rem;background:var(--bg-secondary);padding:0.5rem;border-radius:4px">${escapeHtml(JSON.stringify(evidence.ruleRecommendations || [], null, 2))}</pre></details>
+          </div>
+        </div>
+      </div>
+    `;
+  } catch (err) {
+    container.innerHTML = empty('加载失败: ' + err.message);
+  }
+}
+
+// Patch preview and apply functions
+async function previewPatch(idx) {
+  if (!currentAIOptimizationData || !currentAIOptimizationData.suggestedChanges) {
+    alert('请先加载 AI 优化建议');
+    return;
+  }
+  const change = currentAIOptimizationData.suggestedChanges[idx];
+  if (!change) {
+    alert('建议不存在');
+    return;
+  }
+
+  const drawerTitle = document.getElementById('drawer-title');
+  const drawerBody = document.getElementById('drawer-body');
+  drawerTitle.textContent = 'Patch 预览';
+  drawerBody.innerHTML = '<div style="text-align:center;padding:2rem">正在生成 patch...</div>';
+  openDrawer();
+
+  try {
+    const r = await fetch(API + '/api/patch/preview', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        targetType: change.targetType,
+        targetName: change.targetName,
+        recommendation: change.recommendation,
+        rationale: change.rationale,
+      }),
+    });
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({ error: r.statusText }));
+      throw new Error(err.error || r.statusText);
+    }
+    const preview = await r.json();
+    currentPatchPreview = preview;
+
+    const riskBadge = preview.risk === 'low' ? '<span class="badge badge-allow">低风险</span>'
+      : preview.risk === 'high' ? '<span class="badge badge-block">高风险</span>'
+      : '<span class="badge badge-warn">中风险</span>';
+
+    drawerBody.innerHTML = `
+      <div style="margin-bottom:1rem">
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
+          <strong>${preview.targetType}: ${preview.targetName}</strong>
+          ${riskBadge}
+        </div>
+        <div style="font-size:0.875rem;color:var(--text-dim);margin-bottom:0.5rem">${escapeHtml(preview.summary)}</div>
+        <div style="font-size:0.875rem;color:var(--text-dim)">文件: ${escapeHtml(preview.filePath)}</div>
+      </div>
+      <div style="margin-bottom:1rem">
+        <strong>变更前:</strong>
+        <pre style="background:var(--bg-secondary);padding:0.75rem;border-radius:var(--radius-sm);max-height:300px;overflow:auto;font-size:0.75rem">${escapeHtml(preview.before)}</pre>
+      </div>
+      <div style="margin-bottom:1rem">
+        <strong>变更后:</strong>
+        <pre style="background:var(--bg-secondary);padding:0.75rem;border-radius:var(--radius-sm);max-height:300px;overflow:auto;font-size:0.75rem">${escapeHtml(preview.after)}</pre>
+      </div>
+      <div style="display:flex;gap:0.5rem;justify-content:flex-end">
+        <button class="btn" onclick="closeDrawer()">取消</button>
+        <button class="btn btn-primary" onclick="applyPatch()">应用 Patch</button>
+      </div>
+    `;
+  } catch (err) {
+    drawerBody.innerHTML = `<div style="color:var(--red);padding:1rem">预览失败: ${escapeHtml(err.message)}</div>`;
+  }
+}
+
+async function applyPatch() {
+  if (!currentPatchPreview) {
+    alert('请先预览 patch');
+    return;
+  }
+
+  if (!confirm(`确定要应用此 patch 吗？\n\n目标: ${currentPatchPreview.targetType}/${currentPatchPreview.targetName}\n\n系统会自动备份当前版本。`)) {
+    return;
+  }
+
+  try {
+    const r = await fetch(API + '/api/patch/apply', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        targetType: currentPatchPreview.targetType,
+        targetName: currentPatchPreview.targetName,
+        afterContent: currentPatchPreview.after,
+      }),
+    });
+    if (!r.ok) {
+      const err = await r.json().catch(() => ({ error: r.statusText }));
+      throw new Error(err.error || r.statusText);
+    }
+    const result = await r.json();
+    alert(`Patch 应用成功！\n\n备份路径: ${result.backupPath}\n\n请刷新相关页面查看结果。`);
+    closeDrawer();
+    const targetType = currentPatchPreview.targetType;
+    currentPatchPreview = null;
+
+    // Refresh relevant pages
+    if (targetType === 'agent') loadAgents();
+    else if (targetType === 'skill') loadSkills();
+    else if (targetType === 'routing_rule') loadRoutingConfig();
+  } catch (err) {
+    alert('应用失败: ' + err.message);
+  }
+}
+
 async function loadRoutingEvents() {
   try {
     const obeyed = document.getElementById('routing-filter-obeyed')?.value || '';