wezard 2.0.1 → 2.0.3

package/web/chat.js

@@ -22,7 +22,7 @@
 
   // at / recvAt: 服务端快照时刻与本地收到时刻。所有"现在几点"的判断都换算到
   // 服务端时钟, 否则客户端时钟偏几分钟就会把运行中的会话判成已结束。
-  var R = { at: 0, recvAt: 0, role: null, sessions: [], convs: [], relations: false, schedules: 0, stats: null };
+  var R = { at: 0, recvAt: 0, role: null, sessions: [], convs: [], relations: false, schedules: 0, stats: null, winStats: null };
   // frags: 当前窗口的原始片段 (id → 片段)。片段不带方向, 换视角时拿它就地重包左右。
   var S = { es: null, pinned: true, gen: 0, frags: {} };
   // 关系/日程两栏共用的世界快照。sel = 当前聚焦的节点, kinds = 边类型开关。
@@ -128,11 +128,23 @@
     return k.label || (n && n.label) || ({ human: '👤', task: '⏰', system: '🧙' })[kindOf(id)] || '🧙';
   };
   // `.name` 的点由 CSS 画 —— 人与定时任务没有地址, 不画点。
-  var nm = function (id, name) {
-    return '<span class="nm ' + kindOf(id) + '">' + esc(name || roleName(id)) + '</span>';
-  };
   var nameOf = function (id) { return (kindOf(id) === 'wizard' ? '.' : '') + roleName(id); };
   var canSwitch = function (id) { return !!id && kindOf(id) !== 'task' && kindOf(id) !== 'system' && id !== 'human:'; };
+  // 头像与名字就是进入那个 role 视角的入口 —— 侧栏项、会话头、消息行同一种读法。
+  // 是 <span> 不是 <button>: 侧栏里它嵌在整行那颗按钮里。
+  var goSpan = function (cls, id, inner) {
+    var on = canSwitch(id) && id !== ROLE;
+    return '<span class="' + cls + (on ? ' go" data-r="' + esc(id) + '" title="' + esc('切到 ' + nameOf(id) + ' 的视角') : '') + '">' + inner + '</span>';
+  };
+  var nm = function (id, name, go) {
+    var cls = 'nm ' + kindOf(id), txt = esc(name || roleName(id));
+    return go ? goSpan(cls, id, txt) : '<span class="' + cls + '">' + txt + '</span>';
+  };
+  var bindGo = function (root, sel) {
+    root.querySelectorAll(sel || '.go[data-r]').forEach(function (b) {
+      b.onclick = function (e) { e.stopPropagation(); switchRole(b.getAttribute('data-r')); };
+    });
+  };
 
   // ── markdown 渲染 (只对未渲染过的节点做, 复用节点不重绘) ──
   var md = null;
@@ -207,10 +219,35 @@
     var d = document.createElement('div'); d.innerHTML = html; return d;
   };
 
+  // ── 工具调用正文: 第二级数据, 展开那一刻才取 ──
+  // 片段里的 .tool-body 是个空壳 (data-lazy-turn / data-lazy-use), 首屏只带摘要行。
+  // toggle 不冒泡, 所以在线程根上用捕获听 —— 用户点开, 和 reconcile 换了新节点后
+  // restoreOpen 回填展开态, 走的是同一个事件: 后者正好把「展开着等结果」的那次调用
+  // 重取成带结果的正文。取到之后正文就留在节点上, 收起再展开不会重取。
+  var loadTool = function (d) {
+    var body = childBy(d, 'tool-body');
+    if (!body || !body.hasAttribute('data-lazy-turn') || body._busy || body.firstChild) return;
+    body._busy = true; body.removeAttribute('data-err');
+    api('api/tool', { turn: body.getAttribute('data-lazy-turn'), use: body.getAttribute('data-lazy-use') })
+      .then(function (r) {
+        if (!r.ok) throw new Error(r.error);
+        var stick = S.pinned;
+        body.innerHTML = r.html;
+        if (stick) toBottom(true);
+      })
+      // 失败留着空壳 (CSS 给出提示), 再展开一次就是重试。
+      .catch(function () { body.setAttribute('data-err', '1'); })
+      .then(function () { body._busy = false; });
+  };
+
   // ── 滚动: 默认到底; 用户手动上翻后解除吸附, 回到底部再吸附 ──
   var atBottom = function () { return thread.scrollHeight - thread.scrollTop - thread.clientHeight < 80; };
   var toBottom = function (force) { if (force || S.pinned) thread.scrollTop = thread.scrollHeight; };
   thread.addEventListener('scroll', function () { S.pinned = atBottom(); });
+  inner.addEventListener('toggle', function (e) {
+    var d = e.target;
+    if (d.open && d.classList && d.classList.contains('tool-call')) loadTool(d);
+  }, true);
 
   // ── 左栏: 当前 role 的名片 + 会话列表 ──
   var convOf = function (key) { return R.convs.filter(function (c) { return c.key === key; })[0]; };
@@ -223,63 +260,70 @@
     });
     return out;
   };
-  var avatarOf = function (c) {
-    if (c.kind !== 'group') return '<span class="av">' + esc(c.label) + '</span>';
+  // ── 状态: wizard 是否在执行中 ──
+  // 服务端只给事实 (busy / alive / runningUntil), 亮不亮在这里按本地时钟判 ——
+  // 到点没有新写入就自己熄 (同 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>' : '';
+  };
+  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 avatarOf = function (c, extra) {
+    if (c.kind !== 'group') return goSpan('av', c.peer, esc(c.label) + (extra || ''));
     var ms = membersOf(c).slice(0, 4);
     return '<span class="av mosaic n' + ms.length + '" aria-hidden="true">' +
       ms.map(function (m) { return '<i>' + esc(m.label || roleLabel(m.role)) + '</i>'; }).join('') + '</span>';
   };
 
-  // 选中的那一项若是个 role (私聊对端 / 群里的某人), 行内给一个换视角的开关。
-  // 不能是 <button>: 它嵌在整行那颗按钮里。
-  var SWAP = '<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 5.5h9M9.5 3l2.5 2.5L9.5 8M13 10.5H4M6.5 8 4 10.5 6.5 13" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>';
-  var swapOf = function (role) {
-    return canSwitch(role) && role !== ROLE
-      ? '<span class="sw" role="button" tabindex="0" data-sw="' + esc(role) + '" title="' + esc('切到 ' + nameOf(role) + ' 的视角') + '">' + SWAP + '</span>'
-      : '';
-  };
-  var line = function (title, sw, ts, pv) {
-    return '<span class="b"><span class="l1"><span class="t">' + title + '</span>' + sw +
+  var line = function (title, ts, pv) {
+    return '<span class="b"><span class="l1"><span class="t">' + title + '</span>' +
       '<span class="ts">' + esc(fmtAgo(ts)) + '</span></span>' +
       '<span class="pv">' + esc(pv) + '</span></span>';
   };
 
   var convItem = function (c) {
     var on = c.key === CONV;
-    var title = c.kind === 'wizard' ? nm(c.peer, c.name) : '<span class="nm chat">' + esc(c.name) + '</span>';
-    var subs = on && c.subs.length
-      ? '<div class="subs">' + c.subs.map(function (s) {
+    var title = c.kind === 'wizard' ? nm(c.peer, c.name, true) : '<span class="nm chat">' + esc(c.name) + '</span>';
+    // 只列与我有往来的: 在群里但没和我说过话的人, 点进去也是空的。
+    var talked = on ? c.subs.filter(function (s) { return s.count; }) : [];
+    var subs = talked.length
+      ? '<div class="subs">' + talked.map(function (s) {
           var sel = s.role === WITH;
-          return '<button class="si' + (sel ? ' on' : '') + (s.count ? '' : ' quiet') + '" data-conv="' + esc(c.key) + '" data-with="' + esc(s.role) + '" ' +
-            'title="' + esc(s.count ? '我与 ' + nameOf(s.role) + ' 在这里的 ' + s.count + ' 条往来' : '在这里, 但还没和我说过话') + '">' +
-            '<span class="av">' + esc(s.label) + '</span>' +
-            line(nm(s.role, s.name), sel ? swapOf(s.role) : '', s.lastTs, s.preview) + '</button>';
+          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) + lampOf(s.status)) +
+            line(nm(s.role, s.name, true), s.lastTs, s.preview) + '</button>';
         }).join('') + '</div>'
       : '';
     var sel = on && !WITH;
     return '<button class="ci' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '">' +
-        avatarOf(c) + line(title, sel && c.kind === 'wizard' ? swapOf(c.peer) : '', c.lastTs, c.preview) +
+        avatarOf(c, lampOf(c.status)) + line(title, c.lastTs, c.preview) +
       '</button>' + subs;
   };
 
   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 sec = function (title, list, none) {
-      return '<h2>' + title + '<span>' + list.length + '</span></h2>' +
-        (list.length ? list.map(convItem).join('') : '<div class="none">' + none + '</div>');
+    // 空着的那一栏不画 —— 对谁都一样: 人没有私聊只是这条规则的一个特例。
+    var sec = function (title, list) {
+      return list.length ? '<h2>' + title + '<span>' + list.length + '</span></h2>' + list.map(convItem).join('') : '';
     };
-    // 人没有私聊 —— wizard↔wizard 才有, 空着的那一栏也不画。
-    convsEl.innerHTML = sec('群聊', groups, '还没在任何群里说过话') +
-      (R.role && R.role.kind === 'human' ? '' : sec('私聊', dms, '没有和别的 wizard 私聊过'));
+    // 没变就不碰 DOM: 心跳每 3s 来一次, 重建会把列表的滚动与焦点蹭掉。
+    var html = sec('群聊', groups) + sec('私聊', dms);
+    if (convsEl._html === html) return;
+    convsEl._html = html; convsEl.innerHTML = html;
     convsEl.querySelectorAll('[data-conv]').forEach(function (b) {
       b.onclick = function () { selectConv(b.getAttribute('data-conv'), b.getAttribute('data-with') || ''); };
     });
-    convsEl.querySelectorAll('[data-sw]').forEach(function (x) {
-      var go = function (e) { e.stopPropagation(); switchRole(x.getAttribute('data-sw')); };
-      x.onclick = go;
-      x.onkeydown = function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); go(e); } };
-    });
+    bindGo(convsEl);
   };
 
   var shortCwd = function (p) {
@@ -334,7 +378,7 @@
     if (SESS_OPEN && e.key === 'Escape') setSessOpen(false);
   });
 
-  // 名片: 身份 · 出身 · cwd · 出生 · 关系 / 日程入口。
+  // 名片: 身份 · 出身 · cwd · 出生; 名片下面一排是关系 / 日程入口。
   var renderRole = function () {
     var r = R.role;
     if (!r) return;
@@ -358,17 +402,18 @@
     $('#rb-who').innerHTML =
       '<div class="id"><span class="av">' + esc(r.label) + '</span>' +
         '<span class="l">' + nm(r.id, r.name) +
-          '<span class="k">' + kind + '</span></span></div>' +
+          '<span class="k">' + kind + (r.kind === 'wizard' ? '<span class="st" id="rb-st"></span>' : '') + '</span></span></div>' +
       (r.description ? '<p class="job">' + esc(r.description) + '</p>' : '') +
       '<div class="facts">' + facts.join('') + '</div>';
+    paintStatus();
     $('#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;
     bindSessPicker();
-    syncFoot();
     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('');
@@ -379,60 +424,64 @@
     document.title = nameOf(r.id) + ' 的视角';
   };
 
-  // 左栏底: session 切换 + 用量总账, 都是「轮次」的事, 与上面的身份分开; 两样都空就整条收起。
-  var syncFoot = function () {
-    $('#rb-foot').hidden = !$('#rb-sess').innerHTML && !$('#rb-prof').innerHTML;
-  };
-
-  // ── profile: 当前 role 自己跑过的轮次的总账 (选了 session 就只算那一段) ──
-  var COLORS = { input: '#0a7d6b', cacheRead: '#8250df', cacheWrite: '#953800', output: '#1a7f37' };
+  // ── 用量条: 一组轮次的总账 ──
+  // usageHTML 只管「一本账长什么样」(TagSummary → 一条), 账是谁的、挂在哪由 renderUsage 定。
+  var SEGS = [
+    ['input', '输入', '#0a7d6b'], ['cacheRead', '缓存读', '#8250df'],
+    ['cacheWrite', '缓存写', '#953800'], ['output', '输出', '#1a7f37'],
+  ];
   var TIP = {
     turns: '对话轮数', tools: '工具调用次数', api: 'API 请求次数',
-    ctx: '上下文峰值 — 单次请求送入的 input + 缓存 的最高值',
-    out: '累计输出 token', cache: '累计缓存 token (读 + 写)', time: '累计耗时',
+    ctx: '上下文峰值 — 单次请求送入的 input + 缓存 的最高值', time: '累计耗时',
   };
   var liveDur = function (t) {
     var d = (t.usage && t.usage.durationMs) || 0;
     if (!t.runningUntil) return d;
     return d + Math.max(0, Math.min(srvNow(), t.runningUntil) - R.at);
   };
-  var renderProfile = function () {
-    var el = $('#rb-prof');
-    var t = R.stats;
-    if (!t) { el.innerHTML = ''; syncFoot(); return; }
+  var usageHTML = function (t) {
     var u = t.usage || {};
-    var segs = [['input', '输入'], ['cacheRead', '缓存读'], ['cacheWrite', '缓存写'], ['output', '输出']]
-      .filter(function (s) { return u[s[0]] > 0; });
+    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), 不占位置。
+    var kv = function (k, n, text) {
+      return n ? '<span class="kv" title="' + esc(TIP[k] || k) + '"><b>' + esc(text) + '</b>' + k + '</span>' : '';
+    };
+    // 输出 / 缓存不再单列成指标 —— 它们就是 I/O 图例里的那几格。
     var io = total > 0
-      ? '<div class="io" title="累计 token I/O · 共 ' + fmtTok(total) + '">' +
+      ? '<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:' +
-              COLORS[s[0]] + '" title="' + s[1] + ': ' + fmtTok(u[s[0]]) + '"></span>';
+              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:' + COLORS[s[0]] + '"></i>' + s[1] +
+            return '<span class="lg"><i style="background:' + s[2] + '"></i>' + s[1] +
               '<b>' + fmtTok(u[s[0]]) + '</b></span>';
           }).join('') + '</span>' +
-        '</div>'
+        '</span>'
       : '';
-    // 值为 0 = 该指标没有数据 (老记录 / 网关不报 usage), 不占格子。
-    var st = function (k, n, text) {
-      return n ? '<span class="kv" title="' + esc(TIP[k] || k) + '">' +
-        '<span class="v">' + esc(text) + '</span><span class="k">' + k + '</span></span>' : '';
-    };
-    var cache = (u.cacheRead || 0) + (u.cacheWrite || 0);
-    // 忙闲已在名片的状态里, 这里只留模型。
-    el.innerHTML =
-      '<div class="hd"><span class="lb">用量</span>' +
-        (t.model ? '<span class="model" title="' + esc(t.model) + '">' + esc(t.model.replace(/^claude-/, '')) + '</span>' : '') +
-      '</div>' +
-      '<div class="grid">' +
-        st('turns', t.turns, t.turns) + st('tools', u.tools, u.tools) + st('api', u.calls, u.calls) +
-        st('ctx', u.ctxPeak, fmtTok(u.ctxPeak)) + st('out', u.output, fmtTok(u.output)) +
-        st('cache', cache, fmtTok(cache)) + st('time', liveDur(t), fmtDur(liveDur(t))) +
-      '</div>' + io;
-    syncFoot();
+    return '<span class="u-lb">用量</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 +
+      (t.model ? '<span class="u-model" title="' + esc(t.model) + '">' + esc(t.model.replace(/^claude-/, '')) + '</span>' : '');
+  };
+  // 没变就不碰 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;
+    // 条的高度挤的是消息区 —— 原本贴底的继续贴底。
+    toBottom();
+  };
+  // wizard: 整页页脚, 它自己跑过的全部轮次 (选了 session 就只算那一段)。
+  // 人: 自己不跑轮次 —— 在群里点开某个 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);
   };
 
   // ── 右栏头: 这个群聊 / 私聊是什么 (关系 / 日程视图时是视图名) ──
@@ -448,7 +497,7 @@
     var c = convOf(CONV);
     if (!c) { who.innerHTML = ''; acts.innerHTML = ''; return; }
     if (c.kind === 'wizard') {
-      who.innerHTML = avatarOf(c) + '<span class="l"><span class="t">' + nm(c.peer, c.name) + '</span>' +
+      who.innerHTML = avatarOf(c) + '<span class="l"><span class="t">' + nm(c.peer, c.name, true) + '</span>' +
         '<span class="sub">私聊 · ' + c.count + ' 条</span></span>';
     } else {
       var ms = membersOf(c);
@@ -458,8 +507,9 @@
           (ms.length > 8 ? '…' : '') + '</span></span>';
     }
     acts.innerHTML = WITH
-      ? '<span class="with">只看我与 ' + nm(WITH) + '</span><button class="vb" id="ch-all">看全部</button>'
+      ? '<span class="with">只看我与 ' + nm(WITH, '', true) + '</span><button class="vb" id="ch-all">看全部</button>'
       : '';
+    bindGo(who); bindGo(acts);
     var x = $('#ch-all');
     if (x) x.onclick = function () { selectConv(CONV, ''); };
   };
@@ -480,11 +530,11 @@
     // 看 key 而不是会话列表: 换视角就地重包时, 列表还是上一个 role 的。
     var group = CONV.indexOf('p:') !== 0;
     // 群里我不是收信方的那条 (X → Y), 头上写清是说给谁的。
-    var to = !mine && m.to !== ROLE && group ? '<span class="to">→ ' + nm(m.to, m.toName) + '</span>' : '';
+    var to = !mine && m.to !== ROLE && group ? '<span class="to">→ ' + nm(m.to, m.toName, true) + '</span>' : '';
     var priv = !m.channel && group ? '<span class="ch priv">私聊</span>' : '';
     var who = mine
-      ? '<span class="to">' + (m.to && m.to !== 'human:' ? '→ ' + nm(m.to, m.toName) : '') + '</span>' + stamp(m.ts)
-      : nm(m.from, m.fromName) + to + priv + stamp(m.ts);
+      ? '<span class="to">' + (m.to && m.to !== 'human:' ? '→ ' + nm(m.to, m.toName, true) : '') + '</span>' + stamp(m.ts)
+      : nm(m.from, m.fromName, true) + to + priv + stamp(m.ts);
     var sw = canSwitch(other);
     var flip = '<button class="flip" data-r="' + esc(other) + '"' + (sw ? '' : ' disabled tabindex="-1"') +
       ' aria-label="' + esc(sw ? '切到 ' + nameOf(other) + ' 的视角' : '') + '">' +
@@ -541,9 +591,7 @@
   };
 
   var bindRow = function (el) {
-    el.querySelectorAll('.flip[data-r]:not([disabled]), .av.go').forEach(function (b) {
-      b.onclick = function () { switchRole(b.getAttribute('data-r')); };
-    });
+    bindGo(el, '.flip[data-r]:not([disabled]), .mwho .go[data-r]');
   };
   var rowNode = function (id) {
     var list = inner.querySelectorAll('.mrow');
@@ -625,7 +673,8 @@
   var applyRole = 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; R.stats = d.stats || null;
+    R.relations = !!d.relations; R.schedules = d.schedules || 0;
+    R.stats = d.stats || null; R.winStats = d.winStats || null;
     ROLE = d.role.id;
     learn(d.role.id, d.role.name, d.role.label);
     R.convs.forEach(function (c) {
@@ -633,7 +682,7 @@
       c.subs.forEach(function (s) { learn(s.role, s.name, s.label); });
     });
     if (!CONV || !convOf(CONV)) { CONV = d.conv || ''; WITH = ''; }
-    renderRole(); renderProfile(); renderConvs(); renderHead();
+    renderRole(); renderUsage(); renderConvs(); renderHead();
   };
 
   // ── SSE: role 摘要 + 当前窗口的消息增量。断线指数退避重连。 ──
@@ -674,7 +723,9 @@
     CONV = key; WITH = withRole || '';
     if (VIEW !== 'msgs') setView('msgs');
     app.classList.add('reading');
-    renderConvs(); renderHead();
+    // 上一个窗口的账不属于这个窗口 —— 先收起, 新的随 SSE 的首个 role 事件到。
+    R.winStats = null;
+    renderConvs(); renderHead(); renderUsage();
     S.gen++;
     syncUrl();
     inner.innerHTML = '<div class="empty">加载中…</div>';
@@ -1463,7 +1514,7 @@
     app.classList.toggle('outer', v !== 'msgs');
     // 手机上关系/日程占满主区 —— 进入即阅读态。
     if (v !== 'msgs') app.classList.add('reading');
-    renderRole(); renderHead();
+    renderRole(); renderHead(); renderUsage();
     if (v === 'msgs') { fxStop(); toBottom(true); }
     else {
       // 关系图一打开就聚焦在当前 role 身上: 它的邻居亮着, 其余压暗。
@@ -1484,13 +1535,13 @@
   // 本地心跳: 相对时间、运行中判定、耗时都随时间变化, 但服务端没有新事件可推。
   setInterval(function () {
     if (!R.role) return;
-    renderProfile();
+    renderUsage();
     expireRows();
+    // 侧栏的「几分钟前」与状态灯: 内容没变时 renderConvs 不碰 DOM。
+    paintStatus(); renderConvs();
     if (VIEW === 'world') tickWorld();
     else if (VIEW === 'plan') renderPlan();
   }, TICK_MS);
-  // 侧栏的「几分钟前」一分钟刷一次就够 —— 每 3s 重建会把列表的滚动与焦点蹭掉。
-  setInterval(function () { if (R.role && VIEW === 'msgs') renderConvs(); }, 60000);
 
   // ── boot ──
   // 带着 role / conv 来的链接直接进阅读态 (手机上不先落在会话列表)。