ec-web 0.0.4 → 0.0.6

package/dist/static/app.js

@@ -248,6 +248,7 @@ const translations = {
     'messages.empty.noAgents': '暂无 Agent',
     'messages.empty.noPeers': '暂无聊天对端',
     'messages.empty.noMessages': '暂无消息',
+    'messages.loadOlder': '加载更早消息',
     'messages.tag.group': '群聊',
     'messages.tag.groupShort': '群',
     'messages.tag.main': '主',
@@ -288,6 +289,8 @@ const translations = {
     'sessions.empty.noMatch': '无匹配会话',
     'sessions.empty.noSessions': '该项目暂无会话',
     'sessions.empty.noContent': '该会话暂无内容',
+    'sessions.loadOlder': '加载更早内容',
+    'sessions.loadFullResult': '加载完整结果',
     'sessions.header.project': '项目',
     'sessions.header.session': '会话',
     'sessions.stat.context': '📐 {tokens} ctx',
@@ -296,10 +299,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,10 +321,21 @@ 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': '结果',
+    'sessions.content.expand': '展开内容',
+    'sessions.content.collapse': '收起内容',
     'sessions.contextTitle': '最后一轮喂给模型的完整上下文大小',
     'sessions.costTitle': '累计费用（按模型定价估算）',
     'sessions.msgUnit': '条',
@@ -639,6 +662,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': '禁用',
@@ -1104,6 +1128,7 @@ const translations = {
     'messages.empty.noAgents': 'No agents',
     'messages.empty.noPeers': 'No chats',
     'messages.empty.noMessages': 'No messages',
+    'messages.loadOlder': 'Load older messages',
     'messages.tag.group': 'Group',
     'messages.tag.groupShort': 'G',
     'messages.tag.main': 'Main',
@@ -1144,6 +1169,8 @@ const translations = {
     'sessions.empty.noMatch': 'No matching sessions',
     'sessions.empty.noSessions': 'No sessions in this project',
     'sessions.empty.noContent': 'No content in this session',
+    'sessions.loadOlder': 'Load older content',
+    'sessions.loadFullResult': 'Load full result',
     'sessions.header.project': 'Project',
     'sessions.header.session': 'Session',
     'sessions.stat.context': '📐 {tokens} ctx',
@@ -1152,10 +1179,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,10 +1201,21 @@ 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',
+    'sessions.content.expand': 'Expand content',
+    'sessions.content.collapse': 'Collapse content',
     'sessions.contextTitle': 'Full context size sent to the model in the last turn',
     'sessions.costTitle': 'Estimated cumulative cost by model pricing',
     'sessions.msgUnit': 'msgs',
@@ -1495,6 +1542,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',
@@ -1896,7 +1944,7 @@ function connect() {
         console.log('[ecweb] Available baseagents:', availableBaseagents, 'Selected:', sessSel.baseagent);
         // 重新订阅当前视图（带上正确的参数）
         if (currentView === 'session') {
-          subscribe('session', { sessionId: sessSel.sessionId, project: sessSel.project, baseagent: sessSel.baseagent });
+          subscribe('session', sessSel);
         } else if (currentView === 'roleManagement') {
           subscribeRoleManagementSubview();
         } else if (currentView === 'system' && systemContentMode === 'monitor') {
@@ -1931,6 +1979,11 @@ function connect() {
       if (pend) { delete _ipcPending[msg.requestId]; pend.resolve(msg.data); }
       return;
     }
+    if (msg.type === 'session.result') {
+      const pending = _sessionResultPending[msg.requestId];
+      if (pending) { delete _sessionResultPending[msg.requestId]; pending.resolve(msg.data); }
+      return;
+    }
     if (msg.type === 'snapshot' || msg.type === 'delta') {
       console.log('[ecweb] Received', msg.type, 'for view:', msg.view, 'currentView:', currentView);
       // 系统基础快照不主动执行健康检查；保留用户点击按钮后得到的 check/upgrade 结果。
@@ -1940,6 +1993,24 @@ function connect() {
           check: msg.data.check ?? state.system.check,
           upgrade: state.system.upgrade ?? msg.data.upgrade,
         };
+      } else if (msg.view === 'msg'
+        && msg.data?.messagePage?.before != null
+        && state.msg?.scope === msg.data.scope
+        && state.msg?.peer === msg.data.peer) {
+        const existing = state.msg.messages || [];
+        const incoming = msg.data.messages || [];
+        const incomingKeys = new Set(incoming.map(item => item.msgId || `${item.ts}:${item.dir}:${item.content}`));
+        const merged = incoming.concat(existing.filter(item => !incomingKeys.has(item.msgId || `${item.ts}:${item.dir}:${item.content}`)));
+        state.msg = { ...msg.data, messages: merged };
+      } else if (msg.view === 'session'
+        && msg.data?.turnPage?.before != null
+        && state.session?.sessionId === msg.data.sessionId
+        && state.session?.project === msg.data.project) {
+        const existing = state.session.turns || [];
+        const incoming = msg.data.turns || [];
+        const incomingKeys = new Set(incoming.map(turn => turn.uuid || `${turn.ts}:${turn.category}:${JSON.stringify(turn.blocks || [])}`));
+        const merged = incoming.concat(existing.filter(turn => !incomingKeys.has(turn.uuid || `${turn.ts}:${turn.category}:${JSON.stringify(turn.blocks || [])}`)));
+        state.session = { ...msg.data, turns: merged };
       } else {
         state[msg.view] = msg.data;
       }
@@ -2002,6 +2073,8 @@ function menuSend(payload) {
 
 const _ipcPending = {};
 let _ipcSeq = 0;
+const _sessionResultPending = {};
+let _sessionResultSeq = 0;
 function ipcSend(payload, timeoutMs) {
   return new Promise((resolve, reject) => {
     if (!ws || ws.readyState !== WebSocket.OPEN) { reject(new Error(t('common.notConnected'))); return; }
@@ -2015,14 +2088,26 @@ function ipcSend(payload, timeoutMs) {
   });
 }
 
+function sessionResultSend(params) {
+  return new Promise((resolve, reject) => {
+    if (!ws || ws.readyState !== WebSocket.OPEN) { reject(new Error(t('common.notConnected'))); return; }
+    const requestId = 'ecw-session-result-' + (++_sessionResultSeq);
+    _sessionResultPending[requestId] = { resolve, reject };
+    setTimeout(() => {
+      if (_sessionResultPending[requestId]) { delete _sessionResultPending[requestId]; reject(new Error('timeout')); }
+    }, 10000);
+    ws.send(JSON.stringify({ type: 'session.result', requestId, params }));
+  });
+}
+
 // 心跳
 setInterval(() => {
   if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({ type: 'ping' }));
 }, 20000);
 
 // ── Tab 切换 ──
-let msgSel = { aid: null, peer: null };
-let sessSel = { sessionId: null, project: null, baseagent: null };
+let msgSel = { aid: null, peer: null, before: null };
+let sessSel = { sessionId: null, project: null, baseagent: null, turnBefore: null };
 let trigSel = { agent: null };
 let trigAgentsCollapsed = false;
 const _trigOps = new Map(); // Map<triggerId, string>
@@ -2030,7 +2115,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 };
@@ -2087,8 +2173,8 @@ function switchView(view) {
   document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.view === view));
   document.querySelectorAll('.view').forEach(v => v.classList.toggle('active', v.id === 'view-' + view));
   // 切换时按当前选择恢复订阅
-  if (view === 'msg') subscribe('msg', { aid: msgSel.aid, peer: msgSel.peer });
-  else if (view === 'session') subscribe('session', { sessionId: sessSel.sessionId, project: sessSel.project, baseagent: sessSel.baseagent });
+  if (view === 'msg') subscribe('msg', msgSel);
+  else if (view === 'session') subscribe('session', sessSel);
   else if (view === 'cache') subscribe('cache', {});
   else if (view === 'system' && systemContentMode === 'monitor') subscribe('monitor', { range: monRange });
   else if (view === 'system') subscribe('system', {});
@@ -2414,8 +2500,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 +2516,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 +2564,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 +2964,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 || [];
@@ -2867,7 +2982,7 @@ function renderMsg(data) {
   if (!selectedAidExists) {
     const nextAid = aids[0]?.aid || null;
     const selectionChanged = msgSel.aid !== nextAid || msgSel.peer !== null;
-    msgSel = { aid: nextAid, peer: null };
+    msgSel = { aid: nextAid, peer: null, before: null };
     if (selectionChanged && nextAid) subscribe('msg', msgSel);
   }
   const scopeMatches = data.scope === msgSel.aid;
@@ -2877,7 +2992,7 @@ function renderMsg(data) {
     if (!selectedPeerExists) {
       const nextPeer = peers[0]?.peerId || null;
       const selectionChanged = msgSel.peer !== nextPeer;
-      msgSel = { aid: msgSel.aid, peer: nextPeer };
+      msgSel = { aid: msgSel.aid, peer: nextPeer, before: null };
       if (selectionChanged && nextPeer) subscribe('msg', msgSel);
     }
   }
@@ -2889,7 +3004,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 })}` : '';
@@ -2902,7 +3017,7 @@ function renderMsg(data) {
   $('#msg-aids').querySelectorAll('.list-item').forEach(item => {
     item.onclick = () => {
       if (item.dataset.aid === msgSel.aid) return;
-      msgSel = { aid: item.dataset.aid, peer: null };
+      msgSel = { aid: item.dataset.aid, peer: null, before: null };
       subscribe('msg', msgSel);
     };
   });
@@ -2933,7 +3048,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>`;
@@ -2943,7 +3060,7 @@ function renderMsg(data) {
   $('#msg-peers').querySelectorAll('.list-item').forEach(item => {
     item.onclick = () => {
       if (item.dataset.peer === msgSel.peer) return;
-      msgSel = { aid: msgSel.aid, peer: item.dataset.peer };
+      msgSel = { aid: msgSel.aid, peer: item.dataset.peer, before: null };
       subscribe('msg', msgSel);
     };
   });
@@ -2961,6 +3078,9 @@ function renderMsg(data) {
   }
   const atBottom = stream.scrollHeight - stream.scrollTop - stream.clientHeight < 60;
   let msgHtml = '<div class="msg-stream-body">';
+  if (data.messagePage?.hasMore && data.messagePage.nextBefore != null) {
+    msgHtml += `<button class="ctrl-btn msg-load-more" type="button" data-before="${data.messagePage.nextBefore}">${t('messages.loadOlder') || '加载更早消息'}</button>`;
+  }
   for (const m of messages) {
     const cls = m.dir === 'in' ? 'in' : 'out';
     const arrow = m.dir === 'in' ? '↓' : '↑';
@@ -2983,6 +3103,11 @@ function renderMsg(data) {
   }
   msgHtml += messages.length ? '</div>' : `<div class="empty">${t('messages.empty.noMessages')}</div></div>`;
   stream.innerHTML = renderMsgSessionHeader(sessionContext) + msgHtml;
+  const loadMore = stream.querySelector('.msg-load-more');
+  if (loadMore) loadMore.onclick = () => {
+    msgSel = { aid: msgSel.aid, peer: msgSel.peer, before: Number(loadMore.dataset.before) };
+    subscribe('msg', msgSel);
+  };
   if (atBottom) stream.scrollTop = stream.scrollHeight;
 }
 
@@ -3020,6 +3145,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 +3173,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 +3188,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 +3221,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>';
@@ -3091,19 +3237,24 @@ function renderSession(data) {
   const baseagentSel = $('#sess-baseagent');
   if (baseagentSel) baseagentSel.onchange = () => {
     console.log('[ecweb] Baseagent changed to:', baseagentSel.value);
-    sessSel = { sessionId: null, project: null, baseagent: baseagentSel.value };
+    sessSel = { sessionId: null, project: null, baseagent: baseagentSel.value, turnBefore: null };
     console.log('[ecweb] Subscribing to session with baseagent:', sessSel.baseagent);
     subscribe('session', { baseagent: sessSel.baseagent });
   };
   const projSel = $('#sess-project');
   if (projSel) projSel.onchange = () => {
-    sessSel = { sessionId: null, project: projSel.value, baseagent: sessSel.baseagent };
+    sessSel = { sessionId: null, project: projSel.value, baseagent: sessSel.baseagent, turnBefore: null };
     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); };
+    item.onclick = () => { sessSel = { sessionId: item.dataset.sid, project: sessSel.project, baseagent: sessSel.baseagent, turnBefore: null }; subscribe('session', sessSel); };
   });
 
   // 右：transcript 详情
@@ -3113,11 +3264,22 @@ function renderSession(data) {
   const h = data.header || {};
   const atBottom = detail.scrollHeight - detail.scrollTop - detail.clientHeight < 60;
   let html = renderSessHeader(h, data.baseagent || sessSel.baseagent);
+  if (data.turnPage?.hasMore && data.turnPage.nextBefore != null) {
+    html += `<button class="ctrl-btn sess-load-more" type="button" data-before="${data.turnPage.nextBefore}">${t('sessions.loadOlder') || '加载更早内容'}</button>`;
+  }
   html += '<div class="turn-list">' + (sessChatMode ? renderChatView(turns) : renderFullView(turns)) + '</div>';
   detail.innerHTML = html;
 
+  const loadMore = detail.querySelector('.sess-load-more');
+  if (loadMore) loadMore.onclick = () => {
+    sessSel = { ...sessSel, turnBefore: Number(loadMore.dataset.before) };
+    subscribe('session', sessSel);
+  };
+
   const toggle = $('#chat-toggle');
   if (toggle) toggle.onclick = () => { sessChatMode = !sessChatMode; renderSession(state.session); };
+  setupContentCollapses(detail);
+  setupTruncatedSessionResults(detail, data);
   if (atBottom) detail.scrollTop = detail.scrollHeight;
 }
 
@@ -3126,13 +3288,19 @@ function renderFullView(turns) {
   let html = '';
   for (const t of turns) {
     const cat = t.category || t.role;
+    const blocks = t.blocks || [];
+    // Hide already-cached empty assistant turns until their transcript is reparsed.
+    if (cat === 'model_output' && !blocks.length) continue;
     const c = CAT_META[cat] || CAT_META.system;
     const usage = (t.inputTokens || t.outputTokens)
       ? `<span class="turn-usage">${esc(t.model || '')} · in ${t.inputTokens || 0} / out ${t.outputTokens || 0}</span>` : '';
     html += `<div class="turn cat-${cat}">` +
       `<div class="turn-head"><span class="turn-role">${c.icon} ${c.label()}</span>` +
       `<span class="turn-time">${t.ts ? fmtTime(t.ts) : ''}</span>${usage}</div>` +
-      `<div class="turn-blocks">${renderBlocks(t.blocks || [])}</div></div>`;
+      `<div class="turn-blocks">${renderBlocks(blocks, {
+        collapseText: cat === 'model_output' || cat === 'user_input',
+        collapseKind: cat === 'user_input' ? 'user-input' : 'model-output',
+      })}</div></div>`;
   }
   return html;
 }
@@ -3179,7 +3347,9 @@ function renderChatView(turns) {
       while (next < items.length && items[next].type === 'proc') { group.push(items[next]); next++; }
       const peer = it.peer ? shortAid(it.peer) : '';
       const time = `${it.ts ? fmtTime(it.ts) : ''}${peer ? ' → ' + esc(peer) : ''}`;
-      html += `<div class="chat-row ${it.type}"><div class="chat-bubble">${esc(it.text)}</div>` +
+      const kind = it.type === 'out' ? 'model-output' : 'user-input';
+      const bubble = renderCollapsibleText(it.text, `chat-bubble ${kind}-content`, kind);
+      html += `<div class="chat-row ${it.type}">${bubble}` +
         '<div class="chat-meta-row">' +
         (group.length ? renderProcGroup(group, true, time) : `<div class="chat-time">${time}</div>`) +
         '</div></div>';
@@ -3201,7 +3371,10 @@ function renderProcGroup(group, inline = false, time = '') {
     const c = CAT_META[g.cat] || CAT_META.system;
     inner += `<div class="turn cat-${g.cat}"><div class="turn-head"><span class="turn-role">${c.icon} ${c.label()}</span>` +
       `<span class="turn-time">${g.ts ? fmtTime(g.ts) : ''}</span></div>` +
-      `<div class="turn-blocks">${renderBlocks(g.blocks)}</div></div>`;
+      `<div class="turn-blocks">${renderBlocks(g.blocks, {
+        collapseText: g.cat === 'model_output' || g.cat === 'user_input',
+        collapseKind: g.cat === 'user_input' ? 'user-input' : 'model-output',
+      })}</div></div>`;
   }
   const summary = tf('sessions.procSummary', { count: group.length });
   if (inline) {
@@ -3220,6 +3393,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 +3410,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 +3443,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) {
@@ -3295,11 +3470,50 @@ function toolParamValue(value) {
   try { return JSON.stringify(value, null, 2); } catch { return String(value); }
 }
 
-function renderBlocks(blocks) {
+function setupContentCollapses(container) {
+  const contents = container.querySelectorAll('.collapse-content');
+  contents.forEach(content => {
+    const body = content.querySelector('.collapse-body');
+    const arrowToggle = content.querySelector('.collapse-arrow-toggle');
+    if (!body || !arrowToggle) return;
+
+    body.classList.remove('is-collapsed');
+    content.classList.remove('is-collapsed');
+    body.style.maxHeight = '';
+    arrowToggle.hidden = true;
+
+    const styles = getComputedStyle(body);
+    const previewLines = Number.parseInt(styles.getPropertyValue('--collapse-preview-lines'), 10) || 12;
+    const lineHeight = Number.parseFloat(styles.lineHeight) || 17;
+    const padding = Number.parseFloat(styles.paddingTop) + Number.parseFloat(styles.paddingBottom);
+    const previewHeight = previewLines * lineHeight + padding;
+    if (body.scrollHeight <= previewHeight + 1) return;
+
+    const setExpanded = expanded => {
+      body.classList.toggle('is-collapsed', !expanded);
+      content.classList.toggle('is-collapsed', !expanded);
+      body.style.maxHeight = `${expanded ? body.scrollHeight : previewHeight}px`;
+      arrowToggle.setAttribute('aria-expanded', String(expanded));
+      arrowToggle.setAttribute('aria-label', t(expanded ? 'sessions.content.collapse' : 'sessions.content.expand'));
+    };
+    setExpanded(false);
+    arrowToggle.hidden = false;
+    arrowToggle.onclick = () => setExpanded(body.classList.contains('is-collapsed'));
+  });
+}
+
+function renderCollapsibleText(text, classes, kind = 'model-output') {
+  return `<div class="${classes} collapse-content"><div class="collapse-body ${kind}-body">${esc(text)}</div>` +
+    '<button class="collapse-arrow-toggle" type="button" hidden aria-expanded="false"><span class="collapse-arrow-icon" aria-hidden="true"></span></button></div>';
+}
+
+function renderBlocks(blocks, options = {}) {
   let out = '';
   for (const b of blocks) {
     if (b.kind === 'text') {
-      out += `<div class="blk blk-text">${esc(b.text)}</div>`;
+      out += options.collapseText
+        ? renderCollapsibleText(b.text, `blk blk-text ${(options.collapseKind || 'model-output')}-content`, options.collapseKind)
+        : `<div class="blk blk-text">${esc(b.text)}</div>`;
     } else if (b.kind === 'thinking') {
       out += `<details class="blk blk-thinking" open><summary>💭 ${t('sessions.block.thinking')}</summary><div class="blk-thinking-body">${esc(b.text)}</div></details>`;
     } else if (b.kind === 'tool_use') {
@@ -3312,15 +3526,73 @@ function renderBlocks(blocks) {
       for (const p of entries) {
         params += `<div class="tool-param"><span class="pk">${esc(p.k)}</span><code class="pv">${esc(p.v)}</code></div>`;
       }
-      out += `<details class="blk blk-tool" open><summary class="tool-head">${icon} <span class="tool-name">${esc(tool)}</span></summary><div class="tool-params">${params}</div></details>`;
+      const toolParams = params
+        ? `<div class="tool-params collapse-content"><div class="tool-params-body collapse-body">${params}</div>` +
+          '<button class="collapse-arrow-toggle" type="button" hidden aria-expanded="false"><span class="collapse-arrow-icon" aria-hidden="true"></span></button></div>'
+        : '';
+      out += `<details class="blk blk-tool" open><summary class="tool-head">${icon} <span class="tool-name">${esc(tool)}</span></summary>${toolParams}</details>`;
     } 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>`;
+      const loadFull = b.truncated && b.resultKey
+        ? `<button class="ctrl-btn result-load-full" type="button" data-result-key="${esc(b.resultKey)}">${t('sessions.loadFullResult') || '加载完整结果'}</button>`
+        : '';
+      out += `<details class="blk ${cls}" open><summary>${b.isError ? '✗ ' + t('sessions.block.resultError') : '↳ ' + t('sessions.block.result')}</summary>` +
+        `<div class="result-content collapse-content"><pre class="result-body collapse-body">${esc(b.text)}</pre>${loadFull}<button class="collapse-arrow-toggle" type="button" hidden aria-expanded="false"><span class="collapse-arrow-icon" aria-hidden="true"></span></button></div></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;
 }
 
+function setupTruncatedSessionResults(container, data) {
+  container.querySelectorAll('.result-load-full').forEach(button => {
+    button.onclick = async () => {
+      const key = button.dataset.resultKey;
+      if (!key || button.disabled) return;
+      button.disabled = true;
+      button.textContent = t('common.loading');
+      try {
+        const result = await sessionResultSend({
+          baseagent: data.baseagent || sessSel.baseagent,
+          project: data.project || sessSel.project,
+          sessionId: data.sessionId || sessSel.sessionId,
+          resultKey: key,
+        });
+        const body = button.parentElement?.querySelector('.result-body');
+        if (!body || !result?.text) throw new Error('not found');
+        body.textContent = result.text;
+        body.classList.remove('is-collapsed');
+        button.parentElement?.classList.remove('is-collapsed');
+        button.remove();
+      } catch {
+        button.disabled = false;
+        button.textContent = t('sessions.loadFullResult') || '加载完整结果';
+      }
+    };
+  });
+}
+
 // ── 通用 Menu 协议辅助（mResp / toast，供 Agents / System / Triggers 复用）──
 
 // 提取 menu.response 的 data/error
@@ -5474,12 +5746,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 +5765,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 +6992,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 +7273,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 +7338,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 +7567,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 +7666,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 +7711,11 @@ async function loadDetailModelList() {
   } catch {}
 }
 
+var _detailQuerySeq = 0;
+
 async function queryDetailUsage() {
+  // 请求序号：并发查询时只认最后一次的响应，避免慢的旧响应覆盖新结果
+  const seq = ++_detailQuerySeq;
   // 使用总览的时间范围
   const timeRange = window._currentOverviewTimeRange || {};
   const fromTs = timeRange.fromTs;
@@ -7421,13 +7742,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 +7951,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 +8402,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 +8451,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 +8664,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 +8688,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 +8716,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) {