evolclaw-web 1.0.1 → 1.2.0

package/dist/static/app.js

@@ -56,9 +56,9 @@ function initPairUI() {
 // ── WebSocket 客户端（自动重连）──
 let ws = null;
 let reconnectDelay = 1000;
-let currentView = 'aid';
+let currentView = 'agents';
 let pendingSub = null;        // 重连后要恢复的订阅
-const state = { aid: null, msg: null, session: null };
+const state = { agents: null, msg: null, session: null, cache: null, system: null, triggers: null, monitor: null };
 
 function setConnStatus(text, cls) {
   const el = $('#conn-status');
@@ -83,8 +83,22 @@ function connect() {
     try { msg = JSON.parse(ev.data); } catch { return; }
     if (msg.type === 'pong') return;
     if (msg.type === 'error') { console.warn('server error:', msg.message); return; }
+    if (msg.type === 'menu.response') {
+      const pend = _menuPending[msg.requestId];
+      if (pend) { delete _menuPending[msg.requestId]; pend.resolve(msg.data); }
+      return;
+    }
     if (msg.type === 'snapshot' || msg.type === 'delta') {
-      state[msg.view] = msg.data;
+      // system 视图保留客户端写入的 check/upgrade，防止 3s 轮询覆盖
+      if (msg.view === 'system' && state.system) {
+        state.system = {
+          ...msg.data,
+          check: state.system.check ?? msg.data.check,
+          upgrade: state.system.upgrade ?? msg.data.upgrade,
+        };
+      } else {
+        state[msg.view] = msg.data;
+      }
       if (msg.view === currentView) renderView(currentView);
     }
   };
@@ -110,6 +124,22 @@ function subscribe(view, params) {
   }
 }
 
+// ── Menu 写请求（update/action）：经 WS menu 消息，requestId 配对响应 ──
+const _menuPending = {};
+let _menuSeq = 0;
+function menuSend(payload) {
+  return new Promise((resolve, reject) => {
+    if (!ws || ws.readyState !== WebSocket.OPEN) { reject(new Error('未连接')); return; }
+    const requestId = 'ecw-' + (++_menuSeq);
+    const withId = { ...payload, id: payload.id || requestId };
+    _menuPending[requestId] = { resolve, reject };
+    setTimeout(() => {
+      if (_menuPending[requestId]) { delete _menuPending[requestId]; reject(new Error('timeout')); }
+    }, 6000);
+    ws.send(JSON.stringify({ type: 'menu', requestId, payload: withId }));
+  });
+}
+
 // 心跳
 setInterval(() => {
   if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'ping' }));
@@ -118,8 +148,11 @@ setInterval(() => {
 // ── Tab 切换 ──
 let msgSel = { aid: null, peer: null };
 let sessSel = { sessionId: null, project: null };
+let trigSel = { agent: null };
 let sessSearch = '';
+let sessFilterNormal = false; // true=只显示有效会话（userMsgs >= 2）
 let sessChatMode = false;   // false=完整视图，true=对话视图（折叠处理过程）
+let monRange = '2m';        // Monitor 时间窗口：2m / 10m / 1h
 
 function switchView(view) {
   currentView = view;
@@ -128,7 +161,11 @@ function switchView(view) {
   // 切换时按当前选择恢复订阅
   if (view === 'msg') subscribe('msg', { aid: msgSel.aid, peer: msgSel.peer });
   else if (view === 'session') subscribe('session', { sessionId: sessSel.sessionId, project: sessSel.project });
-  else subscribe('aid', {});
+  else if (view === 'cache') subscribe('cache', {});
+  else if (view === 'system') subscribe('system', {});
+  else if (view === 'triggers') subscribe('triggers', { agent: trigSel.agent });
+  else if (view === 'monitor') subscribe('monitor', { range: monRange });
+  else subscribe('agents', {});
   if (state[view]) renderView(view);
 }
 
@@ -139,9 +176,13 @@ function initTabs() {
 }
 
 function renderView(view) {
-  if (view === 'aid') renderAid(state.aid);
+  if (view === 'agents') renderAgents(state.agents);
   else if (view === 'msg') renderMsg(state.msg);
   else if (view === 'session') renderSession(state.session);
+  else if (view === 'cache') renderCache(state.cache);
+  else if (view === 'system') renderSystem(state.system);
+  else if (view === 'triggers') renderTriggers(state.triggers);
+  else if (view === 'monitor') renderMonitor(state.monitor);
 }
 
 // ── 工具 ──
@@ -162,61 +203,398 @@ function fmtAgo(ts) {
   if (s < 86400) return Math.floor(s / 3600) + 'h';
   return Math.floor(s / 86400) + 'd';
 }
+// 秒数 → 可读时长（如 3d 2h / 5h 12m / 8m 3s）
+function fmtDur(sec) {
+  if (sec == null) return '—';
+  const s = Math.floor(Number(sec) || 0);
+  const d = Math.floor(s / 86400);
+  const h = Math.floor((s % 86400) / 3600);
+  const m = Math.floor((s % 3600) / 60);
+  const sx = s % 60;
+  if (d > 0) return `${d}d ${h}h`;
+  if (h > 0) return `${h}h ${m}m`;
+  if (m > 0) return `${m}m ${sx}s`;
+  return `${sx}s`;
+}
 function fmtTime(ts) {
   if (!ts) return '';
   const d = new Date(ts);
   const p = (n) => String(n).padStart(2, '0');
-  return `${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+  return `${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
+}
+// semver 比较：-1 (a<b) / 0 / 1 (a>b)，剥离 pre-release 标签
+function compareVer(a, b) {
+  const pa = String(a).split('-')[0].split('.').map(Number);
+  const pb = String(b).split('-')[0].split('.').map(Number);
+  const len = Math.max(pa.length, pb.length);
+  for (let i = 0; i < len; i++) {
+    const na = pa[i] || 0, nb = pb[i] || 0;
+    if (na < nb) return -1;
+    if (na > nb) return 1;
+  }
+  return 0;
+}
+
+// ── Agents 视图（对齐终端 watch aid：状态点前置 + 名字为主 + 两行 + 工作态着色 + 顶部统计条）──
+
+// 逐 AID 异步操作状态（取代全局 _agentBusy）：aid → 操作中的描述文字
+const _agentOps = new Map(); // Map<aid, string>
+let _agentBusy = false;  // 保留兼容旧引用，不再用于阻塞渲染
+let _agSubtab = 'enabled'; // 'enabled' | 'disabled'
+
+// 工作状态徽标：一旦收到过消息就不再回 connected。
+// stopped → connected(仅首次连接无消息时) → idle(收到第一条后) → working → idle ...
+function agentStateBadge(s, agStatus, connStatus) {
+  if (agStatus === 'stopped' || connStatus === 'disconnected' || connStatus === 'failed')
+    return '<span class="state-badge stopped">停止</span>';
+  if (connStatus === 'reconnecting')
+    return '<span class="state-badge stopped">重连中</span>';
+  if ((s.processing || 0) > 0)
+    return '<span class="state-badge working">working</span>';
+  // 收到过消息 → 永远是 idle，不再回到 connected
+  if ((s.messagesReceived || 0) > 0 || (s.messagesSent || 0) > 0)
+    return '<span class="state-badge idle">idle</span>';
+  return '<span class="state-badge connected">connected</span>';
+}
+
+// 发送方式图标标记
+const MSG_KIND_META = { send: { icon: '💬', label: '回复' }, thought: { icon: '💭', label: '思考' }, inject: { icon: '📥', label: '注入' }, notify: { icon: '🔔', label: '通知' } };
+function msgTagsHtml(kind, encrypt, chatmode) {
+  let h = '';
+  const km = MSG_KIND_META[kind];
+  if (km) h += `<span class="mtag">${km.icon}${km.label}</span>`;
+  if (encrypt != null) h += `<span class="mtag">${encrypt ? '🔒密文' : '明文'}</span>`;
+  if (chatmode) h += `<span class="mtag">${chatmode === 'proactive' ? '自主' : (chatmode === 'inject' ? '注入' : '响应')}</span>`;
+  return h;
+}
+
+// 消息行：方向箭头 + 标记 + 对端 + 文字
+function agentPreviewHtml(s) {
+  const clip = (t) => esc(String(t).replace(/\n/g, ' ').slice(0, 80));
+  const line = (dir, peer, text, kind, encrypt, chatmode) => {
+    const arrow = dir === 'in' ? '<span class="arrow-in">↓</span>' : '<span class="arrow-out">↑</span>';
+    const tags = msgTagsHtml(kind, encrypt, chatmode);
+    const peerHtml = peer ? `<span class="peer">${esc(shortAid(peer))}</span>: ` : '';
+    const textCls = dir === 'in' ? 'text-in' : 'text-out';
+    return `${arrow}${tags ? ' ' + tags + ' ' : ' '}${peerHtml}<span class="${textCls}">${clip(text)}</span>`;
+  };
+  if ((s.processing || 0) > 0 && s.lastReceivedText)
+    return line('in', s.lastReceivedFrom, s.lastReceivedText, s.lastReceivedKind, s.lastReceivedEncrypt, s.lastReceivedChatmode);
+  const recvTs = s.lastReceivedAt || 0, sentTs = s.lastSentAt || 0;
+  if (!recvTs && !sentTs) return '';
+  if (sentTs > recvTs && s.lastSentText)
+    return line('out', s.lastSentTo, s.lastSentText, s.lastSentKind, s.lastSentEncrypt, s.lastSentChatmode);
+  if (s.lastReceivedText)
+    return line('in', s.lastReceivedFrom, s.lastReceivedText, s.lastReceivedKind, s.lastReceivedEncrypt, s.lastReceivedChatmode);
+  return '';
 }
 
-// ── AID 视图 ──
-function renderAid(data) {
-  const el = $('#view-aid');
+// HTML tooltip（最近 N 轮）：彩色箭头 + 方式 + 对端 + 文字
+function recentMsgTooltipHtml(recent) {
+  if (!recent || !recent.length) return '';
+  let h = '<div class="msg-tip">';
+  for (const m of recent) {
+    const rcls = m.dir === 'in' ? 'tip-row-in' : 'tip-row-out';
+    const arrow = m.dir === 'in' ? '↓' : '↑';
+    const km = MSG_KIND_META[m.kind];
+    const kh = km ? `<span class="tip-kind">${km.icon}${km.label}</span>` : '';
+    const enc = m.encrypt != null ? `<span class="tip-flag">${m.encrypt ? '🔒密文' : '明文'}</span>` : '';
+    const mode = m.chatmode ? `<span class="tip-flag">${m.chatmode === 'proactive' ? '自主' : (m.chatmode === 'inject' ? '注入' : '响应')}</span>` : '';
+    const peer = m.peer ? esc(shortAid(m.peer)) : '';
+    const text = esc(String(m.text).replace(/\n/g, ' ').slice(0, 60));
+    h += `<div class="tip-row ${rcls}">${arrow}${kh}${enc}${mode} <b>${peer}</b> ${text}</div>`;
+  }
+  return h + '</div>';
+}
+
+// 顶部统计条：Gateway / AIDs total·connected·offline / Messages ↓↑ / Traffic ↓↑ / Version·PID·Uptime
+function agentsStatsBar(data, aids, stats) {
+  const connected = aids.filter(a => (a.status || 'connected') === 'connected').length;
+  const offline = aids.length - connected;
+  let recv = 0, sent = 0, bin = 0, bout = 0;
+  for (const s of stats) {
+    recv += s.messagesReceived || 0; sent += s.messagesSent || 0;
+    bin += s.bytesReceived || 0; bout += s.bytesSent || 0;
+  }
+  const gws = [...new Set(aids.filter(a => a.gatewayUrl).map(a => a.gatewayUrl))];
+  const gw = gws.length ? gws.map(esc).join(', ') : '—';
+  const st = data.status || {};
+  const pid = st.pid != null ? st.pid : '—';
+  const uptime = st.uptime != null ? fmtDur(st.uptime / 1000) : '—';
+  const ver = data.version || '—';
+
+  let h = '<div class="agents-stats">';
+  h += `<span class="sg"><span class="sg-k">Gateway</span><span class="sg-gw">${gw}</span></span>`;
+  h += `<span class="sg"><span class="sg-k">AIDs</span>${aids.length} total · <span class="num-on">${connected} 在线</span>` +
+    `${offline ? ` · <span class="num-off">${offline} 离线</span>` : ''}</span>`;
+  h += `<span class="sg"><span class="sg-k">Messages</span><span class="in">↓${recv}</span> <span class="out">↑${sent}</span></span>`;
+  h += `<span class="sg"><span class="sg-k">Traffic</span><span class="in">↓${fmtBytes(bin)}</span> <span class="out">↑${fmtBytes(bout)}</span></span>`;
+  h += `<span class="sg"><span class="sg-k">Version</span>${esc(ver)} · <span class="sg-k">PID</span>${pid} · <span class="sg-k">Uptime</span>${uptime}</span>`;
+  h += '</div>';
+  return h;
+}
+
+// 操作列 HTML（启用页）：停止/启动 + 清空队列(conditional) + ···(禁用/重载/编辑/md/删除)
+function agentOpsHtml(aid, ag, s) {
+  if (_agentOps.has(aid)) {
+    return `<div class="agent-ops agent-ops-busy"><span class="ops-busy-label">${esc(_agentOps.get(aid) || '操作中…')}</span></div>`;
+  }
+  const queued = s.queued || 0;
+  const running = ag.status === 'running';
+  let h = `<div class="agent-ops" data-aid="${esc(aid)}" data-status="${esc(ag.status)}">`;
+  if (running) h += `<button class="ctrl-btn ops-stop" data-op="stop">停止</button>`;
+  else         h += `<button class="ctrl-btn ops-start" data-op="start">启动</button>`;
+  if (queued > 0) h += `<button class="ctrl-btn ops-clear-queue" data-op="clear-queue" title="清空 ${queued} 条待处理消息">清空队列</button>`;
+  h += `<div class="ops-more"><button class="ctrl-btn ops-more-btn" data-op="more">···</button>` +
+    `<div class="ops-dropdown">` +
+    `<button class="ops-dd-item" data-op="toggle">禁用</button>` +
+    `<button class="ops-dd-item" data-op="reload">重载配置</button>` +
+    `<button class="ops-dd-item" data-op="edit">编辑配置</button>` +
+    `<a class="ops-dd-item" href="https://${esc(aid)}/agent.md" target="_blank" rel="noopener">查看 agent.md ↗</a>` +
+    `<button class="ops-dd-item danger" data-op="delete">删除 Agent</button>` +
+    `</div></div>`;
+  h += '</div>';
+  return h;
+}
+
+function renderAgents(data) {
+  const el = $('#view-agents');
   if (!data) { el.innerHTML = '<div class="empty">加载中…</div>'; return; }
+  if (el.querySelector('.ops-more.open')) return;
+
+  const allAgents = data.agents || [];
   const aids = data.aids || [];
   const statsByAid = {};
   for (const s of (data.stats || [])) statsByAid[s.aid] = s;
+  const aidConnByAid = {};
+  for (const a of aids) aidConnByAid[a.aid] = a;
+
+  const enabledCount = allAgents.filter(ag => ag.status !== 'disabled').length;
+  const disabledCount = allAgents.filter(ag => ag.status === 'disabled').length;
+
+  // 子标签栏
+  let html = '<div class="agents-toolbar">' +
+    `<div class="ag-subtabs">` +
+    `<button class="ag-subtab${_agSubtab === 'enabled' ? ' active' : ''}" data-subtab="enabled">启用 (${enabledCount})</button>` +
+    `<button class="ag-subtab${_agSubtab === 'disabled' ? ' active' : ''}" data-subtab="disabled">禁用 (${disabledCount})</button>` +
+    `</div>` +
+    `<button class="ctrl-btn" id="agent-new-btn">+ 新建</button>` +
+    '</div>';
 
-  let html = '';
   if (!data.daemonRunning) {
     html += '<div class="banner">⚠ EvolClaw 主进程未运行，仅显示最近活动记录</div>';
   }
-  if (!aids.length) {
-    html += '<div class="empty">暂无 AID</div>';
+
+  if (_agSubtab === 'disabled') {
+    const disabledAgents = allAgents.filter(ag => ag.status === 'disabled');
+    if (!disabledAgents.length) {
+      html += '<div class="empty">暂无禁用 Agent</div>';
+    } else {
+      html += '<table><thead><tr><th>Agent</th><th>项目路径</th><th>操作</th></tr></thead><tbody>';
+      for (const ag of disabledAgents) {
+        const busy = _agentOps.has(ag.aid);
+        const ops = busy
+          ? `<div class="agent-ops agent-ops-busy"><span class="ops-busy-label">${esc(_agentOps.get(ag.aid) || '操作中…')}</span></div>`
+          : `<div class="agent-ops" data-aid="${esc(ag.aid)}" data-status="disabled"><button class="ctrl-btn ops-enable" data-op="toggle">启用</button></div>`;
+        html += `<tr class="ag-main">` +
+          `<td><div class="ag-id"><span class="dot off"></span><span class="ag-id-text"><span class="ag-name">${esc(ag.displayName || shortAid(ag.aid))}</span><span class="ag-aid">${esc(ag.aid)}</span></span></div></td>` +
+          `<td style="font-size:11px;font-family:monospace">${esc(ag.projectPath || '—')}</td>` +
+          `<td class="agent-ops-cell">${ops}</td></tr>`;
+      }
+      html += '</tbody></table>';
+    }
     el.innerHTML = html;
+    bindAgentsEvents(el);
+    return;
+  }
+
+  // ── 启用页 ──
+  // 按收发消息总数降序排序（活跃的排前面）
+  const totalMsgs = (ag) => {
+    const s = statsByAid[ag.aid] || {};
+    return (s.messagesReceived || 0) + (s.messagesSent || 0);
+  };
+  const enabledAgents = allAgents.filter(ag => ag.status !== 'disabled')
+    .sort((a, b) => totalMsgs(b) - totalMsgs(a));
+  if (!enabledAgents.length) {
+    html += '<div class="empty">暂无启用 Agent</div>';
+    el.innerHTML = html;
+    bindAgentsEvents(el);
     return;
   }
 
   html += '<table><thead><tr>' +
-    '<th>状态</th><th>AID</th><th>收</th><th>发</th><th>系统</th>' +
-    '<th>入字节</th><th>出字节</th><th>peers</th><th>重连</th><th>最后活动</th><th>最近消息</th>' +
+    '<th>AID</th><th>工作</th><th>队列</th><th>模型</th><th>运行</th><th>收</th><th>发</th>' +
+    '<th>入字节</th><th>出字节</th><th>对端数量</th><th>最后活动</th><th>操作</th>' +
     '</tr></thead><tbody>';
 
-  for (const a of aids) {
-    const s = statsByAid[a.aid] || {};
-    const status = a.status || (a.lastEvent === 'disconnected' ? 'disconnected' : 'connected');
-    const dotCls = status === 'connected' ? 'on' : (status === 'reconnecting' ? 'idle' : 'off');
-    const name = s.selfName || a.agentName || '';
-    const lastTs = Math.max(s.lastReceivedAt || 0, s.lastSentAt || 0, a.lastActivity || 0);
-    let preview = '';
-    if (s.lastReceivedText && (s.lastReceivedAt || 0) >= (s.lastSentAt || 0)) {
-      preview = '↓ ' + shortAid(s.lastReceivedFrom) + ': ' + s.lastReceivedText;
-    } else if (s.lastSentText) {
-      preview = '↑ ' + shortAid(s.lastSentTo) + ': ' + s.lastSentText;
-    }
-    html += '<tr>' +
-      `<td><span class="dot ${dotCls}"></span>${esc(status)}</td>` +
-      `<td>${esc(shortAid(a.aid))}${name ? ` <span style="color:var(--dim)">(${esc(name)})</span>` : ''}</td>` +
+  for (const ag of enabledAgents) {
+    const s = statsByAid[ag.aid] || {};
+    const conn = aidConnByAid[ag.aid] || {};
+    const connStatus = conn.status || (ag.status === 'running' ? 'connected' : 'disconnected');
+    const dotCls = connStatus === 'connected' ? 'on' : (connStatus === 'reconnecting' ? 'idle' : 'off');
+    const name = s.selfName || ag.displayName || shortAid(ag.aid);
+    const uptime = (connStatus === 'connected' && conn.lastConnectedAt) ? fmtDur((Date.now() - conn.lastConnectedAt) / 1000) : '—';
+    const lastTs = Math.max(s.lastReceivedAt || 0, s.lastSentAt || 0, ag.lastActivity || 0);
+    const preview = agentPreviewHtml(s);
+    // 队列数：不含正在处理的那条
+    const rawQueued = s.queued || 0;
+    const queued = rawQueued;
+    const queueCell = queued > 0 ? `<span class="ag-queue-num">${queued}</span>` : '<span style="color:var(--dim)">0</span>';
+    const model = ag.model || ag.baseagent || '—';
+
+    const idCell = `<div class="ag-id"><span class="dot ${dotCls}" title="${esc(connStatus)}"></span>` +
+      `<span class="ag-id-text"><span class="ag-name">${esc(name)}</span>` +
+      `<span class="ag-aid">${esc(ag.aid)}</span></span></div>`;
+
+    html += `<tr class="ag-main">` +
+      `<td>${idCell}</td>` +
+      `<td>${agentStateBadge(s, ag.status, connStatus)}</td>` +
+      `<td>${queueCell}</td>` +
+      `<td style="font-size:11px;color:var(--dim)">${esc(model)}</td>` +
+      `<td>${uptime}</td>` +
       `<td>${s.messagesReceived ?? 0}</td><td>${s.messagesSent ?? 0}</td>` +
-      `<td>${s.systemReceived ?? 0}/${s.systemSent ?? 0}</td>` +
       `<td>${fmtBytes(s.bytesReceived)}</td><td>${fmtBytes(s.bytesSent)}</td>` +
-      `<td>${s.uniquePeerCount ?? a.peerCount ?? 0}</td><td>${a.reconnectCount ?? 0}</td>` +
+      `<td>${s.uniquePeerCount ?? conn.peerCount ?? 0}</td>` +
       `<td>${fmtAgo(lastTs)}</td>` +
-      `<td class="preview">${esc(preview.replace(/\n/g, ' ').slice(0, 80))}</td>` +
+      `<td class="agent-ops-cell">${agentOpsHtml(ag.aid, ag, s)}</td>` +
       '</tr>';
+    // 自定义 tooltip（HTML，hover 显示）
+    const recent = (s.recentMessages || []);
+    const tipHtml = recentMsgTooltipHtml(recent);
+
+    html += `<tr class="ag-sub"><td colspan="12"><div class="ag-info">` +
+      (ag.projectPath ? `<div class="ag-path">${esc(ag.projectPath)}</div>` : '') +
+      (preview ? `<div class="ag-msg-wrap">${tipHtml}<div class="ag-msg">${preview}</div></div>` : '') +
+      '</div></td></tr>';
   }
   html += '</tbody></table>';
+  if (data.daemonRunning) {
+    html += agentsStatsBar(data, aids, data.stats || []);
+  }
   el.innerHTML = html;
+  bindAgentsEvents(el);
+}
+
+// ── Cache 视图（daemon 统一 FileCache 运行统计）──
+// fmtNum 复用文件内既有定义（千分位缩写）。
+function hitRate(c) {
+  const denom = (c.hits || 0) + (c.misses || 0);
+  return denom ? (c.hits / denom) : null;
+}
+function fmtPct(r) {
+  if (r == null) return '—';
+  return (r * 100).toFixed(1) + '%';
+}
+function rateCls(r) {
+  if (r == null) return '';
+  if (r >= 0.9) return 'on';
+  if (r >= 0.6) return 'idle';
+  return 'off';
+}
+// group 名按用途归类，给出友好标签：config:<aid> / agent-files:<aid> 提取 aid
+function groupLabel(g) {
+  if (g.startsWith('agent-files:')) return { kind: 'agent', label: shortAid(g.slice('agent-files:'.length)), sub: '身份层' };
+  if (g.startsWith('config:')) return { kind: 'agent', label: shortAid(g.slice('config:'.length)), sub: 'config' };
+  if (g === 'config') return { kind: 'global', label: 'defaults', sub: '全局' };
+  if (g === 'relation-prefs') return { kind: 'relation', label: 'relation-prefs', sub: '关系模型偏好' };
+  if (g === 'kits') return { kind: 'kits', label: 'kits', sub: 'manifest/fragment/md' };
+  return { kind: 'other', label: g, sub: '' };
+}
+
+function renderCache(data) {
+  const el = $('#view-cache');
+  if (!data) { el.innerHTML = '<div class="empty">加载中…</div>'; return; }
+  if (!data.daemonRunning) {
+    el.innerHTML = '<div class="banner">⚠ EvolClaw 主进程未运行，无缓存统计可显示</div>';
+    return;
+  }
+  if (!data.supported || !data.stats) {
+    el.innerHTML = '<div class="banner">⚠ 当前 EvolClaw 版本不支持 cache-stats（请升级 daemon）</div>';
+    return;
+  }
+  const s = data.stats;
+  const t = s.totals;
+  const occ = s.occupancy || {};
+  // 全部组占用合计
+  let totalBytes = 0;
+  for (const g in occ) totalBytes += occ[g].bytes || 0;
+
+  let html = '';
+
+  // ① 总览卡片
+  const rate = hitRate(t);
+  html += '<div class="cache-cards">';
+  html += card('命中率', fmtPct(rate), rateCls(rate), `${fmtNum(t.hits)} 命中 / ${fmtNum(t.misses)} 未命中`);
+  html += card('读取总数', fmtNum(t.gets), '', `${fmtNum(t.hits)} hit · ${fmtNum(t.misses)} miss`);
+  html += card('缓存条目', fmtNum(s.size), '', fmtBytes(totalBytes) + ' 近似内存');
+  html += card('stat 检查', fmtNum(t.statChecks), '', 'mtime 策略每读一次');
+  html += card('重读', fmtNum(t.reReads), '', '带外改后自动重读');
+  html += card('驱逐', fmtNum(t.evictions), t.evictions ? 'idle' : '', 'LRU 超限');
+  html += card('失效', fmtNum(t.invalidations), '', 'reload/单刷清除');
+  html += card('统计起始', fmtAgo(s.since) + ' 前', '', fmtTime(s.since));
+  html += '</div>';
+
+  // ② 按 group 表（每组命中率 + 占用 + 容量水位）
+  html += '<h3 class="cache-h">按缓存组</h3>';
+  html += '<table><thead><tr>' +
+    '<th>组</th><th>类型</th><th>读取</th><th>命中</th><th>未命中</th><th>命中率</th>' +
+    '<th>重读</th><th>驱逐</th><th>条目</th><th>内存</th><th>容量</th>' +
+    '</tr></thead><tbody>';
+  const groups = Object.keys(s.byGroup).sort((a, b) => (s.byGroup[b].gets || 0) - (s.byGroup[a].gets || 0));
+  for (const g of groups) {
+    const c = s.byGroup[g];
+    const o = occ[g] || { size: 0, bytes: 0, cap: null };
+    const gl = groupLabel(g);
+    const r = hitRate(c);
+    let capCell = '—';
+    if (o.cap != null) {
+      const pct = o.cap ? Math.round((o.size / o.cap) * 100) : 0;
+      const cls = pct >= 90 ? 'off' : (pct >= 70 ? 'idle' : 'on');
+      capCell = `<span class="dot ${cls}"></span>${o.size}/${o.cap}`;
+    }
+    html += '<tr>' +
+      `<td>${esc(gl.label)}${gl.sub ? ` <span style="color:var(--dim)">${esc(gl.sub)}</span>` : ''}</td>` +
+      `<td><span class="tag tag-${gl.kind}">${esc(gl.kind)}</span></td>` +
+      `<td>${fmtNum(c.gets)}</td><td>${fmtNum(c.hits)}</td><td>${fmtNum(c.misses)}</td>` +
+      `<td><span class="dot ${rateCls(r)}"></span>${fmtPct(r)}</td>` +
+      `<td>${fmtNum(c.reReads)}</td><td>${fmtNum(c.evictions)}</td>` +
+      `<td>${o.size}</td><td>${fmtBytes(o.bytes)}</td><td>${capCell}</td>` +
+      '</tr>';
+  }
+  html += '</tbody></table>';
+
+  // ③ 按 policy 表
+  html += '<h3 class="cache-h">按策略</h3>';
+  html += '<table><thead><tr>' +
+    '<th>策略</th><th>读取</th><th>命中</th><th>未命中</th><th>命中率</th><th>stat 检查</th><th>重读</th>' +
+    '</tr></thead><tbody>';
+  const POLICY_DESC = { 'on-reload': '靠 reload 刷新，平时零检查', 'manual': '显式单刷', 'mtime': '每读 statSync 门控' };
+  for (const pol of ['on-reload', 'mtime', 'manual']) {
+    const c = s.byPolicy[pol];
+    if (!c || !c.gets) continue;
+    const r = hitRate(c);
+    html += '<tr>' +
+      `<td>${esc(pol)} <span style="color:var(--dim)">${esc(POLICY_DESC[pol] || '')}</span></td>` +
+      `<td>${fmtNum(c.gets)}</td><td>${fmtNum(c.hits)}</td><td>${fmtNum(c.misses)}</td>` +
+      `<td><span class="dot ${rateCls(r)}"></span>${fmtPct(r)}</td>` +
+      `<td>${fmtNum(c.statChecks)}</td><td>${fmtNum(c.reReads)}</td>` +
+      '</tr>';
+  }
+  html += '</tbody></table>';
+
+  html += '<div class="cache-note">注：config/defaults 与关系级 preferences 的读取也已并入本统计；' +
+    '渲染后结果（按 vars）不缓存，故不在此列。</div>';
+
+  el.innerHTML = html;
+}
+
+function card(label, value, valCls, sub) {
+  return `<div class="cache-card">` +
+    `<div class="cc-label">${esc(label)}</div>` +
+    `<div class="cc-value ${valCls || ''}">${esc(value)}</div>` +
+    `<div class="cc-sub">${esc(sub || '')}</div>` +
+    `</div>`;
 }
 
 // ── Messages 视图 ──
@@ -297,17 +675,19 @@ function renderSession(data) {
 
   // 搜索过滤
   const q = sessSearch.trim().toLowerCase();
-  const filtered = q
-    ? transcripts.filter(t => (t.title || '').toLowerCase().includes(q) || (t.firstUser || '').toLowerCase().includes(q))
-    : transcripts;
+  const filtered = transcripts
+    .filter(t => !sessFilterNormal || (t.userMsgs || 0) >= 2)
+    .filter(t => !q || (t.title || '').toLowerCase().includes(q) || (t.firstUser || '').toLowerCase().includes(q));
 
   // 左栏：过滤条 + 列表
   const projOpts = projects.map(p =>
     `<option value="${esc(p.encoded)}"${p.encoded === sessSel.project ? ' selected' : ''}>${esc(p.label)} (${p.count})</option>`
   ).join('');
+  const normalCount = transcripts.filter(t => (t.userMsgs || 0) >= 2).length;
   let listHtml = '<div class="sess-filter">' +
     `<select id="sess-project">${projOpts}</select>` +
     `<input id="sess-search" type="text" placeholder="搜索标题/首条消息…" value="${esc(sessSearch)}">` +
+    `<button id="sess-filter-btn" class="ctrl-btn${sessFilterNormal ? ' active' : ''}" title="只显示有效会话（≥2 条用户消息）">有效 ${normalCount}</button>` +
     `<div class="sess-count">${filtered.length} / ${transcripts.length} 个会话</div></div>` +
     '<div class="sess-items">';
 
@@ -338,6 +718,8 @@ function renderSession(data) {
     sessSearch = '';
     subscribe('session', { project: sessSel.project });
   };
+  const filterBtn = $('#sess-filter-btn');
+  if (filterBtn) filterBtn.onclick = () => { sessFilterNormal = !sessFilterNormal; renderSession(state.session); };
   const searchEl = $('#sess-search');
   if (searchEl) {
     searchEl.oninput = () => { sessSearch = searchEl.value; renderSession(state.session); };
@@ -529,7 +911,473 @@ function renderBlocks(blocks) {
   return out;
 }
 
-// ── 启动 ──
+// ── 通用 Menu 协议辅助（mResp / toast，供 Agents / System / Triggers 复用）──
+
+// 提取 menu.response 的 data/error
+function mResp(r) {
+  if (!r) return { error: { code: 'INTERNAL', message: 'no response' } };
+  if (r.error) return { error: r.error };
+  return { data: r.data };
+}
+
+function toast(text, isErr) {
+  let el = $('#ctrl-toast');
+  if (!el) {
+    el = document.createElement('div');
+    el.id = 'ctrl-toast';
+    el.className = 'ctrl-toast';
+    document.body.appendChild(el);
+  }
+  el.textContent = text;
+  el.className = 'ctrl-toast show' + (isErr ? ' err' : '');
+  clearTimeout(el._t);
+  el._t = setTimeout(() => { el.className = 'ctrl-toast'; }, 2600);
+}
+
+// ── Agents 操作 ──
+// （_agentBusy 已在 Agents 视图顶部声明，仅 agentOpNew 仍在用）
+
+// 设置某 aid 的操作状态并立即刷新对应行的按钮区（不重渲整表）
+function setAgentOp(aid, label) {
+  if (label == null) _agentOps.delete(aid); else _agentOps.set(aid, label);
+  const cell = document.querySelector(`.agent-ops[data-aid="${CSS.escape(aid)}"], .agent-ops-busy[data-aid="${CSS.escape(aid)}"]`)?.closest('td');
+  if (!cell || !state.agents) return;
+  const ag = (state.agents.agents || []).find(x => x.aid === aid);
+  if (!ag) return;
+  if (ag.status === 'disabled') {
+    // 禁用页：只有启用按钮 / 操作中态
+    cell.innerHTML = _agentOps.has(aid)
+      ? `<div class="agent-ops agent-ops-busy"><span class="ops-busy-label">${esc(_agentOps.get(aid) || '操作中…')}</span></div>`
+      : `<div class="agent-ops" data-aid="${esc(aid)}" data-status="disabled"><button class="ctrl-btn ops-enable" data-op="toggle">启用</button></div>`;
+  } else {
+    const statsByAid = {};
+    for (const s of (state.agents.stats || [])) statsByAid[s.aid] = s;
+    cell.innerHTML = agentOpsHtml(aid, ag, statsByAid[aid] || {});
+  }
+  bindOpsCell(cell, aid, ag.status);
+}
+
+function bindOpsCell(cell, aid, status) {
+  cell.querySelectorAll('button[data-op]').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const op = btn.dataset.op;
+      if (op === 'more') {
+        const more = btn.closest('.ops-more');
+        const wasOpen = more.classList.contains('open');
+        document.querySelectorAll('.ops-more.open').forEach(m => m.classList.remove('open'));
+        if (!wasOpen) more.classList.add('open');
+        e.stopPropagation();
+        return;
+      }
+      if (op === 'edit') agentOpEdit(aid);
+      else if (op === 'reload') agentOpReload(aid);
+      else if (op === 'toggle') agentOpToggle(aid, status);
+      else if (op === 'delete') agentOpDelete(aid);
+      else if (op === 'clear-queue') agentOpClearQueue(aid);
+      else if (op === 'stop') agentOpStop(aid);
+      else if (op === 'start') agentOpStart(aid);
+      else if (op === 'mute') agentOpMute(aid);
+      else if (op === 'unmute') agentOpUnmute(aid);
+    });
+  });
+}
+
+// click-outside 关闭下拉：全局只绑一次（避免每次重渲染叠加监听器）
+let _opsOutsideBound = false;
+function ensureOpsOutsideClose() {
+  if (_opsOutsideBound) return;
+  _opsOutsideBound = true;
+  document.addEventListener('click', (e) => {
+    if (e.target.closest && e.target.closest('.ops-more')) return; // 点在菜单内不关
+    document.querySelectorAll('.ops-more.open').forEach(m => m.classList.remove('open'));
+  });
+}
+
+function bindAgentsEvents(el) {
+  el.querySelector('#agent-new-btn')?.addEventListener('click', agentOpNew);
+  ensureOpsOutsideClose();
+  // 子标签切换：仅切视图变量并重渲，不重新订阅
+  el.querySelectorAll('.ag-subtab').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const tab = btn.dataset.subtab;
+      if (tab && tab !== _agSubtab) { _agSubtab = tab; renderAgents(state.agents); }
+    });
+  });
+  el.querySelectorAll('.agent-ops').forEach(div => {
+    const aid = div.dataset.aid;
+    const status = div.dataset.status;
+    bindOpsCell(div.closest('td'), aid, status);
+  });
+}
+
+// 异步操作包装：设置 "操作中" 状态、执行、清除
+async function withAgentOp(aid, label, fn) {
+  setAgentOp(aid, label);
+  try { await fn(); }
+  finally { setAgentOp(aid, null); }
+}
+
+async function agentOpReload(aid, force = false) {
+  await withAgentOp(aid, '重载中…', async () => {
+    const r = mResp(await menuSend({ type: 'menu.action', name: 'agent', action: 'reload', args: { aid, force } }));
+    if (r.error?.code === 'BUSY') {
+      if (confirm(r.error.message + '\n确认强制重载？')) { setAgentOp(aid, null); return agentOpReload(aid, true); }
+      return;
+    }
+    if (r.error) { toast(r.error.message || r.error.code, true); return; }
+    toast('✓ 已重载');
+    subscribe('agents', {});
+  });
+}
+
+async function agentOpToggle(aid, status) {
+  const action = status === 'disabled' ? 'enable' : 'disable';
+  const label = action === 'disable' ? '禁用中…' : '启用中…';
+  await withAgentOp(aid, label, async () => {
+    const r = mResp(await menuSend({ type: 'menu.action', name: 'agent', action, args: { aid } }));
+    if (r.error?.code === 'BUSY') {
+      if (confirm(r.error.message + `\n确认强制${action === 'disable' ? '禁用' : '启用'}？`)) {
+        const r2 = mResp(await menuSend({ type: 'menu.action', name: 'agent', action, args: { aid, force: true } }));
+        if (r2.error) toast(r2.error.message || r2.error.code, true);
+        else {
+          toast(`✓ 已${action === 'disable' ? '禁用' : '启用'}`);
+          // 禁用后立即切到禁用页；启用后等数据刷新（agent 需先完成启动才移到启用页）
+          if (action === 'disable') _agSubtab = 'disabled';
+          subscribe('agents', {});
+        }
+      }
+      return;
+    }
+    if (r.error) { toast(r.error.message || r.error.code, true); return; }
+    toast(`✓ 已${action === 'disable' ? '禁用' : '启用'}`);
+    if (action === 'disable') _agSubtab = 'disabled';
+    subscribe('agents', {});
+  });
+}
+
+async function agentOpDelete(aid) {
+  if (!confirm(`删除 Agent ${aid}？\n此操作不可恢复。`)) return;
+  const purge = confirm('同时清除 agent 数据目录？');
+  await withAgentOp(aid, '删除中…', async () => {
+    const r = mResp(await menuSend({ type: 'menu.action', name: 'agent', action: 'delete', args: { aid, purge } }));
+    if (r.error?.code === 'BUSY') {
+      if (confirm(r.error.message + '\n确认强制删除？')) {
+        const r2 = mResp(await menuSend({ type: 'menu.action', name: 'agent', action: 'delete', args: { aid, purge, force: true } }));
+        if (r2.error) toast(r2.error.message || r2.error.code, true);
+        else { toast('✓ 已删除'); subscribe('agents', {}); }
+      }
+      return;
+    }
+    if (r.error) { toast(r.error.message || r.error.code, true); return; }
+    toast('✓ 已删除');
+    subscribe('agents', {});
+  });
+}
+
+async function agentOpClearQueue(aid) {
+  if (!confirm(`清空 ${aid} 的待处理消息队列？`)) return;
+  await withAgentOp(aid, '清空中…', async () => {
+    const r = mResp(await menuSend({ type: 'menu.action', name: 'agent', action: 'queue-clear', args: { aid } }));
+    if (r.error) { toast(r.error.message || r.error.code, true); return; }
+    toast(`✓ 已清空 ${r.data?.cleared ?? 0} 条待处理消息`);
+    subscribe('agents', {});
+  });
+}
+
+async function agentOpStop(aid) {
+  await withAgentOp(aid, '停止中…', async () => {
+    const r = mResp(await menuSend({ type: 'menu.action', name: 'agent', action: 'stop', args: { aid } }));
+    if (r.error) { toast(r.error.message || r.error.code, true); return; }
+    toast('✓ 已停止');
+    subscribe('agents', {});
+  });
+}
+
+async function agentOpStart(aid) {
+  await withAgentOp(aid, '启动中…', async () => {
+    const r = mResp(await menuSend({ type: 'menu.action', name: 'agent', action: 'start', args: { aid } }));
+    if (r.error) { toast(r.error.message || r.error.code, true); return; }
+    toast('✓ 已启动');
+    subscribe('agents', {});
+  });
+}
+
+async function agentOpMute(aid) {
+  await withAgentOp(aid, '禁言中…', async () => {
+    const r = mResp(await menuSend({ type: 'menu.action', name: 'agent', action: 'mute', args: { aid } }));
+    if (r.error) { toast(r.error.message || r.error.code, true); return; }
+    toast('✓ 已禁言');
+    subscribe('agents', {});
+  });
+}
+
+async function agentOpUnmute(aid) {
+  await withAgentOp(aid, '解禁中…', async () => {
+    const r = mResp(await menuSend({ type: 'menu.action', name: 'agent', action: 'unmute', args: { aid } }));
+    if (r.error) { toast(r.error.message || r.error.code, true); return; }
+    toast('✓ 已解禁');
+    subscribe('agents', {});
+  });
+}
+
+async function agentOpNew() {
+  const aid = prompt('Agent AID（如 mybot.agentid.pub）：');
+  if (!aid) return;
+  const name = prompt('显示名：') || aid.split('.')[0];
+  const baseagent = prompt('后端（claude / codex / gemini）：', 'claude') || 'claude';
+  _agentBusy = true;
+  try {
+    const r = mResp(await menuSend({ type: 'menu.action', name: 'agent', action: 'create', args: { aid, name, baseagent } }));
+    if (r.error) { toast(r.error.message || r.error.code, true); return; }
+    toast('✓ 创建请求已受理，稍后刷新查看');
+    setTimeout(() => subscribe('agents', {}), 3000);
+  } catch (e) { toast(e.message, true); }
+  finally { _agentBusy = false; }
+}
+
+async function agentOpEdit(aid) {
+  await withAgentOp(aid, '查询中…', async () => {
+    const qr = await menuSend({ type: 'menu.query', name: 'agent', args: { aid } });
+    const q = mResp(qr);
+    if (q.error) { toast(q.error.message || q.error.code, true); return; }
+    const cfg = q.data;
+    setAgentOp(aid, null); // 查询完毕先恢复，等用户填完 prompt
+    const projectRaw = prompt('项目路径：', cfg.config?.projects?.defaultPath || '');
+    const ownersRaw = prompt('Owners（逗号分隔 AID）：', (cfg.config?.owners || []).join(', '));
+    const patch = {};
+    if (projectRaw !== null) patch.projects = { defaultPath: projectRaw };
+    if (ownersRaw !== null) patch.owners = ownersRaw.split(',').map(s => s.trim()).filter(Boolean);
+    if (!Object.keys(patch).length) return;
+    setAgentOp(aid, '保存中…');
+    const r = mResp(await menuSend({ type: 'menu.action', name: 'agent', action: 'update', args: { aid, patch } }));
+    if (r.error) toast(r.error.message || r.error.code, true);
+    else toast('✓ 配置已保存，点「重载」生效');
+  });
+}
+
+// ── System 视图 ──
+function channelHealthRow(c) {
+  const dot = c.connected ? 'on' : (c.aidStatus === 'reconnecting' || c.aidStatus === 'kicked' ? 'idle' : 'off');
+  let meta = '';
+  if (c.aidStatus && c.aidStatus !== 'connected') meta += ` <span style="color:var(--dim)">${esc(c.aidStatus)}</span>`;
+  if (c.reconnectCount > 0) meta += ` <span style="color:var(--dim)">重连 ${c.reconnectCount}</span>`;
+  if (c.flapCount > 0) meta += ` <span style="color:var(--red)">抖动 ${c.flapCount}</span>`;
+  const reason = c.kickReason || c.lastError;
+  if (reason && !c.connected) meta += ` <span style="color:var(--red)" title="${esc(reason)}">"${esc(reason)}"</span>`;
+  return `<div class="ch-row"><span class="dot ${dot}"></span>${esc(c.type)}${c.instName && c.instName !== c.type ? ' ' + esc(c.instName) : ''}${meta}</div>`;
+}
+
+function agentHealthCard(ag) {
+  const dot = ag.status === 'running' ? 'on' : ag.status === 'disabled' ? 'idle' : 'off';
+  let h = `<div class="agent-health-card">`;
+  h += `<div class="ahc-head"><span class="dot ${dot}"></span><span class="ahc-aid">${esc(ag.aid || ag.name)}</span><span class="ahc-status">${esc(ag.status)}</span></div>`;
+  // 项目路径
+  if (ag.projectPath) h += `<div class="ahc-row"><span class="ahc-k">项目</span><span class="ahc-v ahc-path" title="${esc(ag.projectPath)}">${esc(ag.projectPath)}</span></div>`;
+  // 后端
+  const backend = [ag.baseagent, ag.model, ag.effort].filter(Boolean).map(esc).join(' · ');
+  h += `<div class="ahc-row"><span class="ahc-k">后端</span><span class="ahc-v">${backend || '—'}</span></div>`;
+  // 渠道
+  let chans = '';
+  for (const c of (ag.channels || [])) chans += channelHealthRow(c);
+  h += `<div class="ahc-row"><span class="ahc-k">渠道</span><span class="ahc-v">${chans || '<span style="color:var(--dim)">无</span>'}</span></div>`;
+  // 负载
+  const load = `${ag.processing ?? 0} 处理中 · ${ag.pending ?? 0} 待处理 · ${ag.activeSessions ?? 0} 会话`;
+  h += `<div class="ahc-row"><span class="ahc-k">负载</span><span class="ahc-v">${load}</span></div>`;
+  // 活动
+  if (ag.lastActivity) h += `<div class="ahc-row"><span class="ahc-k">活动</span><span class="ahc-v">${fmtAgo(ag.lastActivity)} 前</span></div>`;
+  // 错误
+  if (ag.error) h += `<div class="ahc-err">⚠ ${esc(String(ag.error).slice(0, 120))}</div>`;
+  h += '</div>';
+  return h;
+}
+
+function renderSystem(data) {
+  const el = $('#view-system');
+  if (!data) { el.innerHTML = '<div class="empty">加载中…</div>'; return; }
+  const sys = data.system || {};
+  const up = data.upgrade;
+  const chk = data.check;
+
+  const vcard = (label, local, upInfo) => {
+    let badge = '';
+    if (upInfo?.hasUpdate && upInfo.remote) badge = ` <span style="color:var(--accent)">⬆ ${esc(upInfo.remote)}</span>`;
+    else if (upInfo?.remote) badge = ` <span style="color:var(--dim)">✓ 最新</span>`;
+    return `<div class="cache-card"><div class="card-label">${esc(label)}</div><div class="card-val">${esc(local || '—')}${badge}</div></div>`;
+  };
+
+  let html = '<div class="sys-wrap">';
+
+  // ① 版本卡
+  html += '<div class="cache-cards" style="margin-bottom:16px">';
+  html += vcard('evolclaw', sys.version, up?.evolclaw);
+  html += vcard('FASTAUN', sys.fastaunVersion, up?.fastaun);
+  html += vcard('ECWEB', data.ecwebVersion, up?.ecweb ? {
+    remote: up.ecweb.remote,
+    hasUpdate: !!(up.ecweb.remote && data.ecwebVersion && compareVer(data.ecwebVersion, up.ecweb.remote) < 0),
+  } : null);
+  html += `<div class="cache-card"><div class="card-label">NodeJS</div><div class="card-val">${esc(sys.node || '—')}</div></div>`;
+  html += `<div class="cache-card"><div class="card-label">运行时间</div><div class="card-val">${esc(fmtDur(sys.uptime))}</div></div>`;
+  html += `<div class="cache-card"><div class="card-label">PID</div><div class="card-val">${sys.pid || '—'}</div></div>`;
+  html += '</div>';
+
+  // ② 操作区
+  const devHint = up?.devMode ? ' <span style="color:var(--dim);font-size:0.85em">⏭ 开发模式，升级需手动操作</span>' : '';
+  html += '<div class="sys-actions" style="margin-bottom:16px">' +
+    '<button class="ctrl-btn" id="sys-check-btn">🔍 健康检查</button> ' +
+    '<button class="ctrl-btn" id="sys-upgrade-btn">⬆ 检查更新</button> ' +
+    '<button class="ctrl-btn danger" id="sys-restart-btn">⟳ 重启服务</button>' +
+    devHint +
+    '</div>';
+
+  // ③ 健康快照
+  if (chk) {
+    html += '<div class="sys-health">';
+    // 队列 + 近 1 小时（数字卡片同一行）
+    html += '<div class="cache-cards" style="margin-bottom:8px">';
+    html += `<div class="cache-card"><div class="card-label">队列</div><div class="card-val">${chk.queue?.pending ?? 0} 待 · ${chk.queue?.processing ?? 0} 处理中</div></div>`;
+    const h = chk.lastHour;
+    if (h) {
+      const errDetail = h.errors > 0 ? ` (${Object.entries(h.errorsByType || {}).map(([t, c]) => `${t}:${c}`).join(', ')})` : '';
+      const avg = h.completed > 0 ? ` · 均 ${(h.avgResponseMs / 1000).toFixed(1)}s` : '';
+      html += `<div class="cache-card"><div class="card-label">近 1 小时</div><div class="card-val">收 ${h.received} · 完 ${h.completed} · 错 ${h.errors}${errDetail} · 断 ${h.interrupts}${avg}</div></div>`;
+    }
+    html += '</div>';
+    // 每个 EvolAgent 一张卡片：后端 + 渠道健康 + 负载
+    if (chk.evolagents?.length) {
+      html += '<div class="agent-health-grid">';
+      for (const ag of chk.evolagents) html += agentHealthCard(ag);
+      html += '</div>';
+    }
+    // 未归属任何 EvolAgent 的渠道（系统级 / DefaultAgent）
+    if (chk.unownedChannels?.length) {
+      html += '<div class="cache-card" style="margin-top:8px"><div class="card-label">未归属渠道</div>';
+      for (const c of chk.unownedChannels) html += channelHealthRow(c);
+      html += '</div>';
+    }
+    html += '</div>';
+  }
+
+  html += '</div>';
+  el.innerHTML = html;
+  bindSystemEvents(el, data);
+}
+
+function bindSystemEvents(el, data) {
+  el.querySelector('#sys-check-btn')?.addEventListener('click', async () => {
+    try {
+      const r = mResp(await menuSend({ type: 'menu.action', name: 'system', action: 'check' }));
+      if (r.error) { toast(r.error.message || r.error.code, true); return; }
+      state.system = { ...(state.system || {}), check: r.data };
+      renderSystem(state.system);
+    } catch (e) { toast(e.message, true); }
+  });
+  el.querySelector('#sys-upgrade-btn')?.addEventListener('click', async () => {
+    try {
+      const r = mResp(await menuSend({ type: 'menu.action', name: 'system', action: 'upgrade' }));
+      if (r.error) { toast(r.error.message || r.error.code, true); return; }
+      state.system = { ...(state.system || {}), upgrade: r.data };
+      renderSystem(state.system);
+    } catch (e) { toast(e.message, true); }
+  });
+  el.querySelector('#sys-restart-btn')?.addEventListener('click', async () => {
+    if (!confirm('确认重启服务？当前所有连接将断开。')) return;
+    try {
+      await menuSend({ type: 'menu.action', name: 'system', action: 'restart' });
+      toast('重启中…');
+    } catch (e) { toast(e.message, true); }
+  });
+}
+
+// ── Triggers 视图 ──
+function trigStatusBadge(status) {
+  const map = {
+    active:    ['活跃', 'trig-badge-active'],
+    fired:     ['已触发', 'trig-badge-fired'],
+    cancelled: ['已取消', 'trig-badge-cancelled'],
+    expired:   ['已过期', 'trig-badge-expired'],
+  };
+  const [label, cls] = map[status] || [status, 'trig-badge-fired'];
+  return `<span class="trig-badge ${cls}">${esc(label)}</span>`;
+}
+
+function renderTriggers(data) {
+  if (!data) { $('#view-triggers').innerHTML = '<div class="empty">加载中…</div>'; return; }
+  const agents = data.agents || [];
+  const triggers = data.triggers || [];
+  const selAid = data.selectedAgent;
+
+  // 左列：agent 列表（仿 msg list-item 风格）
+  let aHtml = '<div class="col-title">Agent</div>';
+  if (!agents.length) aHtml += '<div class="empty">暂无 Agent</div>';
+  for (const ag of agents) {
+    const sel = ag.value === selAid ? ' sel' : '';
+    aHtml += `<div class="list-item${sel}" data-aid="${esc(ag.value)}">` +
+      `<div class="name">${esc(ag.label)}</div>` +
+      `<div class="sub">${esc(ag.value)}</div></div>`;
+  }
+  $('#trig-agents').innerHTML = aHtml;
+  $('#trig-agents').querySelectorAll('.list-item').forEach(item => {
+    item.onclick = () => { trigSel.agent = item.dataset.aid; subscribe('triggers', { agent: trigSel.agent }); };
+  });
+
+  // 右列：table，每字段一列
+  const el = $('#trig-table');
+  if (!selAid) { el.innerHTML = '<div class="empty" style="padding:16px">← 选择 Agent 查看触发器</div>'; return; }
+  if (!triggers.length) { el.innerHTML = '<div class="empty" style="padding:16px">该 Agent 暂无触发器</div>'; return; }
+
+  let html = '<table><thead><tr>' +
+    '<th>状态</th><th>名称</th><th>ID</th><th>类型</th><th>表达式</th>' +
+    '<th>上次触发</th><th>下次触发</th><th>触发次数</th><th>失败次数</th><th>最后结果</th><th>Session 策略</th>' +
+    '<th>目标渠道</th><th>渠道 ID</th><th>渠道类型</th>' +
+    '<th>创建者</th><th>创建渠道</th><th>创建时间</th><th>操作</th>' +
+    '</tr></thead><tbody>';
+  for (const t of triggers) {
+    const status = t.status || 'active';
+    const active = status === 'active';
+    html += `<tr class="${active ? '' : 'trig-done'}">` +
+      `<td>${trigStatusBadge(status)}</td>` +
+      `<td>${esc(t.name ?? t.label ?? '')}</td>` +
+      `<td>${esc(t.id ?? t.value ?? '')}</td>` +
+      `<td>${esc(t.scheduleType ?? '')}</td>` +
+      `<td>${t.scheduleType === 'at' && t.scheduleValue ? fmtTime(new Date(t.scheduleValue).getTime()) : esc(t.scheduleValue ?? '')}</td>` +
+      `<td>${t.lastFiredAt ? fmtTime(t.lastFiredAt) : '—'}</td>` +
+      `<td>${t.nextFireAt ? fmtTime(t.nextFireAt) : '—'}</td>` +
+      `<td>${t.fireCount ?? 0}</td>` +
+      `<td>${t.failCount ? `<span style="color:var(--red)">${t.failCount}</span>` : '0'}</td>` +
+      `<td>${t.lastResult ? esc(t.lastResult) : '—'}</td>` +
+      `<td>${esc(t.targetSessionStrategy ?? '')}</td>` +
+      `<td>${esc(t.targetChannel ?? '')}</td>` +
+      `<td>${esc(t.targetChannelId ?? '')}</td>` +
+      `<td>${esc(t.targetChannelType ?? '')}</td>` +
+      `<td>${esc(t.createdByPeerId ?? '')}</td>` +
+      `<td>${esc(t.createdByChannel ?? '')}</td>` +
+      `<td>${t.createdAt ? fmtTime(t.createdAt) : '—'}</td>` +
+      `<td>${active
+        ? `<button class="ctrl-btn danger" data-trigid="${esc(t.id ?? t.value ?? '')}" data-trigname="${esc(t.name ?? t.label ?? '')}">取消</button>`
+        : '—'}</td>` +
+      '</tr>';
+  }
+  html += '</tbody></table>';
+  el.innerHTML = html;
+
+  el.querySelectorAll('button[data-trigid]').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      const nameOrId = btn.dataset.trigid;
+      const label = btn.dataset.trigname;
+      if (!confirm(`取消触发器「${label}」？`)) return;
+      try {
+        const r = mResp(await menuSend({
+          type: 'menu.action', name: 'trigger', action: 'cancel',
+          args: { nameOrId }, agent: selAid,
+        }));
+        if (r.error) toast(r.error.message || r.error.code, true);
+        else { toast('✓ 已取消'); subscribe('triggers', { agent: trigSel.agent }); }
+      } catch (e) { toast(e.message, true); }
+    });
+  });
+}
+
+
 function startApp() {
   initTabs();
   connect();
@@ -539,17 +1387,585 @@ function startApp() {
   };
 }
 
+// ── 主题切换 ──
+function initTheme() {
+  const saved = localStorage.getItem('ecTheme') || 'light';
+  document.documentElement.setAttribute('data-theme', saved);
+  const btn = $('#theme-btn');
+  if (btn) {
+    btn.textContent = saved === 'dark' ? '☀️' : '🌙';
+    btn.onclick = () => {
+      const cur = document.documentElement.getAttribute('data-theme');
+      const next = cur === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', next);
+      localStorage.setItem('ecTheme', next);
+      btn.textContent = next === 'dark' ? '☀️' : '🌙';
+      if (_hourlyChart) { _hourlyChart.dispose(); _hourlyChart = null; }
+      if (_modelChart) { _modelChart.dispose(); _modelChart = null; }
+      ['_monCpu', '_monMem', '_monMsg', '_monErr'].forEach(function (k) {
+        if (window[k]) { window[k].dispose(); window[k] = null; }
+      });
+      loadUsageDashboard();
+      if (currentView === 'monitor') renderMonitor(state.monitor);
+    };
+  }
+}
+
+// ── Usage Dashboard ──
+let _hourlyChart = null;
+let _modelChart = null;
+
+function fmtTokens(n) {
+  if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'k';
+  return String(n);
+}
+
+async function loadUsageDashboard() {
+  let data;
+  try {
+    const resp = await fetch('/api/stats/dashboard', {
+      headers: { Authorization: 'Bearer ' + localStorage.getItem(TOKEN_KEY) }
+    });
+    if (!resp.ok) data = null;
+    else data = await resp.json();
+  } catch { data = null; }
+
+  // 无数据时渲染默认空状态
+  const t = (data && data.today) ? data.today : { input_tokens: 0, output_tokens: 0, cache_read_tokens: 0, cache_hit_rate: 0, call_count: 0 };
+  var cards = $('#usage-cards');
+  if (cards) {
+    cards.innerHTML =
+      '<div class="usage-card"><div class="card-value">' + fmtTokens(t.input_tokens) + '</div><div class="card-label">Input</div></div>' +
+      '<div class="usage-card"><div class="card-value">' + fmtTokens(t.output_tokens) + '</div><div class="card-label">Output</div></div>' +
+      '<div class="usage-card"><div class="card-value">' + fmtTokens(t.cache_read_tokens) + '</div><div class="card-label">Cache Read</div></div>' +
+      '<div class="usage-card"><div class="card-value">' + (t.cache_hit_rate * 100).toFixed(1) + '%</div><div class="card-label">Cache Hit</div></div>' +
+      '<div class="usage-card"><div class="card-value">' + t.call_count + '</div><div class="card-label">Calls</div></div>';
+  }
+
+  // Hourly stacked bar
+  var hourlyEl = $('#usage-hourly-chart');
+  if (hourlyEl && data.hourly && data.hourly.length) {
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+    if (!_hourlyChart) _hourlyChart = echarts.init(hourlyEl, isDark ? 'dark' : null);
+    var hours = data.hourly.map(function(h) { return (h.hour.split(' ')[1] || h.hour); });
+    _hourlyChart.setOption({
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['Input', 'Output', 'Cache'], top: 0, textStyle: { fontSize: 11 } },
+      grid: { top: 30, bottom: 24, left: 50, right: 16 },
+      xAxis: { type: 'category', data: hours, axisLabel: { fontSize: 10 } },
+      yAxis: { type: 'value', axisLabel: { formatter: function(v) { return fmtTokens(v); } } },
+      series: [
+        { name: 'Input', type: 'bar', stack: 'tokens', data: data.hourly.map(function(h) { return h.input_tokens; }), itemStyle: { color: '#4f6ef7' } },
+        { name: 'Output', type: 'bar', stack: 'tokens', data: data.hourly.map(function(h) { return h.output_tokens; }), itemStyle: { color: '#38a169' } },
+        { name: 'Cache', type: 'bar', stack: 'tokens', data: data.hourly.map(function(h) { return h.cache_read_tokens; }), itemStyle: { color: '#dd6b20', opacity: 0.6 } },
+      ]
+    });
+  }
+
+  // Model pie
+  var modelEl = $('#usage-model-chart');
+  if (modelEl && data.top_models && data.top_models.length) {
+    var isDark2 = document.documentElement.getAttribute('data-theme') === 'dark';
+    if (!_modelChart) _modelChart = echarts.init(modelEl, isDark2 ? 'dark' : null);
+    _modelChart.setOption({
+      tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+      series: [{
+        type: 'pie', radius: ['35%', '70%'], center: ['50%', '55%'],
+        label: { fontSize: 10 },
+        data: data.top_models.map(function(m) { return { name: m.model.split('/').pop(), value: m.total_tokens }; }),
+      }]
+    });
+  }
+
+  // Top peers table
+  var peersEl = $('#usage-top-peers');
+  if (peersEl && data.top_peers && data.top_peers.length) {
+    peersEl.innerHTML =
+      '<thead><tr><th>#</th><th>Peer</th><th>Tokens</th><th>Calls</th></tr></thead>' +
+      '<tbody>' + data.top_peers.map(function(p, i) {
+        return '<tr><td>' + (i + 1) + '</td><td>' + p.peer_key + '</td><td>' + fmtTokens(p.total_tokens) + '</td><td>' + p.call_count + '</td></tr>';
+      }).join('') + '</tbody>';
+  }
+
+}
+
+// ── Usage Overview（全时段总览）──
+async function loadUsageOverview() {
+  let data;
+  try {
+    const resp = await fetch('/api/stats/overview', {
+      headers: { Authorization: 'Bearer ' + localStorage.getItem(TOKEN_KEY) }
+    });
+    data = resp.ok ? await resp.json() : null;
+  } catch { data = null; }
+
+  const ts = (data && data.token_stats && data.token_stats.all_time) ? data.token_stats.all_time
+    : { input_tokens: 0, output_tokens: 0, cache_creation_tokens: 0, cache_read_tokens: 0, call_count: 0, cost_usd: 0, cost_cny: 0 };
+  const sessionCount = (data && data.session_count) || 0;
+  const msgIn = (data && data.msg_in) || 0;
+  const msgOut = (data && data.msg_out) || 0;
+  const totalIn = ts.input_tokens + ts.cache_read_tokens;
+  const hitRate = totalIn > 0 ? (ts.cache_read_tokens / totalIn) * 100 : 0;
+
+  const cardsEl = $('#ov-cards');
+  if (cardsEl) {
+    cardsEl.innerHTML = [
+      ovCard(sessionCount, '会话数'),
+      ovCard(msgIn, '收到消息'),
+      ovCard(msgOut, '发出消息'),
+      ovCard(ts.call_count, '模型调用'),
+      ovCard(fmtTokens(ts.input_tokens), '输入 Token'),
+      ovCard(fmtTokens(ts.output_tokens), '输出 Token'),
+      ovCard(fmtTokens(ts.cache_creation_tokens), '缓存创建'),
+      ovCard(fmtTokens(ts.cache_read_tokens), '缓存命中'),
+      ovCard(hitRate.toFixed(1) + '%', '缓存命中率'),
+      ovCard(fmtCost(ts.cost_usd, ts.cost_cny), '总花费'),
+    ].join('');
+  }
+
+  const agentTbl = $('#ov-agent-table');
+  const agents = (data && data.token_stats && data.token_stats.by_agent) || [];
+  if (agentTbl) {
+    if (!agents.length) {
+      agentTbl.innerHTML = '<tbody><tr><td>暂无数据</td></tr></tbody>';
+    } else {
+      agentTbl.innerHTML =
+        '<thead><tr><th>Agent</th><th>调用</th><th>输入</th><th>输出</th><th>缓存创建</th><th>缓存命中</th><th>花费</th></tr></thead>' +
+        '<tbody>' + agents.map(function(a) {
+          var name = a.agent_aid ? a.agent_aid.split('.')[0] : '(unknown)';
+          return '<tr><td title="' + esc(a.agent_aid) + '">' + esc(name) + '</td>' +
+            '<td>' + a.call_count + '</td>' +
+            '<td>' + fmtTokens(a.input_tokens) + '</td>' +
+            '<td>' + fmtTokens(a.output_tokens) + '</td>' +
+            '<td>' + fmtTokens(a.cache_creation_tokens) + '</td>' +
+            '<td>' + fmtTokens(a.cache_read_tokens) + '</td>' +
+            '<td>' + fmtCost(a.cost_usd, a.cost_cny) + '</td></tr>';
+        }).join('') + '</tbody>';
+    }
+  }
+}
+
+function ovCard(value, label) {
+  return '<div class="usage-card"><div class="card-value">' + value + '</div><div class="card-label">' + label + '</div></div>';
+}
+
+function fmtCost(usd, cny) {
+  var parts = [];
+  if (usd > 0) parts.push('$' + (usd < 0.01 ? usd.toFixed(4) : usd.toFixed(2)));
+  if (cny > 0) parts.push('¥' + (cny < 0.01 ? cny.toFixed(4) : cny.toFixed(2)));
+  return parts.length ? parts.join(' / ') : '$0';
+}
+
+// ── Usage subtab switching ──
+function initUsageSubtabs() {
+  var btns = document.querySelectorAll('.usage-subtab');
+  btns.forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      btns.forEach(function(b) { b.classList.remove('active'); });
+      btn.classList.add('active');
+      var target = btn.getAttribute('data-subview');
+      document.querySelectorAll('.usage-subpanel').forEach(function(p) {
+        p.classList.remove('active');
+        p.style.display = '';
+      });
+      var panel = $('#usage-' + target);
+      if (panel) { panel.classList.add('active'); panel.style.display = ''; }
+      if (target === 'overview') loadUsageOverview();
+      else if (target === 'dashboard') loadUsageDashboard();
+      else if (target === 'explorer') initExplorer();
+    });
+  });
+}
+
+// ── Explorer ──
+var _explorerChart = null;
+var _explorerInited = false;
+var _expSelection = { type: null, key: null }; // { type: 'agent'|'peer', key: string } or null
+
+function initExplorer() {
+  if (_explorerInited) return;
+  _explorerInited = true;
+  var btn = $('#exp-query-btn');
+  if (btn) btn.onclick = runExplorerQuery;
+  // Default date range: last 7 days
+  var now = new Date();
+  var from = new Date(now.getTime() - 7 * 86400000);
+  var fromEl = $('#exp-from');
+  var toEl = $('#exp-to');
+  if (fromEl) fromEl.value = from.toISOString().slice(0, 10);
+  if (toEl) toEl.value = now.toISOString().slice(0, 10);
+  // Load sidebar lists
+  loadExplorerSidebar();
+}
+
+async function loadExplorerSidebar() {
+  var token = localStorage.getItem(TOKEN_KEY);
+  var headers = { Authorization: 'Bearer ' + token };
+  try {
+    var [agentsResp, peersResp] = await Promise.all([
+      fetch('/api/stats/agents', { headers }),
+      fetch('/api/stats/peers', { headers }),
+    ]);
+    var agents = agentsResp.ok ? await agentsResp.json() : [];
+    var peers = peersResp.ok ? await peersResp.json() : [];
+    renderExplorerSidebar(agents, peers);
+  } catch {}
+}
+
+function renderExplorerSidebar(agents, peers) {
+  var agentList = $('#exp-agent-list');
+  var peerList = $('#exp-peer-list');
+  if (!agentList || !peerList) return;
+
+  // "All" item for agents
+  var allHtml = '<div class="exp-sidebar-item active" data-type="all" data-key="">' +
+    '<span class="item-name">全部</span></div>';
+
+  agentList.innerHTML = allHtml + agents.map(function(a) {
+    var name = a.agent_aid ? a.agent_aid.split('.')[0] : 'unknown';
+    return '<div class="exp-sidebar-item" data-type="agent" data-key="' + escHtml(a.agent_aid) + '">' +
+      '<span class="item-name" title="' + escHtml(a.agent_aid) + '">' + escHtml(name) + '</span>' +
+      '<span class="item-meta">' + fmtTokens(a.input_tokens + a.output_tokens) + '</span></div>';
+  }).join('');
+
+  peerList.innerHTML = peers.map(function(p) {
+    var name = p.peer_key || 'unknown';
+    // 简化显示：去掉 channel# 前缀中的 aun#，保留核心部分
+    var display = name.replace(/^aun#/, '').split('.')[0];
+    return '<div class="exp-sidebar-item" data-type="peer" data-key="' + escHtml(p.peer_key) + '">' +
+      '<span class="item-name" title="' + escHtml(name) + '">' + escHtml(display) + '</span>' +
+      '<span class="item-meta">' + fmtTokens((p.input_tokens || 0) + (p.output_tokens || 0)) + '</span></div>';
+  }).join('');
+
+  // Bind click events
+  var allItems = document.querySelectorAll('#exp-agent-list .exp-sidebar-item, #exp-peer-list .exp-sidebar-item');
+  allItems.forEach(function(el) {
+    el.addEventListener('click', function() {
+      // Clear active from all
+      allItems.forEach(function(x) { x.classList.remove('active'); });
+      el.classList.add('active');
+      var type = el.getAttribute('data-type');
+      var key = el.getAttribute('data-key');
+      if (type === 'all') {
+        _expSelection = { type: null, key: null };
+        $('#exp-selected-name').textContent = '全部';
+      } else {
+        _expSelection = { type: type, key: key };
+        $('#exp-selected-name').textContent = key;
+      }
+      runExplorerQuery();
+    });
+  });
+}
+
+function escHtml(s) { return (s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+
+async function runExplorerQuery() {
+  var params = new URLSearchParams();
+  var fromEl = $('#exp-from');
+  var toEl = $('#exp-to');
+  if (fromEl && fromEl.value) params.set('from', String(new Date(fromEl.value + 'T00:00:00').getTime()));
+  if (toEl && toEl.value) params.set('to', String(new Date(toEl.value + 'T23:59:59').getTime()));
+  // Inject selection from sidebar
+  if (_expSelection.type === 'agent' && _expSelection.key) params.set('agent', _expSelection.key);
+  if (_expSelection.type === 'peer' && _expSelection.key) params.set('peer', _expSelection.key);
+  var modelEl = $('#exp-model');
+  if (modelEl && modelEl.value) params.set('model', modelEl.value);
+  var granEl = $('#exp-granularity');
+  if (granEl) params.set('granularity', granEl.value);
+
+  var data;
+  try {
+    var resp = await fetch('/api/stats/explorer?' + params.toString(), {
+      headers: { Authorization: 'Bearer ' + localStorage.getItem(TOKEN_KEY) }
+    });
+    if (!resp.ok) return;
+    data = await resp.json();
+  } catch { return; }
+
+  // Show/hide detail cards
+  var cardsEl = $('#exp-detail-cards');
+  if (data && data.length) {
+    var totIn = 0, totOut = 0, totCache = 0, totCalls = 0;
+    data.forEach(function(r) { totIn += r.input_tokens; totOut += r.output_tokens; totCache += r.cache_read_tokens; totCalls += r.call_count; });
+    if (cardsEl) {
+      cardsEl.style.display = 'flex';
+      cardsEl.innerHTML =
+        '<div class="usage-card"><div class="card-value">' + fmtTokens(totIn) + '</div><div class="card-label">Input</div></div>' +
+        '<div class="usage-card"><div class="card-value">' + fmtTokens(totOut) + '</div><div class="card-label">Output</div></div>' +
+        '<div class="usage-card"><div class="card-value">' + fmtTokens(totCache) + '</div><div class="card-label">Cache Read</div></div>' +
+        '<div class="usage-card"><div class="card-value">' + totCalls + '</div><div class="card-label">Calls</div></div>';
+    }
+  } else {
+    if (cardsEl) cardsEl.style.display = 'none';
+  }
+
+  if (!data || !data.length) {
+    var tbl = $('#usage-explorer-table');
+    if (tbl) tbl.innerHTML = '<tr><td>No data for selected range.</td></tr>';
+    var chartEl = $('#usage-explorer-chart');
+    if (chartEl && _explorerChart) { _explorerChart.dispose(); _explorerChart = null; }
+    return;
+  }
+
+  // Chart
+  var chartEl = $('#usage-explorer-chart');
+  if (chartEl) {
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+    if (_explorerChart) { _explorerChart.dispose(); _explorerChart = null; }
+    _explorerChart = echarts.init(chartEl, isDark ? 'dark' : null);
+    var periods = data.map(function(r) { return r.period; });
+    _explorerChart.setOption({
+      tooltip: { trigger: 'axis' },
+      legend: { data: ['Input', 'Output'], top: 0, textStyle: { fontSize: 11 } },
+      grid: { top: 30, bottom: 30, left: 60, right: 16 },
+      xAxis: { type: 'category', data: periods, axisLabel: { fontSize: 10, rotate: 30 } },
+      yAxis: { type: 'value', axisLabel: { formatter: function(v) { return fmtTokens(v); } } },
+      series: [
+        { name: 'Input', type: 'line', data: data.map(function(r) { return r.input_tokens; }), smooth: true, areaStyle: { opacity: 0.15 }, itemStyle: { color: '#4f6ef7' } },
+        { name: 'Output', type: 'line', data: data.map(function(r) { return r.output_tokens; }), smooth: true, areaStyle: { opacity: 0.15 }, itemStyle: { color: '#38a169' } },
+      ]
+    });
+  }
+
+  // Table
+  var tbl = $('#usage-explorer-table');
+  if (tbl) {
+    tbl.innerHTML =
+      '<thead><tr><th>Period</th><th>Input</th><th>Output</th><th>Cache↑</th><th>CacheHit</th><th>Calls</th></tr></thead>' +
+      '<tbody>' + data.map(function(r) {
+        return '<tr><td>' + r.period + '</td><td>' + fmtTokens(r.input_tokens) + '</td><td>' + fmtTokens(r.output_tokens) +
+          '</td><td>' + fmtTokens(r.cache_creation_tokens) + '</td><td>' + fmtTokens(r.cache_read_tokens) +
+          '</td><td>' + r.call_count + '</td></tr>';
+      }).join('') + '</tbody>';
+  }
+}
+
+// ── Monitor ──────────────────────────────────────
+// 绑定时间范围切换按钮（只绑一次）
+let _monRangeBound = false;
+function bindMonRangeTabs() {
+  if (_monRangeBound) return;
+  var tabs = document.querySelectorAll('#view-monitor .mon-range');
+  if (!tabs.length) return;
+  tabs.forEach(function (btn) {
+    btn.onclick = function () {
+      monRange = btn.dataset.range;
+      document.querySelectorAll('#view-monitor .mon-range').forEach(function (b) {
+        b.classList.toggle('active', b.dataset.range === monRange);
+      });
+      // 切范围 → 重新订阅（源按 range 返回不同分辨率的 history）
+      subscribe('monitor', { range: monRange });
+    };
+  });
+  _monRangeBound = true;
+}
+
+function renderMonitor(data) {
+  var wrap = $('#view-monitor .mon-layout');
+  if (!wrap) return;
+  bindMonRangeTabs();
+  if (!data) { return; }
+  if (!data.daemonRunning) {
+    // 不清空骨架，仅在卡片区提示，避免破坏 toolbar
+    var cardsEl0 = $('#mon-cards');
+    if (cardsEl0) cardsEl0.innerHTML = '<div class="empty" style="grid-column:1/-1">daemon 未运行</div>';
+    return;
+  }
+
+  var s = data.snapshot;
+  // history 是三档分辨率对象 { fine, mid, coarse }；按当前范围选一档
+  var rangeKey = { '2m': 'fine', '10m': 'mid', '1h': 'coarse' }[monRange] || 'fine';
+  var hist = data.history || {};
+  var h = Array.isArray(hist) ? hist : (hist[rangeKey] || []);
+  var sys = s.system || {};
+  var lh = (s.stats && s.stats.lastHour) || {};
+  var recentErrs = (s.stats && s.stats.recentErrors) || [];
+  var errRate = (lh.received > 0) ? ((lh.errors / lh.received) * 100).toFixed(1) + '%' : '0%';
+  var agents = s.agents || [];
+  var connected = agents.filter(function (a) { return a.status === 'connected'; }).length;
+
+  // ── Stat cards ──
+  var sysMemPct = (sys.memTotal > 0) ? Math.round((sys.memUsed / sys.memTotal) * 100) : 0;
+  var cards = [
+    ['Uptime', fmtDur(s.uptimeMs / 1000)],
+    ['消息 (1h)', lh.received || 0],
+    ['在线 Agent', connected + '/' + agents.length],
+    ['平均响应', Math.round(lh.avgResponseMs || 0) + 'ms'],
+    ['错误率', errRate],
+    ['进程 CPU', (s.cpuPercent != null ? s.cpuPercent : 0) + '%'],
+    ['系统 CPU', (sys.cpuPercent != null ? sys.cpuPercent : 0) + '%'],
+    ['进程内存', fmtBytes(s.memory ? s.memory.rss : 0)],
+    ['系统内存', sysMemPct + '%'],
+  ];
+  $('#mon-cards').innerHTML = cards.map(function (c) {
+    return '<div class="usage-card"><div class="card-value">' + c[1] + '</div><div class="card-label">' + c[0] + '</div></div>';
+  }).join('');
+
+  var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+  var ts = h.map(function (p) { return new Date(p.ts).toLocaleTimeString(); });
+  var css = function (v) { return getComputedStyle(document.documentElement).getPropertyValue(v).trim(); };
+  var cProc = css('--accent'), cSys = css('--orange');
+
+  // ── CPU dual-line：进程 vs 系统 ──
+  monDualLine('mon-cpu-chart', '_monCpu', ts, isDark, 'CPU 占用',
+    [
+      { name: 'evolclaw 进程', data: h.map(function (p) { return p.procCpu; }), color: cProc },
+      { name: '整机系统', data: h.map(function (p) { return p.sysCpu != null ? p.sysCpu : null; }), color: cSys },
+    ],
+    function (v) { return Number(v).toFixed(1) + '%'; }, [0, 100]);
+
+  // ── Memory dual-line：进程 RSS vs 系统已用 ──
+  monDualLine('mon-mem-chart', '_monMem', ts, isDark, '内存占用',
+    [
+      { name: 'evolclaw RSS', data: h.map(function (p) { return p.procRss; }), color: cProc },
+      { name: '系统已用', data: h.map(function (p) { return p.sysMemUsed != null ? p.sysMemUsed : null; }), color: cSys },
+    ],
+    function (v) { return fmtBytes(v); }, null);
+
+  // ── Message activity bar chart ──
+  var msgEl = $('#mon-msg-chart');
+  if (msgEl) {
+    if (!window._monMsg) window._monMsg = echarts.init(msgEl, isDark ? 'dark' : null);
+    window._monMsg.setOption({
+      title: { text: '近一小时活动', left: 'center', top: 4, textStyle: { fontSize: 12, color: isDark ? '#e6edf3' : '#1a202c' } },
+      tooltip: { trigger: 'axis' },
+      grid: { top: 36, bottom: 24, left: 44, right: 12 },
+      xAxis: { type: 'category', data: ['Received', 'Completed', 'Errors', 'Interrupts', 'ToolErr'], axisLabel: { fontSize: 9 } },
+      yAxis: { type: 'value', minInterval: 1 },
+      series: [{
+        type: 'bar', barWidth: '45%',
+        data: [
+          { value: lh.received || 0, itemStyle: { color: css('--accent') } },
+          { value: lh.completed || 0, itemStyle: { color: css('--green') } },
+          { value: lh.errors || 0, itemStyle: { color: css('--red') } },
+          { value: lh.interrupts || 0, itemStyle: { color: css('--orange') } },
+          { value: lh.toolErrors || 0, itemStyle: { color: css('--blue') } },
+        ],
+      }],
+      animation: false,
+    });
+  }
+
+  // ── Error breakdown donut ──
+  var errEntries = Object.entries(lh.errorsByType || {});
+  var errEl = $('#mon-err-chart');
+  if (errEl) {
+    if (errEntries.length) {
+      if (!window._monErr) window._monErr = echarts.init(errEl, isDark ? 'dark' : null);
+      window._monErr.setOption({
+        title: { text: '错误分布', left: 'center', top: 4, textStyle: { fontSize: 12, color: isDark ? '#e6edf3' : '#1a202c' } },
+        tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
+        series: [{
+          type: 'pie', radius: ['32%', '64%'], center: ['50%', '56%'],
+          label: { fontSize: 10 },
+          data: errEntries.map(function (e) { return { name: e[0], value: e[1] }; }),
+        }],
+        animation: false,
+      });
+    } else {
+      if (window._monErr) { window._monErr.dispose(); window._monErr = null; }
+      errEl.innerHTML = '<div class="empty" style="padding:24px;font-size:12px">近一小时无错误</div>';
+    }
+  }
+
+  // ── Per-agent table ──
+  var dotMap = { connected: 'on', reconnecting: 'idle', aid_blocked: 'idle', kicked: 'off', kicked_no_retry: 'off', failed: 'off', disabled: 'off' };
+  $('#mon-agent-table-wrap').innerHTML =
+    '<div class="mon-section-title">各 Agent 运行状态</div>' +
+    '<table class="usage-table"><thead><tr>' +
+    '<th>Agent</th><th>状态</th><th>收</th><th>发</th><th>流入</th><th>流出</th><th>对端</th><th>队列</th><th>处理中</th>' +
+    '</tr></thead><tbody>' +
+    (agents.length ? agents.map(function (a) {
+      var st = a.stats || {};
+      var dot = dotMap[a.status] || 'off';
+      return '<tr>' +
+        '<td title="' + esc(a.aid) + '">' + esc(a.agentName || shortAid(a.aid)) + '</td>' +
+        '<td><span class="dot ' + dot + '"></span>' + esc(a.status) + '</td>' +
+        '<td>' + (st.messagesReceived || 0) + '</td>' +
+        '<td>' + (st.messagesSent || 0) + '</td>' +
+        '<td>' + fmtBytes(st.bytesReceived || 0) + '</td>' +
+        '<td>' + fmtBytes(st.bytesSent || 0) + '</td>' +
+        '<td>' + (st.uniquePeerCount || 0) + '</td>' +
+        '<td>' + (st.queued || 0) + '</td>' +
+        '<td>' + (st.processing ? '⚙ ' + st.processing : 0) + '</td>' +
+        '</tr>';
+    }).join('') : '<tr><td colspan="9" style="text-align:center;color:var(--dim)">暂无 Agent</td></tr>') +
+    '</tbody></table>';
+
+  // ── Recent errors（替换原 Channels 位置）──
+  $('#mon-err-list').innerHTML =
+    '<div class="mon-section-title">最近错误 <span class="mon-section-sub">(最多 50 条)</span></div>' +
+    (recentErrs.length
+      ? '<div class="mon-err-rows">' + recentErrs.map(function (e) {
+          var who = e.agentName ? shortAid(e.agentName) : '—';
+          var tag = e.kind === 'tool'
+            ? '<span class="mon-err-tag tag-tool">工具</span>'
+            : '<span class="mon-err-tag tag-task">任务</span>';
+          var label = e.kind === 'tool' ? (e.toolName || 'tool') : (e.errorType || 'error');
+          var msg = e.message ? esc(e.message) : '';
+          return '<div class="mon-err-row">' +
+            '<span class="mon-err-time">' + fmtAgo(e.ts) + '</span>' +
+            tag +
+            '<span class="mon-err-aid" title="' + esc(e.agentName || '') + '">' + esc(who) + '</span>' +
+            '<span class="mon-err-kind">' + esc(label) + '</span>' +
+            '<span class="mon-err-msg" title="' + msg + '">' + msg + '</span>' +
+            '</div>';
+        }).join('') + '</div>'
+      : '<div class="empty" style="padding:24px;font-size:12px">暂无错误记录</div>');
+}
+
+// 双线时序图（进程 + 系统）。series: [{name,data,color}]
+function monDualLine(elId, varKey, times, isDark, title, series, fmtY, yRange) {
+  var el = $('#' + elId);
+  if (!el) return;
+  if (!window[varKey]) window[varKey] = echarts.init(el, isDark ? 'dark' : null);
+  window[varKey].setOption({
+    title: { text: title, left: 'center', top: 4, textStyle: { fontSize: 12, color: isDark ? '#e6edf3' : '#1a202c' } },
+    legend: { show: false },
+    tooltip: {
+      trigger: 'axis',
+      formatter: function (params) {
+        var lines = [params[0].axisValue];
+        params.forEach(function (pt) {
+          if (pt.value == null) return;
+          lines.push(pt.marker + pt.seriesName + ': ' + (fmtY ? fmtY(pt.value) : pt.value));
+        });
+        return lines.join('<br/>');
+      },
+    },
+    grid: { top: 36, bottom: 24, left: 56, right: 12 },
+    xAxis: { type: 'category', data: times, boundaryGap: false, axisLabel: { fontSize: 9 } },
+    yAxis: {
+      type: 'value',
+      min: (yRange ? yRange[0] : 0),
+      max: (yRange ? yRange[1] : undefined),
+      axisLabel: { formatter: fmtY ? function (v) { return fmtY(v); } : '{value}' },
+    },
+    series: series.map(function (sr) {
+      return {
+        name: sr.name, type: 'line', data: sr.data, smooth: true, symbol: 'none',
+        connectNulls: true,
+        lineStyle: { width: 2, color: sr.color },
+        areaStyle: { color: sr.color, opacity: 0.08 },
+        itemStyle: { color: sr.color },
+      };
+    }),
+    animation: false,
+  });
+}
+
 window.addEventListener('DOMContentLoaded', () => {
+  initTheme();
   initPairUI();
   if (localStorage.getItem(TOKEN_KEY)) {
     showApp();
     startApp();
+    loadUsageDashboard();
+    loadUsageOverview();
+    initUsageSubtabs();
   } else {
     showPairPage();
   }
 });
-
-
-
-
-