wezard 2.0.1 → 2.0.2

package/web/chat.css

@@ -18,14 +18,18 @@
   --pub: #237a55;     /* 公开 */
 }
 
-html, body { height: 100% }
+html { height: 100% }
 /* overscroll-behavior:none 阻止整页橡皮筋回弹 —— webview 里它会和内层
    .thread 抢滚动手势, 表现为"滚一下卡住/整页在弹"。 */
-body { overflow: hidden; overscroll-behavior: none; color: var(--ink) }
+/* body 是一根竖轴: 上面 .app (两栏), 下面整页页脚 (wizard 的用量条)。 */
+body {
+  height: 100vh; height: 100dvh; display: flex; flex-direction: column;
+  overflow: hidden; overscroll-behavior: none; color: var(--ink);
+}
 button { font: inherit; color: inherit }
 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
 
-.app { display: flex; height: 100vh; height: 100dvh }
+.app { display: flex; flex: 1; min-height: 0 }
 @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
 
 /* 名字 = 地址。点是地址的一部分, 也是这一页唯一的颜色记号。 */
@@ -49,6 +53,16 @@ button { font: inherit; color: inherit }
 .rolebar .id .l { min-width: 0; display: flex; flex-direction: column; gap: 2px }
 .rolebar .id .nm { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .rolebar .id .k { font-size: 11.5px; color: var(--mute) }
+/* 名片上的状态: 只有执行中带颜色与呼吸, 空闲 / 已关闭是一个安静的词。 */
+.rolebar .st { margin-left: 8px; white-space: nowrap }
+.rolebar .st::before {
+  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 4px;
+  border-radius: 50%; background: #b1bac4; vertical-align: 1px;
+}
+.rolebar .st.run { color: #1a7f37 }
+.rolebar .st.run::before { background: #1a7f37; animation: pulse 1.4s infinite }
+.rolebar .st.off { color: var(--faint) }
+.rolebar .st.off::before { background: transparent; box-shadow: inset 0 0 0 1.5px #b1bac4 }
 .rolebar .job { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); opacity: .8 }
 .rolebar .facts { display: flex; gap: 6px 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--mute) }
 .rolebar .facts span { white-space: nowrap }
@@ -99,36 +113,35 @@ button { font: inherit; color: inherit }
 .sp-it.all { border-bottom: 1px solid var(--line); border-radius: 6px 6px 0 0; margin-bottom: 3px }
 .sp-it.all .id { font-family: inherit }
 
-/* 左栏底: session 切换 + 用量, 都是轮次的事 —— 与顶上的身份分开, 钉在会话列表下面。 */
-.sidefoot {
-  flex: none; border-top: 1px solid var(--line); padding: 10px 12px 12px;
-  display: flex; flex-direction: column; gap: 8px; background: var(--paper);
-}
-.sidefoot[hidden] { display: none }
-#rb-sess:empty, #rb-prof:empty { display: none }
+/* 左栏底: session 切换 —— 轮次的事, 与顶上的身份分开, 钉在会话列表下面。 */
+.sidefoot { flex: none; border-top: 1px solid var(--line); padding: 10px 12px; background: var(--paper) }
 /* 在底部, 浮层往上开。 */
 .sidefoot .sp-list { top: auto; bottom: calc(100% + 4px); transform: translateY(4px) }
 .sidefoot .sp.open .sp-list { transform: none }
 
-/* profile: 这个 role 自己跑过的轮次的总账 —— 平铺在左栏底, 不套卡片。 */
-.prof { font-family: ui-monospace, Menlo, monospace }
-.prof .hd { display: flex; align-items: center; gap: 8px; font-size: 11.5px; margin-bottom: 6px }
-.prof .hd .lb { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px; font-family: system-ui, sans-serif }
-.prof .model {
-  margin-left: auto; color: var(--mute);
-  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-}
-.prof .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px }
-.prof .kv { display: flex; flex-direction: column; align-items: flex-start; min-width: 0 }
-.prof .kv .v { font-size: 13px; font-weight: 700; color: #1f2328; font-variant-numeric: tabular-nums; white-space: nowrap }
-.prof .kv .k { font-size: 9.5px; color: #8c959f; text-transform: uppercase; letter-spacing: .4px }
-.prof .io { margin-top: 8px; display: flex; flex-direction: column; gap: 6px }
-.prof .bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #eaeef2 }
-.prof .bar .seg { height: 100% }
-.prof .leg { display: flex; gap: 4px 9px; flex-wrap: wrap }
-.prof .lg { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: #8c959f }
-.prof .lg i { width: 8px; height: 8px; border-radius: 2px; flex: none }
-.prof .lg b { color: #1f2328; font-weight: 700; font-variant-numeric: tabular-nums }
+/* ── 用量条: 一组轮次的总账 ─────────────────────────────────────────
+   一个组件两处挂: 整页页脚 (wizard 的总账) / 聊天窗口底 (人与某个 wizard 这段往来的账)。
+   宽屏一行排完: 标签 · 指标 · I/O 条 + 图例 · 模型。每一组自身不折行, 一行排不下时
+   整组落到下一行 —— 窄屏自然变成两三行, 不需要另一套结构。 */
+.usage {
+  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 20px;
+  padding: 7px 20px; border-top: 1px solid var(--line); background: var(--paper);
+  font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--mute);
+  font-variant-numeric: tabular-nums;
+}
+.usage b { font-weight: 700; color: var(--ink) }
+.usage .u-lb { font: 10px system-ui, sans-serif; color: var(--faint); letter-spacing: .4px }
+.usage .u-kvs { display: flex; gap: 4px 16px }
+.usage .kv { white-space: nowrap; font-size: 9.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px }
+.usage .kv b { font-size: 12.5px; margin-right: 4px; letter-spacing: 0; text-transform: none }
+.usage .u-io { display: flex; align-items: center; gap: 12px; min-width: 0 }
+.usage .bar { flex: none; width: 140px; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line) }
+.usage .bar .seg { height: 100% }
+.usage .leg { display: flex; gap: 4px 12px }
+.usage .lg { display: flex; align-items: center; gap: 4px; white-space: nowrap }
+.usage .lg i { width: 8px; height: 8px; border-radius: 2px; flex: none }
+.usage .lg b { margin-left: 1px }
+.usage .u-model { margin-left: auto; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 
 /* 群聊头像 = 参与者头像拼图: 1 格居中, 2 格左右, 3/4 格田字。 */
 .mosaic {
@@ -148,7 +161,6 @@ button { font: inherit; color: inherit }
   display: flex; align-items: baseline; gap: 6px;
 }
 .convs h2 span { font-weight: 400; color: var(--faint); font-variant-numeric: tabular-nums }
-.convs .none { padding: 6px 10px; font-size: 12px; color: var(--faint) }
 
 .ci {
   display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; overflow: hidden;
@@ -192,7 +204,15 @@ button { font: inherit; color: inherit }
 .si .ts { margin-left: auto; flex: none; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums }
 .si .pv { display: block; font-size: 11.5px; color: var(--mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
 .si .pv:empty { display: none }
-.si.quiet .t, .si.quiet > .av { opacity: .55 }
+
+/* 执行中的 wizard: 头像角上一盏呼吸灯 (同关系图的 .wav .live)。 */
+.ci > .av, .si > .av { position: relative }
+.ci > .av .live, .si > .av .live {
+  position: absolute; right: 1px; bottom: -3px; width: 9px; height: 9px;
+  border-radius: 50%; background: #1a7f37; border: 2px solid #fff;
+  animation: pulse 1.4s infinite;
+}
+.si > .av .live { right: -1px; width: 8px; height: 8px }
 
 /* ── 右栏头: 这个群聊 / 私聊是什么 ───────────────────────────────── */
 .main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--card) }
@@ -271,6 +291,9 @@ button { font: inherit; color: inherit }
 .mrow.mine .mb .md-body pre code { background: transparent }
 .mrow.mine .mb .bubble details, .mrow.mine .mb .tg-head { border-color: var(--mine-line) }
 .mrow.mine .mb .tool-body { border-left-color: var(--mine-line) }
+/* 工具正文是展开时才取的 (chat.js loadTool) —— 空壳期间说一句在干什么。 */
+.tool-body[data-lazy-turn]:empty::before { content: "加载中…"; color: #8c959f; font-size: 12px }
+.tool-body[data-lazy-turn][data-err]:empty::before { content: "加载失败 · 收起再展开重试"; color: #cf222e }
 .mrow.mine .mb .io-bar { background: var(--mine-soft) }
 
 /* 气泡对面那片空白 = 换视角的门。平时不可见, 悬停才露出要去谁那里。 */
@@ -376,6 +399,11 @@ button { font: inherit; color: inherit }
   .flip { min-width: 16px; padding: 0 4px; font-size: 0 }
   .turn-group { padding: 12px }
   .thread { padding-bottom: calc(12px + env(safe-area-inset-bottom)) }
+  .usage { padding: 8px 12px; gap: 6px 14px }
+  .usage .u-kvs, .usage .leg { flex-wrap: wrap }
+  .usage .u-io { flex: 1 1 100%; flex-wrap: wrap; gap: 6px 12px }
+  .usage .bar { flex: 1 1 100%; width: auto }
+  .usage.page { padding-bottom: calc(8px + env(safe-area-inset-bottom)) }
 }
 
 /* UA 的 [hidden] 规则和 `.gbar{display:flex}` 这类类选择器同权重, 而作者样式

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 = 边类型开关。
@@ -207,10 +207,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,8 +248,24 @@
     });
     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 '<span class="av">' + esc(c.label) + (extra || '') + '</span>';
     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>';
@@ -247,31 +288,34 @@
   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 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>' +
+          return '<button class="si' + (sel ? ' on' : '') + '" data-conv="' + esc(c.key) + '" data-with="' + esc(s.role) + '" ' +
+            'title="' + esc('我与 ' + nameOf(s.role) + ' 在这里的 ' + s.count + ' 条往来') + '">' +
+            '<span class="av">' + esc(s.label) + lampOf(s.status) + '</span>' +
             line(nm(s.role, s.name), sel ? swapOf(s.role) : '', 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, sel && c.kind === 'wizard' ? swapOf(c.peer) : '', 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') || ''); };
     });
@@ -358,15 +402,16 @@
     $('#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>');
@@ -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);
   };
 
   // ── 右栏头: 这个群聊 / 私聊是什么 (关系 / 日程视图时是视图名) ──
@@ -625,7 +674,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 +683,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 +724,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 +1515,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 +1536,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 来的链接直接进阅读态 (手机上不先落在会话列表)。