mingdao-harness 0.6.20 → 0.6.21

package/package.json

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

package/src/web/app.js

@@ -761,7 +761,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()，
@@ -1166,6 +1166,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 +1252,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 +1279,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 +1721,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 +1787,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 +2115,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 +2164,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 +2237,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,9 +2254,20 @@ 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;
@@ -2227,6 +2276,7 @@ async function refreshSessions(q){
   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); }
   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 +2431,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,13 +2850,13 @@ 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); 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(); 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(){
@@ -2821,6 +2872,6 @@ async function openSessModal(){
     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}
@@ -450,17 +471,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 +492,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 +585,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 +732,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 +755,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 +838,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>