wezard 2.4.0 → 2.5.0

package/web/chat.js

@@ -35,14 +35,14 @@
   // 关系/日程两栏共用的世界快照。treeFor = 已把谁滚进过视野。
   var W = {
     at: 0, nodes: [], edges: [], chats: [], jobs: [], schedules: [],
-    degraded: false, loaded: false, treeFor: '', glance: {}, gKeys: '',
+    degraded: false, loaded: false, treeFor: '', glance: {}, gKeys: '', gRole: '',
   };
   var VIEW = 'msgs';
   // 侧栏是会话列表还是关系图 —— 与右边的 VIEW 无关: 关系图下右边照样是选中的那段对话。
   // URL 带了 side 以它为准; 没带 (新链接) 用本地记下的, 见 WORLD_KEY。
   var WORLD = qs.get('side') === 'world';
   var $ = function (s) { return document.querySelector(s); };
-  var app = $('#app'), thread = $('#thread'), inner = $('#thread-in'), convsEl = $('#convs');
+  var app = $('#app'), main = $('.main'), thread = $('#thread'), inner = $('#thread-in'), convsEl = $('#convs');
   var planEl = $('#plan-in');
 
   var srvNow = function () { return R.at ? R.at + (Date.now() - R.recvAt) : Date.now(); };
@@ -105,6 +105,12 @@
     Object.keys(extra || {}).forEach(function (k) { p[k] = extra[k]; });
     return p;
   };
+  // 摘要另带未读基线 (定了才带): 服务端据此只给基线之后的他人未读账。不进 URL。
+  var roleParams = function (extra) {
+    var p = viewParams(extra);
+    if (BASE) p.since = BASE;
+    return p;
+  };
   // 视角状态回写 URL (replaceState: 不在历史里留一串中间态)。
   var syncUrl = function () {
     var p = new URLSearchParams({ id: TOKEN });
@@ -138,11 +144,11 @@
   };
   var roleLabel = function (id) {
     var k = names[id] || {}, n = nodeOf(id);
-    return k.label || (n && n.label) || ({ human: '👤', task: '⏰', system: '🧙' })[kindOf(id)] || '🧙';
+    return k.label || (n && n.label) || ({ human: '👤', task: '⏰', system: '🧙‍♂️' })[kindOf(id)] || '🧙';
   };
   // `.name` 的点由 CSS 画 —— 人与定时任务没有地址, 不画点。
   var nameOf = function (id) { return (kindOf(id) === 'wizard' ? '.' : '') + roleName(id); };
-  var canSwitch = function (id) { return !!id && kindOf(id) !== 'task' && kindOf(id) !== 'system' && id !== 'human:'; };
+  var canSwitch = function (id) { return !!id && kindOf(id) !== 'task' && kindOf(id) !== 'system'; };
   // 头像与名字就是进入那个 role 视角的入口 —— 侧栏项、会话头、消息行同一种读法。
   // 是 <span> 不是 <button>: 侧栏里它嵌在整行那颗按钮里。
   var goSpan = function (cls, id, inner) {
@@ -420,6 +426,10 @@
   var jobMark = function (ids) {
     return ids && ids.length ? '<span class="jmk" data-jobs="' + esc(ids.join(' ')) + '" title="' + esc((ids.length > 1 ? ids.length + ' 张工单: ' : '工单 ') + ids.join(' ') + ' —— 点开') + '">📋' + (ids.length > 1 ? '<i>' + ids.length + '</i>' : '') + '</span>' : '';
   };
+  // 微信通道群名字旁的状态: 判定与文字都是服务端 wxMark 给的, 这里只画。
+  var wxTag = function (w) {
+    return w ? '<span class="wxm ' + esc(w.state) + '" title="' + esc(w.tip) + '">' + esc(w.text) + '</span>' : '';
+  };
   // 视角不在里面的工单不在 R.convs 里: 按服务端的账 (R.jobIndex, 全部工单) 现造一项; 账里没有 = 已清掉 (job 为空)。
   var jobConv = function (key) {
     var id = key.slice(2), j = (R.jobIndex || {})[id];
@@ -506,52 +516,59 @@
       (unread ? '<b class="ub">' + (unread > 99 ? '99+' : unread) + '</b>' : '') + '</span></span>';
   };
 
-  // ── 未读: 别人说完、我还没读到的话 ──
-  // 服务端给每个会话一份 heard = [说完的时刻, 发话方, 收信方], 以及我在群里 / 每一对里
-  // 最后开口的时刻 (mine)。说给我的那句属于「我与发话方」那一对。一句话的已读水位 = 它所在那一处
-  // 「我最后开口」与「我看过」的较晚者: 属于某一对的看那一对 (群里说过话不等于读过别的线程), 不属于任何一对的看群。
-  // 基线是「打开页面这一刻」(BASE, 服务端时钟, 首次拿到快照时定): 此前已有的话不算未读, 之后新说完的才累加,
-  // 刷新即重置 —— 所以「看过」只活在内存里, 不落本地。按视角分账 (同一个群换个 role 看, 未读是另一回事)。
+  // ── 未读: 别人说完、还没在详情里读到的话 ──
+  // 服务端给每一行 (侧栏会话项 / 子项、关系图卡片) 一份账, 条目 = [说完的时刻, 发话方, 收信方, 消息 id], 按点开这一行
+  // 看到的消息 (与详情区取消息同一个 windowOf) 切成不相交的两份: heard = 这里看得见的未读 (右边红点) —— 页面视角的,
+  // 加上这一行主人的; theirs = 主人在这里看不见的未读 (名字旁) —— 切到它的视角才看得到。一句话在一行里最多数一次,
+  // 点开这一行读到的只从红点里减, 名字旁不因此变。
+  // 已读只有一份 (SEEN): 这句话说完的样子在详情里上过屏 (页面可见、正在看消息) 就记下它的 id ——
+  // 与页面视角、详情视角、侧栏 / 关系图无关, 哪一处读到, 所有视图里同一句话一起消失, 不必等下一份摘要。
+  // SEEN 落在 svr 上 (全局一份): 新看过的攒一小会儿批量写回, 服务端下发的账已经减掉记过的, 并带回基线 (seenBase) ——
+  // 刷新、另一个标签页 (下一次心跳) 都看得到。没落盘的服务端 (daemon 自己的页、老 svr) 或读写失败, 退回只活在内存里:
+  // 基线是「打开页面这一刻」(服务端时钟, 首次拿到快照时定), 刷新即重置。
   var BASE = 0;
-  var READ = { at: {} };
-  var readKey = function (key, withRole) { return ROLE + '|' + key + '|' + (withRole || ''); };
-  var seenAt = function (key, withRole) { return READ.at[readKey(key, withRole)] || 0; };
-  var unreadOf = function (c, withRole) {
-    var g = seenAt(c.key);
-    var mark = {};
-    (c.subs || []).forEach(function (s) { mark[s.role] = Math.max(g, BASE, s.mine || 0, seenAt(c.key, s.role)); });
-    var groupMark = Math.max(g, BASE, c.mine || 0);
-    return (c.heard || []).filter(function (h) {
-      var p = h[2] === ROLE ? h[1] : '';
-      if (withRole && p !== withRole) return false;
-      return h[0] > (p && mark[p] !== undefined ? mark[p] : groupMark);
-    }).length;
-  };
-  var reading = function () { return VIEW === 'msgs' && !document.hidden; };
-  // 窗口是 `a:<x>|<peers>` (关系图卡片) 时, 视角与 p 的往来在不在里面 —— 与服务端 talkOf 同一口径:
-  // 一端是 x、另一端是 peers 之一 (peers 空 = 不限), 不分频道。
-  var talkCovers = function (p, c) {
-    var t = convOf(CONV);
-    if (!t || t.kind !== 'all') return false;
-    // 限定了频道的窗口 (某 role 在一个群里的全部记录) 只覆盖那个群里的往来。
-    if (t.chat && (!c || c.base !== t.chat)) return false;
-    var hit = function (a, b) { return t.who === a && (!t.peers.length || t.peers.indexOf(b) >= 0); };
-    return hit(ROLE, p) || hit(p, ROLE);
-  };
-  // 一处会话里这次读到了哪几对 (存水位用的 withRole): 侧栏选中的就是那一项; 关系图卡片打开的
-  // 对话横跨会话, 每个会话里落在那段对话里的那几对都算 —— 私聊的那一对记在会话本身 ('')。
-  var readPairs = function (c) {
-    if (c.key === CONV) return [WITH];
-    if (c.kind !== 'group') return c.peer && talkCovers(c.peer, c) ? [''] : [];
-    return (c.subs || []).filter(function (s) { return talkCovers(s.role, c); }).map(function (s) { return s.role; });
-  };
-  // 读整个群 = 群的水位推到此刻 (子项随之全清); 只读一对 = 只推那一对的。
-  var markRead = function (c) {
+  var SEEN = {};
+  var OUTBOX = {}, OUT_T = 0;
+  var SEEN_URL = function () { return 'api/seen?id=' + encodeURIComponent(TOKEN); };
+  var flushSeen = function (leaving) {
+    clearTimeout(OUT_T); OUT_T = 0;
+    var ids = Object.keys(OUTBOX);
+    if (!ids.length) return;
+    var body = JSON.stringify(OUTBOX);
+    OUTBOX = {};
+    try {
+      if (leaving && navigator.sendBeacon) navigator.sendBeacon(SEEN_URL(), body);
+      else fetch(SEEN_URL(), { method: 'POST', body: body, keepalive: true }).catch(function () { });
+    } catch (e) { }
+  };
+  var queueSeen = function (rows) {
+    Object.keys(rows).forEach(function (id) { OUTBOX[id] = rows[id]; });
+    if (!OUT_T) OUT_T = setTimeout(flushSeen, 1500);
+  };
+  // 关页 / 切走时不等那 1.5s。
+  window.addEventListener('pagehide', function () { flushSeen(true); });
+  document.addEventListener('visibilitychange', function () { if (document.hidden) flushSeen(true); });
+  var unreadIn = function (hs) {
+    return (hs || []).filter(function (h) { return h[0] > BASE && !((SEEN[h[3]] || 0) >= h[0]); }).length;
+  };
+  var unreadOf = function (c) { return unreadIn(c.heard); };
+  // 一行的两枚未读, 侧栏会话项 / 子项与关系图卡片同一个: 红点 = 点开看得见的, 名字旁 = 主人在这里看不见的。
+  var tally = function (l) { return { unread: unreadIn(l && l.heard), theirs: unreadIn(l && l.theirs) }; };
+  var peerBadge = function (id, n) {
+    return n && id !== ROLE ? '<b class="pub" title="' + esc(nameOf(id) + ' 的视角下还有 ' + n + ' 条未读, 这一项里看不到') + '">' + (n > 99 ? '99+' : n) + '</b>' : '';
+  };
+  // 详情区真在屏上: 窄屏退回列表时它整个 display:none (offsetParent 为空)。
+  var reading = function () { return VIEW === 'msgs' && !document.hidden && thread.offsetParent !== null; };
+  // 上屏的片段记成已读 (正在看消息时): 记的是它说完的时刻, 还在吐字的那一版不算读到终句。
+  // 有新记的就重画侧栏 / 关系图 —— 两边从同一个 SEEN 派生, 同一拍变。
+  var see = function (frags) {
     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); });
+    var hit = frags.filter(function (m) { return m && m.fin && !((SEEN[m.id] || 0) >= m.fin); });
+    hit.forEach(function (m) { SEEN[m.id] = m.fin; });
+    if (hit.length) queueSeen(hit.reduce(function (o, m) { o[m.id] = m.fin; return o; }, {}));
+    if (hit.length && R.convs) renderConvs();
   };
+  var seeAll = function () { see(Object.keys(S.frags || {}).map(function (k) { return S.frags[k]; })); };
 
   // 跨会话通用的个人偏好 (看全部、列表 / 关系、侧栏群节点的展开、session 选择): 记在本地, 刷新后还在。
   // 取不到 / 写不进 (隐私窗口、禁存) 就按默认值, 页面照常。
@@ -601,7 +618,7 @@
     var vp = viewpoint && viewpoint !== ROLE ? viewpoint : '';
     if (key !== CONV || (withRole || '') !== WITH || VIEW !== 'msgs' || VIEWPOINT !== vp) return selectConv(key, withRole, undefined, viewpoint);
     // 窄屏退回列表后再点它是要回去读, 不是要取消。
-    if (!app.classList.contains('reading')) return app.classList.add('reading');
+    if (!app.classList.contains('reading')) { app.classList.add('reading'); return seeAll(); }
     var fold = !withRole && OPEN[key];
     if (fold) OPEN[key] = false;
     selectConv('a:' + ROLE, '', undefined, '');
@@ -609,10 +626,11 @@
   };
 
   // ── 会话项 / 子项 / 关系图卡片共用的三样: 一行的数据 (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) };
+  // glance = 时刻 · 最近一句 (g) · 两枚未读 (l 的账, 见 tally): 会话项与成对的子项两样都取自己 (子项 = 我与它在这个群里的那一对),
+  // 与我无往来的子项时刻与预览取它在群里的全部记录 (whole)。名字旁: 子项是它, 私聊项是对端, 群项没有主人。
+  var glance = function (l, g) {
+    var t = tally(l);
+    return { lastTs: (g || l).lastTs, preview: (g || l).preview, unread: t.unread, theirs: t.theirs };
   };
   // 同层按最近活动排, 有新话就上浮。
   var recentFirst = function (a, b) { return b.lastTs - a.lastTs; };
@@ -621,7 +639,7 @@
   var SWAP = '<i class="sw" aria-hidden="true">⇄</i>';
   var roleRow = function (id, name, label, g, status, tail, badge) {
     return goSpan('av', id, esc(label)) +
-      line(nm(id, name, true, SWAP + (badge || '')) + (tail || ''), g.lastTs, g.preview, stTag(status, true), g.unread);
+      line(nm(id, name, true, peerBadge(id, g.theirs) + SWAP + (badge || '')) + (tail || ''), g.lastTs, g.preview, stTag(status, true), g.unread);
   };
   // 名字旁的「+N」: 视图外还有 N 个 —— 同一个徽标, 数什么由所在的视图注入 (会话列表数会话, 关系图数关系)。
   var moreTag = function (n, tip) {
@@ -639,17 +657,16 @@
   var convRow = function (c) {
     if (c.kind === 'wizard') return roleRow(c.peer, c.name, c.label, glance(c), c.status, jobMark(c.jobs), otherChats(c.peer, dmKey(c.peer)));
     if (c.kind === 'job') return '<span class="av">' + esc(c.label) + '</span>' + line('<span class="nm chat">' + esc(c.name) + '</span>' + stageTag(c.job) + jobTag(c.job) + stuckTag(c.job), c.lastTs, c.preview, '', unreadOf(c));
-    return avatarOf(c) + line('<span class="nm chat">' + esc(c.name) + '</span>' + jobMark(c.jobs), c.lastTs, c.preview, stTag(c.status, true), unreadOf(c));
+    return avatarOf(c) + line('<span class="nm chat">' + esc(c.name) + '</span>' + wxTag(c.wx) + jobMark(c.jobs), c.lastTs, c.preview, stTag(c.status, true), unreadOf(c));
   };
-  var subRow = function (c, s) { return roleRow(s.role, s.name, s.label, glance(c, s), s.status, jobMark(s.jobs), otherChats(s.role, c.key + '|' + pairKey(s.role))); };
+  var subRow = function (c, s) { return roleRow(s.role, s.name, s.label, glance(s), s.status, jobMark(s.jobs), otherChats(s.role, c.key + '|' + pairKey(s.role))); };
 
   // 「chat 内全部」下与我无往来的那几项: 一行的数据是它在群里的全部记录 (服务端 whole, 与关系图卡片同一个
-  // glanceOfTalk), 点开看的也是那一份 (`a:<它>||<群>`, 对端不限)。没有成对的往来, 也就没有我的未读 —— 同关系图里
-  // 视角没有会话项的那张卡片。+N 数它的全部叶子, 这一项本身不是叶子。
+  // glanceOfTalk), 点开看的也是那一份 (`a:<它>||<群>`, 对端不限), 未读账也按那一份切 (服务端 subs 的 heard / theirs)。
+  // +N 数它的全部叶子, 这一项本身不是叶子。
   var farKey = function (c, s) { return 'a:' + s.role + '||' + c.base; };
   var farRow = function (s) {
-    var w = s.whole;
-    return roleRow(s.role, s.name, s.label, { lastTs: w.lastTs, preview: w.preview, unread: 0 }, s.status, '', otherChats(s.role, ''));
+    return roleRow(s.role, s.name, s.label, glance(s, s.whole), s.status, '', otherChats(s.role, ''));
   };
 
   var convItem = function (c) {
@@ -686,7 +703,7 @@
     if (c.kind === 'group' && c.subs && c.subs.length) {
       // 不能是 <button>: 嵌在外层 .ci 按钮里会被解析器提前闭合外层, chevron 就掉到卡片外
       var chevron = '<span role="button" class="ci-chevron' + (OPEN[c.key] ? ' on' : '') + '" data-toggle="' + esc(c.key) + '" title="' + (OPEN[c.key] ? '折叠群' : '展开群') + '"></span>';
-      var content = avatarOf(c) + '<span class="b"><span class="l1"><span class="t"><span class="nm chat">' + esc(c.name) + '</span>' + jobMark(c.jobs) + '</span>' + chevron + '<span class="ts">' + esc(fmtAgo(c.lastTs)) + '</span></span>' +
+      var content = avatarOf(c) + '<span class="b"><span class="l1"><span class="t"><span class="nm chat">' + esc(c.name) + '</span>' + wxTag(c.wx) + jobMark(c.jobs) + '</span>' + chevron + '<span class="ts">' + esc(fmtAgo(c.lastTs)) + '</span></span>' +
         '<span class="l2"><span class="pv">' + esc(c.preview) + '</span>' + (unreadOf(c) ? '<b class="ub">' + (unreadOf(c) > 99 ? '99+' : unreadOf(c)) + '</b>' : '') + '</span></span>';
       return '<button class="ci' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '">' + content + '</button>' + subs;
     }
@@ -709,7 +726,6 @@
   var renderConvs = function () {
     var groups = R.convs.filter(function (c) { return c.kind === 'group' && inWin(c.lastTs); }).sort(recentFirst);
     var dms = R.convs.filter(function (c) { return c.kind === 'wizard' && inWin(c.lastTs); }).sort(recentFirst);
-    R.convs.forEach(markRead);
     if (WORLD) return renderWorld();
     // 空着的那一栏不画 —— 对谁都一样: 人没有私聊只是这条规则的一个特例。
     var sec = function (title, list) {
@@ -848,7 +864,7 @@
     });
   };
   var worldToggle = function () {
-    return '<button class="vt" data-vt title="' + (WORLD ? '换回会话列表' : '换成关系') + '">' + (WORLD ? LIST_SVG + '列表' : TREE_SVG + '关系') + '</button>';
+    return '<button class="vt" data-vt title="' + (WORLD ? '换回聊天' : '换成关系') + '">' + (WORLD ? LIST_SVG + '聊天' : TREE_SVG + '关系') + '</button>';
   };
   var bindWorldToggle = function (scope) {
     var b = scope.querySelector('[data-vt]');
@@ -975,11 +991,29 @@
     return n < .01 ? '<$0.01' : '$' + (n < 10 ? n.toFixed(2) : n < 1000 ? n.toFixed(1) : Math.round(n));
   };
   // 费用: 有认不出价格的模型就在数前加「≥」—— 实际只多不少; 一分钱都没算出来就不占位。
+  // 计算过程: 服务端按模型分好行 (bill, 单价取自计价用的同一份价格表), 这里逐项摆成「token × 单价 = 金额」。
+  var BILL = [['input', 'in', 'in'], ['output', 'out', 'out'], ['cacheWrite', 'cw', 'cacheWrite'], ['cacheRead', 'cr', 'cacheRead']];
+  var usd4 = function (n) { return '$' + (n >= 100 ? n.toFixed(2) : n.toFixed(4)); };
+  var billLines = function (b) {
+    var head = b.label + (b.model && b.model !== b.label ? ' (' + b.model + ')' : '') + ' · ' + b.calls + ' 次请求';
+    if (!b.price) return [head, '  价格表里认不出, 未计入'];
+    return [head, '  单价 $/百万: ' + BILL.map(function (k) { return k[1] + ' ' + b.price[k[2]]; }).join(' · ')]
+      .concat(BILL.filter(function (k) { return b[k[0]] > 0; }).map(function (k) {
+        return '  ' + k[1] + ' ' + b[k[0]].toLocaleString('en-US') + ' × $' + b.price[k[2]] + ' / 1M = ' +
+          usd4(b[k[0]] * b.price[k[2]] / 1e6);
+      }))
+      .concat(['  小计 ' + usd4(b.cost)]);
+  };
   var costKv = function (u) {
     if (!u.cost) return '';
     var txt = (u.unpriced ? '≥' : '') + fmtUsd(u.cost);
-    var tip = '估算费用 — 每轮按模型单价 (LiteLLM 价格表快照) 计 input / output / 缓存写 / 缓存读' +
-      (u.unpriced ? '\n另有 ' + u.unpriced + ' 次 API 请求的模型不在价格表里, 未计入' : '');
+    var bill = u.bill || [];
+    var priced = bill.filter(function (b) { return b.price; });
+    var tip = ['估算费用 ' + usd4(u.cost) + ' — 按模型单价 (LiteLLM 价格表快照, USD / 百万 token) 逐项累加', '']
+      .concat(bill.reduce(function (a, b) { return a.concat(billLines(b), ['']); }, []))
+      .concat(priced.length > 1 ? ['合计 ' + priced.map(function (b) { return usd4(b.cost); }).join(' + ') + ' = ' + usd4(u.cost)] : [])
+      .concat(u.unpriced ? ['另有 ' + u.unpriced + ' 次 API 请求的模型不在价格表里, 未计入'] : [])
+      .join('\n').replace(/\n+$/, '');
     return '<span class="kv kv-cost" title="' + esc(tip) + '" data-tip="' + esc(ICON.cost + ' ' + txt) +
       '"><i class="u-ic">' + ICON.cost + '</i><b>' + esc(txt) + '</b></span>';
   };
@@ -1200,7 +1234,7 @@
     var peer = pairPeer(c);
     var pairName = peer && pairTitle(peer);
     who.innerHTML = peer ? '<span class="t" title="' + esc(pairName) + '">' + esc(pairName) + '</span>'
-      : '<span class="t">' + (c.kind === 'wizard' ? nm(c.peer, c.name, true) : '<span class="nm chat">' + esc(c.name) + '</span>') + '</span>';
+      : '<span class="t">' + (c.kind === 'wizard' ? nm(c.peer, c.name, true) : '<span class="nm chat">' + esc(c.name) + '</span>' + wxTag(c.wx)) + '</span>';
     acts.innerHTML = '';
     bindBack();
     bindGo(who);
@@ -1273,13 +1307,13 @@
     var c = convOf(CONV);
     var two = !group || !!pairPeer(c) || (!!c && c.kind === 'all' && c.peers.length === 1);
     var dst = two ? '' : mine
-      ? (m.to && m.to !== 'human:' && m.to !== peer ? m.to : '')
+      ? (m.to && m.to !== 'system:' && m.to !== peer ? m.to : '')
       : (m.to !== me && group ? m.to : '');
     // 说给谁画进文本泡泡开头 (头像 + 名字); 点它走移交行同一套跳转 (data-hfrom/hto/hch + gid/gts), 不换页面视角。
     var toIn = dst
       ? '<span class="to-in" role="button" tabindex="0" data-hfrom="' + esc(m.from) + '" data-hto="' + esc(m.to) + '" data-hch="' + esc(m.channel || '') +
-        '" data-gid="' + esc(m.id) + '" data-gts="' + m.ts + '" title="' + esc('发给 ' + nameOf(m.to) + ' —— 看这段往来') + '"><span class="av">' +
-        esc(roleLabel(m.to)) + '</span><span class="nm ' + kindOf(m.to) + '">' + esc(nameOf(m.to)) + '</span></span>'
+        '" data-gid="' + esc(m.id) + '" data-gts="' + m.ts + '" title="' + esc('发给 ' + nameOf(m.to) + ' —— 看这段往来') + '">' +
+        WZ.nameHead('<span class="av">' + esc(roleLabel(m.to)) + '</span>', '<span class="nm ' + kindOf(m.to) + '">' + esc(nameOf(m.to)) + '</span>') + '</span>'
       : '';
     var withTo = function (html) {
       if (!toIn) return html;
@@ -1298,7 +1332,7 @@
     var stat = m.meta ? '<span class="mstat">' + jobChips(m.meta) + '</span>' : '';
     var who = mine
       ? stamp(m.ts) + stat + avBtn(m.from)
-      : avBtn(m.from) + nm(m.from, '', true) + priv + stamp(m.ts) + stat;
+      : '<span class="said">' + WZ.said(WZ.nameHead(avBtn(m.from), nm(m.from, '', true))) + '</span>' + 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) + ' 的视角' : '') + '">' +
@@ -1424,6 +1458,7 @@
       foldPings(inner);
       expireRows();
       if (keep) keep();
+      see(fresh);
     }).catch(retry);
   };
 
@@ -1431,9 +1466,11 @@
   // early: 换视角时与摘要并行发出的同一个请求 (见 refresh) —— 窗口参数没变才拿来用。
   var loadMsgs = function (limit, land, early) {
     var gen = S.gen;
-    if (!CONV) { inner.innerHTML = '<div class="empty">选一个会话</div>'; return Promise.resolve(); }
+    if (!CONV) { unswitch(); inner.innerHTML = '<div class="empty">选一个会话</div>'; return Promise.resolve(); }
     return (early || api('api/msgs', viewParams(limit ? { limit: limit } : {}))).then(function (d) {
-      if (!d.ok || gen !== S.gen) return;
+      if (gen !== S.gen) return;
+      if (!d.ok) { if (unswitch()) inner.innerHTML = '<div class="empty">载入失败</div>'; return; }
+      unswitch();
       S.frags = {};
       d.msgs.forEach(function (m) { S.frags[m.id] = m; });
       if (!d.msgs.length) { inner.innerHTML = '<div class="empty">这里还没有消息</div>'; return; }
@@ -1445,6 +1482,7 @@
       expireRows();
       settleAbove();
       applyFold(inner);
+      see(d.msgs);
       if (land && land()) return;
       S.pinned = true; toBottom(true);
       // CDN 字体/代码高亮加载完会改变高度, 再吸一次底。
@@ -1457,6 +1495,7 @@
     var stick = S.pinned;
     var cur = rowNode(m.id);
     S.frags[m.id] = m;
+    see([m]);
     if (cur && cur.getAttribute('data-sig') === m.sig) return;
     // 折行会把 .mrow 收进 details, 而下面的按时间插位假定它们都是 inner 的直接子节点。
     unfoldPings(inner);
@@ -1508,7 +1547,7 @@
   // 收下摘要 (视角、会话列表、落地窗口) 与按它画页头侧栏分开: 换视角整窗重拉时, 画要等到新行到手的同一帧。
   var takeRole = function (d) {
     R.at = d.at || Date.now(); R.recvAt = Date.now();
-    if (!BASE) BASE = R.at;
+    if (d.seenBase) BASE = d.seenBase; else if (!BASE) BASE = R.at;
     R.role = d.role; R.sessions = d.sessions || []; R.convs = d.convs || []; R.chatKeys = d.chatKeys;
     SESSION = d.session || '';
     R.relations = !!d.relations; R.schedules = d.schedules || 0; R.plan = d.plan || null; R.inflight = d.inflight || [];
@@ -1533,13 +1572,15 @@
   };
 
   // 切回标签页时正在读的那项就算读过了。
-  document.addEventListener('visibilitychange', function () { if (!document.hidden) renderConvs(); });
+  document.addEventListener('visibilitychange', function () { if (!document.hidden) seeAll(); });
 
   // ── SSE: role 摘要 + 当前窗口的消息增量。断线指数退避重连。 ──
   var backoff = 1000;
   var connect = function () {
     if (S.es) { S.es.close(); S.es = null; }
-    var p = new URLSearchParams(viewParams({ id: TOKEN }));
+    // 换窗口的新内容还没上屏: 新窗口的增量会落进旧内容里 —— 等 loadMsgs 替换完再连 (断线重连的定时器也在这儿挡下)。
+    if (S.swapGen === S.gen) return;
+    var p = new URLSearchParams(roleParams({ id: TOKEN }));
     var es = new EventSource('api/role-events?' + p.toString());
     S.es = es;
     es.addEventListener('role', function (e) { try { applyRole(JSON.parse(e.data)); } catch (err) { } });
@@ -1566,7 +1607,7 @@
     var want = hold || !CONV ? '' : winSig();
     var early = want ? api('api/msgs', viewParams()) : null;
     W.pickHold = hold;
-    return api('api/role', viewParams()).then(function (d) {
+    return api('api/role', roleParams()).then(function (d) {
       if (!d.ok) {
         document.body.innerHTML = '<div class="empty" style="padding:80px">' + esc(d.error || 'not found') + '</div>';
         return;
@@ -1591,18 +1632,43 @@
   };
 
   // land: 见 loadMsgs —— 搜索跳到一条具体消息时由它来定位, 不吸底。
+  // 详情区正看着一个窗口时换窗口不清屏: 旧页头 / 正文 / 页脚原样留着 (只变暗、不接点击, 顶上一道细进度条),
+  // 新消息到手的同一帧整块替换 —— 已读也在那一刻才记 (see 跟着替换走)。连点只画最后一次 (gen)。
+  // 详情区原本不可见 (窄屏在列表、停在关系图 / 日程) 就没有可留的, 照旧先清成「加载中」。
   var selectConv = function (key, withRole, land, viewpoint) {
+    var warm = VIEW === 'msgs' && thread.offsetParent !== null && !!inner.querySelector('.mrow, .empty');
     CONV = key; WITH = withRole || ''; VIEWPOINT = viewpoint && viewpoint !== ROLE ? viewpoint : '';
     reveal();
     if (VIEW !== 'msgs') setView('msgs');
     app.classList.add('reading');
     // 上一个窗口的账不属于这个窗口 —— 先收起, 新的随 SSE 的首个 role 事件到。
     R.winStats = null;
-    renderConvs(); renderHead(); renderUsage();
     S.gen++;
     syncUrl();
-    inner.innerHTML = '<div class="empty">加载中…</div>';
-    loadMsgs(undefined, land).then(connect);
+    renderConvs();
+    if (warm) {
+      // 旧窗口的 SSE 先断: 它的增量 / 摘要不该再改留在屏上的旧内容, 新的等替换完 (connect 里挡着) 再连。
+      if (S.es) { S.es.close(); S.es = null; }
+      S.swapGen = S.gen;
+      main.classList.add('switching');
+    } else {
+      renderHead(); renderUsage();
+      inner.innerHTML = '<div class="empty">加载中…</div>';
+    }
+    var gen = S.gen;
+    loadMsgs(undefined, land).catch(function () {
+      if (gen !== S.gen) return;
+      unswitch(); inner.innerHTML = '<div class="empty">载入失败</div>';
+    }).then(function () { if (gen === S.gen) connect(); });   // 被后一次点击取代的由那一次去连
+  };
+  // 待替换的那次换窗口落地 (或被更新的一次取代): 收起加载态, 补画留着没动的页头页脚。返回它是否在等。
+  var unswitch = function () {
+    var was = S.swapGen != null;
+    if (!was) return false;
+    S.swapGen = null;
+    main.classList.remove('switching');
+    renderHead(); renderUsage();
+    return true;
   };
 
   // 换视角: 窗口尽量留在同一个群 —— 从群里的一条消息切过去, 最想看的是对方在这个群
@@ -1616,7 +1682,7 @@
     // 群里「我与 X」时换到 X, 对面看到的是「X 与 from」—— 同一段往来, 选中这一对而不是整个群。
     var withBack = keep && WITH === id ? from : '';
     // 整个频道 / 两人私聊 / 群里的一对, 消息集合都与视角无关 —— 集合没变就就地翻面。
-    var same = VIEW === 'msgs' && (!WITH || withBack) && !SESSION && (keep || CONV.indexOf('p:') === 0);
+    var same = VIEW === 'msgs' && (!WITH || withBack) && !SESSION && (keep || CONV.indexOf('p:') === 0) && S.swapGen !== S.gen;
     ROLE = id; WITH = withBack; SESSION = ''; VIEWPOINT = '';
     CONV = keep || (CONV.indexOf('p:') === 0 ? 'p:' + from : '');
     // 停在关系图时换视角 = 选中新视角自己那张卡片: 先开它的全部对话 (不留旧选中 / 空白),
@@ -1757,7 +1823,7 @@
     S.gen++;
     syncUrl();
     var gen = S.gen;
-    api('api/role', viewParams()).then(function (d) {
+    api('api/role', roleParams()).then(function (d) {
       if (!d.ok || gen !== S.gen) return;
       applyRole(d);
       // 断点 (/clear /new) 是旧视角 role 自己的, 新视角的由下面补拉。
@@ -1982,23 +2048,26 @@
   // 而不是节点自己最后的动静 —— 卡片承载的是边。
   // 身份 (头像 / 名字 / 状态灯) 永远是卡片自己的节点: 会话项的身份是「视角的对端」, 视角自己那张卡片
   // (边的下端是视角) 的对端是它的父亲 —— 拿会话项的身份去画, 这张卡片就成了父亲的分身。
-  // 时刻与最近一句取自卡片自己的窗口 (点它打开的那一份, 服务端 /api/glance 用同一个 talkOf 算, 说话人前缀
-  // 也在那里定); 窗口还没取到 (或第一遍量树时) 退回视角与对端的会话项 / 节点。未读跟着视角与对端的会话项走。
+  // 时刻、最近一句与两枚未读取自卡片自己的窗口 (点它打开的那一份, 服务端 /api/glance 用同一个 talkOf 算, 说话人前缀
+  // 也在那里定; 未读账与侧栏同一个 ledgerOf 按这一窗切, 主人 = 卡片上的 role)。窗口还没取到 (或第一遍量树时) 时刻与
+  // 最近一句退回视角与对端的会话项 / 节点, 未读先不画 —— 那一项点开看的不是这一窗, 它的账不属于这张卡片。
   var cardGlance = function (F, t, e) {
+    // 账随看的 role 而变 (红点里有视角的未读): 换了视角, 同一个窗口键下的旧账不能拿来画。
+    var w = F.links && W.gRole === ROLE && W.glance[talkKey(F.links, t)];
+    if (w) return glance(w);
     var hit = edgeConv(F, t, e), c = hit && convOf(hit[0]);
     var s = c && hit[1] && (c.subs || []).filter(function (x) { return x.role === hit[1]; })[0];
     var n = nodeOf(t) || {}, p = e || F.pp[t];
-    var base = c ? glance(c, s || undefined) : { lastTs: p ? p.last : n.lastTs || 0, preview: n.preview || '', unread: 0 };
-    var w = F.links && W.glance[talkKey(F.links, t)];
-    return w ? { lastTs: w.lastTs, preview: w.preview, unread: base.unread } : base;
+    var g = s || c || { lastTs: p ? p.last : n.lastTs || 0, preview: n.preview || '' };
+    return { lastTs: g.lastTs, preview: g.preview, unread: 0, theirs: 0 };
   };
   // 卡片窗口的 glance: 树里画了谁变了就取一次, 世界快照每次轮询也顺带刷新。
   var loadGlance = function () {
     var keys = W.gKeys, role = ROLE;
     if (!keys) return;
-    api('api/glance', { role: role, keys: keys }).then(function (d) {
+    api('api/glance', { role: role, keys: keys, since: BASE }).then(function (d) {
       if (!d.ok || role !== ROLE || keys !== W.gKeys) return;
-      W.glance = d.glances || {};
+      W.glance = d.glances || {}; W.gRole = role;
       renderWorld();
     }).catch(function () { });
   };
@@ -2323,7 +2392,7 @@
     // 手机上关系/日程占满主区 —— 进入即阅读态。
     if (v !== 'msgs') app.classList.add('reading');
     renderRole(); renderHead(); renderUsage();
-    if (v === 'msgs') { toBottom(true); renderConvs(); }
+    if (v === 'msgs') { toBottom(true); renderConvs(); seeAll(); }
     else if (v === 'charter') loadCharter();
     else if (v === 'jobs') renderJobList();
     else {
@@ -2424,7 +2493,7 @@
     all().forEach(function (x) { x.ontoggle = sync; });
   };
 
-  // 侧栏换成关系图 / 换回会话列表。换回时选中的仍是在关系图里点开的那一项, 并把它滚进视野。
+  // 侧栏换成关系图 / 换回聊天。换回时选中的仍是在关系图里点开的那一项, 并把它滚进视野。
   var setWorld = function (on) {
     WORLD = on; W.treeFor = ''; W.pickSelf = '';
     setPref(WORLD_KEY, on);
@@ -2521,12 +2590,11 @@
   };
   // 三层: 谁 → 对谁 · 何时 / 命中的那一截 / 在哪个会话。
   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) : '';
+    var to = h.to && h.to !== h.from && h.to !== 'system:' ? nm(h.to, h.toName) : undefined;
     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="said">' + WZ.speakerHead(nm(h.from, h.fromName), to) + '</span>' + 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>',