@winspan/claude-forge 8.15.0 → 8.16.0

package/dist/web/static/index.html

@@ -353,19 +353,15 @@
       <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('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>
-    <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>
   </aside>
 
   <!-- Main -->
@@ -459,23 +455,50 @@
         </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>
-        </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()">
-        </div>
-        <div class="panel" id="rules-panel">
-          <div id="rules-list"></div>
+      <!-- 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>
 
@@ -518,9 +541,10 @@
           <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">未判定 (null)</option>
+              <option value="null">待判定/未路由</option>
             </select>
             <input class="search-box" id="routing-filter-agent" placeholder="按 agent 名过滤..." oninput="loadRoutingEvents()">
           </div>
@@ -646,8 +670,7 @@
 
 <script>
 const API = '';
-let allEvents = [], allSessions = [], allInjections = [], allRules = [];
-let liveSource = null;
+let allEvents = [], allSessions = [], allInjections = [];
 let charts = {};
 
 // === Navigation ===
@@ -658,16 +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:'规则', routing:'Agent 路由' };
+  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 === 'ai-config') loadAIConfig();
   else if (page === 'routing') loadRouting();
-  else if (page === 'live' && !liveSource) toggleLive();
 }
 
 function refreshPage() {
@@ -801,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);
@@ -1085,32 +1072,6 @@ function openInjDrawer(inj) {
 }
 
 // === Rules ===
-async function loadRules() {
-  document.getElementById('rules-list').innerHTML = loading();
-  try {
-    const res = await fetch(API + '/api/rules');
-    allRules = await res.json();
-    renderRules(allRules);
-  } catch {
-    document.getElementById('rules-list').innerHTML = empty('加载规则失败');
-  }
-}
-
-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 filterRules() {
-  const q = document.getElementById('rules-search').value.toLowerCase();
-  renderRules(allRules.filter(r => (r.name||'').toLowerCase().includes(q) || (r.description||'').toLowerCase().includes(q)));
-}
-
-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);
-}
 
 // === Agent Routing ===
 let routingCurrentTab = 'overview';
@@ -1146,6 +1107,136 @@ async function loadRouting() {
   if (routingCurrentTab === 'recommendations') return loadRecommendations();
 }
 
+// === AI Config ===
+let aiApiKeyMasked = true;
+let aiApiKeyOriginal = '';
+
+async function loadAIConfig() {
+  try {
+    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';
@@ -1213,19 +1304,28 @@ async function loadRoutingEvents() {
     const obeyed = document.getElementById('routing-filter-obeyed')?.value || '';
     const agent = document.getElementById('routing-filter-agent')?.value || '';
     const params = new URLSearchParams({ limit: '100' });
-    if (obeyed !== '') params.set('obeyed', obeyed);
+    // '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());
-    const rows = await r.json();
+    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 => {
-      const status = e.obeyed === 1 ? '<span class="badge badge-allow">遵守</span>'
-        : e.obeyed === 0 ? '<span class="badge badge-block">违抗</span>'
-        : '<span class="badge badge-info">未判定</span>';
+      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>'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@winspan/claude-forge",
-  "version": "8.15.0",
+  "version": "8.16.0",
   "description": "SDLC intelligent orchestration engine for Claude Code",
   "main": "dist/cli/index.js",
   "type": "module",