@winspan/claude-forge 8.18.0 → 8.25.0

package/dist/web/static/index.html

@@ -353,6 +353,10 @@
       <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('execution-trace')" id="nav-execution-trace">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+      执行追踪
+    </a>
     <div class="nav-section-title">配置</div>
     <a onclick="nav('agents')" id="nav-agents">
       <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
@@ -523,6 +527,33 @@
         </div>
       </div>
 
+      <!-- Execution Trace -->
+      <div id="page-execution-trace" class="page">
+        <div class="toolbar">
+          <input class="search-box" id="trace-search" placeholder="搜索 prompt..." oninput="filterTraces()">
+          <select class="btn" id="trace-agent-filter" onchange="loadExecutionTraces()">
+            <option value="">全部 Agent/Skill</option>
+          </select>
+          <select class="btn" id="trace-obeyed-filter" onchange="loadExecutionTraces()">
+            <option value="">全部状态</option>
+            <option value="true">✓ 已遵守</option>
+            <option value="false">✗ 违抗</option>
+          </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>
+          </div>
+        </div>
+      </div>
+
       <!-- Agent Management -->
       <div id="page-agents" class="page">
         <div class="panel">
@@ -579,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>
@@ -634,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">
@@ -742,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) {
@@ -751,13 +839,14 @@ 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:'注入', agents:'Agent 管理', skills:'Skill 管理', 'ai-config':'AI 配置', routing:'Agent 路由' };
+  const titles = { dashboard:'仪表盘', sessions:'会话', events:'事件', injections:'注入', 'execution-trace':'执行追踪', agents:'Agent 管理', skills:'Skill 管理', '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 === 'execution-trace') loadExecutionTraces();
   else if (page === 'agents') loadAgents();
   else if (page === 'skills') loadSkills();
   else if (page === 'ai-config') loadAIConfig();
@@ -1150,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);
@@ -1171,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();
@@ -1408,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>
@@ -1491,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}`);
@@ -1506,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>
@@ -1516,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}`);
@@ -1570,6 +1829,258 @@ function escapeHtml(text) {
   return div.innerHTML;
 }
 
+// === Execution Trace ===
+let allTraces = [];
+
+async function loadExecutionTraces() {
+  try {
+    const agentFilter = document.getElementById('trace-agent-filter').value;
+    const obeyedFilter = document.getElementById('trace-obeyed-filter').value;
+    const params = new URLSearchParams({ limit: '100' });
+    if (agentFilter) params.set('agent', agentFilter);
+    if (obeyedFilter) params.set('obeyed', obeyedFilter);
+
+    const r = await fetch(API + '/api/execution-trace?' + params.toString());
+    if (!r.ok) throw new Error('Failed to load traces');
+    const data = await r.json();
+    allTraces = data.traces;
+
+    // Populate agent filter dropdown
+    const agentSet = new Set();
+    allTraces.forEach(t => {
+      if (t.routedToName) agentSet.add(t.routedToName);
+    });
+    const agentSelect = document.getElementById('trace-agent-filter');
+    const currentAgent = agentSelect.value;
+    agentSelect.innerHTML = '<option value="">全部 Agent/Skill</option>' +
+      Array.from(agentSet).sort().map(a =>
+        `<option value="${a}" ${a === currentAgent ? 'selected' : ''}>${a}</option>`
+      ).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 =>
+    !searchTerm || t.prompt.toLowerCase().includes(searchTerm)
+  );
+
+  const list = document.getElementById('trace-list');
+  if (filtered.length === 0) {
+    list.innerHTML = '<div style="text-align:center;padding:2rem;color:var(--text-dim)">暂无执行追踪记录</div>';
+    return;
+  }
+
+  const items = filtered.map(t => {
+    const time = new Date(t.timestamp).toLocaleString('zh-CN');
+    const obeyedBadge = t.obeyed === 1
+      ? '<span class="badge badge-allow">✓ 遵守</span>'
+      : t.obeyed === 0
+      ? '<span class="badge badge-block">✗ 违抗</span>'
+      : '<span class="badge badge-info">— 未路由</span>';
+
+    const routeBadge = t.routedToName
+      ? `<span class="badge badge-info">${t.routedToType === 'agent' ? '🤖' : '⚡'} ${t.routedToName}</span>`
+      : '<span class="badge badge-warn">无路由</span>';
+
+    const intentBadge = t.intent.taskType
+      ? `<span class="badge" style="background:var(--bg-secondary)">${t.intent.taskType}</span>`
+      : '';
+
+    const firstToolBadge = t.firstTool
+      ? `<span class="badge" style="background:var(--bg-secondary)">首工具: ${t.firstTool}</span>`
+      : '';
+
+    const classificationBadge = t.fallbackUsed
+      ? '<span class="badge badge-warn">正则兜底</span>'
+      : t.classificationMs
+      ? `<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}')"
+           onmouseover="this.style.background='var(--bg-secondary)'"
+           onmouseout="this.style.background='transparent'">
+        <div style="display:flex;justify-content:space-between;align-items:start;margin-bottom:0.5rem">
+          <div style="flex:1">
+            <div style="font-weight:500;margin-bottom:0.25rem">${escapeHtml(t.prompt.slice(0, 100))}${t.prompt.length > 100 ? '...' : ''}</div>
+            <div style="font-size:0.75rem;color:var(--text-dim)">${time} · Session: ${t.sessionId.slice(0, 8)}</div>
+          </div>
+          <div style="display:flex;gap:0.25rem;flex-wrap:wrap;justify-content:flex-end">
+            ${obeyedBadge}
+            ${routeBadge}
+          </div>
+        </div>
+        <div style="display:flex;gap:0.5rem;flex-wrap:wrap;font-size:0.75rem">
+          ${intentBadge}
+          ${firstToolBadge}
+          ${classificationBadge}
+          ${executionBadge}
+          ${completionBadge}
+          ${t.taskChain.length > 0 ? `<span class="badge badge-info">子 Agent: ${t.taskChain.join(' → ')}</span>` : ''}
+        </div>
+      </div>
+    `;
+  }).join('');
+
+  list.innerHTML = items;
+}
+
+function filterTraces() {
+  renderTraces();
+}
+
+async function viewTraceDetails(sessionId) {
+  try {
+    const r = await fetch(API + `/api/execution-trace/${sessionId}`);
+    if (!r.ok) throw new Error('Failed to load trace details');
+    const data = await r.json();
+
+    const routing = data.routing;
+    const obeyedText = routing.obeyed === 1
+      ? '<span class="badge badge-allow">✓ 遵守</span>'
+      : routing.obeyed === 0
+      ? '<span class="badge badge-block">✗ 违抗</span>'
+      : '<span class="badge badge-info">— 未路由</span>';
+
+    const html = `
+      <div style="margin-bottom:1.5rem">
+        <h3>执行追踪详情</h3>
+        <div style="font-size:0.875rem;color:var(--text-dim);margin-top:0.5rem">Session: ${sessionId}</div>
+      </div>
+
+      <div style="margin-bottom:1.5rem">
+        <h4 style="margin-bottom:0.5rem">用户 Prompt</h4>
+        <div style="background:var(--bg-secondary);padding:0.75rem;border-radius:var(--radius-sm);font-size:0.875rem">
+          ${escapeHtml(routing.prompt)}
+        </div>
+      </div>
+
+      <div style="margin-bottom:1.5rem">
+        <h4 style="margin-bottom:0.5rem">AI 意图分类</h4>
+        <div style="background:var(--bg-secondary);padding:0.75rem;border-radius:var(--radius-sm);font-size:0.875rem">
+          <div><strong>任务类型:</strong> ${routing.intent.taskType || '—'}</div>
+          <div><strong>复杂度:</strong> ${routing.intent.complexity || '—'}</div>
+          <div><strong>分类耗时:</strong> ${routing.classificationMs ? routing.classificationMs + 'ms' : '—'}</div>
+          <div><strong>分类方式:</strong> ${routing.fallbackUsed ? '<span class="badge badge-warn">正则兜底</span>' : '<span class="badge badge-allow">AI 分类</span>'}</div>
+          ${routing.intent.reasoning ? `<div style="margin-top:0.5rem"><strong>推理:</strong> ${escapeHtml(routing.intent.reasoning)}</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.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">
+          <div><strong>首个工具:</strong> ${routing.firstTool || '—'}</div>
+          ${routing.taskChain.length > 0 ? `<div><strong>子 Agent 链:</strong> ${routing.taskChain.join(' → ')}</div>` : ''}
+        </div>
+      </div>
+
+      <div style="margin-bottom:1.5rem">
+        <h4 style="margin-bottom:0.5rem">事件时间线 (${data.events.length} 个事件)</h4>
+        <div style="background:var(--bg-secondary);padding:0.75rem;border-radius:var(--radius-sm);max-height:300px;overflow-y:auto;font-size:0.875rem">
+          ${data.events.map(e => `
+            <div style="padding:0.25rem 0;border-bottom:1px solid var(--border)">
+              <span style="color:var(--text-dim)">${new Date(e.timestamp).toLocaleTimeString('zh-CN')}</span>
+              <span class="badge badge-info" style="margin:0 0.5rem">${e.hook_type}</span>
+              ${e.tool_name ? `<span class="badge">${e.tool_name}</span>` : ''}
+            </div>
+          `).join('')}
+        </div>
+      </div>
+
+      ${data.injections.length > 0 ? `
+        <div style="margin-bottom:1.5rem">
+          <h4 style="margin-bottom:0.5rem">注入内容 (${data.injections.length} 条)</h4>
+          <div style="background:var(--bg-secondary);padding:0.75rem;border-radius:var(--radius-sm);max-height:300px;overflow-y:auto;font-size:0.875rem">
+            ${data.injections.map(inj => `
+              <div style="padding:0.5rem 0;border-bottom:1px solid var(--border)">
+                <div><span class="badge badge-info">${inj.injection_type}</span></div>
+                <div style="margin-top:0.25rem;white-space:pre-wrap;font-family:monospace;font-size:0.8rem">${escapeHtml(inj.content.slice(0, 200))}${inj.content.length > 200 ? '...' : ''}</div>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      ` : ''}
+    `;
+
+    openDrawer('执行追踪详情', html);
+  } catch (err) {
+    alert('加载失败: ' + err.message);
+  }
+}
+
 function routingWindow() {
   const el = document.getElementById('routing-window');
   return el ? el.value : '168';
@@ -1632,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 || '';