wezard 2.3.0 → 2.4.0

package/web/chat.js

@@ -19,10 +19,12 @@
   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; };
+  // 页面上两个独立的视角: ROLE 是页面视角 (名片、侧栏、标题、关系图中心), 只有点头像 / 名字及其装饰 (⇄ 等) 换它;
+  // VIEWPOINT 是 chat detail 的视角 (谁算「自己」靠右、描述行以谁为准), 点卡片 / 会话项的其余地方与详情区里的行设它 ——
+  // 关系图卡片 = 被点的那个 role, .far 子项 = 那个 role, 移交行 = 移交人 (派活那一方),
+  // 新生 / 被收的提示行 = 那个 wizard; 会话与成对的子项 = 页面视角自己。'' = 与页面视角相同。老链接的 `eye=` 照读。
+  var VIEWPOINT = qs.get('viewpoint') || qs.get('eye') || '';
+  var viewpointOf = function () { return VIEWPOINT || ROLE; };
   var TICK_MS = 3000;
 
   // at / recvAt: 服务端快照时刻与本地收到时刻。所有"现在几点"的判断都换算到
@@ -30,13 +32,14 @@
   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 = 已把谁滚进过视野。
+  // 关系/日程两栏共用的世界快照。treeFor = 已把谁滚进过视野。
   var W = {
     at: 0, nodes: [], edges: [], chats: [], jobs: [], schedules: [],
-    degraded: false, loaded: false, treeAll: false, treeFor: '', glance: {}, gKeys: '',
+    degraded: false, loaded: false, treeFor: '', glance: {}, gKeys: '',
   };
   var VIEW = 'msgs';
   // 侧栏是会话列表还是关系图 —— 与右边的 VIEW 无关: 关系图下右边照样是选中的那段对话。
+  // URL 带了 side 以它为准; 没带 (新链接) 用本地记下的, 见 WORLD_KEY。
   var WORLD = qs.get('side') === 'world';
   var $ = function (s) { return document.querySelector(s); };
   var app = $('#app'), thread = $('#thread'), inner = $('#thread-in'), convsEl = $('#convs');
@@ -97,7 +100,7 @@
     if (CONV) p.conv = CONV;
     if (WITH) p['with'] = WITH;
     if (SESSION) p.session = SESSION;
-    if (EYE) p.eye = EYE;
+    if (VIEWPOINT) p.viewpoint = VIEWPOINT;
     if (WORLD) p.side = 'world';
     Object.keys(extra || {}).forEach(function (k) { p[k] = extra[k]; });
     return p;
@@ -184,7 +187,10 @@
     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') {
+        // 「发给谁」先挂在空 .md-body 里; 填进 markdown 后把它塞进第一段, 才能和正文第一行同行。
+        var to = body.querySelector(':scope > .to-in');
         body.innerHTML = md.render(src.textContent || '');
+        if (to) { var p = body.firstElementChild; (p && p.tagName === 'P' ? p : body).prepend(to, ' '); }
         body.dataset.rendered = '1';
       }
     });
@@ -317,7 +323,7 @@
     r.classList.toggle('raw');
   });
   inner.addEventListener('click', function (e) {
-    var c = e.target.closest && e.target.closest('.mchip.job[data-job]');
+    var c = e.target.closest && e.target.closest('.mchip.job[data-job], .tg-job .jc[data-job], .jcrumb [data-job]');
     if (c) openJob(c.getAttribute('data-job'));
   });
   // 回执 chip / 移交行的活号: 跳到派活那句 (同一个活号的入消息)。先在眼前这个窗口里找;
@@ -334,22 +340,36 @@
     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 换, 所以在根上委托)。
+  // 移交行整行: 侧栏选中移交双方之间的那一项 (群里的一对 / 私聊; 页面视角不是两端之一就开
+  // 「这两方之间」的往来), 有派活那句就落在这一行自己的那句上。页面视角不动, 详情区的 viewpoint
+  // 换成移交人 (派活那一方)。节点随 reconcile 换, 所以在根上委托。
   // 行尾的 chevron 只管展开原文, 走 <summary> 自己的开合。
   inner.addEventListener('click', function (e) {
-    var b = e.target.closest && e.target.closest('.handoff .ho-line[data-hto]');
+    var b = e.target.closest && e.target.closest('.handoff .ho-line[data-hto], .to-in[data-hto]');
     if (!b || e.target.closest('.ho-chev')) return;
     e.preventDefault();   // 行是 <summary>: 不顺带展开原文
+    e.stopPropagation();
     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);
+    jumpMsg({ conv: conv, with: w, id: b.getAttribute('data-gid'), ts: Number(b.getAttribute('data-gts')), viewpoint: from });
+  });
+
+  // 其余 wezard 调用的提示行: 新生 / 被收的 wizard 开它的全部往来、viewpoint 站到它身上 (页面视角不动),
+  // 工单行进工单页, 定时行开日程 —— 日程只有页面视角自己的, 别人的定时行不跳 (换页面视角只走头像 / 名字)。
+  // 同移交行: 行是 <summary> 就不顺带展开原文, 行尾 chevron 照旧开合。
+  inner.addEventListener('click', function (e) {
+    var b = e.target.closest && e.target.closest('.handoff .ho-line[data-hrole], .handoff .ho-line[data-job], .handoff .ho-line[data-hplan]');
+    if (!b || e.target.closest('.ho-chev')) return;
+    e.preventDefault();
+    var role = b.getAttribute('data-hrole'), job = b.getAttribute('data-job'), plan = b.getAttribute('data-hplan');
+    if (job) return openJob(job);
+    if (plan) return plan === ROLE && setView('plan');
+    var conv = 'a:' + role;
+    markBack(function () { return VIEW === 'msgs' && CONV === conv; });
+    selectConv(conv, '', undefined, role);
   });
 
   // ── 左栏: 当前 role 的名片 + 会话列表 ──
@@ -359,6 +379,36 @@
   var jobTag = function (j) {
     return j ? '<span class="jtag' + (j.status === 'open' ? ' open' : '') + '">' + (j.status === 'open' ? j.done + '/' + j.total : '收工') + '</span>' : '';
   };
+  // 阶段 (daemon 现算后推来): 缺省 (老快照) = 不标。
+  var STAGE = { plan: '规划', build: '实施', review: '评审', clarify: '澄清', stalled: '卡住', shelved: '搁置' };
+  var stageText = function (j) {
+    if (!j) return '';
+    if (j.status === 'closed') return j.kind === 'req' ? (j.end === 'cancel' ? '取消' : '归档') : '';
+    return j.stage === 'deliver' ? (j.kind === 'req' ? '等验收' : '待收工') : STAGE[j.stage] || '';
+  };
+  var stageTag = function (j) {
+    var t = stageText(j);
+    return t ? '<span class="jstage' + (j.stage === 'deliver' || j.stage === 'clarify' || j.stage === 'stalled' ? ' wait' : '') + '">' + t + '</span>' : '';
+  };
+  // 祖先链 (根在前): 按服务端的账走 parent; 环 / 缺失就停。
+  var jobAncestors = function (id) {
+    var idx = R.jobIndex || {}, out = [], seen = {}, cur = idx[id] && idx[id].parent;
+    while (cur && idx[cur] && !seen[cur]) { seen[cur] = 1; out.unshift(cur); cur = idx[cur].parent; }
+    return out;
+  };
+  var jobCrumbs = function (id) {
+    var up = jobAncestors(id);
+    return up.length ? '<span class="jcrumb">' + up.map(function (a) {
+      return '<button data-job="' + esc(a) + '" title="' + esc(a) + '">' + esc((R.jobIndex[a] || {}).title || a) + '</button>';
+    }).join('<i>›</i>') + '<i>›</i></span>' : '';
+  };
+  // 工单列表的树序: 父在前、子缩进跟在后; 父不在这一段里的当根。
+  var jobTreeOrder = function (list) {
+    var ids = {}; list.forEach(function (c) { ids[c.job.id] = 1; });
+    var kids = function (id) { return list.filter(function (c) { return c.job.parent === id; }); };
+    var walk = function (c, d) { return [{ c: c, d: d }].concat(kids(c.job.id).reduce(function (a, k) { return a.concat(walk(k, d + 1)); }, [])); };
+    return list.filter(function (c) { return !c.job.parent || !ids[c.job.parent]; }).reduce(function (a, c) { return a.concat(walk(c, 0)); }, []);
+  };
   // 工单里有人卡住 (停在审批卡 / 反问待答 / 报错停了) 时标出几份卡着 —— 要人或开单者动手的。
   var stuckTag = function (j) {
     var n = j && j.status === 'open' ? (R.inflight || []).filter(function (x) {
@@ -376,7 +426,7 @@
     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 },
+      job: j && { id: id, owner: j.owner, status: j.status, done: j.done, total: j.total, parent: j.parent, kind: j.kind, stage: j.stage },
     };
   };
   /** 一个工单号 → 它的一行: 视角有份的取会话项 (带预览), 其余按账现造。 */
@@ -449,11 +499,6 @@
       ms.map(function (m) { return '<i>' + esc(m.label || roleLabel(m.role)) + '</i>'; }).join('') + '</span>';
   };
 
-  // ends = [[id, 已知头像]]; 没带头像的按 role 查。
-  var pairOf = function (ends) {
-    return '<span class="pair">' + ends.map(function (e) { return goSpan('av', e[0], esc(e[1] || roleLabel(e[0]))); }).join('') + '</span>';
-  };
-
   var line = function (title, ts, pv, lamp, unread) {
     return '<span class="b"><span class="l1"><span class="t">' + title + '</span>' + (lamp || '') +
       '<span class="ts">' + esc(fmtAgo(ts)) + '</span></span>' +
@@ -465,21 +510,17 @@
   // 服务端给每个会话一份 heard = [说完的时刻, 发话方, 收信方], 以及我在群里 / 每一对里
   // 最后开口的时刻 (mine)。说给我的那句属于「我与发话方」那一对。一句话的已读水位 = 它所在那一处
   // 「我最后开口」与「我看过」的较晚者: 属于某一对的看那一对 (群里说过话不等于读过别的线程), 不属于任何一对的看群。
-  // 已读记录 `视角|会话|对端` 的键一直没变: 子项曾短暂是「对端在群里的全部记录」, 那时看过的覆盖了这一对, 照旧算数。
-  // 「看过」记在本地 (刷新 / 换视角都还在), 按视角分账 —— 同一个群换个 role 看, 未读是另一回事。
-  var READ_KEY = 'wezard.role.read';
-  var READ = (function () {
-    try { var v = JSON.parse(localStorage.getItem(READ_KEY) || '{}'); if (v && v.at) return v; } catch (e) { }
-    return { at: {} };
-  })();
-  var saveRead = function () { try { localStorage.setItem(READ_KEY, JSON.stringify(READ)); } catch (e) { } };
+  // 基线是「打开页面这一刻」(BASE, 服务端时钟, 首次拿到快照时定): 此前已有的话不算未读, 之后新说完的才累加,
+  // 刷新即重置 —— 所以「看过」只活在内存里, 不落本地。按视角分账 (同一个群换个 role 看, 未读是另一回事)。
+  var BASE = 0;
+  var READ = { at: {} };
   var readKey = function (key, withRole) { return ROLE + '|' + key + '|' + (withRole || ''); };
   var seenAt = function (key, withRole) { return READ.at[readKey(key, withRole)] || 0; };
   var unreadOf = function (c, withRole) {
     var g = seenAt(c.key);
     var mark = {};
-    (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);
+    (c.subs || []).forEach(function (s) { mark[s.role] = Math.max(g, BASE, s.mine || 0, seenAt(c.key, s.role)); });
+    var groupMark = Math.max(g, BASE, c.mine || 0);
     return (c.heard || []).filter(function (h) {
       var p = h[2] === ROLE ? h[1] : '';
       if (withRole && p !== withRole) return false;
@@ -510,30 +551,61 @@
     var h = c.heard && c.heard[c.heard.length - 1];
     var hit = readPairs(c).filter(function (w) { return unreadOf(c, w || (c.kind !== 'group' ? c.peer : '')); });
     hit.forEach(function (w) { READ.at[readKey(c.key, w)] = Math.max(R.at, h ? h[0] : 0); });
-    if (hit.length) saveRead();
   };
 
-  // 展开态按会话各记各的: 点开一个不收起别的, 轮询重画也不动它。
-  // OPEN_AT = 已经替它自动展开过的那个 CONV —— 选中新会话时展开一次, 之后折不折由人说了算。
-  var OPEN = {}, OPEN_AT = '';
-  // 子项默认只露前 SUB_FOLD 个, 其余收在一条展开/折叠条后面; 展开态同样按会话各记各的。
-  var SUB_FOLD = 5, MORE = {};
-  var reveal = function () {
-    if (CONV && CONV !== OPEN_AT) {
-      // 某 role 在一个群里的全部记录挂在那个群下: 展开的是那个群。
-      var t = convOf(CONV);
-      OPEN[t && t.chat ? 'c:' + t.chat : CONV] = true; OPEN_AT = CONV;
-    }
+  // 跨会话通用的个人偏好 (看全部、列表 / 关系、侧栏群节点的展开、session 选择): 记在本地, 刷新后还在。
+  // 取不到 / 写不进 (隐私窗口、禁存) 就按默认值, 页面照常。
+  var pref = function (key, def) {
+    try { var v = localStorage.getItem(key); return v === null ? def : JSON.parse(v); } catch (e) { return def; }
+  };
+  var setPref = function (key, v) { try { localStorage.setItem(key, JSON.stringify(v)); } catch (e) { } };
+  var prefObj = function (key) { var v = pref(key, {}); return v && typeof v === 'object' ? v : {}; };
+  var WORLD_KEY = 'wezard.role.world';
+  if (!qs.has('side')) WORLD = pref(WORLD_KEY, false) === true;
+  // 早先也记过 ping 与日程卡片的展开 (只活在内存里了)、「往来 / 相关 / 全部」开关 (已去掉, 固定看全部 / 相关) —— 旧 key 顺手清掉。
+  try { ['wezard.role.pingOpen', 'wezard.role.planOpen', 'wezard.role.showAll', 'wezard.role.subScope'].forEach(function (k) { localStorage.removeItem(k); }); } catch (e) { }
+
+  // 展开态按群各记各的 (键 = 群节点的会话键): 点开一个不收起别的, 轮询重画也不动它。
+  // OPEN_AT = 已经替它自动展开过的那个 CONV —— 选中新会话时展开一次, 之后折不折由人说了算; null = 刚载入。
+  // 默认只展开选中的那个群; 本地只记偏离默认的: 没选中却展开着的 = true, 选中却被收起的 = false
+  // (载入时自动展开要让着它)。回到默认的那一项写的时候就删, 不越存越多。
+  var OPEN_KEY = 'wezard.role.groupOpen';
+  var OPEN = prefObj(OPEN_KEY), OPEN_AT = null;
+  // 子项默认只露前 SUB_FOLD 个, 其余收在一条展开/折叠条后面; 展开态同样按群记, 只留展开着的。
+  var MORE_KEY = 'wezard.role.groupMore';
+  var SUB_FOLD = 5, MORE = prefObj(MORE_KEY);
+  // 某 role 在一个群里的全部记录挂在那个群下: CONV 落在哪个群节点上。
+  var groupOf = function (key) { var t = key && convOf(key); return t && t.chat ? 'c:' + t.chat : key; };
+  var saveOpen = function () {
+    var sel = groupOf(CONV);
+    setPref(OPEN_KEY, Object.keys(OPEN).reduce(function (m, k) {
+      if (!!OPEN[k] !== (k === sel)) m[k] = !!OPEN[k];
+      return m;
+    }, {}));
+  };
+  var setMore = function (key, v) {
+    if (v) MORE[key] = true; else delete MORE[key];
+    setPref(MORE_KEY, MORE);
   };
-  // 点侧栏项: 没选中它 → 选中 (会话顺带展开); 已选中 → 不再选一遍, 右边的正文一个字不动 ——
-  // 会话只折叠/展开, 子项什么都不做。
-  var clickItem = function (key, withRole) {
-    if (key !== CONV || withRole !== WITH || VIEW !== 'msgs' || EYE) return selectConv(key, withRole);
-    // 窄屏退回列表后再点它是要回去读, 不是要折叠。
+  var reveal = function () {
+    if (!CONV || CONV === OPEN_AT) return;
+    var g = groupOf(CONV);
+    if (!(OPEN_AT === null && OPEN[g] === false)) OPEN[g] = true;
+    OPEN_AT = CONV;
+    saveOpen();
+  };
+  // 点侧栏项 / 关系图卡片 (两边同一份): 没选中它 → 选中 (会话顺带展开); 已选中再点 → 取消选中, 右边回到
+  // 页面视角的全部对话 (`a:<role>`, 即「看全部」那一份), 页面视角不动; 取消的是会话本身就顺带收起它。
+  // viewpoint: 站在这一项的主人身上 —— 会话与成对的子项是页面视角自己的, .far 子项与卡片是那个 role 的。
+  var clickItem = function (key, withRole, viewpoint) {
+    var vp = viewpoint && viewpoint !== ROLE ? viewpoint : '';
+    if (key !== CONV || (withRole || '') !== WITH || VIEW !== 'msgs' || VIEWPOINT !== vp) return selectConv(key, withRole, undefined, viewpoint);
+    // 窄屏退回列表后再点它是要回去读, 不是要取消。
     if (!app.classList.contains('reading')) return app.classList.add('reading');
-    if (withRole) return;
-    OPEN[key] = !OPEN[key];
-    renderConvs();
+    var fold = !withRole && OPEN[key];
+    if (fold) OPEN[key] = false;
+    selectConv('a:' + ROLE, '', undefined, '');
+    if (fold) saveOpen();   // 选中项换过之后再记: 没选中的收着是默认态, 不占一条
   };
 
   // ── 会话项 / 子项 / 关系图卡片共用的三样: 一行的数据 (glance)、一行的画法 (roleRow)、排序 (recentFirst) ──
@@ -545,9 +617,11 @@
   // 同层按最近活动排, 有新话就上浮。
   var recentFirst = function (a, b) { return b.lastTs - a.lastTs; };
   // 一个 role 的一行: 头像 · 名字 (+tail) + 忙闲灯 · 时刻 / 最近一句 + 未读。
+  // 名字悬停时紧跟一枚 ⇄ —— 同名片上名字悬停露出 ⧉: 点名字做的事, 先亮给人看。
+  var SWAP = '<i class="sw" aria-hidden="true">⇄</i>';
   var roleRow = function (id, name, label, g, status, tail, badge) {
     return goSpan('av', id, esc(label)) +
-      line(nm(id, name, true, badge) + (tail || ''), g.lastTs, g.preview, stTag(status, true), g.unread);
+      line(nm(id, name, true, SWAP + (badge || '')) + (tail || ''), g.lastTs, g.preview, stTag(status, true), g.unread);
   };
   // 名字旁的「+N」: 视图外还有 N 个 —— 同一个徽标, 数什么由所在的视图注入 (会话列表数会话, 关系图数关系)。
   var moreTag = function (n, tip) {
@@ -564,7 +638,7 @@
   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, 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));
+    if (c.kind === 'job') return '<span class="av">' + esc(c.label) + '</span>' + line('<span class="nm chat">' + esc(c.name) + '</span>' + stageTag(c.job) + 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))); };
@@ -580,13 +654,11 @@
 
   var convItem = function (c) {
     var on = c.key === CONV;
-    // 成对: 只列与我有往来的 —— 在群里但没和我说过话的人, 点进去也是空的。
-    // 「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); })
-      : [];
+    // 与我有往来的成对子项在前; chat 内其余有记录的接在后面 (.far), 各自按最近排。
+    // 时间范围按子项自己的时刻裁 (成对 = 我与它的往来, .far = 它在群里的全部) —— 群的时刻是群里任何人的动静, 放不得行。
+    var pairs = c.subs.filter(function (s) { return s.count && inWin(s.lastTs); }).sort(recentFirst);
+    var fars = c.subs.filter(function (s) { return !s.count && s.whole && s.whole.count && inWin(s.whole.lastTs); })
+      .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
@@ -596,7 +668,7 @@
     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="" ' +
+        return '<button class="si far' + (CONV === k ? ' on' : '') + '" data-conv="' + esc(k) + '" data-with="" data-vp="' + esc(s.role) + '" ' +
           'title="' + esc(nameOf(s.role) + ' 在这里的 ' + s.whole.count + ' 条记录 (与我无往来)') + '">' + farRow(s) + '</button>';
       }
       var sel = on && s.role === WITH;
@@ -609,6 +681,16 @@
       ? '<div class="subs">' + talked.slice(0, SUB_FOLD).map(sub).join('') + bar + rest + '</div>'
       : '';
     var sel = on && !WITH;
+
+    // 群聊项特殊处理: 把 chevron 挪到行内部, 在时间左边
+    if (c.kind === 'group' && c.subs && c.subs.length) {
+      // 不能是 <button>: 嵌在外层 .ci 按钮里会被解析器提前闭合外层, chevron 就掉到卡片外
+      var chevron = '<span role="button" class="ci-chevron' + (OPEN[c.key] ? ' on' : '') + '" data-toggle="' + esc(c.key) + '" title="' + (OPEN[c.key] ? '折叠群' : '展开群') + '"></span>';
+      var content = avatarOf(c) + '<span class="b"><span class="l1"><span class="t"><span class="nm chat">' + esc(c.name) + '</span>' + jobMark(c.jobs) + '</span>' + chevron + '<span class="ts">' + esc(fmtAgo(c.lastTs)) + '</span></span>' +
+        '<span class="l2"><span class="pv">' + esc(c.preview) + '</span>' + (unreadOf(c) ? '<b class="ub">' + (unreadOf(c) > 99 ? '99+' : unreadOf(c)) + '</b>' : '') + '</span></span>';
+      return '<button class="ci' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '">' + content + '</button>' + subs;
+    }
+
     return '<button class="ci' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '">' +
         convRow(c) + '</button>' + subs;
   };
@@ -625,8 +707,8 @@
   // 老外壳 (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 === 'wizard'; }).sort(recentFirst);
+    var groups = R.convs.filter(function (c) { return c.kind === 'group' && inWin(c.lastTs); }).sort(recentFirst);
+    var dms = R.convs.filter(function (c) { return c.kind === 'wizard' && inWin(c.lastTs); }).sort(recentFirst);
     R.convs.forEach(markRead);
     if (WORLD) return renderWorld();
     // 空着的那一栏不画 —— 对谁都一样: 人没有私聊只是这条规则的一个特例。
@@ -635,22 +717,23 @@
     };
     // 没变就不碰 DOM: 心跳每 3s 来一次, 重建会把列表的滚动与焦点蹭掉。
     // 开关挂在第一个标题行的右端; 一个会话都没有也留一行标题给它。
-    var html = (sec('群聊', groups) + sec('私聊', dms) || '<h2>会话<span>0</span></h2>').replace('</h2>', scopeToggle() + worldToggle() + '</h2>');
+    var html = (sec('群聊', groups) + sec('私聊', dms) || '<h2>会话<span>0</span></h2>').replace('</h2>', winSelect() + worldToggle() + '</h2>');
     if (convsEl._html === html) return;
     convsEl._html = html; convsEl.innerHTML = html;
     convsEl.querySelectorAll('[data-conv]').forEach(function (b) {
-      var key = b.getAttribute('data-conv'), w = b.getAttribute('data-with') || '';
-      b.onclick = function () { clickItem(key, w); };
+      var key = b.getAttribute('data-conv'), w = b.getAttribute('data-with') || '', vp = b.getAttribute('data-vp') || '';
+      b.onclick = function () { clickItem(key, w, vp); };
     });
     convsEl.querySelectorAll('[data-more]').forEach(function (b) {
       var key = b.getAttribute('data-more');
-      b.onclick = function () { MORE[key] = !MORE[key]; renderConvs(); };
+      b.onclick = function () { setMore(key, !MORE[key]); renderConvs(); };
     });
-    bindGo(convsEl);
-    bindWorldToggle(convsEl);
-    convsEl.querySelectorAll('[data-scope]').forEach(function (b) {
-      b.onclick = function () { setScope(b.getAttribute('data-scope')); };
+    convsEl.querySelectorAll('[data-toggle]').forEach(function (b) {
+      var key = b.getAttribute('data-toggle');
+      b.onclick = function (e) { e.stopPropagation(); OPEN[key] = !OPEN[key]; saveOpen(); renderConvs(); };
     });
+    bindGo(convsEl);
+    bindWorldToggle(convsEl); bindWin(convsEl);
   };
 
   var shortCwd = function (p) {
@@ -659,70 +742,110 @@
   };
   // session 只靠两样认: 何时开始、跑了几轮。最新那段直接叫「最新」。
   var latestSess = function () { return R.sessions[R.sessions.length - 1]; };
+  // 选中的 session 按「role + 会话 (+ 群里的对端)」记; 选回默认 (全部时间, 不切) 就删那一项。
+  // 只在 URL 没指定 session 时恢复 —— 落地窗口要等第一份摘要才定, SESS_RESTORE 守到那时。
+  var SESS_KEY = 'wezard.role.session';
+  var SESS_RESTORE = !qs.get('session');
+  var sessKey = function () { return ROLE + '\n' + CONV + (WITH ? '\n' + WITH : ''); };
+  var savedSess = function () { return prefObj(SESS_KEY)[sessKey()] || ''; };
+  var saveSess = function (sid) {
+    var m = prefObj(SESS_KEY);
+    if (sid && sid !== 'all') m[sessKey()] = sid; else delete m[sessKey()];
+    setPref(SESS_KEY, m);
+  };
+  // 第一份摘要到手: 记下的那段还在列表里就换过去 (换了要重取一次), 不在了就回默认并删掉。
+  var restoreSess = function () {
+    if (!SESS_RESTORE) return false;
+    SESS_RESTORE = false;
+    var want = savedSess();
+    if (!want || want === SESSION) return false;
+    if (R.sessions.some(function (x) { return x.sessionId === want; })) { SESSION = want; return true; }
+    saveSess('');
+    return false;
+  };
   var sessWhen = function (s) { return s.start ? fmtClock(s.start) : '(无时刻)'; };
 
-  // session 切换: name 右边一个小号文字触发器 + 浮层列表。
-  // renderRole 每次刷新都重画, 展开态记在 SESS_OPEN 里才不会被轮询收起。
-  var SESS_OPEN = false;
-  var sessRow = function (s, on) {
-    var last = s === latestSess();
-    return '<button class="sp-it' + (on ? ' on' : '') + '" role="option" aria-selected="' + on + '" data-s="' + esc(s.sessionId || '') + '" ' +
-      'title="' + esc(s.sessionId || '') + '">' +
-      '<span class="id">' + (last ? '最新 · ' : '') + esc(sessWhen(s)) + '</span>' +
-      '<span class="n">' + s.turns + ' 轮</span></button>';
-  };
-  var sessPicker = function () {
-    var cur = R.sessions.filter(function (s) { return s.sessionId === SESSION; })[0];
-    var all = '<button class="sp-it all' + (cur ? '' : ' on') + '" role="option" aria-selected="' + !cur + '" data-s="all">' +
-      '<span class="id">全部</span><span class="n">' + R.sessions.length + ' 段</span></button>';
-    var v = !cur ? '全部' : cur === latestSess() ? '最新' : sessWhen(cur);
-    return '<span class="sp' + (SESS_OPEN ? ' open' : '') + '">' +
-      '<button class="sp-btn" aria-haspopup="listbox" aria-expanded="' + SESS_OPEN + '" title="切换 session">' +
-        esc(v) + '<span class="car" aria-hidden="true"></span></button>' +
-      '<span class="sp-list" role="listbox">' + all +
-        R.sessions.slice().reverse().map(function (s) { return sessRow(s, s.sessionId === SESSION); }).join('') +
-      '</span></span>';
-  };
-  var setSessOpen = function (open) {
-    SESS_OPEN = open;
-    var sp = $('#rb-sp .sp');
-    if (!sp) return;
-    sp.classList.toggle('open', open);
-    sp.querySelector('.sp-btn').setAttribute('aria-expanded', open);
+  // 自定义下拉: 小号文字触发器 + 浮层列表 (.sp)。名片里的 session 与侧栏标题行的时间范围共用这一份。
+  // 宿主每次刷新都重画, 展开的是哪一个记在 DD_OPEN 里 (按 id) 才不会被轮询收起。
+  // items: { v, html, on, cls?, tip? }; `ic` = 触发器左侧的图标; `end` = 浮层以触发器右沿为锚向左下展开 (贴着侧栏右沿的那种)。
+  var DD_OPEN = '';
+  var dropdown = function (id, o) {
+    var open = DD_OPEN === id;
+    return '<span class="sp' + (o.end ? ' end' : '') + (open ? ' open' : '') + '" data-dd="' + id + '">' +
+      (o.ic ? '<span class="sp-ic" aria-hidden="true">' + o.ic + '</span>' : '') +
+      '<button class="sp-btn" aria-haspopup="listbox" aria-expanded="' + open + '" title="' + esc(o.title) + '">' +
+        esc(o.label) + '<span class="car" aria-hidden="true"></span></button>' +
+      '<span class="sp-list" role="listbox">' + o.items.map(function (it) {
+        return '<button class="sp-it' + (it.cls ? ' ' + it.cls : '') + (it.on ? ' on' : '') + '" role="option" aria-selected="' + !!it.on + '" data-v="' + esc(it.v) + '"' +
+          (it.tip ? ' title="' + esc(it.tip) + '"' : '') + '>' + it.html + '</button>';
+      }).join('') + '</span></span>';
+  };
+  var setDdOpen = function (id) {
+    DD_OPEN = id;
+    document.querySelectorAll('.sp[data-dd]').forEach(function (sp) {
+      var on = sp.getAttribute('data-dd') === id;
+      sp.classList.toggle('open', on);
+      sp.querySelector('.sp-btn').setAttribute('aria-expanded', on);
+    });
   };
-  var bindSessPicker = function () {
-    var sp = $('#rb-sp .sp');
+  var bindDropdown = function (root, id, pick) {
+    var sp = root && root.querySelector('.sp[data-dd="' + id + '"]');
     if (!sp) return;
-    sp.querySelector('.sp-btn').onclick = function () { setSessOpen(!SESS_OPEN); };
+    sp.querySelector('.sp-btn').onclick = function () { setDdOpen(DD_OPEN === id ? '' : id); };
     sp.querySelectorAll('.sp-it').forEach(function (it) {
-      it.onclick = function () { setSessOpen(false); SESSION = it.getAttribute('data-s'); refresh(); };
+      it.onclick = function () { setDdOpen(''); pick(it.getAttribute('data-v')); };
     });
   };
   document.addEventListener('click', function (e) {
-    if (SESS_OPEN && !e.target.closest('#rb-sp .sp')) setSessOpen(false);
+    if (DD_OPEN && !e.target.closest('.sp[data-dd="' + DD_OPEN + '"]')) setDdOpen('');
   });
   document.addEventListener('keydown', function (e) {
-    if (SESS_OPEN && e.key === 'Escape') setSessOpen(false);
+    if (DD_OPEN && e.key === 'Escape') setDdOpen('');
   });
 
+  // session 切换: name 右边那个下拉。
+  var sessItem = function (s, on) {
+    var last = s === latestSess();
+    return { v: s.sessionId || '', on: on, tip: s.sessionId || '',
+      html: '<span class="id">' + (last ? '最新 · ' : '') + esc(sessWhen(s)) + '</span><span class="n">' + s.turns + ' 轮</span>' };
+  };
+  var sessPicker = function () {
+    var cur = R.sessions.filter(function (s) { return s.sessionId === SESSION; })[0];
+    return dropdown('sess', {
+      title: '切换 session',
+      label: !cur ? '全部' : cur === latestSess() ? '最新' : sessWhen(cur),
+      items: [{ v: 'all', on: !cur, cls: 'all', html: '<span class="id">全部</span><span class="n">' + R.sessions.length + ' 段</span>' }]
+        .concat(R.sessions.slice().reverse().map(function (s) { return sessItem(s, s.sessionId === SESSION); })),
+    });
+  };
+  var bindSessPicker = function () {
+    bindDropdown($('#rb-sp'), 'sess', function (v) { SESSION = v; saveSess(SESSION); refresh(); });
+  };
+
   // 会话列表 ↔ 关系图: 侧栏第一行右上角同一个小开关, 标的是「点了去哪」。
   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();
-  };
-  // 单个文字按钮: 字是当前范围, 点一下切到另一种 (样式与旁边的「关系图」按钮同一个 .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>';
+  // 时间范围: 只看最近 N 分钟内有动静的 (0 = 全部)。会话列表与关系图共用这一个值。
+  var WIN_KEY = 'wezard.role.winMin';
+  var WINS = [[0, '全部'], [30, '半小时'], [60, '1小时'], [120, '2小时'], [1440, '1天']];
+  var WIN = pref(WIN_KEY, 0);
+  if (!WINS.some(function (w) { return w[0] === WIN; })) WIN = 0;
+  var winCut = function () { return WIN ? srvNow() - WIN * 60000 : 0; };
+  /** 一个时刻落没落在时间范围里 —— 侧栏的会话 / 子项与关系图的边 (rangeOf) 都按 winCut 这一刀。 */
+  var inWin = function (ts) { return !WIN || ts >= winCut(); };
+  var winSelect = function () {
+    return dropdown('win', {
+      ic: '⏱', end: true, title: '时间范围: 只看这段时间内有动静的',
+      label: (WINS.filter(function (w) { return w[0] === WIN; })[0] || WINS[0])[1],
+      items: WINS.map(function (w) { return { v: String(w[0]), on: w[0] === WIN, html: '<span class="id">' + w[1] + '</span>' }; }),
+    });
+  };
+  var bindWin = function (scope) {
+    bindDropdown(scope, 'win', function (v) {
+      WIN = +v; W.treeFor = ''; setPref(WIN_KEY, WIN);
+      convsEl._html = ''; convsEl._tree = '';
+      renderConvs();
+    });
   };
   var worldToggle = function () {
     return '<button class="vt" data-vt title="' + (WORLD ? '换回会话列表' : '换成关系') + '">' + (WORLD ? LIST_SVG + '列表' : TREE_SVG + '关系') + '</button>';
@@ -952,14 +1075,14 @@
   // ── 右栏头: 这个群聊 / 私聊是什么 (关系 / 日程视图时是视图名) ──
   // 跳走之前在看的那段会话 —— 顶栏的「‹ 回到 …」回这里。on: 在哪些窗口上露出这个按钮;
   // at: 跳走时点的那条消息, 回来落在它上面。进工单页 (只在从非工单的窗口进来时记) 与
-  // 移交行点对方都记它, 同一个按钮。
+  // 移交行 / 提示行点过去都记它, 同一个按钮。点过去会换详情区的 viewpoint, 所以连它一起记 (页面视角不动)。
   var BACK = null;
   var inJobs = function () { return VIEW === 'jobs' || CONV.indexOf('j:') === 0; };
-  // 回来 = 原样恢复那一页: 会话、视角、滚动位置 (按视窗顶上那一行的偏移记, 不闪不吸)。吸在底部就不记锚点。
+  // 回来 = 原样恢复那一页: 会话、viewpoint、滚动位置 (按视窗顶上那一行的偏移记, 不闪不吸)。吸在底部就不记锚点。
   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 };
+    BACK = { conv: CONV, with: WITH, session: SESSION, viewpoint: VIEWPOINT, at: at || null, on: on };
   };
   var restoreAt = function (at) {
     if (!at) return undefined;
@@ -992,6 +1115,16 @@
     e.stopPropagation(); e.preventDefault();
     openJobs(m.getAttribute('data-jobs').split(' ').filter(Boolean));
   }, true);
+  // 关系图的 clone 徽标: 开 origin 的全部往来、落到它分叉出这个分身的那一处; viewpoint 站到 origin, 页面视角不动。
+  // 同 📋: 长在卡片按钮里, 捕获阶段截下来。
+  document.addEventListener('click', function (e) {
+    var m = e.target.closest && e.target.closest('.ek.clone[data-cpoint]');
+    if (!m) return;
+    e.stopPropagation(); e.preventDefault();
+    var pt = JSON.parse(m.getAttribute('data-cpoint')), conv = 'a:' + pt.origin;
+    markBack(function () { return VIEW === 'msgs' && CONV === conv; });
+    jumpMsg({ conv: conv, id: pt.id, use: pt.use, ts: pt.ts, viewpoint: pt.origin });
+  }, 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>' : '';
@@ -1001,8 +1134,10 @@
     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); };
+    if (b) b.onclick = function () { var x = BACK; BACK = null; SESSION = x.session; selectConv(x.conv, x.with, restoreAt(x.at), x.viewpoint); };
   };
+  // 一对一的标题: 与关系图卡片窗口 (convOf 的 a:) 同一种写法。
+  var pairTitle = function (peer) { return nameOf(ROLE) + ' 与 ' + nameOf(peer) + ' 的对话'; };
   var renderHead = function () {
     var who = $('#ch-who'), acts = $('#ch-acts');
     if (VIEW === 'jobs') {
@@ -1022,29 +1157,29 @@
     }
     var c = convOf(CONV);
     if (!c) { who.innerHTML = ''; acts.innerHTML = ''; return; }
-    // 某 role 在一个群里的全部记录 (「chat 内全部」下与我无往来的子项): 顶栏与成对子项同一种写法 —— 只写它,
-    // 「在 <群>」点回整个群。
+    // 某 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>';
+        '<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" title="' + esc(c.name) + '"></span>';
+      who.innerHTML = '<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>' +
+      var withName = pairTitle(WITH);
+      who.innerHTML = '<span class="t" title="' + esc(withName) + '">' + esc(withName) + '</span>' +
         '<span class="sub">在 <button type="button" class="up" id="ch-up" title="' + esc('看 ' + c.name + ' 的全部记录') + '">' + esc(c.name) + '</button></span>';
       acts.innerHTML = '';
       bindBack();
@@ -1053,19 +1188,19 @@
       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>';
+      who.innerHTML = '<span class="av">📋</span><span class="t">' + jobCrumbs(c.key.slice(2)) + esc(c.name) + '</span>' +
+        '<span class="sub">' + esc(c.key.slice(2)) + (c.job ? ' · 开单 ' + nm(c.job.owner, '', true) : '') + stageTag(c.job) + jobTag(c.job) + stuckTag(c.job) + '</span>';
+      who.querySelectorAll('.jcrumb [data-job]').forEach(function (b) { b.onclick = function () { openJob(b.getAttribute('data-job')); }; });
       acts.innerHTML = '';
       bindBack();
       bindGo(who);
       return;
     }
-    // 一对一 (私聊, 或群里「只看我与 X」) 两端都亮头像: 我在前, 对端在后, 各自是切视角的入口。
-    var dm = dmOf(c);
+    // 一对一 (私聊, 或群里「只看我与 X」) 与关系图卡片的窗口同一种写法: 「我 与 它 的对话」, 不画头像。
     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) : '<span class="nm chat">' + esc(c.name) + '</span>') + '</span>';
+    var pairName = peer && pairTitle(peer);
+    who.innerHTML = peer ? '<span class="t" title="' + esc(pairName) + '">' + esc(pairName) + '</span>'
+      : '<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);
@@ -1124,45 +1259,53 @@
     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) + '</div>';
     }
-    var me = eyeOf();
+    var me = viewpointOf();
     var mine = m.from === me;
     var other = mine ? m.to : m.from;
     // 看 key 而不是会话列表: 换视角就地重包时, 列表还是上一个 role 的。
     var group = CONV.indexOf('p:') !== 0;
-    // 顶栏那个对端是相对 ROLE 的; 消息区换成了它 (EYE) 的视角时, 它的对端就是 ROLE。
+    // 顶栏那个对端是相对 ROLE 的; 详情区的 viewpoint 换成了它时, 它的对端就是 ROLE。
     var peer = group ? pairPeer(convOf(CONV)) : CONV.slice(2);
-    if (EYE && peer === EYE) peer = ROLE;
+    if (VIEWPOINT && peer === VIEWPOINT) peer = ROLE;
     // 说给谁: 群里我不是收信方的那条 (X → Y); 我发的那条, 收信方不是顶栏那个对端时
     // (一对一里收信方就是顶栏那个对端, 不再重复写)。
-    var dst = mine
+    // 两个 role 之间的对话 (标题「X 与 Y 的对话」) 里对象就是另一方, 不标; 多方视图才标。
+    var c = convOf(CONV);
+    var two = !group || !!pairPeer(c) || (!!c && c.kind === 'all' && c.peers.length === 1);
+    var dst = two ? '' : mine
       ? (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) + 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(roleLabel(dst)) + '</span><span class="dn">' + esc(nameOf(dst)) + '</span>' +
-        (mine ? '<i class="arr">←</i>' : '') + '</span>'
+    // 说给谁画进文本泡泡开头 (头像 + 名字); 点它走移交行同一套跳转 (data-hfrom/hto/hch + gid/gts), 不换页面视角。
+    var toIn = dst
+      ? '<span class="to-in" role="button" tabindex="0" data-hfrom="' + esc(m.from) + '" data-hto="' + esc(m.to) + '" data-hch="' + esc(m.channel || '') +
+        '" data-gid="' + esc(m.id) + '" data-gts="' + m.ts + '" title="' + esc('发给 ' + nameOf(m.to) + ' —— 看这段往来') + '"><span class="av">' +
+        esc(roleLabel(m.to)) + '</span><span class="nm ' + kindOf(m.to) + '">' + esc(nameOf(m.to)) + '</span></span>'
       : '';
+    var withTo = function (html) {
+      if (!toIn) return html;
+      // 只挂进这条消息自己的正文: 移交体也是 .md-body, 但它发给被移交的那个 wizard, 服务端已挂好它自己的 .to-in。
+      var t = document.createElement('template');
+      t.innerHTML = html;
+      var body = [].find.call(t.content.querySelectorAll('.q-body, .md-body'), function (b) { return !b.closest('.handoff'); });
+      if (!body) return '<div class="to-row">' + toIn + '</div>' + html;
+      body.insertAdjacentHTML('afterbegin', toIn);
+      return t.innerHTML;
+    };
     var priv = !m.channel && group ? '<span class="ch priv">私聊</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)
-      : avBtn(m.from) + nm(m.from, '', true) + to + priv + stamp(m.ts) + stat;
+      ? stamp(m.ts) + stat + avBtn(m.from)
+      : avBtn(m.from) + nm(m.from, '', true) + 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>';
+      (sw ? '<span class="fi"><span class="fn">' + esc(nameOf(other)) + '</span>' + CHEVRON + '</span>' : '') + '</button>';
     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>' +
+      '<div class="mcol"><div class="mwho">' + who + '</div><div class="mb">' + jobChips(withTo(m.dir === 'out' ? signCut(m.html, m.from) : m.html)) + '</div></div>' +
       flip +
     '</div>';
   };
@@ -1218,6 +1361,13 @@
 
   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], .tg-job .go[data-r]');
+    // 定时行开的是页面视角自己的日程: 片段不随视角 (服务端只标发话方), 能不能点在这里按 ROLE 定;
+    // 别人的那行不可点, 只剩 chevron 展开 prompt。换视角就地重包时也走这里。
+    el.querySelectorAll('.handoff .ho-line[data-hplan]').forEach(function (b) {
+      var mine = b.getAttribute('data-hplan') === ROLE;
+      b.classList.toggle('plan-go', mine);
+      if (mine) b.title = '打开 ' + nameOf(ROLE) + ' 的日程'; else b.removeAttribute('title');
+    });
   };
   var rowNode = function (id) {
     var list = inner.querySelectorAll('.mrow');
@@ -1278,10 +1428,11 @@
   };
 
   // land: 换视角时由它来定位 (锚住一条旧消息), 返回 false 才照常吸底。
-  var loadMsgs = function (limit, land) {
+  // early: 换视角时与摘要并行发出的同一个请求 (见 refresh) —— 窗口参数没变才拿来用。
+  var loadMsgs = function (limit, land, early) {
     var gen = S.gen;
     if (!CONV) { inner.innerHTML = '<div class="empty">选一个会话</div>'; return Promise.resolve(); }
-    return api('api/msgs', viewParams(limit ? { limit: limit } : {})).then(function (d) {
+    return (early || api('api/msgs', viewParams(limit ? { limit: limit } : {}))).then(function (d) {
       if (!d.ok || gen !== S.gen) return;
       S.frags = {};
       d.msgs.forEach(function (m) { S.frags[m.id] = m; });
@@ -1357,6 +1508,7 @@
   // 收下摘要 (视角、会话列表、落地窗口) 与按它画页头侧栏分开: 换视角整窗重拉时, 画要等到新行到手的同一帧。
   var takeRole = function (d) {
     R.at = d.at || Date.now(); R.recvAt = Date.now();
+    if (!BASE) BASE = R.at;
     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.inflight = d.inflight || [];
@@ -1406,17 +1558,32 @@
     syncUrl();
     // 要做 FLIP 就把旧行留到新行到来 —— 中间闪一下「加载中」就量不到旧位置了。
     if (!land) inner.innerHTML = '<div class="empty">加载中…</div>';
+    // 关系图上换视角: 自己那张卡片的窗口要等新树画出来才知道 (W.pickSelf), 正文等它定了只取一次;
+    // 否则窗口已定, 正文与摘要并行取 —— 摘要改了窗口 (落点 / session) 就作废重取。
+    var hold = WORLD && W.pickSelf === ROLE;
+    // 窗口的指纹: 不带 session 与 session=all 取的是同一份 (摘要会把空的回填成 all)。
+    var winSig = function () { var p = viewParams(); if (p.session === 'all') delete p.session; return new URLSearchParams(p).toString(); };
+    var want = hold || !CONV ? '' : winSig();
+    var early = want ? api('api/msgs', viewParams()) : null;
+    W.pickHold = hold;
     return api('api/role', viewParams()).then(function (d) {
       if (!d.ok) {
         document.body.innerHTML = '<div class="empty" style="padding:80px">' + esc(d.error || 'not found') + '</div>';
         return;
       }
-      // 带 land 的 (换视角) 先不画: 页头换了高度, 旧行会在新行到来前先被顶一下, FLIP 的起点就错了。
-      if (land) takeRole(d); else applyRole(d);
+      // 带 land 的 (换视角) 只先画侧栏 (名片 + 会话列表, 不碰详情区的几何): 页头 / 页脚换了高度,
+      // 旧行会在新行到来前先被顶一下, FLIP 的起点就错了 —— 它们等新行到手的同一帧画。
+      if (land) { takeRole(d); reveal(); renderRole(); if (!WORLD) renderConvs(); } else applyRole(d);
+      if (restoreSess()) return refresh(land);
       syncUrl();
-      if (WORLD || VIEW === 'plan') loadWorld();
+      var world = WORLD || VIEW === 'plan' ? loadWorld() : null;
       if (VIEW === 'charter') loadCharter();
-      return loadMsgs(undefined, land && function () { paintRole(); return land(); }).then(function () {
+      return Promise.resolve(hold && world).then(function () {
+        W.pickHold = false;
+        syncUrl();
+        var fresh = early && want === winSig() ? early : null;
+        return loadMsgs(undefined, land && function () { paintRole(); return land(); }, fresh);
+      }).then(function () {
         if (land && !inner.querySelector('.mrow')) paintRole();   // 空窗口不走 land, 页头照样要画
         connect();
       });
@@ -1424,8 +1591,8 @@
   };
 
   // land: 见 loadMsgs —— 搜索跳到一条具体消息时由它来定位, 不吸底。
-  var selectConv = function (key, withRole, land, eye) {
-    CONV = key; WITH = withRole || ''; EYE = eye && eye !== ROLE ? eye : '';
+  var selectConv = function (key, withRole, land, viewpoint) {
+    CONV = key; WITH = withRole || ''; VIEWPOINT = viewpoint && viewpoint !== ROLE ? viewpoint : '';
     reveal();
     if (VIEW !== 'msgs') setView('msgs');
     app.classList.add('reading');
@@ -1450,7 +1617,7 @@
     var withBack = keep && WITH === id ? from : '';
     // 整个频道 / 两人私聊 / 群里的一对, 消息集合都与视角无关 —— 集合没变就就地翻面。
     var same = VIEW === 'msgs' && (!WITH || withBack) && !SESSION && (keep || CONV.indexOf('p:') === 0);
-    ROLE = id; WITH = withBack; SESSION = ''; EYE = '';
+    ROLE = id; WITH = withBack; SESSION = ''; VIEWPOINT = '';
     CONV = keep || (CONV.indexOf('p:') === 0 ? 'p:' + from : '');
     // 停在关系图时换视角 = 选中新视角自己那张卡片: 先开它的全部对话 (不留旧选中 / 空白),
     // 新树画出来知道它连着谁后, renderWorld 再收窄成那张卡片的窗口 (W.pickSelf)。
@@ -1625,13 +1792,16 @@
   //   · 只算选中 session 时间范围内发生的 —— 边的每次发生都带着时刻 (WorldEdge.ts)
   // 每种关系一种线色 (CSS 里 li.<kind> / .ek.<kind> 同色), 画在树线、卡片入口的 label 与图例上。
   var KIND = {
-    spawn: { mark: '子', tip: 'spawn 的白板 wizard, 只有出身、没有继承上下文' },
-    clone: { mark: '分身', tip: 'fork 自父亲的 session, 开局带着那一刻的上下文' },
-    peer: { mark: '对话', tip: 'send_peer 发起的对话' },
+    // 生它、归它管的那一位下面挂的是 clone (带上下文) 或 spawn (白板) —— 与调用框下的提示行同一套字。
+    // clone 徽标点了落到 origin 里的分叉处。
+    clone: { mark: 'clone', tip: 'clone_wizard 生的分身: fork 了上下文, 开局带着那一刻读过的一切; 归生它的那位管 —— 点了看它在哪一处分叉' },
+    spawn: { mark: 'spawn', tip: 'spawn_wizard / dispatch 白板生的: 不继承上下文, 只是归生它的那位管 (不带 detached)' },
+    fork: { mark: '⑂ 上下文', tip: '分身的上下文 fork 自它 —— 生它、归它管的是另一位' },
+    peer: { mark: '💬', tip: 'send_peer 发起的对话' },
     job: { mark: '工单', tip: '它开的工单里有这位成员' },
     graph: { mark: '流水线', tip: '流水线里上一步喂给下一步' },
   };
-  var LINEAGE = { spawn: 1, clone: 1 };
+  var LINEAGE = { spawn: 1, clone: 1, fork: 1 };
 
   // 老 webview 未必有 CSS.escape, 而 target 里带着 `:` 和 `#` —— 不转义选择器直接抛异常。
   var cssEsc = function (v) {
@@ -1647,7 +1817,8 @@
   // ── 时间窗: profile 里选中的 session; 全部 = 不设限 ──
   var rangeOf = function () {
     var s = R.sessions.filter(function (x) { return x.sessionId === SESSION; })[0];
-    return s ? { from: s.start, to: s.end || Infinity, s: s } : null;
+    var cut = winCut();
+    return s ? { from: Math.max(s.start, cut), to: s.end || Infinity, s: s } : cut ? { from: cut, to: Infinity, s: null } : null;
   };
   var inRange = function (rg, t) { return !rg || (t >= rg.from && t <= rg.to); };
 
@@ -1663,12 +1834,19 @@
 
   /** 窗内的关系: 一对有向 (a→b) 一条, kinds = 各种类在窗内发生几次。 */
   var relations = function (rg) {
-    var pairs = W.edges.map(function (e) {
-      return { kind: e.kind, from: e.from, to: e.to, cross: e.cross, jobs: e.jobs || [], ts: e.ts && e.ts.length ? e.ts : [e.lastTs] };
-    }).concat(jobEdges()).reduce(function (m, e) {
-      // 家谱是身份, 不是发生在某段 session 里的事 —— 不受时间窗裁剪, 否则切到子 wizard 时
-      // 它的出生早于自己的 session, 父亲那条边就被裁掉了。
-      var ts = LINEAGE[e.kind] ? e.ts : e.ts.filter(function (t) { return inRange(rg, t); });
+    var all = W.edges.map(function (e) {
+      return { kind: e.kind, from: e.from, to: e.to, cross: e.cross, jobs: e.jobs || [], ts: e.ts && e.ts.length ? e.ts : [e.lastTs], point: e.point };
+    }).concat(jobEdges());
+    // 时间范围里有过往来 (任一种非家谱边, 任一端) 的 role。
+    var active = all.reduce(function (m, e) {
+      if (!LINEAGE[e.kind] && e.ts.some(function (t) { return inRange(rg, t); })) { m[e.from] = 1; m[e.to] = 1; }
+      return m;
+    }, {});
+    var pairs = all.reduce(function (m, e) {
+      // 家谱是身份, 不是发生在某段 session 里的事 —— 不受 session 裁剪, 否则切到子 wizard 时
+      // 它的出生早于自己的 session, 父亲那条边就被裁掉了。时间范围 (WIN) 照裁: 子 wizard 在范围里没有
+      // 往来, 它那条家谱边也不画 —— 与侧栏同一刀 (inWin), 闲了一小时的分身不该因为出身留在「半小时」里。
+      var ts = LINEAGE[e.kind] ? (!WIN || active[e.to] ? e.ts : []) : e.ts.filter(function (t) { return inRange(rg, t); });
       if (!ts.length) return m;
       var k = e.from + '\u0000' + e.to;
       var p = m[k] || (m[k] = { from: e.from, to: e.to, kinds: {}, n: 0, first: Infinity, last: 0, cross: e.cross, jobs: [] });
@@ -1677,6 +1855,7 @@
       p.first = Math.min(p.first, Math.min.apply(null, ts));
       p.last = Math.max(p.last, Math.max.apply(null, ts));
       e.jobs.forEach(function (id) { if (p.jobs.indexOf(id) < 0) p.jobs.push(id); });
+      if (e.point) p.point = e.point;
       return m;
     }, {});
     // 派活本身带着工单号时, 「工单」标记就是重复的。
@@ -1688,7 +1867,8 @@
   var forestOf = function (pairs) {
     var list = Object.keys(pairs).map(function (k) { return pairs[k]; });
     var inc = list.reduce(function (m, p) { (m[p.to] = m[p.to] || []).push(p); return m; }, {});
-    var weight = function (p) { return (p.kinds.spawn ? 3e6 : p.kinds.clone ? 2e6 : 0) + p.n; };
+    // 主父亲: 生它的那位 (spawn / clone) 先于上下文来源 (fork), 再先于派活。
+    var weight = function (p) { return (p.kinds.spawn || p.kinds.clone ? 3e6 : p.kinds.fork ? 2e6 : 0) + p.n; };
     var pp = Object.keys(inc).reduce(function (m, t) {
       m[t] = inc[t].slice().sort(function (a, b) { return weight(b) - weight(a) || a.first - b.first; })[0];
       return m;
@@ -1724,7 +1904,11 @@
     close();
     // 兄弟的顺序在画的时候定 (按卡片的时刻, 同会话列表), 这里不排。
     var kids = kidsIn();
-    return { pairs: pairs, inc: inc, pp: pp, kids: kids, roots: roots, ends: ends };
+    // 人直接对 wizard 说话的那条边不是它的主父亲 (主父亲多是生它的那位) 时, 在人下面再挂一张它的引用卡:
+    // 同一个节点、同一个窗口, 只是承载的是人 → 它这条边; 引用卡不再往下展开 (后代在它的本位上画)。
+    var refs = list.filter(function (p) { return kindOf(p.from) === 'human' && pp[p.to] !== p; })
+      .reduce(function (m, p) { (m[p.from] = m[p.from] || []).push(p); return m; }, {});
+    return { pairs: pairs, inc: inc, pp: pp, kids: kids, refs: refs, roots: roots, ends: ends };
   };
 
   // F.vis: 只看相关时画哪些 (见 visibleOf); 没有 = 全画。
@@ -1743,19 +1927,19 @@
     return '<span class="tlab"' + (p.jobs.length ? ' title="经手的工单: ' + esc(p.jobs.join(' ')) + '"' : '') + '>' +
       // 工单这一种关系由 📋 那一枚说 (可点, 列的就是这几张), 不再另挂「工单 ×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>';
+        return '<span class="ek ' + k + '"' + (k === 'clone' && p.point ? ' data-cpoint="' + esc(JSON.stringify(p.point)) + '"' : '') + ' title="' + KIND[k].tip + '">' + KIND[k].mark +
+          (!LINEAGE[k] ? ' ' + p.kinds[k] : '') + '</span>';
       }).join('') +
       (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>';
+      (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) {
-    return !p ? 'root' : ['spawn', 'clone', 'peer', 'job', 'graph'].filter(function (k) { return p.kinds[k]; })[0] || 'peer';
+    return !p ? 'root' : ['spawn', 'clone', 'fork', 'peer', 'job', 'graph'].filter(function (k) { return p.kinds[k]; })[0] || 'peer';
   };
 
   // ── 卡片承载指进来的那条边 (主父亲 → 它): 预览取视角与对端在侧栏里现成的那一项 ──
-  var edgeEnds = function (F, t) { var p = F.pp[t]; return p ? [p.from, t] : [t]; };
+  var edgeEnds = function (F, t, p) { p = p || F.pp[t]; return p ? [p.from, t] : [t]; };
   // 视角 role 与 other 之间的那一项: 私聊优先, 否则挑最近说过话的那个群里的「只看我与它」。
   var pairConv = function (other) {
     if (convOf('p:' + other)) return ['p:' + other, ''];
@@ -1765,23 +1949,30 @@
     return hit ? [hit[0].key, dmOf(hit[0]) ? '' : other] : null;
   };
   // 视角这一端与边另一端之间、侧栏里现成的那一项 (视角不在边上 / 这段里没说过话 = 没有)。
-  var edgeConv = function (F, t) {
-    var ends = edgeEnds(F, t);
+  var edgeConv = function (F, t, e) {
+    var ends = edgeEnds(F, t, e);
     var other = ends.length === 2 && ends.indexOf(ROLE) >= 0 && ends.filter(function (x) { return x !== ROLE; })[0];
     return other ? pairConv(other) : null;
   };
-  // 点任何一张卡片 (视角自己也一样) 看的窗口: 它与图上和它相连的那几个 role 之间的对话, 不换视角。
+  // 点任何一张卡片 (视角自己也一样) 看的窗口: 它与图上和它相连的那几个 role 之间的对话。整页视角不换,
+  // 只有详情区的 viewpoint 站到被点的那个 role 上: 这段往来是它的, 它说的靠右。侧栏子项是页面视角自己与对端的那一对, 不带 viewpoint。
   // links = 这一次画出来的树里, 它的父亲与孩子 (见 linksOf); 一个都没连着 = 它的全部对话。
   var talkKey = function (links, t) {
     var ls = links[t] || [];
     return 'a:' + t + (ls.length ? '|' + ls.join(',') : '');
   };
-  // 图上相连 = 画出来的主父亲边: 它的父亲 + 它的孩子, 两端都画出来了才算。
+  // 图上相连 = 画出来的边: 它的父亲 + 它的孩子 + 引用卡两端 (人 ↔ 它), 两端都画出来了才算。
   var linksOf = function (F, shown) {
     var on = shown.reduce(function (m, n) { m[n.target] = 1; return m; }, {});
+    var refIn = Object.keys(F.refs).reduce(function (m, h) {
+      F.refs[h].forEach(function (p) { (m[p.to] = m[p.to] || []).push(h); });
+      return m;
+    }, {});
+    var refOut = function (t) { return (F.refs[t] || []).map(function (p) { return p.to; }); };
     return shown.reduce(function (m, n) {
       var t = n.target, p = F.pp[t];
-      m[t] = (p && on[p.from] ? [p.from] : []).concat((F.kids[t] || []).filter(function (k) { return on[k]; }));
+      m[t] = (p && on[p.from] ? [p.from] : []).concat(F.kids[t] || [], refIn[t] || [], refOut(t))
+        .filter(function (k, i, a) { return on[k] && a.indexOf(k) === i; });
       return m;
     }, {});
   };
@@ -1793,10 +1984,10 @@
   // (边的下端是视角) 的对端是它的父亲 —— 拿会话项的身份去画, 这张卡片就成了父亲的分身。
   // 时刻与最近一句取自卡片自己的窗口 (点它打开的那一份, 服务端 /api/glance 用同一个 talkOf 算, 说话人前缀
   // 也在那里定); 窗口还没取到 (或第一遍量树时) 退回视角与对端的会话项 / 节点。未读跟着视角与对端的会话项走。
-  var cardGlance = function (F, t) {
-    var hit = edgeConv(F, t), c = hit && convOf(hit[0]);
+  var cardGlance = function (F, t, e) {
+    var hit = edgeConv(F, t, e), c = hit && convOf(hit[0]);
     var s = c && hit[1] && (c.subs || []).filter(function (x) { return x.role === hit[1]; })[0];
-    var n = nodeOf(t) || {}, p = F.pp[t];
+    var n = nodeOf(t) || {}, p = e || F.pp[t];
     var base = c ? glance(c, s || undefined) : { lastTs: p ? p.last : n.lastTs || 0, preview: n.preview || '', unread: 0 };
     var w = F.links && W.glance[talkKey(F.links, t)];
     return w ? { lastTs: w.lastTs, preview: w.preview, unread: base.unread } : base;
@@ -1827,14 +2018,15 @@
     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) {
+  // e = 引用卡承载的那条边 (人 → 它); 没有 = 本位卡片, 承载主父亲边。
+  var tnodeHTML = function (F, n, e) {
     var me = n.target === ROLE;
-    var p = F.pp[n.target];
-    var row = roleRow(n.target, n.name, n.label, cardGlance(F, n.target), n, '', otherRels(F, n.target));
+    var p = e || F.pp[n.target];
+    var row = roleRow(n.target, n.name, n.label, cardGlance(F, n.target, e), n, '', otherRels(F, n.target));
     var via = F.vis && F.vis[n.target] === 'via';
     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) + ' 没有直接关系, 留着是为了连到它下面有关系的') + '"' : '') + '>' +
+    return '<button class="ci tci' + (me ? ' me' : '') + (e ? ' ref' : '') + (via ? ' via' : '') + (n.ghost ? ' ghost' : '') + (jin || '') + (F.links && CONV === talkKey(F.links, n.target) ? ' on' : '') + '" data-t="' + esc(n.target) + '"' +
+      (n.ghost ? ' title="' + esc(nameOf(n.target) + ' 已停且没有记录, 这里只是占位, 代表它挂着下面的后代') + '"' : via ? ' title="' + esc(nameOf(n.target) + ' 和 ' + nameOf(ROLE) + ' 没有直接关系, 留着是为了连到它下面有关系的') + '"' : '') + '>' +
       labelHTML(p) + row + '</button>';
   };
 
@@ -1844,13 +2036,19 @@
     if (!n || seen[t] || depth > 32) return '';
     seen[t] = 1;
     shown.push(n);
-    var kids = (F.kids[t] || []).filter(function (k) { return shows(F, k); }).sort(byCard(F));
+    // 孩子 = 本位的主孩子 + 引用卡 (它是人时, 它直接说过话、但主父亲另有其人的 wizard), 一起按卡片时刻排。
+    var kids = (F.kids[t] || []).filter(function (k) { return shows(F, k); }).map(function (k) { return { t: k }; })
+      .concat((F.refs[t] || []).filter(function (p) { return shows(F, p.to) && nodeOf(p.to); }).map(function (p) { return { t: p.to, e: p }; }))
+      .sort(function (a, b) { return recentFirst(cardGlance(F, a.t, a.e), cardGlance(F, b.t, b.e)); });
     // 选中工单时: 两端都是它的当事人 (含开单者) 的那道线才亮。
-    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) +
+    var jl = function (u, p) { return F.job ? (F.job.in[u] && p && F.job.in[p.from] ? ' jline' : ' jdim') : ''; };
+    var zs = function (z) { return z ? ' style="z-index:' + z + '"' : ''; };
+    return '<li class="' + domKind(F.pp[t]) + jl(t, F.pp[t]) + '"' + zs(z) + '>' + tnodeHTML(F, n) +
       // 兄弟的线共用一段竖干, 越往下的越长: 短的叠在上面 (z 随序号递减), 每条线的末段都看得见自己的颜色。
       (kids.length ? '<ul>' + kids.map(function (k, i) {
-        return treeHTML(F, k, depth + 1, shown, seen, kids.length - i);
+        return k.e
+          ? '<li class="' + domKind(k.e) + jl(k.t, k.e) + '"' + zs(kids.length - i) + '>' + tnodeHTML(F, nodeOf(k.t), k.e) + '</li>'
+          : treeHTML(F, k.t, depth + 1, shown, seen, kids.length - i);
       }).join('') + '</ul>' : '') +
       '</li>';
   };
@@ -1858,7 +2056,23 @@
   // 只看相关时画谁: 视角自己 + 和视角有直接关系的 (任一种, 任一方向; 'rel'); 它们通向根的主父亲链上
   // 与视角无关的祖先留作连接 ('via', 画淡) —— 抹掉它, 有关系的后代就从家谱上脱开, 成了一棵来历不明的孤树。
   var visibleOf = function (F) {
-    var keep = Object.keys(F.ends).filter(function (t) { return t === ROLE || F.pairs[ROLE + '\u0000' + t] || F.pairs[t + '\u0000' + ROLE]; });
+    // 相关 = 沿关系边 (任一种, 任一方向) 一路走得到的整个连通块, 不止一跳: 间接、多跳的也展开。
+    var nbr = Object.keys(F.pairs).reduce(function (m, k) {
+      var p = F.pairs[k];
+      (m[p.from] = m[p.from] || []).push(p.to);
+      (m[p.to] = m[p.to] || []).push(p.from);
+      return m;
+    }, {});
+    var reach = function (seen, frontier) {
+      if (!frontier.length) return seen;
+      var next = frontier.reduce(function (acc, t) {
+        (nbr[t] || []).forEach(function (o) { if (!seen[o]) { seen[o] = 1; acc.push(o); } });
+        return acc;
+      }, []);
+      return reach(seen, next);
+    };
+    var linked = reach((function (o) { o[ROLE] = 1; return o; })({}), [ROLE]);
+    var keep = Object.keys(F.ends).filter(function (t) { return t === ROLE || linked[t]; });
     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'; }); });
@@ -1879,10 +2093,10 @@
     var F = forestOf(relations(rg));
     F.job = jobOfConv();
     var me = nodeOf(ROLE);
-    var all = W.treeAll || !me;
+    // 只画相关的 (visibleOf); 视角不是图上的节点 (没有关系可言) 才全画。
+    var all = !me;
     var shown = [];
     var path = me ? chainUp(F, ROLE) : [];
-    // 和视角没有直接关系的只在「看全部」里画。
     F.vis = all ? null : visibleOf(F);
     var draw = function (into) {
       return F.roots.filter(function (r) { return shows(F, r); }).sort(function (a, b) {
@@ -1900,16 +2114,17 @@
     if (W.pickSelf === ROLE && W.role === ROLE && R.role && R.role.id === ROLE) {
       W.pickSelf = '';
       var self = talkKey(F.links, ROLE);
-      if (CONV !== self) return selectConv(self, '');
+      // refresh 正等着它定窗口 (W.pickHold): 只改窗口, 正文由 refresh 取一次 —— 不再先取全部对话、再收窄重取。
+      if (CONV !== self && W.pickHold) { CONV = self; WITH = ''; }
+      else if (CONV !== self) return selectConv(self, '');
     }
     var trees = draw([]);
-    var span = rg ? (rg.s === R.sessions[R.sessions.length - 1] ? '最新 session' : 'session ' + fmtClock(rg.from)) : '全部时间';
+    var span = rg ? (!rg.s ? '最近' + (WINS.filter(function (w) { return w[0] === WIN; })[0] || [0, ''])[1] : 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 下拉切换范围">' + (span ? esc(span) + ' · ' : '') + (all ? Object.keys(F.ends).length : shown.length) + ' 个</span>' +
         (W.degraded ? '<span class="warn" title="没拿到 wizard 注册表 (svr 还没收到 daemon 的快照), 只画观测到的往来">名册缺席</span>' : '') +
-        (me ? '<button class="vt" data-tall="' + (all ? 'rel' : 'all') + '" title="' +
-          (all ? '画出范围内所有有关系的 wizard (点击改为只画相关的)' : '只画它自己、和它有直接关系的, 以及连到它们的上游链 (点击改为画全部)') + '">' + (all ? '全部' : '相关') + '</button>' : '') + worldToggle() + '</h2>' +
+        winSelect() + 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>';
@@ -1918,18 +2133,11 @@
     convsEl._tree = html; convsEl._html = '';
     convsEl.innerHTML = html;
     convsEl.querySelectorAll('.tci').forEach(function (el) {
-      el.onclick = function () { selectConv(talkKey(F.links, el.getAttribute('data-t')), ''); };
+      el.onclick = function () { var t = el.getAttribute('data-t'); clickItem(talkKey(F.links, t), '', t); };
     });
     bindGo(convsEl);
-    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');
+    bindWorldToggle(convsEl); bindWin(convsEl);
+    var cur = convsEl.querySelector('.tci.me:not(.ref)');
     if (cur && W.treeFor !== ROLE) { W.treeFor = ROLE; cur.scrollIntoView({ block: 'nearest' }); }
   };
 
@@ -2149,10 +2357,14 @@
   var renderJobList = function () {
     var el = jobsPane().firstChild;
     var js = jobListRows();
+    // 视角里没有的祖先也照账补上, 树才连得起来 (JOB_ONLY 是点名的几张, 不补)。
+    if (!JOB_ONLY) js = js.concat(js.reduce(function (a, c) {
+      return a.concat(jobAncestors(c.job.id).filter(function (id) { return !js.some(function (x) { return x.job.id === id; }); }));
+    }, []).filter(function (id, i, a) { return a.indexOf(id) === i; }).map(jobRowOf).filter(function (c) { return c.job; }));
     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>';
+      return '<h2>' + title + '<span>' + list.length + '</span></h2>' + '<div class="' + cls + '">' + jobTreeOrder(list).map(function (x) { return x.d ? '<div class="jind" style="margin-left:' + (x.d * 16) + 'px">' + convItem(x.c) + '</div>' : convItem(x.c); }).join('') + '</div>';
     };
     var html = js.length
       ? sec('进行中', open, 'jopen') + (closed.length ? sec('已收工', closed, 'jclosed') : '')
@@ -2215,6 +2427,7 @@
   // 侧栏换成关系图 / 换回会话列表。换回时选中的仍是在关系图里点开的那一项, 并把它滚进视野。
   var setWorld = function (on) {
     WORLD = on; W.treeFor = ''; W.pickSelf = '';
+    setPref(WORLD_KEY, on);
     convsEl._html = convsEl._tree = '';
     syncUrl();
     // 手机上侧栏与主区二选一 —— 开关在侧栏里, 结果也在侧栏里。
@@ -2225,9 +2438,9 @@
       // 选中的子项得露出来: 群展开, 排在折叠条后面的连折叠条一起展开。
       var c = convOf(CONV);
       if (c) {
-        OPEN[CONV] = true; OPEN_AT = CONV;
+        OPEN[CONV] = true; OPEN_AT = CONV; saveOpen();
         var rank = c.subs.filter(function (x) { return x.count; }).map(function (x) { return x.role; }).indexOf(WITH);
-        if (rank >= SUB_FOLD) MORE[CONV] = true;
+        if (rank >= SUB_FOLD) setMore(CONV, true);
       }
       renderConvs();
       var sel = convsEl.querySelector('.si.on') || convsEl.querySelector('.ci.on');
@@ -2335,20 +2548,32 @@
     row.classList.remove('hit'); void row.offsetWidth; row.classList.add('hit');
     return true;
   };
-  var landOn = function (id) {
+  // 落到一行里的某一次工具调用 (`use`): 它所在的过程框摊开, 调用框滚到中间闪一下。
+  var focusUse = function (id, use) {
+    if (!focusRow(id)) return false;
+    var b = use && rowNode(id).querySelector('[data-use="' + cssEsc(use) + '"]');
+    if (!b) return true;
+    var g = b.closest('.steps');
+    if (g) { g.classList.remove('folded'); FOLD[g.getAttribute('data-key')] = false; }
+    b.scrollIntoView({ block: 'center' });
+    S.pinned = atBottom();
+    b.classList.remove('hit'); void b.offsetWidth; b.classList.add('hit');
+    return true;
+  };
+  var landOn = function (id, use) {
     return function () {
-      if (focusRow(id)) return true;
-      loadMsgs('0', function () { return focusRow(id); });
+      if (focusUse(id, use)) return true;
+      loadMsgs('0', function () { return focusUse(id, use); });
       return true;
     };
   };
   var jumpMsg = function (h) {
-    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 ((!h.id || inSession(h.ts)) && convOf(h.conv)) return selectConv(h.conv, h.with || '', h.id ? landOn(h.id, h.use) : undefined, h.viewpoint);
+    SESSION = 'all'; CONV = h.conv; WITH = h.with || ''; VIEWPOINT = h.viewpoint && h.viewpoint !== ROLE ? h.viewpoint : '';
     if (VIEW !== 'msgs') setView('msgs');
     app.classList.add('reading');
     reveal();
-    refresh(landOn(h.id));
+    refresh(h.id ? landOn(h.id, h.use) : undefined);
   };
 
   var paintSearch = function (sections) {
@@ -2448,5 +2673,7 @@
   // ── boot ──
   // 带着 role / conv 来的链接直接进阅读态 (手机上不先落在会话列表)。
   if ((ROLE || CONV) && !WORLD) app.classList.add('reading');
+  // 链接已带着 role 与会话: 记下的 session 先放进第一次请求, 省一次重取 (不在列表里由 restoreSess 收拾)。
+  if (SESS_RESTORE && ROLE && CONV && savedSess()) SESSION = savedSess();
   refresh();
 })();