ec-web 0.0.3 → 0.0.5

package/dist/static/app.js

@@ -296,10 +296,19 @@ const translations = {
     'sessions.turnType.toolUse': '工具使用',
     'sessions.turnType.toolResult': '工具结果',
     'sessions.turnType.msgSend': '发送消息',
-    'sessions.count': '{filtered} / {total} 个会话',
+    'sessions.count': '{count} 个会话',
     'sessions.filter.valid': '有效',
     'sessions.filter.validTitle': '只显示有效会话（≥1 条用户消息）',
+    'sessions.filter.all': '全部',
+    'sessions.filter.allTitle': '显示全部会话（包括无用户消息的会话）',
+    'sessions.filter.sourceTitle': '按会话类型筛选',
+    'sessions.filter.sourceAll': '全部类型',
     'sessions.messageCountTitle': '用户输入 {user} 条 / 共 {total} 条消息',
+    'sessions.source.trigger': 'Trigger',
+    'sessions.source.agent': 'Agent',
+    'sessions.source.cli': 'CLI',
+    'sessions.source.user': '用户',
+    'sessions.source.unknown': 'Unknown',
     'sessions.selectLog': '选择会话查看 CC 日志',
     'sessions.chatView': '💬 对话视图',
     'sessions.fullView': '📜 完整视图',
@@ -309,7 +318,16 @@ const translations = {
     'sessions.empty.noDialogue': '该会话没有用户对话消息',
     'sessions.turnType.userInput': '用户输入',
     'sessions.turnType.toolCall': '工具调用',
+    'sessions.turnType.subtask': '子任务',
     'sessions.turnType.system': '系统',
+    'sessions.subtask.status.running': '运行中',
+    'sessions.subtask.status.completed': '已完成',
+    'sessions.subtask.status.failed': '失败',
+    'sessions.subtask.status.stopped': '已停止',
+    'sessions.subtask.status.killed': '已终止',
+    'sessions.subtask.tools': '{count} 次工具',
+    'sessions.subtask.tokens': '{count} tokens',
+    'sessions.subtask.reason': '原因：{reason}',
     'sessions.block.thinking': '思考',
     'sessions.block.result': '结果',
     'sessions.block.resultError': '结果',
@@ -374,13 +392,11 @@ const translations = {
     'monitor.card.systemMemory': '系统内存',
     'monitor.chart.cpu': 'CPU 占用',
     'monitor.chart.memory': '内存占用',
-    'monitor.chart.activity1h': '近一小时活动',
+    'monitor.chart.disk': '磁盘读写',
     'monitor.chart.network': '网络占用',
-    'monitor.activity.received': '接收',
-    'monitor.activity.completed': '完成',
-    'monitor.activity.errors': '错误',
-    'monitor.activity.interrupts': '中断',
-    'monitor.activity.toolErrors': '工具错误',
+    'monitor.series.diskRead': '读取',
+    'monitor.series.diskWrite': '写入',
+    'monitor.series.processTotal': '关联进程',
     'monitor.series.processRss': 'Daemon 进程组 RSS',
     'monitor.processes.daemon': '主进程',
     'monitor.processes.ecweb': 'ECWeb',
@@ -394,7 +410,7 @@ const translations = {
     'monitor.processes.sandbox': '沙箱',
     'monitor.processes.runner-helper': 'Runner 辅助',
     'monitor.processes.child': '关联进程',
-    'monitor.series.systemUsed': '系统已用',
+    'monitor.series.systemUsed': '整机系统（已用）',
     'monitor.series.networkDownload': '下载',
     'monitor.series.networkUpload': '上传',
     'monitor.th.received': '收',
@@ -641,6 +657,7 @@ const translations = {
     'triggers.feedback.defaultFailure': '默认：触发器失败：{{error.message}}',
     'triggers.field.model': '模型',
     'triggers.field.effort': '推理强度',
+    'triggers.baseagent.mismatch': 'Trigger 固定：{trigger}，Agent 当前：{agent}',
     'triggers.field.permission': '权限模式',
     'triggers.delivery.on': '启用',
     'triggers.delivery.off': '禁用',
@@ -705,7 +722,7 @@ const translations = {
     // Usage view
     'usage.subtab.overview': '总览',
     'usage.subtab.explorer': '详细统计',
-    'usage.overview.range.today': '今日',
+    'usage.overview.range.last24': '最近24小时',
     'usage.overview.range.week': '本周',
     'usage.overview.range.lastWeek': '上周',
     'usage.overview.range.month': '本月',
@@ -1154,10 +1171,19 @@ const translations = {
     'sessions.turnType.toolUse': 'Tool Use',
     'sessions.turnType.toolResult': 'Tool Result',
     'sessions.turnType.msgSend': 'Send Message',
-    'sessions.count': '{filtered} / {total} sessions',
+    'sessions.count': '{count} sessions',
     'sessions.filter.valid': 'Valid',
     'sessions.filter.validTitle': 'Only show valid sessions (at least 1 user message)',
+    'sessions.filter.all': 'All',
+    'sessions.filter.allTitle': 'Show all sessions, including sessions without user messages',
+    'sessions.filter.sourceTitle': 'Filter by session type',
+    'sessions.filter.sourceAll': 'All types',
     'sessions.messageCountTitle': '{user} user messages / {total} total messages',
+    'sessions.source.trigger': 'Trigger',
+    'sessions.source.agent': 'Agent',
+    'sessions.source.cli': 'CLI',
+    'sessions.source.user': 'User',
+    'sessions.source.unknown': 'Unknown',
     'sessions.selectLog': 'Select a session to view the CC log',
     'sessions.chatView': '💬 Chat View',
     'sessions.fullView': '📜 Full View',
@@ -1167,7 +1193,16 @@ const translations = {
     'sessions.empty.noDialogue': 'No user dialogue messages in this session',
     'sessions.turnType.userInput': 'User Input',
     'sessions.turnType.toolCall': 'Tool Call',
+    'sessions.turnType.subtask': 'Subtask',
     'sessions.turnType.system': 'System',
+    'sessions.subtask.status.running': 'Running',
+    'sessions.subtask.status.completed': 'Completed',
+    'sessions.subtask.status.failed': 'Failed',
+    'sessions.subtask.status.stopped': 'Stopped',
+    'sessions.subtask.status.killed': 'Killed',
+    'sessions.subtask.tools': '{count} tool uses',
+    'sessions.subtask.tokens': '{count} tokens',
+    'sessions.subtask.reason': 'Reason: {reason}',
     'sessions.block.thinking': 'Thinking',
     'sessions.block.result': 'Result',
     'sessions.block.resultError': 'Result',
@@ -1232,13 +1267,11 @@ const translations = {
     'monitor.card.systemMemory': 'System Memory',
     'monitor.chart.cpu': 'CPU Usage',
     'monitor.chart.memory': 'Memory Usage',
-    'monitor.chart.activity1h': 'Activity in Last Hour',
+    'monitor.chart.disk': 'Disk I/O',
     'monitor.chart.network': 'Network Usage',
-    'monitor.activity.received': 'Received',
-    'monitor.activity.completed': 'Completed',
-    'monitor.activity.errors': 'Errors',
-    'monitor.activity.interrupts': 'Interrupts',
-    'monitor.activity.toolErrors': 'ToolErr',
+    'monitor.series.diskRead': 'Read',
+    'monitor.series.diskWrite': 'Write',
+    'monitor.series.processTotal': 'Related Processes',
     'monitor.series.processRss': 'Daemon process group RSS',
     'monitor.processes.daemon': 'Daemon',
     'monitor.processes.ecweb': 'ECWeb',
@@ -1499,6 +1532,7 @@ const translations = {
     'triggers.feedback.defaultFailure': 'Default: 触发器失败：{{error.message}}',
     'triggers.field.model': 'Model',
     'triggers.field.effort': 'Effort',
+    'triggers.baseagent.mismatch': 'Trigger fixed: {trigger}; current Agent: {agent}',
     'triggers.field.permission': 'Permission Mode',
     'triggers.delivery.on': 'Enabled',
     'triggers.delivery.off': 'Disabled',
@@ -1563,7 +1597,7 @@ const translations = {
     // Usage view
     'usage.subtab.overview': 'Overview',
     'usage.subtab.explorer': 'Detailed Statistics',
-    'usage.overview.range.today': 'Today',
+    'usage.overview.range.last24': 'Last 24 Hours',
     'usage.overview.range.week': 'This Week',
     'usage.overview.range.lastWeek': 'Last Week',
     'usage.overview.range.month': 'This Month',
@@ -2034,7 +2068,8 @@ let _triggerEdit = null;
 let _triggerHistory = null;
 let _triggerTest = null;
 let sessSearch = '';
-let sessFilterNormal = false; // true=只显示有效会话（userMsgs >= 1）
+let sessShowAll = false; // false=只显示有效会话；true=显示全部
+let sessSourceFilter = 'all'; // all / trigger / agent / cli / user / unknown
 let sessChatMode = false;   // false=完整视图，true=对话视图（折叠处理过程）
 let monRange = '2m';        // Monitor 时间窗口：2m / 10m / 1h
 let logSel = { source: null, level: 'all', module: 'all', search: '', limit: 500, follow: true };
@@ -2418,8 +2453,13 @@ const MSG_TYPE_META = {
   file: { icon: '📎', label: () => t('messages.msgType.file') },
   command: { icon: '⌘', label: () => t('messages.msgType.command') }
 };
-function msgTagsHtml(kind, encrypt, chatmode, dir) {
-  let h = '';
+// 渠道标：AUN 是默认渠道，不标；其余渠道标出来，免得混排后分不清来路
+function channelTagHtml(channel, cls) {
+  if (!channel || channel === 'aun') return '';
+  return `<span class="${cls}">${esc(channel)}</span>`;
+}
+function msgTagsHtml(kind, encrypt, chatmode, dir, channel) {
+  let h = channelTagHtml(channel, 'mtag mtag-channel');
   // 'send' 仅出向才是「回复」；入向是用户输入，不打回复标记
   const km = (kind === 'send' && dir === 'in') ? null : MSG_KIND_META[kind];
   if (km) h += `<span class="mtag${kind === 'send' ? ' mtag-reply' : ''}">${km.icon}${km.label()}</span>`;
@@ -2429,24 +2469,39 @@ function msgTagsHtml(kind, encrypt, chatmode, dir) {
 }
 
 // 消息行：方向箭头 + 标记 + 对端 + 文字
+function latestAgentPreviewMessage(s) {
+  const recent = Array.isArray(s.recentMessages) ? s.recentMessages[0] : null;
+  if (recent?.text) return recent;
+  const recvTs = s.lastReceivedAt || 0;
+  const sentTs = s.lastSentAt || 0;
+  if (sentTs > recvTs && s.lastSentText) {
+    return {
+      dir: 'out', peer: s.lastSentTo, text: s.lastSentText, kind: s.lastSentKind,
+      encrypt: s.lastSentEncrypt, chatmode: s.lastSentChatmode, channel: s.lastSentChannel,
+    };
+  }
+  if (s.lastReceivedText) {
+    return {
+      dir: 'in', peer: s.lastReceivedFrom, text: s.lastReceivedText, kind: s.lastReceivedKind,
+      encrypt: s.lastReceivedEncrypt, chatmode: s.lastReceivedChatmode, channel: s.lastReceivedChannel,
+    };
+  }
+  return null;
+}
+
 function agentPreviewHtml(s) {
   const clip = (t) => esc(String(t).replace(/\n/g, ' ').slice(0, 80));
-  const line = (dir, peer, text, kind, encrypt, chatmode) => {
+  const line = (dir, peer, text, kind, encrypt, chatmode, channel) => {
     const arrow = dir === 'in' ? '<span class="arrow-in">↓</span>' : '<span class="arrow-out">↑</span>';
-    const tags = msgTagsHtml(kind, encrypt, chatmode, dir);
+    const tags = msgTagsHtml(kind, encrypt, chatmode, dir, channel);
     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 '';
+  const latest = latestAgentPreviewMessage(s);
+  return latest
+    ? line(latest.dir, latest.peer, latest.text, latest.kind, latest.encrypt, latest.chatmode, latest.channel)
+    : '';
 }
 
 // HTML tooltip（最近 N 轮）：时间 + 彩色箭头 + 方式 + 对端 + 文字
@@ -2462,10 +2517,11 @@ function recentMsgTooltipHtml(recent) {
     const kh = km ? `<span class="tip-kind${m.kind === 'send' ? ' tip-kind-reply' : ''}">${km.icon}${km.label()}</span>` : '';
     const enc = m.encrypt != null ? `<span class="tip-flag">${m.encrypt ? t('messages.tag.encrypted') : t('messages.tag.plain')}</span>` : '';
     const mode = m.chatmode ? `<span class="tip-flag">${m.chatmode === 'proactive' ? t('messages.tag.proactive') : (m.chatmode === 'inject' ? t('messages.tag.inject') : t('messages.tag.responsive'))}</span>` : '';
+    const chan = channelTagHtml(m.channel, 'tip-flag tip-flag-channel');
     const peer = m.peer ? esc(shortAid(m.peer)) : '';
     const text = esc(String(m.text).replace(/\n/g, ' ').slice(0, 140));
     const time = m.ts ? `<span class="tip-time">${fmtTime(m.ts)}</span>` : '';
-    h += `<div class="tip-row ${rcls}">${time}${arrow}${kh}${enc}${mode} <b>${peer}</b> ${text}</div>`;
+    h += `<div class="tip-row ${rcls}">${time}${arrow}${chan}${kh}${enc}${mode} <b>${peer}</b> ${text}</div>`;
   }
   return h + '</div>';
 }
@@ -2861,6 +2917,14 @@ function card(label, value, valCls, sub) {
 }
 
 // ── Messages 视图 ──
+function msgChannelTone(channelType) {
+  const normalized = String(channelType || '').trim().toLowerCase();
+  if (normalized === 'qq') return 'qqbot';
+  return ['aun', 'wechat', 'wecom', 'feishu', 'dingtalk', 'qqbot', 'daemon'].includes(normalized)
+    ? normalized
+    : 'other';
+}
+
 function renderMsg(data) {
   if (!data) return;
   const aids = data.scopes || data.aids || [];
@@ -2893,7 +2957,7 @@ function renderMsg(data) {
   let aidsHtml = `<div class="col-title"><span>${t('messages.colTitle.aid')}</span><span class="col-count">${aids.length}</span></div>`;
   for (const a of aids) {
     const sel = a.aid === msgSel.aid ? ' sel' : '';
-    const name = a.selfAID && a.selfAID !== 'unknown' ? shortAid(a.selfAID) : 'unknown';
+    const name = a.displayName || (a.selfAID && a.selfAID !== 'unknown' ? shortAid(a.selfAID) : 'unknown');
     const privateCount = Math.max(0, (a.peerCount || 0) - (a.groupCount || 0));
     const privateBit = tf('messages.privateCount', { count: privateCount });
     const groupBit = a.groupCount ? ` · ${tf('messages.groupCount', { count: a.groupCount })}` : '';
@@ -2937,7 +3001,9 @@ function renderMsg(data) {
         ? t('messages.tag.topic')
         : p.partition === 'legacy' ? t('messages.tag.legacy') : t('messages.tag.main');
       const partitionMark = `<span class="msg-partition-mark msg-partition-${esc(p.partition || 'main')}">${esc(partitionLabel)}</span>`;
-      const channelTag = channelLabel ? `<span class="msg-tag">${esc(channelLabel)}</span>` : '';
+      const channelTag = channelLabel
+        ? `<span class="msg-tag msg-channel msg-channel-${msgChannelTone(p.channelType)}">${esc(channelLabel)}</span>`
+        : '';
       peersHtml += `<div class="list-item${sel}" data-peer="${esc(p.peerId)}">` +
         `<div class="name">${groupMark}${partitionMark}<span class="msg-peer-title" title="${esc(chatTitle)}">${esc(shortId(chatTitle))}</span>${channelTag}</div>` +
         `<div class="sub">${p.partition === 'thread' ? `${esc(shortId(displayName))} · ` : ''}↓${p.inbound} ↑${p.outbound} · ${fmtAgo(p.lastAt)}</div></div>`;
@@ -3024,6 +3090,20 @@ function renderMsgSessionHeader(context) {
 }
 
 // ── Sessions 视图 ──
+function filterSessionTranscripts(transcripts, showAll, sourceType = 'all') {
+  return (transcripts || []).filter(session => {
+    const valid = showAll || (session.userMsgs || 0) >= 1;
+    const sourceMatches = sourceType === 'all' || (session.sourceType || 'unknown') === sourceType;
+    return valid && sourceMatches;
+  });
+}
+
+function renderSessionSourceBadge(sourceType) {
+  const type = ['trigger', 'agent', 'cli', 'user'].includes(sourceType) ? sourceType : 'unknown';
+  const label = t(`sessions.source.${type}`);
+  return `<span class="session-source-badge source-${type}" title="${esc(label)}">${esc(label)}</span>`;
+}
+
 function renderSession(data) {
   if (!data) return;
   const projects = data.projects || [];
@@ -3038,8 +3118,7 @@ function renderSession(data) {
   }
 
   // 有效筛选
-  const filtered = transcripts
-    .filter(t => !sessFilterNormal || (t.userMsgs || 0) >= 1);
+  const filtered = filterSessionTranscripts(transcripts, sessShowAll, sessSourceFilter);
 
   // 左栏：过滤条 + 列表
   const projOpts = projects.map(p =>
@@ -3054,18 +3133,25 @@ function renderSession(data) {
   if (availableBaseagents.codex) {
     baseagentOpts += `<option value="codex"${sessSel.baseagent === 'codex' ? ' selected' : ''}>Codex</option>`;
   }
+  const sourceTypes = ['all', 'user', 'agent', 'trigger', 'cli', 'unknown'];
+  const sourceOpts = sourceTypes.map(type => {
+    const label = type === 'all' ? t('sessions.filter.sourceAll') : t(`sessions.source.${type}`);
+    return `<option value="${type}"${sessSourceFilter === type ? ' selected' : ''}>${esc(label)}</option>`;
+  }).join('');
 
-  const normalCount = transcripts.filter(t => (t.userMsgs || 0) >= 1).length;
+  const filterLabelKey = sessShowAll ? 'sessions.filter.all' : 'sessions.filter.valid';
+  const filterTitleKey = sessShowAll ? 'sessions.filter.allTitle' : 'sessions.filter.validTitle';
   let listHtml = '<div class="sess-filter">' +
     '<div class="sess-select-row">' +
       `<select id="sess-baseagent" title="Base Agent">${baseagentOpts}</select>` +
       `<select id="sess-project" title="${t('sessions.header.project')}">${projOpts}</select>` +
+      `<select id="sess-source-type" title="${t('sessions.filter.sourceTitle')}">${sourceOpts}</select>` +
     '</div>' +
     '<div class="sess-filter-row">' +
-      `<div class="sess-count">${tf('sessions.count', { filtered: filtered.length, total: transcripts.length })}</div>` +
-      `<label class="sess-switch" title="${t('sessions.filter.validTitle')}">` +
-        `<span>${t('sessions.filter.valid')}</span>` +
-        `<input id="sess-filter-toggle" type="checkbox"${sessFilterNormal ? ' checked' : ''}>` +
+      `<div class="sess-count">${tf('sessions.count', { count: filtered.length })}</div>` +
+      `<label class="sess-switch" title="${t(filterTitleKey)}">` +
+        `<span>${t(filterLabelKey)}</span>` +
+        `<input id="sess-filter-toggle" type="checkbox"${sessShowAll ? ' checked' : ''}>` +
         '<span class="sess-switch-track" aria-hidden="true"><span class="sess-switch-thumb"></span></span>' +
       '</label>' +
     '</div></div>' +
@@ -3080,12 +3166,13 @@ function renderSession(data) {
     let badge = '';
     if (t.bound) {
       const dot = t.online ? '<span class="dot on"></span>' : '<span class="dot idle"></span>';
-      badge = `<span class="bind-badge">${dot}${esc(t.boundChannel || '')}·${esc(shortAid(t.boundPeer || ''))}</span>`;
+      badge = `<span class="bind-badge">${dot}${esc(t.boundChannel || '')}·${esc(shortAid(t.boundSelf || ''))}</span>`;
     }
+    const sourceBadge = renderSessionSourceBadge(t.sourceType);
     const msgs = `<span class="msg-count" title="${tf('sessions.messageCountTitle', { user: t.userMsgs || 0, total: t.totalMsgs || 0 })}">💬 ${t.userMsgs || 0}/${t.totalMsgs || 0}</span>`;
     listHtml += `<div class="list-item${sel}" data-sid="${esc(t.id)}">` +
       `<div class="name">${esc(title)}</div>` +
-      `<div class="sub">${fmtAgo(t.lastActivity)} · ${msgs}${t.gitBranch ? ' · ' + esc(t.gitBranch) : ''}${badge}</div>` +
+      `<div class="sub">${fmtAgo(t.lastActivity)} · ${msgs} · ${sourceBadge}${badge}</div>` +
       '</div>';
   }
   listHtml += '</div>';
@@ -3105,7 +3192,12 @@ function renderSession(data) {
     subscribe('session', { project: sessSel.project, baseagent: sessSel.baseagent });
   };
   const filterToggle = $('#sess-filter-toggle');
-  if (filterToggle) filterToggle.onchange = () => { sessFilterNormal = filterToggle.checked; renderSession(state.session); };
+  if (filterToggle) filterToggle.onchange = () => { sessShowAll = filterToggle.checked; renderSession(state.session); };
+  const sourceTypeSelect = $('#sess-source-type');
+  if (sourceTypeSelect) sourceTypeSelect.onchange = () => {
+    sessSourceFilter = sourceTypeSelect.value;
+    renderSession(state.session);
+  };
   $('#sess-list').querySelectorAll('.list-item').forEach(item => {
     item.onclick = () => { sessSel = { sessionId: item.dataset.sid, project: sessSel.project, baseagent: sessSel.baseagent }; subscribe('session', sessSel); };
   });
@@ -3224,6 +3316,7 @@ const CAT_META = {
   tool_call:    { label: () => t('sessions.turnType.toolCall'), icon: '🟣' },
   tool_result:  { label: () => t('sessions.turnType.toolResult'), icon: '🟠' },
   msg_send:     { label: () => t('sessions.turnType.msgSend'), icon: '📤' },
+  subtask:      { label: () => t('sessions.turnType.subtask'), icon: '◆' },
   system:       { label: () => t('sessions.turnType.system'), icon: '⚪' },
 };
 
@@ -3240,7 +3333,7 @@ function renderSessHeader(h, baseagent) {
   let bind = '';
   if (h.bound) {
     const dot = h.online ? `<span class="dot on"></span>${t('common.online')}` : `<span class="dot idle"></span>${t('common.offline')}`;
-    bind = `<span class="sh-stat">🔗 ${esc(h.boundChannel || '')} · ${esc(shortAid(h.boundPeer || ''))} ${dot}</span>`;
+    bind = `<span class="sh-stat">🔗 ${esc(h.boundChannel || '')} · ${esc(shortAid(h.boundSelf || ''))} ${dot}</span>`;
   }
   return '<div class="sess-header">' +
     '<div class="sh-title-row">' +
@@ -3273,6 +3366,7 @@ function renderCatBar(counts) {
     ['tool_call', counts.toolCall],
     ['tool_result', counts.toolResult],
     ['msg_send', counts.msgSend],
+    ['subtask', counts.subtask],
   ];
   let s = '<div class="sh-cats">';
   for (const [cat, n] of items) {
@@ -3320,6 +3414,28 @@ function renderBlocks(blocks) {
     } else if (b.kind === 'tool_result') {
       const cls = b.isError ? 'blk-result err' : 'blk-result';
       out += `<details class="blk ${cls}" open><summary>${b.isError ? '✗ ' + t('sessions.block.resultError') : '↳ ' + t('sessions.block.result')}</summary><pre class="result-body">${esc(b.text)}</pre></details>`;
+    } else if (b.kind === 'subtask') {
+      const knownStatuses = ['running', 'completed', 'failed', 'stopped', 'killed'];
+      const status = knownStatuses.includes(String(b.status)) ? String(b.status) : 'running';
+      const statusLabel = t(`sessions.subtask.status.${status}`);
+      const meta = [];
+      if (b.subagentType) meta.push(esc(b.subagentType));
+      if (b.toolUses) meta.push(esc(tf('sessions.subtask.tools', { count: fmtNum(b.toolUses) })));
+      if (b.totalTokens) meta.push(esc(tf('sessions.subtask.tokens', { count: fmtNum(b.totalTokens) })));
+      if (b.durationMs) meta.push(esc(fmtDur(b.durationMs / 1000)));
+      if (b.terminalReason) meta.push(esc(tf('sessions.subtask.reason', { reason: b.terminalReason })));
+      const progress = b.progress && b.progress !== b.description
+        ? `<div class="subtask-progress">${esc(b.progress)}</div>`
+        : '';
+      out += `<div class="blk blk-subtask status-${status}">` +
+        '<div class="subtask-main">' +
+          `<span class="subtask-status-dot" aria-hidden="true"></span>` +
+          `<span class="subtask-status">${esc(statusLabel)}</span>` +
+          `<span class="subtask-title">${esc(b.description || b.taskId || '')}</span>` +
+        '</div>' +
+        (meta.length ? `<div class="subtask-meta">${meta.join('<span>·</span>')}</div>` : '') +
+        progress +
+      '</div>';
     }
   }
   return out;
@@ -5478,12 +5594,18 @@ function triggerOriginalEditState(t) {
   const id = triggerIdOf(t);
   const agentAid = triggerAgentOf(t);
   const rawFeedbackStrategy = String(feedback.strategy ?? t?.feedbackStrategy ?? 'target');
+  const executionType = String(execution.type ?? t?.executionType ?? 'target_session');
+  const agentBaseagent = String(triggerAgentInfo(agentAid)?.baseagent ?? triggerActiveBaseagentForAgent(agentAid));
+  const persistedBaseagent = typeof execution.baseagent === 'string' && execution.baseagent.trim()
+    ? execution.baseagent.trim()
+    : (typeof t?.baseagent === 'string' && t.baseagent.trim() ? t.baseagent.trim() : '');
+  const baseagent = persistedBaseagent || agentBaseagent;
   return {
     id,
     agentAid,
     name: String(definition?.name ?? t?.name ?? t?.label ?? ''),
     enabled: triggerIsEnabled(t),
-    executionType: String(execution.type ?? t?.executionType ?? 'target_session'),
+    executionType,
     scriptPath: String(execution.script?.path ?? ''),
     scriptRuntime: String(execution.script?.runtime ?? 'node'),
     scriptTimeoutMs: Number(execution.script?.timeoutMs ?? 30_000),
@@ -5491,7 +5613,11 @@ function triggerOriginalEditState(t) {
     scheduleValue: source.scheduleValue,
     eventFilter: definition?.source?.type === 'event' ? (definition.source.filter ?? null) : null,
     timezone: String(source.timezone ?? ''),
-    baseagent: String(triggerAgentInfo(agentAid)?.baseagent ?? t?.baseagent ?? triggerActiveBaseagentForAgent(agentAid)),
+    baseagent,
+    agentBaseagent,
+    baseagentMismatch: executionType === 'trigger_session'
+      && Boolean(persistedBaseagent)
+      && persistedBaseagent !== agentBaseagent,
     prompt: execution.type === 'script' ? '' : triggerPrompt(definition, t),
     model: String(execution.model ?? t?.model ?? ''),
     effort: String(execution.effort ?? t?.effort ?? ''),
@@ -6714,6 +6840,7 @@ function openTriggerEditDrawer(id, agent) {
             `<label class="ag-edit-field trig-script-field"><span>${t('triggers.field.scriptRuntime')}</span><select id="trig-edit-script-runtime">${triggerOptionHtml(['node', 'python', 'bash'], original.scriptRuntime, null)}</select></label>` +
             `<label class="ag-edit-field trig-script-field trig-script-path-field"><span>${t('triggers.field.scriptPath')}</span><input id="trig-edit-script-path" type="text" autocomplete="off" spellcheck="false" value="${esc(original.scriptPath)}" placeholder="${t('triggers.placeholder.scriptPath')}"></label>` +
           `</div>` +
+          (original.baseagentMismatch ? `<div class="trig-baseagent-note">${esc(tf('triggers.baseagent.mismatch', { trigger: original.baseagent, agent: original.agentBaseagent }))}</div>` : '') +
           `<div class="trig-script-feedback">` +
             `<div class="trig-feedback-templates-title">${t('triggers.field.outputTemplate')}</div>` +
             `<div class="trig-feedback-templates">` +
@@ -6994,6 +7121,13 @@ function updateThemeButton() {
 }
 
 function disposeWindowChart(key) {
+  const observerKey = '__ecwebChartResizeObserver_' + key;
+  const observer = window[observerKey];
+  if (observer) {
+    observer.disconnect();
+    window[observerKey] = null;
+  }
+
   const chart = window[key];
   if (chart && typeof chart.dispose === 'function') {
     chart.dispose();
@@ -7002,7 +7136,7 @@ function disposeWindowChart(key) {
 }
 
 function refreshThemeSensitiveViews() {
-  ['_hourlyChart', '_modelChart', '_monCpu', '_monMem', '_monMsg', '_monNet'].forEach(disposeWindowChart);
+  ['_hourlyChart', '_modelChart', '_monCpu', '_monMem', '_monDisk', '_monNet'].forEach(disposeWindowChart);
   if (typeof _explorerChart !== 'undefined' && _explorerChart) {
     _explorerChart.dispose();
     _explorerChart = null;
@@ -7052,6 +7186,28 @@ function initTheme() {
   }
 }
 
+function chartThemeValue(name, fallback) {
+  var value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
+function chartTooltipOptions(isDark) {
+  return {
+    backgroundColor: chartThemeValue('--bg2', isDark ? '#161b22' : '#ffffff'),
+    borderColor: chartThemeValue('--border', isDark ? '#30363d' : '#e2e6ed'),
+    borderWidth: 1,
+    padding: [10, 12],
+    textStyle: {
+      color: chartThemeValue('--fg', isDark ? '#e6edf3' : '#1a202c'),
+      fontSize: 12,
+      lineHeight: 20,
+    },
+    extraCssText: 'border-radius:8px;box-shadow:' + (isDark
+      ? '0 14px 34px rgba(0,0,0,0.42)'
+      : '0 14px 34px rgba(31,41,55,0.16)') + ';',
+  };
+}
+
 // ── Usage 相关函数 ──
 function fmtTokens(n) {
   if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M';
@@ -7060,7 +7216,12 @@ function fmtTokens(n) {
 }
 
 // ── Usage Overview（总览，支持日期范围筛选）──
-let _ovCurrentRange = 'today'; // 当前选择的范围
+let _ovCurrentRange = 'last24'; // 当前选择的范围
+
+function rollingLast24HourRange(now) {
+  const toTs = (now || new Date()).getTime();
+  return { fromTs: toTs - 24 * 60 * 60 * 1000, toTs };
+}
 
 async function loadUsageOverview(rangeType, customFrom, customTo) {
   rangeType = rangeType || _ovCurrentRange;
@@ -7073,9 +7234,8 @@ async function loadUsageOverview(rangeType, customFrom, customTo) {
   const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999).getTime();
 
   switch (rangeType) {
-    case 'today':
-      fromTs = todayStart;
-      toTs = todayEnd;
+    case 'last24':
+      ({ fromTs, toTs } = rollingLast24HourRange(now));
       break;
     case 'week': // 本周（周一到今天）
       const dayOfWeek = now.getDay() || 7; // 周日=7
@@ -7104,8 +7264,7 @@ async function loadUsageOverview(rangeType, customFrom, customTo) {
         fromTs = new Date(customFrom).getTime();
         toTs = new Date(customTo).getTime();
       } else {
-        fromTs = todayStart;
-        toTs = todayEnd;
+        ({ fromTs, toTs } = rollingLast24HourRange(now));
       }
       break;
     default:
@@ -7256,12 +7415,19 @@ function formatDatetimeLocal(date) {
 }
 
 // 模型访问明细查询
+var _detailInited = false;
+
 function initDetailQuery() {
   // 填充Agent选择器
   loadDetailAgentList();
   // 填充Model选择器（按上面总览的时间范围）
   loadDetailModelList();
 
+  // 事件只绑一次：initOverviewFilters 会在每次切回 Overview 子 Tab 时重复调用，
+  // 重复绑定会让一次 change 触发 N 次并发查询，慢的旧响应可能覆盖新响应（表现为“切换无效”）。
+  if (_detailInited) return;
+  _detailInited = true;
+
   // 绑定分页大小变化
   const pageSizeEl = $('#detail-page-size');
   if (pageSizeEl) {
@@ -7348,10 +7514,8 @@ async function loadDetailAgentList() {
         option.textContent = a.agent_name || a.agent_aid.split('.')[0];
         selectEl.appendChild(option);
       });
-      // 默认选中第一个agent
-      if (agents.length > 0) {
-        selectEl.value = agents[0].agent_aid;
-      }
+      // 默认查询全部智能体（首项 value=""），不要自动切到第一个 Agent。
+      selectEl.value = '';
       // 加载完成后自动查询一次
       queryDetailUsage();
     }
@@ -7395,7 +7559,11 @@ async function loadDetailModelList() {
   } catch {}
 }
 
+var _detailQuerySeq = 0;
+
 async function queryDetailUsage() {
+  // 请求序号：并发查询时只认最后一次的响应，避免慢的旧响应覆盖新结果
+  const seq = ++_detailQuerySeq;
   // 使用总览的时间范围
   const timeRange = window._currentOverviewTimeRange || {};
   const fromTs = timeRange.fromTs;
@@ -7422,13 +7590,16 @@ async function queryDetailUsage() {
     const resp = await fetch(authApiUrl('api/stats/detail?' + params.toString()), {
       headers: { Authorization: 'Bearer ' + localStorage.getItem(TOKEN_KEY) }
     });
+    if (seq !== _detailQuerySeq) return; // 已有更新的查询发出，丢弃本次结果
     if (!resp.ok) {
       showDetailError(t('usage.detail.error'));
       return;
     }
     const result = await resp.json();
+    if (seq !== _detailQuerySeq) return;
     renderDetailTable(result.data, result.total, page, pageSize);
   } catch {
+    if (seq !== _detailQuerySeq) return;
     showDetailError(t('usage.detail.error'));
   }
 }
@@ -7559,7 +7730,7 @@ var _usageSubtabsBound = false;
 
 function activeOverviewRange() {
   const active = document.querySelector('.ov-range-btn.active');
-  return active ? active.getAttribute('data-range') || 'today' : 'today';
+  return active ? active.getAttribute('data-range') || 'last24' : 'last24';
 }
 
 function refreshUsageView() {
@@ -7609,16 +7780,16 @@ function initUsageSubtabs() {
     });
   });
 
-  // 初始化总览页面的过滤器并加载默认数据（今日）
+  // 初始化总览页面的过滤器并加载默认数据（最近 24 小时）
   initOverviewFilters();
-  loadUsageOverview('today');
+  loadUsageOverview('last24');
 }
 
 // ── Explorer ──
 var _explorerChart = null;
 var _explorerInited = false;
 var _expSelection = { type: null, key: null }; // { type: 'agent'|'peer', key: string } or null
-var _expCurrentRange = 'today'; // Explorer 当前选择的时间范围
+var _expCurrentRange = 'last24'; // Explorer 当前选择的时间范围
 var _expTimeRange = { fromTs: null, toTs: null }; // Explorer 的时间范围
 
 function initExplorer() {
@@ -7628,9 +7799,11 @@ function initExplorer() {
   // 初始化时间范围选择
   initExplorerTimeFilters();
 
-  // 绑定查询按钮
-  var btn = $('#exp-query-btn');
-  if (btn) btn.onclick = runExplorerQuery;
+  // 模型、粒度下拉框变更后立即查询，不再需要额外的查询按钮。
+  var modelFilter = $('#exp-model');
+  if (modelFilter) modelFilter.addEventListener('change', runExplorerQuery);
+  var granularityFilter = $('#exp-granularity');
+  if (granularityFilter) granularityFilter.addEventListener('change', runExplorerQuery);
 
   // Load sidebar lists
   loadExplorerSidebar();
@@ -7653,6 +7826,7 @@ function initExplorerTimeFilters() {
         if (customDateEl) customDateEl.style.display = 'none';
         _expCurrentRange = range;
         calculateExplorerTimeRange(range);
+        setExplorerGranularityForRange(range);
         loadExplorerModels(); // 加载可用模型
         runExplorerQuery();
       }
@@ -7675,15 +7849,22 @@ function initExplorerTimeFilters() {
     });
   }
 
-  // 设置默认时间范围（今日）并初始化日期选择器
+  // 设置默认时间范围（最近 24 小时）并初始化日期选择器
   const now = new Date();
+  const last24 = rollingLast24HourRange(now);
   const fromEl = $('#exp-from');
   const toEl = $('#exp-to');
-  if (fromEl) fromEl.value = formatDatetimeLocal(new Date(now.getFullYear(), now.getMonth(), now.getDate()));
+  if (fromEl) fromEl.value = formatDatetimeLocal(new Date(last24.fromTs));
   if (toEl) toEl.value = formatDatetimeLocal(now);
 
-  // 计算默认时间范围（今日）
-  calculateExplorerTimeRange('today');
+  // 计算默认时间范围（最近 24 小时）
+  calculateExplorerTimeRange('last24');
+  setExplorerGranularityForRange('last24');
+}
+
+function setExplorerGranularityForRange(rangeType) {
+  const granularityEl = $('#exp-granularity');
+  if (rangeType === 'last24' && granularityEl) granularityEl.value = 'hour';
 }
 
 // 计算 Explorer 的时间范围
@@ -7693,9 +7874,8 @@ function calculateExplorerTimeRange(rangeType) {
   const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999).getTime();
 
   switch (rangeType) {
-    case 'today':
-      _expTimeRange.fromTs = todayStart;
-      _expTimeRange.toTs = todayEnd;
+    case 'last24':
+      _expTimeRange = rollingLast24HourRange(now);
       break;
     case 'week':
       const dayOfWeek = now.getDay() || 7;
@@ -8070,7 +8250,10 @@ async function runExplorerQuery() {
     _explorerChart = echarts.init(chartEl, isDark ? 'dark' : null);
     var periods = data.map(function(r) { return r.period; });
     _explorerChart.setOption({
-      tooltip: { trigger: 'axis' },
+      tooltip: {
+        trigger: 'axis',
+        ...chartTooltipOptions(isDark),
+      },
       legend: { data: [t('usage.card.input'), t('usage.card.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 } },
@@ -8108,12 +8291,58 @@ function monitorLayoutHtml() {
     '</div>' +
     `<div id="mon-cards" class="usage-cards"><div class="empty" style="grid-column:1/-1">${t('common.loading')}</div></div>` +
     '<div class="mon-row2"><div id="mon-cpu-chart" class="mon-chart"></div><div id="mon-mem-chart" class="mon-chart"></div></div>' +
-    '<div class="mon-row2"><div id="mon-msg-chart" class="mon-chart"></div><div id="mon-net-chart" class="mon-chart"></div></div>' +
+    '<div class="mon-row2"><div id="mon-disk-chart" class="mon-chart"></div><div id="mon-net-chart" class="mon-chart"></div></div>' +
   '</div>';
 }
 
 function disposeMonitorCharts() {
-  ['_monCpu', '_monMem', '_monMsg', '_monNet'].forEach(disposeWindowChart);
+  ['_monCpu', '_monMem', '_monDisk', '_monNet'].forEach(disposeWindowChart);
+}
+
+function scheduleAfterLayout(callback) {
+  if (typeof requestAnimationFrame === 'function') return requestAnimationFrame(callback);
+  return setTimeout(callback, 16);
+}
+
+function resizeChartAfterLayout(chart) {
+  scheduleAfterLayout(function () {
+    if (!chart || (typeof chart.isDisposed === 'function' && chart.isDisposed())) return;
+    chart.resize();
+  });
+}
+
+function observeMonitorChartSize(el, varKey, chart) {
+  const observerKey = '__ecwebChartResizeObserver_' + varKey;
+  const previous = window[observerKey];
+  if (previous) previous.disconnect();
+
+  if (typeof ResizeObserver === 'function') {
+    const observer = new ResizeObserver(function () {
+      if (window[varKey] !== chart || (typeof chart.isDisposed === 'function' && chart.isDisposed())) {
+        observer.disconnect();
+        return;
+      }
+      chart.resize();
+    });
+    observer.observe(el);
+    window[observerKey] = observer;
+  }
+
+  resizeChartAfterLayout(chart);
+}
+
+function deferMonitorChartUntilVisible(el, render) {
+  let attempts = 0;
+  const retry = function () {
+    if (!el.isConnected) return;
+    if (el.clientWidth > 0 && el.clientHeight > 0) {
+      render();
+      return;
+    }
+    // The AUN proxy can deliver the first snapshot before its page layout settles.
+    if (++attempts < 30) scheduleAfterLayout(retry);
+  };
+  scheduleAfterLayout(retry);
 }
 
 function bindMonRangeTabs(wrap) {
@@ -8136,36 +8365,65 @@ function formatMonitorResponse(ms) {
   return value >= 10000 ? (value / 1000).toFixed(1) + 's' : Math.round(value) + 'ms';
 }
 
-function monitorProcessLabel(process) {
+function monitorProcessKind(process) {
   var knownKinds = ['daemon', 'ecweb', 'watch-web', 'restart-monitor', 'watch', 'watch-aid', 'codex-app-server', 'claude-runner', 'gemini-runner', 'sandbox', 'runner-helper', 'child'];
-  var kind = knownKinds.includes(process.kind) ? process.kind : 'child';
-  return `${t('monitor.processes.' + kind)} · ${process.name || 'process'} · #${process.pid}`;
+  return knownKinds.includes(process.kind) ? process.kind : 'child';
+}
+
+function monitorProcessKey(process) {
+  return `${monitorProcessKind(process)}\u0000${process.name || 'process'}`;
+}
+
+function monitorProcessLabel(process) {
+  return `${t('monitor.processes.' + monitorProcessKind(process))} · ${process.name || 'process'}`;
 }
 
-function monitorProcessColor(pid) {
+function monitorProcessColor(key) {
   var colors = ['#4f6ef7', '#38a169', '#dd6b20', '#805ad5', '#d53f8c', '#319795', '#e53e3e', '#3182ce', '#718096', '#b7791f'];
-  var value = Math.abs(Number(pid) || 0);
+  var value = 0;
+  for (var i = 0; i < key.length; i += 1) value = ((value * 31) + key.charCodeAt(i)) | 0;
+  value = Math.abs(value);
   return colors[value % colors.length];
 }
 
 function monitorProcessSeries(history, currentProcesses, metric) {
   var catalog = new Map();
-  for (const process of (currentProcesses || [])) catalog.set(process.pid, process);
+  function addProcess(process) {
+    var key = monitorProcessKey(process);
+    if (!catalog.has(key)) catalog.set(key, { key: key, kind: monitorProcessKind(process), name: process.name || 'process' });
+  }
+  for (const process of (currentProcesses || [])) addProcess(process);
   for (const point of history) {
-    for (const process of (point.processes || [])) catalog.set(process.pid, process);
+    for (const process of (point.processes || [])) addProcess(process);
   }
-  return [...catalog.values()].sort(function (a, b) { return a.pid - b.pid; }).map(function (process) {
+  return [...catalog.values()].sort(function (a, b) { return monitorProcessLabel(a).localeCompare(monitorProcessLabel(b)); }).map(function (process) {
     return {
       name: monitorProcessLabel(process),
       data: history.map(function (point) {
-        var sample = (point.processes || []).find(function (item) { return item.pid === process.pid; });
-        return sample ? sample[metric] : null;
+        var value = 0;
+        var hasSample = false;
+        for (const sample of (point.processes || [])) {
+          if (monitorProcessKey(sample) !== process.key) continue;
+          value += Number(sample[metric]) || 0;
+          hasSample = true;
+        }
+        return hasSample ? value : null;
       }),
-      color: monitorProcessColor(process.pid),
+      color: monitorProcessColor(process.key),
     };
   });
 }
 
+function monitorAggregateSeries(name, history, metric, color) {
+  return {
+    name: name,
+    data: history.map(function (point) { return point[metric] != null ? point[metric] : null; }),
+    color: color,
+    width: 3,
+    areaOpacity: 0.12,
+  };
+}
+
 function renderMonitor(data) {
   var wrap = $('#sys-content .mon-layout');
   if (!wrap) return;
@@ -8187,6 +8445,8 @@ function renderMonitor(data) {
   var lh = (s.stats && s.stats.lastHour) || {};
   var errRate = (lh.received > 0) ? ((lh.errors / lh.received) * 100).toFixed(1) + '%' : '0%';
   var processTree = s.processTree || {};
+  var cpuCount = Math.max(1, Number(s.cpuCount) || 1);
+  var processCpuPercent = (Number(s.cpuPercent) || 0) / cpuCount;
 
   // ── Stat cards ──
   var sysMemPct = (sys.memTotal > 0) ? Math.round((sys.memUsed / sys.memTotal) * 100) : 0;
@@ -8195,7 +8455,7 @@ function renderMonitor(data) {
     [t('monitor.card.messages1h'), lh.received || 0],
     [t('monitor.card.avgResponse'), formatMonitorResponse(lh.avgResponseMs)],
     [t('monitor.card.errorRate'), errRate],
-    [t('monitor.card.processCpu'), (s.cpuPercent != null ? s.cpuPercent : 0) + '%'],
+    [t('monitor.card.processCpu'), processCpuPercent.toFixed(1) + '%'],
     [t('monitor.card.systemCpu'), (sys.cpuPercent != null ? sys.cpuPercent : 0) + '%'],
     [t('monitor.card.processMemory'), fmtBytes(s.memory ? s.memory.rss : 0)],
     [t('monitor.card.processCount'), processTree.processCount || 1],
@@ -8211,52 +8471,32 @@ function renderMonitor(data) {
   var cProc = css('--accent'), cSys = css('--orange');
 
   var currentProcesses = Array.isArray(processTree.processes) ? processTree.processes : [];
-  var cpuSeries = monitorProcessSeries(h, currentProcesses, 'cpuPercent');
-  cpuSeries.push({ name: t('monitor.legend.system'), data: h.map(function (p) { return p.sysCpu != null ? p.sysCpu : null; }), color: cSys });
+  var cpuSeries = [
+    monitorAggregateSeries(t('monitor.legend.system'), h, 'sysCpu', cSys),
+    monitorAggregateSeries(t('monitor.series.processTotal'), h, 'procCpu', cProc),
+  ].concat(monitorProcessSeries(h, currentProcesses, 'cpuPercent'));
 
-  // ── CPU：每个关联 PID + 系统 ──
+  // ── CPU：整机系统、关联进程、每类关联进程 ──
   monDualLine('mon-cpu-chart', '_monCpu', ts, isDark, t('monitor.chart.cpu'),
     cpuSeries,
     function (v) { return Number(v).toFixed(1) + '%'; }, null);
 
-  // ── Memory：每个关联 PID ──
+  // ── Memory：整机系统、关联进程、每类关联进程 ──
+  var memorySeries = [
+    monitorAggregateSeries(t('monitor.series.systemUsed'), h, 'sysMemUsed', cSys),
+    monitorAggregateSeries(t('monitor.series.processTotal'), h, 'procRss', cProc),
+  ].concat(monitorProcessSeries(h, currentProcesses, 'rss'));
   monDualLine('mon-mem-chart', '_monMem', ts, isDark, t('monitor.chart.memory'),
-    monitorProcessSeries(h, currentProcesses, 'rss'),
+    memorySeries,
     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: t('monitor.chart.activity1h'), 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: [
-          t('monitor.activity.received'),
-          t('monitor.activity.completed'),
-          t('monitor.activity.errors'),
-          t('monitor.activity.interrupts'),
-          t('monitor.activity.toolErrors'),
-        ],
-        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,
-    });
-  }
+  // ── Disk throughput ──
+  monDualLine('mon-disk-chart', '_monDisk', ts, isDark, t('monitor.chart.disk'),
+    [
+      { name: t('monitor.series.diskRead'), data: h.map(function (p) { return p.diskReadBps || 0; }), color: css('--blue') || cProc },
+      { name: t('monitor.series.diskWrite'), data: h.map(function (p) { return p.diskWriteBps || 0; }), color: cSys },
+    ],
+    function (v) { return fmtBytes(v) + '/s'; }, null);
 
   // ── Network throughput ──
   monDualLine('mon-net-chart', '_monNet', ts, isDark, t('monitor.chart.network'),
@@ -8268,12 +8508,22 @@ function renderMonitor(data) {
 
 }
 
-// 双线时序图（进程 + 系统）。series: [{name,data,color}]
+// 时序图。series: [{name,data,color,width?,areaOpacity?}]
 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({
+  const render = function () {
+    var chart = window[varKey];
+    if (chart && typeof chart.getDom === 'function' && chart.getDom() !== el) {
+      disposeWindowChart(varKey);
+      chart = null;
+    }
+    if (!chart) {
+      chart = echarts.init(el, isDark ? 'dark' : null);
+      window[varKey] = chart;
+      observeMonitorChartSize(el, varKey, chart);
+    }
+    chart.setOption({
     title: { text: title, left: 'center', top: 4, textStyle: { fontSize: 12, color: isDark ? '#e6edf3' : '#1a202c' } },
     legend: {
       show: series.length > 0,
@@ -8286,6 +8536,7 @@ function monDualLine(elId, varKey, times, isDark, title, series, fmtY, yRange) {
     },
     tooltip: {
       trigger: 'axis',
+      ...chartTooltipOptions(isDark),
       formatter: function (params) {
         var lines = [params[0].axisValue];
         params.forEach(function (pt) {
@@ -8307,13 +8558,21 @@ function monDualLine(elId, varKey, times, isDark, title, series, fmtY, yRange) {
       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 },
+        lineStyle: { width: sr.width || 2, color: sr.color },
+        areaStyle: { color: sr.color, opacity: sr.areaOpacity != null ? sr.areaOpacity : 0.08 },
         itemStyle: { color: sr.color },
       };
     }),
     animation: false,
-  });
+    });
+    resizeChartAfterLayout(chart);
+  };
+
+  if (el.clientWidth <= 0 || el.clientHeight <= 0) {
+    deferMonitorChartUntilVisible(el, render);
+    return;
+  }
+  render();
 }
 
 function renderRoles(data) {
@@ -8769,8 +9028,7 @@ function renderRoleDefinitions(data) {
   }
 
   if (!data) {
-    console.warn('[roleDefinitions] No data received');
-    grid.innerHTML = '<div class="role-error">❌ 未收到角色定义数据</div>';
+    grid.innerHTML = `<div class="role-error">${esc(t('common.loading'))}</div>`;
     return;
   }
 
@@ -8877,6 +9135,8 @@ function renderDefaultRoleSelector(data) {
         alert('保存默认角色失败' + (detail ? ': ' + detail : ''));
         privateSelect.value = defaults.private;
         groupSelect.value = defaults.group;
+      } else {
+        subscribe('roleDefinitions', roleDefinitionsParams());
       }
     } catch (err) {
       console.error('[roleDefinitions] Failed to save defaultRoles:', err);
@@ -9154,6 +9414,7 @@ function renderCommandPermissionsList(roleDef, operations, readonly = false) {
 
 function renderCommandPermissionsEditor(roleDef, operations) {
   const stats = getCommandPermissionStats(roleDef?.commandPermissions);
+  const rawPermissions = formatCommandPermissions(roleDef?.commandPermissions);
   return `
     <div class="form-section command-permissions-section">
       <h4>Command / CLI Permissions</h4>
@@ -9168,6 +9429,18 @@ function renderCommandPermissionsEditor(roleDef, operations) {
           ? '清单来自后端 operation registry。每行显示当前有效权限和命中的规则；修改后会写入精确 operation 规则。若要撤销内置继承规则，请对同名 operation 设置“拒绝”。'
           : 'The list comes from the backend operation registry. Each row shows the current effective permission and matched rule. Changes are saved as exact operation rules.'}
       </div>
+      <details class="cli-raw-editor">
+        <summary>${currentLang === 'zh-CN' ? '编辑原始规则 JSON' : 'Edit raw rules JSON'}</summary>
+        <div class="cli-help">
+          ${currentLang === 'zh-CN'
+            ? '用于编辑通配符或未出现在 operation 清单中的规则。下方结构化修改会合并到这份 JSON。'
+            : 'Use this for wildcard rules or operations missing from the catalog. Structured changes below are merged into this JSON.'}
+        </div>
+        <textarea id="edit-commandPermissions"
+                  class="form-textarea cli-raw-textarea"
+                  rows="12"
+                  spellcheck="false">${esc(rawPermissions)}</textarea>
+      </details>
       ${renderCommandPermissionsList(roleDef, operations, false)}
     </div>
   `;
@@ -9209,21 +9482,24 @@ function validateCommandPermissionsClient(commandPermissions) {
 
 function collectCommandPermissions(container, fallback = {}) {
   const rows = Array.from(container.querySelectorAll('[data-command-operation]'));
-  if (rows.length === 0) {
-    const input = container.querySelector('#edit-commandPermissions');
-    if (!input) return { ok: true, value: getCommandPermissionsObject(fallback) };
+  const input = container.querySelector('#edit-commandPermissions');
+  let commandPermissions = getCommandPermissionsObject(fallback);
+
+  if (input) {
     try {
       const parsed = JSON.parse(input.value.trim() || '{}');
       const validationError = validateCommandPermissionsClient(parsed);
       if (validationError) return { ok: false, error: validationError };
-      return { ok: true, value: parsed };
+      commandPermissions = parsed;
     } catch (err) {
       return { ok: false, error: `Command permissions JSON is invalid: ${err.message}` };
     }
   }
 
+  if (rows.length === 0) return { ok: true, value: commandPermissions };
+
   const operationsById = new Map((roleOperationsCache || []).map(operation => [operation.id, operation]));
-  const commandPermissions = { ...getCommandPermissionsObject(fallback) };
+  commandPermissions = { ...commandPermissions };
 
   for (const row of rows) {
     const operationId = row.dataset.commandOperation;
@@ -9435,7 +9711,7 @@ function createRoleCard(roleName, roleDef) {
   const commandStats = getCommandPermissionStats(roleDef.commandPermissions);
 
   // 判断是否为内置角色
-  const builtinRoles = ['member', 'visitor'];
+  const builtinRoles = ['admin', 'member', 'visitor'];
   const isBuiltin = builtinRoles.includes(roleName);
 
   card.innerHTML = `
@@ -9530,6 +9806,7 @@ function initRoleDefinitionsTab() {
           alert(t('roleDefs.saveFailed'));
         } else {
           alert(t('roleDefs.saveSuccess'));
+          subscribe('roleDefinitions', roleDefinitionsParams());
         }
       } catch (err) {
         alert(t('pair.error.network'));
@@ -9575,6 +9852,7 @@ function initRoleDefinitionsTab() {
           alert(t('roleDefs.saveFailed') + ': ' + (err.error || 'unknown'));
         } else {
           alert('角色已删除');
+          subscribe('roleDefinitions', roleDefinitionsParams());
         }
       } catch (err) {
         alert(t('pair.error.network'));
@@ -10244,14 +10522,8 @@ async function showRoleEditModal(roleName, roleDef) {
   formHtml += renderRoleUsageLimitsEditor(roleDef);
 
   formHtml += `
-    <div class="role-editor-tabs" role="tablist">
-      <button type="button" class="role-editor-tab active" data-role-tab="fields">Field Permissions</button>
-      <button type="button" class="role-editor-tab" data-role-tab="cli">CLI Permissions</button>
-    </div>
-
-    <div class="role-editor-tab-panel active" data-role-tab-panel="fields">
-      <div class="form-section">
-        <h4>权限配置</h4>
+    <div class="form-section field-permissions-section">
+      <h4>Field Permissions</h4>
   `;
 
   const permissions = roleDef.permissions || {};
@@ -10421,16 +10693,13 @@ async function showRoleEditModal(roleName, roleDef) {
     formHtml += `</div>`;
   });
 
-  formHtml += `</div></div>
-    <div class="role-editor-tab-panel" data-role-tab-panel="cli">
-      ${renderCommandPermissionsEditor(roleDef, operations)}
-    </div>
+  formHtml += `</div>
+    ${renderCommandPermissionsEditor(roleDef, operations)}
   </div>`;
 
   body.innerHTML = formHtml;
 
   bindTagsInputEvents(body);
-  initRoleEditorTabs(body);
   initCommandPermissionEditor(body);
   initRoleModelPermissionEditor(body, roleName, roleDef);