ec-web 0.0.28 → 0.0.29

package/dist/static/app.js

@@ -83,6 +83,12 @@ const translations = {
     'common.loadingSuffix': '加载中',
     'common.noChanges': '没有需要保存的改动',
     'common.close': '关闭',
+    'common.back': '返回',
+    'common.openDetail': '打开详情',
+    'navigation.open': '打开导航',
+    'navigation.close': '关闭导航',
+    'navigation.pages': '页面导航',
+    'navigation.moreFilters': '更多筛选',
     'common.rawJsonPreview': '原始 JSON 预览',
     'common.inherited': '继承',
     'common.noLimit': '无限制',
@@ -116,6 +122,7 @@ const translations = {
     'theme.light': '浅色模式',
     'theme.dark': '深色模式',
     'theme.system': '跟随系统',
+    'theme.drawerLabel': '主题：{mode}',
     'theme.buttonTitle': '主题：{mode}；点击切换',
     'language.buttonTitle': '切换语言',
 
@@ -133,6 +140,7 @@ const translations = {
     'logs.lines.1000': '1000 行',
     'logs.lines.2000': '2000 行',
     'logs.follow': '跟随尾部',
+    'logs.moreFilters': '更多筛选',
     'logs.live': '自动刷新',
     'logs.meta': '{files} 个文件 · {size} · 更新于 {time}',
     'logs.filtered': '筛选结果 {visible} 行（已加载 {total} 行）',
@@ -277,10 +285,13 @@ const translations = {
     // Messages view
     'messages.colTitle.aid': 'Agent',
     'messages.colTitle.peers': 'Chats',
+    'messages.mobile.selection': '消息选择',
+    'messages.mobile.aid': 'Agent',
+    'messages.mobile.peer': 'Chats',
     'messages.empty.selectAid': '← 选择一个 Agent',
     'messages.empty.selectToView': '选择 Agent 查看消息',
     'messages.empty.noAgents': '暂无 Agent',
-    'messages.empty.noPeers': '暂无聊天对端',
+    'messages.empty.noPeers': '暂无 Chats',
     'messages.empty.noMessages': '暂无消息',
     'messages.loadOlder': '加载更早消息',
     'messages.tag.group': '群聊',
@@ -304,7 +315,7 @@ const translations = {
     'messages.msgType.command': '命令',
     'messages.groupCount': '群 {count}',
     'messages.privateCount': '单 {count}',
-    'messages.session.field.sessionId': 'EvolCore 会话 ID',
+    'messages.session.field.sessionId': 'EC会话ID',
     'messages.session.field.baseagent': 'Baseagent',
     'messages.session.field.chatMode': '模式',
     'messages.session.field.permissionMode': '权限',
@@ -315,6 +326,8 @@ const translations = {
     'messages.session.status.idle': '空闲',
     'messages.session.mode.interactive': '响应',
     'messages.session.mode.proactive': '自主',
+    'messages.session.details.expand': '展开会话状态',
+    'messages.session.details.collapse': '收起会话状态',
 
     // Sessions view
     'sessions.filter.normal': '🔍 仅有效',
@@ -358,6 +371,8 @@ const translations = {
     'sessions.fullView': '📜 完整视图',
     'sessions.chatHint': '只看用户与 Agent 的对话，处理过程已折叠',
     'sessions.fullHint': '显示全部消息',
+    'sessions.details.expand': '展开会话信息',
+    'sessions.details.collapse': '收起会话信息',
     'sessions.procSummary': '⋯ {count} 条处理过程（思考·工具·结果）',
     'sessions.empty.noDialogue': '该会话没有用户对话消息',
     'sessions.turnType.userInput': '用户输入',
@@ -749,10 +764,13 @@ const translations = {
     'triggers.lastUnrecorded': '未记录',
     'triggers.collapse.expand': '展开 Agent 列表',
     'triggers.collapse.collapse': '收起 Agent 列表',
+    'triggers.agent.daemon': 'DAEMON',
     'triggers.empty.noAgents': '暂无 Agent',
     'triggers.empty.noTriggers': '暂无触发器',
     'triggers.empty.noAgentTriggers': '该 Agent 暂无触发器',
     'triggers.th.status': '状态',
+    'triggers.th.agent': 'Agent',
+    'triggers.th.id': 'ID',
     'triggers.th.subscription': '订阅',
     'triggers.th.name': '名称',
     'triggers.th.type': '类型',
@@ -1023,6 +1041,12 @@ const translations = {
     'common.loadingSuffix': 'loading',
     'common.noChanges': 'No changes to save',
     'common.close': 'Close',
+    'common.back': 'Back',
+    'common.openDetail': 'Open details',
+    'navigation.open': 'Open navigation',
+    'navigation.close': 'Close navigation',
+    'navigation.pages': 'Page navigation',
+    'navigation.moreFilters': 'More filters',
     'common.rawJsonPreview': 'Raw JSON Preview',
     'common.inherited': 'Inherited',
     'common.noLimit': 'No limit',
@@ -1056,6 +1080,7 @@ const translations = {
     'theme.light': 'Light',
     'theme.dark': 'Dark',
     'theme.system': 'System',
+    'theme.drawerLabel': 'Theme: {mode}',
     'theme.buttonTitle': 'Theme: {mode}; click to switch',
     'language.buttonTitle': 'Switch language',
 
@@ -1073,6 +1098,7 @@ const translations = {
     'logs.lines.1000': '1000 Lines',
     'logs.lines.2000': '2000 Lines',
     'logs.follow': 'Follow tail',
+    'logs.moreFilters': 'More filters',
     'logs.live': 'Auto refresh',
     'logs.meta': '{files} files · {size} · updated {time}',
     'logs.filtered': '{visible} filtered ({total} loaded)',
@@ -1217,6 +1243,9 @@ const translations = {
     // Messages view
     'messages.colTitle.aid': 'Agent',
     'messages.colTitle.peers': 'Chats',
+    'messages.mobile.selection': 'Message selection',
+    'messages.mobile.aid': 'Agent',
+    'messages.mobile.peer': 'Chats',
     'messages.empty.selectAid': '← Select Agent',
     'messages.empty.selectToView': 'Select Agent to view messages',
     'messages.empty.noAgents': 'No agents',
@@ -1244,7 +1273,7 @@ const translations = {
     'messages.msgType.command': 'Command',
     'messages.groupCount': '{count} groups',
     'messages.privateCount': '{count} private',
-    'messages.session.field.sessionId': 'EvolCore Session ID',
+    'messages.session.field.sessionId': 'EC Session ID',
     'messages.session.field.baseagent': 'Baseagent',
     'messages.session.field.chatMode': 'Mode',
     'messages.session.field.permissionMode': 'Perm',
@@ -1255,6 +1284,8 @@ const translations = {
     'messages.session.status.idle': 'Idle',
     'messages.session.mode.interactive': 'Interactive',
     'messages.session.mode.proactive': 'Proactive',
+    'messages.session.details.expand': 'Expand session status',
+    'messages.session.details.collapse': 'Collapse session status',
 
     // Sessions view
     'sessions.filter.normal': '🔍 Valid Only',
@@ -1298,6 +1329,8 @@ const translations = {
     'sessions.fullView': '📜 Full View',
     'sessions.chatHint': 'Only user and Agent messages; processing is collapsed',
     'sessions.fullHint': 'Show all messages',
+    'sessions.details.expand': 'Expand session details',
+    'sessions.details.collapse': 'Collapse session details',
     'sessions.procSummary': '⋯ {count} processing steps (thinking · tools · results)',
     'sessions.empty.noDialogue': 'No user dialogue messages in this session',
     'sessions.turnType.userInput': 'User Input',
@@ -1689,10 +1722,13 @@ const translations = {
     'triggers.lastUnrecorded': 'Not recorded',
     'triggers.collapse.expand': 'Expand Agent List',
     'triggers.collapse.collapse': 'Collapse Agent List',
+    'triggers.agent.daemon': 'DAEMON',
     'triggers.empty.noAgents': 'No agents',
     'triggers.empty.noTriggers': 'No triggers',
     'triggers.empty.noAgentTriggers': 'No triggers for this agent',
     'triggers.th.status': 'Status',
+    'triggers.th.agent': 'Agent',
+    'triggers.th.id': 'ID',
     'triggers.th.subscription': 'Subscription',
     'triggers.th.name': 'Name',
     'triggers.th.type': 'Type',
@@ -1921,9 +1957,15 @@ function updateI18n() {
     const key = el.getAttribute('data-i18n-title');
     el.title = t(key);
   });
+  document.querySelectorAll('[data-i18n-aria-label]').forEach(el => {
+    const key = el.getAttribute('data-i18n-aria-label');
+    el.setAttribute('aria-label', t(key));
+  });
   // 更新 html lang 属性
   document.documentElement.lang = currentLang;
   updateThemeButton();
+  updateMobilePageTitle();
+  renderMobileNavigation();
   window.refreshBasicSettingsI18n?.();
 }
 
@@ -2282,7 +2324,13 @@ setInterval(() => {
 
 // ── Tab 切换 ──
 let msgSel = { aid: null, peer: null, before: null };
+let msgCollapsedAids = new Set();
+// 消息详情扩展信息只在当前页面生命周期内记忆，不写入 sessionStorage。
+// 以 Agent/Chats/EC 会话 ID 区分，切换会话时仍默认展开。
+const msgSessionDetailsExpanded = new Map();
 let sessSel = { sessionId: null, project: null, baseagent: null, turnBefore: null };
+// 会话详情顶部信息只在当前页面生命周期内记忆展开/收起状态。
+const sessHeaderExpanded = new Map();
 let trigSel = { agent: null };
 let trigAgentsCollapsed = false;
 const _trigOps = new Map(); // Map<triggerId, string>
@@ -2292,9 +2340,98 @@ let _triggerTest = null;
 let sessSearch = '';
 let sessShowAll = false; // false=只显示有效会话；true=显示全部
 let sessSourceFilter = 'all'; // all / trigger / agent / cli / user / unknown
+let sessListScroll = { layout: 0, items: 0 };
 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 };
+const SESSION_UI_KEY = 'ecWebUiState';
+let mobileNavOpen = false;
+let detailViewState = { msg: false, session: false };
+let historySyncing = false;
+let sessScrollSaveFrame = null;
+
+function readSessionUiState() {
+  try {
+    const raw = sessionStorage.getItem(SESSION_UI_KEY);
+    if (!raw) return;
+    const saved = JSON.parse(raw);
+    if (saved.msg && typeof saved.msg === 'object') msgSel = { ...msgSel, ...saved.msg, before: null };
+    if (saved.session && typeof saved.session === 'object') sessSel = { ...sessSel, ...saved.session, turnBefore: null };
+    if (saved.trigger && typeof saved.trigger === 'object') trigSel = { ...trigSel, ...saved.trigger };
+    if (typeof saved.sessShowAll === 'boolean') sessShowAll = saved.sessShowAll;
+    if (typeof saved.sessSourceFilter === 'string') sessSourceFilter = saved.sessSourceFilter;
+    if (saved.sessionListScroll && typeof saved.sessionListScroll === 'object') {
+      sessListScroll = {
+        layout: Math.max(0, Number(saved.sessionListScroll.layout) || 0),
+        items: Math.max(0, Number(saved.sessionListScroll.items) || 0),
+      };
+    }
+    if (saved.log && typeof saved.log === 'object') logSel = { ...logSel, ...saved.log };
+    if (saved.detail && typeof saved.detail === 'object') detailViewState = { ...detailViewState, ...saved.detail };
+  } catch {
+    // sessionStorage may be unavailable in private or embedded contexts.
+  }
+}
+
+function saveSessionUiState() {
+  try {
+    captureSessionListScroll();
+    sessionStorage.setItem(SESSION_UI_KEY, JSON.stringify({
+      msg: { aid: msgSel.aid, peer: msgSel.peer },
+      session: { ...sessSel, turnBefore: null },
+      trigger: { agent: trigSel.agent },
+      sessShowAll,
+      sessSourceFilter,
+      sessionListScroll: sessListScroll,
+      log: { ...logSel },
+      detail: { ...detailViewState },
+    }));
+  } catch {
+    // Keep the in-memory state when storage is unavailable.
+  }
+}
+
+function captureSessionListScroll() {
+  const layout = document.querySelector('.sess-layout');
+  const items = document.querySelector('#sess-list .sess-items');
+  if (layout) sessListScroll.layout = Math.max(0, layout.scrollTop || 0);
+  if (items) sessListScroll.items = Math.max(0, items.scrollTop || 0);
+}
+
+function restoreSessionListScroll() {
+  const layout = document.querySelector('.sess-layout');
+  const items = document.querySelector('#sess-list .sess-items');
+  if (layout) layout.scrollTop = sessListScroll.layout;
+  if (items) items.scrollTop = sessListScroll.items;
+}
+
+function bindSessionListScroll() {
+  const layout = document.querySelector('.sess-layout');
+  if (layout && layout.dataset.scrollBound !== '1') {
+    layout.dataset.scrollBound = '1';
+    layout.addEventListener('scroll', () => {
+      captureSessionListScroll();
+      scheduleSessionListStateSave();
+    }, { passive: true });
+  }
+  const items = document.querySelector('#sess-list .sess-items');
+  if (items) items.addEventListener('scroll', () => {
+    captureSessionListScroll();
+    scheduleSessionListStateSave();
+  }, { passive: true });
+}
+
+function scheduleSessionListStateSave() {
+  if (sessScrollSaveFrame != null) return;
+  const flush = () => {
+    sessScrollSaveFrame = null;
+    saveSessionUiState();
+  };
+  if (typeof window.requestAnimationFrame === 'function') sessScrollSaveFrame = window.requestAnimationFrame(flush);
+  else sessScrollSaveFrame = window.setTimeout(flush, 0);
+}
+
+readSessionUiState();
 // ECWeb 界面的 base agent 展示名统一走这里的 i18n 键，而不是父包别名表：
 // 别名表面向 CLI/日志（claude → "Claude Code"、ecagent → "ecagent"），
 // 面板里应保持简洁一致（Claude / Codex / Gemini / EC Agent）。
@@ -2371,7 +2508,133 @@ function setRoleManagementSubview(subview, options = {}) {
   if (options.render !== false) renderRoleManagementSubview();
 }
 
-function switchView(view) {
+const VIEW_LABEL_KEYS = {
+  agents: 'tab.agents', msg: 'tab.messages', session: 'tab.sessions', triggers: 'tab.triggers',
+  cache: 'tab.cache', system: 'tab.system', logs: 'tab.logs', usage: 'tab.usage', roleManagement: 'tab.roleManagement',
+};
+
+function normalizedView(view) {
+  if (view === 'monitor') return 'system';
+  if (view === 'roles' || view === 'roleDefinitions') return 'roleManagement';
+  return ['agents', 'msg', 'session', 'triggers', 'cache', 'system', 'logs', 'usage', 'roleManagement'].includes(view)
+    ? view
+    : 'agents';
+}
+
+function historySnapshot() {
+  return {
+    ecweb: true,
+    view: currentView,
+    detail: { ...detailViewState },
+    roleManagementSubview,
+  };
+}
+
+function updateMobilePageTitle() {
+  const title = $('#mobile-page-title');
+  if (title) title.textContent = t(VIEW_LABEL_KEYS[currentView] || 'tab.agents');
+}
+
+function applyDetailClasses() {
+  ['msg', 'session'].forEach(view => {
+    const el = $('#view-' + view);
+    if (!el) return;
+    el.classList.toggle('detail-fullscreen', currentView === view && detailViewState[view] === true);
+  });
+  saveSessionUiState();
+}
+
+function enterDetail(view, options = {}) {
+  if (!['msg', 'session'].includes(view) || currentView !== view) return;
+  if (detailViewState[view]) return;
+  detailViewState[view] = true;
+  applyDetailClasses();
+  if (options.history !== false && !historySyncing) history.pushState(historySnapshot(), '', location.href);
+  renderView(view);
+}
+
+function leaveDetail(view, options = {}) {
+  if (!['msg', 'session'].includes(view) || !detailViewState[view]) return;
+  if (options.history !== false && !historySyncing && history.state?.ecweb && history.state.detail?.[view]) {
+    history.back();
+    return;
+  }
+  detailViewState[view] = false;
+  applyDetailClasses();
+  renderView(view);
+}
+
+function restoreHistoryState(snapshot) {
+  const next = snapshot && snapshot.ecweb ? snapshot : { ecweb: true, view: currentView, detail: {} };
+  historySyncing = true;
+  if (next.roleManagementSubview) roleManagementSubview = next.roleManagementSubview;
+  detailViewState = { msg: false, session: false };
+  switchView(next.view || 'agents', { history: false });
+  detailViewState = { msg: false, session: false, ...(next.detail || {}) };
+  historySyncing = false;
+  applyDetailClasses();
+  if (currentView === 'msg' || currentView === 'session') renderView(currentView);
+}
+
+function initHistory() {
+  const initial = history.state && history.state.ecweb ? history.state : historySnapshot();
+  history.replaceState(initial, '', location.href);
+  window.addEventListener('popstate', event => restoreHistoryState(event.state));
+}
+
+function renderMobileNavigation() {
+  const list = $('.mobile-nav-list');
+  if (!list) return;
+  list.innerHTML = [...document.querySelectorAll('.tabs .tab')].map(tab => {
+    const view = tab.dataset.view;
+    const label = t(tab.dataset.i18n || VIEW_LABEL_KEYS[view] || view);
+    return `<button type="button" class="mobile-nav-item${view === currentView ? ' active' : ''}" data-mobile-view="${esc(view)}">${esc(label)}</button>`;
+  }).join('');
+  list.querySelectorAll('[data-mobile-view]').forEach(button => {
+    button.onclick = () => {
+      closeMobileNavigation();
+      switchView(button.dataset.mobileView);
+    };
+  });
+}
+
+function setMobileNavigation(open) {
+  mobileNavOpen = Boolean(open);
+  const drawer = $('#mobile-nav-drawer');
+  const backdrop = $('#mobile-nav-backdrop');
+  const menu = $('#mobile-menu-btn');
+  if (drawer) {
+    drawer.classList.toggle('open', mobileNavOpen);
+    drawer.setAttribute('aria-hidden', String(!mobileNavOpen));
+  }
+  if (backdrop) {
+    backdrop.hidden = !mobileNavOpen;
+    backdrop.classList.toggle('open', mobileNavOpen);
+  }
+  if (menu) menu.setAttribute('aria-expanded', String(mobileNavOpen));
+  document.body.classList.toggle('mobile-nav-open', mobileNavOpen);
+}
+
+function closeMobileNavigation() { setMobileNavigation(false); }
+
+function initMobileNavigation() {
+  renderMobileNavigation();
+  $('#mobile-menu-btn')?.addEventListener('click', () => setMobileNavigation(!mobileNavOpen));
+  $('#mobile-nav-close')?.addEventListener('click', closeMobileNavigation);
+  $('#mobile-nav-backdrop')?.addEventListener('click', closeMobileNavigation);
+  document.querySelectorAll('[data-mobile-tool]').forEach(button => {
+    button.addEventListener('click', () => {
+      const tool = button.dataset.mobileTool;
+      closeMobileNavigation();
+      if (tool === 'lang') toggleLang();
+      else if (tool === 'theme') $('#theme-btn')?.click();
+      else if (tool === 'settings') $('#basic-settings-btn')?.click();
+      else if (tool === 'logout') $('#logout-btn')?.click();
+    });
+  });
+}
+
+function switchView(view, options = {}) {
   if (view === 'monitor') {
     systemContentMode = 'monitor';
     view = 'system';
@@ -2380,10 +2643,19 @@ function switchView(view) {
     roleManagementSubview = view === 'roles' ? 'assignments' : 'definitions';
     view = 'roleManagement';
   }
+  view = normalizedView(view);
+  if (currentView !== view) {
+    detailViewState = { msg: false, session: false };
+  }
   currentView = view;
   localStorage.setItem(VIEW_KEY, 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));
+  updateMobilePageTitle();
+  renderMobileNavigation();
+  applyDetailClasses();
+  if (options.replaceHistory) history.replaceState(historySnapshot(), '', location.href);
+  else if (options.history !== false && !historySyncing && options.fromHistory !== true) history.pushState(historySnapshot(), '', location.href);
   // 切换时按当前选择恢复订阅
   if (view === 'msg') subscribe('msg', msgSel);
   else if (view === 'session') subscribe('session', sessSel);
@@ -2415,6 +2687,7 @@ function initTabs() {
       document.querySelector(`[data-role-subview="${next}"]`)?.focus();
     };
   });
+  initMobileNavigation();
 }
 
 function renderView(view) {
@@ -2518,37 +2791,49 @@ function bindLogControls() {
   const search = $('#log-search');
   const limit = $('#log-limit');
   const follow = $('#log-follow');
+  const moreFilters = $('#log-more-filters');
   if (!source || source.dataset.bound === '1') return;
   source.dataset.bound = '1';
   source.addEventListener('change', () => {
     logSel.source = source.value || null;
+    saveSessionUiState();
     $('#log-stream').innerHTML = `<div class="empty">${t('common.loading')}</div>`;
     subscribe('logs', { source: logSel.source, limit: logSel.limit });
   });
   level.addEventListener('change', () => {
     logSel.level = level.value || 'all';
+    saveSessionUiState();
     renderLogs(state.logs);
   });
   module.addEventListener('change', () => {
     logSel.module = module.value || 'all';
+    saveSessionUiState();
     renderLogs(state.logs);
   });
   search.addEventListener('input', () => {
     logSel.search = search.value || '';
+    saveSessionUiState();
     renderLogs(state.logs);
   });
   limit.addEventListener('change', () => {
     logSel.limit = Number(limit.value) || 500;
+    saveSessionUiState();
     $('#log-stream').innerHTML = `<div class="empty">${t('common.loading')}</div>`;
     subscribe('logs', { source: logSel.source, limit: logSel.limit });
   });
   follow.addEventListener('change', () => {
     logSel.follow = follow.checked;
+    saveSessionUiState();
     if (logSel.follow) {
       const stream = $('#log-stream');
       stream.scrollTop = stream.scrollHeight;
     }
   });
+  if (moreFilters) moreFilters.addEventListener('click', () => {
+    const toolbar = moreFilters.closest('.log-toolbar');
+    const expanded = toolbar?.classList.toggle('filters-expanded') || false;
+    moreFilters.setAttribute('aria-expanded', String(expanded));
+  });
 }
 
 function renderLogs(data) {
@@ -2558,6 +2843,7 @@ function renderLogs(data) {
   const search = $('#log-search');
   const limit = $('#log-limit');
   const follow = $('#log-follow');
+  const moreFilters = $('#log-more-filters');
   const meta = $('#log-meta-info');
   const filterResult = $('#log-filter-result');
   const stream = $('#log-stream');
@@ -2568,6 +2854,7 @@ function renderLogs(data) {
   search.value = logSel.search;
   limit.value = String(logSel.limit);
   follow.checked = logSel.follow;
+  if (moreFilters) moreFilters.textContent = t('logs.moreFilters');
   if (!data) {
     stream.innerHTML = `<div class="empty">${t('common.loading')}</div>`;
     return;
@@ -2891,6 +3178,13 @@ function initMsgTipFloat() {
     if (to && (wrap.contains(to) || (floatEl && floatEl.contains(to)))) return;
     scheduleHide();
   });
+  document.addEventListener('click', (e) => {
+    if (!floatEl || !floatEl.classList.contains('show')) return;
+    if (floatEl.contains(e.target)) return;
+    const wrap = e.target.closest && e.target.closest('.ag-msg-wrap');
+    if (wrap && wrap === curWrap) return;
+    hideNow();
+  }, true);
   // 滚动时隐藏，避免浮层与行脱节
   window.addEventListener('scroll', hideNow, true);
 }
@@ -3140,7 +3434,9 @@ function renderAgents(data) {
     if (!disabledAgents.length) {
       html += `<div class="empty">${t('agents.empty.disabled')}</div>`;
     } else {
-      html += `<table><thead><tr><th>${t('agents.th.agent')}</th><th>${t('agents.th.projectPath')}</th><th>${t('agents.th.operations')}</th></tr></thead><tbody>`;
+      html += '<table class="agents-table agents-table-disabled"><thead><tr>' +
+        `<th>${t('agents.th.agent')}</th><th>${t('agents.th.operations')}</th>` +
+        '</tr></thead><tbody>';
       for (const ag of disabledAgents) {
         const busy = _agentOps.has(ag.aid);
         const ops = busy
@@ -3148,7 +3444,6 @@ function renderAgents(data) {
           : agentDisabledOpsHtml(ag.aid);
         html += `<tr class="ag-main">` +
           `<td><div class="ag-id"><span class="dot off"></span><span class="ag-id-text"><span class="ag-name">${esc(ag.displayName || shortAid(ag.aid))}${agentLifecycleBadge(ag.lifecycle)}</span><span class="ag-aid">${esc(ag.aid)}</span></span></div></td>` +
-          `<td style="font-size:11px;font-family:monospace">${esc(ag.projectPath || '—')}</td>` +
           `<td class="agent-ops-cell">${ops}</td></tr>`;
       }
       html += '</tbody></table>';
@@ -3173,7 +3468,7 @@ function renderAgents(data) {
     return;
   }
 
-  html += '<table><thead><tr>' +
+  html += '<table class="agents-table agents-table-enabled"><thead><tr>' +
     `<th>${t('agents.th.aid')}</th><th>${t('agents.th.work')}</th><th>${t('agents.th.queue')}</th><th>${t('agents.th.model')}</th><th>${t('agents.th.runtime')}</th>` +
     `<th>${t('agents.th.received')}</th><th>${t('agents.th.sent')}</th><th>${t('agents.th.errors')}</th><th>${t('agents.th.interrupts')}</th><th>${t('agents.th.completed')}</th>` +
     `<th>${t('agents.th.lastActivity')}</th><th>${t('agents.th.operations')}</th>` +
@@ -3214,10 +3509,11 @@ function renderAgents(data) {
     const recent = (s.recentMessages || []);
     const tipHtml = recentMsgTooltipHtml(recent);
 
-    html += `<tr class="ag-sub"><td colspan="12"><div class="ag-info">` +
-      (ag.projectPath ? `<div class="ag-path">${esc(ag.projectPath)}</div>` : '') +
-      (preview ? `<div class="ag-msg-wrap">${tipHtml}<div class="ag-msg">${preview}</div></div>` : '') +
-      '</div></td></tr>';
+    if (preview) {
+      html += `<tr class="ag-sub"><td colspan="12"><div class="ag-info">` +
+        `<div class="ag-msg-wrap">${tipHtml}<div class="ag-msg">${preview}</div></div>` +
+        '</div></td></tr>';
+    }
   }
   html += '</tbody></table>';
   if (data.daemonRunning) {
@@ -3360,6 +3656,83 @@ function msgChannelTone(channelType) {
     : 'other';
 }
 
+function renderMsgMobileControls(aids, peers, scopeMatches) {
+  const el = $('#msg-mobile-controls');
+  if (!el) return;
+  const aidOptions = aids.map(item => {
+    const name = item.displayName || (item.selfAID && item.selfAID !== 'unknown' ? shortAid(item.selfAID) : 'unknown');
+    return `<option value="${esc(item.aid)}"${item.aid === msgSel.aid ? ' selected' : ''}>${esc(name)}</option>`;
+  }).join('');
+  const peerOptions = peers.map(item => {
+    const name = item.chatType === 'group'
+      ? (item.groupName || item.peerName || item.groupId || item.peerId)
+      : (item.peerName || item.peerId);
+    return `<option value="${esc(item.peerId)}"${item.peerId === msgSel.peer ? ' selected' : ''}>${esc(shortId(name))}</option>`;
+  }).join('');
+  el.innerHTML = `<label><span>${esc(t('messages.mobile.aid'))}</span>` +
+    `<select id="msg-mobile-aid"${aids.length ? '' : ' disabled'}>${aidOptions || '<option value="">—</option>'}</select>` +
+    `</label><label><span>${esc(t('messages.mobile.peer'))}</span>` +
+    `<select id="msg-mobile-peer"${scopeMatches && peers.length ? '' : ' disabled'}>${peerOptions || '<option value="">—</option>'}</select>` +
+    '</label>';
+  const aidSelect = $('#msg-mobile-aid');
+  if (aidSelect) aidSelect.onchange = () => {
+    msgSel = { aid: aidSelect.value || null, peer: null, before: null };
+    detailViewState.msg = false;
+    saveSessionUiState();
+    subscribe('msg', msgSel);
+  };
+  const peerSelect = $('#msg-mobile-peer');
+  if (peerSelect) peerSelect.onchange = () => {
+    msgSel = { aid: msgSel.aid, peer: peerSelect.value || null, before: null };
+    saveSessionUiState();
+    subscribe('msg', msgSel);
+  };
+}
+
+function msgAgentIsExpanded(aid) {
+  return aid === msgSel.aid && !msgCollapsedAids.has(aid);
+}
+
+function renderMsgPeerItem(peer, extraClass = '') {
+  const sel = peer.peerId === msgSel.peer ? ' sel' : '';
+  const isGroup = peer.chatType === 'group';
+  const displayName = peer.chatType === 'group'
+    ? (peer.groupName || peer.peerName || peer.groupId || peer.peerId)
+    : (peer.peerName || peer.peerId);
+  const chatTitle = peer.partition === 'thread'
+    ? (peer.threadName || peer.threadId || displayName)
+    : peer.partition === 'legacy'
+      ? t('messages.legacy.title')
+      : displayName;
+  const channelLabel = peer.channelName && peer.channelName !== 'main'
+    ? `${peer.channelType}/${peer.channelName}`
+    : (peer.channelType || '');
+  const groupMark = isGroup ? `<span class="msg-group-mark">${esc(t('messages.tag.groupShort'))}</span>` : '';
+  const partitionLabel = peer.partition === 'thread'
+    ? t('messages.tag.topic')
+    : peer.partition === 'legacy' ? t('messages.tag.legacy') : t('messages.tag.main');
+  const partitionMark = `<span class="msg-partition-mark msg-partition-${esc(peer.partition || 'main')}">${esc(partitionLabel)}</span>`;
+  const channelTag = channelLabel
+    ? `<span class="msg-tag msg-channel msg-channel-${msgChannelTone(peer.channelType)}">${esc(channelLabel)}</span>`
+    : '';
+  const topicStatus = ({ pending: '待讨论', in_progress: '进行中', completed: '已完成', archived: '已归档' })[peer.topicStatus] || '待讨论';
+  const sub = peer.partition === 'thread' ? `${esc(topicStatus)} · ` : '';
+  const label = peer.label ? `${esc(peer.label)} · ` : '';
+  const threadPeer = peer.partition === 'thread' ? `${esc(shortId(displayName))} · ` : '';
+  return `<div class="list-item msg-peer-item ${extraClass}${sel}" data-peer="${esc(peer.peerId)}">` +
+    `<div class="name">${groupMark}${partitionMark}<span class="msg-peer-title" title="${esc(chatTitle)}">${esc(shortId(chatTitle))}</span>${channelTag}</div>` +
+    `<div class="sub">${sub}${label}${threadPeer}↓${peer.inbound} ↑${peer.outbound} · ${fmtAgo(peer.lastAt)}</div></div>`;
+}
+
+function bindDetailPreview(container, view) {
+  if (!container) return;
+  container.onclick = event => {
+    if (event.target.closest('button, a, input, select, textarea, summary, details')) return;
+    if (detailViewState[view]) leaveDetail(view);
+    else enterDetail(view);
+  };
+}
+
 function renderMsg(data) {
   if (!data) return;
   const aids = data.scopes || data.aids || [];
@@ -3371,6 +3744,7 @@ function renderMsg(data) {
     const nextAid = aids[0]?.aid || null;
     const selectionChanged = msgSel.aid !== nextAid || msgSel.peer !== null;
     msgSel = { aid: nextAid, peer: null, before: null };
+    saveSessionUiState();
     if (selectionChanged && nextAid) subscribe('msg', msgSel);
   }
   const scopeMatches = data.scope === msgSel.aid;
@@ -3381,6 +3755,7 @@ function renderMsg(data) {
       const nextPeer = peers[0]?.peerId || null;
       const selectionChanged = msgSel.peer !== nextPeer;
       msgSel = { aid: msgSel.aid, peer: nextPeer, before: null };
+      saveSessionUiState();
       if (selectionChanged && nextPeer) subscribe('msg', msgSel);
     }
   }
@@ -3388,24 +3763,78 @@ function renderMsg(data) {
   const selectedAid = aids.find(item => item.aid === msgSel.aid);
   const peerTotal = scopeMatches ? peers.length : (selectedAid?.peerCount || 0);
 
-  // 左：AID 列表
-  let aidsHtml = `<div class="col-title"><span>${t('messages.colTitle.aid')}</span><span class="col-count">${aids.length}</span></div>`;
+  // 左：桌面端 AID 列表；双列布局使用同一栏里的 Agent → Chats 树。
+  let aidListHtml = `<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.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 })}` : '';
-    aidsHtml += `<div class="list-item${sel}" data-aid="${esc(a.aid)}">` +
+    aidListHtml += `<div class="list-item msg-aid-item${sel}" data-aid="${esc(a.aid)}">` +
       `<div class="name">${esc(name)}</div>` +
       `<div class="sub">↓${a.totalIn} ↑${a.totalOut} · ${privateBit}${groupBit} · ${fmtAgo(a.lastAt)}</div></div>`;
   }
-  if (!aids.length) aidsHtml += `<div class="empty">${t('messages.empty.noAgents')}</div>`;
-  $('#msg-aids').innerHTML = aidsHtml;
-  $('#msg-aids').querySelectorAll('.list-item').forEach(item => {
+  if (!aids.length) aidListHtml += `<div class="empty">${t('messages.empty.noAgents')}</div>`;
+
+  let aidTreeHtml = `<div class="msg-tree-title"><span>${t('messages.colTitle.aid')}</span><span class="col-count">${aids.length}</span></div>`;
+  for (const a of aids) {
+    const selected = a.aid === msgSel.aid;
+    const expanded = msgAgentIsExpanded(a.aid);
+    const name = a.displayName || (a.selfAID && a.selfAID !== 'unknown' ? shortAid(a.selfAID) : 'unknown');
+    const peerCount = a.peerCount || 0;
+    const groupBit = a.groupCount ? ` · ${tf('messages.groupCount', { count: a.groupCount })}` : '';
+    let chatsHtml = '';
+    if (expanded) {
+      if (!scopeMatches) chatsHtml = `<div class="msg-tree-empty">${t('common.loading')}</div>`;
+      else if (!peers.length) chatsHtml = `<div class="msg-tree-empty">${t('messages.empty.noPeers')}</div>`;
+      else chatsHtml = peers.map(peer => renderMsgPeerItem(peer, 'msg-tree-chat')).join('');
+    }
+    aidTreeHtml += `<div class="msg-tree-agent${selected ? ' sel' : ''}${expanded ? ' expanded' : ''}">` +
+      `<button type="button" class="msg-tree-agent-toggle" data-aid="${esc(a.aid)}" aria-expanded="${expanded ? 'true' : 'false'}">` +
+        `<span class="msg-tree-chevron" aria-hidden="true">${expanded ? '▾' : '▸'}</span>` +
+        `<span class="msg-tree-agent-main"><span class="name">${esc(name)}</span>` +
+          `<span class="sub">${t('messages.colTitle.peers')} ${peerCount} · ↓${a.totalIn} ↑${a.totalOut}${groupBit ? `${groupBit}` : ''} · ${fmtAgo(a.lastAt)}</span>` +
+        `</span>` +
+      `</button>` +
+      `<div class="msg-tree-chats"${expanded ? '' : ' hidden'}>${chatsHtml}</div>` +
+    `</div>`;
+  }
+  if (!aids.length) aidTreeHtml += `<div class="empty">${t('messages.empty.noAgents')}</div>`;
+  $('#msg-aids').innerHTML = `<div class="msg-aids-list">${aidListHtml}</div><div class="msg-tree-view">${aidTreeHtml}</div>`;
+  $('#msg-aids').querySelectorAll('.msg-aid-item').forEach(item => {
     item.onclick = () => {
       if (item.dataset.aid === msgSel.aid) return;
+      msgCollapsedAids.delete(item.dataset.aid);
       msgSel = { aid: item.dataset.aid, peer: null, before: null };
+      detailViewState.msg = false;
+      saveSessionUiState();
+      subscribe('msg', msgSel);
+    };
+  });
+
+  $('#msg-aids').querySelectorAll('.msg-tree-agent-toggle').forEach(item => {
+    item.onclick = () => {
+      const aid = item.dataset.aid;
+      if (aid !== msgSel.aid) {
+        msgCollapsedAids.delete(aid);
+        msgSel = { aid, peer: null, before: null };
+        detailViewState.msg = false;
+        saveSessionUiState();
+        subscribe('msg', msgSel);
+        return;
+      }
+      if (msgCollapsedAids.has(aid)) msgCollapsedAids.delete(aid);
+      else msgCollapsedAids.add(aid);
+      renderMsg(state.msg);
+    };
+  });
+  $('#msg-aids').querySelectorAll('.msg-tree-chat').forEach(item => {
+    item.onclick = event => {
+      event.stopPropagation();
+      if (item.dataset.peer === msgSel.peer) return;
+      msgSel = { aid: msgSel.aid, peer: item.dataset.peer, before: null };
+      saveSessionUiState();
       subscribe('msg', msgSel);
     };
   });
@@ -3419,40 +3848,20 @@ function renderMsg(data) {
   } else if (!peers.length) {
     peersHtml += `<div class="empty">${t('messages.empty.noPeers')}</div>`;
   } else {
-    for (const p of peers) {
-      const sel = p.peerId === msgSel.peer ? ' sel' : '';
-      const isGroup = p.chatType === 'group';
-      const displayName = p.chatType === 'group'
-        ? (p.groupName || p.peerName || p.groupId || p.peerId)
-        : (p.peerName || p.peerId);
-      const chatTitle = p.partition === 'thread'
-        ? (p.threadName || p.threadId || displayName)
-        : p.partition === 'legacy'
-          ? t('messages.legacy.title')
-          : displayName;
-      const channelLabel = p.channelName && p.channelName !== 'main' ? `${p.channelType}/${p.channelName}` : (p.channelType || '');
-      const groupMark = isGroup ? `<span class="msg-group-mark">${esc(t('messages.tag.groupShort'))}</span>` : '';
-      const partitionLabel = p.partition === 'thread'
-        ? 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 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.lable ? `${esc(p.lable)} · ` : ''}${p.partition === 'thread' ? `${esc(shortId(displayName))} · ` : ''}↓${p.inbound} ↑${p.outbound} · ${fmtAgo(p.lastAt)}</div></div>`;
-    }
+    for (const p of peers) peersHtml += renderMsgPeerItem(p);
   }
   $('#msg-peers').innerHTML = peersHtml;
-  $('#msg-peers').querySelectorAll('.list-item').forEach(item => {
+  $('#msg-peers').querySelectorAll('.msg-peer-item').forEach(item => {
     item.onclick = () => {
       if (item.dataset.peer === msgSel.peer) return;
       msgSel = { aid: msgSel.aid, peer: item.dataset.peer, before: null };
+      saveSessionUiState();
       subscribe('msg', msgSel);
     };
   });
 
+  renderMsgMobileControls(aids, peers, scopeMatches);
+
   // 右：消息流
   const stream = $('#msg-stream');
   if (!msgSel.aid) { stream.innerHTML = `<div class="empty">${t('messages.empty.selectToView')}</div>`; return; }
@@ -3491,16 +3900,83 @@ function renderMsg(data) {
   }
   msgHtml += messages.length ? '</div>' : `<div class="empty">${t('messages.empty.noMessages')}</div></div>`;
   stream.innerHTML = renderMsgSessionHeader(sessionContext) + msgHtml;
+  bindDetailPreview(stream, 'msg');
+  const sessionDetailsRow = stream.querySelector('.msg-session-id-row');
+  const sessionDetails = stream.querySelector('.msg-session-grid');
+  if (sessionDetailsRow && sessionDetails) {
+    const detailsKey = [msgSel.aid || '', msgSel.peer || '', sessionContext?.sessionId || ''].join('\u001f');
+    const expanded = msgSessionDetailsExpanded.has(detailsKey)
+      ? msgSessionDetailsExpanded.get(detailsKey) !== false
+      : true;
+    sessionDetails.hidden = !expanded;
+    sessionDetailsRow.setAttribute('aria-expanded', String(expanded));
+    sessionDetails.setAttribute('aria-expanded', String(expanded));
+    const initialLabel = t(`messages.session.details.${expanded ? 'collapse' : 'expand'}`);
+    sessionDetailsRow.setAttribute('aria-label', initialLabel);
+    sessionDetailsRow.title = initialLabel;
+    sessionDetails.setAttribute('aria-label', initialLabel);
+    const initialIcon = sessionDetailsRow.querySelector('.msg-session-toggle-icon');
+    if (initialIcon) initialIcon.textContent = expanded ? '▾' : '▸';
+    const setSessionDetailsExpanded = () => {
+      const nextExpanded = sessionDetails.hidden;
+      sessionDetails.hidden = !nextExpanded;
+      msgSessionDetailsExpanded.set(detailsKey, nextExpanded);
+      sessionDetailsRow.setAttribute('aria-expanded', String(nextExpanded));
+      sessionDetails.setAttribute('aria-expanded', String(nextExpanded));
+      const label = t(`messages.session.details.${nextExpanded ? 'collapse' : 'expand'}`);
+      sessionDetailsRow.setAttribute('aria-label', label);
+      sessionDetailsRow.title = label;
+      sessionDetails.setAttribute('aria-label', label);
+      const icon = sessionDetailsRow.querySelector('.msg-session-toggle-icon');
+      if (icon) icon.textContent = nextExpanded ? '▾' : '▸';
+    };
+    sessionDetailsRow.onclick = event => {
+      event.stopPropagation();
+      setSessionDetailsExpanded();
+    };
+    sessionDetailsRow.onkeydown = event => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      event.stopPropagation();
+      setSessionDetailsExpanded();
+    };
+    sessionDetails.onclick = event => {
+      event.stopPropagation();
+      setSessionDetailsExpanded();
+    };
+    sessionDetails.onkeydown = event => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      event.stopPropagation();
+      setSessionDetailsExpanded();
+    };
+  }
   const loadMore = stream.querySelector('.msg-load-more');
   if (loadMore) loadMore.onclick = () => {
     msgSel = { aid: msgSel.aid, peer: msgSel.peer, before: Number(loadMore.dataset.before) };
+    saveSessionUiState();
     subscribe('msg', msgSel);
   };
   if (atBottom) stream.scrollTop = stream.scrollHeight;
 }
 
+function renderDetailToolbar(view, title = '') {
+  return title ? `<div class="detail-toolbar"><span class="detail-toolbar-title">${esc(title)}</span></div>` : '';
+}
+
+function renderSessionDetailToolbar() {
+  return '<div class="detail-toolbar sess-detail-toolbar">' +
+    `<span class="detail-toolbar-title">${esc(t('tab.sessions'))}</span>` +
+    '<div class="sess-view-control">' +
+      `<button class="view-toggle${sessChatMode ? ' active' : ''}" id="chat-toggle">` +
+        `${sessChatMode ? t('sessions.chatView') : t('sessions.fullView')}</button>` +
+      `<span class="toolbar-hint">${sessChatMode ? t('sessions.chatHint') : t('sessions.fullHint')}</span>` +
+    '</div>' +
+    '</div>';
+}
+
 function renderMsgSessionHeader(context) {
-  if (!context) return '';
+  if (!context) return renderDetailToolbar('msg');
   const status = context.status === 'processing' ? 'processing' : 'idle';
   const statusLabel = t(`messages.session.status.${status}`);
   const modeKey = context.chatMode === 'proactive' ? 'proactive' : (context.chatMode === 'interactive' ? 'interactive' : '');
@@ -3521,13 +3997,16 @@ function renderMsgSessionHeader(context) {
         `${esc(value)}</span>` +
     '</span>'
   ).join('');
-  return '<div class="sess-header msg-session-header">' +
+  const detailsLabel = t('messages.session.details.collapse');
+  return renderDetailToolbar('msg') +
+    '<div class="sess-header msg-session-header">' +
     '<div class="msg-session-context-row">' +
-      '<div class="msg-session-id-row">' +
+      `<div class="msg-session-id-row" role="button" tabindex="0" aria-expanded="false" aria-label="${esc(detailsLabel)}" title="${esc(detailsLabel)}">` +
         `<span class="msg-session-label">${t('messages.session.field.sessionId')}</span>` +
         `<span class="msg-session-id" title="${esc(context.sessionId || '—')}">${esc(context.sessionId || '—')}</span>` +
+        '<span class="msg-session-toggle" aria-hidden="true"><span class="msg-session-toggle-icon">▸</span></span>' +
       '</div>' +
-      `<div class="msg-session-grid">${stats}</div>` +
+      `<div class="msg-session-grid" role="button" tabindex="0" hidden>${stats}</div>` +
     '</div>' +
     '</div>';
 }
@@ -3665,7 +4144,7 @@ function renderSession(data) {
   // 有效筛选
   const filtered = filterSessionTranscripts(transcripts, sessShowAll, sessSourceFilter);
 
-  // 左栏：过滤条 + 列表
+  // 会话列表顶部：过滤条 + 标题/计数；详情保持右侧第二列。
   const projOpts = projects.map(p =>
     `<option value="${esc(p.encoded)}"${p.encoded === sessSel.project ? ' selected' : ''}>${esc(p.label)} (${p.count})</option>`
   ).join('');
@@ -3680,7 +4159,7 @@ function renderSession(data) {
 
   const filterLabelKey = sessShowAll ? 'sessions.filter.all' : 'sessions.filter.valid';
   const filterTitleKey = sessShowAll ? 'sessions.filter.allTitle' : 'sessions.filter.validTitle';
-  let listHtml = '<div class="sess-filter">' +
+  const contextHtml = '<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>` +
@@ -3693,8 +4172,9 @@ function renderSession(data) {
         `<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>' +
-    '<div class="sess-items">';
+    '</div></div>';
+
+  let listHtml = contextHtml + '<div class="sess-items">';
 
   if (!filtered.length) {
     const emptyText = data.noConfiguredBaseagent
@@ -3719,47 +4199,72 @@ function renderSession(data) {
   }
   listHtml += '</div>';
   $('#sess-list').innerHTML = listHtml;
+  bindSessionListScroll();
+  restoreSessionListScroll();
+  window.requestAnimationFrame?.(restoreSessionListScroll);
 
   // 绑定交互
   const baseagentSel = $('#sess-baseagent');
   if (baseagentSel) baseagentSel.onchange = () => {
     console.log('[ecweb] Baseagent changed to:', baseagentSel.value);
     sessSel = { sessionId: null, project: null, baseagent: baseagentSel.value, turnBefore: null };
+    detailViewState.session = false;
+    saveSessionUiState();
     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, turnBefore: null };
+    detailViewState.session = false;
+    saveSessionUiState();
     subscribe('session', { project: sessSel.project, baseagent: sessSel.baseagent });
   };
   const filterToggle = $('#sess-filter-toggle');
-  if (filterToggle) filterToggle.onchange = () => { sessShowAll = filterToggle.checked; renderSession(state.session); };
+  if (filterToggle) filterToggle.onchange = () => { sessShowAll = filterToggle.checked; saveSessionUiState(); renderSession(state.session); };
   const sourceTypeSelect = $('#sess-source-type');
   if (sourceTypeSelect) sourceTypeSelect.onchange = () => {
     sessSourceFilter = sourceTypeSelect.value;
+    saveSessionUiState();
     renderSession(state.session);
   };
   $('#sess-list').querySelectorAll('.list-item').forEach(item => {
-    item.onclick = () => { sessSel = { sessionId: item.dataset.sid, project: sessSel.project, baseagent: sessSel.baseagent, turnBefore: null }; subscribe('session', sessSel); };
+    item.onclick = () => {
+      sessSel = { sessionId: item.dataset.sid, project: sessSel.project, baseagent: sessSel.baseagent, turnBefore: null };
+      saveSessionUiState();
+      if (window.matchMedia?.('(max-width: 479px)').matches) enterDetail('session');
+      subscribe('session', sessSel);
+    };
   });
 
   // 右：transcript 详情
   const detail = $('#sess-detail');
-  if (!sessSel.sessionId) { detail.innerHTML = `<div class="empty">${t('sessions.selectLog')}</div>`; return; }
-  if (!turns.length) { detail.innerHTML = `<div class="empty">${t('sessions.empty.noContent')}</div>`; return; }
+  if (!sessSel.sessionId) {
+    detail.innerHTML = `<div class="detail-toolbar"><span class="detail-placeholder">${t('sessions.selectLog')}</span></div><div class="empty">${t('sessions.selectLog')}</div>`;
+    bindDetailPreview(detail, 'session');
+    return;
+  }
+  if (!turns.length) {
+    detail.innerHTML = renderDetailToolbar('session') + `<div class="empty">${t('sessions.empty.noContent')}</div>`;
+    bindDetailPreview(detail, 'session');
+    return;
+  }
   const h = data.header || {};
   const atBottom = detail.scrollHeight - detail.scrollTop - detail.clientHeight < 60;
-  let html = renderSessHeader(h, data.baseagent || sessSel.baseagent);
+  let html = renderSessionDetailToolbar();
+  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;
+  bindDetailPreview(detail, 'session');
+  bindSessionHeaderToggle(detail, [sessSel.project || '', data.baseagent || sessSel.baseagent || '', h.sessionId || ''].join('\u001f'));
 
   const loadMore = detail.querySelector('.sess-load-more');
   if (loadMore) loadMore.onclick = () => {
     sessSel = { ...sessSel, turnBefore: Number(loadMore.dataset.before) };
+    saveSessionUiState();
     subscribe('session', sessSel);
   };
 
@@ -3770,6 +4275,41 @@ function renderSession(data) {
   if (atBottom) detail.scrollTop = detail.scrollHeight;
 }
 
+function bindSessionHeaderToggle(container, key) {
+  const toggleRow = container?.querySelector('.sess-header-toggle-row');
+  const details = container?.querySelector('.sess-header-details');
+  if (!toggleRow || !details) return;
+  const remembered = sessHeaderExpanded.get(key);
+  const initialExpanded = remembered == null ? true : remembered !== false;
+  const apply = expanded => {
+    details.hidden = !expanded;
+    const label = t(`sessions.details.${expanded ? 'collapse' : 'expand'}`);
+    toggleRow.setAttribute('aria-expanded', String(expanded));
+    toggleRow.setAttribute('aria-label', label);
+    toggleRow.title = label;
+    details.setAttribute('aria-expanded', String(expanded));
+    details.setAttribute('aria-label', label);
+    const icon = toggleRow.querySelector('.sess-header-toggle-icon');
+    if (icon) icon.textContent = expanded ? '▾' : '▸';
+  };
+  const toggle = event => {
+    event.preventDefault();
+    event.stopPropagation();
+    const expanded = details.hidden;
+    sessHeaderExpanded.set(key, expanded);
+    apply(expanded);
+  };
+  toggleRow.onclick = toggle;
+  details.onclick = toggle;
+  toggleRow.onkeydown = event => {
+    if (event.key === 'Enter' || event.key === ' ') toggle(event);
+  };
+  details.onkeydown = event => {
+    if (event.key === 'Enter' || event.key === ' ') toggle(event);
+  };
+  apply(initialExpanded);
+}
+
 // 完整视图：所有轮次按 4 类渲染
 function renderFullView(turns) {
   let html = '';
@@ -3899,24 +4439,23 @@ function renderSessHeader(h, baseagent) {
     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.boundSelf || ''))} ${dot}</span>`;
   }
-  return '<div class="sess-header">' +
-    '<div class="sh-title-row">' +
+  const detailsLabel = t('sessions.details.collapse');
+  return '<div class="sess-header sess-header-collapsible">' +
+    `<div class="sess-header-toggle-row" role="button" tabindex="0" aria-expanded="true" aria-label="${esc(detailsLabel)}" title="${esc(detailsLabel)}">` +
       `<div class="sh-title" title="${esc(title)}">${esc(title)}</div>` +
+      '<span class="sess-header-toggle" aria-hidden="true"><span class="sess-header-toggle-icon">▾</span></span>' +
     '</div>' +
-    '<div class="sh-stats">' +
-    `<span class="sh-stat" title="${tf('sessions.messageCountTitle', { user: h.userMsgs || 0, total: h.totalMsgs || 0 })}">💬 ${h.userMsgs || 0}/${h.totalMsgs || 0} ${t('sessions.msgUnit')}</span>` +
-    (h.model ? `<span class="sh-stat">🤖 ${esc(h.model)}</span>` : '') +
-    tok + ctx + cost +
-    (h.gitBranch ? `<span class="sh-stat">🌿 ${esc(h.gitBranch)}</span>` : '') +
-    (h.version ? `<span class="sh-stat">cc ${esc(h.version)}</span>` : '') +
-    bind +
-    '</div>' +
-    '<div class="sh-footer-row">' +
-      renderCatBar(h.counts) +
-      '<div class="sess-view-control">' +
-        `<button class="view-toggle${sessChatMode ? ' active' : ''}" id="chat-toggle">` +
-          `${sessChatMode ? t('sessions.chatView') : t('sessions.fullView')}</button>` +
-        `<span class="toolbar-hint">${sessChatMode ? t('sessions.chatHint') : t('sessions.fullHint')}</span>` +
+    '<div class="sess-header-details" role="button" tabindex="0" aria-expanded="true" aria-label="' + esc(detailsLabel) + '">' +
+      '<div class="sh-stats">' +
+      `<span class="sh-stat" title="${tf('sessions.messageCountTitle', { user: h.userMsgs || 0, total: h.totalMsgs || 0 })}">💬 ${h.userMsgs || 0}/${h.totalMsgs || 0} ${t('sessions.msgUnit')}</span>` +
+      (h.model ? `<span class="sh-stat">🤖 ${esc(h.model)}</span>` : '') +
+      tok + ctx + cost +
+      (h.gitBranch ? `<span class="sh-stat">🌿 ${esc(h.gitBranch)}</span>` : '') +
+      (h.version ? `<span class="sh-stat">cc ${esc(h.version)}</span>` : '') +
+      bind +
+      '</div>' +
+      '<div class="sh-footer-row">' +
+        renderCatBar(h.counts) +
       '</div>' +
     '</div>' +
     '</div>';
@@ -5346,7 +5885,7 @@ function openAgentConfigDrawer(aid, data) {
   const fullaccessState = enabled => currentLang === 'zh-CN'
     ? (enabled ? '开启' : '关闭')
     : (enabled ? 'Enabled' : 'Disabled');
-  const fullaccessSection = fullaccessStatus.hostEnabled ?
+  const fullaccessSection =
     `<section class="ag-edit-section">` +
       `<div class="ag-edit-fullaccess-row">` +
         `<span class="ag-edit-field-label">Owner Fullaccess<span class="basic-settings-tip" tabindex="0" role="img" aria-label="${esc(fullaccessHelpLabel)}" data-tooltip="${esc(fullaccessHelp)}">?</span></span>` +
@@ -5356,7 +5895,7 @@ function openAgentConfigDrawer(aid, data) {
           `<span class="sess-switch-track" aria-hidden="true"><span class="sess-switch-thumb"></span></span>` +
         `</label>` +
       `</div>` +
-    `</section>` : '';
+    `</section>`;
 
   const html = `<div class="ag-edit-backdrop" id="ag-edit-backdrop">` +
     `<aside class="ag-edit-drawer" role="dialog" aria-modal="true" aria-labelledby="ag-edit-title">` +
@@ -5439,7 +5978,6 @@ function openAgentConfigDrawer(aid, data) {
   document.addEventListener('keydown', ctx.onKeydown);
   syncAgentBaseagentFields(ctx);
   syncAgentBaseagentOptions(ctx);
-  setTimeout(() => backdrop.querySelector('#ag-edit-owners')?.focus(), 0);
 }
 
 async function agentOpEdit(aid) {
@@ -5789,8 +6327,7 @@ const TRIGGER_EFFORTS = ['low', 'medium', 'high', 'xhigh', 'max'];
 const TRIGGER_PERMISSION_MODES = ['readonly', 'auto', 'request', 'bypass'];
 function triggerPermissionModes(currentMode = '') {
   const modes = [...TRIGGER_PERMISSION_MODES];
-  if ((state.triggers?.fullaccessEnabled === true
-      && state.triggers?.canApprovePersistentFullAccess === true)
+  if (state.triggers?.canApprovePersistentFullAccess === true
       || currentMode === 'fullaccess') modes.push('fullaccess');
   return modes;
 }
@@ -6332,6 +6869,18 @@ function triggerAgentInfo(agentAid) {
   return (state.triggers?.agents || []).find(item => item.aid === agentAid || item.value === agentAid) || null;
 }
 
+function isDaemonTriggerAgent(aid, label, channels) {
+  const normalizedAid = String(aid || '').trim().toLowerCase();
+  const normalizedLabel = String(label || '').trim().toLowerCase();
+  return normalizedAid === 'daemon'
+    || normalizedAid === '__daemon__'
+    || normalizedAid.endsWith('#daemon')
+    || normalizedAid.endsWith('.daemon')
+    || normalizedLabel === 'daemon'
+    || (Array.isArray(channels) && channels.some(channel => String(channel).trim().toLowerCase() === 'daemon'))
+    || /\(daemon\)$/i.test(normalizedLabel);
+}
+
 function triggerChannelOptions(agentAid, current) {
   const channels = [...(triggerAgentInfo(agentAid)?.channels || [])].map(String).filter(Boolean);
   if (current && !channels.includes(current)) channels.push(current);
@@ -6468,31 +7017,22 @@ function triggerRunJson(value) {
   try { return JSON.stringify(value, null, 2); } catch { return String(value); }
 }
 
-function triggerRunPreview(run) {
-  return String(
-    run?.error?.message
-      || run?.reply?.textPreview
-      || run?.script?.result?.text
-      || run?.script?.stderrPreview
-      || run?.script?.stdoutPreview
-      || run?.reason
-      || '',
-  );
-}
-
-function triggerHistoryListHtml(runs, selectedRunId) {
+function triggerHistoryListHtml(runs, selectedRunId, inlineDetails, renderDetail) {
   if (!runs.length) return `<div class="trig-history-empty">${t('triggers.history.empty')}</div>`;
   return runs.map(run => {
     const runId = String(run.runId || '');
+    const selected = runId === selectedRunId;
+    const expanded = inlineDetails && selected;
     const duration = Number(run.finishedAt || 0) - Number(run.startedAt || 0);
     const source = run.source?.eventName || run.source?.type || '—';
     const execution = run.processing?.mode || run.definition?.name || '—';
-    const preview = triggerRunPreview(run);
-    return `<button type="button" class="trig-history-item${runId === selectedRunId ? ' selected' : ''}" data-runid="${esc(runId)}">` +
-      `<div class="trig-history-item-head"><span>${run.startedAt ? fmtTime(run.startedAt) : '—'}</span>${triggerRunStatusBadge(run.status)}</div>` +
+    return `<article class="trig-history-entry${expanded ? ' expanded' : ''}">` +
+      `<button type="button" class="trig-history-item${selected ? ' selected' : ''}" data-runid="${esc(runId)}" aria-expanded="${expanded}">` +
+      `<div class="trig-history-item-head"><span>${run.startedAt ? fmtTime(run.startedAt) : '—'}</span>${triggerRunStatusBadge(run.status)}<span class="trig-history-chevron" aria-hidden="true">›</span></div>` +
       `<div class="trig-history-item-meta"><span>${esc(source)}</span><span>${esc(execution)}</span><span>${esc(triggerRunDurationLabel(duration))}</span></div>` +
-      (preview ? `<div class="trig-history-item-preview">${esc(preview)}</div>` : '') +
-      `</button>`;
+      `</button>` +
+      (expanded ? `<div class="trig-history-inline-detail">${renderDetail(run)}</div>` : '') +
+      `</article>`;
   }).join('');
 }
 
@@ -6843,29 +7383,38 @@ function triggerHistoryDetailHtml(run, definition) {
 function renderTriggerHistoryDrawer(ctx) {
   if (_triggerHistory !== ctx) return;
   const list = ctx.backdrop.querySelector('#trig-history-list');
-  const detail = ctx.backdrop.querySelector('#trig-history-detail');
   const count = ctx.backdrop.querySelector('#trig-history-count');
+  const detail = ctx.backdrop.querySelector('#trig-history-detail');
+  const inlineDetails = ctx.layoutQuery.matches;
   if (count) count.textContent = tf('triggers.history.runCount', { count: ctx.runs.length });
+  const renderDetail = run => {
+    const revision = String(run?.definition?.revision || '');
+    const historicalDefinition = ctx.definitionsByRevision.get(revision)
+      || (revision && revision === String(ctx.currentRevision || '') ? ctx.currentDefinition : undefined);
+    return triggerHistoryDetailHtml(run, historicalDefinition);
+  };
   if (list) {
-    list.innerHTML = triggerHistoryListHtml(ctx.runs, ctx.selectedRunId);
+    list.innerHTML = triggerHistoryListHtml(ctx.runs, ctx.selectedRunId, inlineDetails, renderDetail);
     list.querySelectorAll('.trig-history-item').forEach(item => {
       item.addEventListener('click', () => {
-        ctx.selectedRunId = item.dataset.runid || '';
+        const runId = item.dataset.runid || '';
+        ctx.selectedRunId = inlineDetails && ctx.selectedRunId === runId ? '' : runId;
         renderTriggerHistoryDrawer(ctx);
       });
     });
   }
-  const selected = ctx.runs.find(run => String(run.runId || '') === ctx.selectedRunId) || null;
-  const revision = String(selected?.definition?.revision || '');
-  const historicalDefinition = ctx.definitionsByRevision.get(revision)
-    || (revision && revision === String(ctx.currentRevision || '') ? ctx.currentDefinition : undefined);
-  if (detail) detail.innerHTML = triggerHistoryDetailHtml(selected, historicalDefinition);
+  const selectedRun = ctx.runs.find(run => String(run.runId || '') === ctx.selectedRunId) || null;
+  if (detail) detail.innerHTML = !inlineDetails && selectedRun
+    ? `<div class="trig-history-detail">${renderDetail(selectedRun)}</div>`
+    : `<div class="trig-history-detail-empty">${t('triggers.history.selectRun')}</div>`;
 }
 
 function closeTriggerHistoryDrawer() {
   const ctx = _triggerHistory;
   if (!ctx) return;
   document.removeEventListener('keydown', ctx.onKeydown);
+  if (ctx.layoutQuery?.removeEventListener) ctx.layoutQuery.removeEventListener('change', ctx.onLayoutChange);
+  else if (ctx.layoutQuery?.removeListener) ctx.layoutQuery.removeListener(ctx.onLayoutChange);
   try { ctx.backdrop.remove(); } catch {}
   _triggerHistory = null;
 }
@@ -6884,10 +7433,10 @@ async function openTriggerHistoryDrawer(id, agent) {
         `<button class="ag-edit-close" id="trig-history-close" type="button" aria-label="${t('common.close')}">×</button>` +
       `</div>` +
       `<div class="trig-history-content">` +
-        `<div class="trig-history-list-pane"><div id="trig-history-count" class="trig-history-pane-title">${t('triggers.history.loading')}</div><div id="trig-history-list" class="trig-history-list"><div class="trig-history-empty">${t('triggers.history.loading')}</div></div></div>` +
-        `<div id="trig-history-detail" class="trig-history-detail"><div class="trig-history-detail-empty">${t('triggers.history.selectRun')}</div></div>` +
+        `<div class="trig-history-list-pane"><div id="trig-history-list" class="trig-history-list"><div class="trig-history-empty">${t('triggers.history.loading')}</div></div></div>` +
+        `<div id="trig-history-detail" class="trig-history-detail-pane"><div class="trig-history-detail-empty">${t('triggers.history.selectRun')}</div></div>` +
       `</div>` +
-      `<div class="ag-edit-actions"><button class="ctrl-btn" id="trig-history-done" type="button">${t('common.close')}</button></div>` +
+      `<div class="ag-edit-actions trig-history-actions"><span id="trig-history-count" class="trig-history-count" aria-live="polite">${t('triggers.history.loading')}</span><button class="ctrl-btn" id="trig-history-done" type="button">${t('common.close')}</button></div>` +
     `</aside>` +
   `</div>`;
   const wrap = document.createElement('div');
@@ -6898,16 +7447,20 @@ async function openTriggerHistoryDrawer(id, agent) {
     backdrop,
     runs: [],
     selectedRunId: '',
+    layoutQuery: window.matchMedia('(orientation: portrait)'),
     currentDefinition: item.definition,
     currentRevision: item.revision,
     definitionsByRevision: new Map(),
     onKeydown: e => { if (e.key === 'Escape') closeTriggerHistoryDrawer(); },
+    onLayoutChange: () => renderTriggerHistoryDrawer(ctx),
   };
   _triggerHistory = ctx;
   backdrop.addEventListener('click', e => { if (e.target === backdrop) closeTriggerHistoryDrawer(); });
   backdrop.querySelector('#trig-history-close').addEventListener('click', closeTriggerHistoryDrawer);
   backdrop.querySelector('#trig-history-done').addEventListener('click', closeTriggerHistoryDrawer);
   document.addEventListener('keydown', ctx.onKeydown);
+  if (ctx.layoutQuery.addEventListener) ctx.layoutQuery.addEventListener('change', ctx.onLayoutChange);
+  else if (ctx.layoutQuery.addListener) ctx.layoutQuery.addListener(ctx.onLayoutChange);
 
   try {
     const response = await ipcSend({ type: 'trigger.history', agentAid: agent, triggerId: id, limit: 500 }, 10000);
@@ -7760,7 +8313,6 @@ function openTriggerEditDrawer(id, agent) {
     if (_triggerEdit === ctx) toast(e.message || String(e), true);
   });
   if (triggerUsesModelOptions(ctx)) syncTriggerOptionFields(ctx, original);
-  setTimeout(() => backdrop.querySelector('#trig-edit-name')?.focus(), 0);
 }
 
 function renderTriggers(data) {
@@ -7771,7 +8323,7 @@ function renderTriggers(data) {
 
   // 左列：agent 列表（仿 msg list-item 风格）
   let aHtml = '<div class="col-title trig-title">' +
-    '<span>Agent</span>' +
+    `<span>${t('triggers.th.agent')}</span>` +
     `<button id="trig-agents-toggle" class="trig-collapse-btn" title="${trigAgentsCollapsed ? t('triggers.collapse.expand') : t('triggers.collapse.collapse')}">${trigAgentsCollapsed ? '›' : '‹'}</button>` +
     '</div>';
   if (!trigAgentsCollapsed) {
@@ -7779,9 +8331,12 @@ function renderTriggers(data) {
     for (const ag of agents) {
       const aid = ag.aid || ag.value || '';
       const sel = aid === selAid ? ' sel' : '';
+      const isDaemonAgent = isDaemonTriggerAgent(aid, ag.label, ag.channels);
+      const label = isDaemonAgent ? t('triggers.agent.daemon') : ag.label;
       aHtml += `<div class="list-item${sel}" data-aid="${esc(aid)}">` +
-        `<div class="name">${esc(ag.label)}</div>` +
-        `<div class="sub">${esc(aid)}</div></div>`;
+        `<div class="name">${esc(label)}</div>` +
+        (isDaemonAgent ? '' : `<div class="sub">${esc(aid)}</div>`) +
+        '</div>';
     }
   }
   const agentCol = $('#trig-agents');
@@ -7799,11 +8354,13 @@ function renderTriggers(data) {
     if (trigAgentsCollapsed) return;
     if (!trigSel.agent) return;
     trigSel.agent = null;
+    saveSessionUiState();
     subscribe('triggers', {});
   };
   agentCol.querySelectorAll('.list-item').forEach(item => {
     item.onclick = () => {
       trigSel.agent = item.dataset.aid;
+      saveSessionUiState();
       subscribe('triggers', { agent: trigSel.agent });
     };
   });
@@ -7811,14 +8368,14 @@ function renderTriggers(data) {
   // 右列：table，每字段一列
   const el = $('#trig-table');
   if (!triggers.length) {
-    el.innerHTML = `<div class="empty" style="padding:16px">${selAid ? t('triggers.empty.noAgentTriggers') : t('triggers.empty.noTriggers')}</div>`;
+    el.innerHTML = `<div class="trig-table-empty empty" style="padding:16px">${selAid ? t('triggers.empty.noAgentTriggers') : t('triggers.empty.noTriggers')}</div>`;
     return;
   }
 
   let html = '<table><thead><tr>' +
-    `<th>Agent</th><th>${t('triggers.th.status')}</th><th>${t('triggers.th.subscription')}</th><th>${t('triggers.th.name')}</th><th>ID</th><th>${t('triggers.th.type')}</th><th>${t('triggers.th.expression')}</th>` +
+      `<th class="trig-agent-col">${t('triggers.th.agent')}</th><th>${t('triggers.th.status')}</th><th class="trig-subscription-col">${t('triggers.th.subscription')}</th><th>${t('triggers.th.name')}</th><th class="trig-id-col">${t('triggers.th.id')}</th><th>${t('triggers.th.type')}</th><th>${t('triggers.th.expression')}</th>` +
     `<th>${t('triggers.th.lastFire')}</th><th>${t('triggers.th.nextFire')}</th><th>${t('triggers.th.fireCount')}</th><th>${t('triggers.th.failCount')}</th><th>${t('triggers.th.lastResult')}</th><th>${t('triggers.field.executionType')}</th>` +
-    `<th>${t('triggers.th.targetChannel')}</th><th>${t('triggers.field.channelId')}</th><th>${t('triggers.th.channelType')}</th>` +
+    `<th class="trig-target-channel-col">${t('triggers.th.targetChannel')}</th><th class="trig-channel-id-col">${t('triggers.field.channelId')}</th><th class="trig-channel-type-col">${t('triggers.th.channelType')}</th>` +
     `<th>${t('triggers.th.createdBy')}</th><th>${t('triggers.th.createdChannel')}</th><th>${t('triggers.th.createdAt')}</th><th class="trig-ops-col">${t('triggers.th.operations')}</th>` +
     '</tr></thead><tbody>';
   for (const trigger of triggers) {
@@ -7827,42 +8384,62 @@ function renderTriggers(data) {
     const lastFireTime = trigger.lastFiredAt || trigger.lastScheduledAt;
     const lastResult = trigger.lastResult || (trigger.lastScheduledAt ? t('triggers.lastUnrecorded') : '');
     const agentAid = trigger.agentAid || trigger.schedulerAid || selAid || '';
-    const agentLabel = trigger.agentLabel || (agentAid ? shortAid(agentAid) : '');
+    const agentInfo = triggerAgentInfo(agentAid);
+    const agentLabel = isDaemonTriggerAgent(agentAid, trigger.agentLabel, agentInfo?.channels)
+      ? t('triggers.agent.daemon')
+      : (trigger.agentLabel || (agentAid ? shortAid(agentAid) : ''));
     const sourceType = triggerSourceType(trigger);
-    html += `<tr class="${active ? '' : 'trig-disabled'}">` +
-      `<td title="${esc(agentAid)}">${esc(agentLabel)}</td>` +
-      `<td>${trigStatusBadge(status)}</td>` +
-      `<td>${trigSubscriptionBadge(trigger.subscription, sourceType)}</td>` +
-      `<td>${esc(trigger.name ?? trigger.label ?? '')}</td>` +
-      `<td>${esc(trigger.id ?? trigger.value ?? '')}</td>` +
-      `<td>${esc(triggerScheduleLabel(sourceType || trigger.scheduleType || ''))}</td>` +
-      `<td>${esc(triggerScheduleValueLabel(trigger.scheduleType, trigger.scheduleValue))}</td>` +
-      `<td>${lastFireTime ? fmtTime(lastFireTime) : '—'}</td>` +
-      `<td>${trigger.nextFireAt ? fmtTime(trigger.nextFireAt) : '—'}</td>` +
-      `<td>${trigger.fireCount ?? 0}</td>` +
-      `<td>${trigger.failCount ? `<span style="color:var(--red)">${trigger.failCount}</span>` : '0'}</td>` +
-      `<td>${lastResult ? esc(lastResult) : '—'}</td>` +
-      `<td>${esc(triggerExecutionTypeLabel(trigger.definition?.execution?.type ?? trigger.executionType ?? trigger.execution?.type))}</td>` +
-      `<td>${esc(trigger.targetChannel ?? '')}</td>` +
-      `<td>${esc(trigger.targetChannelId ?? '')}</td>` +
-      `<td>${esc(trigger.targetChannelType ?? '')}</td>` +
-      `<td>${esc(trigger.createdByPeerId ?? '')}</td>` +
-      `<td>${esc(trigger.createdByChannel ?? '')}</td>` +
-      `<td>${trigger.createdAt ? fmtTime(trigger.createdAt) : '—'}</td>` +
-      `<td class="trig-ops-col">${triggerOpsHtml(trigger)}</td>` +
+    const mobileLabel = key => ` data-mobile-label="${esc(t(key))}"`;
+    html += `<tr class="trig-row${active ? '' : ' trig-disabled'}" tabindex="0" aria-expanded="false">` +
+      `<td class="trig-agent-col"${mobileLabel('triggers.th.agent')} title="${esc(agentAid)}">${esc(agentLabel)}</td>` +
+      `<td${mobileLabel('triggers.th.status')}>${trigStatusBadge(status)}</td>` +
+      `<td class="trig-subscription-col"${mobileLabel('triggers.th.subscription')}>${trigSubscriptionBadge(trigger.subscription, sourceType)}</td>` +
+      `<td${mobileLabel('triggers.th.name')}>${esc(trigger.name ?? trigger.label ?? '')}</td>` +
+      `<td class="trig-id-col"${mobileLabel('triggers.th.id')}>${esc(trigger.id ?? trigger.value ?? '')}</td>` +
+      `<td${mobileLabel('triggers.th.type')}>${esc(triggerScheduleLabel(sourceType || trigger.scheduleType || ''))}</td>` +
+      `<td${mobileLabel('triggers.th.expression')}>${esc(triggerScheduleValueLabel(trigger.scheduleType, trigger.scheduleValue))}</td>` +
+      `<td${mobileLabel('triggers.th.lastFire')}>${lastFireTime ? fmtTime(lastFireTime) : '—'}</td>` +
+      `<td${mobileLabel('triggers.th.nextFire')}>${trigger.nextFireAt ? fmtTime(trigger.nextFireAt) : '—'}</td>` +
+      `<td${mobileLabel('triggers.th.fireCount')}>${trigger.fireCount ?? 0}</td>` +
+      `<td${mobileLabel('triggers.th.failCount')}>${trigger.failCount ? `<span style="color:var(--red)">${trigger.failCount}</span>` : '0'}</td>` +
+      `<td${mobileLabel('triggers.th.lastResult')}>${lastResult ? esc(lastResult) : '—'}</td>` +
+      `<td${mobileLabel('triggers.field.executionType')}>${esc(triggerExecutionTypeLabel(trigger.definition?.execution?.type ?? trigger.executionType ?? trigger.execution?.type))}</td>` +
+      `<td class="trig-target-channel-col"${mobileLabel('triggers.th.targetChannel')}>${esc(trigger.targetChannel ?? '')}</td>` +
+      `<td class="trig-channel-id-col"${mobileLabel('triggers.field.channelId')}>${esc(trigger.targetChannelId ?? '')}</td>` +
+      `<td class="trig-channel-type-col"${mobileLabel('triggers.th.channelType')}>${esc(trigger.targetChannelType ?? '')}</td>` +
+      `<td${mobileLabel('triggers.th.createdBy')}>${esc(trigger.createdByPeerId ?? '')}</td>` +
+      `<td${mobileLabel('triggers.th.createdChannel')}>${esc(trigger.createdByChannel ?? '')}</td>` +
+      `<td${mobileLabel('triggers.th.createdAt')}>${trigger.createdAt ? fmtTime(trigger.createdAt) : '—'}</td>` +
+      `<td class="trig-ops-col"${mobileLabel('triggers.th.operations')}>${triggerOpsHtml(trigger)}</td>` +
       '</tr>';
   }
   html += '</tbody></table>';
-  el.innerHTML = html;
+  el.innerHTML = `<div class="trig-table-wide">${html}</div>`;
   ensureOpsOutsideClose();
+  bindTriggerOps(el);
+  el.querySelectorAll('.trig-row').forEach(row => {
+    const toggle = event => {
+      if (event.target.closest('button, a, input, select, textarea, summary, details')) return;
+      const expanded = row.classList.toggle('trig-expanded');
+      row.setAttribute('aria-expanded', String(expanded));
+    };
+    row.addEventListener('click', toggle);
+    row.addEventListener('keydown', event => {
+      if (event.key !== 'Enter' && event.key !== ' ') return;
+      event.preventDefault();
+      toggle(event);
+    });
+  });
+}
 
-  el.querySelectorAll('.trig-ops button[data-trig-op]').forEach(btn => {
+function bindTriggerOps(container) {
+  container.querySelectorAll('.trig-ops button[data-trig-op]').forEach(btn => {
     btn.addEventListener('click', async (e) => {
       const op = btn.dataset.trigOp;
       if (op === 'more') {
         const more = btn.closest('.ops-more');
         const wasOpen = more?.classList.contains('open');
-        document.querySelectorAll('.ops-more.open').forEach(m => m.classList.remove('open'));
+        document.querySelectorAll('.ops-more.open').forEach(item => item.classList.remove('open'));
         if (more && !wasOpen) more.classList.add('open');
         e.stopPropagation();
         return;
@@ -7883,8 +8460,9 @@ function startApp() {
   initTabs();
   initRolesTab();
   initRoleDefinitionsTab();
+  initHistory();
   // 恢复保存的 tab 视图
-  switchView(currentView);
+  switchView(currentView, { history: false });
   connect();
   $('#logout-btn').onclick = () => {
     localStorage.removeItem(TOKEN_KEY);
@@ -7912,13 +8490,17 @@ function resolveTheme(preference) {
 
 function updateThemeButton() {
   const btn = $('#theme-btn');
-  if (!btn) return;
   const icons = { light: '☀️', dark: '🌙', system: '🖥️' };
-  const label = t('theme.buttonTitle').replace('{mode}', t('theme.' + themePreference));
-  btn.textContent = icons[themePreference] || icons.light;
-  btn.title = label;
-  btn.setAttribute('aria-label', label);
-  btn.dataset.themeMode = themePreference;
+  const modeLabel = t('theme.' + themePreference);
+  const label = tf('theme.buttonTitle', { mode: modeLabel });
+  if (btn) {
+    btn.textContent = icons[themePreference] || icons.light;
+    btn.title = label;
+    btn.setAttribute('aria-label', label);
+    btn.dataset.themeMode = themePreference;
+  }
+  const mobileLabel = $('[data-mobile-theme-label]');
+  if (mobileLabel) mobileLabel.textContent = tf('theme.drawerLabel', { mode: modeLabel });
 }
 
 function disposeWindowChart(key) {
@@ -10039,6 +10621,7 @@ const COMMAND_PERMISSION_CATEGORY_ORDER = ['read', 'diagnose', 'write-own', 'wri
 const COMMAND_PERMISSION_BOOLEAN_CONSTRAINTS = [
   'ownPeerOnly',
   'ownAgentOnly',
+  'currentRelationOnly',
   'privateOnly',
   'groupOnly',
   'requireDaemonOwner',
@@ -10106,6 +10689,7 @@ function commandConstraintLabel(key) {
   const labels = {
     ownPeerOnly: currentLang === 'zh-CN' ? '仅本人 Peer' : 'Own peer only',
     ownAgentOnly: currentLang === 'zh-CN' ? '仅当前 Agent' : 'Own agent only',
+    currentRelationOnly: currentLang === 'zh-CN' ? '仅当前关系' : 'Current relation only',
     privateOnly: currentLang === 'zh-CN' ? '仅私聊' : 'Private only',
     groupOnly: currentLang === 'zh-CN' ? '仅群聊' : 'Group only',
     requireDaemonOwner: currentLang === 'zh-CN' ? '需要 daemon owner' : 'Require daemon owner',