ec-web 0.0.4 → 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': '结果',
@@ -639,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': '禁用',
@@ -1152,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',
@@ -1165,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',
@@ -1495,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',
@@ -2030,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 };
@@ -2414,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>`;
@@ -2425,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 轮）：时间 + 彩色箭头 + 方式 + 对端 + 文字
@@ -2458,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>';
 }
@@ -2857,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 || [];
@@ -2889,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 })}` : '';
@@ -2933,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>`;
@@ -3020,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 || [];
@@ -3034,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 =>
@@ -3050,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>' +
@@ -3076,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>';
@@ -3101,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); };
   });
@@ -3220,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: '⚪' },
 };
 
@@ -3236,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">' +
@@ -3269,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) {
@@ -3316,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;
@@ -5474,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),
@@ -5487,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 ?? ''),
@@ -6710,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">` +
@@ -6990,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();
@@ -7048,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';
@@ -7255,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) {
@@ -7347,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();
     }
@@ -7394,7 +7559,11 @@ async function loadDetailModelList() {
   } catch {}
 }
 
+var _detailQuerySeq = 0;
+
 async function queryDetailUsage() {
+  // 请求序号：并发查询时只认最后一次的响应，避免慢的旧响应覆盖新结果
+  const seq = ++_detailQuerySeq;
   // 使用总览的时间范围
   const timeRange = window._currentOverviewTimeRange || {};
   const fromTs = timeRange.fromTs;
@@ -7421,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'));
   }
 }
@@ -7627,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();
@@ -8076,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 } },
@@ -8122,6 +8299,52 @@ function disposeMonitorCharts() {
   ['_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) {
   var tabs = wrap.querySelectorAll('.mon-range');
   if (!tabs.length) return;
@@ -8289,8 +8512,18 @@ function renderMonitor(data) {
 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,
@@ -8303,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) {
@@ -8330,7 +8564,15 @@ function monDualLine(elId, varKey, times, isDark, title, series, fmtY, yRange) {
       };
     }),
     animation: false,
-  });
+    });
+    resizeChartAfterLayout(chart);
+  };
+
+  if (el.clientWidth <= 0 || el.clientHeight <= 0) {
+    deferMonitorChartUntilVisible(el, render);
+    return;
+  }
+  render();
 }
 
 function renderRoles(data) {