wezard 2.4.1 → 2.5.0

package/web/chat.css

@@ -20,6 +20,8 @@
   --priv: #9a5b10;    /* 私聊 */
   --human: #12715a;  /* 人名 —— 青绿, 与 wizard (墨色) 和群名 (暗金) 三分 */
   --chat: #7d6410;    /* 群名 —— 暗金, 与 role 名 (墨色 + 视角色的点) 分开: 群是频道不是 role */
+  --wezard: #6b3fa0;  /* 系统 wezard (守护进程与认不出的发话方) —— 紫金: 紫起金收, 两端都压暗到正文对比度 */
+  --wezard-gold: #9a6a00;
   /* 头像底: 不透明, 且由 card/accent 推出 —— 叠在选中/高亮/关系图任何底色上都不变色, 换主题时随 token 走。 */
   --av-bg: var(--card);
   --av-line: var(--line);
@@ -46,6 +48,11 @@ button { font: inherit; color: inherit }
 .nm.human::before, .nm.task::before, .nm.system::before, .nm.chat::before { content: none }
 .nm.chat, .ch-who .sub .up { color: var(--chat) }
 .nm.human { color: var(--human) }
+.nm.system {
+  color: var(--wezard);
+  background: linear-gradient(90deg, var(--wezard), var(--wezard-gold));
+  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
+}
 
 /* ── 侧栏: 我 + 会话 ─────────────────────────────────────────────── */
 .side {
@@ -330,6 +337,14 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
   padding: 16px 20px 28px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
 }
 .thread-in { display: flex; flex-direction: column; gap: 14px }
+/* 换窗口时旧内容留着等新内容: 不接点击, 稍候才变暗 (快的切换看不出闪), 页头底边一道细进度条。 */
+.main.switching .thread-in, .main.switching .chathead > :not(.back) { pointer-events: none }
+.main.switching .thread-in { opacity: .6; transition: opacity .2s .15s }
+.main.switching .chathead {
+  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat;
+  background-size: 40% 2px; animation: swbar 1s ease-in-out infinite;
+}
+@keyframes swbar { from { background-position: -67% 100% } to { background-position: 167% 100% } }
 .empty { color: var(--faint); text-align: center; padding: 60px 0; font-size: 13px }
 .more-btn {
   align-self: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
@@ -351,6 +366,9 @@ span.av.go:hover { background: var(--av-hot); box-shadow: 0 0 0 3px var(--av-hot
 .mrow.mine .mcol { align-items: flex-end }
 .mwho { font-size: 11.5px; color: var(--mute); display: flex; gap: 6px; align-items: center; flex-wrap: wrap }
 .mwho .nm { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+/* 发言头 `🦊.a:` (WZ.said): 头像贴着名字、冒号贴着名字, 不吃 .mwho 的 gap。 */
+.mwho .said { display: inline-flex; align-items: center; min-width: 0; max-width: 100% }
+.mwho .said .av { margin-right: 2px }
 .mwho .ch { font-size: 10.5px; border-radius: 4px; padding: 0 4px }
 .mwho .ch.priv { color: var(--priv); background: #9a5b1014 }
 /* 时刻只此一处 —— 气泡外, 跟着名字走。等宽数字让一列时间对得齐。 */
@@ -382,16 +400,16 @@ button.mchip.rcpt:hover { text-decoration: underline }
 .mchip.rcpt:is(.st-timeout, .st-silent, .st-dead, .st-canceled) { color: #cf222e; background: #cf222e10 }
 /* 说给谁 (inline): 塞进正文第一段开头的头像 + 名字, 像行内 mention; 小圆角底色, 点它走移交行同一套跳转。 */
 .to-in {
-  display: inline-flex; align-items: center; gap: 3px; vertical-align: baseline; padding: 1px 6px; border-radius: 5px;
+  display: inline-flex; align-items: center; gap: 0; vertical-align: baseline; padding: 1px 6px; border-radius: 5px;
   line-height: 18px; background: color-mix(in srgb, #0969da 10%, transparent); color: var(--ink);
   cursor: pointer; transition: background .12s;
 }
 .to-in:hover { background: color-mix(in srgb, #0969da 20%, transparent) }
-.to-in .av { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 10px; line-height: 14px; text-align: center; align-self: center }
+.to-in .av { margin-right: 2px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 10px; line-height: 14px; text-align: center; align-self: center }
 .to-in .nm { font-weight: 500; font-size: 13px }
 .to-in .nm::before { content: none }
 /* 移交行里的对方: 小头像 + 名字。整行是入口 (开双方的往来), 悬停时整行提亮。 */
-.handoff .ho-who { display: inline-flex; align-items: center; gap: 3px; color: var(--ink) }
+.handoff .ho-who { display: inline-flex; align-items: center; gap: 2px; color: var(--ink) }
 .handoff .ho-line[data-hto]:hover { background: var(--av-hot); border-radius: 6px }
 .handoff .ho-who .av { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 10px; line-height: 14px; text-align: center }
 .handoff .ho-who .nm { font-weight: 500 }
@@ -906,8 +924,8 @@ button.mchip.rcpt:hover { text-decoration: underline }
 .sk-it.on .k { opacity: 1; color: var(--accent) }
 .sk-it .ts { margin-left: auto; flex: none; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums }
 .sk-it .pv { display: block; font-size: 12px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
-.sk-it .l1 .nm + .nm, .sk-it .arr + .nm { font-weight: 500; color: var(--mute) }
-.sk-it .arr { flex: none; color: var(--faint); font-size: 11.5px }
+.sk-it .said { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.sk-it .said .nm + .nm { font-weight: 500; color: var(--mute) }
 .sk-it .tag { flex: none; font-size: 10.5px; color: var(--mute); background: var(--paper); border-radius: 4px; padding: 1px 5px }
 /* 命中的那一截: 正文色, 最多两行; 命中词是这一页的视角色淡底 —— 与选中态一个色系。 */
 .sk-it .sn {
@@ -949,6 +967,9 @@ button.mchip.rcpt:hover { text-decoration: underline }
 .jtag { flex: none; margin-left: 6px; font-size: 10.5px; line-height: 15px; padding: 0 5px; border-radius: 4px; color: var(--faint); background: #f1f3f6; font-weight: 500 }
 .jtag.open { color: #94741f; background: #bf870014 }
 .jstuck { flex: none; margin-left: 4px; font-size: 10.5px; line-height: 15px; padding: 0 5px; border-radius: 4px; color: #8250df; background: #fbefff; font-weight: 500 }
+.wxm { flex: none; margin-left: 4px; padding: 0 4px; border-radius: 4px; font-size: 10.5px; white-space: nowrap; color: #2f7d32; background: #2f7d3214 }
+.wxm.paused { color: #94741f; background: #bf870014 }
+.wxm.down { color: #c62828; background: #c6282814 }
 .jmk { flex: none; margin-left: 4px; padding: 0 3px; border-radius: 4px; font-size: 10.5px; opacity: .8; cursor: pointer }
 .jmk:hover { opacity: 1; background: #bf870022 }
 .jmk i { font-style: normal; margin-left: 1px; color: #94741f; font-size: 10px }

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(); };
@@ -144,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) {
@@ -426,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];
@@ -513,30 +517,45 @@
   };
 
   // ── 未读: 别人说完、还没在详情里读到的话 ──
-  // 服务端给每个窗口 (侧栏会话项 / 子项、关系图卡片) 一份 heard = [说完的时刻, 发话方, 收信方, 消息 id]:
-  // 看的那个 role 在点开这一项会看到的消息里听得到、且晚于它在那一处最后开口的 (回过话 = 读到了那里)。
+  // 服务端给每一行 (侧栏会话项 / 子项、关系图卡片) 一份账, 条目 = [说完的时刻, 发话方, 收信方, 消息 id], 按点开这一行
+  // 看到的消息 (与详情区取消息同一个 windowOf) 切成不相交的两份: heard = 这里看得见的未读 (右边红点) —— 页面视角的,
+  // 加上这一行主人的; theirs = 主人在这里看不见的未读 (名字旁) —— 切到它的视角才看得到。一句话在一行里最多数一次,
+  // 点开这一行读到的只从红点里减, 名字旁不因此变。
   // 已读只有一份 (SEEN): 这句话说完的样子在详情里上过屏 (页面可见、正在看消息) 就记下它的 id ——
   // 与页面视角、详情视角、侧栏 / 关系图无关, 哪一处读到, 所有视图里同一句话一起消失, 不必等下一份摘要。
-  // 基线是「打开页面这一刻」(BASE, 服务端时钟, 首次拿到快照时定): 此前已有的话不算未读, 刷新即重置 ——
-  // 所以 SEEN 只活在内存里, 不落本地。
+  // SEEN 落在 svr 上 (全局一份): 新看过的攒一小会儿批量写回, 服务端下发的账已经减掉记过的, 并带回基线 (seenBase) ——
+  // 刷新、另一个标签页 (下一次心跳) 都看得到。没落盘的服务端 (daemon 自己的页、老 svr) 或读写失败, 退回只活在内存里:
+  // 基线是「打开页面这一刻」(服务端时钟, 首次拿到快照时定), 刷新即重置。
   var BASE = 0;
   var SEEN = {};
-  var unreadIn = function (hs, skip) {
-    return (hs || []).filter(function (h) { return h[0] > BASE && !((SEEN[h[3]] || 0) >= h[0]) && !(skip && skip[h[3]]); });
-  };
-  // 群里的成对子项 = 说给视角的、出自它的那几句; 不给 withRole = 整个会话。
-  var unreadHeard = function (c, withRole) {
-    return unreadIn(withRole ? (c.heard || []).filter(function (h) { return h[1] === withRole && h[2] === ROLE; }) : c.heard);
-  };
-  var unreadOf = function (c, withRole) { return unreadHeard(c, withRole).length; };
-  // 名字旁的他人未读: 点名字切到 id 的视角会看到的未读 (它全部会话项的, 服务端 peerUnread 按同一口径给),
-  // 减去这一行右边红点已在数的那几句。已读同样取自 SEEN —— 哪一处读到, 这里一起消。
-  var idsOf = function (hs) { return hs.reduce(function (m, h) { m[h[3]] = 1; return m; }, {}); };
-  var theirsOf = function (id, counted) {
-    return id && id !== ROLE ? unreadIn((R.peerUnread || {})[id], idsOf(counted || [])).length : 0;
-  };
+  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>' : '';
+    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; };
@@ -546,6 +565,7 @@
     if (!reading()) return;
     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]; })); };
@@ -606,11 +626,11 @@
   };
 
   // ── 会话项 / 子项 / 关系图卡片共用的三样: 一行的数据 (glance)、一行的画法 (roleRow)、排序 (recentFirst) ──
-  // glance = 时刻 · 最近一句 · 未读, 取自会话本身 (子项 = 我与它在这个群里的那一对)。
-  // theirs = 这一行主人的未读 (名字旁): 子项是它, 私聊项是对端, 群项没有。
-  var glance = function (c, s) {
-    var x = s || c, mine = unreadHeard(c, s ? s.role : undefined);
-    return { lastTs: x.lastTs, preview: x.preview, unread: mine.length, theirs: theirsOf(s ? s.role : c.peer, mine) };
+  // 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; };
@@ -637,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, theirs: theirsOf(s.role) }, 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) {
@@ -684,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;
     }
@@ -972,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>';
   };
@@ -1197,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);
@@ -1270,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;
@@ -1295,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) + ' 的视角' : '') + '">' +
@@ -1429,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; }
@@ -1508,8 +1547,8 @@
   // 收下摘要 (视角、会话列表、落地窗口) 与按它画页头侧栏分开: 换视角整窗重拉时, 画要等到新行到手的同一帧。
   var takeRole = function (d) {
     R.at = d.at || Date.now(); R.recvAt = Date.now();
-    if (!BASE) BASE = R.at;
-    R.role = d.role; R.sessions = d.sessions || []; R.convs = d.convs || []; R.chatKeys = d.chatKeys; R.peerUnread = d.peerUnread;
+    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 || [];
     // 工单的账变了 (或比消息晚到): 已上屏的工单 badge 按新账重填一遍 —— 片段里只写了工单号。
@@ -1539,6 +1578,8 @@
   var backoff = 1000;
   var connect = function () {
     if (S.es) { S.es.close(); S.es = null; }
+    // 换窗口的新内容还没上屏: 新窗口的增量会落进旧内容里 —— 等 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;
@@ -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 : '');
     // 停在关系图时换视角 = 选中新视角自己那张卡片: 先开它的全部对话 (不留旧选中 / 空白),
@@ -1982,26 +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, theirs: theirsOf(t) };
-    var w = F.links && W.glance[talkKey(F.links, t)];
-    if (!w) return base;
-    // 未读也取自卡片自己的窗口 (与侧栏同一个 unreadIn): 点开它看得到的才数; 名字旁的是卡片主人整个视角的 (theirsOf)。
-    var mine = unreadIn(w.mine);
-    return { lastTs: w.lastTs, preview: w.preview, unread: mine.length, theirs: theirsOf(t, mine) };
+    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 () { });
   };
@@ -2524,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>',