mingdao-harness 0.6.20 → 0.6.22

package/docs/CONFIG.md

@@ -394,6 +394,22 @@ completion 计费，防止推理吃满上限时空轮白烧）、`compactTrigger
 
 长期偏好仍走用户记忆（`AGENTS.md`，见上），不受此开关影响。
 
+### WebUI 会话列表字段与消息时间（v0.6.22，§3.84）
+
+`GET /api/sessions` 的每一项在既有 `file` / `mtime` / `label` 之外**只增**三个只读字段：
+
+| 字段 | 含义 | 来源 |
+| --- | --- | --- |
+| `updatedAt` | 会话最后更新时间，ISO 字符串 | 会话文件 mtime |
+| `messageCount` | 该会话的 JSONL 消息条数（坏行跳过） | 只读解析文件 |
+| `title` | 会话标题（已有文件名即标题；自动标题/重命名都落在文件名上） | 文件名去 `.jsonl` |
+
+`GET /api/session?file=` 的每条消息**只增** `ts`（ISO 字符串）。旧会话（v0.6.21 及以前写的
+JSONL 没有 `ts`）返回 `"ts": null`，其余字段语义不变；WebUI 对 `ts` 为 `null` 的消息不渲染时间，
+不会出现 `Invalid Date` / `undefined`。新消息在**服务端落盘时**写入 `ts`（压缩重写保留已有值），
+前端不自行推算历史消息时间。分组（今天/昨天/本周/更早）与时间显示都在 `src/web/app.js`；
+分组只在会话列表刷新时计算一次，不引入轮询。
+
 ## 模型名称以 API 为准（v0.6.19，§3.67）
 
 **仓库不维护具体版本号，只维护「家族能力 / 定价模式」。** 官方改名、升版本（例如

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mingdao-harness",
-  "version": "0.6.20",
+  "version": "0.6.22",
   "description": "MingDao Harness —— 开源智能体框架（Agent Harness）。零依赖、开箱即用，针对 DeepSeek-V4 系列优化，开放主流模型接入。",
   "type": "module",
   "bin": {

package/src/web/app.js

@@ -224,16 +224,87 @@ chatEl.addEventListener('click', (e) => {
   const done = () => { b.textContent = '已复制'; setTimeout(() => { b.textContent = '复制'; }, 1200); };
   if (navigator.clipboard?.writeText) navigator.clipboard.writeText(t).then(done).catch(() => {});
 });
+// ==== v0.6.22 §3.84 会话分组 + 消息时间（纯函数，test/ui-sessions.js 可直接抽取执行）====
+// 只做展示：分组顺序固定「今天 → 昨天 → 本周 → 更早」，组标题不可点击/不可折叠。
+// 「现在」一律由调用方传入（默认 new Date()），测试用固定 now 避免跨午夜抖动。
+const SESSION_GROUP_ORDER = ['today', 'yesterday', 'week', 'earlier'];
+const SESSION_GROUP_TITLES = { today: '今天', yesterday: '昨天', week: '本周', earlier: '更早' };
+
+/** 取本地时区某一天的 00:00（用日期构造器而非减 86400000，跨夏令时也不会偏一小时）。 */
+function localDayStart(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+}
+
+/**
+ * 单个会话落在哪个分组。时间不可解析/缺失 → earlier（绝不抛错）。
+ * 边界：今天 00:00 起算今天；昨天 00:00 起算昨天；本周从周一 00:00 起算。
+ * @param {string|number|Date|undefined|null} updatedAt
+ * @param {Date} [now]
+ * @returns {string}
+ */
+function sessionGroupKey(updatedAt, now) {
+  const t = new Date(updatedAt == null ? NaN : updatedAt).getTime();
+  const n = now instanceof Date ? now : new Date(now == null ? Date.now() : now);
+  if (!Number.isFinite(t) || Number.isNaN(n.getTime())) return 'earlier';
+  const today = localDayStart(n);
+  if (t >= today) return 'today';
+  const yesterday = new Date(n.getFullYear(), n.getMonth(), n.getDate() - 1).getTime();
+  if (t >= yesterday) return 'yesterday';
+  const dow = (n.getDay() + 6) % 7; // 周一 = 0
+  const weekStart = new Date(n.getFullYear(), n.getMonth(), n.getDate() - dow).getTime();
+  if (t >= weekStart) return 'week';
+  return 'earlier';
+}
+
+/**
+ * 一次性把会话列表分到四个桶（空桶不返回；顺序固定）。调用方只在数据刷新时调用一次，
+ * 渲染函数只读 `sessionsGroupedCache`——不得在每次渲染时重算。
+ * @param {any[]} sessions
+ * @param {Date} [now]
+ * @returns {{key:string,title:string,items:any[]}[]}
+ */
+function groupSessionsByUpdatedAt(sessions, now) {
+  /** @type {Record<string, any[]>} */
+  const buckets = { today: [], yesterday: [], week: [], earlier: [] };
+  for (const s of sessions || []) {
+    // updatedAt 是 v0.6.22 新增字段；mtime 是旧接口既有字段（毫秒），两者都能分组。
+    buckets[sessionGroupKey(s && (s.updatedAt ?? s.mtime), now)].push(s);
+  }
+  return SESSION_GROUP_ORDER
+    .filter((key) => buckets[key].length > 0)
+    .map((key) => ({ key, title: SESSION_GROUP_TITLES[key], items: buckets[key] }));
+}
+
+/**
+ * 消息时间文案：同一天 `14:32`；跨天 `10-19 14:32`；缺失/非法 → ''（前端不渲染任何节点，
+ * 所以不会出现 "Invalid Date" / "undefined"）。
+ * @param {any} ts
+ * @param {Date} [now]
+ * @returns {string}
+ */
+function msgTimeText(ts, now) {
+  if (typeof ts !== 'string' || !ts.trim()) return '';
+  const d = new Date(ts);
+  if (Number.isNaN(d.getTime())) return '';
+  const n = now instanceof Date ? now : new Date(now == null ? Date.now() : now);
+  if (Number.isNaN(n.getTime())) return '';
+  const hm = String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
+  const sameDay = d.getFullYear() === n.getFullYear() && d.getMonth() === n.getMonth() && d.getDate() === n.getDate();
+  if (sameDay) return hm;
+  return String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0') + ' ' + hm;
+}
+// ==== /v0.6.22 §3.84 ====
+
 let generating = false; // 生成中：发送按钮复用为停止按钮
 let currentSession = null, thinking = null;
 
 
 
-function newAiMsg(){ const el=document.createElement('div'); el.className='msg-ai'; chatEl.appendChild(el); scrollBottom(); return el; }
+function newAiMsg(ts){ const el=document.createElement('div'); el.className='msg-ai'; const t=msgTimeText(ts); if(t){ const m=document.createElement('div'); m.className='msg-time'; m.textContent=t; el.appendChild(m); } chatEl.appendChild(el); scrollBottom(); return el; }
 function aiContent(msg){ const c=msg.querySelector('.content'); return c || (()=>{const d=document.createElement('div');d.className='content';msg.appendChild(d);return d;})(); }
 function addReasoning(msg){ const d=document.createElement('details'); d.className='reasoning'; d.innerHTML='<summary>思考过程</summary><div class="body"></div>'; msg.appendChild(d); return d.querySelector('.body'); }
 
-function addUser(text){ const el=document.createElement('div'); el.className='msg-user'; el.innerHTML='<div class="bubble">'+esc(text)+'</div>'; chatEl.appendChild(el); renderEmptyState(); scrollBottom(); }
+function addUser(text, ts){ const el=document.createElement('div'); el.className='msg-user'; const t=msgTimeText(ts); el.innerHTML='<div class="bubble">'+esc(text)+(t?'<span class="msg-time">'+esc(t)+'</span>':'')+'</div>'; chatEl.appendChild(el); renderEmptyState(); scrollBottom(); }
 
 const runningTools = new Map();
 // P1-1 工具时间线（v0.6.19 §3.70）保留为轨迹详情的渲染原语（toolStepNode/paintToolStep/
@@ -484,8 +555,8 @@ async function send(){
   if(attachments.length) payload.attachments=attachments;
   const sentAttachments=attachments;
   attachments=[]; renderAttachments();
-  addUser(text||(sentAttachments.map(a=>(a.type==='image'?'🖼 ':'📄 ')+a.name).join(' ')));
-  const msg=newAiMsg(); const content=aiContent(msg); let raw='';
+  addUser(text||(sentAttachments.map(a=>(a.type==='image'?'🖼 ':'📄 ')+a.name).join(' ')), new Date().toISOString());
+  const msg=newAiMsg(new Date().toISOString()); const content=aiContent(msg); let raw='';
   activeAiMsg=msg; msg._traj=[]; msg._steps=0; msg._round=++turnSeq; msg._startedAt=Date.now(); msg._endedAt=null; pendingSubagent=null; curSteps=0; curWorkT0=Date.now();
   // P0-1：本轮开始 → 运行状态条归零（上一轮的费用/首帧/工具数不许泄漏到本轮；上下文基数保留）
   runState.rawPhase='发请求（等首帧）'; runState.phase='等首帧'; runState.aborted=false;
@@ -761,7 +832,7 @@ function renderWorkStatus(){
       const running=bgTasks.filter((/** @type {any} */ t)=>t.status==='running');
       const latest=running.length?running[running.length-1]:null;
       bg.style.display=''; bg.textContent='🛠 '+bgRunning+' 个后台任务运行中'+(latest?' · '+String(latest.message||'').slice(0,22):'')+' — 点击查看详情';
-      bg.onclick=()=>{ const tp=$('#tasksPanel'); tp.style.display = tp.style.display==='none'?'flex':'none'; if(tp.style.display==='flex'){ $('#trajPanel').style.display='none'; $('#subPanel').style.display='none'; updateTasksPanel(); } syncPanelLayout(); };
+      bg.onclick=()=>{ activateRailTab('tasks'); }; // §3.82：后台任务 chip 打开右栏「任务」标签
     } else { bg.style.display='none'; bg.onclick=null; }
   }
   // P1-4：右栏「本轮运行」与状态条**同源**——renderRunPanel() 内部只走 runPanelView()→runStripView()，
@@ -1159,6 +1230,8 @@ function layoutClassesFor(width) {
 // 快捷键表 / 会话设置 / 空态 / 设置搜索 / 诊断。全部消费上面纯函数的结果。
 // ============================================================================
 let sessionsCache = [];
+// §3.84：分组只在 refreshSessions 里算一次；下拉/会话管理列表都只读这份缓存（不随渲染重算）。
+let sessionsGroupedCache = [];
 let workspacesCache = [];
 let currentWorkspaceName = '';
 let modelsCache = [];
@@ -1166,6 +1239,44 @@ let homeDir = '';
 let workingDirCache = '';
 let compactAvailable = false; // Web 端当前没有 /api/compact；为 true 时才显示压缩入口
 let runPanelOpen = false;
+// —— 右栏四标签（§3.82 第二步）：轨迹 / 子Agent / 任务 / 仪表盘 ——
+// 标签切换**只控制 display**（railTabDisplay 纯函数），四个面板节点常驻 DOM、id 不变；
+// 不重写 updateTasksPanel / renderDashboard / openTraj / renderSubPanel 的数据逻辑。
+const RAIL_TABS = ['trace', 'sub', 'tasks', 'dash'];
+const RAIL_TAB_PANELS = { trace: '#tabTrace', sub: '#tabSub', tasks: '#tabTasks', dash: '#tabDash' };
+const RAIL_TAB_BUTTONS = { trace: '#rtTrace', sub: '#rtSub', tasks: '#rtTasks', dash: '#rtDash' };
+let activeRailTab = 'trace';
+function railTabDisplay(tab) {
+  const active = RAIL_TABS.includes(tab) ? tab : 'trace';
+  /** @type {Record<string, 'flex'|'none'>} */
+  const out = {};
+  for (const key of RAIL_TABS) out[key] = key === active ? 'flex' : 'none';
+  return out;
+}
+function setRailTab(tab) {
+  activeRailTab = RAIL_TABS.includes(tab) ? tab : 'trace';
+  const disp = railTabDisplay(activeRailTab);
+  for (const key of RAIL_TABS) {
+    const panel = $(RAIL_TAB_PANELS[key]);
+    if (panel) panel.style.display = disp[key];
+    const btn = $(RAIL_TAB_BUTTONS[key]);
+    if (btn) {
+      btn.classList.toggle('on', key === activeRailTab);
+      btn.setAttribute('aria-selected', key === activeRailTab ? 'true' : 'false');
+    }
+  }
+  // 搬进标签页的两个旧面板：display 继续跟着标签走（updateTasksPanel / refreshCostBadge 靠它判可见）。
+  const tp = $('#tasksPanel'); if (tp) tp.style.display = disp.tasks;
+  const dp = $('#dashPanel'); if (dp) dp.style.display = disp.dash;
+  if (activeRailTab === 'tasks' && typeof updateTasksPanel === 'function') updateTasksPanel();
+  if (activeRailTab === 'dash' && typeof refreshCostBadge === 'function') refreshCostBadge();
+  return activeRailTab;
+}
+/** 点标签/既有入口的统一出口：先开右栏，再切标签。 */
+function activateRailTab(tab) {
+  setRunPanel(true);
+  return setRailTab(tab);
+}
 let responsiveInitialized = false;
 // —— 轨迹收纳状态（§3.73）：两个折叠区 + 展开过的轮次/工具/子代理（重渲染后保持展开） ——
 const traceFoldState = { trace: true, subs: true };
@@ -1214,8 +1325,7 @@ initTheme();
 // —— 右栏「本轮运行」：<1180 收起为抽屉；宽屏默认展开；不做任何新轮询 ——
 function syncRunPanel() {
   const el = $('#runPanel'); if (!el) return;
-  // 右边缘只留一个抽屉：子 Agent / 任务 / 省钱仪表盘打开时先让运行面板让位
-  // （syncPanelLayout 统一算，避免"两个面板各写一份互斥逻辑"）。
+  // §3.82：四个面板都在右栏标签页内，右边缘只剩右栏一个抽屉（显隐由 syncPanelLayout 统一算）。
   syncPanelLayout();
   const chip = $('#runChip'); if (chip) chip.setAttribute('aria-expanded', runPanelOpen ? 'true' : 'false');
   const col = $('#rpCollapse'); if (col) col.textContent = '收起';
@@ -1242,6 +1352,12 @@ function initResponsive() {
 initResponsive();
 // §3.73：绑定两个折叠区 + 末尾区块总开关（渲染入口在下面的轨迹收纳块）。
 initTraceUI();
+// §3.82：四个标签按钮（只切 display + 开右栏；默认轨迹）。
+for (const key of RAIL_TABS) {
+  const btn = $(RAIL_TAB_BUTTONS[key]);
+  if (btn) btn.onclick = () => activateRailTab(key);
+}
+setRailTab('trace');
 
 // —— 工具时间线 DOM：一张卡 + 可复用行（开始/完成不换节点） ——
 function toolStepNode(step) {
@@ -1678,6 +1794,7 @@ function focusTraceRound(round) {
     const body = $('#tdBody'); if (body) body.hidden = false;
     const toggle = $('#tdToggle'); if (toggle) toggle.setAttribute('aria-expanded', 'true');
   } else {
+    setRailTab('trace');
     setRunPanel(true);
   }
   traceFoldState.trace = true;
@@ -1743,6 +1860,7 @@ function renderSessionSettings() {
     ? ((presetData.find((p) => p.name === psel.value) || {}).label || psel.value)
     : '无预设';
   runState.presetName = presetLabel;
+  set('#ssPresetSrc', '当前：' + presetLabel + ' · 来源：你的选择 · 仅下一轮（工具白名单 / 参数）');
   set('#ssEffective', sessionEffectiveLine({ model: md.name, modelLabel: md.label, permission: mode, sourceLabel: permissionSourceLabel(source), preset: presetLabel }));
   set('#chipModel', md.label || md.name || '模型');
   set('#chipPerm', permissionModeLabel(mode));
@@ -2070,38 +2188,29 @@ function openTraj(msg){
     // 点击标题定位到聊天中的对应工具卡
     list.appendChild(div);
   }
-  $('#trajPanel').style.display='flex';
-  $('#tasksPanel').style.display='none'; // 仅任务面板（右侧）与轨迹互斥；子代理面板可与轨迹同显
+  // §3.82：轨迹入口不再单独开旧浮层——切到右栏「轨迹」标签（旧面板与其 #tjList 仍在 DOM 里）。
   $('#trajRailBtn').classList.add('on');
-  syncPanelLayout();
+  activateRailTab('trace');
 }
-// 面板布局同步（2026-09-02）：轨迹/子代理/任务面板打开时以 body class 推开内容区，
-// 聊天文本与附件行不再被固定面板遮挡；面板宽度随屏宽自动收窄（CSS 媒体查询）。
+// 面板布局同步：§3.82 起轨迹/子代理/任务/仪表盘都在右栏标签页内，
+// 右栏是否显示只由 runPanelOpen 决定；旧的四条 body 推开 class 不再使用（CSS 规则保留不动）。
 function syncPanelLayout(){
-  const open=(id)=>document.getElementById(id)?.style.display==='flex';
-  document.body.classList.toggle('traj-open', open('trajPanel'));
-  document.body.classList.toggle('sub-open', open('subPanel'));
-  document.body.classList.toggle('tasks-open', open('tasksPanel'));
-  document.body.classList.toggle('dash-open', open('dashPanel'));
-  // P1-4：右边缘只留一个抽屉——既有右侧面板（子代理/任务/省钱仪表盘）打开时运行面板让位；
-  // 它们关闭后 syncPanelLayout 再被调用，运行面板按 runPanelOpen 恢复。
-  const otherRight=open('subPanel')||open('tasksPanel')||open('dashPanel');
+  document.body.classList.remove('traj-open','sub-open','tasks-open','dash-open');
   const narrow=layoutClassesFor(window.innerWidth||0).narrowRun;
-  const showRun=Boolean(runPanelOpen)&&!otherRight;
+  const showRun=Boolean(runPanelOpen);
   const rp=$('#runPanel'); if(rp) rp.hidden=!showRun;
   document.body.classList.toggle('run-open', showRun&&!narrow);
   document.body.classList.toggle('run-drawer', showRun&&narrow);
   // §3.73：窄屏右栏收起时，轨迹/子Agent 在对话流末尾显示；右栏（抽屉）一开就让位。
   syncTraceDock();
 }
-$('#tjClose').onclick=()=>{ $('#trajPanel').style.display='none'; $('#trajRailBtn').classList.remove('on'); syncPanelLayout(); };
+$('#tjClose').onclick=()=>{ setRunPanel(false); $('#trajRailBtn').classList.remove('on'); };
 $('#trajRailBtn').onclick=()=>{
-  const p=$('#trajPanel');
-  const willShow=p.style.display==='none';
-  if(willShow){ const m=lastMsgWithTraj(); if(!m){ uiAlert('本轮还没有可展示的轨迹（先发起一个任务）'); return; } openTraj(m); }
-  else p.style.display='none';
-  $('#trajRailBtn').classList.toggle('on', willShow);
-  syncPanelLayout();
+  // §3.82：轨迹入口 = 打开右栏并切到「轨迹」标签（没有轨迹时也切过去，显示空态）。
+  const m=lastMsgWithTraj();
+  if(m && m._traj && m._traj.length){ openTraj(m); return; }
+  $('#trajRailBtn').classList.add('on');
+  activateRailTab('trace');
 };
 function lastMsgWithTraj(){
   const msgs=[...document.querySelectorAll('#chat .msg-ai')].reverse();
@@ -2128,15 +2237,13 @@ function renderSubPanel(){
   if(!count) list.innerHTML='<div class="empty" style="color:var(--faint);font-size:12px;padding:10px">本会话还没有子 Agent（task 工具会派生子 Agent）</div>';
 }
 const toggleSubPanel=()=>{
-  const p=$('#subPanel');
-  const willShow=p.style.display==='none';
-  p.style.display=willShow?'flex':'none';
-  $('#subRailBtn').classList.toggle('on', willShow);
-  if(willShow){ $('#tasksPanel').style.display='none'; renderSubPanel(); } // 轨迹（左侧）可与子代理（右侧）同显
-  syncPanelLayout();
+  // §3.82：子Agent 入口 = 打开右栏并切到「子Agent」标签（不再单独开旧浮层）。
+  renderSubPanel();
+  activateRailTab('sub');
+  $('#subRailBtn').classList.add('on');
 };
 $('#subRailBtn').onclick=toggleSubPanel;
-$('#sbClose').onclick=()=>{ $('#subPanel').style.display='none'; $('#subRailBtn').classList.remove('on'); syncPanelLayout(); };
+$('#sbClose').onclick=()=>{ setRunPanel(false); $('#subRailBtn').classList.remove('on'); };
 // —— 任务面板（多会话并行） ——
 function setBtn(){
   // §138：停止点击后立刻有可见反馈（「停止中…」+ 禁用防连点），回合真正收尾后由 finally 复位。
@@ -2203,8 +2310,12 @@ async function refreshCostBadge(){
   if($('#dashPanel').style.display==='flex') renderDashboard(j);
 }
 refreshCostBadge(); setInterval(refreshCostBadge, 15000);
-$('#costBadge').onclick=()=>{ const p=$('#dashPanel'); const show=p.style.display==='none'; p.style.display=show?'flex':'none'; if(show){ $('#subPanel').style.display='none'; $('#trajPanel').style.display='none'; $('#tasksPanel').style.display='none'; $('#subRailBtn').classList.remove('on'); $('#trajRailBtn').classList.remove('on'); refreshCostBadge(); } syncPanelLayout(); };
-$('#dashClose').onclick=()=>{ $('#dashPanel').style.display='none'; syncPanelLayout(); };
+// §3.82：顶栏费用徽标 = 打开右栏「仪表盘」标签（原有 📊 内容仍在 #dashPanel 里；关闭用 ✕/收起）。
+$('#costBadge').onclick=()=>{
+  $('#trajRailBtn').classList.remove('on'); $('#subRailBtn').classList.remove('on');
+  activateRailTab('dash');
+};
+$('#dashClose').onclick=()=>{ setRunPanel(false); };
 // 底部状态栏：轮次/步数/LLM 与工具时长/首 token 平均/吞吐/缓存命中/输入输出 tokens
 async function refreshStatusBar(){
   const r=await fetch('/api/cache-stats',{cache:'no-store'}).catch(()=>null); if(!r) return;
@@ -2216,17 +2327,35 @@ async function refreshStatusBar(){
   $('#statusBar').textContent = s.turns+' 轮 · '+s.steps+' 步 | LLM '+fmtDur(s.llmMs)+' · 工具调用 '+fmtDur(s.toolMs)+' | 首 token 平均 '+ft+' · '+tps+' | 缓存命中 '+rate+' | 输入 '+fmtTok(s.prompt)+' tok · 输出 '+fmtTok(s.completion)+' tok';
 }
 refreshStatusBar(); setInterval(refreshStatusBar, 15000);
-$('#tasksBtn').onclick=()=>{ const p=$('#tasksPanel'); p.style.display = p.style.display==='none'?'flex':'none'; if(p.style.display==='flex'){ $('#subPanel').style.display='none'; $('#trajPanel').style.display='none'; $('#trajRailBtn').classList.remove('on'); $('#subRailBtn').classList.remove('on'); updateTasksPanel(); } syncPanelLayout(); };
-$('#tpClose').onclick=()=>{ $('#tasksPanel').style.display='none'; syncPanelLayout(); };
+// §3.82：顶栏「任务」= 打开右栏「任务」标签（右栏收起时也会展开；关闭用 ✕/收起）。
+$('#tasksBtn').onclick=()=>{
+  $('#trajRailBtn').classList.remove('on'); $('#subRailBtn').classList.remove('on');
+  activateRailTab('tasks');
+};
+$('#tpClose').onclick=()=>{ setRunPanel(false); };
 
+// v0.6.21（§3.81）：顶栏「我在哪」——工作空间 › 当前会话。数据只取既有 currentWorkspaceName /
+// sessionsCache / currentSession，不新增后端字段。会话列表或工作空间刷新后同步更新。
+function renderCrumb(){
+  const w=$('#crumbWs'); if(w) w.textContent=currentWorkspaceName||'工作空间';
+  const cur=sessionsCache.find((s)=>s&&s.file===currentSession);
+  const c=$('#crumbSession'); if(c) c.textContent=cur?(cur.label||cur.file):(currentSession?String(currentSession).replace(/\.jsonl$/,''):'新对话');
+}
 async function refreshSessions(q){
   const u=q?'/api/sessions?q='+encodeURIComponent(q):'/api/sessions';
   const r=await fetch(u).catch(()=>null); if(!r)return;
   const j=await r.json();
   sessionsCache=Array.isArray(j.sessions)?j.sessions:[];
+  sessionsGroupedCache=groupSessionsByUpdatedAt(sessionsCache); // 一次性分组（性能：不在渲染时重算）
   const sel=$('#sessions'); sel.innerHTML='<option value="">历史会话</option>';
-  for(const s of sessionsCache){ const o=document.createElement('option'); o.value=s.file; o.textContent=s.label; sel.appendChild(o); }
+  for(const g of sessionsGroupedCache){
+    // 原生 optgroup 的组标题由系统渲染：不可点击、不可折叠——正好符合"保持简单"。
+    const og=document.createElement('optgroup'); og.label=g.title;
+    for(const s of g.items){ const o=document.createElement('option'); o.value=s.file; o.textContent=s.label; og.appendChild(o); }
+    sel.appendChild(og);
+  }
   if(currentSession&&!q) sel.value=currentSession;
+  renderCrumb();
 }
 let searchTimer=null;
 $('#sessionSearch').addEventListener('input',e=>{ clearTimeout(searchTimer); searchTimer=setTimeout(()=>refreshSessions(e.target.value.trim()),300); });
@@ -2381,6 +2510,7 @@ async function refreshWsSel(){
   sel.appendChild(add);
   const mgr=document.createElement('option'); mgr.value='__manage__'; mgr.textContent='管理（重命名/删除/改目录）…';
   sel.appendChild(mgr);
+  renderCrumb();
 }
 /** 命令面板与顶栏下拉共用的工作空间切换（携带当前会话，语义与旧路径一致）。 */
 async function applyWorkspaceSwitch(name){
@@ -2799,28 +2929,32 @@ function finalizeCurrentSession(){
   if(!currentSession) return;
   fetch('/api/session-finalize',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({file:currentSession})}).catch(()=>{});
 }
-async function loadSession(file){ if(currentSession && currentSession!==file) finalizeCurrentSession(); currentSession=file; chatEl.innerHTML=''; resetTraceState(); const r=await fetch('/api/session?file='+encodeURIComponent(file)); const j=await r.json(); for(const m of j.messages||[]){ if(typeof m.content==='string'&&m.content.startsWith('（系统提示）')) continue; if(m.role==='user') addUser(m.content); else { const el=newAiMsg(); aiContent(el).innerHTML=renderMarkdown(m.content); } } if(j.workspace){ const sel=$('#wsSel'); const has=[...sel.options].some(o=>o.value===j.workspace); if(has){ sel.value=j.workspace; } else { refreshWsSel(); } renderBanner({text:'↩ 已回到该会话的工作空间：'+j.workspace}); } if(j.taskState&&(j.taskState.status==='cap'||j.taskState.status==='interrupted')){ renderBanner({text:'⚠ 该会话有未完成任务（步数上限中断）——直接发送消息即可从断点续跑，已完成文件不会重复做。', warn:true}); } scrollBottom(); renderEmptyState(); }
+async function loadSession(file){ if(currentSession && currentSession!==file) finalizeCurrentSession(); currentSession=file; chatEl.innerHTML=''; resetTraceState(); const r=await fetch('/api/session?file='+encodeURIComponent(file)); const j=await r.json(); for(const m of j.messages||[]){ if(typeof m.content==='string'&&m.content.startsWith('（系统提示）')) continue; if(m.role==='user') addUser(m.content, m.ts); else { const el=newAiMsg(m.ts); aiContent(el).innerHTML=renderMarkdown(m.content); } } if(j.workspace){ const sel=$('#wsSel'); const has=[...sel.options].some(o=>o.value===j.workspace); if(has){ sel.value=j.workspace; } else { refreshWsSel(); } renderBanner({text:'↩ 已回到该会话的工作空间：'+j.workspace}); } if(j.taskState&&(j.taskState.status==='cap'||j.taskState.status==='interrupted')){ renderBanner({text:'⚠ 该会话有未完成任务（步数上限中断）——直接发送消息即可从断点续跑，已完成文件不会重复做。', warn:true}); } scrollBottom(); renderEmptyState(); renderCrumb(); }
 
 // §138：主按钮在生成态=停止，必须走**同一个**停止出口（stopTurnFromButton → stopTurn → POST /api/abort）
 sendBtn.onclick=()=>{ if(generating){ stopTurnFromButton(); } else { send(); } };
 input.addEventListener('keydown',e=>{ if(e.key==='Enter'&&!e.shiftKey){ e.preventDefault(); send(); } });
 input.addEventListener('input',()=>{ input.style.height='44px'; input.style.height=Math.min(input.scrollHeight,200)+'px'; });
-$('#newChat').onclick=()=>{ finalizeCurrentSession(); currentSession=null; chatEl.innerHTML=''; resetTraceState(); renderEmptyState(); refreshSessions(); };
+$('#newChat').onclick=()=>{ finalizeCurrentSession(); currentSession=null; chatEl.innerHTML=''; resetTraceState(); renderEmptyState(); renderCrumb(); refreshSessions(); };
 $('#sessMgrBtn').onclick=openSessModal;
 $('#sessClose').onclick=()=>{ $('#sessModal').style.display='none'; };
 async function openSessModal(){
   $('#sessModal').style.display='flex';
-  const r=await fetch('/api/sessions',{cache:'no-store'}); const j=await r.json();
+  await refreshSessions(); // 复用同一次分组缓存：打开管理面板不再单独算一遍
   const list=$('#sessList'); list.innerHTML='';
-  if(!j.sessions.length){ list.innerHTML='<div style="color:var(--faint);font-size:12px;padding:6px">暂无会话</div>'; return; }
-  for(const s of j.sessions){
-    const div=document.createElement('div'); div.style.cssText='display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12.5px';
-    div.innerHTML='<span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+esc(s.label)+'</span>';
-    const rn=document.createElement('button'); rn.textContent='重命名'; rn.style.cssText='padding:1px 8px;font-size:11px'; rn.onclick=async()=>{ const t=await uiPrompt('新标题：', s.file.replace(/\.jsonl$/,'')); if(!t) return; const rr=await fetch('/api/session',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'rename',file:s.file,title:t})}); const jj=await rr.json().catch(()=>({error:'失败'})); if(jj.ok){ refreshSessions(); openSessModal(); } else uiAlert(jj.error||'重命名失败'); };
-    const dl=document.createElement('button'); dl.textContent='删除'; dl.className='danger'; dl.style.cssText='padding:1px 8px;font-size:11px'; dl.onclick=async()=>{ if(!await uiConfirm('删除会话 '+s.file+'？此操作不可恢复。')) return; const rr=await fetch('/api/session',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'delete',file:s.file})}); const jj=await rr.json().catch(()=>({error:'失败'})); if(jj.ok){ if(currentSession===s.file){ currentSession=null; chatEl.innerHTML=''; renderEmptyState(); } refreshSessions(); openSessModal(); } else uiAlert(jj.error||'删除失败'); };
-    div.appendChild(rn); div.appendChild(dl); list.appendChild(div);
+  if(!sessionsCache.length){ list.innerHTML='<div style="color:var(--faint);font-size:12px;padding:6px">暂无会话</div>'; return; }
+  for(const g of sessionsGroupedCache){
+    // 小号次要文本、不可点击、不可折叠；只是分组标签。
+    const gh=document.createElement('div'); gh.className='sess-group'; gh.textContent=g.title; list.appendChild(gh);
+    for(const s of g.items){
+      const div=document.createElement('div'); div.style.cssText='display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12.5px';
+      div.innerHTML='<span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">'+esc(s.label)+'</span>';
+      const rn=document.createElement('button'); rn.textContent='重命名'; rn.style.cssText='padding:1px 8px;font-size:11px'; rn.onclick=async()=>{ const t=await uiPrompt('新标题：', s.file.replace(/\.jsonl$/,'')); if(!t) return; const rr=await fetch('/api/session',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'rename',file:s.file,title:t})}); const jj=await rr.json().catch(()=>({error:'失败'})); if(jj.ok){ await refreshSessions(); openSessModal(); } else uiAlert(jj.error||'重命名失败'); };
+      const dl=document.createElement('button'); dl.textContent='删除'; dl.className='danger'; dl.style.cssText='padding:1px 8px;font-size:11px'; dl.onclick=async()=>{ if(!await uiConfirm('删除会话 '+s.file+'？此操作不可恢复。')) return; const rr=await fetch('/api/session',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({action:'delete',file:s.file})}); const jj=await rr.json().catch(()=>({error:'失败'})); if(jj.ok){ if(currentSession===s.file){ currentSession=null; chatEl.innerHTML=''; renderEmptyState(); } await refreshSessions(); openSessModal(); } else uiAlert(jj.error||'删除失败'); };
+      div.appendChild(rn); div.appendChild(dl); list.appendChild(div);
+    }
   }
 }
-$('#sessions').onchange=e=>{ if(e.target.value){ loadSession(e.target.value); } else { finalizeCurrentSession(); currentSession=null; chatEl.innerHTML=''; resetTraceState(); renderEmptyState(); } };
+$('#sessions').onchange=e=>{ if(e.target.value){ loadSession(e.target.value); } else { finalizeCurrentSession(); currentSession=null; chatEl.innerHTML=''; resetTraceState(); renderEmptyState(); renderCrumb(); } };
 if('serviceWorker' in navigator){ navigator.serviceWorker.register('/sw.js').catch(()=>{}); }
 init();

package/src/web/index.html

@@ -65,14 +65,35 @@ header{min-height:52px;display:flex;align-items:center;gap:10px;padding:8px 12px
 header .logo{font-weight:700;font-size:16px;color:var(--accent);letter-spacing:.5px;flex:none}
 header .logo span{color:var(--text)}
 header .badge{font-size:12px;color:var(--dim);background:var(--bg3);border:1px solid var(--border);padding:2px 10px;border-radius:20px;flex:none;overflow:hidden;text-overflow:ellipsis;max-width:180px}
+/* §3.83：crumb 是左半区唯一会随会话名变长的项；限到 120px，避免会话名一长就把右半区的
+   「历史会话」再次挤出 1000px 视口（完整标题仍在 title 里，内容不丢）。 */
+#crumb{max-width:120px}
 header button{white-space:nowrap;flex:none}
 header select{flex:none}
+/* §3.83 顶栏 1000px 不裁切：右半区控件（费用 / 搜索会话 / 历史会话 / 任务 / 会话管理 / 新对话）
+   收进一个可横向滚动的容器（min-width:0 才允许收缩）；宽屏由容器内的 .spacer 把控件推到最右，
+   窄屏从「费用 + 搜索会话 + 历史会话」开始露出，其余控件在同一容器里横向滚动触达——
+   不再整条顶栏溢出到屏幕外。 */
+header .hdr-right{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
+header .hdr-right::-webkit-scrollbar{height:4px}
+header .hdr-right::-webkit-scrollbar-thumb{background:var(--border);border:0;border-radius:2px}
+header .hdr-right::-webkit-scrollbar-track{background:transparent}
 #sessionSearch{flex:1 1 auto;min-width:70px;max-width:220px;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 12px;font-size:13px}
 #modelSel{max-width:170px;min-width:0}
 #presetSel{max-width:140px;min-width:0}
 #permSel{max-width:150px;min-width:0}
 #sessions{max-width:150px;min-width:0}
-#wsSel{max-width:130px;min-width:64px}
+#wsSel{max-width:110px;min-width:64px}
+/* §3.83 1000px：诊断徽标（≤900 本就隐藏）让位给「费用 + 搜索 + 历史会话」；顶栏 gap 10→6，
+   右半区容器因此拿到约 322px（费用 122 + 搜索 70 + 历史会话 98），三者完整可见。 */
+@media (max-width:1100px){
+  header{gap:6px;padding:8px}
+  header .hdr-right{gap:8px}
+  #envBadge{display:none!important}
+  #wsSel{max-width:120px}
+  #sessionSearch{min-width:70px;max-width:120px}
+  #sessions{max-width:110px}
+}
 @media (max-width:860px){main{padding:14px 0 8px}#chat{padding:0 10px}#envBadge{display:none!important}#sessionSearch{max-width:110px}#modelSel{max-width:110px}#permSel{max-width:120px}#sessions{max-width:110px}#wsSel{max-width:96px}header{gap:6px;padding:8px 8px}header .logo span{display:none}}
 #sessionSearch:focus{outline:none;border-color:var(--accent2)}
 #tasksPanel{position:fixed;right:0;top:52px;bottom:0;width:280px;background:var(--bg2);border-left:1px solid var(--border);z-index:40;display:flex;flex-direction:column}
@@ -152,6 +173,12 @@ main{flex:1;overflow-y:auto;padding:18px 0 12px;min-width:0}
 .msg-user{display:flex;justify-content:flex-end}
 .msg-user .bubble{background:var(--user);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:10px 16px;max-width:min(525px,82%);white-space:pre-wrap;word-break:break-word;font-size:16px;line-height:24px}
 .msg-ai{display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--text)}
+/* §3.84：消息时间——小号次要文本；缺失 ts 时前端根本不渲染此节点（不会出现 Invalid Date / undefined）。 */
+.msg-time{font-size:11px;line-height:1.4;color:var(--dim);font-variant-numeric:tabular-nums}
+.msg-user .bubble .msg-time{display:block;text-align:right;margin-top:4px}
+.msg-ai>.msg-time{margin-bottom:-4px}
+/* §3.84：会话分组标题（今天/昨天/本周/更早）——不可点击、不折叠。 */
+.sess-group{font-size:11px;line-height:1.6;color:var(--dim);padding:7px 4px 2px;letter-spacing:.02em}
 .msg-ai .content{white-space:normal;word-break:break-word;line-height:1.75}
 .msg-ai .content h1,.msg-ai .content h2,.msg-ai .content h3,.msg-ai .content h4{color:var(--text);font-weight:700;line-height:1.4}
 .msg-ai .content h1{font-size:20px;margin:18px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
@@ -450,17 +477,19 @@ body.run-open #scrollBottomBtn{right:326px}
   body.run-drawer #runPanel{display:flex;top:52px;width:300px;max-width:92vw;z-index:60;box-shadow:-12px 0 32px rgba(0,0,0,.4)}
 }
 
-/* —— 会话设置弹层（收编模型 / 预设 / 权限三件套）—— */
-#sessSheet{position:fixed;right:18px;bottom:110px;width:min(410px,calc(100vw - 24px));max-height:min(72vh,560px);background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.5);z-index:70;display:flex;flex-direction:column;overflow:hidden}
+/* —— 会话设置弹层（收编模型 / 预设 / 权限三件套）——
+   §3.83：间距按设计稿 .popover 对齐（head/body 11px 13px、field label 5px、
+   effective 13px/11px + 8px 10px、foot 9px 13px）；圆角保持设计稿 14px（sheet）/8px（effective）。 */
+#sessSheet{position:fixed;right:18px;bottom:110px;width:min(400px,calc(100vw - 24px));max-height:min(72vh,560px);background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.5);z-index:70;display:flex;flex-direction:column;overflow:hidden}
 body.run-open #sessSheet{right:318px}
 @media (max-width:1180px){body.run-open #sessSheet{right:18px}}
-.ss-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text);flex:none}
+.ss-head{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--border);font-size:13px;font-weight:600;color:var(--text);flex:none}
 .ss-head .ss-sub{font-size:11px;color:var(--faint);font-weight:400}
 .ss-head button{margin-left:auto;padding:1px 8px;font-size:11px}
-.ss-body{padding:10px 12px;overflow-y:auto;min-height:0}
+.ss-body{padding:11px 13px;overflow-y:auto;min-height:0}
 .ss-field{margin-bottom:12px}
 .ss-field:last-child{margin-bottom:0}
-.ss-field>label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);margin-bottom:4px}
+.ss-field>label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);margin-bottom:5px}
 .ss-field .ss-scope{margin-left:auto;font-size:10px;color:var(--faint);border:1px solid var(--border);border-radius:999px;padding:0 6px;line-height:16px}
 .ss-field select{width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 8px;font-size:13px}
 .ss-src{font-size:11px;color:var(--faint);margin-top:4px;line-height:1.55;word-break:break-word}
@@ -469,9 +498,9 @@ body.run-open #sessSheet{right:318px}
 .ss-seg{display:flex;gap:4px;background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:3px}
 .ss-seg button{flex:1;height:26px;border:0;border-radius:6px;background:transparent;color:var(--dim);font-size:12px}
 .ss-seg button.on{background:var(--panel);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.18)}
-.ss-effective{margin:0 12px 8px;padding:7px 9px;border:1px dashed var(--border);border-radius:8px;font-size:11.5px;color:var(--dim);line-height:1.65}
+.ss-effective{margin:0 13px 11px;padding:8px 10px;border:1px dashed var(--border);border-radius:8px;font-size:11.5px;color:var(--dim);line-height:1.65}
 .ss-effective b{color:var(--text)}
-.ss-foot{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--border)}
+.ss-foot{display:flex;align-items:center;gap:8px;padding:9px 13px;border-top:1px solid var(--border)}
 .ss-foot .grow{flex:1;font-size:11px;color:var(--faint)}
 #sessSettingsBtn{max-width:230px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 #sessSettingsBtn b{overflow:hidden;text-overflow:ellipsis}
@@ -562,63 +591,82 @@ body.run-open #sessSheet{right:318px}
 .dr .p{color:var(--accent2);font-variant-numeric:tabular-nums}
 .dr .c{color:var(--faint);font-variant-numeric:tabular-nums}
 .badge-btn:hover{border-color:var(--accent2);color:var(--accent2)}
+/* —— §3.82 右栏四标签（轨迹 / 子Agent / 任务 / 仪表盘）——
+   只新增标签栏/标签页容器样式；#runPanel 宽度、body.run-open 推开量、顶栏与网格均不动。
+   四个面板本体搬进标签页后不再 fixed（覆盖既有 #tasksPanel/#dashPanel 的定位，宽度跟随右栏）。 */
+.rp-top{flex:none;padding:10px 12px 0}
+.rp-top .rp-sec{margin-bottom:8px}
+/* §3.83：四个标签统一成设计稿 `.seg` 分段控件观感（外框 bg3 + padding 3 / 圆角 9，
+   内按钮 26px 高 / 圆角 6；选中态 panel 底 + text 字 + 600 字重）。只改样式，切换逻辑不动。 */
+.rp-tabs{display:flex;gap:4px;padding:3px;margin:0 12px 8px;flex:none;background:var(--bg3);border:1px solid var(--border);border-radius:9px}
+.rp-tabs .seg{flex:1;min-width:0;height:26px;padding:0 4px;border:0;border-radius:6px;background:transparent;color:var(--dim);font-size:12px;white-space:nowrap;cursor:pointer}
+.rp-tabs .seg:hover{color:var(--text)}
+.rp-tabs .seg.on{background:var(--panel);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.18)}
+.rp-tabbody{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
+.rp-tab{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;padding:10px 12px}
+.rp-tab.rp-tab-flush{padding:0;overflow:hidden}
+#runPanel #tasksPanel,#runPanel #dashPanel{position:static;right:auto;top:auto;bottom:auto;width:auto;max-width:none;height:auto;border-left:0;z-index:auto;box-shadow:none;background:transparent;flex:1;min-height:0;overflow:hidden}
+
+/* —— §3.83 对比度：承载信息的次要文本从 --faint 提到 --dim ——
+   只改下列选择器的 color，**不动** :root 里的 --faint/--dim 取值（避免全局漂移）；
+   WCAG 对比度（暗色 #81858C→#ADB2B8）：bg 4.92→8.54、bg2 4.64→8.06、
+   panel 3.76→6.53、bg3 3.26→5.67。覆盖：消息元信息/用量、提示条、任务与子Agent状态、
+   轨迹轮次与计数、工具耗时与输出计数、来源/作用域胶囊、rp-foot 说明、空态说明、底部累计状态。 */
+.msg-meta,
+.usage,
+.banner:not(.banner-warn),
+#hint,
+#statusBar,
+.sb-item .sb-meta,
+.tp-item .tp-meta,
+.tl-row .tl-dur,
+.tl-out-meta,
+.tl-more,
+.tr-round-no,
+.tr-sub-meta,
+.tr-sub-stats,
+.tr-sub-wait,
+.tr-sub-state,
+.rp-fold-meta,
+.td-fold-meta,
+.td-meta,
+.rp-kv .rp-src,
+.rp-foot .grow,
+.ss-src,
+.ss-field .ss-scope,
+.dash-head .dash-sub,
+.dr .c,
+.tr-empty,
+#emptyState .es-lead,
+.empty-step .es-main span,
+.empty-step .es-state{color:var(--dim)}
 </style>
 </head>
 <body>
 <header>
   <div class="logo">MingDao <span>Harness</span></div>
+  <!-- v0.6.21 小步重排（§3.81）：顶栏只保留「我在哪」的当前位置；模型/预设/权限只在 #sessSheet 里改。 -->
+  <span id="crumb" class="badge" title="当前工作空间 › 当前会话"><span id="crumbWs">工作空间</span><span aria-hidden="true"> › </span><b id="crumbSession">新对话</b></span>
   <span id="cfgMsg" class="badge" style="display:none"></span>
   <button id="paletteBtn" title="搜索或运行命令（⌘K / Ctrl+K）" aria-haspopup="dialog">⌘K <span class="palette-label">搜索或运行</span></button>
   <button id="cfgBtn" title="设置">⚙</button>
   <button id="runChip" title="本轮运行面板（窄屏以抽屉展开）" aria-expanded="false">运行</button>
   <button id="themeBtn" title="切换明暗主题（跟随系统时由系统偏好决定）" aria-label="切换明暗主题">🌙</button>
   <select id="wsSel" title="工作空间（切换 / 新建，目录自动创建）"></select>
-  <span class="badge" id="envBadge"></span><span class="badge badge-btn" id="costBadge" title="省钱仪表盘（点击展开）" style="cursor:pointer">📊 —</span>
-  <div class="spacer"></div>
-  <input id="sessionSearch" placeholder="搜索会话…" title="关键词检索历史会话">
-  <select id="sessions" title="历史会话"><option value="">历史会话</option></select>
-  <button id="tasksBtn" title="任务面板">任务</button><button id="sessMgrBtn" title="管理会话（重命名/删除）">✎</button>
-  <button id="newChat">新对话</button>
+  <span class="badge" id="envBadge"></span>
+  <div class="hdr-right">
+    <div class="spacer"></div>
+    <span class="badge badge-btn" id="costBadge" title="省钱仪表盘（点击展开）" style="cursor:pointer">📊 —</span>
+    <input id="sessionSearch" placeholder="搜索会话…" title="关键词检索历史会话">
+    <select id="sessions" title="历史会话"><option value="">历史会话</option></select>
+    <button id="tasksBtn" title="任务面板">任务</button><button id="sessMgrBtn" title="管理会话（重命名/删除）">✎</button>
+    <button id="newChat">新对话</button>
+  </div>
 </header>
 <div id="trajRail">
   <button class="rail-btn" id="trajRailBtn" title="轨迹（点击查看详情）">🧭</button>
   <button class="rail-btn" id="subRailBtn" title="子 Agent">🤖<span class="rail-badge" id="subBadge" style="display:none"></span></button>
 </div>
-<aside id="subPanel" style="display:none">
-  <div class="sb-head">🤖 子 Agent<span id="sbCount" style="font-size:11.5px;color:var(--faint);font-weight:400"></span><button id="sbClose">关闭</button></div>
-  <div id="sbList"></div>
-</aside>
-<aside id="trajPanel" style="display:none">
-  <div class="tj-head">🧭 任务轨迹<span id="tjSummary" style="font-size:11.5px;color:var(--faint);font-weight:400"></span><button id="tjClose">关闭</button></div>
-  <div id="tjList"></div>
-</aside>
-<aside id="tasksPanel" style="display:none">
-  <div class="tp-head">任务面板 <span id="tpCount"></span><button id="tpClose" style="float:right">✕</button></div>
-  <div id="tpList"></div>
-</aside>
-<aside id="dashPanel" style="display:none">
-  <div class="dash-head">📊 省钱仪表盘 <span class="dash-sub">费用 · 命中 · 节省</span><button id="dashClose">✕</button></div>
-  <div class="dash-body">
-    <div class="dash-kpi">
-      <div class="kpi"><span class="kpi-l">今日费用</span><span class="kpi-v" id="kpiToday">—</span></div>
-      <div class="kpi"><span class="kpi-l">缓存命中</span><span class="kpi-v" id="kpiRate">—</span></div>
-      <div class="kpi"><span class="kpi-l">已节省</span><span class="kpi-v" style="color:var(--accent)" id="kpiSaved">—</span></div>
-      <div class="kpi"><span class="kpi-l">轮次/步数</span><span class="kpi-v" id="kpiTurns">—</span></div>
-    </div>
-    <div class="dash-gauge-wrap">
-      <svg id="rateGauge" viewBox="0 0 120 120" width="120" height="120"></svg>
-      <div class="gauge-label"><b id="rateGaugeNum">—</b><span>命中率</span></div>
-    </div>
-    <div class="dash-sec">近 14 天费用趋势（¥）</div>
-    <div id="trendChart" class="dash-chart"></div>
-    <div class="dash-sec">模型费用 Top</div>
-    <div id="dashModels" class="dash-bars"></div>
-    <div class="dash-sec">工具耗时 Top</div>
-    <div id="dashTools" class="dash-bars"></div>
-    <div class="dash-sec">最近缓存命中</div>
-    <div id="dashRecent" class="dash-recent"></div>
-  </div>
-</aside>
 <main>
   <!-- P1-6 空态三步引导（v0.6.19 §3.70）：无会话 / 无消息时显示；示例任务只填入输入框，不自动发送。 -->
   <div id="emptyState" hidden>
@@ -690,7 +738,8 @@ body.run-open #sessSheet{right:318px}
      ≥1180 默认展开并推开正文；<1180 收起为顶栏「运行」chip，点开是覆盖式抽屉。无新增轮询。 -->
 <aside id="runPanel" aria-label="本轮运行" hidden>
   <div class="rp-head"><span class="rp-live" aria-hidden="true"></span><span>本轮运行</span><span class="rp-sub">指标口径：本轮（非累计）</span><button id="rpCollapse" type="button" title="收起右栏">收起</button></div>
-  <div class="rp-body">
+  <!-- §3.82：状态条（阶段/首帧/吞吐/工具数/上下文/费用）留在顶部，不随标签切换。 -->
+  <div class="rp-top">
     <section class="rp-sec">
       <div class="rp-sec-title">会话配置<span class="line"></span></div>
       <dl class="rp-kv">
@@ -712,15 +761,71 @@ body.run-open #sessSheet{right:318px}
         <div class="rp-metric wide"><span class="l">本轮费用（估算）</span><span class="v" data-rk="cost" id="rpCost">—</span></div>
       </div>
     </section>
-    <!-- §3.73：轨迹 / 子Agent 两块可折叠区。对话流每轮只留一行摘要，细节都收在这里；
-         统计与摘要同源（renderTracePanels → 同一 traceRoundForMsg 视图）。 -->
-    <section class="rp-sec" id="rpTraceSec">
-      <button class="rp-sec-title rp-fold-head" type="button" data-fold="trace" aria-controls="rpTraceFoldBody" aria-expanded="true">轨迹<span class="rp-fold-meta" id="rpTraceMeta">—</span><span class="line"></span><span class="rp-fold-tri" aria-hidden="true"></span></button>
-      <div id="rpTraceFoldBody"><div id="rpTraceList" class="tr-list"></div></div>
+  </div>
+  <!-- §3.82 第二步：四个标签。只切 display（railTabDisplay），节点不销毁、id 不变。 -->
+  <div class="rp-tabs" role="tablist" aria-label="右栏标签">
+    <button id="rtTrace" type="button" role="tab" data-tab="trace" aria-selected="true" aria-controls="tabTrace" class="seg on">轨迹</button>
+    <button id="rtSub" type="button" role="tab" data-tab="sub" aria-selected="false" aria-controls="tabSub" class="seg">子Agent</button>
+    <button id="rtTasks" type="button" role="tab" data-tab="tasks" aria-selected="false" aria-controls="tabTasks" class="seg">任务</button>
+    <button id="rtDash" type="button" role="tab" data-tab="dash" aria-selected="false" aria-controls="tabDash" class="seg">仪表盘</button>
+  </div>
+  <div class="rp-tabbody">
+    <section id="tabTrace" class="rp-tab" role="tabpanel" aria-labelledby="rtTrace" data-tab="trace">
+      <!-- §3.73：轨迹折叠区（renderTracePanels 写入 #rpTraceList，不在这里重写）。 -->
+      <section class="rp-sec" id="rpTraceSec">
+        <button class="rp-sec-title rp-fold-head" type="button" data-fold="trace" aria-controls="rpTraceFoldBody" aria-expanded="true">轨迹<span class="rp-fold-meta" id="rpTraceMeta">—</span><span class="line"></span><span class="rp-fold-tri" aria-hidden="true"></span></button>
+        <div id="rpTraceFoldBody"><div id="rpTraceList" class="tr-list"></div></div>
+      </section>
+      <!-- 旧轨迹面板随标签搬入（id/子节点原样保留，openTraj 仍写 #tjList）；默认收起，避免与上面的轮次列表重复。 -->
+      <aside id="trajPanel" style="display:none">
+        <div class="tj-head">🧭 任务轨迹<span id="tjSummary" style="font-size:11.5px;color:var(--faint);font-weight:400"></span><button id="tjClose">关闭</button></div>
+        <div id="tjList"></div>
+      </aside>
+    </section>
+    <section id="tabSub" class="rp-tab" role="tabpanel" aria-labelledby="rtSub" data-tab="sub" style="display:none">
+      <!-- §3.73：子Agent 折叠区（renderTracePanels 写入 #rpSubList）。 -->
+      <section class="rp-sec" id="rpSubSec">
+        <button class="rp-sec-title rp-fold-head" type="button" data-fold="subs" aria-controls="rpSubFoldBody" aria-expanded="true">子Agent<span class="rp-fold-meta" id="rpSubMeta">—</span><span class="line"></span><span class="rp-fold-tri" aria-hidden="true"></span></button>
+        <div id="rpSubFoldBody"><div id="rpSubList" class="tr-list"></div></div>
+      </section>
+      <!-- 旧子Agent 面板随标签搬入（id/子节点原样保留）；默认收起。 -->
+      <aside id="subPanel" style="display:none">
+        <div class="sb-head">🤖 子 Agent<span id="sbCount" style="font-size:11.5px;color:var(--faint);font-weight:400"></span><button id="sbClose">关闭</button></div>
+        <div id="sbList"></div>
+      </aside>
+    </section>
+    <section id="tabTasks" class="rp-tab rp-tab-flush" role="tabpanel" aria-labelledby="rtTasks" data-tab="tasks" style="display:none">
+      <!-- 任务面板：原 <aside id="tasksPanel"> 整体搬入（#tpList/#tpCount 不动），宽度改为跟随右栏。 -->
+      <aside id="tasksPanel" style="display:none">
+        <div class="tp-head">任务面板 <span id="tpCount"></span><button id="tpClose" style="float:right">✕</button></div>
+        <div id="tpList"></div>
+      </aside>
     </section>
-    <section class="rp-sec" id="rpSubSec">
-      <button class="rp-sec-title rp-fold-head" type="button" data-fold="subs" aria-controls="rpSubFoldBody" aria-expanded="true">子Agent<span class="rp-fold-meta" id="rpSubMeta">—</span><span class="line"></span><span class="rp-fold-tri" aria-hidden="true"></span></button>
-      <div id="rpSubFoldBody"><div id="rpSubList" class="tr-list"></div></div>
+    <section id="tabDash" class="rp-tab rp-tab-flush" role="tabpanel" aria-labelledby="rtDash" data-tab="dash" style="display:none">
+      <!-- 省钱仪表盘：原 <aside id="dashPanel"> 整体搬入（KPI/趋势/Top 全部保留），宽度改为跟随右栏。 -->
+      <aside id="dashPanel" style="display:none">
+        <div class="dash-head">📊 省钱仪表盘 <span class="dash-sub">费用 · 命中 · 节省</span><button id="dashClose">✕</button></div>
+        <div class="dash-body">
+          <div class="dash-kpi">
+            <div class="kpi"><span class="kpi-l">今日费用</span><span class="kpi-v" id="kpiToday">—</span></div>
+            <div class="kpi"><span class="kpi-l">缓存命中</span><span class="kpi-v" id="kpiRate">—</span></div>
+            <div class="kpi"><span class="kpi-l">已节省</span><span class="kpi-v" style="color:var(--accent)" id="kpiSaved">—</span></div>
+            <div class="kpi"><span class="kpi-l">轮次/步数</span><span class="kpi-v" id="kpiTurns">—</span></div>
+          </div>
+          <div class="dash-gauge-wrap">
+            <svg id="rateGauge" viewBox="0 0 120 120" width="120" height="120"></svg>
+            <div class="gauge-label"><b id="rateGaugeNum">—</b><span>命中率</span></div>
+          </div>
+          <div class="dash-sec">近 14 天费用趋势（¥）</div>
+          <div id="trendChart" class="dash-chart"></div>
+          <div class="dash-sec">模型费用 Top</div>
+          <div id="dashModels" class="dash-bars"></div>
+          <div class="dash-sec">工具耗时 Top</div>
+          <div id="dashTools" class="dash-bars"></div>
+          <div class="dash-sec">最近缓存命中</div>
+          <div id="dashRecent" class="dash-recent"></div>
+        </div>
+      </aside>
     </section>
   </div>
   <div class="rp-foot"><span class="grow" id="rpFootNote">停止与压缩：与状态条同一条停止出口</span><button id="rpCompact" type="button" hidden title="后端有 /compact 时才显示">压缩上下文</button><button id="rpStop" type="button" disabled>■ 停止</button></div>
@@ -739,7 +844,7 @@ body.run-open #sessSheet{right:318px}
     <div class="ss-field">
       <label for="presetSel">预设<span class="ss-scope">仅下一轮</span></label>
       <select id="presetSel" title="智能体预设：一键切换工具白名单/权限/参数组合（选「无预设」恢复默认）"><option value="">无预设</option></select>
-      <div class="ss-src">来源：你的选择 · 只影响下一轮（工具白名单 / 参数）；不改变权限来源。</div>
+      <div class="ss-src" id="ssPresetSrc">当前：无预设 · 来源：你的选择 · 仅下一轮（工具白名单 / 参数）；不改变权限来源。</div>
     </div>
     <div class="ss-field">
       <label>权限<span class="ss-scope">全局 + 本轮</span></label>

package/src/web/routes/domains/sessions.js

@@ -19,6 +19,35 @@ import {
   removeSessionWorkspace,
 } from '../../../workspace.js';
 
+/**
+ * v0.6.22（§3.84）：会话列表的**只增**元数据。
+ *
+ * 只读文件、绝不改写；坏行/不可读文件按 0 条处理，不得让整个列表接口 500——
+ * 真机上确实存在历史遗留的半截 JSONL（进程被 kill 时最后一行可能不完整）。
+ * 标题沿用既有事实来源：会话文件名（自动标题 / 手工重命名都会落到文件名）。
+ * @param {string} file 会话文件绝对路径
+ * @param {string} name 会话文件名
+ * @returns {{messageCount:number,title:string}}
+ */
+function sessionMeta(file, name) {
+  let messageCount = 0;
+  try {
+    const raw = fs.readFileSync(file, 'utf8');
+    for (const line of raw.split('\n')) {
+      if (!line.trim()) continue;
+      try {
+        const m = JSON.parse(line);
+        if (m && typeof m === 'object' && ['system', 'user', 'assistant', 'tool'].includes(m.role)) messageCount += 1;
+      } catch {
+        // 单行损坏只跳过该行：旧会话/半截写入都不能把整个列表打挂。
+      }
+    }
+  } catch {
+    // 文件在 readdir 之后被删除/无权限：计数按 0，元数据仍可返回。
+  }
+  return { messageCount, title: name.replace(/\.jsonl$/, '') };
+}
+
 /**
  * 会话域路由。命中返回 true，未命中返回 false。
  * @param {{req:any,res:any,method:any,p:any,url:any}} ctx
@@ -33,9 +62,22 @@ export async function handle({ req, res, method, p, url }, deps, shared) {
 
   if (method === 'GET' && p === '/api/sessions') {
     const q = url.searchParams.get('q');
+    // v0.6.22（§3.84）：每项**只增** updatedAt / messageCount / title 三个字段；
+    // file / mtime / label 的既有语义与顺序不变（前端 crumb、命令面板、同步等仍按旧字段消费）。
+    const decorate = (/** @type {any} */ s, /** @type {string} */ label) => {
+      const meta = sessionMeta(path.join(home, 'sessions', path.basename(s.name)), s.name);
+      return {
+        file: s.name,
+        mtime: s.mtime,
+        label,
+        updatedAt: new Date(s.mtime).toISOString(),
+        messageCount: meta.messageCount,
+        title: meta.title,
+      };
+    };
     const found = q
-      ? searchSessions(home, q, { limit: 30 }).map((/** @type {any} */ s) => ({ file: s.name, mtime: s.mtime, label: `${relativeTime(s.mtime)} · ${s.snippet}` }))
-      : listSessions(home).slice(0, 30).map((s) => ({ file: s.name, mtime: s.mtime, label: `${relativeTime(s.mtime)} · ${sessionPreview(s.file)}` }));
+      ? searchSessions(home, q, { limit: 30 }).map((/** @type {any} */ s) => decorate(s, `${relativeTime(s.mtime)} · ${s.snippet}`))
+      : listSessions(home).slice(0, 30).map((s) => decorate(s, `${relativeTime(s.mtime)} · ${sessionPreview(s.file)}`));
     json(res, 200, { ok: true, sessions: found });
     return true;
   }
@@ -54,7 +96,11 @@ export async function handle({ req, res, method, p, url }, deps, shared) {
       }
       json(res, 200, {
         ok: true,
-        messages: loaded.messages.filter((m) => m.role === 'user' || m.role === 'assistant').map((m) => ({ role: m.role, content: m.content ?? '' })),
+        // v0.6.22（§3.84）：只增 ts。旧会话消息没有 ts → **null**（前端据此不显示时间），
+        // 绝不在这里用文件 mtime 冒充消息时间，也绝不因缺字段报错。
+        messages: loaded.messages
+          .filter((m) => m.role === 'user' || m.role === 'assistant')
+          .map((m) => ({ role: m.role, content: m.content ?? '', ts: typeof m.ts === 'string' && m.ts ? m.ts : null })),
         workspace: ws?.name || null,
         // v0.3.0 P0-2：未完成检查点（供前端提示续跑）
         taskState: loadTaskState(path.basename(file)),

package/src/web/server.js

@@ -77,6 +77,25 @@ import { syncStatus, syncLogin, syncLogout, syncPush, syncPull, syncRemoteList,
 
 const INDEX_HTML = path.join(path.dirname(fileURLToPath(import.meta.url)), 'index.html');
 
+/**
+ * v0.6.22（§3.84）：落盘前给**新增**消息补 ISO 时间戳。
+ *
+ * 只补缺 ts 的消息（`{...m, ts}` 不改动原对象），已有 ts 的原样保留：
+ * 旧会话/旧消息不会被"补写"成另一个时间；压缩重写时也不会把历史时间冲掉。
+ * 时间只在服务端落盘这一刻取，前端渲染用同一字段——不引入第二套时间来源。
+ * @template T
+ * @param {T[]} messages
+ * @param {Date} [now]
+ * @returns {T[]}
+ */
+function stampMessageTs(messages, now = new Date()) {
+  const ts = now.toISOString();
+  return messages.map((/** @type {any} */ m) => {
+    if (!m || typeof m !== 'object' || m.ts) return m;
+    return { ...m, ts };
+  });
+}
+
 /** 合法权限模式（与 /api/config 的校验同一口径：非法值一律忽略，绝不 fail-open）。 */
 const PERMISSION_MODES = new Set(['ask', 'auto', 'readonly']);
 /** 各档位的"会发生什么"人话说明（可见说明与前端提示共用同一份文案）。 */
@@ -882,8 +901,15 @@ export async function runWebServer({ host = '127.0.0.1', port = 3820, authToken,
       }
     }
     messages.push({ role: 'user', content: built.content });
-    // 落盘用文本版（图文数组只发给模型，会话文件保持字符串可渲染）
-    await withSessionLock(session.file, () => appendMessages(session.file, [{ role: 'user', content: built.persistText }]));
+    // 落盘用文本版（图文数组只发给模型，会话文件保持字符串可渲染）。
+    // v0.6.22（§3.84）：同一次落盘的时间戳也写回内存里的这条消息——后续自动压缩整文件重写时
+    // 不会把这一轮刚写下的 ts 冲掉；历史消息（已有/缺失 ts）不在这里补。
+    const userTs = new Date().toISOString();
+    await withSessionLock(session.file, () => appendMessages(session.file, [{ role: 'user', content: built.persistText, ts: userTs }]));
+    {
+      const lastUserMsg = messages[messages.length - 1];
+      if (lastUserMsg && typeof lastUserMsg === 'object' && !lastUserMsg.ts) lastUserMsg.ts = userTs;
+    }
     let persistedBefore = messages.length;
 
     // 权限/选择类交互：发 ask 事件（带 taskId），等待 POST /api/permission 应答
@@ -1065,7 +1091,14 @@ export async function runWebServer({ host = '127.0.0.1', port = 3820, authToken,
       // 会话级路由统计（Hermes C2 升级检测）：累计工具步数与截断次数，粘滞 flash 会话复杂度上来后自动升 planner
       const st = session.routeStats || { steps: 0, truncated: 0 };
       session.routeStats = { steps: st.steps + (io.stats().toolCount || 0), truncated: st.truncated + (r.truncated ? 1 : 0) };
-      await withSessionLock(session.file, () => appendMessages(session.file, messages.slice(persistedBefore)));
+      // v0.6.22（§3.84）：本回合新增的 assistant/tool 消息落盘时补 ts，并同步回内存数组，
+      // 让之后发生的自动压缩整文件重写保留这些时间戳（历史消息不动）。
+      {
+        const tail = messages.slice(persistedBefore);
+        const stamped = stampMessageTs(tail);
+        for (let i = 0; i < stamped.length; i += 1) messages[persistedBefore + i] = stamped[i];
+        await withSessionLock(session.file, () => appendMessages(session.file, stamped));
+      }
       io.printUsageLine({ modelName: runModel, usage: r.usage, durationMs: r.durationMs });
       // v0.4.4：补记最后一轮 + 兜底总结的剩余 usage（自动续跑轮已在 onUsage 逐轮入账，避免重复计）
       const remaining = {