wezard 2.2.1 → 2.3.0

package/web/chat.js

@@ -19,11 +19,15 @@
   var WITH = qs.get('with') || '';
   // '' = 未指定 (服务端按全部时间, 回包里认领成 'all'); 'all' = 全部时间; 其他 = 那一段的 sid。
   var SESSION = qs.get('session') || '';
+  // 消息区的视角 (谁算「自己」靠右、描述行以谁为准): 只在看移交详情时才有 —— 移交人 (派活那一方);
+  // 平时不存在, 消息区就用 ROLE。侧栏与名片永远是 ROLE 的。
+  var EYE = qs.get('eye') || '';
+  var eyeOf = function () { return EYE || ROLE; };
   var TICK_MS = 3000;
 
   // at / recvAt: 服务端快照时刻与本地收到时刻。所有"现在几点"的判断都换算到
   // 服务端时钟, 否则客户端时钟偏几分钟就会把运行中的会话判成已结束。
-  var R = { at: 0, recvAt: 0, role: null, sessions: [], convs: [], relations: false, schedules: 0, plan: null, stats: null, winStats: null };
+  var R = { at: 0, recvAt: 0, role: null, sessions: [], convs: [], relations: false, schedules: 0, plan: null, charter: null, stats: null, winStats: null };
   // frags: 当前窗口的原始片段 (id → 片段)。片段不带方向, 换视角时拿它就地重包左右。
   var S = { es: null, pinned: true, gen: 0, frags: {} };
   // 关系/日程两栏共用的世界快照。treeAll = 关系树展开全部; treeFor = 已把谁滚进过视野。
@@ -46,13 +50,13 @@
     if (n < 1e6) { var v = n / 1000; return (v >= 10 ? v.toFixed(0) : v.toFixed(1).replace(/\.0$/, '')) + 'k'; }
     return (n / 1e6).toFixed(2).replace(/\.?0+$/, '') + 'M';
   };
+  // 与服务端 detail-render 的 fmtDuration 同一写法: 走表的那一轮收口后换成服务端写死的值, 不该跳格式。
   var fmtDur = function (ms) {
     if (ms < 1000) return ms + 'ms';
-    var s = Math.round(ms / 1000);
+    var s = Math.round(ms / 100) / 10;
     if (s < 60) return s + 's';
     var m = Math.floor(s / 60);
-    if (m < 60) return m + 'm' + (s - m * 60) + 's';
-    return Math.floor(m / 60) + 'h' + (m % 60) + 'm';
+    return m + 'm' + Math.round(s - m * 60) + 's';
   };
   var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
   var fmtDay = function (ts) {
@@ -93,6 +97,7 @@
     if (CONV) p.conv = CONV;
     if (WITH) p['with'] = WITH;
     if (SESSION) p.session = SESSION;
+    if (EYE) p.eye = EYE;
     if (WORLD) p.side = 'world';
     Object.keys(extra || {}).forEach(function (k) { p[k] = extra[k]; });
     return p;
@@ -106,9 +111,18 @@
   };
 
   // ── 名字 ──
-  // 一个 role 的名字与头像: 消息片段自带 (fromName/fromLabel), 会话列表与名册兜底。
-  var names = {};
-  var learn = function (id, name, label) { if (id && name) names[id] = { name: name, label: label || '' }; };
+  // 一个 role 的名字与头像, 两路来: 摘要 (名册, 每拍刷新, 为准) 与消息片段 (渲染那一刻的名册, 只在摘要没给时兜底)。
+  // svr 刚重启、还没收到 daemon 推来的名册那几秒, 两路回的「名字」都只是 id 本身 (头像也是按 id 算的) ——
+  // id 不是名字, 不记; 否则它会钉在已上屏的行里, 名册到了也不改。返回: 这一次记的有没有变。
+  var names = {}, fromDir = {};
+  var learn = function (id, name, label, dir) {
+    if (!id || !name || name === id || (!dir && fromDir[id])) return false;
+    if (dir) fromDir[id] = 1;
+    var k = names[id];
+    if (k && k.name === name && k.label === (label || '')) return false;
+    names[id] = { name: name, label: label || '' };
+    return true;
+  };
   var kindOf = function (id) {
     return /^task:/.test(id) ? 'task' : id === 'system:' ? 'system' : /^human:/.test(id) ? 'human' : 'wizard';
   };
@@ -132,8 +146,9 @@
     var on = canSwitch(id) && id !== ROLE;
     return '<span class="' + cls + (on ? ' go" data-r="' + esc(id) + '" title="' + esc('切到 ' + nameOf(id) + ' 的视角') : '') + '">' + inner + '</span>';
   };
-  var nm = function (id, name, go) {
-    var cls = 'nm ' + kindOf(id), txt = esc(name || roleName(id));
+  // extra = 跟在名字后、同属一个点击范围的徽标 (原样 html)。
+  var nm = function (id, name, go, extra) {
+    var cls = 'nm ' + kindOf(id), txt = esc(name || roleName(id)) + (extra || '');
     return go ? goSpan(cls, id, txt) : '<span class="' + cls + '">' + txt + '</span>';
   };
   var bindGo = function (root, sel) {
@@ -148,8 +163,8 @@
 
   // ── markdown 渲染 (只对未渲染过的节点做, 复用节点不重绘) ──
   var md = null;
-  var render = function (scope) {
-    if (!window.markdownit) return;
+  var mdReady = function () {
+    if (!window.markdownit) return false;
     if (!md) {
       md = window.markdownit({
         html: false, linkify: true, breaks: true, highlight: function (str, lang) {
@@ -161,7 +176,12 @@
         }
       });
     }
-    scope.querySelectorAll('.bubble').forEach(function (b) {
+    return true;
+  };
+  var render = function (scope) {
+    if (!mdReady()) return;
+    // 工单页的开工 / 收工两行不是气泡, 计划与结论同样是 markdown。
+    scope.querySelectorAll('.bubble, .tg-job').forEach(function (b) {
       var src = b.querySelector('script.md-src'), body = b.querySelector('.md-body');
       if (src && body && body.dataset.rendered !== '1') {
         body.innerHTML = md.render(src.textContent || '');
@@ -176,15 +196,18 @@
     var m = {};
     scope.querySelectorAll('[data-key]').forEach(function (b) {
       var k = b.getAttribute('data-key');
-      b.querySelectorAll('details').forEach(function (d, i) { m[k + '#' + i] = d.open; });
+      b.querySelectorAll('details').forEach(function (d, i) { m[openKey(k, d, i)] = d.open; });
     });
     return m;
   };
+  // 展开态按位置记; 移交行单独记一格 —— 它是后来才挂上去的 (公开移交从气泡变成可开合),
+  // 跟着位置走会把旁边那个框的开合套到它身上, 默认展开的公开移交被收起、箭头朝右。
+  var openKey = function (k, d, i) { return k + '#' + (d.classList.contains('handoff') ? 'ho' : i); };
   var restoreOpen = function (scope, m) {
     scope.querySelectorAll('[data-key]').forEach(function (b) {
       var k = b.getAttribute('data-key');
       b.querySelectorAll('details').forEach(function (d, i) {
-        var v = m[k + '#' + i]; if (v !== undefined) d.open = v;
+        var v = m[openKey(k, d, i)]; if (v !== undefined) d.open = v;
       });
     });
   };
@@ -210,11 +233,8 @@
       var eb = childBy(ex, 'bubbles'), nb = childBy(nc, 'bubbles');
       if (eb && nb) {
         swapHead(ex, nc);
-        // 终句刚到: 过程框收起一次。标记留在节点上, 用户之后再点开不会被下一帧收回去。
-        if (nc.hasAttribute('data-fold') && !ex.hasAttribute('data-fold')) {
-          ex.setAttribute('data-fold', '');
-          ex.classList.add('folded');
-        }
+        // 下面有了新东西 / 这一轮结束: 过程框收起一次。标记留在节点上, 用户之后再点开不会被下一帧收回去。
+        if (nc.hasAttribute('data-fold')) settle(ex);
         reconcile(eb, nb);
         ex.setAttribute('data-sig', nc.getAttribute('data-sig') || '');
         return ex;
@@ -225,6 +245,28 @@
     restoreOpen(cur, open);
     render(cur);
   };
+  // 人手点过的过程框: data-key → 是否收起。只由点击写入, 每次换节点 (增量、翻页、换视角
+  // 整窗重拉) 之后按它回填 —— 默认态归服务端, 人的选择压过默认态。
+  var FOLD = {};
+  var settle = function (s) {
+    if (s.hasAttribute('data-fold')) return;
+    s.setAttribute('data-fold', '');
+    s.classList.add('folded');
+  };
+  // 一轮还在跑, 但线程里它下面已经有了别的消息 —— 它也不再是「最末尾那个」。
+  // 这件事只有整条线程知道 (片段按轮缓存, 服务端不看邻居), 所以在客户端补。
+  var settleAbove = function () {
+    var rows = inner.querySelectorAll('.mrow');
+    Array.prototype.slice.call(rows, 0, -1).forEach(function (r) {
+      r.querySelectorAll('.steps').forEach(settle);
+    });
+  };
+  var applyFold = function (root) {
+    root.querySelectorAll('.steps[data-key]').forEach(function (s) {
+      var v = FOLD[s.getAttribute('data-key')];
+      if (v !== undefined) s.classList.toggle('folded', v);
+    });
+  };
   var frag = function (html) {
     var d = document.createElement('div'); d.innerHTML = html; return d;
   };
@@ -264,7 +306,9 @@
   inner.addEventListener('click', function (e) {
     var s = e.target.closest && e.target.closest('.steps');
     if (!s) return;
-    if (e.target.closest('.steps-head') || e.target === s || e.target === childBy(s, 'bubbles')) s.classList.toggle('folded');
+    if (e.target.closest('.steps-head') || e.target === s || e.target === childBy(s, 'bubbles')) {
+      FOLD[s.getAttribute('data-key')] = s.classList.toggle('folded');
+    }
   });
   // reminder 块: 摘要 ⇄ 原文。刚划选了一段原文的那次松手不算点击。
   inner.addEventListener('click', function (e) {
@@ -272,17 +316,91 @@
     if (!r || String(window.getSelection() || '')) return;
     r.classList.toggle('raw');
   });
+  inner.addEventListener('click', function (e) {
+    var c = e.target.closest && e.target.closest('.mchip.job[data-job]');
+    if (c) openJob(c.getAttribute('data-job'));
+  });
+  // 回执 chip / 移交行的活号: 跳到派活那句 (同一个活号的入消息)。先在眼前这个窗口里找;
+  // 不在就按它带来的坐标切到它所在的会话再落点, 同搜索结果 —— 派活那句常在另一个窗口
+  // (私聊派的活, 回执落在群里)。会话键随视角: 公开的在那个群; 私聊在视角与对端的私聊里,
+  // 视角不是两端之一就开「这两方之间」的往来。服务端找不到那句时不会画成可点的。
+  inner.addEventListener('click', function (e) {
+    var c = e.target.closest && e.target.closest('[data-goto][data-gid]');
+    if (!c) return;
+    var q = inner.querySelector('[data-pturn="' + cssEsc(c.getAttribute('data-goto')) + '"]');
+    var row = q && q.closest('.mrow');
+    if (row && focusRow(row.getAttribute('data-id'))) return;
+    var ch = c.getAttribute('data-gch'), from = c.getAttribute('data-gfrom'), to = c.getAttribute('data-gto');
+    var conv = ch ? 'c:' + ch : ROLE === from ? 'p:' + to : ROLE === to ? 'p:' + from : 'a:' + from + '|' + to;
+    jumpMsg({ conv: conv, id: c.getAttribute('data-gid'), ts: Number(c.getAttribute('data-gts')) });
+  });
+  // 移交行整行: 侧栏选中移交双方之间的那一项 (群里的一对 / 私聊; 视角不是两端之一就开
+  // 「这两方之间」的往来), 有派活那句就落在这一行自己的那句上。不换视角 (节点随 reconcile 换, 所以在根上委托)。
+  // 行尾的 chevron 只管展开原文, 走 <summary> 自己的开合。
+  inner.addEventListener('click', function (e) {
+    var b = e.target.closest && e.target.closest('.handoff .ho-line[data-hto]');
+    if (!b || e.target.closest('.ho-chev')) return;
+    e.preventDefault();   // 行是 <summary>: 不顺带展开原文
+    var from = b.getAttribute('data-hfrom'), to = b.getAttribute('data-hto'), ch = b.getAttribute('data-hch');
+    var peer = ROLE === from ? to : ROLE === to ? from : '';
+    var conv = !peer ? 'a:' + from + '|' + to : ch ? 'c:' + ch : 'p:' + peer;
+    var w = peer && ch ? peer : '';
+    var id = b.getAttribute('data-gid');
+    markBack(function () { return VIEW === 'msgs' && CONV === conv && WITH === w; });
+    // 消息区换成移交人 (派活那一方) 的视角 (侧栏、名片不动; 视角就是它时不带)。
+    if (id) return jumpMsg({ conv: conv, with: w, id: id, ts: Number(b.getAttribute('data-gts')), eye: from });
+    selectConv(conv, w, undefined, from);
+  });
 
   // ── 左栏: 当前 role 的名片 + 会话列表 ──
   // `a:<x>` / `a:<x>|<p1>,<p2>` 不在列表里: x 参与的全部对话 / x 与这几个对端之间的, 按时间排开
   // (关系图里点卡片看的就是它, 服务端同一个 talkOf) —— 现造一项, 落地时才不会被当成失效的会话退回默认。
+  // 工单的进度: 开着 = 已落定几份 / 一共几份, 收了 = 收工。
+  var jobTag = function (j) {
+    return j ? '<span class="jtag' + (j.status === 'open' ? ' open' : '') + '">' + (j.status === 'open' ? j.done + '/' + j.total : '收工') + '</span>' : '';
+  };
+  // 工单里有人卡住 (停在审批卡 / 反问待答 / 报错停了) 时标出几份卡着 —— 要人或开单者动手的。
+  var stuckTag = function (j) {
+    var n = j && j.status === 'open' ? (R.inflight || []).filter(function (x) {
+      return x.job === j.id && (x.state === 'blocked' || x.state === 'needs-input' || x.state === 'errored');
+    }).length : 0;
+    return n ? '<span class="jstuck" title="' + n + ' 份停在审批 / 反问 / 报错上">' + n + ' 卡住</span>' : '';
+  };
+  // 侧栏一行 / 关系图卡片上的小标记: 这处往来里有归在工单名下的话。
+  var jobMark = function (ids) {
+    return ids && ids.length ? '<span class="jmk" data-jobs="' + esc(ids.join(' ')) + '" title="' + esc((ids.length > 1 ? ids.length + ' 张工单: ' : '工单 ') + ids.join(' ') + ' —— 点开') + '">📋' + (ids.length > 1 ? '<i>' + ids.length + '</i>' : '') + '</span>' : '';
+  };
+  // 视角不在里面的工单不在 R.convs 里: 按服务端的账 (R.jobIndex, 全部工单) 现造一项; 账里没有 = 已清掉 (job 为空)。
+  var jobConv = function (key) {
+    var id = key.slice(2), j = (R.jobIndex || {})[id];
+    return {
+      key: key, kind: 'job', name: j ? j.title : id, label: '📋', base: j ? j.base : '', subs: [], heard: [],
+      lastTs: j ? j.closedAt || j.openedAt : 0, preview: '',
+      job: j && { id: id, owner: j.owner, status: j.status, done: j.done, total: j.total },
+    };
+  };
+  /** 一个工单号 → 它的一行: 视角有份的取会话项 (带预览), 其余按账现造。 */
+  var jobRowOf = function (id) {
+    return jobConvs().filter(function (c) { return c.job.id === id; })[0] || jobConv('j:' + id);
+  };
+  /** 工单列表此刻列哪些: 从 📋 进来 = 入口带的那几张 (按 id, 不按视角筛); 否则视角开的或参与的。标题的数与列表同出这一份。 */
+  var jobListRows = function () {
+    return JOB_ONLY ? JOB_ONLY.map(jobRowOf).filter(function (c) { return c.job; }) : jobConvs();
+  };
+  var jobConvs = function () { return R.convs.filter(function (c) { return c.kind === 'job' && c.job; }); };
   var convOf = function (key) {
     if (key && key.indexOf('a:') === 0) {
-      var part = key.slice(2).split('|'), who = part[0], peers = (part[1] || '').split(',').filter(Boolean);
-      var name = nameOf(who) + (peers.length ? ' 与 ' + peers.map(nameOf).join('、') + ' 的对话' : ' 的全部对话');
-      return { key: key, kind: 'all', who: who, peers: peers, name: name, subs: [] };
+      var part = key.slice(2).split('|'), who = part[0], peers = (part[1] || '').split(',').filter(Boolean), chat = part[2] || '';
+      var name = chat ? nameOf(who) + ' 在 ' + chatTitle(chat) + ' 的全部记录'
+        : nameOf(who) + (peers.length ? ' 与 ' + peers.map(nameOf).join('、') + ' 的对话' : ' 的全部对话');
+      return { key: key, kind: 'all', who: who, peers: peers, chat: chat, name: name, subs: [] };
     }
-    return R.convs.filter(function (c) { return c.key === key; })[0];
+    var hit = R.convs.filter(function (c) { return c.key === key; })[0];
+    return hit || (key && key.indexOf('j:') === 0 ? jobConv(key) : undefined);
+  };
+  var chatTitle = function (base) {
+    var c = R.convs.filter(function (x) { return x.key === 'c:' + base; })[0];
+    return c ? c.name : base;
   };
   // 人的单聊 (user:…) 在数据上是频道, 但对端只有那一个人时同样是一对一。
   var dmOf = function (c) {
@@ -307,15 +425,17 @@
   // ── 状态: wizard 是否在执行中 ──
   // 服务端只给事实 (busy / alive / runningUntil), 亮不亮在这里按本地时钟判 ——
   // 到点没有新写入就自己熄 (同 expireRows), 不必等下一次推送。
-  var ST = { run: '执行中', idle: '空闲', off: '已关闭' };
-  var stateOf = function (s) { return wRunning(s) ? 'run' : s.alive ? 'idle' : 'off'; };
+  var ST = { wait: '等人点', run: '执行中', idle: '空闲', off: '已关闭' };
+  // 等人点 (停在审批卡 / 提问卡上) 先于执行中: 审批长轮询期间 pane 照样在转圈。
+  var stateOf = function (s) { return s.waiting && s.waiting.length ? 'wait' : wRunning(s) ? 'run' : s.alive ? 'idle' : 'off'; };
   // 忙闲只有这一个渲染点, 永远挂在名字右边 —— 名片 / 关系树 / 侧栏共用。
-  // quiet: 只在执行中出现、只要灯不要字 (侧栏: 列表里安静是常态, 亮着的才值得看一眼)。
+  // quiet: 只在执行中 / 等人点时出现、只要灯不要字 (侧栏: 列表里安静是常态, 亮着的才值得看一眼)。
   var stTag = function (s, quiet) {
     if (!s) return '';
     var k = stateOf(s);
-    if (quiet && k !== 'run') return '';
-    return '<span class="wst ' + k + '" title="' + ST[k] + '">' + (quiet ? '' : ST[k]) + '</span>';
+    if (quiet && k !== 'run' && k !== 'wait') return '';
+    var tip = k === 'wait' ? '停在 ' + s.waiting.join(' / ') + ' 上等人点 (审批卡 / 提问卡)' : ST[k];
+    return '<span class="wst ' + k + '" title="' + esc(tip) + '">' + (quiet ? '' : esc(k === 'wait' ? ST[k] + ' · ' + s.waiting[0] : ST[k])) + '</span>';
   };
   var paintStatus = function () {
     var el = $('#rb-st');
@@ -342,9 +462,10 @@
   };
 
   // ── 未读: 别人说完、我还没读到的话 ──
-  // 服务端给每个会话一份 heard = [说完的时刻, 属于我与谁的那一对], 以及我在群里 / 每一对里
-  // 最后开口的时刻 (mine)。一句话的已读水位 = 它所在那一处「我最后开口」与「我看过」的较晚者:
-  // 属于某一对的看那一对 (群里说过话不等于读过别的线程), 不属于任何一对的看群。
+  // 服务端给每个会话一份 heard = [说完的时刻, 发话方, 收信方], 以及我在群里 / 每一对里
+  // 最后开口的时刻 (mine)。说给我的那句属于「我与发话方」那一对。一句话的已读水位 = 它所在那一处
+  // 「我最后开口」与「我看过」的较晚者: 属于某一对的看那一对 (群里说过话不等于读过别的线程), 不属于任何一对的看群。
+  // 已读记录 `视角|会话|对端` 的键一直没变: 子项曾短暂是「对端在群里的全部记录」, 那时看过的覆盖了这一对, 照旧算数。
   // 「看过」记在本地 (刷新 / 换视角都还在), 按视角分账 —— 同一个群换个 role 看, 未读是另一回事。
   var READ_KEY = 'wezard.role.read';
   var READ = (function () {
@@ -360,16 +481,19 @@
     (c.subs || []).forEach(function (s) { mark[s.role] = Math.max(g, s.mine || 0, seenAt(c.key, s.role)); });
     var groupMark = Math.max(g, c.mine || 0);
     return (c.heard || []).filter(function (h) {
-      if (withRole && h[1] !== withRole) return false;
-      return h[0] > (h[1] ? (mark[h[1]] !== undefined ? mark[h[1]] : groupMark) : groupMark);
+      var p = h[2] === ROLE ? h[1] : '';
+      if (withRole && p !== withRole) return false;
+      return h[0] > (p && mark[p] !== undefined ? mark[p] : groupMark);
     }).length;
   };
   var reading = function () { return VIEW === 'msgs' && !document.hidden; };
   // 窗口是 `a:<x>|<peers>` (关系图卡片) 时, 视角与 p 的往来在不在里面 —— 与服务端 talkOf 同一口径:
   // 一端是 x、另一端是 peers 之一 (peers 空 = 不限), 不分频道。
-  var talkCovers = function (p) {
+  var talkCovers = function (p, c) {
     var t = convOf(CONV);
     if (!t || t.kind !== 'all') return false;
+    // 限定了频道的窗口 (某 role 在一个群里的全部记录) 只覆盖那个群里的往来。
+    if (t.chat && (!c || c.base !== t.chat)) return false;
     var hit = function (a, b) { return t.who === a && (!t.peers.length || t.peers.indexOf(b) >= 0); };
     return hit(ROLE, p) || hit(p, ROLE);
   };
@@ -377,8 +501,8 @@
   // 对话横跨会话, 每个会话里落在那段对话里的那几对都算 —— 私聊的那一对记在会话本身 ('')。
   var readPairs = function (c) {
     if (c.key === CONV) return [WITH];
-    if (c.kind !== 'group') return c.peer && talkCovers(c.peer) ? [''] : [];
-    return (c.subs || []).filter(function (s) { return talkCovers(s.role); }).map(function (s) { return s.role; });
+    if (c.kind !== 'group') return c.peer && talkCovers(c.peer, c) ? [''] : [];
+    return (c.subs || []).filter(function (s) { return talkCovers(s.role, c); }).map(function (s) { return s.role; });
   };
   // 读整个群 = 群的水位推到此刻 (子项随之全清); 只读一对 = 只推那一对的。
   var markRead = function (c) {
@@ -395,12 +519,16 @@
   // 子项默认只露前 SUB_FOLD 个, 其余收在一条展开/折叠条后面; 展开态同样按会话各记各的。
   var SUB_FOLD = 5, MORE = {};
   var reveal = function () {
-    if (CONV && CONV !== OPEN_AT) { OPEN[CONV] = true; OPEN_AT = CONV; }
+    if (CONV && CONV !== OPEN_AT) {
+      // 某 role 在一个群里的全部记录挂在那个群下: 展开的是那个群。
+      var t = convOf(CONV);
+      OPEN[t && t.chat ? 'c:' + t.chat : CONV] = true; OPEN_AT = CONV;
+    }
   };
   // 点侧栏项: 没选中它 → 选中 (会话顺带展开); 已选中 → 不再选一遍, 右边的正文一个字不动 ——
   // 会话只折叠/展开, 子项什么都不做。
   var clickItem = function (key, withRole) {
-    if (key !== CONV || withRole !== WITH || VIEW !== 'msgs') return selectConv(key, withRole);
+    if (key !== CONV || withRole !== WITH || VIEW !== 'msgs' || EYE) return selectConv(key, withRole);
     // 窄屏退回列表后再点它是要回去读, 不是要折叠。
     if (!app.classList.contains('reading')) return app.classList.add('reading');
     if (withRole) return;
@@ -417,26 +545,60 @@
   // 同层按最近活动排, 有新话就上浮。
   var recentFirst = function (a, b) { return b.lastTs - a.lastTs; };
   // 一个 role 的一行: 头像 · 名字 (+tail) + 忙闲灯 · 时刻 / 最近一句 + 未读。
-  var roleRow = function (id, name, label, g, status, tail) {
+  var roleRow = function (id, name, label, g, status, tail, badge) {
     return goSpan('av', id, esc(label)) +
-      line(nm(id, name, true) + (tail || ''), g.lastTs, g.preview, stTag(status, true), g.unread);
+      line(nm(id, name, true, badge) + (tail || ''), g.lastTs, g.preview, stTag(status, true), g.unread);
+  };
+  // 名字旁的「+N」: 视图外还有 N 个 —— 同一个徽标, 数什么由所在的视图注入 (会话列表数会话, 关系图数关系)。
+  var moreTag = function (n, tip) {
+    return n ? '<span class="oc" title="' + esc(tip) + '">+' + n + '</span>' : '';
   };
+  // 会话列表: 除了这一项 (here = 它的绝对 key), 它还对应 N 个叶子项 (各群里它参与的成对子项 + 它的私聊)。服务端没给这份 = 不知道, 不画。
+  var otherChats = function (id, here) {
+    var ks = (R.chatKeys || {})[id];
+    var n = ks ? ks.filter(function (k) { return k !== here; }).length : 0;
+    return moreTag(n, nameOf(id) + ' 在另外 ' + n + ' 处 (群里的一对 / 私聊) 还有往来, 切到它的视角可见');
+  };
+  // 侧栏的 key 是相对视角的 (p:<对端> / 群 + 选中的对端), 服务端那份是绝对的 (两端排序)。
+  var pairKey = function (peer) { return [ROLE, peer].sort().join('|'); };
+  var dmKey = function (peer) { return 'p:' + pairKey(peer); };
   var convRow = function (c) {
-    if (c.kind === 'wizard') return roleRow(c.peer, c.name, c.label, glance(c), c.status);
-    return avatarOf(c) + line('<span class="nm chat">' + esc(c.name) + '</span>', c.lastTs, c.preview, stTag(c.status, true), unreadOf(c));
+    if (c.kind === 'wizard') return roleRow(c.peer, c.name, c.label, glance(c), c.status, jobMark(c.jobs), otherChats(c.peer, dmKey(c.peer)));
+    if (c.kind === 'job') return '<span class="av">' + esc(c.label) + '</span>' + line('<span class="nm chat">' + esc(c.name) + '</span>' + jobTag(c.job) + stuckTag(c.job), c.lastTs, c.preview, '', unreadOf(c));
+    return avatarOf(c) + line('<span class="nm chat">' + esc(c.name) + '</span>' + jobMark(c.jobs), c.lastTs, c.preview, stTag(c.status, true), unreadOf(c));
+  };
+  var subRow = function (c, s) { return roleRow(s.role, s.name, s.label, glance(c, s), s.status, jobMark(s.jobs), otherChats(s.role, c.key + '|' + pairKey(s.role))); };
+
+  // 「chat 内全部」下与我无往来的那几项: 一行的数据是它在群里的全部记录 (服务端 whole, 与关系图卡片同一个
+  // glanceOfTalk), 点开看的也是那一份 (`a:<它>||<群>`, 对端不限)。没有成对的往来, 也就没有我的未读 —— 同关系图里
+  // 视角没有会话项的那张卡片。+N 数它的全部叶子, 这一项本身不是叶子。
+  var farKey = function (c, s) { return 'a:' + s.role + '||' + c.base; };
+  var farRow = function (s) {
+    var w = s.whole;
+    return roleRow(s.role, s.name, s.label, { lastTs: w.lastTs, preview: w.preview, unread: 0 }, s.status, '', otherChats(s.role, ''));
   };
-  var subRow = function (c, s) { return roleRow(s.role, s.name, s.label, glance(c, s), s.status); };
 
   var convItem = function (c) {
     var on = c.key === CONV;
-    // 只列与我有往来的: 在群里但没和我说过话的人, 点进去也是空的。
-    var talked = OPEN[c.key] ? c.subs.filter(function (s) { return s.count; }).sort(recentFirst) : [];
+    // 成对: 只列与我有往来的 —— 在群里但没和我说过话的人, 点进去也是空的。
+    // 「chat 内全部」再把其余有记录的接在成对的后面 (.far), 各自按最近排。
+    var pairs = c.subs.filter(function (s) { return s.count; }).sort(recentFirst);
+    var fars = SCOPE === 'all'
+      ? c.subs.filter(function (s) { return !s.count && s.whole && s.whole.count; })
+        .sort(function (a, b) { return recentFirst(a.whole, b.whole); })
+      : [];
+    var talked = OPEN[c.key] ? pairs.concat(fars) : [];
     var hidden = talked.length - SUB_FOLD;
     var bar = hidden > 0
       ? '<button class="si-more" data-more="' + esc(c.key) + '">' + (MORE[c.key] ? '折叠' : '展开更多') + ' × ' + hidden + '</button>'
       : '';
     // 展开条钉在第 SUB_FOLD+1 位, 展开与折叠都不挪: 其余子项展开后接在它下面。
     var sub = function (s) {
+      if (!s.count) {
+        var k = farKey(c, s);
+        return '<button class="si far' + (CONV === k ? ' on' : '') + '" data-conv="' + esc(k) + '" data-with="" ' +
+          'title="' + esc(nameOf(s.role) + ' 在这里的 ' + s.whole.count + ' 条记录 (与我无往来)') + '">' + farRow(s) + '</button>';
+      }
       var sel = on && s.role === WITH;
       return '<button class="si' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '" data-with="' + esc(s.role) + '" ' +
         'title="' + esc('我与 ' + nameOf(s.role) + ' 在这里的 ' + s.count + ' 条往来') + '">' +
@@ -451,7 +613,7 @@
         convRow(c) + '</button>' + subs;
   };
 
-  // 搜索入口挂在名片与关系/日程入口之间 —— 侧栏的公共区, 会话列表与关系图下都在。⌘K 见下方「搜索」。
+  // 搜索入口挂在名片下 —— 侧栏的公共区, 会话列表与关系图下都在。⌘K 见下方「搜索」。
   var MAC = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
   var KBD = MAC ? '⌘K' : 'Ctrl K';
   var SEARCH_SVG = '<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="7" cy="7" r="4.6"/><path d="m10.4 10.4 3.6 3.6"/></svg>';
@@ -459,10 +621,12 @@
   sbox.className = 'sbox'; sbox.type = 'button';
   sbox.innerHTML = '<span class="ic">' + SEARCH_SVG + '</span><span class="lb">搜索 role、会话、消息</span><kbd>' + KBD + '</kbd>';
   sbox.onclick = function () { openSearch(); };
-  $('#rb-acts').parentNode.insertBefore(sbox, $('#rb-acts'));
+  $('#rolebar').parentNode.insertBefore(sbox, $('#rolebar').nextSibling);
+  // 老外壳 (daemon 未重启) 里还留着名片下那条入口栏 —— 日程已并进名片, 它整条不要了。
+  if ($('#rb-acts')) $('#rb-acts').remove();
   var renderConvs = function () {
     var groups = R.convs.filter(function (c) { return c.kind === 'group'; }).sort(recentFirst);
-    var dms = R.convs.filter(function (c) { return c.kind !== 'group'; }).sort(recentFirst);
+    var dms = R.convs.filter(function (c) { return c.kind === 'wizard'; }).sort(recentFirst);
     R.convs.forEach(markRead);
     if (WORLD) return renderWorld();
     // 空着的那一栏不画 —— 对谁都一样: 人没有私聊只是这条规则的一个特例。
@@ -470,7 +634,8 @@
       return list.length ? '<h2>' + title + '<span>' + list.length + '</span></h2>' + list.map(convItem).join('') : '';
     };
     // 没变就不碰 DOM: 心跳每 3s 来一次, 重建会把列表的滚动与焦点蹭掉。
-    var html = sec('群聊', groups) + sec('私聊', dms);
+    // 开关挂在第一个标题行的右端; 一个会话都没有也留一行标题给它。
+    var html = (sec('群聊', groups) + sec('私聊', dms) || '<h2>会话<span>0</span></h2>').replace('</h2>', scopeToggle() + worldToggle() + '</h2>');
     if (convsEl._html === html) return;
     convsEl._html = html; convsEl.innerHTML = html;
     convsEl.querySelectorAll('[data-conv]').forEach(function (b) {
@@ -482,6 +647,10 @@
       b.onclick = function () { MORE[key] = !MORE[key]; renderConvs(); };
     });
     bindGo(convsEl);
+    bindWorldToggle(convsEl);
+    convsEl.querySelectorAll('[data-scope]').forEach(function (b) {
+      b.onclick = function () { setScope(b.getAttribute('data-scope')); };
+    });
   };
 
   var shortCwd = function (p) {
@@ -536,23 +705,31 @@
     if (SESS_OPEN && e.key === 'Escape') setSessOpen(false);
   });
 
-  // ── 关系 / 日程入口: 名片下一行居中的文字链接, 「｜」分隔 ──
-  // 副标题 (家谱计数 / 下一枪) 收进悬停提示; 打开着的染视角色, 定时出错的染红。
-  var tile = function (view, label, sub, tone) {
-    var on = view === 'world' ? WORLD : VIEW === view;
-    return '<button class="bd' + (on ? ' on' : '') + (tone ? ' ' + tone : '') + '" data-view="' + view + '"' +
-      (sub ? ' title="' + esc(sub) + '"' : '') + '>' + label + '</button>';
+  // 会话列表 ↔ 关系图: 侧栏第一行右上角同一个小开关, 标的是「点了去哪」。
+  var LIST_SVG = '<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="M3 4h10M3 8h10M3 12h10" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
+  var TREE_SVG = '<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="M4 3v10M4 6h5M4 11h5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><circle cx="11" cy="6" r="1.6" fill="currentColor"/><circle cx="11" cy="11" r="1.6" fill="currentColor"/></svg>';
+  // 群下子项的范围: 「仅与我有往来」(成对) / 「chat 内全部」(再列出群里与我无往来的 role)。
+  // 只是个人的看法偏好 —— 记在本地, 取不到就按成对。
+  var SCOPE_KEY = 'wezard.role.subScope';
+  var SCOPE = (function () { try { return localStorage.getItem(SCOPE_KEY) === 'all' ? 'all' : 'pair'; } catch (e) { return 'pair'; } })();
+  var setScope = function (v) {
+    if (v === SCOPE) return;
+    SCOPE = v;
+    try { localStorage.setItem(SCOPE_KEY, v); } catch (e) { }
+    renderConvs();
   };
-  var relTile = function (r) {
-    var sub = [r.clones.length ? r.clones.length + ' 分身' : '', r.spawns.length ? r.spawns.length + ' 子' : ''].filter(Boolean);
-    return tile('world', '关系图', sub.join(' · '));
+  // 单个文字按钮: 字是当前范围, 点一下切到另一种 (样式与旁边的「关系图」按钮同一个 .vt)。
+  var scopeToggle = function () {
+    var pair = SCOPE === 'pair';
+    return '<button class="vt" data-scope="' + (pair ? 'all' : 'pair') + '" title="' +
+      (pair ? '群下只列与我有往来的 role (点击改为列出 chat 内全部)' : '群下列出 chat 内全部 role (点击改为只列有往来的)') + '">' + (pair ? '往来' : '全部') + '</button>';
   };
-  var planTile = function () {
-    var p = R.plan || {};
-    var sub = p.broken ? '⚠ ' + p.broken + ' 出错'
-      : p.nextAt ? fmtClock(p.nextAt).replace(/^今天 /, '')
-      : String(R.schedules);
-    return tile('plan', '日程', sub, p.broken ? 'bad' : '');
+  var worldToggle = function () {
+    return '<button class="vt" data-vt title="' + (WORLD ? '换回会话列表' : '换成关系') + '">' + (WORLD ? LIST_SVG + '列表' : TREE_SVG + '关系') + '</button>';
+  };
+  var bindWorldToggle = function (scope) {
+    var b = scope.querySelector('[data-vt]');
+    if (b) b.onclick = function () { setWorld(!WORLD); };
   };
 
   // 轻提示: 底部居中一枚, 新的顶掉旧的。
@@ -599,60 +776,89 @@
     for (var el = e.target; el && el.nodeType === 1 && el !== document.body && !clipTip(el); el = el.parentElement);
   });
 
-  // 名片: 头像 · 名字 (忙闲 / session) · 名字下一行低调的描述 (📁 cwd · 🏠 home · 🐣 出生) · 职责;
-  // 名片下面一排是关系 / 日程入口。身份与出身 (谁的分身 / 子 wizard) 交给关系图, 名片不写。
+  // 名片: 头像 · 名字 (忙闲 / session) · 名字下一行低调的描述 (🏠 home · 🐣 出生 · 📜 宪章大小 · 🗂️ cwd · 📅 日程) · 职责。
+  // 身份与出身 (谁的分身 / 子 wizard) 交给关系图 (侧栏标题右端的开关), 名片不写。
+  // 日程: 下一枪几点, 定时出错时染红改写出错数; 没有排期就只写条数 (定时 + 工单)。
+  var planFact = function () {
+    var p = R.plan || {};
+    var txt = p.broken ? '日程 ⚠ ' + p.broken + ' 出错' : p.nextAt ? '日程 ' + fmtClock(p.nextAt).replace(/^今天 /, '') : '日程 ' + R.schedules;
+    return ['📅', txt, (p.tasks ? p.tasks + ' 条定时 · ' : '') + '点开看日程', 'plan', p.broken ? 'bad' : ''];
+  };
   var renderRole = function () {
     var r = R.role;
     if (!r) return;
     // 出生 = 注册表记的 bornAt; 没记 (老 wizard / 人) 就退到最早一段 session 的开始。
     var born = r.bornAt || R.sessions.reduce(function (m, x) { return x.start && (!m || x.start < m) ? x.start : m; }, 0);
     var facts = [
-      r.cwd ? ['📁', shortCwd(r.cwd), r.cwd] : null,
       r.chat ? ['🏠', r.chat, 'home'] : null,
-      born ? ['🐣', fmtClock(born), '出生于 ' + fmtDay(born)] : null
-    ].filter(Boolean).map(function (f) { return '<span title="' + esc(f[2]) + '">' + f[0] + ' ' + esc(f[1]) + '</span>'; });
+      born ? ['🐣', fmtAgo(born), '出生于 ' + fmtDay(born)] : null,
+      // 宪章紧跟出生: 出生时被交代了多少 (≈token), 只写大小; 可点开看全文。
+      R.charter ? ['📜', fmtTok(R.charter.tokens), '宪章 ≈' + fmtTok(R.charter.tokens) + ' token · ' + fmtClock(R.charter.at) + ' 压进系统提示 · 点开看全文', 'charter'] : null,
+      r.cwd ? ['🗂️', shortCwd(r.cwd), r.cwd] : null,
+      // 日程排最后, 可点: 名下排了什么。
+      R.schedules ? planFact() : null
+    ].filter(Boolean).map(function (f) {
+      return '<span' + (f[3] ? ' class="fx' + (VIEW === f[3] ? ' on' : '') + (f[4] ? ' ' + f[4] : '') + '" data-view="' + f[3] + '"' : '') + ' title="' + esc(f[2]) + '">' + f[0] + ' ' + esc(f[1]) + '</span>';
+    });
+    // 只有一段 session 就没什么可选, 不挂选择器。
     $('#rb-who').innerHTML =
       '<div class="id"><span class="av">' + esc(r.label) + '</span>' +
-        '<span class="l"><span class="nl"><span class="cp" title="' + esc('复制 ' + nameOf(r.id)) + '">' + nm(r.id, r.name) + '</span>' + (r.kind === 'wizard' ? '<span id="rb-st"></span>' : '') +
+        '<span class="l"><span class="nl"><span class="cp" title="' + esc('点击复制 ' + nameOf(r.id)) + '">' + nm(r.id, r.name) + '</span>' + (r.kind === 'wizard' ? '<span id="rb-st"></span>' : '') +
           '<span id="rb-sp">' + (R.sessions.length > 1 ? sessPicker() : '') + '</span></span>' +
           (facts.length ? '<span class="facts">' + facts.join('') + '</span>' : '') + '</span></div>' +
       (r.description ? '<p class="job">' + esc(r.description) + '</p>' : '');
     paintStatus();
     $('#rb-who').querySelector('.cp').onclick = function () { copyText(nameOf(r.id)); };
+    $('#rb-who').querySelectorAll('.fx').forEach(function (x) {
+      x.onclick = function () { var v = x.getAttribute('data-view'); setView(VIEW === v ? 'msgs' : v); };
+    });
     $('#rb-who').querySelectorAll('.go').forEach(function (g) {
       g.onclick = function () { switchRole(g.getAttribute('data-r')); };
     });
     // 老外壳的底栏选择框已并进 name 行。
     if ($('#rb-foot')) $('#rb-foot').hidden = true;
     bindSessPicker();
-    // 入口只在有东西可看时出现 —— 挂在名片下、会话列表上, 不挤进名片: 名片的主角是身份,
-    // 家谱计数 (几个分身 / 子 wizard) 属于关系, 写在关系图入口上。
-    $('#rb-acts').innerHTML = [R.relations && relTile(r), R.schedules && planTile()].filter(Boolean).join('<span class="sep" aria-hidden="true">｜</span>');
-    $('#rb-acts').querySelectorAll('.bd').forEach(function (b) {
-      var v = b.getAttribute('data-view');
-      b.onclick = function () { v === 'world' ? setWorld(!WORLD) : setView(VIEW === v ? 'msgs' : v); };
-    });
-    // 标题就是这一页的主张: 你此刻站在谁的位置上。换视角 → 标题跟着换。
-    document.title = nameOf(r.id) + ' 的视角';
+    // 标题就是这一页的主张: 你此刻站在谁的位置上。换视角 → 标题与 favicon 跟着换成它的头像。
+    document.title = (r.label ? r.label + ' ' : '') + nameOf(r.id) + ' 的视角';
+    setFavicon(r.label);
+  };
+
+  // favicon = 头像 emoji 画成的 SVG data URI; 没有头像就不动。
+  var setFavicon = function (emoji) {
+    if (!emoji) return;
+    var link = document.querySelector('link[rel="icon"]') || document.head.appendChild(Object.assign(document.createElement('link'), { rel: 'icon' }));
+    link.type = 'image/svg+xml';
+    link.href = 'data:image/svg+xml,' + encodeURIComponent(
+      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="50" font-size="86" text-anchor="middle" dominant-baseline="central">' +
+      esc(emoji) + '</text></svg>');
   };
 
   // ── 用量条: 一组轮次的总账 ──
   // usageHTML 只管「一本账长什么样」(TagSummary → 一条), 账是谁的、挂在哪由 renderUsage 定。
-  // 按单价从省到贵排, 颜色随之由冷转暖: 缓存读 (约 0.1×, 通常占了大半) 退成浅灰蓝不抢眼 →
-  // 输入 (1×) 沉稳蓝 → 缓存写 (1.25×) 琥珀提醒 → 输出 (约 5×, 最贵) 珊瑚红警示。注意力留给后三段。
+  // 按单价从省到贵排, 颜色随之由冷转暖: 缓存读 (约 0.1×, 通常占了大半) 直接用边线色, 色带贴顶时这段就像普通上边线 →
+  // 输入 (1×) 沉稳蓝 → 输出 (约 5×, 最贵) 绿 → 缓存写 (1.25×) 红, 与蓝/绿都拉开。注意力留给后三段。
   var SEGS = [
-    ['cacheRead', '缓存读', '#aab7c8', 'cr'], ['input', '输入', '#4c6fd6', 'in'],
-    ['cacheWrite', '缓存写', '#e0a030', 'cw'], ['output', '输出', '#e4572e', 'out'],
+    // in = API 的 input_tokens: 只是没命中缓存、也没写进缓存的那点新输入 (Claude 上每次请求常只有个位数),
+    // 不是「送进模型的输入」—— 那是 in + cr + cw, 在 bar 的悬停提示里单列。
+    ['cacheRead', '缓存读', 'var(--line)', 'cr'], ['input', '新输入 (未走缓存)', '#4c6fd6', 'in'],
+    ['output', '输出', '#2f9e5b', 'out'], ['cacheWrite', '缓存写', '#d64545', 'cw'],
   ];
   var TIP = {
     turns: '对话轮数', tools: '工具调用次数', api: 'API 请求次数',
-    ctx: '上下文峰值 — 单次请求送入的 input + 缓存 的最高值', time: '累计耗时',
+    ctx: '上下文 — 最近一次请求送入的 input + 缓存',
   };
-  var ICON = { turns: '💬', tools: '🛠️', api: '📡', ctx: '🧠', time: '⏱️' };
-  var liveDur = function (t) {
-    var d = (t.usage && t.usage.durationMs) || 0;
-    if (!t.runningUntil) return d;
-    return d + Math.max(0, Math.min(srvNow(), t.runningUntil) - R.at);
+  var ICON = { cost: '💰', turns: '💬', tools: '🛠️', api: '⇄', ctx: '📄' };
+  var fmtUsd = function (n) {
+    return n < .01 ? '<$0.01' : '$' + (n < 10 ? n.toFixed(2) : n < 1000 ? n.toFixed(1) : Math.round(n));
+  };
+  // 费用: 有认不出价格的模型就在数前加「≥」—— 实际只多不少; 一分钱都没算出来就不占位。
+  var costKv = function (u) {
+    if (!u.cost) return '';
+    var txt = (u.unpriced ? '≥' : '') + fmtUsd(u.cost);
+    var tip = '估算费用 — 每轮按模型单价 (LiteLLM 价格表快照) 计 input / output / 缓存写 / 缓存读' +
+      (u.unpriced ? '\n另有 ' + u.unpriced + ' 次 API 请求的模型不在价格表里, 未计入' : '');
+    return '<span class="kv kv-cost" title="' + esc(tip) + '" data-tip="' + esc(ICON.cost + ' ' + txt) +
+      '"><i class="u-ic">' + ICON.cost + '</i><b>' + esc(txt) + '</b></span>';
   };
   var usageHTML = function (t) {
     var u = t.usage || {};
@@ -665,15 +871,16 @@
       return n ? '<span class="kv kv-' + k + '" title="' + esc(TIP[k] || k) + '" data-tip="' + esc(ICON[k] + ' ' + text) +
         '"><i class="u-ic">' + ICON[k] + '</i><b>' + esc(text) + '</b></span>' : '';
     };
-    // 输出 / 缓存不再单列成指标 —— 它们就是底边色带的那几段。
-    // I/O 分布: 贴着整条 bar 的底边画一条横跨整宽的细色带; 各段的量作为图例常显在 bar 里 (占比在悬停提示), 色点与色带同色。
+    // 输出 / 缓存不再单列成指标 —— 它们就是顶边色带的那几段。
+    // I/O 分布: 贴着整条 bar 的顶边 (替代上边线) 画一条横跨整宽的细色带; 各段的量作为图例常显在 bar 里 (占比在悬停提示), 色点与色带同色。
     // 两头留一位小数: 99.9% 不该被四舍五入成 100%, 一丁点也不该成 0%。
     var pct = function (n) {
       var p = n / total * 100;
       return p < .1 ? '<0.1%' : (p < 1 || p > 99 ? p.toFixed(1) : Math.round(p)) + '%';
     };
     var io = total > 0
-      ? '<span class="bar" title="' + esc(['累计 token I/O · 共 ' + fmtTok(total)].concat(segs.map(function (s) {
+      ? '<span class="bar" title="' + esc(['累计 token I/O · 共 ' + fmtTok(total),
+          '送入合计 (in + cr + cw) ' + fmtTok((u.input || 0) + (u.cacheRead || 0) + (u.cacheWrite || 0))].concat(segs.map(function (s) {
           return s[1] + ' ' + fmtTok(u[s[0]]) + ' · ' + pct(u[s[0]]);
         })).join('\n')) + '">' + segs.map(function (s) {
           return '<span class="seg" style="flex-grow:' + u[s[0]] + ';background:' + s[2] + '" title="' +
@@ -691,16 +898,17 @@
     return '<span class="u-who" title="' + esc(nameOf(t.target)) + '">' + esc(roleLabel(t.target) || t.label) +
         '<span class="u-nm" data-tip="' + esc(nameOf(t.target)) + '">' + esc(nameOf(t.target)) + '</span></span>' +
       '<span class="u-lb" title="' + esc(t.model || '') + '">' +
-        esc(t.model ? t.model.replace(/^claude-/, '') : '用量') + '</span>' +
+        esc(t.modelLabel || t.model || '用量') + '</span>' +
+      (t.effort ? '<span class="u-ef" title="effort 档位">' + esc(t.effort) + '</span>' : '') +
       '<span class="u-kvs">' +
-        kv('turns', t.turns, t.turns) + kv('tools', u.tools, u.tools) + kv('api', u.calls, u.calls) +
-        kv('ctx', u.ctxPeak, fmtTok(u.ctxPeak)) + kv('time', liveDur(t), fmtDur(liveDur(t))) +
+        costKv(u) + kv('turns', t.turns, t.turns) + kv('tools', u.tools, u.tools) + kv('api', u.calls, u.calls) +
+        kv('ctx', u.ctx, fmtTok(u.ctx)) +
       '</span>' + io;
   };
-  // 永远单行: 排不下就按 FOLD 的顺序一级级藏 (分布文字 → 名字 → 耗时), 宽度回来再按反序放出来。
+  // 永远单行: 排不下就按 FOLD 的顺序一级级藏 (消息/工具/API 计数 → 分布文字 → 名字), 宽度回来再按反序放出来。
   // 判定看的是容器自己溢没溢出, 不看视口 —— 同一个组件挂在整页页脚和右栏底, 宽度各不相同。
-  var FOLD = ['f-leg', 'f-nm', 'f-time'];
-  var FOLDED = { 'f-leg': '.leg', 'f-nm': '.u-nm', 'f-time': '.kv-time' };
+  var FOLD = ['f-cnt', 'f-leg', 'f-nm'];
+  var FOLDED = { 'f-cnt': '.kv-turns, .kv-tools, .kv-api', 'f-leg': '.leg', 'f-nm': '.u-nm' };
   var fitUsage = function (el) {
     if (el.hidden) return;
     var over = function () { return el.scrollWidth > el.clientWidth; };
@@ -708,10 +916,9 @@
     var n = 0;
     while (n < FOLD.length && over()) el.classList.add(FOLD[n++]);
     // 藏起来的那几样进整条 bar 的 title, hover 照样读得到。
-    el.title = FOLD.slice(0, n).map(function (c) {
-      var x = el.querySelector(FOLDED[c]);
-      return x ? x.getAttribute('data-tip') : '';
-    }).filter(Boolean).join('\n');
+    el.title = FOLD.slice(0, n).reduce(function (a, c) {
+      return a.concat([].map.call(el.querySelectorAll(FOLDED[c]), function (x) { return x.getAttribute('data-tip'); }));
+    }, []).filter(Boolean).join('\n');
   };
   var watchUsage = function (el) {
     if (el._ro || typeof ResizeObserver === 'undefined') return;
@@ -743,19 +950,113 @@
   };
 
   // ── 右栏头: 这个群聊 / 私聊是什么 (关系 / 日程视图时是视图名) ──
+  // 跳走之前在看的那段会话 —— 顶栏的「‹ 回到 …」回这里。on: 在哪些窗口上露出这个按钮;
+  // at: 跳走时点的那条消息, 回来落在它上面。进工单页 (只在从非工单的窗口进来时记) 与
+  // 移交行点对方都记它, 同一个按钮。
+  var BACK = null;
+  var inJobs = function () { return VIEW === 'jobs' || CONV.indexOf('j:') === 0; };
+  // 回来 = 原样恢复那一页: 会话、视角、滚动位置 (按视窗顶上那一行的偏移记, 不闪不吸)。吸在底部就不记锚点。
+  var markBack = function (on) {
+    var r = !atBottom() && firstShown();
+    var at = r && { id: r.getAttribute('data-id'), off: r.getBoundingClientRect().top - thread.getBoundingClientRect().top };
+    BACK = { conv: CONV, with: WITH, session: SESSION, eye: EYE, at: at || null, on: on };
+  };
+  var restoreAt = function (at) {
+    if (!at) return undefined;
+    var put = function () {
+      var row = rowNode(at.id);
+      if (!row) return false;
+      thread.scrollTop += row.getBoundingClientRect().top - thread.getBoundingClientRect().top - at.off;
+      S.pinned = atBottom();
+      return true;
+    };
+    return function () { if (!put()) loadMsgs('0', put); return true; };
+  };
+  var openJob = function (id) {
+    if (CONV.indexOf('j:') !== 0) markBack(inJobs);
+    selectConv('j:' + id, '');
+  };
+  // 一处标记背后可能有好几张: 一张直接进那张, 多张进工单列表且只列这几张 (JOB_ONLY)。
+  var JOB_ONLY = null;
+  var openJobs = function (ids) {
+    if (ids.length === 1) return openJob(ids[0]);
+    if (CONV.indexOf('j:') !== 0) markBack(inJobs);
+    JOB_ONLY = ids;
+    if (VIEW === 'jobs') renderJobList(); else setView('jobs');
+    renderHead();
+  };
+  // 标记长在会话项 / 关系图卡片这些按钮里: 捕获阶段截下来, 不让外层按钮再打开那段对话。
+  document.addEventListener('click', function (e) {
+    var m = e.target.closest && e.target.closest('.jmk[data-jobs]');
+    if (!m) return;
+    e.stopPropagation(); e.preventDefault();
+    openJobs(m.getAttribute('data-jobs').split(' ').filter(Boolean));
+  }, true);
+  var backBtn = function () {
+    var c = BACK && BACK.on() && convOf(BACK.conv);
+    return c ? '<button class="back jb" id="ch-jback" title="' + esc('回到 ' + (BACK.with ? nameOf(BACK.with) : c.name)) + '" aria-label="返回">‹</button>' : '';
+  };
+  // 返回钮钉在标题栏最左 (标题前面), 不进右侧的按钮组 —— 标题写好之后再插进去。
+  var bindBack = function () {
+    var h = backBtn();
+    if (h) $('#ch-who').insertAdjacentHTML('afterbegin', h);
+    var b = $('#ch-jback');
+    if (b) b.onclick = function () { var x = BACK; BACK = null; SESSION = x.session; selectConv(x.conv, x.with, restoreAt(x.at), x.eye); };
+  };
   var renderHead = function () {
     var who = $('#ch-who'), acts = $('#ch-acts');
+    if (VIEW === 'jobs') {
+      who.innerHTML = '<span class="t">工单</span><span class="sub">' + (JOB_ONLY ? '这一处经手的 ' + jobListRows().length + ' 张' : esc(nameOf(ROLE)) + ' 开的或参与的') + ' · 进行中在前</span>';
+      acts.innerHTML = '<button class="vb" id="ch-back">‹ 对话</button>';
+      bindBack();
+      $('#ch-back').onclick = function () { setView('msgs'); };
+      return;
+    }
     if (VIEW !== 'msgs') {
-      who.innerHTML = '<span class="t">日程</span><span class="sub">' + esc(nameOf(ROLE)) + ' 名下的定时任务与工单</span>';
+      who.innerHTML = VIEW === 'charter'
+        ? '<span class="t">宪章</span><span class="sub">wezard 出生时压进 ' + esc(nameOf(ROLE)) + ' 系统提示的那份身份</span>'
+        : '<span class="t">日程</span><span class="sub">' + esc(nameOf(ROLE)) + ' 名下的定时任务</span>';
       acts.innerHTML = '<button class="vb" id="ch-back">‹ 对话</button>';
       $('#ch-back').onclick = function () { setView('msgs'); };
       return;
     }
     var c = convOf(CONV);
     if (!c) { who.innerHTML = ''; acts.innerHTML = ''; return; }
+    // 某 role 在一个群里的全部记录 (「chat 内全部」下与我无往来的子项): 顶栏与成对子项同一种写法 —— 只写它,
+    // 「在 <群>」点回整个群。
+    if (c.kind === 'all' && c.chat) {
+      who.innerHTML = '<span class="t">' + nm(c.who, '', true) + '</span>' +
+        '<span class="sub">在 <button type="button" class="up" id="ch-up" title="' + esc('看 ' + chatTitle(c.chat) + ' 的全部记录') + '">' + esc(chatTitle(c.chat)) + '</button></span>';
+      acts.innerHTML = '';
+      bindGo(who);
+      $('#ch-up').onclick = function () { selectConv('c:' + c.chat, ''); };
+      return;
+    }
     if (c.kind === 'all') {
-      who.innerHTML = pairOf([[c.who]]) + '<span class="t">' + esc(c.name) + '</span>';
+      who.innerHTML = pairOf([[c.who]]) + '<span class="t" title="' + esc(c.name) + '"></span>';
       acts.innerHTML = '';
+      bindBack();
+      fitTalk(who.querySelector('.t'), c);
+      bindGo(who);
+      return;
+    }
+    // 群里选中一个子项: 窗口是「我与它」在这个群里的往来, 顶栏只写对方 (视角自己左栏名片上已有), 不画头像;
+    // 群名退到副标题, 点它 = 选回这个群本身 (整个群的视图)。
+    if (WITH && c.kind === 'group') {
+      var s = (c.subs || []).filter(function (x) { return x.role === WITH; })[0];
+      who.innerHTML = '<span class="t">' + nm(WITH, s && s.name, true) + '</span>' +
+        '<span class="sub">在 <button type="button" class="up" id="ch-up" title="' + esc('看 ' + c.name + ' 的全部记录') + '">' + esc(c.name) + '</button></span>';
+      acts.innerHTML = '';
+      bindBack();
+      bindGo(who);
+      $('#ch-up').onclick = function () { selectConv(CONV, ''); };
+      return;
+    }
+    if (c.kind === 'job') {
+      who.innerHTML = '<span class="av">📋</span><span class="t">' + esc(c.name) + '</span>' +
+        '<span class="sub">' + esc(c.key.slice(2)) + (c.job ? ' · 开单 ' + nm(c.job.owner, '', true) : '') + jobTag(c.job) + stuckTag(c.job) + '</span>';
+      acts.innerHTML = '';
+      bindBack();
       bindGo(who);
       return;
     }
@@ -764,14 +1065,27 @@
     var peer = pairPeer(c);
     var peerLabel = c.kind !== 'group' ? c.label : dm && peer === dm.role ? dm.label : '';
     who.innerHTML = (peer ? pairOf([[ROLE, R.role && R.role.label], [peer, peerLabel]]) : '') +
-      '<span class="t">' + (c.kind === 'wizard' ? nm(c.peer, c.name, true) : esc(c.name)) + '</span>';
-    acts.innerHTML = WITH
-      ? '<span class="with">只看我与 ' + nm(WITH, '', true) + '</span><button class="vb" id="ch-all">看全部</button>'
-      : '';
-    bindGo(who); bindGo(acts);
-    var x = $('#ch-all');
-    if (x) x.onclick = function () { selectConv(CONV, ''); };
-  };
+      '<span class="t">' + (c.kind === 'wizard' ? nm(c.peer, c.name, true) : '<span class="nm chat">' + esc(c.name) + '</span>') + '</span>';
+    acts.innerHTML = '';
+    bindBack();
+    bindGo(who);
+  };
+  // 多人对话的标题放不下时, 收成「X 与 .a、.b、.c 等 N 个 role 之间的对话」—— 放得下几个列几个, 至少一个。
+  // 量的是真宽度: 没上屏 (窄屏还停在列表) 量不出来, 就先给全称, 等 resize / 下一次重画。
+  var fitTalk = function (el, c) {
+    var n = c.peers.length;
+    var at = function (k) {
+      return k >= n ? c.name : nameOf(c.who) + ' 与 ' + c.peers.slice(0, k).map(nameOf).join('、') + ' 等 ' + n + ' 个 role 之间的对话';
+    };
+    var k = n;
+    el.textContent = at(k);
+    if (!el.clientWidth) return;
+    while (k > 1 && el.scrollWidth > el.clientWidth + 1) el.textContent = at(--k);
+  };
+  window.addEventListener('resize', function () {
+    var c = VIEW === 'msgs' && convOf(CONV);
+    if (c && c.kind === 'all') renderHead();
+  });
 
   // ── 消息行 ──
   // 同一条消息从发话方看靠右、从收信方看靠左 —— 片段不带方向, 由这里按视角包装。
@@ -789,43 +1103,66 @@
   var signCut = function (html, id, name) {
     return html.replace(CUT_L, function (_, open, l) { return open + nm(id, name, true) + l; });
   };
+  // 消息上的工单 badge (服务端只写 data-job): 按此刻的账填成 📋 标题 + 进度, 点了进那张工单页。
+  // 工单页自己的消息不挂 —— 点了还是这一页。
+  var JOB_CHIP = /<button class="mchip job" data-job="([^"]*)"><\/button>/g;
+  var jobChips = function (html) {
+    return html.replace(JOB_CHIP, function (_, id) {
+      if (CONV === 'j:' + id) return '';
+      var c = jobRowOf(id);
+      return '<button class="mchip job" data-job="' + id + '" title="' + esc(id + ' · ' + c.name + ' —— 进工单页') + '">📋 <span class="jt">' + esc(c.name) + '</span>' + jobTag(c.job) + '</button>';
+    });
+  };
+  var refillJobChips = function () {
+    inner.querySelectorAll('.mchip.job[data-job]').forEach(function (b) {
+      b.outerHTML = jobChips('<button class="mchip job" data-job="' + b.getAttribute('data-job') + '"></button>');
+    });
+  };
   var rowHTML = function (m) {
     learn(m.from, m.fromName, m.fromLabel);
     learn(m.to, m.toName, m.toLabel);
     if (m.dir === 'mark') {
-      return '<div class="mrow mark" data-id="' + esc(m.id) + '" data-turn="' + esc(m.turnId || m.id) + '" data-ts="' + m.ts + '" data-sig="' + esc(m.sig) + '">' + signCut(m.html, m.from, m.fromName) + '</div>';
+      return '<div class="mrow mark" data-id="' + esc(m.id) + '" data-turn="' + esc(m.turnId || m.id) + '" data-ts="' + m.ts + '" data-sig="' + esc(m.sig) + '">' + signCut(m.html, m.from) + '</div>';
     }
-    var mine = m.from === ROLE;
+    var me = eyeOf();
+    var mine = m.from === me;
     var other = mine ? m.to : m.from;
     // 看 key 而不是会话列表: 换视角就地重包时, 列表还是上一个 role 的。
     var group = CONV.indexOf('p:') !== 0;
+    // 顶栏那个对端是相对 ROLE 的; 消息区换成了它 (EYE) 的视角时, 它的对端就是 ROLE。
+    var peer = group ? pairPeer(convOf(CONV)) : CONV.slice(2);
+    if (EYE && peer === EYE) peer = ROLE;
     // 说给谁: 群里我不是收信方的那条 (X → Y); 我发的那条, 收信方不是顶栏那个对端时
     // (一对一里收信方就是顶栏那个对端, 不再重复写)。
     var dst = mine
-      ? (m.to && m.to !== 'human:' && m.to !== (group ? pairPeer(convOf(CONV)) : CONV.slice(2)) ? m.to : '')
-      : (m.to !== ROLE && group ? m.to : '');
+      ? (m.to && m.to !== 'human:' && m.to !== peer ? m.to : '')
+      : (m.to !== me && group ? m.to : '');
     // 宽屏写在气泡对面的空白里 (.dest, 在换视角的门里但不吃点击); 窄屏空白太窄, 退回消息头 (.to)。
-    var to = dst ? '<span class="to">→ ' + avBtn(m.to, m.toLabel) + nm(m.to, m.toName, true) + '</span>' : '';
+    var to = dst ? '<span class="to">→ ' + avBtn(m.to) + nm(m.to, '', true) + '</span>' : '';
     // 箭头顺着「发话人 → 收件人」: 气泡是发话人, 描述在哪一侧箭头就背着气泡指向哪一侧 ——
     // 我的消息描述在左 (🦉 .x ←), 别人的在右 (→ 🦉 .x)。
     var dest = dst
       ? '<span class="dest" aria-hidden="true">' + (mine ? '' : '<i class="arr">→</i>') +
-        '<span class="dav">' + esc(m.toLabel || roleLabel(dst)) + '</span><span class="dn">' + esc(nameOf(dst)) + '</span>' +
+        '<span class="dav">' + esc(roleLabel(dst)) + '</span><span class="dn">' + esc(nameOf(dst)) + '</span>' +
         (mine ? '<i class="arr">←</i>' : '') + '</span>'
       : '';
     var priv = !m.channel && group ? '<span class="ch priv">私聊</span>' : '';
-    // 本轮的账 (呼吸点 + 模型 / token / 耗时) 跟在时刻后面 —— 片段是服务端渲染好的。
-    var stat = m.meta ? '<span class="mstat">' + m.meta + '</span>' : '';
+    // 本轮的账 (呼吸点 + 模型 / 上下文 / 耗时) 跟在时刻后面 —— 片段是服务端渲染好的。
+    // 模型 / ctx 只在多方会话里有用 (分得清谁跑的什么模型); 两个 role 之间的对话里整行挂 .two, 头像行 (.mstat)、
+    // 终句气泡的时间行 (.say-cap) 与移交行的账 (.ho-acct) 里藏掉这两样, 耗时、呼吸点与回执留着。
+    var c = convOf(CONV);
+    var two = !group || !!pairPeer(c) || (!!c && c.kind === 'all' && c.peers.length === 1);
+    var stat = m.meta ? '<span class="mstat">' + jobChips(m.meta) + '</span>' : '';
     var who = mine
-      ? to + stamp(m.ts) + stat + avBtn(m.from, m.fromLabel)
-      : avBtn(m.from, m.fromLabel) + nm(m.from, m.fromName, true) + to + priv + stamp(m.ts) + stat;
+      ? to + stamp(m.ts) + stat + avBtn(m.from)
+      : avBtn(m.from) + nm(m.from, '', true) + to + priv + stamp(m.ts) + stat;
     var sw = canSwitch(other);
     var flip = '<button class="flip" data-r="' + esc(other) + '"' + (sw ? '' : ' disabled tabindex="-1"') +
       ' aria-label="' + esc(sw ? '切到 ' + nameOf(other) + ' 的视角' : '') + '">' +
       dest + (sw ? '<span class="fi"><span class="fn">' + esc(nameOf(other)) + '</span>' + CHEVRON + '</span>' : '') + '</button>';
-    return '<div class="mrow ' + (mine ? 'mine' : 'them') + '" data-id="' + esc(m.id) + '" data-turn="' + esc(m.turnId || m.id) + '" data-ts="' + m.ts + '"' +
-      (m.ping ? ' data-ping="1" data-ping-who="' + esc(m.dir === 'in' ? m.toName : m.fromName) + '"' : '') + ' data-sig="' + esc(m.sig) + '" data-stale-at="' + (m.staleAt || 0) + '">' +
-      '<div class="mcol"><div class="mwho">' + who + '</div><div class="mb">' + (m.dir === 'out' ? signCut(m.html, m.from, m.fromName) : m.html) + '</div></div>' +
+    return '<div class="mrow ' + (mine ? 'mine' : 'them') + (two ? ' two' : '') + '" data-id="' + esc(m.id) + '" data-turn="' + esc(m.turnId || m.id) + '" data-ts="' + m.ts + '"' +
+      (m.ping ? ' data-ping="1" data-ping-who="' + esc(roleName(m.dir === 'in' ? m.to : m.from)) + '"' : '') + ' data-sig="' + esc(m.sig) + '" data-stale-at="' + (m.staleAt || 0) + '">' +
+      '<div class="mcol"><div class="mwho">' + who + '</div><div class="mb">' + jobChips(m.dir === 'out' ? signCut(m.html, m.from) : m.html) + '</div></div>' +
       flip +
     '</div>';
   };
@@ -880,7 +1217,7 @@
   };
 
   var bindRow = function (el) {
-    bindGo(el, '.flip[data-r]:not([disabled]), .mwho .go[data-r], .tg-cut .go[data-r], .tg-mark .go[data-r]');
+    bindGo(el, '.flip[data-r]:not([disabled]), .mwho .go[data-r], .tg-cut .go[data-r], .tg-mark .go[data-r], .tg-job .go[data-r]');
   };
   var rowNode = function (id) {
     var list = inner.querySelectorAll('.mrow');
@@ -903,6 +1240,43 @@
     };
   };
 
+  var moreBtn = function (d) {
+    return d.truncated ? '<button class="more-btn" id="more">载入更早的 ' + (d.older != null ? d.older : d.total - d.msgs.length) + ' 条</button>' : '';
+  };
+  var bindMore = function () {
+    var btn = $('#more');
+    if (btn) btn.onclick = function () { btn.textContent = '载入中…'; btn.disabled = true; loadOlder(); };
+  };
+  // 载入更早: 以此刻最早那一行为游标往前取一页, 插在最前面; 视口锚住原来顶上那一行。
+  var loadOlder = function () {
+    var gen = S.gen, first = inner.querySelector('.mrow');
+    if (!first) return Promise.resolve();
+    var cursor = { before: first.getAttribute('data-id'), beforeTs: first.getAttribute('data-ts') };
+    // 失败就把按钮还原, 别让它永远停在「载入中…」; 换了窗口 (gen 变了) 按钮已随旧内容消失。
+    var retry = function () {
+      var b = $('#more'); if (gen === S.gen && b) { b.disabled = false; b.textContent = '载入失败, 点此重试'; }
+    };
+    return api('api/msgs', viewParams(cursor)).then(function (d) {
+      if (gen !== S.gen) return;
+      if (!d.ok) return retry();
+      var keep = keepView();
+      // 游标切不出「之前」(服务端回 reset): 退回整窗全量重载, 视口照旧锚住。
+      if (d.reset) return loadMsgs('0', keep);
+      var old = $('#more'); if (old) old.remove();
+      // 按时刻兜底的那一页可能带回同一毫秒、已经画着的几条 —— 按 id 去重。
+      var fresh = d.msgs.filter(function (m) { return !rowNode(m.id); });
+      fresh.forEach(function (m) { S.frags[m.id] = m; });
+      unfoldPings(inner);
+      var page = frag(moreBtn(d) + fresh.map(rowHTML).join(''));
+      bindRow(page); render(page);
+      while (page.lastChild) inner.insertBefore(page.lastChild, inner.firstChild);
+      bindMore();
+      foldPings(inner);
+      expireRows();
+      if (keep) keep();
+    }).catch(retry);
+  };
+
   // land: 换视角时由它来定位 (锚住一条旧消息), 返回 false 才照常吸底。
   var loadMsgs = function (limit, land) {
     var gen = S.gen;
@@ -912,16 +1286,14 @@
       S.frags = {};
       d.msgs.forEach(function (m) { S.frags[m.id] = m; });
       if (!d.msgs.length) { inner.innerHTML = '<div class="empty">这里还没有消息</div>'; return; }
-      var more = d.truncated
-        ? '<button class="more-btn" id="more">载入更早的 ' + (d.total - d.msgs.length) + ' 条</button>'
-        : '';
-      inner.innerHTML = more + d.msgs.map(rowHTML).join('');
-      var btn = $('#more');
-      if (btn) btn.onclick = function () { btn.textContent = '载入中…'; loadMsgs('0', keepView()); };
+      inner.innerHTML = moreBtn(d) + d.msgs.map(rowHTML).join('');
+      bindMore();
       bindRow(inner);
       render(inner);
       foldPings(inner);
       expireRows();
+      settleAbove();
+      applyFold(inner);
       if (land && land()) return;
       S.pinned = true; toBottom(true);
       // CDN 字体/代码高亮加载完会改变高度, 再吸一次底。
@@ -960,6 +1332,8 @@
       }
     }
     foldPings(inner);
+    settleAbove();
+    applyFold(inner);
     if (stick) toBottom(true);
   };
 
@@ -972,6 +1346,9 @@
       g.setAttribute('data-stale-at', '0');
       g.querySelectorAll('.tg-dot').forEach(function (d) { d.classList.remove('live'); });
       g.querySelectorAll('.typing').forEach(function (t) { t.remove(); });
+      // 静默到点 = 这一轮结束, 末尾那个过程框也不再是「进行中」。
+      g.querySelectorAll('.steps').forEach(settle);
+      applyFold(g);
     });
   };
 
@@ -980,16 +1357,20 @@
   // 收下摘要 (视角、会话列表、落地窗口) 与按它画页头侧栏分开: 换视角整窗重拉时, 画要等到新行到手的同一帧。
   var takeRole = function (d) {
     R.at = d.at || Date.now(); R.recvAt = Date.now();
-    R.role = d.role; R.sessions = d.sessions || []; R.convs = d.convs || [];
+    R.role = d.role; R.sessions = d.sessions || []; R.convs = d.convs || []; R.chatKeys = d.chatKeys;
     SESSION = d.session || '';
-    R.relations = !!d.relations; R.schedules = d.schedules || 0; R.plan = d.plan || null;
+    R.relations = !!d.relations; R.schedules = d.schedules || 0; R.plan = d.plan || null; R.inflight = d.inflight || [];
+    // 工单的账变了 (或比消息晚到): 已上屏的工单 badge 按新账重填一遍 —— 片段里只写了工单号。
+    var jx = JSON.stringify(d.jobIndex || {});
+    if (jx !== R.jobIndexSig) { R.jobIndexSig = jx; R.jobIndex = d.jobIndex || {}; refillJobChips(); }
+    R.charter = d.charter || null;
     R.stats = d.stats || null; R.winStats = d.winStats || null;
     ROLE = d.role.id;
-    learn(d.role.id, d.role.name, d.role.label);
-    R.convs.forEach(function (c) {
-      if (c.peer) learn(c.peer, c.name, c.label);
-      c.subs.forEach(function (s) { learn(s.role, s.name, s.label); });
-    });
+    var renamed = [learn(d.role.id, d.role.name, d.role.label, true)].concat.apply([], R.convs.map(function (c) {
+      return [c.peer ? learn(c.peer, c.name, c.label, true) : false].concat(c.subs.map(function (s) { return learn(s.role, s.name, s.label, true); }));
+    })).some(Boolean);
+    // 名册晚到 (svr 刚起) 或有人改了名: 已上屏的行按新名字就地重包, 正文不动。
+    if (renamed && inner.querySelector('.mrow')) rewrapRows(false);
     // 没带 conv 的链接 (群里点名字进来) 落在服务端挑的窗口上, 连同它挑的「只看我与谁」;
     // 手里的 conv 失效则只退回整个会话。
     if (!CONV || !convOf(CONV)) { WITH = CONV ? '' : d['with'] || ''; CONV = d.conv || ''; }
@@ -1034,6 +1415,7 @@
       if (land) takeRole(d); else applyRole(d);
       syncUrl();
       if (WORLD || VIEW === 'plan') loadWorld();
+      if (VIEW === 'charter') loadCharter();
       return loadMsgs(undefined, land && function () { paintRole(); return land(); }).then(function () {
         if (land && !inner.querySelector('.mrow')) paintRole();   // 空窗口不走 land, 页头照样要画
         connect();
@@ -1042,8 +1424,8 @@
   };
 
   // land: 见 loadMsgs —— 搜索跳到一条具体消息时由它来定位, 不吸底。
-  var selectConv = function (key, withRole, land) {
-    CONV = key; WITH = withRole || '';
+  var selectConv = function (key, withRole, land, eye) {
+    CONV = key; WITH = withRole || ''; EYE = eye && eye !== ROLE ? eye : '';
     reveal();
     if (VIEW !== 'msgs') setView('msgs');
     app.classList.add('reading');
@@ -1064,11 +1446,11 @@
     W.treeFor = '';
     var keep = CONV && CONV.indexOf('c:') === 0 ? CONV : '';
     var from = ROLE;
-    // 整个频道 / 两人私聊的消息集合与视角无关 —— 只有 with 与 session 按 role 过滤。
-    var same = VIEW === 'msgs' && !WITH && !SESSION && (keep || CONV.indexOf('p:') === 0);
-    // 群里「只看我与 X」时换过去, 对面看到的是「只看我与 from」—— 同一段往来, 选中只看而不是整个群。
-    var withBack = keep && WITH ? from : '';
-    ROLE = id; WITH = withBack; SESSION = '';
+    // 群里「我与 X」时换到 X, 对面看到的是「X 与 from」—— 同一段往来, 选中这一对而不是整个群。
+    var withBack = keep && WITH === id ? from : '';
+    // 整个频道 / 两人私聊 / 群里的一对, 消息集合都与视角无关 —— 集合没变就就地翻面。
+    var same = VIEW === 'msgs' && (!WITH || withBack) && !SESSION && (keep || CONV.indexOf('p:') === 0);
+    ROLE = id; WITH = withBack; SESSION = ''; EYE = '';
     CONV = keep || (CONV.indexOf('p:') === 0 ? 'p:' + from : '');
     // 停在关系图时换视角 = 选中新视角自己那张卡片: 先开它的全部对话 (不留旧选中 / 空白),
     // 新树画出来知道它连着谁后, renderWorld 再收窄成那张卡片的窗口 (W.pickSelf)。
@@ -1186,6 +1568,21 @@
       if (nb) nb.replaceWith(k.mb);
     });
   };
+  /** 已上屏的行拿手里的片段就地重包 (左右、署名), 已渲染的正文整块搬过去。dropMarks: 断点一并撤下。 */
+  var rewrapRows = function (dropMarks) {
+    unfoldPings(inner);
+    [].slice.call(inner.querySelectorAll('.mrow')).forEach(function (row) {
+      var m = S.frags[row.getAttribute('data-id')];
+      if (!m || (dropMarks && m.dir === 'mark')) { if (dropMarks) row.remove(); return; }
+      var next = frag(rowHTML(m)).firstElementChild;
+      var ob = row.querySelector('.mb'), nb = next.querySelector('.mb');
+      if (ob && nb) nb.replaceWith(ob);
+      row.replaceWith(next);
+      bindRow(next);
+    });
+    foldPings(inner);
+    expireRows();
+  };
   /** 同一窗口换视角: 拿手里的片段就地重包左右, 已渲染的正文整块搬过去。
    *  先等 role 摘要到手、页头侧栏按新视角画完再重包 —— 页头换了高度 (人没有职责行、有的 wizard 有),
    *  在动画起跑之后才变, 整列就会在半路被顶一下。旧行在这几十毫秒里原样留着。 */
@@ -1196,19 +1593,8 @@
     api('api/role', viewParams()).then(function (d) {
       if (!d.ok || gen !== S.gen) return;
       applyRole(d);
-      unfoldPings(inner);
-      [].slice.call(inner.querySelectorAll('.mrow')).forEach(function (row) {
-        var m = S.frags[row.getAttribute('data-id')];
-        // 断点 (/clear /new) 是旧视角 role 自己的, 新视角的由下面补拉。
-        if (!m || m.dir === 'mark') { row.remove(); return; }
-        var next = frag(rowHTML(m)).firstElementChild;
-        var ob = row.querySelector('.mb'), nb = next.querySelector('.mb');
-        if (ob && nb) nb.replaceWith(ob);
-        row.replaceWith(next);
-        bindRow(next);
-      });
-      foldPings(inner);
-      expireRows();
+      // 断点 (/clear /new) 是旧视角 role 自己的, 新视角的由下面补拉。
+      rewrapRows(true);
       landFlip(snap);
       connect();
       return api('api/msgs', viewParams());
@@ -1343,10 +1729,6 @@
 
   // F.vis: 只看相关时画哪些 (见 visibleOf); 没有 = 全画。
   var shows = function (F, t) { return !F.vis || !!F.vis[t]; };
-  var countSub = function (F, t) {
-    return (F.kids[t] || []).filter(function (k) { return shows(F, k); })
-      .reduce(function (n, k) { return n + 1 + countSub(F, k); }, 0);
-  };
   var chainUp = function (F, t, seen) {
     seen = seen || {};
     var p = F.pp[t];
@@ -1359,11 +1741,13 @@
   var labelHTML = function (p) {
     if (!p) return '';
     return '<span class="tlab"' + (p.jobs.length ? ' title="经手的工单: ' + esc(p.jobs.join(' ')) + '"' : '') + '>' +
-      Object.keys(KIND).filter(function (k) { return p.kinds[k]; }).map(function (k) {
+      // 工单这一种关系由 📋 那一枚说 (可点, 列的就是这几张), 不再另挂「工单 ×N」重复一遍。
+      Object.keys(KIND).filter(function (k) { return p.kinds[k] && !(k === 'job' && p.jobs.length); }).map(function (k) {
         return '<span class="ek ' + k + '" title="' + KIND[k].tip + '">' + KIND[k].mark +
           (!LINEAGE[k] ? ' ×' + p.kinds[k] : '') + '</span>';
       }).join('') +
-      (p.cross ? '<span class="ek cross" title="跨群的关系">⇄ 跨群</span>' : '') + '</span>';
+      (p.cross ? '<span class="ek cross" title="跨群的关系">⇄ 跨群</span>' : '') +
+      (p.jobs.length ? '<span class="ek jmk" data-jobs="' + esc(p.jobs.join(' ')) + '" title="' + esc('经手的工单: ' + p.jobs.join(' ') + ' —— 点开') + '">📋' + (p.jobs.length > 1 ? ' ×' + p.jobs.length : '') + '</span>' : '') + '</span>';
   };
   // 一条边的主色: 家谱优先, 决定树上那道线的颜色。
   var domKind = function (p) {
@@ -1430,78 +1814,86 @@
   var byCard = function (F) {
     return function (a, b) { return recentFirst(cardGlance(F, a), cardGlance(F, b)); };
   };
-  var tnodeHTML = function (F, n, folded) {
+  // 关系图: 它与 N 个 role 有关系, 但它们的卡片不在这一档画出来的图上 (画着就不算, 连没连线都一样)。
+  // 关系 = 服务端裁节点之前的全部对端 (node.rels) ∪ 这段范围里画得出的边 —— 前者补上没下发的节点,
+  // 后者兜住老 svr 没给 rels 的情况。F.on = 这一档画出来的卡片, 「相关 | 全部」各算各的。
+  var otherRels = function (F, t) {
+    var on = F.on || {};
+    var all = Object.keys(F.pairs).reduce(function (m, k) {
+      var p = F.pairs[k], o = p.from === t ? p.to : p.to === t ? p.from : '';
+      if (o) m[o] = 1;
+      return m;
+    }, ((nodeOf(t) || {}).rels || []).reduce(function (m, o) { m[o] = 1; return m; }, {}));
+    var n = Object.keys(all).filter(function (o) { return o !== t && !on[o]; }).length;
+    return moreTag(n, nameOf(t) + ' 还和 ' + n + ' 个 role 有关系, 不在这张图上, 切到它的视角可见');
+  };
+  var tnodeHTML = function (F, n) {
     var me = n.target === ROLE;
-    var tail = folded ? '<span class="tfold" title="它下面还有 ' + folded + ' 个, 切到它的视角可见">+' + folded + '</span>' : '';
     var p = F.pp[n.target];
-    var row = roleRow(n.target, n.name, n.label, cardGlance(F, n.target), n, tail);
+    var row = roleRow(n.target, n.name, n.label, cardGlance(F, n.target), n, '', otherRels(F, n.target));
     var via = F.vis && F.vis[n.target] === 'via';
-    return '<button class="ci tci' + (me ? ' me' : '') + (via ? ' via' : '') + (F.links && CONV === talkKey(F.links, n.target) ? ' on' : '') + '" data-t="' + esc(n.target) + '"' +
-      (via ? ' title="' + esc(nameOf(n.target) + ' 没和 ' + nameOf(ROLE) + ' 对过话, 留着是为了连到它下面对过话的') + '"' : '') + '>' +
+    var jin = F.job && (F.job.in[n.target] ? ' jin' : ' jout');
+    return '<button class="ci tci' + (me ? ' me' : '') + (via ? ' via' : '') + (jin || '') + (F.links && CONV === talkKey(F.links, n.target) ? ' on' : '') + '" data-t="' + esc(n.target) + '"' +
+      (via ? ' title="' + esc(nameOf(n.target) + ' 和 ' + nameOf(ROLE) + ' 没有直接关系, 留着是为了连到它下面有关系的') + '"' : '') + '>' +
       labelHTML(p) + row + '</button>';
   };
 
-  // keep(父, 孩子) → 'full' 整枝 / 'leaf' 只画它自己 / '' 不画; 不给 keep = 全画。shown 收集画出来的节点。
-  var treeHTML = function (F, t, depth, keep, leaf, shown, seen, z) {
+  // 只画 F.vis 里的 (没有 = 全画)。shown 收集画出来的节点。
+  var treeHTML = function (F, t, depth, shown, seen, z) {
     var n = nodeOf(t);
     if (!n || seen[t] || depth > 32) return '';
     seen[t] = 1;
     shown.push(n);
-    var kids = leaf ? [] : (F.kids[t] || []).filter(function (k) { return shows(F, k) && (!keep || keep(t, k)); }).sort(byCard(F));
-    return '<li class="' + domKind(F.pp[t]) + '"' + (z ? ' style="z-index:' + z + '"' : '') + '>' + tnodeHTML(F, n, leaf ? countSub(F, t) : 0) +
+    var kids = (F.kids[t] || []).filter(function (k) { return shows(F, k); }).sort(byCard(F));
+    // 选中工单时: 两端都是它的当事人 (含开单者) 的那道线才亮。
+    var jl = F.job ? (F.job.in[t] && F.pp[t] && F.job.in[F.pp[t].from] ? ' jline' : ' jdim') : '';
+    return '<li class="' + domKind(F.pp[t]) + jl + '"' + (z ? ' style="z-index:' + z + '"' : '') + '>' + tnodeHTML(F, n) +
       // 兄弟的线共用一段竖干, 越往下的越长: 短的叠在上面 (z 随序号递减), 每条线的末段都看得见自己的颜色。
       (kids.length ? '<ul>' + kids.map(function (k, i) {
-        return treeHTML(F, k, depth + 1, keep, keep && keep(t, k) === 'leaf', shown, seen, kids.length - i);
+        return treeHTML(F, k, depth + 1, shown, seen, kids.length - i);
       }).join('') + '</ul>' : '') +
       '</li>';
   };
-  // 只看相关: 主父亲链一条直线下来, 到它自己再整枝展开; 同一个主父亲下的兄弟只画本人。
-  var focusKeep = function (path) {
-    var on = path.reduce(function (m, t) { m[t] = 1; return m; }, {});
-    var parent = path[path.length - 2];
-    return function (t, k) {
-      if (!on[t] || t === ROLE) return 'full';
-      return on[k] ? 'full' : t === parent ? 'leaf' : '';
-    };
-  };
-
   // 关系图替换的是侧栏的会话列表 —— 右边照旧是选中的那段对话。
-  // 只看相关时画谁: 视角自己 + 和视角对过话的 ('talk'); 它们通向根的主父亲链上没对过话的祖先
-  // 留作连接 ('via', 画淡) —— 抹掉它, 有对话的后代就从家谱上脱开, 成了一棵来历不明的孤树。
-  var talks = function (F, a, b) {
-    var p = F.pairs[a + '\u0000' + b];
-    return !!p && !!(p.kinds.peer || p.kinds.graph);
-  };
+  // 只看相关时画谁: 视角自己 + 和视角有直接关系的 (任一种, 任一方向; 'rel'); 它们通向根的主父亲链上
+  // 与视角无关的祖先留作连接 ('via', 画淡) —— 抹掉它, 有关系的后代就从家谱上脱开, 成了一棵来历不明的孤树。
   var visibleOf = function (F) {
-    var keep = Object.keys(F.ends).filter(function (t) { return t === ROLE || talks(F, ROLE, t) || talks(F, t, ROLE); });
-    var vis = keep.reduce(function (m, t) { m[t] = 'talk'; return m; }, {});
-    if (!vis[ROLE]) vis[ROLE] = 'talk';
+    var keep = Object.keys(F.ends).filter(function (t) { return t === ROLE || F.pairs[ROLE + '\u0000' + t] || F.pairs[t + '\u0000' + ROLE]; });
+    var vis = keep.reduce(function (m, t) { m[t] = 'rel'; return m; }, {});
+    if (!vis[ROLE]) vis[ROLE] = 'rel';
     keep.forEach(function (t) { chainUp(F, t).forEach(function (u) { if (!vis[u]) vis[u] = 'via'; }); });
     return vis;
   };
 
+  // 正在看一张工单 (CONV = j:<id>) 时, 它的当事人; 选中态就是 CONV 本身, 不另记一份。
+  var jobOfConv = function () {
+    var id = CONV.indexOf('j:') === 0 ? CONV.slice(2) : '';
+    var j = id && (W.jobs || []).filter(function (x) { return x.id === id; })[0];
+    return j ? { id: id, in: j.members.reduce(function (m, mm) { m[mm.target] = 1; return m; }, (function (o) { o[j.owner] = 1; return o; })({})) } : null;
+  };
+
   var renderWorld = function () {
     if (!WORLD) return;
     if (!W.loaded) { convsEl._tree = ''; convsEl.innerHTML = '<div class="empty">加载中…</div>'; return; }
     var rg = rangeOf();
     var F = forestOf(relations(rg));
+    F.job = jobOfConv();
     var me = nodeOf(ROLE);
     var all = W.treeAll || !me;
     var shown = [];
     var path = me ? chainUp(F, ROLE) : [];
-    // 和视角之间没有对话的关系只在「看全部」里画。
+    // 和视角没有直接关系的只在「看全部」里画。
     F.vis = all ? null : visibleOf(F);
     var draw = function (into) {
-      return all
-        ? F.roots.slice().sort(function (a, b) {
-            var mine = path[0];
-            return (b === mine) - (a === mine) || byCard(F)(a, b);
-          }).map(function (r) { return treeHTML(F, r, 0, null, false, into, {}); }).join('')
-        : treeHTML(F, path[0], 0, focusKeep(path), false, into, {});
+      return F.roots.filter(function (r) { return shows(F, r); }).sort(function (a, b) {
+        var mine = path[0];
+        return (b === mine) - (a === mine) || byCard(F)(a, b);
+      }).map(function (r) { return treeHTML(F, r, 0, into, {}); }).join('');
     };
     // 两遍: 先量出画了谁 (卡片的窗口要知道它在图上连着谁), 再带着连线画 —— 选中态也就进了 html。
     draw(shown);
     F.links = linksOf(F, shown);
+    F.on = shown.reduce(function (m, n) { m[n.target] = 1; return m; }, {});
     var keys = shown.map(function (n) { return talkKey(F.links, n.target); }).join('\n');
     if (keys !== W.gKeys) { W.gKeys = keys; loadGlance(); }
     // 换视角后的第一张新树: 世界快照与摘要都已是新视角的, 才知道它自己那张卡片连着谁。
@@ -1514,12 +1906,12 @@
     var span = rg ? (rg.s === R.sessions[R.sessions.length - 1] ? '最新 session' : 'session ' + fmtClock(rg.from)) : '全部时间';
     var alone = !all && shown.length < 2;
     var html = '<div class="tview">' +
-      '<h2>关系图<span title="在名片里的 session 下拉切换范围">' + esc(span) + ' · ' + (all ? Object.keys(F.ends).length : shown.length) + ' 个</span>' +
+      '<h2>关系<span title="在名片里的 session 下拉切换范围">' + esc(span) + ' · ' + (all ? Object.keys(F.ends).length : shown.length) + ' 个</span>' +
         (W.degraded ? '<span class="warn" title="没拿到 wizard 注册表 (svr 还没收到 daemon 的快照), 只画观测到的往来">名册缺席</span>' : '') +
-        (me ? '<button class="tall" title="' + (all ? '只留它的上游链、它自己、它的下游与同源兄弟' : '画出范围内所有有关系的 wizard') + '">' +
-          (all ? '只看相关' : '看全部') + '</button>' : '') + '</h2>' +
-      (alone ? '<div class="tsolo">' + esc(nameOf(ROLE)) + (rg ? ' 在这段 session 里' : '') + ' 没和谁对过话</div>' : '') +
-      (shown.length ? '<ul class="tree' + (all ? ' all' : '') + '">' + trees + '</ul>' : '<div class="pempty">这段时间里没有任何关系</div>') +
+        (me ? '<button class="vt" data-tall="' + (all ? 'rel' : 'all') + '" title="' +
+          (all ? '画出范围内所有有关系的 wizard (点击改为只画相关的)' : '只画它自己、和它有直接关系的, 以及连到它们的上游链 (点击改为画全部)') + '">' + (all ? '全部' : '相关') + '</button>' : '') + worldToggle() + '</h2>' +
+      (alone ? '<div class="tsolo">' + esc(nameOf(ROLE)) + (rg ? ' 在这段 session 里' : '') + ' 没和谁有关系</div>' : '') +
+      (shown.length ? '<ul class="tree' + (all ? ' all' : '') + (F.job ? ' jsel' : '') + '">' + trees + '</ul>' : '<div class="pempty">这段时间里没有任何关系</div>') +
     '</div>';
     // 心跳每 3s 重算一次 (状态灯 / 几分钟前) —— 没变就不碰 DOM, 免得蹭掉悬停与滚动。
     if (convsEl._tree === html && convsEl.querySelector('.tview')) return;
@@ -1529,8 +1921,14 @@
       el.onclick = function () { selectConv(talkKey(F.links, el.getAttribute('data-t')), ''); };
     });
     bindGo(convsEl);
-    var tall = convsEl.querySelector('.tall');
-    if (tall) tall.onclick = function () { W.treeAll = !W.treeAll; W.treeFor = ''; renderWorld(); };
+    convsEl.querySelectorAll('[data-tall]').forEach(function (b) {
+      b.onclick = function () {
+        var on = b.getAttribute('data-tall') === 'all';
+        if (on === !!W.treeAll) return;
+        W.treeAll = on; W.treeFor = ''; renderWorld();
+      };
+    });
+    bindWorldToggle(convsEl);
     var cur = convsEl.querySelector('.tci.me');
     if (cur && W.treeFor !== ROLE) { W.treeFor = ROLE; cur.scrollIntoView({ block: 'nearest' }); }
   };
@@ -1636,11 +2034,6 @@
   // 日程跟着 wizard 走: 只列归当前 role 的定时任务, 与它有关的工单 (它开的 / 它在里面)。
   var renderPlan = function () {
     var ss = (W.schedules || []).filter(function (x) { return (x.owner || x.createdBy || x.target) === ROLE; });
-    var js = (W.jobs || []).filter(function (j) {
-      return j.owner === ROLE || j.members.some(function (mm) { return mm.target === ROLE; });
-    });
-    var open = js.filter(function (j) { return j.status === 'open'; });
-    var closed = js.filter(function (j) { return j.status !== 'open'; });
     var bad = ss.filter(broken);
     var next = ss[0];
     var stat = function (k, v, sub, tone) {
@@ -1649,37 +2042,14 @@
     var stats = '<div class="pstats">' +
       stat('下一次', next ? esc(fmtHM(next.nextAt)) : '—', next ? esc(fmtIn(next.nextAt) + ' · ' + (next.note || next.id)) : '没有排期') +
       stat('定时任务', ss.length, ss.length ? esc(ss.filter(function (x) { return x.hasGate; }).length + ' 条带 gate') : '—') +
-      stat('工单', open.length + '<small> / ' + js.length + '</small>', '进行中 / 全部') +
       (bad.length ? stat('出错', bad.length, '见下方红色卡片', 'bad') : '') +
     '</div>';
 
-    var jobRow = function (j) {
-      return '<div class="jrow' + (j.status === 'open' ? ' open' : '') + '">' +
-        '<div class="jh"><span class="jst">' + (j.status === 'open' ? '进行中' : '已收工') + '</span>' +
-          '<span class="jt">' + esc(j.title) + '</span>' +
-          '<span class="jid">' + esc(j.id) + '</span>' +
-          '<span class="jts">' + esc(fmtAgo(j.closedAt || j.openedAt)) + '</span></div>' +
-        '<div class="jm">' + (j.members.length
-          ? j.members.map(function (mm) {
-              var n = nodeOf(mm.target);
-              return '<span class="jmm">' + wizChip(mm.target) + stTag(n) +
-                (mm.spawned ? '<i class="tmp" title="为这个工单临时生的 wizard (分身或子 wizard), 收工时回收">临时</i>' : '') +
-                '<em>' + esc((mm.task || '').split('\n')[0].slice(0, 90)) + '</em></span>';
-            }).join('')
-          : '<span class="jmm none">还没有成员</span>') + '</div>' +
-        (j.summary ? '<div class="jsum">' + esc(j.summary.slice(0, 300)) + '</div>' : '') +
-      '</div>';
-    };
-
     var html = stats +
       '<section class="psec">' +
         '<h3>定时任务<span>' + ss.length + '</span></h3>' +
         (ss.length ? renderStrip(ss) + bad.concat(ss.filter(function (x) { return !broken(x); })).map(taskHTML).join('')
           : '<div class="pempty">' + esc(roleName(ROLE)) + ' 名下没有定时任务 —— 让它 schedule_task 排一个</div>') +
-      '</section>' +
-      '<section class="psec">' +
-        '<h3>工单<span>' + open.length + ' 开 / ' + closed.length + ' 收</span></h3>' +
-        (js.length ? open.concat(closed).map(jobRow).join('') : '<div class="pempty">没有工单 —— 一次派出两个以上 wizard 时 open_job 开一个</div>') +
       '</section>';
     // 心跳每 3s 重画一次 —— 没变就不碰 DOM (展开着的 prompt、悬停的提示都留着)。
     if (planEl._html === html) return;
@@ -1706,11 +2076,20 @@
   // 不经过 detail store。改成"看得见才轮询": 不在关系/日程栏、或者页面在后台, 就一次都不请求。
   var WORLD_MS = 6000;
   var worldTimer = null;
+  // 带上次的 ETag 问: 304 = 名册没变, 不重画 (卡片窗口的 glance 照样顺带刷新)。
   var loadWorld = function () {
     var asked = ROLE;
-    return api('api/world', { role: asked }).then(function (d) {
-      if (!d.ok) return;
-      W.at = d.at; W.loaded = true; W.role = asked;
+    var p = new URLSearchParams({ role: asked, id: TOKEN });
+    var tag = W.role === asked ? W.etag : '';
+    var etag = '';
+    return fetch('api/world?' + p.toString(), { cache: 'no-store', headers: tag ? { 'If-None-Match': tag } : {} }).then(function (r) {
+      if (r.status === 304) { if (asked === ROLE) loadGlance(); return null; }
+      etag = r.headers.get('etag') || '';
+      return r.json();
+    }).then(function (d) {
+      // 迟到的回包 (这期间已换了视角) 丢掉, 免得盖掉新视角的图; etag 与 role 成对记。
+      if (!d || !d.ok || asked !== ROLE) return;
+      W.at = d.at; W.loaded = true; W.role = asked; W.etag = etag;
       W.nodes = d.nodes || []; W.edges = d.edges || []; W.chats = d.chats || [];
       W.jobs = d.jobs || []; W.schedules = d.schedules || []; W.degraded = !!d.degraded;
       renderWorld();
@@ -1720,7 +2099,7 @@
   };
   var pollWorld = function () {
     if (worldTimer) { clearInterval(worldTimer); worldTimer = null; }
-    if (VIEW === 'msgs' && !WORLD) return;
+    if (VIEW !== 'plan' && !WORLD) return;
     worldTimer = setInterval(function () {
       if (!document.hidden) loadWorld();
     }, WORLD_MS);
@@ -1730,11 +2109,15 @@
     VIEW = v;
     thread.hidden = v !== 'msgs';
     $('#pane-plan').hidden = v !== 'plan';
+    charterPane().hidden = v !== 'charter';
+    jobsPane().hidden = v !== 'jobs';
     app.classList.toggle('outer', v !== 'msgs');
     // 手机上关系/日程占满主区 —— 进入即阅读态。
     if (v !== 'msgs') app.classList.add('reading');
     renderRole(); renderHead(); renderUsage();
     if (v === 'msgs') { toBottom(true); renderConvs(); }
+    else if (v === 'charter') loadCharter();
+    else if (v === 'jobs') renderJobList();
     else {
       if (!W.loaded) { planEl._html = ''; planEl.innerHTML = '<div class="empty">加载中…</div>'; }
       else renderPlan();
@@ -1742,6 +2125,93 @@
     }
     pollWorld();
   };
+  // ── 宪章: 出生快照, 不轮询 —— 换视角或重新点开时取一次。 ──
+  // 面板由脚本挂载: 外壳 HTML 要等服务重启才换, 老外壳里没有这一格。
+  var charterPane = function () {
+    var p = $('#pane-charter');
+    if (p) return p;
+    p = document.createElement('div');
+    p.className = 'pane'; p.id = 'pane-charter'; p.hidden = true;
+    p.innerHTML = '<div class="plan-in" id="charter-in"></div>';
+    $('#pane-plan').after(p);
+    return p;
+  };
+  var jobsPane = function () {
+    var p = $('#pane-jobs');
+    if (p) return p;
+    p = document.createElement('div');
+    p.className = 'pane'; p.id = 'pane-jobs'; p.hidden = true;
+    p.innerHTML = '<div class="plan-in jlist" id="jobs-in"></div>';
+    $('#pane-plan').after(p);
+    return p;
+  };
+  // 视角开的或在里面的工单: 进行中 (最近有动静的在前) / 已收工 (淡一档, 最近收的在前)。一行与会话列表同一个 convItem。
+  var renderJobList = function () {
+    var el = jobsPane().firstChild;
+    var js = jobListRows();
+    var open = js.filter(function (c) { return c.job.status === 'open'; }).sort(recentFirst);
+    var closed = js.filter(function (c) { return c.job.status !== 'open'; }).sort(recentFirst);
+    var sec = function (title, list, cls) {
+      return '<h2>' + title + '<span>' + list.length + '</span></h2>' + '<div class="' + cls + '">' + list.map(convItem).join('') + '</div>';
+    };
+    var html = js.length
+      ? sec('进行中', open, 'jopen') + (closed.length ? sec('已收工', closed, 'jclosed') : '')
+      : JOB_ONLY
+        ? '<div class="pempty">这几张工单已经不在账上了 (收工满 24 小时会清掉) —— ' + esc(JOB_ONLY.join(' ')) + '</div>'
+        : '<div class="pempty">' + esc(nameOf(ROLE)) + ' 没有开过、也不在任何工单里 —— 一次派出两个以上 wizard 时 open_job 开一个 (收工满 24 小时的不再列出)</div>';
+    if (el._html === html) return;
+    el._html = html; el.innerHTML = html;
+    el.querySelectorAll('[data-conv]').forEach(function (b) { b.onclick = function () { selectConv(b.getAttribute('data-conv'), ''); }; });
+  };
+  var loadCharter = function () {
+    var el = charterPane().firstChild, asked = ROLE;
+    el.innerHTML = '<div class="empty">加载中…</div>';
+    return api('api/charter', { role: asked }).then(function (d) {
+      if (asked !== ROLE || VIEW !== 'charter') return;
+      el.innerHTML = d.ok && !d.none ? charterHTML(d) : '<div class="empty">' + esc(roleName(asked)) + ' 没有宪章记录 (人, 或在这项记录出现前出生、还没重生过的 wizard)</div>';
+      bindCharter(el);
+    }).catch(function () { el.innerHTML = '<div class="empty">载入失败</div>'; });
+  };
+  var charterHTML = function (d) {
+    var stat = function (k, v, sub) {
+      return '<div class="pst"><span class="k">' + k + '</span><b>' + v + '</b><span class="s" title="' + esc(sub) + '">' + esc(sub) + '</span></div>';
+    };
+    var b = d.baseline;
+    var max = Math.max.apply(null, d.sections.map(function (x) { return x.tokens; }));
+    var big = d.sections.filter(function (x) { return x.tokens === max; })[0];
+    var pct = function (n) { return Math.round(100 * n / d.tokens) + '%'; };
+    var mdOk = mdReady();
+    // 组成条: 一节一段, 宽度按体量 —— 一眼看出谁在吃宪章; 最大那节加深, 与下面的行同色。
+    var mix = '<div class="cmix">' + d.sections.map(function (x) {
+      return '<i class="' + (x === big ? 'top' : '') + '" style="flex:' + x.tokens + '" title="' + esc(x.title + ' ≈' + fmtTok(x.tokens) + ' · ' + pct(x.tokens)) + '"></i>';
+    }).join('') + '</div>';
+    var sec = function (x) {
+      return '<details class="csec' + (x === big ? ' top' : '') + '"><summary><span class="ct">' + esc(x.title) + '</span>' +
+        '<span class="cbar"><i style="width:' + Math.round(100 * x.tokens / max) + '%"></i></span>' +
+        '<span class="cn">≈' + fmtTok(x.tokens) + '<small>' + pct(x.tokens) + '</small></span></summary>' +
+        '<div class="md-body">' + (mdOk ? md.render(x.body) : '<pre>' + esc(x.body) + '</pre>') + '</div></details>';
+    };
+    // 没有实测底座就不摆一张「—」: 换成最大的那一节, 同样回答「钱花在哪」。
+    var right = b
+      ? stat('开局实测', fmtTok(b.ctx), (b.resumed ? '续接的老会话, 含此前对话 · ' : '') + '此后首轮第一次调用送入的上下文') +
+        stat('宪章占开局', Math.round(100 * d.tokens / b.ctx) + '%', '其余是 CLI 系统提示、工具、CLAUDE.md、skills 与第一句话')
+      : stat('最大一节', pct(max), big.title + ' ≈' + fmtTok(max));
+    return '<div class="pstats">' +
+        stat('宪章', '≈' + fmtTok(d.tokens) + '<small> tokens</small>', fmtClock(d.at) + ' 压进系统提示 · 随进程终身不变') + right +
+      '</div>' +
+      '<section class="psec"><h3>按节<span>' + d.sections.length + ' 节</span>' +
+        '<button class="cx" id="charter-all">全部展开</button></h3>' +
+        mix + d.sections.map(sec).join('') + '</section>';
+  };
+  var bindCharter = function (el) {
+    var btn = el.querySelector('#charter-all');
+    if (!btn) return;
+    var all = function () { return el.querySelectorAll('.csec'); };
+    var sync = function () { btn.textContent = [].every.call(all(), function (x) { return x.open; }) ? '全部收起' : '全部展开'; };
+    btn.onclick = function () { var open = btn.textContent === '全部展开'; all().forEach(function (x) { x.open = open; }); sync(); };
+    all().forEach(function (x) { x.ontoggle = sync; });
+  };
+
   // 侧栏换成关系图 / 换回会话列表。换回时选中的仍是在关系图里点开的那一项, 并把它滚进视野。
   var setWorld = function (on) {
     WORLD = on; W.treeFor = ''; W.pickSelf = '';
@@ -1749,7 +2219,7 @@
     syncUrl();
     // 手机上侧栏与主区二选一 —— 开关在侧栏里, 结果也在侧栏里。
     if (on) app.classList.remove('reading');
-    renderRole();
+    renderRole(); renderHead();
     if (on) { renderWorld(); loadWorld(); }
     else {
       // 选中的子项得露出来: 群展开, 排在折叠条后面的连折叠条一起展开。
@@ -1765,6 +2235,14 @@
     }
     pollWorld();
   };
+  // 进行中那一轮的耗时: 服务端只给开始时刻, 这里每秒按它走表 (取整秒, 免得小数位抖)。
+  var tickDur = function () {
+    document.querySelectorAll('.tg-dur.live[data-since]').forEach(function (el) {
+      var ms = Math.max(0, srvNow() - Number(el.getAttribute('data-since')));
+      el.textContent = fmtDur(Math.floor(ms / 1000) * 1000);
+    });
+  };
+  setInterval(tickDur, 1000);
   // 本地心跳: 相对时间、运行中判定、耗时都随时间变化, 但服务端没有新事件可推。
   setInterval(function () {
     if (!R.role) return;
@@ -1773,6 +2251,7 @@
     // 侧栏的「几分钟前」与状态灯: 内容没变时 renderConvs 不碰 DOM。
     paintStatus(); renderConvs();
     if (VIEW === 'plan') renderPlan();
+    if (VIEW === 'jobs') renderJobList();
   }, TICK_MS);
 
   // ══ 搜索 (⌘K / Ctrl+K) ═══════════════════════════════════════════════
@@ -1822,7 +2301,7 @@
     return {
       kind: 'conv',
       html: '<span class="av">' + esc(c.label) + '</span><span class="b"><span class="l1">' + title +
-        '<span class="tag">' + (c.kind === 'wizard' ? '私聊' : '群聊') + '</span>' + skTs(c.lastTs) + '</span>' +
+        '<span class="tag">' + (c.kind === 'wizard' ? '私聊' : c.kind === 'job' ? '工单' : '群聊') + '</span>' + skTs(c.lastTs) + '</span>' +
         (c.preview ? '<span class="pv">' + esc(c.preview) + '</span>' : '') + '</span>',
       go: function () { selectConv(c.key, ''); },
     };
@@ -1864,8 +2343,8 @@
     };
   };
   var jumpMsg = function (h) {
-    if (inSession(h.ts) && convOf(h.conv)) return selectConv(h.conv, '', landOn(h.id));
-    SESSION = 'all'; CONV = h.conv; WITH = '';
+    if (inSession(h.ts) && convOf(h.conv)) return selectConv(h.conv, h.with || '', landOn(h.id), h.eye);
+    SESSION = 'all'; CONV = h.conv; WITH = h.with || ''; EYE = h.eye && h.eye !== ROLE ? h.eye : '';
     if (VIEW !== 'msgs') setView('msgs');
     app.classList.add('reading');
     reveal();