wezard 2.1.4 → 2.2.0

package/web/chat.js

@@ -17,31 +17,26 @@
   var ROLE = qs.get('role') || qs.get('target') || '';
   var CONV = qs.get('conv') || '';
   var WITH = qs.get('with') || '';
+  // '' = 未指定 (服务端按全部时间, 回包里认领成 'all'); 'all' = 全部时间; 其他 = 那一段的 sid。
   var SESSION = qs.get('session') || '';
   var TICK_MS = 3000;
 
   // at / recvAt: 服务端快照时刻与本地收到时刻。所有"现在几点"的判断都换算到
   // 服务端时钟, 否则客户端时钟偏几分钟就会把运行中的会话判成已结束。
-  var R = { at: 0, recvAt: 0, role: null, sessions: [], convs: [], relations: false, schedules: 0, stats: null, winStats: null };
+  var R = { at: 0, recvAt: 0, role: null, sessions: [], convs: [], relations: false, schedules: 0, plan: null, stats: null, winStats: null };
   // frags: 当前窗口的原始片段 (id → 片段)。片段不带方向, 换视角时拿它就地重包左右。
   var S = { es: null, pinned: true, gen: 0, frags: {} };
-  // 关系/日程两栏共用的世界快照。sel = 当前聚焦的节点, kinds = 边类型开关。
+  // 关系/日程两栏共用的世界快照。treeAll = 关系树展开全部; treeFor = 已把谁滚进过视野。
   var W = {
     at: 0, nodes: [], edges: [], chats: [], jobs: [], schedules: [],
-    degraded: false, loaded: false, sel: '', onlyRel: false, kinds: { clone: 1, spawn: 1, peer: 1, graph: 1 },
-    layout: 'cards',
-  };
-  // 读法是个人偏好, 记在本地。存储不可用 (隐私窗口 / 老 webview) 就退回默认。
-  var LAY_KEY = 'wezard.world.layout';
-  try { if (localStorage.getItem(LAY_KEY) === 'force') W.layout = 'force'; } catch (e) { }
-  var setLayout = function (v) {
-    W.layout = v;
-    try { localStorage.setItem(LAY_KEY, v); } catch (e) { }
+    degraded: false, loaded: false, treeAll: false, treeFor: '', glance: {}, gKeys: '',
   };
   var VIEW = 'msgs';
+  // 侧栏是会话列表还是关系图 —— 与右边的 VIEW 无关: 关系图下右边照样是选中的那段对话。
+  var WORLD = qs.get('side') === 'world';
   var $ = function (s) { return document.querySelector(s); };
   var app = $('#app'), thread = $('#thread'), inner = $('#thread-in'), convsEl = $('#convs');
-  var wmapEl = $('#wmap'), wscrollEl = $('#wscroll'), wtoolsEl = $('#wtools'), planEl = $('#plan-in');
+  var planEl = $('#plan-in');
 
   var srvNow = function () { return R.at ? R.at + (Date.now() - R.recvAt) : Date.now(); };
 
@@ -98,6 +93,7 @@
     if (CONV) p.conv = CONV;
     if (WITH) p['with'] = WITH;
     if (SESSION) p.session = SESSION;
+    if (WORLD) p.side = 'world';
     Object.keys(extra || {}).forEach(function (k) { p[k] = extra[k]; });
     return p;
   };
@@ -278,7 +274,16 @@
   });
 
   // ── 左栏: 当前 role 的名片 + 会话列表 ──
-  var convOf = function (key) { return R.convs.filter(function (c) { return c.key === key; })[0]; };
+  // `a:<x>` / `a:<x>|<p1>,<p2>` 不在列表里: x 参与的全部对话 / x 与这几个对端之间的, 按时间排开
+  // (关系图里点卡片看的就是它, 服务端同一个 talkOf) —— 现造一项, 落地时才不会被当成失效的会话退回默认。
+  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: [] };
+    }
+    return R.convs.filter(function (c) { return c.key === key; })[0];
+  };
   // 人的单聊 (user:…) 在数据上是频道, 但对端只有那一个人时同样是一对一。
   var dmOf = function (c) {
     return c && c.kind === 'group' && c.base.indexOf('user:') === 0 && (c.subs || []).length === 1 ? c.subs[0] : null;
@@ -286,6 +291,7 @@
   // 一对一会话的对端 (wizard 私聊 / 人的单聊 / 「只看我与 X」); 不是一对一则空。
   var pairPeer = function (c) {
     if (!c) return WITH || '';
+    if (c.kind === 'all') return '';
     var dm = dmOf(c);
     return c.kind !== 'group' ? c.peer : WITH || (dm ? dm.role : '');
   };
@@ -303,15 +309,17 @@
   // 到点没有新写入就自己熄 (同 expireRows), 不必等下一次推送。
   var ST = { run: '执行中', idle: '空闲', off: '已关闭' };
   var stateOf = function (s) { return wRunning(s) ? 'run' : s.alive ? 'idle' : 'off'; };
-  // 侧栏只在执行中时点一盏灯: 列表里安静是常态, 亮着的才值得看一眼。
-  var lampOf = function (s) {
-    return s && wRunning(s) ? '<i class="live" title="' + ST.run + '"></i>' : '';
+  // 忙闲只有这一个渲染点, 永远挂在名字右边 —— 名片 / 关系树 / 侧栏共用。
+  // 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>';
   };
   var paintStatus = function () {
-    var el = $('#rb-st'), r = R.role;
-    if (!el || !r) return;
-    var k = stateOf(r);
-    el.className = 'st ' + k; el.textContent = ST[k];
+    var el = $('#rb-st');
+    if (el && R.role) el.innerHTML = stTag(R.role);
   };
 
   var avatarOf = function (c, extra) {
@@ -357,12 +365,28 @@
     }).length;
   };
   var reading = function () { return VIEW === 'msgs' && !document.hidden; };
+  // 窗口是 `a:<x>|<peers>` (关系图卡片) 时, 视角与 p 的往来在不在里面 —— 与服务端 talkOf 同一口径:
+  // 一端是 x、另一端是 peers 之一 (peers 空 = 不限), 不分频道。
+  var talkCovers = function (p) {
+    var t = convOf(CONV);
+    if (!t || t.kind !== 'all') 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);
+  };
+  // 一处会话里这次读到了哪几对 (存水位用的 withRole): 侧栏选中的就是那一项; 关系图卡片打开的
+  // 对话横跨会话, 每个会话里落在那段对话里的那几对都算 —— 私聊的那一对记在会话本身 ('')。
+  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; });
+  };
   // 读整个群 = 群的水位推到此刻 (子项随之全清); 只读一对 = 只推那一对的。
   var markRead = function (c) {
-    if (!reading() || c.key !== CONV || !unreadOf(c, WITH)) return;
-    var h = c.heard[c.heard.length - 1];
-    READ.at[readKey(c.key, WITH)] = Math.max(R.at, h ? h[0] : 0);
-    saveRead();
+    if (!reading()) return;
+    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();
   };
 
   // 展开态按会话各记各的: 点开一个不收起别的, 轮询重画也不动它。
@@ -384,11 +408,29 @@
     renderConvs();
   };
 
+  // ── 会话项 / 子项 / 关系图卡片共用的三样: 一行的数据 (glance)、一行的画法 (roleRow)、排序 (recentFirst) ──
+  // glance = 时刻 · 最近一句 · 未读, 取自会话本身 (子项 = 我与它在这个群里的那一对)。
+  var glance = function (c, s) {
+    var x = s || c;
+    return { lastTs: x.lastTs, preview: x.preview, unread: unreadOf(c, s ? s.role : undefined) };
+  };
+  // 同层按最近活动排, 有新话就上浮。
+  var recentFirst = function (a, b) { return b.lastTs - a.lastTs; };
+  // 一个 role 的一行: 头像 · 名字 (+tail) + 忙闲灯 · 时刻 / 最近一句 + 未读。
+  var roleRow = function (id, name, label, g, status, tail) {
+    return goSpan('av', id, esc(label)) +
+      line(nm(id, name, true) + (tail || ''), g.lastTs, g.preview, stTag(status, true), g.unread);
+  };
+  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));
+  };
+  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 title = c.kind === 'wizard' ? nm(c.peer, c.name, true) : '<span class="nm chat">' + esc(c.name) + '</span>';
     // 只列与我有往来的: 在群里但没和我说过话的人, 点进去也是空的。
-    var talked = OPEN[c.key] ? c.subs.filter(function (s) { return s.count; }) : [];
+    var talked = OPEN[c.key] ? c.subs.filter(function (s) { return s.count; }).sort(recentFirst) : [];
     var hidden = talked.length - SUB_FOLD;
     var bar = hidden > 0
       ? '<button class="si-more" data-more="' + esc(c.key) + '">' + (MORE[c.key] ? '折叠' : '展开更多') + ' × ' + hidden + '</button>'
@@ -398,8 +440,7 @@
       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 + ' 条往来') + '">' +
-        goSpan('av', s.role, esc(s.label)) +
-        line(nm(s.role, s.name, true), s.lastTs, s.preview, lampOf(s.status), unreadOf(c, s.role)) + '</button>';
+        subRow(c, s) + '</button>';
     };
     var rest = MORE[c.key] ? talked.slice(SUB_FOLD).map(sub).join('') : '';
     var subs = talked.length
@@ -407,14 +448,23 @@
       : '';
     var sel = on && !WITH;
     return '<button class="ci' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '">' +
-        avatarOf(c) + line(title, c.lastTs, c.preview, lampOf(c.status), unreadOf(c)) +
-      '</button>' + subs;
-  };
-
+        convRow(c) + '</button>' + subs;
+  };
+
+  // 搜索入口挂在名片与关系/日程入口之间 —— 侧栏的公共区, 会话列表与关系图下都在。⌘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>';
+  var sbox = document.createElement('button');
+  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'));
   var renderConvs = function () {
-    var groups = R.convs.filter(function (c) { return c.kind === 'group'; });
-    var dms = R.convs.filter(function (c) { return c.kind !== 'group'; });
+    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);
     R.convs.forEach(markRead);
+    if (WORLD) return renderWorld();
     // 空着的那一栏不画 —— 对谁都一样: 人没有私聊只是这条规则的一个特例。
     var sec = function (title, list) {
       return list.length ? '<h2>' + title + '<span>' + list.length + '</span></h2>' + list.map(convItem).join('') : '';
@@ -438,41 +488,41 @@
     var seg = String(p).replace(/\/+$/, '').split('/').filter(Boolean);
     return seg.length <= 2 ? p : '…/' + seg.slice(-2).join('/');
   };
-  var sessLabel = function (s) {
-    return (s.sessionId ? s.sessionId.slice(0, 8) : '(无 id)') + ' · ' + fmtAgo(s.start) + ' · ' + s.turns + ' 轮';
-  };
+  // session 只靠两样认: 何时开始、跑了几轮。最新那段直接叫「最新」。
+  var latestSess = function () { return R.sessions[R.sessions.length - 1]; };
+  var sessWhen = function (s) { return s.start ? fmtClock(s.start) : '(无时刻)'; };
 
-  // session 切换: 原生 <select> 的弹层画不了样式, 换成按钮 + 列表。
+  // session 切换: name 右边一个小号文字触发器 + 浮层列表。
   // renderRole 每次刷新都重画, 展开态记在 SESS_OPEN 里才不会被轮询收起。
   var SESS_OPEN = false;
   var sessRow = function (s, on) {
-    return '<button class="sp-it' + (on ? ' on' : '') + '" role="option" aria-selected="' + on + '" data-s="' + esc(s.sessionId || '') + '">' +
-      '<span class="id">' + esc(s.sessionId ? s.sessionId.slice(0, 8) : '(无 id)') + '</span>' +
-      '<span class="ago">' + esc(fmtAgo(s.start)) + '</span>' +
+    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="">' +
-      '<span class="id">全部 session</span><span class="n">' + R.sessions.length + ' 个</span></button>';
-    return '<div class="sp' + (SESS_OPEN ? ' open' : '') + '">' +
-      '<button class="sp-btn" aria-haspopup="listbox" aria-expanded="' + SESS_OPEN + '">' +
-        '<span class="lb">session</span>' +
-        '<span class="v">' + esc(cur ? sessLabel(cur) : '全部 ' + R.sessions.length + ' 个') + '</span>' +
-        '<span class="car" aria-hidden="true"></span></button>' +
-      '<div class="sp-list" role="listbox">' + all +
+    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('') +
-      '</div></div>';
+      '</span></span>';
   };
   var setSessOpen = function (open) {
     SESS_OPEN = open;
-    var sp = $('#rb-sess .sp');
+    var sp = $('#rb-sp .sp');
     if (!sp) return;
     sp.classList.toggle('open', open);
     sp.querySelector('.sp-btn').setAttribute('aria-expanded', open);
   };
   var bindSessPicker = function () {
-    var sp = $('#rb-sess .sp');
+    var sp = $('#rb-sp .sp');
     if (!sp) return;
     sp.querySelector('.sp-btn').onclick = function () { setSessOpen(!SESS_OPEN); };
     sp.querySelectorAll('.sp-it').forEach(function (it) {
@@ -480,12 +530,75 @@
     });
   };
   document.addEventListener('click', function (e) {
-    if (SESS_OPEN && !e.target.closest('#rb-sess .sp')) setSessOpen(false);
+    if (SESS_OPEN && !e.target.closest('#rb-sp .sp')) setSessOpen(false);
   });
   document.addEventListener('keydown', function (e) {
     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 relTile = function (r) {
+    var sub = [r.clones.length ? r.clones.length + ' 分身' : '', r.spawns.length ? r.spawns.length + ' 子' : ''].filter(Boolean);
+    return tile('world', '关系图', sub.join(' · '));
+  };
+  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 toast = (function () {
+    var t, el;
+    return function (msg) {
+      el = el || document.body.appendChild(document.createElement('div'));
+      el.className = 'toast on'; el.textContent = msg;
+      clearTimeout(t); t = setTimeout(function () { el.className = 'toast'; }, 1600);
+    };
+  })();
+  // navigator.clipboard 只在安全上下文里有 —— 走 http 的远端页退回 execCommand。
+  var copyText = function (text) {
+    var legacy = function () {
+      var ta = document.body.appendChild(document.createElement('textarea'));
+      ta.value = text; ta.style.cssText = 'position:fixed;opacity:0'; ta.select();
+      var ok = document.execCommand('copy'); ta.remove();
+      return ok ? Promise.resolve() : Promise.reject();
+    };
+    (navigator.clipboard ? navigator.clipboard.writeText(text).catch(legacy) : legacy())
+      .then(function () { toast('已复制 ' + text); }, function () { toast('复制失败'); });
+  };
+
+  // 截断提示: 被省略号 (或 line-clamp) 截掉的文本, 悬停时给 title 看全文 —— 一处委托管全页,
+  // 不必每个渲染点各挂一份。只在真被截断时挂; 元素自带的 title (如「切到 X 的视角」) 不碰。
+  var isClipped = function (el, cs) {
+    return (cs.textOverflow === 'ellipsis' && el.scrollWidth > el.clientWidth + 1) ||
+      (cs.webkitLineClamp !== 'none' && cs.webkitLineClamp !== '' && el.scrollHeight > el.clientHeight + 1);
+  };
+  var clipTip = function (el) {
+    var cs = getComputedStyle(el);
+    if (cs.textOverflow !== 'ellipsis' && (cs.webkitLineClamp === 'none' || !cs.webkitLineClamp)) return false;
+    var ours = el.hasAttribute('data-cliptip');
+    if (el.hasAttribute('title') && !ours) return true;
+    if (isClipped(el, cs)) {
+      el.title = el.textContent.replace(/\s+/g, ' ').trim();
+      el.setAttribute('data-cliptip', '');
+    } else if (ours) {
+      el.removeAttribute('title'); el.removeAttribute('data-cliptip');
+    }
+    return true;
+  };
+  document.addEventListener('mouseover', function (e) {
+    for (var el = e.target; el && el.nodeType === 1 && el !== document.body && !clipTip(el); el = el.parentElement);
+  });
+
   // 名片: 身份 · 出身 · cwd · 出生; 名片下面一排是关系 / 日程入口。
   var renderRole = function () {
     var r = R.role;
@@ -502,32 +615,35 @@
     var facts = [];
     if (r.cwd) facts.push('<span title="' + esc(r.cwd) + '">📁 ' + esc(shortCwd(r.cwd)) + '</span>');
     // 生在哪个群、什么时候 —— 一件事, 一行。
-    var born = [r.chat, r.bornAt ? fmtAgo(r.bornAt) : ''].filter(Boolean);
-    if (born.length) facts.push('<span title="' + esc('创建于' + (r.chat ? ' ' + r.chat : '') + (r.bornAt ? ' · ' + fmtDay(r.bornAt) : '')) + '">🐣 ' + esc(born.join(' · ')) + '</span>');
-    var kin = function (xs, what) {
-      return xs.length ? '<span title="' + esc(xs.map(function (x) { return '.' + x.name; }).join(' ')) + '">' + xs.length + ' 个' + what + '</span>' : '';
-    };
-    facts.push(kin(r.clones, '分身'), kin(r.spawns, '子 wizard'));
+    // 时刻跟着选中的 session 走: 选了一段就是那一段的开始与轮数, 全部就是最早那段起、共几轮。
+    var cur = R.sessions.filter(function (x) { return x.sessionId === SESSION; })[0];
+    var span = cur ? [cur] : R.sessions;
+    var t0 = span.reduce(function (m, x) { return x.start && (!m || x.start < m) ? x.start : m; }, 0);
+    var turns = span.reduce(function (n, x) { return n + (x.turns || 0); }, 0);
+    var when = [r.chat, t0 ? (cur ? '' : '自 ') + fmtClock(t0) : '', turns ? turns + ' 轮' : ''].filter(Boolean);
+    if (when.length) facts.push('<span title="' + esc((cur ? 'session ' + cur.sessionId : '全部 ' + R.sessions.length + ' 段 session') +
+      (t0 ? ' · 开始于 ' + fmtDay(t0) : '')) + '">🕘 ' + esc(when.join(' · ')) + '</span>');
     $('#rb-who').innerHTML =
       '<div class="id"><span class="av">' + esc(r.label) + '</span>' +
-        '<span class="l">' + nm(r.id, r.name) +
-          (kind ? '<span class="k">' + kind + (r.kind === 'wizard' ? '<span class="st" id="rb-st"></span>' : '') + '</span>' : '') + '</span></div>' +
+        '<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>' +
+          (kind ? '<span class="k">' + kind + '</span>' : '') + '</span></div>' +
       (r.description ? '<p class="job">' + esc(r.description) + '</p>' : '') +
       '<div class="facts">' + facts.join('') + '</div>';
     paintStatus();
+    $('#rb-who').querySelector('.cp').onclick = function () { copyText(nameOf(r.id)); };
     $('#rb-who').querySelectorAll('.go').forEach(function (g) {
       g.onclick = function () { switchRole(g.getAttribute('data-r')); };
     });
-    $('#rb-sess').innerHTML = R.sessions.length > 1 ? sessPicker() : '';
-    $('#rb-foot').hidden = R.sessions.length < 2;
+    // 老外壳的底栏选择框已并进 name 行。
+    if ($('#rb-foot')) $('#rb-foot').hidden = true;
     bindSessPicker();
-    var acts = [];
-    // 入口只在有东西可看时出现 —— 挂在名片下、会话列表上, 不挤进名片: 名片的主角是身份。
-    if (R.relations) acts.push('<button class="bd' + (VIEW === 'world' ? ' on' : '') + '" data-view="world">关系图</button>');
-    if (R.schedules) acts.push('<button class="bd' + (VIEW === 'plan' ? ' on' : '') + '" data-view="plan">日程<b>' + R.schedules + '</b></button>');
-    $('#rb-acts').innerHTML = acts.join('');
+    // 入口只在有东西可看时出现 —— 挂在名片下、会话列表上, 不挤进名片: 名片的主角是身份,
+    // 家谱计数 (几个分身 / 子 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) {
-      b.onclick = function () { setView(VIEW === b.getAttribute('data-view') ? 'msgs' : b.getAttribute('data-view')); };
+      var v = b.getAttribute('data-view');
+      b.onclick = function () { v === 'world' ? setWorld(!WORLD) : setView(VIEW === v ? 'msgs' : v); };
     });
     // 标题就是这一页的主张: 你此刻站在谁的位置上。换视角 → 标题跟着换。
     document.title = nameOf(r.id) + ' 的视角';
@@ -535,14 +651,17 @@
 
   // ── 用量条: 一组轮次的总账 ──
   // usageHTML 只管「一本账长什么样」(TagSummary → 一条), 账是谁的、挂在哪由 renderUsage 定。
+  // 按单价从省到贵排, 颜色随之由冷转暖: 缓存读 (约 0.1×, 通常占了大半) 退成浅灰蓝不抢眼 →
+  // 输入 (1×) 沉稳蓝 → 缓存写 (1.25×) 琥珀提醒 → 输出 (约 5×, 最贵) 珊瑚红警示。注意力留给后三段。
   var SEGS = [
-    ['input', '输入', '#0a7d6b'], ['cacheRead', '缓存读', '#8250df'],
-    ['cacheWrite', '缓存写', '#953800'], ['output', '输出', '#1a7f37'],
+    ['cacheRead', '缓存读', '#aab7c8', 'cr'], ['input', '输入', '#4c6fd6', 'in'],
+    ['cacheWrite', '缓存写', '#e0a030', 'cw'], ['output', '输出', '#e4572e', 'out'],
   ];
   var TIP = {
     turns: '对话轮数', tools: '工具调用次数', api: 'API 请求次数',
     ctx: '上下文峰值 — 单次请求送入的 input + 缓存 的最高值', time: '累计耗时',
   };
+  var ICON = { turns: '💬', tools: '🛠️', api: '📡', ctx: '🧠', time: '⏱️' };
   var liveDur = function (t) {
     var d = (t.usage && t.usage.durationMs) || 0;
     if (!t.runningUntil) return d;
@@ -553,59 +672,106 @@
     var segs = SEGS.filter(function (s) { return u[s[0]] > 0; });
     var total = segs.reduce(function (a, s) { return a + u[s[0]]; }, 0);
     // 值为 0 = 该指标没有数据 (老记录 / 网关不报 usage), 不占位置。
+    // 指标一律 emoji 在前、数字在后, 不挂英文名 (含义在 title 里)。
+    // data-tip: 被 fitUsage 藏起来时, 它在整条 bar 的 title 里怎么读。
     var kv = function (k, n, text) {
-      return n ? '<span class="kv" title="' + esc(TIP[k] || k) + '"><b>' + esc(text) + '</b>' + k + '</span>' : '';
+      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 里 (占比在悬停提示), 色点与色带同色。
+    // 两头留一位小数: 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)) + '%';
     };
-    // 输出 / 缓存不再单列成指标 —— 它们就是 I/O 图例里的那几格。
     var io = total > 0
-      ? '<span class="u-io" title="累计 token I/O · 共 ' + fmtTok(total) + '">' +
-          '<span class="bar">' + segs.map(function (s) {
-            return '<span class="seg" style="width:' + (u[s[0]] / total * 100).toFixed(2) + '%;background:' +
-              s[2] + '" title="' + s[1] + ': ' + fmtTok(u[s[0]]) + '"></span>';
-          }).join('') + '</span>' +
-          '<span class="leg">' + segs.map(function (s) {
-            return '<span class="lg"><i style="background:' + s[2] + '"></i>' + s[1] +
-              '<b>' + fmtTok(u[s[0]]) + '</b></span>';
-          }).join('') + '</span>' +
-        '</span>'
+      ? '<span class="bar" title="' + esc(['累计 token I/O · 共 ' + fmtTok(total)].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="' +
+            s[1] + ' ' + fmtTok(u[s[0]]) + ' · ' + pct(u[s[0]]) + '"></span>';
+        }).join('') + '</span>' +
+        '<span class="leg" data-tip="' + esc(segs.map(function (s) { return s[3] + ' ' + fmtTok(u[s[0]]); }).join(' · ')) + '">' +
+        segs.map(function (s) {
+          // 常显的是缩写, 全称与占比在 title 里。
+          return '<span class="lg" title="' + s[1] + ' ' + fmtTok(u[s[0]]) + ' · ' + pct(u[s[0]]) + '"><i style="background:' +
+            s[2] + '"></i>' + s[3] + '<b>' + fmtTok(u[s[0]]) + '</b></span>';
+        }).join('') + '</span>'
       : '';
-    // 条首的标签就是模型名: 这本账是拿什么跑出来的。没有模型记录 (老轮次) 才退回「用量」。
-    return '<span class="u-lb" title="' + esc(t.model || '') + '">' +
+    // 条首先是账的主人 (rolepage 里它的头像 + .名字), 再是模型名: 这本账是谁、拿什么跑出来的。
+    // 没有模型记录 (老轮次) 才退回「用量」。
+    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>' +
       '<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))) +
       '</span>' + io;
   };
+  // 永远单行: 排不下就按 FOLD 的顺序一级级藏 (分布文字 → 名字 → 耗时), 宽度回来再按反序放出来。
+  // 判定看的是容器自己溢没溢出, 不看视口 —— 同一个组件挂在整页页脚和右栏底, 宽度各不相同。
+  var FOLD = ['f-leg', 'f-nm', 'f-time'];
+  var FOLDED = { 'f-leg': '.leg', 'f-nm': '.u-nm', 'f-time': '.kv-time' };
+  var fitUsage = function (el) {
+    if (el.hidden) return;
+    var over = function () { return el.scrollWidth > el.clientWidth; };
+    FOLD.forEach(function (c) { el.classList.remove(c); });
+    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');
+  };
+  var watchUsage = function (el) {
+    if (el._ro || typeof ResizeObserver === 'undefined') return;
+    // 只在宽度变了时重算: 自己增删 class 不改宽度, 不会自激。
+    var w = -1;
+    el._ro = new ResizeObserver(function (es) {
+      var cw = Math.round(es[0].contentRect.width);
+      if (cw !== w) { w = cw; fitUsage(el); }
+    });
+    el._ro.observe(el);
+  };
   // 没变就不碰 DOM: 心跳每 3s 来一次, 重建会把悬停中的 tooltip 蹭掉。
   var putUsage = function (el, t) {
     var html = t ? usageHTML(t) : '';
     // !el: web/ 是热更的, 外壳 HTML 要等 daemon 重启 —— 新脚本可能先遇上没有挂载点的旧外壳。
     if (!el || el._html === html) return;
     el._html = html; el.innerHTML = html; el.hidden = !html;
+    watchUsage(el); fitUsage(el);
     // 条的高度挤的是消息区 —— 原本贴底的继续贴底。
     toBottom();
   };
   // wizard: 整页页脚, 它自己跑过的全部轮次 (选了 session 就只算那一段)。
-  // 人: 自己不跑轮次 —— 在群里点开某个 wizard 之后, 窗口底下是这段往来的账。
+  // 窗口: 对端恰好是一个 wizard 时 (服务端按这个窗口的 talkOf 入参判定, 给不给 winStats 就是答案),
+  // 窗口底下是那个 wizard 在这段往来里的账 —— 视角是人还是 wizard 都一样。
   var renderUsage = function () {
     var wiz = !!R.role && R.role.kind === 'wizard';
     putUsage($('#pg-usage'), wiz ? R.stats : null);
-    putUsage($('#ch-usage'), !wiz && WITH && VIEW === 'msgs' ? R.winStats : null);
+    putUsage($('#ch-usage'), VIEW === 'msgs' ? R.winStats : null);
   };
 
   // ── 右栏头: 这个群聊 / 私聊是什么 (关系 / 日程视图时是视图名) ──
   var renderHead = function () {
     var who = $('#ch-who'), acts = $('#ch-acts');
     if (VIEW !== 'msgs') {
-      who.innerHTML = '<span class="t">' + (VIEW === 'world' ? '关系图' : '日程') + '</span>' +
-        '<span class="sub">' + esc(nameOf(ROLE)) + (VIEW === 'world' ? ' 的家谱与协作网' : ' 名下的定时任务与工单') + '</span>';
+      who.innerHTML = '<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; }
+    if (c.kind === 'all') {
+      who.innerHTML = pairOf([[c.who]]) + '<span class="t">' + esc(c.name) + '</span>';
+      acts.innerHTML = '';
+      bindGo(who);
+      return;
+    }
     // 一对一 (私聊, 或群里「只看我与 X」) 两端都亮头像: 我在前, 对端在后, 各自是切视角的入口。
     var dm = dmOf(c);
     var peer = pairPeer(c);
@@ -630,32 +796,49 @@
     var sw = canSwitch(id) && id !== ROLE;
     return '<button class="av' + (sw ? ' go' : '') + '" data-r="' + esc(id) + '" title="' + esc(nameOf(id)) + '"' + (sw ? '' : ' disabled') + '>' + esc(label || roleLabel(id)) + '</button>';
   };
+  // 断点 (/clear /new 轮换) 是某一个 role 的 —— 群窗里几个 wizard 交错时, 不署名就认不出是谁断的。
+  // 片段由服务端渲染、不知视角, 名字 (及能否点) 在这里按视角补进断点条的标签前。
+  var CUT_L = /(<div class="tg-(?:cut|mark)\b[^>]*>)(<span class="l">)/;
+  var signCut = function (html, id, name) {
+    return html.replace(CUT_L, function (_, open, l) { return open + nm(id, name, true) + l; });
+  };
   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) + '">' + m.html + '</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, m.fromName) + '</div>';
     }
     var mine = m.from === ROLE;
     var other = mine ? m.to : m.from;
     // 看 key 而不是会话列表: 换视角就地重包时, 列表还是上一个 role 的。
     var group = CONV.indexOf('p:') !== 0;
-    // 群里我不是收信方的那条 (X → Y), 头上写清是说给谁的。
-    var to = !mine && m.to !== ROLE && group ? '<span class="to">→ ' + avBtn(m.to, m.toLabel) + nm(m.to, m.toName, true) + '</span>' : '';
+    // 说给谁: 群里我不是收信方的那条 (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 : '');
+    // 宽屏写在气泡对面的空白里 (.dest, 在换视角的门里但不吃点击); 窄屏空白太窄, 退回消息头 (.to)。
+    var to = dst ? '<span class="to">→ ' + avBtn(m.to, m.toLabel) + nm(m.to, m.toName, 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>' +
+        (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>' : '';
-    // 一对一里收信方就是顶栏那个对端, 我的消息头不再重复写。
     var who = mine
-      ? '<span class="to">' + (m.to && m.to !== 'human:' && m.to !== (group ? pairPeer(convOf(CONV)) : CONV.slice(2)) ? '→ ' + avBtn(m.to, m.toLabel) + nm(m.to, m.toName, true) : '') + '</span>' + stamp(m.ts) + stat + avBtn(m.from, m.fromLabel)
+      ? 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;
     var sw = canSwitch(other);
     var flip = '<button class="flip" data-r="' + esc(other) + '"' + (sw ? '' : ' disabled tabindex="-1"') +
       ' aria-label="' + esc(sw ? '切到 ' + nameOf(other) + ' 的视角' : '') + '">' +
-      (sw ? '<span class="fi"><span class="fn">' + esc(nameOf(other)) + '</span>' + CHEVRON + '</span>' : '') + '</button>';
+      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.html + '</div></div>' +
+      '<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>' +
       flip +
     '</div>';
   };
@@ -710,7 +893,7 @@
   };
 
   var bindRow = function (el) {
-    bindGo(el, '.flip[data-r]:not([disabled]), .mwho .go[data-r]');
+    bindGo(el, '.flip[data-r]:not([disabled]), .mwho .go[data-r], .tg-cut .go[data-r], .tg-mark .go[data-r]');
   };
   var rowNode = function (id) {
     var list = inner.querySelectorAll('.mrow');
@@ -718,6 +901,21 @@
     return null;
   };
 
+  // 载入更早的消息: 锚住此刻视口顶上的那一行, 重绘后原位不动 —— 不吸底。
+  var keepView = function () {
+    var top = thread.getBoundingClientRect().top;
+    var ref = [].filter.call(inner.querySelectorAll('.mrow'), function (r) { return r.getBoundingClientRect().bottom > top; })[0];
+    if (!ref) return null;
+    var id = ref.getAttribute('data-id'), y = ref.getBoundingClientRect().top;
+    return function () {
+      var el = rowNode(id);
+      if (!el) return false;
+      S.pinned = false;
+      thread.scrollTop += el.getBoundingClientRect().top - y;
+      return true;
+    };
+  };
+
   // land: 换视角时由它来定位 (锚住一条旧消息), 返回 false 才照常吸底。
   var loadMsgs = function (limit, land) {
     var gen = S.gen;
@@ -732,7 +930,7 @@
         : '';
       inner.innerHTML = more + d.msgs.map(rowHTML).join('');
       var btn = $('#more');
-      if (btn) btn.onclick = function () { btn.textContent = '载入中…'; loadMsgs('0'); };
+      if (btn) btn.onclick = function () { btn.textContent = '载入中…'; loadMsgs('0', keepView()); };
       bindRow(inner);
       render(inner);
       foldPings(inner);
@@ -796,7 +994,8 @@
   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.relations = !!d.relations; R.schedules = d.schedules || 0;
+    SESSION = d.session || '';
+    R.relations = !!d.relations; R.schedules = d.schedules || 0; R.plan = d.plan || 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);
@@ -847,7 +1046,7 @@
       // 带 land 的 (换视角) 先不画: 页头换了高度, 旧行会在新行到来前先被顶一下, FLIP 的起点就错了。
       if (land) takeRole(d); else applyRole(d);
       syncUrl();
-      if (VIEW === 'world' || VIEW === 'plan') { W.sel = ROLE; loadWorld(); }
+      if (WORLD || VIEW === 'plan') loadWorld();
       return loadMsgs(undefined, land && function () { paintRole(); return land(); }).then(function () {
         if (land && !inner.querySelector('.mrow')) paintRole();   // 空窗口不走 land, 页头照样要画
         connect();
@@ -855,7 +1054,8 @@
     });
   };
 
-  var selectConv = function (key, withRole) {
+  // land: 见 loadMsgs —— 搜索跳到一条具体消息时由它来定位, 不吸底。
+  var selectConv = function (key, withRole, land) {
     CONV = key; WITH = withRole || '';
     reveal();
     if (VIEW !== 'msgs') setView('msgs');
@@ -866,7 +1066,7 @@
     S.gen++;
     syncUrl();
     inner.innerHTML = '<div class="empty">加载中…</div>';
-    loadMsgs().then(connect);
+    loadMsgs(undefined, land).then(connect);
   };
 
   // 换视角: 窗口尽量留在同一个群 —— 从群里的一条消息切过去, 最想看的是对方在这个群
@@ -874,6 +1074,7 @@
   // at: 被点的那条消息 —— 换视角后它留在指针底下, 其余的相对它滑动。
   var switchRole = function (id, at) {
     if (!canSwitch(id) || id === ROLE) return;
+    W.treeFor = '';
     var keep = CONV && CONV.indexOf('c:') === 0 ? CONV : '';
     var from = ROLE;
     // 整个频道 / 两人私聊的消息集合与视角无关 —— 只有 with 与 session 按 role 过滤。
@@ -882,8 +1083,11 @@
     var withBack = keep && WITH ? from : '';
     ROLE = id; WITH = withBack; SESSION = '';
     CONV = keep || (CONV.indexOf('p:') === 0 ? 'p:' + from : '');
+    // 停在关系图时换视角 = 选中新视角自己那张卡片: 先开它的全部对话 (不留旧选中 / 空白),
+    // 新树画出来知道它连着谁后, renderWorld 再收窄成那张卡片的窗口 (W.pickSelf)。
+    if (WORLD) { CONV = 'a:' + id; WITH = ''; same = false; W.pickSelf = id; }
     var snap = VIEW === 'msgs' && !calm() ? snapRows(at) : null;
-    if (same) { flipWindow(snap); return; }
+    if (same) { if (WORLD) loadWorld(); flipWindow(snap); return; }
     var kept = VIEW === 'msgs' ? keepBodies() : {};
     refresh(function () {
       adoptBodies(kept);
@@ -1041,592 +1245,307 @@
   $('#tb-back').onclick = function () { app.classList.remove('reading'); };
 
   // ══ 关系视图 ═══════════════════════════════════════════════════════
-  // 三层叠在一起:
-  //   1. 聊天卡片 (HTML)  —— 归属; 一张卡 = 一个群
-  //   2. 家谱缩进 (HTML)  —— 层级; 分身 / 子 wizard 缩在父亲下面, 左侧一道折线
-  //   3. 连线   (SVG)     —— 其余的关系; 布局表达不了的那些 (跨卡片的家谱、
-  //                         同群与跨群的派活、流水线的一步)
-  // 前两层撑起版面 (所以文字永远可读), 第三层才是"图"。
-  var EDGE = {
-    // 分身: 从父亲某个 session 节点 fork, 带着上下文; 子 wizard: 父亲 spawn 的白板。
-    clone: { c: '#8250df', label: '分身', dash: '', tip: '从父亲的某个 session 节点 fork 出来, 开局带着那一刻的上下文' },
-    spawn: { c: '#bc4c00', label: '子 wizard', dash: '9 3', tip: '父亲 spawn 的白板 wizard, 只有出身、没有继承上下文' },
-    peer: { c: '#0969da', label: '派活', dash: '5 4' },
-    graph: { c: '#0a7d6b', label: '流水线', dash: '2 3' },
-  };
-
-  // 老 webview 未必有 CSS.escape, 而 target 里带着 `:` 和 `#` —— 不转义选择器
-  // 直接抛异常, 整张图就白了。
+  // 家谱 (clone / spawn) 与派活 (send_peer · 工单 · 流水线) 是同一种东西: 一条「谁把谁拉进这件事」的
+  // 有向关系。一对 wizard 之间的全部关系合成一条边, 沿方向长成一棵树:
+  //   · 每个节点只认一个主父亲 —— 家谱父亲优先, 否则派活次数最多的那位; 其余入边记成节点上的引用
+  //   · 环 (互相派活) 在建树时截断: 哪个根都走不到的环, 挑最近活跃的那个当根
+  //   · 只算选中 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 发起的对话' },
+    job: { mark: '工单', tip: '它开的工单里有这位成员' },
+    graph: { mark: '流水线', tip: '流水线里上一步喂给下一步' },
+  };
+  var LINEAGE = { spawn: 1, clone: 1 };
+
+  // 老 webview 未必有 CSS.escape, 而 target 里带着 `:` 和 `#` —— 不转义选择器直接抛异常。
   var cssEsc = function (v) {
     return window.CSS && CSS.escape
       ? CSS.escape(v)
       : String(v).replace(/[^a-zA-Z0-9_-]/g, function (c) { return '\\' + c; });
   };
-
-  var shortPath = function (p, keep) {
-    var seg = String(p || '').replace(/\/+$/, '').split('/').filter(Boolean);
-    return seg.length <= keep ? p : '…/' + seg.slice(-keep).join('/');
-  };
-
   var wRunning = function (n) { return n.busy || (!!n.runningUntil && srvNow() < n.runningUntil); };
-
-  // ── 走进一个 wizard ──
-  // 任一票据都能看任一 role (见 chat-http), 所以走进谁就是把视角切成谁 —— 不再整页跳。
-  var chatOf = function (base) {
-    return (W.chats || []).filter(function (c) { return c.base === base; })[0];
-  };
+  // 任一票据都能看任一 role (见 chat-http), 所以走进谁就是把视角切成谁。
   var canOpen = function (n) { return !!n; };
   var openNode = function (target) { if (target) switchRole(target); };
 
-  // 名字全局唯一, 卡片头写的是聊天名, 节点上只写它自己的 `.name`。
-  var shortName = function (n) { return '.' + (n.name || n.tag || n.target); };
-
-  // 与 sel 相连的一切 (含 sel 自己)。聚焦时其余的压暗而不是移除 —— 位置稳定,
-  // 反复点不同节点时版面不会跳。
-  var neighborhood = function (target) {
-    var set = {}; set[target] = 1;
-    W.edges.forEach(function (e) {
-      if (e.from === target) set[e.to] = 1;
-      if (e.to === target) set[e.from] = 1;
-    });
-    return set;
-  };
-
-  var edgeOn = function (e) { return !!W.kinds[e.kind]; };
-
-  // 一个节点身上挂了几条 (当前开着的) 边。0 = 它此刻不属于任何协作关系 ——
-  // 「只看有关系的」就是把这些收起来, 剩下的才是真正的那张网。
-  var degree = function (target) {
-    return W.edges.filter(edgeOn).filter(function (e) { return e.from === target || e.to === target; }).length;
-  };
-
-  var renderWTools = function () {
-    var counts = { clone: 0, spawn: 0, peer: 0, graph: 0 };
-    W.edges.forEach(function (e) { counts[e.kind] = (counts[e.kind] || 0) + 1; });
-    var cross = W.edges.filter(function (e) { return e.cross; }).length;
-    var chips = Object.keys(EDGE).map(function (k) {
-      return '<button class="chip' + (W.kinds[k] ? ' on' : '') + '" data-k="' + k + '" ' +
-        'style="--c:' + EDGE[k].c + '"' + (EDGE[k].tip ? ' title="' + EDGE[k].tip + '"' : '') + '><i></i>' + EDGE[k].label +
-        '<b>' + (counts[k] || 0) + '</b></button>';
-    }).join('');
-    var force = W.layout === 'force';
-    wtoolsEl.innerHTML =
-      '<div class="wlegend">' + chips + '</div>' +
-      '<div class="wlay">' +
-        '<button class="lb' + (force ? '' : ' on') + '" data-lay="cards" ' +
-          'title="按聊天分卡, 分身 / 子 wizard 缩在父亲下面 —— 归属与层级最准">▦ 卡片</button>' +
-        '<button class="lb' + (force ? ' on' : '') + '" data-lay="force" ' +
-          'title="wizard 之间的力导向图, 聊天收进节点 —— 协作关系最直观">🕸 关系网</button>' +
-      '</div>' +
-      '<div class="wstat">' +
-        W.nodes.length + ' 个 wizard · ' + W.chats.length + ' 个聊天' +
-        (cross ? ' · <b>' + cross + '</b> 条跨聊天关系' : '') +
-        (W.degraded ? ' · <span class="warn" title="注册表不可达 (独立 svr 部署), 只画观测到的往来">名册缺席</span>' : '') +
-        '<span class="hint">单击聚焦 · 双击进入' + (force ? ' · 拖动钉住' : ' (外聊天整页跳过去)') + '</span>' +
-      '</div>' +
-      (force ? '<button class="chip" id="wre" title="松开所有钉住的节点, 重新排一遍">↻ 重排</button>' : '') +
-      '<button class="chip only' + (W.onlyRel ? ' on' : '') + '" id="wonly" ' +
-        'title="把此刻不属于任何关系的 wizard 收起来 —— 剩下的就是这张协作网本身">' +
-        (W.onlyRel ? '☑' : '☐') + ' 只看有关系的</button>' +
-      (W.sel ? '<button class="chip clear" id="wclear">✕ 取消聚焦</button>' : '');
-    wtoolsEl.querySelectorAll('.lb').forEach(function (b) {
-      b.onclick = function () {
-        var v = b.getAttribute('data-lay');
-        if (v === W.layout) return;
-        setLayout(v);
-        renderWorld();
-      };
-    });
-    var re = $('#wre');
-    if (re) re.onclick = function () { FX.pos = {}; FX.sig = ''; renderForce(); };
-    wtoolsEl.querySelectorAll('.chip[data-k]').forEach(function (b) {
-      b.onclick = function () {
-        var k = b.getAttribute('data-k');
-        W.kinds[k] = W.kinds[k] ? 0 : 1;
-        renderWTools();
-        if (W.layout === 'force') renderForce(); else drawEdges();
-      };
-    });
-    var only = $('#wonly');
-    if (only) only.onclick = function () { W.onlyRel = !W.onlyRel; renderWorld(); };
-    var cl = $('#wclear');
-    if (cl) cl.onclick = function () { W.sel = ''; renderWorld(); };
-  };
-
-  var nodeHTML = function (n, depth) {
-    var run = wRunning(n), nm = shortName(n);
-    var bits = [];
-    if (n.model) bits.push(n.model.replace(/^claude-/, ''));
-    if (n.cwd) bits.push('📁 ' + shortPath(n.cwd, 1));
-    if (n.turns) bits.push(n.turns + ' 轮');
-    if (n.taskTurns) bits.push('⏰ ' + n.taskTurns);
-    if (n.peerTurns) bits.push('✉ ' + n.peerTurns);
-    return '<div class="wnode' + (n.self ? ' self' : '') + (run ? ' run' : '') +
-        (n.alive ? '' : ' cold') + (n.target === ROLE ? ' local' : '') + (degree(n.target) ? ' rel' : '') +
-        '" data-t="' + esc(n.target) + '" style="margin-left:' + (depth * 16) + 'px">' +
-      (depth ? (n.inherited ? '<span class="lin" title="分身"></span>' : '<span class="lin sp" title="子 wizard"></span>') : '') +
-      '<span class="wav">' + esc(n.label) + (run ? '<i class="live"></i>' : '') + '</span>' +
-      '<span class="wbody">' +
-        '<span class="wl1">' +
-          '<b class="wname" title="' + esc(n.name || n.target) + '">' + esc(nm) + '</b>' +
-          (n.inherited ? '<span class="wih" title="分身: 从父亲的 session 节点 fork, 开局带着那一刻的上下文">⧉</span>' : '') +
-          '<span class="wts">' + esc(fmtAgo(n.lastTs)) + '</span>' +
-        '</span>' +
-        (n.description ? '<span class="wjob">' + esc(n.description) + '</span>' : '') +
-        (n.preview ? '<span class="wprev">' + esc(n.preview) + '</span>' : '') +
-        (bits.length ? '<span class="wmeta">' + bits.map(esc).join('<span class="sep">·</span>') + '</span>' : '') +
-      '</span>' +
-    '</div>';
+  // ── 时间窗: 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 inRange = function (rg, t) { return !rg || (t >= rg.from && t <= rg.to); };
 
-  var renderWMap = function () {
-    if (!W.chats.length) {
-      wmapEl.innerHTML = '<div class="empty">' + (W.loaded ? '还没有任何 wizard 记录' : '加载中…') + '</div>';
-      return;
-    }
-    var hood = W.sel ? neighborhood(W.sel) : null;
-    var cards = W.chats.map(function (c) {
-      var shown = c.members.filter(function (mm) { return !W.onlyRel || degree(mm.target); });
-      var live = shown.filter(function (mm) {
-        var n = nodeOf(mm.target); return n && wRunning(n);
-      }).length;
-      var rows = shown.map(function (mm) {
-        var n = nodeOf(mm.target);
-        // 「只看有关系的」会把父亲筛掉而留下孩子 —— 那时的缩进没有参照物, 拉平。
-        var d = W.onlyRel ? 0 : mm.depth;
-        return n ? nodeHTML(n, d) : '';
-      }).join('');
-      if (!shown.length) return '';
-      return '<section class="wchat' + (c.self ? ' self' : '') + '" data-base="' + esc(c.base) + '">' +
-        '<header class="wch">' +
-          '<span class="nm">' + esc(c.name || c.base) + '</span>' +
-          (c.self ? '<span class="here">当前</span>' : '') +
-          '<span class="ct">' + shown.length + (live ? ' · <em>' + live + ' 在跑</em>' : '') + '</span>' +
-        '</header>' +
-        '<div class="wrows">' + rows + '</div>' +
-        (c.hidden || shown.length < c.members.length
-          ? '<div class="wmore" title="不在图上的会话 —— 它们还在, 只是此刻既没在跑也没有关系">另有 ' +
-              (c.hidden + (c.members.length - shown.length)) + ' 个未显示</div>'
-          : '') +
-      '</section>';
-    }).filter(Boolean).join('');
-    wmapEl.innerHTML = '<svg class="wedges" id="wedges"></svg><div class="wgrid">' +
-      (cards || '<div class="empty">此刻没有任何协作关系 —— 派活 / 生分身 / 生子 wizard 之后这里就有边了</div>') + '</div>';
-    wmapEl.querySelectorAll('.wnode').forEach(function (el) {
-      var t = el.getAttribute('data-t');
-      if (hood && !hood[t]) el.classList.add('dim');
-      if (t === W.sel) el.classList.add('sel');
-      if (canOpen(nodeOf(t))) el.classList.add('go');
-      el.onclick = function () { W.sel = (W.sel === t ? '' : t); renderWorld(); };
-      // 双击 = 走进它: 视角切成它 (见 openNode)。
-      el.ondblclick = function () { openNode(t); };
-    });
-    // 卡片头 = 那个群本身。点它进那个群里最近活跃的那一栏 —— 图上找不到哪个
-    // 节点该双击的时候, 这是最直觉的入口。
-    wmapEl.querySelectorAll('.wch').forEach(function (h) {
-      var c = chatOf(h.parentNode.getAttribute('data-base'));
-      var first = c && c.members.filter(function (mm) { return canOpen(nodeOf(mm.target)); })[0];
-      if (!first) return;
-      h.classList.add('go');
-      h.onclick = function () { openNode(first.target); };
-    });
+  // 工单归属也是一条关系: 开单的人 → 每个成员。
+  var jobEdges = function () {
+    return (W.jobs || []).reduce(function (acc, j) {
+      var o = nodeOf(j.owner);
+      return !o ? acc : acc.concat(j.members.filter(function (mm) { return mm.target !== j.owner && nodeOf(mm.target); }).map(function (mm) {
+        return { kind: 'job', from: j.owner, to: mm.target, cross: o.base !== nodeOf(mm.target).base, jobs: [j.id], ts: [j.openedAt] };
+      }));
+    }, []);
   };
 
-  // ── 连线 ──
-  // 端点在布局之后才知道 (卡片会换行、文字会折行), 所以连线是一个纯粹的
-  // "读版面 → 画路径" 的过程, 每次重排都重来一遍, 不维护任何位置状态。
-  var anchorsOf = function (a, b, base) {
-    var ra = a.getBoundingClientRect(), rb = b.getBoundingClientRect();
-    var ox = base.left, oy = base.top;
-    var A = { l: ra.left - ox, r: ra.right - ox, cy: ra.top - oy + ra.height / 2 };
-    var B = { l: rb.left - ox, r: rb.right - ox, cy: rb.top - oy + rb.height / 2 };
-    // 同一列 (同一张卡片里) → 两端都走左侧, 从左边的空白处绕出去, 像 git 图的
-    // 那条 gutter。左右分列 → 从近的一侧出、近的一侧进。
-    if (Math.abs(A.l - B.l) < 60) {
-      // 同卡片内的边走卡片自己的左内边距 (.wrows 的 padding-left) —— 那条车道
-      // 就是为它留的。拐到卡片外面既会被滚动容器裁掉, 也读不出"这两个是一个群
-      // 里的"。room 按最近的卡片左沿算, 没有卡片 (理论上不会) 才退回画布左沿。
-      var card = a.closest('.wchat');
-      var lane = card ? card.getBoundingClientRect().left - ox + 6 : 4;
-      var room = Math.max(6, Math.min(A.l, B.l) - lane);
-      var d = Math.min(room, 14 + Math.abs(A.cy - B.cy) * 0.22);
-      return {
-        d: 'M' + A.l + ',' + A.cy + ' C' + (A.l - d) + ',' + A.cy + ' ' + (B.l - d) + ',' + B.cy + ' ' + B.l + ',' + B.cy,
-        head: 'start',
-      };
-    }
-    var right = B.l > A.l;
-    var ax = right ? A.r : A.l, bx = right ? B.l : B.r;
-    var k = right ? 1 : -1, dd = Math.max(46, Math.abs(bx - ax) * 0.42);
-    return {
-      d: 'M' + ax + ',' + A.cy + ' C' + (ax + dd * k) + ',' + A.cy + ' ' + (bx - dd * k) + ',' + B.cy + ' ' + bx + ',' + B.cy,
-      head: right ? 'end' : 'start',
+  /** 窗内的关系: 一对有向 (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); });
+      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: [] });
+      p.kinds[e.kind] = (p.kinds[e.kind] || 0) + ts.length;
+      if (!LINEAGE[e.kind]) p.n += ts.length;
+      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); });
+      return m;
+    }, {});
+    // 派活本身带着工单号时, 「工单」标记就是重复的。
+    Object.keys(pairs).forEach(function (k) { if (pairs[k].kinds.peer) delete pairs[k].kinds.job; });
+    return pairs;
+  };
+
+  /** 关系 → 森林: pp = 主父亲那条边, kids = 主孩子, roots = 森林的根。 */
+  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; };
+    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;
+    }, {});
+    var ends = list.reduce(function (m, p) { m[p.from] = 1; m[p.to] = 1; return m; }, {});
+    var kidsIn = function () {
+      return Object.keys(pp).reduce(function (m, t) { (m[pp[t].from] = m[pp[t].from] || []).push(t); return m; }, {});
     };
+    var reach = function (kids, roots) {
+      var seen = {};
+      var walk = function (t) { if (seen[t]) return; seen[t] = 1; (kids[t] || []).forEach(walk); };
+      roots.forEach(walk);
+      return seen;
+    };
+    var roots = Object.keys(ends).filter(function (t) { return !pp[t]; });
+    var recent = function (a, b) { return ((nodeOf(b) || {}).lastTs || 0) - ((nodeOf(a) || {}).lastTs || 0); };
+    // 从 t 沿主父亲往上走, 直到撞回走过的点 —— 撞上的那一圈就是环。
+    var loopFrom = function (t, path) {
+      var at = path.indexOf(t);
+      return at >= 0 ? path.slice(at) : loopFrom(pp[t].from, path.concat([t]));
+    };
+    // 环: 只断环上的派活边 (家谱无环, 断它会让子 wizard 丢了父亲), 挑最近活跃的那个当根 —— 直到都走得到。
+    var close = function () {
+      var seen = reach(kidsIn(), roots);
+      var left = Object.keys(ends).filter(function (t) { return !seen[t]; });
+      if (!left.length) return;
+      var ring = loopFrom(left[0], []);
+      var cut = ring.filter(function (t) { return !LINEAGE[domKind(pp[t])]; });
+      var pick = (cut.length ? cut : ring).sort(recent)[0];
+      delete pp[pick]; roots.push(pick);
+      close();
+    };
+    close();
+    // 兄弟的顺序在画的时候定 (按卡片的时刻, 同会话列表), 这里不排。
+    var kids = kidsIn();
+    return { pairs: pairs, inc: inc, pp: pp, kids: kids, roots: roots, ends: ends };
+  };
+
+  // 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];
+    if (!p || seen[p.from]) return [t];
+    seen[t] = 1;
+    return chainUp(F, p.from, seen).concat([t]);
+  };
+
+  // 线接入卡片处的 label: 种类 (家谱不计次, 对话等一律写次数, ×1 也写) + 跨群; 经手的工单号放进悬停提示。
+  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) {
+        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>';
+  };
+  // 一条边的主色: 家谱优先, 决定树上那道线的颜色。
+  var domKind = function (p) {
+    return !p ? 'root' : ['spawn', 'clone', '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]; };
+  // 视角 role 与 other 之间的那一项: 私聊优先, 否则挑最近说过话的那个群里的「只看我与它」。
+  var pairConv = function (other) {
+    if (convOf('p:' + other)) return ['p:' + other, ''];
+    var hit = R.convs.filter(function (c) { return c.kind === 'group'; }).map(function (c) {
+      return [c, (c.subs || []).filter(function (x) { return x.role === other && x.count; })[0]];
+    }).filter(function (x) { return x[1]; }).sort(function (a, b) { return b[1].lastTs - a[1].lastTs; })[0];
+    return hit ? [hit[0].key, dmOf(hit[0]) ? '' : other] : null;
+  };
+  // 视角这一端与边另一端之间、侧栏里现成的那一项 (视角不在边上 / 这段里没说过话 = 没有)。
+  var edgeConv = function (F, t) {
+    var ends = edgeEnds(F, t);
+    var other = ends.length === 2 && ends.indexOf(ROLE) >= 0 && ends.filter(function (x) { return x !== ROLE; })[0];
+    return other ? pairConv(other) : null;
+  };
+  // 点任何一张卡片 (视角自己也一样) 看的窗口: 它与图上和它相连的那几个 role 之间的对话, 不换视角。
+  // 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; }, {});
+    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]; }));
+      return m;
+    }, {});
   };
 
-  var drawEdges = function () {
-    var svg = $('#wedges');
-    if (!svg) return;
-    var base = wmapEl.getBoundingClientRect();
-    svg.setAttribute('width', wmapEl.scrollWidth);
-    svg.setAttribute('height', wmapEl.scrollHeight);
-    svg.setAttribute('viewBox', '0 0 ' + wmapEl.scrollWidth + ' ' + wmapEl.scrollHeight);
-    var defs = Object.keys(EDGE).map(function (k) {
-      return ['', '-d'].map(function (sfx) {
-        return '<marker id="ah-' + k + sfx + '" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="6" markerHeight="6" ' +
-          'orient="auto-start-reverse"><path d="M0,0 L8,4 L0,8 z" fill="' + EDGE[k].c + '" ' +
-          'opacity="' + (sfx ? '.16' : '.85') + '"/></marker>';
-      }).join('');
-    }).join('');
-    var hood = W.sel ? neighborhood(W.sel) : null;
-    var paths = W.edges.filter(edgeOn).map(function (e) {
-      var a = wmapEl.querySelector('.wnode[data-t="' + cssEsc(e.from) + '"]');
-      var b = wmapEl.querySelector('.wnode[data-t="' + cssEsc(e.to) + '"]');
-      if (!a || !b) return '';
-      var p = anchorsOf(a, b, base);
-      // 聚焦时: 不碰 sel 的边压到近乎不可见 —— 删掉它们会让"这张图本来有多密"
-      // 这个信息消失, 而那恰恰是判断要不要收几个 wizard 的依据。
-      var off = hood && !(e.from === W.sel || e.to === W.sel);
-      var w = Math.min(4, 1.1 + Math.log(1 + e.count) * 0.9);
-      return '<path d="' + p.d + '" fill="none" stroke="' + EDGE[e.kind].c + '" ' +
-        'stroke-width="' + (off ? 1 : w).toFixed(2) + '" ' +
-        'stroke-dasharray="' + (EDGE[e.kind].dash || '') + '" ' +
-        'opacity="' + (off ? 0.14 : (e.cross ? 0.95 : 0.6)) + '" ' +
-        'marker-' + p.head + '="url(#ah-' + e.kind + (off ? '-d' : '') + ')">' +
-        '<title>' + esc(nameOf(e.from) + ' → ' + nameOf(e.to)) + ' · ' + EDGE[e.kind].label +
-        (e.count > 1 ? ' ×' + e.count : '') + (e.cross ? ' (跨聊天)' : '') +
-        (e.jobs && e.jobs.length ? ' · 工单 ' + esc(e.jobs.join(' ')) : '') + '</title></path>';
-    }).join('');
-    svg.innerHTML = '<defs>' + defs + '</defs>' + paths;
-  };
-
-  // ── 力导向布局 ────────────────────────────────────────────────────
-  // 卡片布局把「归属」和「层级」交给版面, 代价是聊天必须张张画出来: 一个只出了
-  // 一个分身的群也占一整张卡, 而跨聊天那条边得横穿半张图去找对面。
-  // 换一种折法 —— 只画 wizard, 聊天收进节点自己 (左侧色条 + 群名一行), 位置交给
-  // 力: 同群相吸自然成簇, 家谱 (分身 / 子 wizard) 的边比派活的边短, 家谱于是仍然读得出来。
-  // 两种读法各有盲区 (力导向读不出精确的父子层级), 所以是开关不是替换。
-  // 绿在这一页已经有主 (在跑), 所以群色不用绿 —— 一道绿色条会被读成「它活着」。
-  var CHAT_C = ['#0969da', '#8250df', '#bc4c00', '#bf3989', '#0a7d6b', '#cf222e', '#9a6700', '#4338ca'];
-  var hashOf = function (s) {
-    var v = String(s), h = 0;
-    for (var i = 0; i < v.length; i++) h = (h * 31 + v.charCodeAt(i)) >>> 0;
-    return h;
-  };
-  // 颜色按 base **排序**取位, 而不是按它在列表里的次序取位 —— 列表次序随最近活动
-  // 变, 颜色跟着变就没人记得住哪个色是哪个群; 排序是稳定的, 顺带保证 8 个群之内
-  // 一个不撞。超过 8 个才退回 hash。
-  var chatColor = function (base) {
-    return (FX.color || {})[base] || CHAT_C[hashOf(base) % CHAT_C.length];
-  };
-  // 取位用的是**全部**节点而不是画在图上的那些 —— 拿筛过的集合分色, 一按「只看
-  // 有关系的」每个群的颜色就换一轮。
-  var fxColors = function () {
-    var bases = [];
-    W.nodes.forEach(function (n) { if (bases.indexOf(n.base) < 0) bases.push(n.base); });
-    return bases.sort().reduce(function (m, b, i) { m[b] = CHAT_C[i % CHAT_C.length]; return m; }, {});
-  };
-
-  // pos 按 target 存活: 6 秒一次的轮询重画 DOM, 但坐标沿用, 图不会每轮跳一次。
-  var FX = { pos: {}, size: {}, els: {}, paths: [], color: {}, nodes: [], edges: [], w: 0, h: 0, alpha: 0, raf: 0, drag: null, sig: '' };
-
-  var fxNodes = function () {
-    return W.nodes.filter(function (n) { return !W.onlyRel || degree(n.target); });
-  };
-
-  /** 种子位置: 聊天摆一圈, 成员散在自己那个群周围。确定性 (hash 而不是 random)
-   *  —— 同一批 wizard 每次打开这一页, 图的大致形状是同一个。 */
-  var fxSeed = function (ns) {
-    var bases = [];
-    ns.forEach(function (n) { if (bases.indexOf(n.base) < 0) bases.push(n.base); });
-    var cx = FX.w / 2, cy = FX.h / 2, R = Math.min(FX.w, FX.h) * 0.28;
-    var on = {};
-    ns.forEach(function (n) { on[n.target] = 1; });
-    Object.keys(FX.pos).forEach(function (t) { if (!on[t]) delete FX.pos[t]; });
-    ns.forEach(function (n) {
-      if (FX.pos[n.target]) return;
-      var i = bases.indexOf(n.base);
-      var a = bases.length > 1 ? (i / bases.length) * Math.PI * 2 : 0;
-      var bx = bases.length > 1 ? cx + Math.cos(a) * R : cx;
-      var by = bases.length > 1 ? cy + Math.sin(a) * R : cy;
-      var t = (hashOf(n.target) % 360) * Math.PI / 180;
-      FX.pos[n.target] = { x: bx + Math.cos(t) * 46, y: by + Math.sin(t) * 46, vx: 0, vy: 0, pin: 0 };
-    });
-  };
-
-  var fxTick = function () {
-    var ns = FX.nodes, P = FX.pos, n = ns.length;
-    if (!n) return;
-    var L = Math.max(86, Math.min(190, Math.sqrt(FX.w * FX.h / n) * 0.66));
-    var rep = L * L * 1.15;
-    var i, j, a, b, dx, dy, d, ux, uy, f;
-    // 斥力 —— O(n²), 但这张图按设计就不超过几十个节点 (见 shared/world 的相关性)。
-    for (i = 0; i < n; i++) {
-      a = P[ns[i].target];
-      for (j = i + 1; j < n; j++) {
-        b = P[ns[j].target];
-        dx = b.x - a.x; dy = b.y - a.y;
-        d = Math.sqrt(dx * dx + dy * dy) || 0.01;
-        f = rep / (d * d); ux = dx / d; uy = dy / d;
-        a.vx -= ux * f; a.vy -= uy * f; b.vx += ux * f; b.vy += uy * f;
-      }
-    }
-    // 弹簧 —— 家谱边的静息长度短于派活的, 于是家谱天然抱成一小团。
-    // 静息长度有个下限: 节点是一张一百多像素宽的卡片, 不是一个点。两端贴到一起
-    // 时连线被两张卡各自吃掉一半, 剩下的那截连箭头都放不下 —— 图上就成了一条
-    // 看不见的边。下限按两张卡的半宽算, 横着摆也留得出一段看得见的线。
-    FX.edges.forEach(function (e) {
-      var pa = P[e.from], pb = P[e.to];
-      if (!pa || !pb) return;
-      var za = FX.size[e.from] || { w: 150, h: 36 }, zb = FX.size[e.to] || { w: 150, h: 36 };
-      var ex = pb.x - pa.x, ey = pb.y - pa.y;
-      var ed = Math.sqrt(ex * ex + ey * ey) || 0.01;
-      var kin = e.kind === 'clone' || e.kind === 'spawn';
-      var rest = Math.max((za.w + zb.w) / 2 + 30, kin ? L * 0.8 : L * 1.35);
-      var k = (kin ? 0.06 : 0.032) * Math.min(2.2, 1 + Math.log(1 + e.count) * 0.45);
-      var g = (ed - rest) * k, gx = ex / ed, gy = ey / ed;
-      pa.vx += gx * g; pa.vy += gy * g; pb.vx -= gx * g; pb.vy -= gy * g;
-    });
-    // 同群相吸 + 朝心收 —— 归属在卡片布局里由版面表达, 这里由一股弱引力表达。
-    var cen = {};
-    ns.forEach(function (nd) {
-      var p = P[nd.target], c = cen[nd.base] || (cen[nd.base] = { x: 0, y: 0, n: 0 });
-      c.x += p.x; c.y += p.y; c.n++;
-    });
-    ns.forEach(function (nd) {
-      var p = P[nd.target], c = cen[nd.base];
-      p.vx += (c.x / c.n - p.x) * 0.022 + (FX.w / 2 - p.x) * 0.006;
-      p.vy += (c.y / c.n - p.y) * 0.022 + (FX.h / 2 - p.y) * 0.006;
-    });
-    // 积分。alpha 同时当步长, 于是"冷却"就是自然停住。
-    ns.forEach(function (nd) {
-      var p = P[nd.target];
-      if (p.pin) { p.vx = 0; p.vy = 0; return; }
-      p.vx *= 0.8; p.vy *= 0.8;
-      var sp = Math.sqrt(p.vx * p.vx + p.vy * p.vy), cap = 26;
-      if (sp > cap) { p.vx *= cap / sp; p.vy *= cap / sp; }
-      p.x += p.vx * FX.alpha; p.y += p.vy * FX.alpha;
-    });
-    // 矩形避让 —— 节点是一行字, 不是一个点。圆形斥力挡不住两张卡横向叠在一起,
-    // 而这张图的全部价值就在于那行字读得出来。
-    // 它排在积分之后, 所以收边必须排在它之后 —— 反过来的话, 被挤到边上的节点会
-    // 被推出画布再也回不来 (弱引力拉不过避让)。
-    var pass, pa, pb, sa, sb, mx, my, ox, oy, sh;
-    for (pass = 0; pass < 2; pass++) {
-      for (i = 0; i < n; i++) {
-        for (j = i + 1; j < n; j++) {
-          pa = P[ns[i].target]; pb = P[ns[j].target];
-          sa = FX.size[ns[i].target]; sb = FX.size[ns[j].target];
-          if (!sa || !sb) continue;
-          mx = (sa.w + sb.w) / 2 + 18; my = (sa.h + sb.h) / 2 + 10;
-          dx = pb.x - pa.x; dy = pb.y - pa.y;
-          ox = mx - Math.abs(dx); oy = my - Math.abs(dy);
-          if (ox <= 0 || oy <= 0) continue;
-          if (ox / mx < oy / my) {
-            sh = (dx < 0 ? -1 : 1) * ox;
-            if (pa.pin) pb.x += sh; else if (pb.pin) pa.x -= sh;
-            else { pa.x -= sh / 2; pb.x += sh / 2; }
-          } else {
-            sh = (dy < 0 ? -1 : 1) * oy;
-            if (pa.pin) pb.y += sh; else if (pb.pin) pa.y -= sh;
-            else { pa.y -= sh / 2; pb.y += sh / 2; }
-          }
-        }
-      }
-    }
-    // 收进画布 —— 钉住的也收, 窗口缩小之后那些被人摆在外面的节点得跟着回来。
-    ns.forEach(function (nd) {
-      var p = P[nd.target], z = FX.size[nd.target] || { w: 150, h: 36 };
-      p.x = Math.max(z.w / 2 + 6, Math.min(FX.w - z.w / 2 - 6, p.x));
-      p.y = Math.max(z.h / 2 + 6, Math.min(FX.h - z.h / 2 - 6, p.y));
-    });
-  };
-
-  /** 中心沿 (ux,uy) 走到卡片矩形的边 —— 箭头要落在卡片外面才看得见。 */
-  var fxRim = function (p, s, ux, uy) {
-    var hw = (s ? s.w : 150) / 2 + 3, hh = (s ? s.h : 36) / 2 + 3;
-    var t = Math.min(ux ? hw / Math.abs(ux) : 1e9, uy ? hh / Math.abs(uy) : 1e9);
-    return { x: p.x + ux * t, y: p.y + uy * t };
-  };
-
-  /** 连线只在重排时建一次 —— 逐帧重写 innerHTML 会把一张 50 条边的图拖成幻灯片。
-   *  之后每帧只改 `d`, 聚焦只改描边 (见 fxClasses)。 */
-  var fxEdgesDOM = function () {
-    var svg = $('#wedges');
-    if (!svg) return;
-    var defs = Object.keys(EDGE).map(function (k) {
-      return ['', '-d'].map(function (sfx) {
-        return '<marker id="ah-' + k + sfx + '" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="6" markerHeight="6" ' +
-          'orient="auto-start-reverse"><path d="M0,0 L8,4 L0,8 z" fill="' + EDGE[k].c + '" ' +
-          'opacity="' + (sfx ? '.16' : '.85') + '"/></marker>';
-      }).join('');
-    }).join('');
-    svg.innerHTML = '<defs>' + defs + '</defs>' + FX.edges.map(function (e) {
-      return '<path fill="none" stroke="' + EDGE[e.kind].c + '" ' +
-        'stroke-dasharray="' + (EDGE[e.kind].dash || '') + '">' +
-        '<title>' + esc(nameOf(e.from) + ' → ' + nameOf(e.to)) + ' · ' + EDGE[e.kind].label +
-        (e.count > 1 ? ' ×' + e.count : '') + (e.cross ? ' (跨聊天)' : '') +
-        (e.jobs && e.jobs.length ? ' · 工单 ' + esc(e.jobs.join(' ')) : '') + '</title></path>';
-    }).join('');
-    FX.paths = Array.prototype.slice.call(svg.querySelectorAll('path[stroke]'));
-  };
-
-  var fxPaint = function () {
-    FX.nodes.forEach(function (n) {
-      var p = FX.pos[n.target], el = FX.els[n.target];
-      if (el && p) el.style.transform = 'translate(' + p.x.toFixed(1) + 'px,' + p.y.toFixed(1) + 'px) translate(-50%,-50%)';
-    });
-    FX.edges.forEach(function (e, i) {
-      var path = FX.paths[i], pa = FX.pos[e.from], pb = FX.pos[e.to];
-      if (!path || !pa || !pb) return;
-      var dx = pb.x - pa.x, dy = pb.y - pa.y;
-      var d = Math.sqrt(dx * dx + dy * dy) || 0.01, ux = dx / d, uy = dy / d;
-      var A = fxRim(pa, FX.size[e.from], ux, uy), B = fxRim(pb, FX.size[e.to], -ux, -uy);
-      // 恒向左弓 —— 互相派活的两个 wizard 有两条方向相反的边, 直线会重合成一条。
-      var bow = Math.min(30, d * 0.14);
-      var qx = (A.x + B.x) / 2 - uy * bow, qy = (A.y + B.y) / 2 + ux * bow;
-      path.setAttribute('d', 'M' + A.x.toFixed(1) + ',' + A.y.toFixed(1) +
-        ' Q' + qx.toFixed(1) + ',' + qy.toFixed(1) + ' ' + B.x.toFixed(1) + ',' + B.y.toFixed(1));
-    });
-  };
-
-  var fxLoop = function () {
-    FX.raf = 0;
-    if (W.layout !== 'force' || VIEW !== 'world') return;
-    fxTick();
-    fxPaint();
-    if (!FX.drag) FX.alpha *= 0.972;
-    if (FX.alpha > 0.02 || FX.drag) FX.raf = requestAnimationFrame(fxLoop);
-  };
-
-  var fxHeat = function (a) {
-    FX.alpha = Math.max(FX.alpha, a === undefined ? 0.9 : a);
-    if (!FX.raf) FX.raf = requestAnimationFrame(fxLoop);
+  // 卡片与侧栏会话项同一套 (glance / roleRow / recentFirst)。
+  // 视角与对端有会话项 → 一行的数据就是那一项的 glance; 没有 → 取节点, 时刻取这条边最近一次发生,
+  // 而不是节点自己最后的动静 —— 卡片承载的是边。
+  // 身份 (头像 / 名字 / 状态灯) 永远是卡片自己的节点: 会话项的身份是「视角的对端」, 视角自己那张卡片
+  // (边的下端是视角) 的对端是它的父亲 —— 拿会话项的身份去画, 这张卡片就成了父亲的分身。
+  // 时刻与最近一句取自卡片自己的窗口 (点它打开的那一份, 服务端 /api/glance 用同一个 talkOf 算, 说话人前缀
+  // 也在那里定); 窗口还没取到 (或第一遍量树时) 退回视角与对端的会话项 / 节点。未读跟着视角与对端的会话项走。
+  var cardGlance = function (F, t) {
+    var hit = edgeConv(F, t), 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 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;
+  };
+  // 卡片窗口的 glance: 树里画了谁变了就取一次, 世界快照每次轮询也顺带刷新。
+  var loadGlance = function () {
+    var keys = W.gKeys, role = ROLE;
+    if (!keys) return;
+    api('api/glance', { role: role, keys: keys }).then(function (d) {
+      if (!d.ok || role !== ROLE || keys !== W.gKeys) return;
+      W.glance = d.glances || {};
+      renderWorld();
+    }).catch(function () { });
   };
-
-  var fxStop = function () {
-    if (FX.raf) cancelAnimationFrame(FX.raf);
-    FX.raf = 0; FX.drag = null; FX.alpha = 0;
-    wscrollEl.classList.remove('fx');
-    wmapEl.classList.remove('force');
+  var byCard = function (F) {
+    return function (a, b) { return recentFirst(cardGlance(F, a), cardGlance(F, b)); };
+  };
+  var tnodeHTML = function (F, n, folded) {
+    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 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) + ' 对过话, 留着是为了连到它下面对过话的') + '"' : '') + '>' +
+      labelHTML(p) + row + '</button>';
+  };
+
+  // keep(父, 孩子) → 'full' 整枝 / 'leaf' 只画它自己 / '' 不画; 不给 keep = 全画。shown 收集画出来的节点。
+  var treeHTML = function (F, t, depth, keep, leaf, 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) +
+      // 兄弟的线共用一段竖干, 越往下的越长: 短的叠在上面 (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);
+      }).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' : '';
+    };
   };
 
-  var fxClasses = function () {
-    var hood = W.sel ? neighborhood(W.sel) : null;
-    FX.nodes.forEach(function (n) {
-      var el = FX.els[n.target];
-      if (!el) return;
-      el.classList.toggle('dim', !!(hood && !hood[n.target]));
-      el.classList.toggle('sel', n.target === W.sel);
-      el.classList.toggle('pin', !!(FX.pos[n.target] || {}).pin);
-    });
-    // 聚焦时无关的边压到近乎不可见而不是删掉 —— "这张图本来有多密"是判断要不要
-    // 收几个 wizard 的依据 (同 drawEdges)。
-    FX.edges.forEach(function (e, i) {
-      var path = FX.paths[i];
-      if (!path) return;
-      var off = hood && !(e.from === W.sel || e.to === W.sel);
-      var w = Math.min(4, 1.1 + Math.log(1 + e.count) * 0.9);
-      path.setAttribute('stroke-width', (off ? 1 : w).toFixed(2));
-      path.setAttribute('opacity', off ? 0.12 : (e.cross ? 0.95 : 0.55));
-      path.setAttribute('marker-end', 'url(#ah-' + e.kind + (off ? '-d' : '') + ')');
-    });
+  // 关系图替换的是侧栏的会话列表 —— 右边照旧是选中的那段对话。
+  // 只看相关时画谁: 视角自己 + 和视角对过话的 ('talk'); 它们通向根的主父亲链上没对过话的祖先
+  // 留作连接 ('via', 画淡) —— 抹掉它, 有对话的后代就从家谱上脱开, 成了一棵来历不明的孤树。
+  var talks = function (F, a, b) {
+    var p = F.pairs[a + '\u0000' + b];
+    return !!p && !!(p.kinds.peer || p.kinds.graph);
   };
-
-  var fxNodeHTML = function (n) {
-    var run = wRunning(n);
-    var tip = [n.name, n.description, n.preview, n.cwd ? '📁 ' + n.cwd : '',
-      [n.model && n.model.replace(/^claude-/, ''), n.turns ? n.turns + ' 轮' : ''].filter(Boolean).join(' · ')]
-      .filter(Boolean).join('\n');
-    return '<div class="fxn' + (n.self ? ' self' : '') + (run ? ' run' : '') + (n.alive ? '' : ' cold') +
-        (canOpen(n) ? ' go' : '') + '" data-t="' + esc(n.target) + '" style="--c:' + chatColor(n.base) + '" ' +
-        'title="' + esc(tip) + '">' +
-      '<span class="wav">' + esc(n.label) + (run ? '<i class="live"></i>' : '') + '</span>' +
-      '<span class="fxb">' +
-        '<b class="wname">' + esc(shortName(n)) + '</b>' +
-        '<span class="fxc">' + esc(n.chat || n.base) + (n.self ? ' · 本会话' : '') + '</span>' +
-      '</span>' +
-    '</div>';
+  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';
+    keep.forEach(function (t) { chainUp(F, t).forEach(function (u) { if (!vis[u]) vis[u] = 'via'; }); });
+    return vis;
   };
 
-  // 拖动 = 钉住。点一下 (没挪动) 仍然是聚焦 —— 所以判据是位移而不是事件类型。
-  var fxBind = function (el, t) {
-    el.onpointerdown = function (ev) {
-      if (ev.button) return;
-      var p = FX.pos[t];
-      if (!p) return;
-      FX.drag = { t: t, dx: p.x - ev.clientX, dy: p.y - ev.clientY, moved: 0 };
-      el.classList.add('drag');
-      if (el.setPointerCapture) el.setPointerCapture(ev.pointerId);
-      fxHeat(0.3);
-      ev.preventDefault();
-    };
-    el.onpointermove = function (ev) {
-      if (!FX.drag || FX.drag.t !== t) return;
-      var p = FX.pos[t], nx = ev.clientX + FX.drag.dx, ny = ev.clientY + FX.drag.dy;
-      FX.drag.moved += Math.abs(nx - p.x) + Math.abs(ny - p.y);
-      p.x = nx; p.y = ny; p.vx = 0; p.vy = 0; p.pin = 1;
-    };
-    el.onpointerup = function () {
-      if (!FX.drag || FX.drag.t !== t) return;
-      var moved = FX.drag.moved;
-      FX.drag = null;
-      el.classList.remove('drag');
-      if (moved < 5) {
-        FX.pos[t].pin = 0;
-        W.sel = (W.sel === t ? '' : t);
-        renderWTools(); fxClasses(); fxHeat(0.12);
-      } else { fxClasses(); fxHeat(0.2); }
+  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));
+    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, {});
     };
-    el.ondblclick = function () { openNode(t); };
-  };
-
-  var renderForce = function () {
-    var ns = fxNodes();
-    wscrollEl.classList.add('fx');
-    wmapEl.classList.add('force');
-    if (!ns.length) {
-      wmapEl.innerHTML = '<div class="empty">' + (W.loaded ? '此刻没有任何 wizard 在图上' : '加载中…') + '</div>';
-      return;
+    // 两遍: 先量出画了谁 (卡片的窗口要知道它在图上连着谁), 再带着连线画 —— 选中态也就进了 html。
+    draw(shown);
+    F.links = linksOf(F, shown);
+    var keys = shown.map(function (n) { return talkKey(F.links, n.target); }).join('\n');
+    if (keys !== W.gKeys) { W.gKeys = keys; loadGlance(); }
+    // 换视角后的第一张新树: 世界快照与摘要都已是新视角的, 才知道它自己那张卡片连着谁。
+    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, '');
     }
-    var box = wscrollEl.getBoundingClientRect();
-    FX.w = Math.max(320, box.width); FX.h = Math.max(300, box.height);
-    FX.nodes = ns;
-    FX.color = fxColors();
-    fxSeed(ns);
-    // 端点被「只看有关系的」筛掉的边没有落脚处 —— 画一根悬空的线只会让人以为漏了谁。
-    var on = {};
-    ns.forEach(function (n) { on[n.target] = 1; });
-    FX.edges = W.edges.filter(edgeOn).filter(function (e) { return on[e.from] && on[e.to]; });
-    // 轮询回来的快照通常一模一样 —— 那就只重画文字, 不重新点火, 免得这张图每 6
-    // 秒自己抖一下。
-    var sig = ns.map(function (n) { return n.target; }).join(',') + '|' +
-      FX.edges.map(function (e) { return e.kind + e.from + '>' + e.to; }).join(',');
-    var fresh = sig !== FX.sig;
-    FX.sig = sig;
-    wmapEl.innerHTML = '<svg class="wedges" id="wedges"></svg>' + ns.map(fxNodeHTML).join('');
-    FX.els = {};
-    wmapEl.querySelectorAll('.fxn').forEach(function (el) {
-      var t = el.getAttribute('data-t');
-      FX.els[t] = el;
-      FX.size[t] = { w: el.offsetWidth, h: el.offsetHeight };
-      fxBind(el, t);
+    var trees = draw([]);
+    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>' +
+        (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>') +
+    '</div>';
+    // 心跳每 3s 重算一次 (状态灯 / 几分钟前) —— 没变就不碰 DOM, 免得蹭掉悬停与滚动。
+    if (convsEl._tree === html && convsEl.querySelector('.tview')) return;
+    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')), ''); };
     });
-    var svg = $('#wedges');
-    svg.setAttribute('viewBox', '0 0 ' + FX.w + ' ' + FX.h);
-    fxEdgesDOM();
-    fxClasses();
-    fxPaint();
-    fxHeat(fresh ? 0.9 : 0.05);
-  };
-
-  var renderWorld = function () {
-    renderWTools();
-    if (W.layout === 'force') { renderForce(); return; }
-    fxStop();
-    renderWMap();
-    // 连线要等浏览器把卡片排好 —— 同一帧里量到的是上一次的版面。
-    requestAnimationFrame(drawEdges);
+    bindGo(convsEl);
+    var tall = convsEl.querySelector('.tall');
+    if (tall) tall.onclick = function () { W.treeAll = !W.treeAll; W.treeFor = ''; renderWorld(); };
+    var cur = convsEl.querySelector('.tci.me');
+    if (cur && W.treeFor !== ROLE) { W.treeFor = ROLE; cur.scrollIntoView({ block: 'nearest' }); }
   };
 
   // ══ 日程视图 ═══════════════════════════════════════════════════════
@@ -1657,6 +1576,7 @@
   // 未来 12 小时的刻度条: 哪几个钟点会有任务醒来, 一眼看完。超出 12h 的排进下面
   // 的列表但不占刻度 —— 把 24h 压进这么窄的一条, 刻度会密到读不出。
   var HORIZON_H = 12;
+  var broken = function (x) { return x.lastGate === 'error' || !!x.loadError; };
   var renderStrip = function (list) {
     var now = srvNow(), span = HORIZON_H * 3600000;
     var soon = list.filter(function (x) { return x.nextAt - now < span; });
@@ -1664,16 +1584,66 @@
     for (var i = 0; i <= HORIZON_H; i += 3) {
       var t = new Date(now + i * 3600000);
       ticks.push('<span class="tk" style="left:' + (i / HORIZON_H * 100) + '%">' +
-        (i ? (t.getHours() < 10 ? '0' : '') + t.getHours() + ':00' : '现在') + '</span>');
+        (i ? pad(t.getHours()) + ':00' : '现在') + '</span>');
     }
     var pins = soon.map(function (x) {
       var pct = Math.max(0, Math.min(100, (x.nextAt - now) / span * 100));
-      return '<span class="pin" style="left:' + pct.toFixed(2) + '%" data-t="' + esc(x.target) + '" ' +
-        'title="' + esc(fmtClock(x.nextAt) + ' · ' + nameOf(x.target) + ' · ' + x.when) + '"></span>';
+      return '<button class="pin' + (broken(x) ? ' bad' : '') + '" style="left:' + pct.toFixed(2) + '%" data-id="' + esc(x.id) + '" ' +
+        'title="' + esc(fmtClock(x.nextAt) + ' · ' + (x.note || x.id) + ' · ' + x.when) + '"><span>' + esc(fmtHM(x.nextAt)) + '</span></button>';
     }).join('');
     return '<div class="strip"><div class="axis">' + ticks.join('') + '</div>' +
       '<div class="rail">' + pins + '</div>' +
-      '<div class="cap">' + (soon.length ? '未来 ' + HORIZON_H + ' 小时内 ' + soon.length + ' 次触发' : '未来 ' + HORIZON_H + ' 小时内没有定时任务') + '</div></div>';
+      '<div class="cap">' + (soon.length ? '未来 ' + HORIZON_H + ' 小时内 ' + soon.length + ' 次触发 · 点刻度跳到那条' : '未来 ' + HORIZON_H + ' 小时内没有定时任务') + '</div></div>';
+  };
+
+  // 触发规则 = describeTrigger 的人话, 各段以 ` · ` 相接: 第一段是时钟 (什么时候响), 其余是闸 (什么时候不响)。
+  var ruleHTML = function (when) {
+    return String(when || '').split(' · ').filter(Boolean).map(function (part, i) {
+      return '<span class="rl' + (i ? ' guard' : ' clock') + '">' + (i ? '' : '⏱ ') + esc(part) + '</span>';
+    }).join('');
+  };
+  var gateHTML = function (x) {
+    if (!x.hasGate) return '<span class="gt none" title="没有 gate: 到点就放">无 gate</span>';
+    var at = x.lastGateAt ? ' · ' + fmtAgo(x.lastGateAt) : '';
+    return x.lastGate === 'go' ? '<span class="gt go" title="上一轮 gate 放行">gate 放行' + esc(at) + '</span>'
+      : x.lastGate === 'skip' ? '<span class="gt skip" title="上一轮 gate 判定没活, 没放枪 (不出声)">gate 挡下' + esc(at) + '</span>'
+      : x.lastGate === 'error' ? '<span class="gt err">gate 出错' + esc(at) + '</span>'
+      : '<span class="gt none">gate 未跑过</span>';
+  };
+  var flowHTML = function (x) {
+    var own = x.owner || x.createdBy;
+    return '<div class="pflow">' +
+      (own && own !== x.target ? '<span class="fl">排班</span>' + wizChip(own) + '<span class="ar">→</span>' : '') +
+      (x.fresh
+        ? '<span class="fl">执行</span><span class="fresh" title="每次到点新起一个白板 wizard, 跑完自动回收">✦ 新起白板</span><span class="fl">在</span>' + wizChip(x.target) + '<span class="fl">名下</span>'
+        : '<span class="fl">执行</span>' + wizChip(x.target) + '<span class="fl">注入已有会话</span>') +
+    '</div>';
+  };
+  var PLAN_OPEN = {};
+  var taskHTML = function (x) {
+    var lines = String(x.prompt || '').split('\n');
+    var head = x.note || lines[0];
+    var errs = [
+      x.loadError ? '<div class="perr"><b>任务文件加载失败</b> · 仍在跑上一版<code>' + esc(x.loadError.split('\n')[0].slice(0, 240)) + '</code></div>' : '',
+      x.lastGate === 'error' ? '<div class="perr"><b>gate 出错</b>' + (x.lastGateAt ? ' · ' + esc(fmtAgo(x.lastGateAt)) : '') +
+        ' · 本轮未放枪, 下次照常重试' + (x.lastError ? '<code>' + esc(x.lastError.split('\n')[0].slice(0, 240)) + '</code>' : '') + '</div>' : '',
+    ].join('');
+    return '<article class="tcard' + (broken(x) ? ' bad' : '') + '" data-id="' + esc(x.id) + '">' +
+      '<div class="tc-time"><b>' + esc(fmtHM(x.nextAt)) + '</b><span>' + esc(fmtClock(x.nextAt).replace(/ \d\d:\d\d$/, '')) + '</span>' +
+        '<em>' + esc(fmtIn(x.nextAt)) + '</em></div>' +
+      '<div class="tc-main">' +
+        errs +
+        '<div class="prule">' + ruleHTML(x.when) + '</div>' +
+        '<div class="ptitle">' + esc(head.slice(0, 120)) + '</div>' +
+        flowHTML(x) +
+        '<details class="pprompt" data-id="' + esc(x.id) + '"' + (PLAN_OPEN[x.id] ? ' open' : '') + '>' +
+          '<summary>prompt<span>' + esc((x.note ? lines[0] : lines.slice(1).join(' ')).slice(0, 90)) + '</span></summary>' +
+          '<pre>' + esc(x.prompt) + '</pre></details>' +
+        '<div class="pfoot">' + gateHTML(x) +
+          '<span>' + (x.lastFired ? '上次触发 ' + esc(fmtAgo(x.lastFired)) : '还没跑过') + '</span>' +
+          '<span class="pid" title="' + esc(x.file || '') + '">' + esc(x.id) + '</span></div>' +
+      '</div>' +
+    '</article>';
   };
 
   // 日程跟着 wizard 走: 只列归当前 role 的定时任务, 与它有关的工单 (它开的 / 它在里面)。
@@ -1684,67 +1654,63 @@
     });
     var open = js.filter(function (j) { return j.status === 'open'; });
     var closed = js.filter(function (j) { return j.status !== 'open'; });
-    var schedRows = ss.length
-      ? ss.map(function (x) {
-          return '<div class="prow">' +
-            '<div class="pl">' +
-              '<div class="pwhen">⏰ ' + esc(x.when) + '</div>' +
-              '<div class="pnext"><b>' + esc(fmtClock(x.nextAt)) + '</b><span>' + esc(fmtIn(x.nextAt)) + '</span></div>' +
-            '</div>' +
-            '<div class="pr">' +
-              '<div class="ph">' + wizChip(x.target) + (x.note ? '<span class="note">' + esc(x.note) + '</span>' : '') +
-                '<span class="pid">' + esc(x.id) + '</span></div>' +
-              '<div class="ptext">' + esc(x.prompt.split('\n')[0].slice(0, 160)) + '</div>' +
-              '<div class="pfoot">' + (x.lastFired ? '上次 ' + esc(fmtAgo(x.lastFired)) : '还没跑过') + '</div>' +
-            '</div>' +
-          '</div>';
-        }).join('')
-      : '<div class="pempty">' + esc(roleName(ROLE)) + ' 名下没有定时任务 —— 让它 schedule_task 排一个</div>';
+    var bad = ss.filter(broken);
+    var next = ss[0];
+    var stat = function (k, v, sub, tone) {
+      return '<div class="pst' + (tone ? ' ' + tone : '') + '"><span class="k">' + k + '</span><b>' + v + '</b><span class="s">' + sub + '</span></div>';
+    };
+    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="jid">' + esc(j.id) + '</span>' +
+        '<div class="jh"><span class="jst">' + (j.status === 'open' ? '进行中' : '已收工') + '</span>' +
           '<span class="jt">' + esc(j.title) + '</span>' +
-          '<span class="jst">' + (j.status === 'open' ? '进行中' : '已收工') + '</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) {
-              return '<span class="jmm">' + wizChip(mm.target) +
+              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, 70)) + '</em></span>';
+                '<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>';
     };
 
-    planEl.innerHTML =
+    var html = stats +
       '<section class="psec">' +
-        '<h3>⏰ 定时任务<span>' + ss.length + '</span></h3>' +
-        renderStrip(ss) + schedRows +
+        '<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>' +
+        '<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;
+    planEl._html = html;
+    planEl.innerHTML = html;
     planEl.querySelectorAll('.wchip.go').forEach(function (c) {
       c.onclick = function () { openNode(c.getAttribute('data-t')); };
     });
-  };
-
-  // 关系图上随时间变化的只有两样: 呼吸灯该不该亮、"几分钟前"该写几。重建整张图
-  // 会把滚动位置、聚焦态和连线一起抖掉, 所以这里只原地改这两处。
-  var tickWorld = function () {
-    wmapEl.querySelectorAll('.wnode').forEach(function (el) {
-      var n = nodeOf(el.getAttribute('data-t'));
-      if (!n) return;
-      var run = wRunning(n);
-      el.classList.toggle('run', run);
-      var av = el.querySelector('.wav'), dot = el.querySelector('.wav .live');
-      if (run && !dot && av) av.insertAdjacentHTML('beforeend', '<i class="live"></i>');
-      if (!run && dot) dot.remove();
-      var ts = el.querySelector('.wts');
-      if (ts) ts.textContent = fmtAgo(n.lastTs);
+    planEl.querySelectorAll('.pprompt').forEach(function (d) {
+      d.ontoggle = function () { PLAN_OPEN[d.getAttribute('data-id')] = d.open; planEl._html = ''; };
+    });
+    planEl.querySelectorAll('.strip .pin').forEach(function (p) {
+      p.onclick = function () {
+        var card = planEl.querySelector('.tcard[data-id="' + cssEsc(p.getAttribute('data-id')) + '"]');
+        if (!card) return;
+        card.scrollIntoView({ block: 'center', behavior: 'smooth' });
+        card.classList.remove('flash'); void card.offsetWidth; card.classList.add('flash');
+      };
     });
   };
 
@@ -1754,18 +1720,20 @@
   var WORLD_MS = 6000;
   var worldTimer = null;
   var loadWorld = function () {
-    return api('api/world', { role: ROLE }).then(function (d) {
+    var asked = ROLE;
+    return api('api/world', { role: asked }).then(function (d) {
       if (!d.ok) return;
-      W.at = d.at; W.loaded = true;
+      W.at = d.at; W.loaded = true; W.role = asked;
       W.nodes = d.nodes || []; W.edges = d.edges || []; W.chats = d.chats || [];
       W.jobs = d.jobs || []; W.schedules = d.schedules || []; W.degraded = !!d.degraded;
-      if (VIEW === 'world') renderWorld();
+      renderWorld();
+      loadGlance();
       if (VIEW === 'plan') renderPlan();
     }).catch(function () { });
   };
   var pollWorld = function () {
     if (worldTimer) { clearInterval(worldTimer); worldTimer = null; }
-    if (VIEW === 'msgs') return;
+    if (VIEW === 'msgs' && !WORLD) return;
     worldTimer = setInterval(function () {
       if (!document.hidden) loadWorld();
     }, WORLD_MS);
@@ -1774,29 +1742,42 @@
   var setView = function (v) {
     VIEW = v;
     thread.hidden = v !== 'msgs';
-    $('#pane-world').hidden = v !== 'world';
     $('#pane-plan').hidden = v !== 'plan';
     app.classList.toggle('outer', v !== 'msgs');
     // 手机上关系/日程占满主区 —— 进入即阅读态。
     if (v !== 'msgs') app.classList.add('reading');
     renderRole(); renderHead(); renderUsage();
-    if (v === 'msgs') { fxStop(); toBottom(true); renderConvs(); }
+    if (v === 'msgs') { toBottom(true); renderConvs(); }
     else {
-      // 关系图一打开就聚焦在当前 role 身上: 它的邻居亮着, 其余压暗。
-      if (v === 'world') W.sel = ROLE;
-      if (!W.loaded) { (v === 'world' ? wmapEl : planEl).innerHTML = '<div class="empty">加载中…</div>'; }
-      else if (v === 'world') renderWorld();
+      if (!W.loaded) { planEl._html = ''; planEl.innerHTML = '<div class="empty">加载中…</div>'; }
       else renderPlan();
       loadWorld();
     }
     pollWorld();
   };
-  // 卡片换行会改变每个节点的坐标 —— 连线必须跟着重画。
-  window.addEventListener('resize', function () {
-    if (VIEW !== 'world') return;
-    if (W.layout === 'force') renderForce(); else requestAnimationFrame(drawEdges);
-  });
-
+  // 侧栏换成关系图 / 换回会话列表。换回时选中的仍是在关系图里点开的那一项, 并把它滚进视野。
+  var setWorld = function (on) {
+    WORLD = on; W.treeFor = ''; W.pickSelf = '';
+    convsEl._html = convsEl._tree = '';
+    syncUrl();
+    // 手机上侧栏与主区二选一 —— 开关在侧栏里, 结果也在侧栏里。
+    if (on) app.classList.remove('reading');
+    renderRole();
+    if (on) { renderWorld(); loadWorld(); }
+    else {
+      // 选中的子项得露出来: 群展开, 排在折叠条后面的连折叠条一起展开。
+      var c = convOf(CONV);
+      if (c) {
+        OPEN[CONV] = true; OPEN_AT = CONV;
+        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;
+      }
+      renderConvs();
+      var sel = convsEl.querySelector('.si.on') || convsEl.querySelector('.ci.on');
+      if (sel) sel.scrollIntoView({ block: 'nearest' });
+    }
+    pollWorld();
+  };
   // 本地心跳: 相对时间、运行中判定、耗时都随时间变化, 但服务端没有新事件可推。
   setInterval(function () {
     if (!R.role) return;
@@ -1804,12 +1785,202 @@
     expireRows();
     // 侧栏的「几分钟前」与状态灯: 内容没变时 renderConvs 不碰 DOM。
     paintStatus(); renderConvs();
-    if (VIEW === 'world') tickWorld();
-    else if (VIEW === 'plan') renderPlan();
+    if (VIEW === 'plan') renderPlan();
   }, TICK_MS);
 
+  // ══ 搜索 (⌘K / Ctrl+K) ═══════════════════════════════════════════════
+  // 从当前视角搜三样: role 名字 (→ 切视角)、会话名 (→ 打开)、消息正文 (→ 打开会话并定位到那一句)。
+  // 服务端搜全部时间; 那一句不在当前 session 段里就放宽成「全部」再跳。空查询时列出最近的会话,
+  // 面板本身就是一个键盘快速切换器。面板由脚本挂载 —— 外壳 HTML 要等 daemon 重启才换。
+  var Q = { open: false, q: '', done: null, enter: false, items: [], sel: 0, gen: 0, timer: 0 };
+  var sk = document.body.appendChild(document.createElement('div'));
+  sk.className = 'sk'; sk.hidden = true;
+  sk.innerHTML = '<div class="sk-panel" role="dialog" aria-label="搜索">' +
+      '<div class="sk-in"><span class="ic">' + SEARCH_SVG + '</span>' +
+        '<input id="sk-q" type="search" autocomplete="off" spellcheck="false" placeholder="搜索 role、会话、消息…" aria-controls="sk-list">' +
+        '<kbd>esc</kbd></div>' +
+      '<div class="sk-list" id="sk-list" role="listbox"></div>' +
+      '<div class="sk-foot"><span><kbd>↑</kbd><kbd>↓</kbd> 选择</span><span><kbd>↵</kbd> 打开</span><span><kbd>esc</kbd> 关闭</span></div>' +
+    '</div>';
+  var skQ = sk.querySelector('#sk-q'), skList = sk.querySelector('#sk-list');
+
+  var reEsc = function (s) { return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); };
+  // 先切再转义: 命中段包 <mark>, 其余照常 esc。
+  var hl = function (text, q) {
+    var ts = q.toLowerCase().split(/\s+/).filter(Boolean);
+    if (!ts.length) return esc(text);
+    var re = new RegExp('(' + ts.map(reEsc).join('|') + ')', 'ig');
+    return String(text).split(re).map(function (p, i) { return i % 2 ? '<mark>' + esc(p) + '</mark>' : esc(p); }).join('');
+  };
+
+  // 一项 = { kind, html, go }: 画什么、回车做什么。
+  var roleItem = function (r, q) {
+    return {
+      kind: 'role',
+      html: '<span class="av">' + esc(r.label) + '</span><span class="b"><span class="l1">' +
+        '<span class="nm ' + (r.wizard ? 'wizard' : 'human') + '">' + hl(r.name, q) + '</span><span class="k">切到视角</span></span>' +
+        (r.description ? '<span class="pv">' + hl(r.description, q) + '</span>' : '') + '</span>',
+      go: function () { switchRole(r.id); },
+    };
+  };
+  // 时刻: 列表里写相对的, 悬停给完整的。
+  var skTs = function (ts) { return '<time class="ts" title="' + esc(fmtFull(ts)) + '">' + esc(fmtAgo(ts)) + '</time>'; };
+  // 会话归属: 群聊带群名, 私聊写明是私聊 —— 结果项第三层, 比发话人与正文都淡。
+  var whereOf = function (kind, label, name, q) {
+    return '<span class="where' + (kind === 'wizard' ? ' priv' : '') + '"><i>' + esc(label || '💬') + '</i>' +
+      (kind === 'wizard' ? '私聊 · ' : '') + hl(name, q || '') + '</span>';
+  };
+  var convItem_ = function (c, q) {
+    var title = c.kind === 'wizard' ? '<span class="nm wizard">' + hl(c.name, q) + '</span>' : '<span class="nm chat">' + hl(c.name, q) + '</span>';
+    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>' +
+        (c.preview ? '<span class="pv">' + esc(c.preview) + '</span>' : '') + '</span>',
+      go: function () { selectConv(c.key, ''); },
+    };
+  };
+  // 三层: 谁 → 对谁 · 何时 / 命中的那一截 / 在哪个会话。
+  var msgItem = function (h, q) {
+    var to = h.to && h.to !== h.from && h.to !== 'human:'
+      ? '<span class="arr">→</span>' + nm(h.to, h.toName) : '';
+    return {
+      kind: 'msg',
+      html: '<span class="av">' + esc(h.fromLabel) + '</span><span class="b"><span class="l1">' +
+        nm(h.from, h.fromName) + to + skTs(h.ts) + '</span>' +
+        '<span class="sn">' + hl(h.snippet, q) + '</span>' +
+        '<span class="l3">' + whereOf(h.convKind, h.convLabel, h.convName) +
+          (h.hits > 1 ? '<span class="cnt">' + h.hits + ' 处命中</span>' : '') + '</span></span>',
+      go: function () { jumpMsg(h); },
+    };
+  };
+
+  // 一句消息落在当前 session 段里没有 —— 不在就得放宽成全部才看得见。
+  var inSession = function (ts) {
+    var s = R.sessions.filter(function (x) { return x.sessionId === SESSION; })[0];
+    return !s || (ts >= s.start && (!s.end || ts < s.end));
+  };
+  // 定位一行: 滚到视口中间, 闪一下。窗口只上屏最近一截, 不在就整窗重取一次再找。
+  var focusRow = function (id) {
+    var row = rowNode(id);
+    if (!row) return false;
+    row.scrollIntoView({ block: 'center' });
+    S.pinned = atBottom();
+    row.classList.remove('hit'); void row.offsetWidth; row.classList.add('hit');
+    return true;
+  };
+  var landOn = function (id) {
+    return function () {
+      if (focusRow(id)) return true;
+      loadMsgs('0', function () { return focusRow(id); });
+      return true;
+    };
+  };
+  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 (VIEW !== 'msgs') setView('msgs');
+    app.classList.add('reading');
+    reveal();
+    refresh(landOn(h.id));
+  };
+
+  var paintSearch = function (sections) {
+    Q.items = sections.reduce(function (a, s) { return a.concat(s.items); }, []);
+    Q.sel = Math.min(Q.sel, Math.max(0, Q.items.length - 1));
+    var n = 0;
+    skList.innerHTML = sections.filter(function (s) { return s.items.length || s.empty; }).map(function (s) {
+      return '<h3>' + esc(s.title) + (s.count ? '<span>' + s.count + '</span>' : '') + '</h3>' +
+        (s.items.length
+          ? s.items.map(function (it) {
+              var i = n++;
+              return '<button class="sk-it ' + it.kind + (i === Q.sel ? ' on' : '') + '" role="option" data-i="' + i + '" aria-selected="' + (i === Q.sel) + '">' + it.html + '</button>';
+            }).join('')
+          : '<div class="sk-empty">' + esc(s.empty) + '</div>');
+    }).join('');
+  };
+  var moveSel = function (d) {
+    if (!Q.items.length) return;
+    Q.sel = (Q.sel + d + Q.items.length) % Q.items.length;
+    skList.querySelectorAll('.sk-it').forEach(function (b) {
+      var on = Number(b.getAttribute('data-i')) === Q.sel;
+      b.classList.toggle('on', on); b.setAttribute('aria-selected', on);
+      if (on) b.scrollIntoView({ block: 'nearest' });
+    });
+  };
+  var pick = function (i) {
+    var it = Q.items[i];
+    if (!it) return;
+    closeSearch();
+    it.go();
+  };
+
+  var recent = function () {
+    Q.done = '';
+    paintSearch([{ title: '最近的会话', items: R.convs.slice(0, 8).map(function (c) { return convItem_(c, ''); }), empty: '还没有会话' }]);
+  };
+  var runSearch = function () {
+    var q = skQ.value.trim(), gen = ++Q.gen;
+    Q.q = q; Q.sel = 0; Q.done = null;
+    if (!q) return recent();
+    api('api/search', { role: ROLE, q: q }).then(function (d) {
+      if (!d.ok || gen !== Q.gen) return;
+      var sections = [
+        { title: 'Role', items: d.roles.map(function (r) { return roleItem(r, q); }) },
+        { title: '会话', items: d.convs.map(function (c) { return convItem_(c, q); }) },
+        { title: '消息', count: d.msgTotal > d.msgs.length ? d.msgs.length + ' / ' + d.msgTotal : d.msgs.length,
+          items: d.msgs.map(function (h) { return msgItem(h, q); }) },
+      ];
+      if (!d.roles.length && !d.convs.length && !d.msgs.length) sections = [{ title: '结果', items: [], empty: '没有找到「' + q + '」' }];
+      paintSearch(sections);
+      Q.done = q;
+      // 结果还没回来时按下的回车, 落在回来的第一项上。
+      if (Q.enter) { Q.enter = false; pick(Q.sel); }
+    }).catch(function () { });
+  };
+
+  var openSearch = function () {
+    if (Q.open) { skQ.select(); return; }
+    Q.open = true; sk.hidden = false;
+    skQ.value = Q.q; skQ.focus(); skQ.select();
+    runSearch();
+  };
+  var closeSearch = function () {
+    if (!Q.open) return;
+    Q.open = false; sk.hidden = true; Q.enter = false;
+    clearTimeout(Q.timer);
+  };
+  skQ.addEventListener('input', function () { clearTimeout(Q.timer); Q.timer = setTimeout(runSearch, 140); });
+  skQ.addEventListener('keydown', function (e) {
+    if (e.isComposing) return;   // 输入法选词时的回车 / 方向键归输入法
+    if (e.key === 'ArrowDown' || (e.ctrlKey && e.key === 'n')) { e.preventDefault(); moveSel(1); }
+    else if (e.key === 'ArrowUp' || (e.ctrlKey && e.key === 'p')) { e.preventDefault(); moveSel(-1); }
+    else if (e.key === 'Enter') {
+      e.preventDefault();
+      var v = skQ.value.trim();
+      if (Q.done === v) return pick(Q.sel);
+      Q.enter = true;
+      if (Q.q !== v) { clearTimeout(Q.timer); runSearch(); }
+    }
+  });
+  skList.addEventListener('click', function (e) {
+    var b = e.target.closest('.sk-it');
+    if (b) pick(Number(b.getAttribute('data-i')));
+  });
+  skList.addEventListener('mousemove', function (e) {
+    var b = e.target.closest('.sk-it');
+    if (b && Number(b.getAttribute('data-i')) !== Q.sel) moveSel(Number(b.getAttribute('data-i')) - Q.sel);
+  });
+  sk.addEventListener('mousedown', function (e) { if (e.target === sk) closeSearch(); });
+  document.addEventListener('keydown', function (e) {
+    if ((MAC ? e.metaKey : e.ctrlKey) && !e.altKey && !e.shiftKey && (e.key === 'k' || e.key === 'K')) {
+      e.preventDefault();
+      Q.open ? closeSearch() : openSearch();
+    } else if (Q.open && e.key === 'Escape') { e.preventDefault(); closeSearch(); }
+  });
+
   // ── boot ──
   // 带着 role / conv 来的链接直接进阅读态 (手机上不先落在会话列表)。
-  if (ROLE || CONV) app.classList.add('reading');
+  if ((ROLE || CONV) && !WORLD) app.classList.add('reading');
   refresh();
 })();