dsh-token-total 1.0.6 → 1.0.8

package/lib/index.js

@@ -47,6 +47,20 @@ function modelNameOf(modelRef) {
 	if (i > 0) return modelRef.slice(i + 1);
 	return modelRef;
 }
+/** Decode throughput across rows: Σ(output tokens) / Σ(decode window), matching
+*  the `sessionStats` projection's decodeTokens/decodeMs rate that the composer
+*  bottom bar shows. Rows without a decode window (failed attempts, cancelled
+*  steps, running requests) are excluded, so the card, the turn summaries and
+*  the bottom bar all report one speed. */
+function decodeRateOf(rows) {
+	let ms = 0;
+	let tokens = 0;
+	for (const row of rows) if (typeof row.decodeMs === "number" && Number.isFinite(row.decodeMs)) {
+		ms += row.decodeMs;
+		tokens += row.totals.outputTokens;
+	}
+	return ms > 0 ? tokens / (ms / 1e3) : null;
+}
 /** Canonicalize a DISPLAY NAME, never a route id. Case and word separators
 *  do not distinguish models, but versions, punctuation and suffixes do:
 *  gpt-6.1-sol / GPT 6.1 sol -> gpt-6.1-sol, not gpt-6.1 or gpt-61-sol.
@@ -1411,6 +1425,9 @@ var UsageCollector = class UsageCollector {
 //#region src/model-names.ts
 const LOOKUP_CONCURRENCY = 4;
 const LOOKUP_TIMEOUT_MS = 2e3;
+/** Raised when a lookup's own timer fires — i.e. the shared phase budget is
+*  spent. Workers stop on this instead of trusting the wall clock again. */
+var LookupTimeoutError = class extends Error {};
 /** Bound metadata queries even if an adapter fails to honor cancellation. */
 async function lookup(read, timeoutMs) {
 	const controller = new AbortController();
@@ -1419,7 +1436,7 @@ async function lookup(read, timeoutMs) {
 		return await Promise.race([Promise.resolve().then(() => read(controller.signal)), new Promise((_, reject) => {
 			timer = setTimeout(() => {
 				controller.abort();
-				reject(/* @__PURE__ */ new Error("model display-name lookup timed out"));
+				reject(new LookupTimeoutError("model display-name lookup timed out"));
 			}, timeoutMs);
 		})]);
 	} finally {
@@ -1470,7 +1487,9 @@ async function resolveModelNames(modelRefs, llm) {
 				try {
 					const info = await lookup((signal) => llm.resolveModelInfo(providerOf(ref), modelNameOf(ref), signal), remaining);
 					if (info.name?.trim()) names.set(ref, info.name);
-				} catch {}
+				} catch (error) {
+					if (error instanceof LookupTimeoutError) break;
+				}
 			}
 		}));
 	}
@@ -1490,7 +1509,9 @@ async function resolveModelNames(modelRefs, llm) {
 						const name = byId.get(modelNameOf(ref));
 						if (name?.trim()) names.set(ref, name);
 					}
-				} catch {}
+				} catch (error) {
+					if (error instanceof LookupTimeoutError) break;
+				}
 			}
 		}));
 	}
@@ -1519,9 +1540,6 @@ function usageOf(x) {
 		cacheWriteTokens: Number(u?.cacheWriteTokens) || 0
 	};
 }
-function positive(u) {
-	return u.uncachedInputTokens + u.outputTokens + u.cacheReadTokens + u.cacheWriteTokens > 0;
-}
 function routeOf(x) {
 	const source = x?.message?.source ?? x?.source ?? x?.request ?? x?.context ?? x;
 	return {
@@ -1529,19 +1547,65 @@ function routeOf(x) {
 		model: typeof source?.model === "string" ? source.model : ""
 	};
 }
+/** Whether one stream chunk carries the model's first output token. Mirrors
+*  `isTokenDelta` in @deepseek-ai/dsh-llm so the decode window starts on the
+*  same chunk the official `sessionStats` projection starts it on. */
+function isTokenDelta(chunk) {
+	switch (chunk?.type) {
+		case "text-delta":
+		case "reasoning-delta": return chunk.text !== "";
+		case "tool-call-delta": return chunk.argumentsDelta !== "" || chunk.name !== void 0;
+		default: return false;
+	}
+}
+/** Reconstructed time of the first token in one packed delta run (mirrors
+*  `runFirstTokenTime`): a name-bearing tool-call run starts at its first
+*  member, every other run at its first non-empty fragment. */
+function runFirstTokenTime(run) {
+	if (run?.type === "tool-call-chunks" && run.name !== void 0) return run.time0;
+	const fragments = run?.type === "tool-call-chunks" ? run.args : run?.texts;
+	if (!Array.isArray(fragments)) return void 0;
+	let time = Number(run.time0);
+	for (let i = 0; i < fragments.length; i++) {
+		if (i > 0) time += Number(run.dt?.[i - 1]) || 0;
+		if (fragments[i] !== "") return time;
+	}
+}
+/** Time of the first token in one compact attempt stream (mirrors
+*  `assistantStreamFirstTokenTime`). */
+function streamFirstTokenTime(stream) {
+	for (const r of Array.isArray(stream) ? stream : []) {
+		const t = r?.type === "chunk" ? isTokenDelta(r.chunk) ? r.time : void 0 : runFirstTokenTime(r);
+		if (typeof t === "number" && Number.isFinite(t)) return t;
+	}
+}
+/** Time of the first token carried by one live `assistant/chunk` payload. */
+function chunkFirstTokenTime(data, fallback) {
+	const c = data?.chunk;
+	if (!c) return void 0;
+	const timed = c.chunk && typeof c.time === "number" ? c : null;
+	if (!isTokenDelta(timed ? timed.chunk : c)) return void 0;
+	return timed ? timed.time : typeof c.time === "number" ? c.time : fallback;
+}
 function streamUsage(data) {
-	let firstTime;
 	let usage;
-	for (const r of Array.isArray(data?.stream) ? data.stream : []) {
-		const t = typeof r?.time === "number" ? r.time : void 0;
-		if (firstTime === void 0 && t !== void 0 && (r?.type === "chunk" || r?.chunk?.type === "text" || r?.chunk?.type === "content")) firstTime = t;
-		if (r?.type === "chunk" && r?.chunk?.type === "usage") usage = usageOf(r.chunk);
+	let raw;
+	for (const r of Array.isArray(data?.stream) ? data.stream : []) if (r?.type === "chunk" && r?.chunk?.type === "usage") {
+		usage = usageOf(r.chunk);
+		raw = r.chunk.usage ?? r.chunk;
 	}
 	return {
 		usage,
-		firstTime
+		raw
 	};
 }
+/** Provider-reported completion tokens, or null when unreported or invalid:
+*  an invalid count must not enter the decode quotient (mirrors
+*  `usageOutputTokens` in the sessionStats projection). */
+function usageOutputTokens(x) {
+	const value = (x?.usage ?? x)?.outputTokens;
+	return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : null;
+}
 function headerOf$1(item) {
 	const x = item;
 	if (x?.header?.id && typeof x.header.id === "string") return x.header;
@@ -1607,6 +1671,8 @@ async function one(p, id, header, live) {
 		if (label && title) break;
 	}
 	const name = label || title || nameOf(header, id);
+	const stepTokens = /* @__PURE__ */ new Map();
+	const closedSteps = /* @__PURE__ */ new Set();
 	for (const ev of own) {
 		const d = ev.data ?? {};
 		const turn = Number.isFinite(d.turn) ? d.turn : 0;
@@ -1665,6 +1731,7 @@ async function one(p, id, header, live) {
 					status: "running",
 					totals: zero(),
 					firstTokenMs: null,
+					decodeMs: null,
 					tokensPerSecond: null,
 					turnName: "",
 					effort,
@@ -1675,7 +1742,8 @@ async function one(p, id, header, live) {
 				byKey.set(key, rec);
 			}
 		} else if (ev.type === "assistant/chunk" || ev.type === "assistant/message" || ev.type === "assistant/attempt") {
-			rec = byKey.get(`${turn}:${step}`);
+			const key = `${turn}:${step}`;
+			rec = byKey.get(key);
 			if (!rec) {
 				rec = {
 					id: `${id}:${turn}:${step}:${ordinal++}`,
@@ -1690,6 +1758,7 @@ async function one(p, id, header, live) {
 					status: "running",
 					totals: zero(),
 					firstTokenMs: null,
+					decodeMs: null,
 					tokensPerSecond: null,
 					turnName: "",
 					effort,
@@ -1697,7 +1766,7 @@ async function one(p, id, header, live) {
 					_lastUsage: zero()
 				};
 				records.push(rec);
-				byKey.set(`${turn}:${step}`, rec);
+				byKey.set(key, rec);
 			}
 			if (r.provider) rec.provider = r.provider;
 			if (r.model) rec.model = r.model;
@@ -1706,17 +1775,22 @@ async function one(p, id, header, live) {
 			if (u) {
 				rec._lastUsage = u;
 				rec.totals = u;
-				if (positive(u) && rec.firstTokenMs === null) {
-					const rawFirst = su.firstTime ?? (typeof d.chunk?.time === "number" ? d.chunk.time : ev.time);
-					rec.firstTokenMs = Math.max(0, rawFirst - rec.startedAt);
-				}
+			}
+			const tokenAt = streamFirstTokenTime(d.stream) ?? chunkFirstTokenTime(d, ev.time);
+			if (tokenAt !== void 0) {
+				if (!stepTokens.has(key)) stepTokens.set(key, tokenAt);
+				if (rec.firstTokenMs === null) rec.firstTokenMs = Math.max(0, tokenAt - rec.startedAt);
 			}
 			if (ev.type !== "assistant/chunk") {
 				rec.finishedAt = ev.time;
 				rec.status = ev.type === "assistant/attempt" ? "failed" : "completed";
+				const stepFirst = stepTokens.get(key);
+				if (rec.status === "completed" && !closedSteps.has(key) && stepFirst !== void 0 && usageOutputTokens(d.usage) !== null) {
+					closedSteps.add(key);
+					rec.decodeMs = Math.max(0, rec.finishedAt - stepFirst);
+					if (rec.decodeMs > 0 && rec.totals.outputTokens > 0) rec.tokensPerSecond = rec.totals.outputTokens / (rec.decodeMs / 1e3);
+				}
 			}
-			const elapsedMs = rec.finishedAt === null ? null : Math.max(0, rec.finishedAt - rec.startedAt);
-			if (elapsedMs !== null && elapsedMs > 0 && rec.totals.outputTokens > 0) rec.tokensPerSecond = rec.totals.outputTokens / (elapsedMs / 1e3);
 		} else if (ev.type === "turn/end") {
 			const recs = records.filter((x) => x.turn === turn && x.status === "running");
 			for (const x of recs) {
@@ -1738,6 +1812,7 @@ async function one(p, id, header, live) {
 				status: "completed",
 				totals: u,
 				firstTokenMs: null,
+				decodeMs: null,
 				tokensPerSecond: null,
 				turnName: "",
 				effort: "",
@@ -1755,9 +1830,7 @@ async function one(p, id, header, live) {
 		});
 	}
 	const requests = records.length;
-	const firsts = records.map((x) => x.firstTokenMs).filter((x) => x !== null);
-	const outputSeconds = records.reduce((n, x) => n + x.totals.outputTokens, 0);
-	const elapsed = records.reduce((n, x) => n + (x.firstTokenMs ?? 0), 0);
+	const firsts = records.filter((x) => x.status === "completed").map((x) => x.firstTokenMs).filter((x) => x !== null);
 	for (const x of records) {
 		x.turnName = turnTopics.get(x.turn) ?? "";
 		delete x._attempt;
@@ -1771,7 +1844,7 @@ async function one(p, id, header, live) {
 		records,
 		requests,
 		averageFirstTokenMs: firsts.length ? firsts.reduce((a, b) => a + b, 0) / firsts.length : null,
-		tokensPerSecond: elapsed > 0 ? outputSeconds / (elapsed / 1e3) : null
+		tokensPerSecond: decodeRateOf(records)
 	};
 }
 async function buildSessionUsageDetail(persistence, sessions, rootId, ctx) {
@@ -1793,7 +1866,6 @@ async function buildSessionUsageDetail(persistence, sessions, rootId, ctx) {
 	}
 	const all = [rootId, ...ids];
 	const parts = await Promise.all(all.map((id) => one(persistence, id, headers.find((h) => h.id === id), live.get(id))));
-	const root = parts[0];
 	const totals = zero();
 	const models = /* @__PURE__ */ new Map();
 	const records = parts.flatMap((x) => x.records);
@@ -1852,12 +1924,13 @@ async function buildSessionUsageDetail(persistence, sessions, rootId, ctx) {
 			if (resolved) return resolved;
 		}
 	};
+	const firsts = records.filter((x) => x.status === "completed").map((x) => x.firstTokenMs).filter((x) => x !== null);
 	return {
 		sessionId: rootId,
 		totals,
 		requests: parts.reduce((n, p) => n + p.requests, 0),
-		averageFirstTokenMs: root.averageFirstTokenMs,
-		tokensPerSecond: root.tokensPerSecond,
+		averageFirstTokenMs: firsts.length ? firsts.reduce((a, b) => a + b, 0) / firsts.length : null,
+		tokensPerSecond: decodeRateOf(records),
 		subagents,
 		models: [...models.entries()].map(([model, x]) => {
 			const name = displayNameOf(model, x.providers);

package/lib/types/client/format.d.ts

@@ -7,7 +7,7 @@
  * from the shared zero-dependency module so the host and client halves share
  * one implementation.
  */
-export { providerOf, modelNameOf, normalizeModelName, daysInRange as daysBetween } from '../shared.ts';
+export { providerOf, modelNameOf, normalizeModelName, daysInRange as daysBetween, decodeRateOf } from '../shared.ts';
 /** Exact token counts with thousands separators — no 万/亿/k/M units, the
  *  user reads the precise number (long values shrink to fit via FitText).
  *  Compact units stay on the axis labels and card sub-values only. */

package/lib/types/client/session-usage-locales.d.ts

@@ -56,6 +56,9 @@ export declare const usageZh: {
     avgCache: string;
     avgRate: string;
     inProgress: string;
+    live: string;
+    asOf: string;
+    refresh: string;
 };
 export type SessionUsageKey = keyof typeof usageZh;
 export declare const usageEn: Record<SessionUsageKey, string>;

package/lib/types/client/use-session-detail.d.ts

@@ -4,5 +4,8 @@ export declare function useSessionDetail(sessionId: string): {
     detail: SessionUsageDetail | null;
     loading: boolean;
     error: boolean;
-    retry: () => void;
+    /** Manual refresh: runs now when idle, or right after an in-flight poll lands. */
+    refresh: () => void;
+    /** Wall-clock time of the last successful read, for the "as of" stamp. */
+    updatedAt: number | null;
 };

package/lib/types/shared.d.ts

@@ -18,6 +18,21 @@ export declare function providerOf(modelRef: string): string;
 /** The bare model id/name after a provider prefix. This does NOT resolve the
  *  human-readable display name; the host model metadata does that. */
 export declare function modelNameOf(modelRef: string): string;
+/** The decode accounting one request row must expose: the wall window from the
+ *  step's first token to its assembled assistant message, plus the output tokens
+ *  that window produced. */
+export interface DecodeRowLike {
+    decodeMs: number | null;
+    totals: {
+        outputTokens: number;
+    };
+}
+/** Decode throughput across rows: Σ(output tokens) / Σ(decode window), matching
+ *  the `sessionStats` projection's decodeTokens/decodeMs rate that the composer
+ *  bottom bar shows. Rows without a decode window (failed attempts, cancelled
+ *  steps, running requests) are excluded, so the card, the turn summaries and
+ *  the bottom bar all report one speed. */
+export declare function decodeRateOf(rows: readonly DecodeRowLike[]): number | null;
 /** Canonicalize a DISPLAY NAME, never a route id. Case and word separators
  *  do not distinguish models, but versions, punctuation and suffixes do:
  *  gpt-6.1-sol / GPT 6.1 sol -> gpt-6.1-sol, not gpt-6.1 or gpt-61-sol.

package/lib/types/wire.d.ts

@@ -172,6 +172,11 @@ export interface SessionUsageDetail {
         status: 'running' | 'completed' | 'failed' | 'interrupted';
         totals: SessionUsageTotals;
         firstTokenMs: number | null;
+        /** Wall window from this step's first token to the assembled assistant
+         *  message — the same decode window the `sessionStats` projection counts
+         *  (decodeMs). Null when the request never assembled a message or reported
+         *  no usage, so it stays out of every throughput quotient. */
+        decodeMs: number | null;
         tokensPerSecond: number | null;
         turnName: string;
         effort: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-token-total",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "DSH web plugin: token 用量统计看板 + 单会话（主智能体 + 子智能体）用量统计。提供今日/近3天/近7天/近1月/近3月/自定义筛选、六个汇总卡片、活跃热力图、缓存命中率折线与分模型柱状图、按模型/按供应商 Top5 列表。",
   "icon": "./icon.svg",
   "type": "module",

package/src/client/SessionUsageView.module.css

@@ -1,26 +1,35 @@
 /* A light, self-contained Usage surface. Tables fit the available width:
  * no horizontal scroll containers, fixed column contracts, titles for names.
- * Stat cards follow the reference dashboard: tinted left edge + icon chip,
- * label, big value, small subtitle. Request log folds by conversation turn. */
-.scroll { height:100%; min-height:0; overflow-y:auto; background:#ffffff; color:#252936; color-scheme:light; container-type:inline-size; }
+ * Six stat cards sit in one row (≤1050px: 3-up, ≤700px: 2-up) as quiet white
+ * surfaces on a pale canvas: no accent edges or watermarks, a flat tone chip
+ * leading each label, hierarchy from the type scale and a hairline above the
+ * footnote. Request log folds by conversation turn. */
+.scroll { height:100%; min-height:0; overflow-y:auto; background:#f6f7f9; color:#252936; color-scheme:light; container-type:inline-size; }
 .page { box-sizing:border-box; width:100%; max-width:1160px; margin:0 auto; padding:24px 26px 32px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:13px; }
 .page * { box-sizing:border-box; }
+/* Freshness header: live badge + last-read stamp on the left, manual refresh
+ * pinned to the right edge. */
+.head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
+.headStatus { display:flex; align-items:center; gap:7px; min-width:0; font-size:11px; color:#8790a3; }
+.liveDot { width:6px; height:6px; border-radius:50%; background:#18a97b; box-shadow:0 0 0 3px #e5f6f0; flex-shrink:0; }
+.asOf { color:#9aa3b3; font-variant-numeric:tabular-nums; white-space:nowrap; }
+.refresh { display:inline-flex; align-items:center; gap:5px; flex:none; color:#6f7a8d; background:#fff; border:1px solid #e4e7ee; border-radius:8px; padding:5px 11px; font:inherit; font-size:11px; cursor:pointer; }
+.refresh:hover { color:#279cb6; border-color:#cbd3e0; }
+.refresh:disabled { opacity:.55; cursor:default; }
 .scope { color:#8790a3; font-size:11px; margin:0 0 14px; }
-.stats { display:grid; gap:12px; margin-bottom:18px; }
-.statRow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
-.stat { min-width:0; position:relative; overflow:hidden; background:#fff; border:1px solid #e4e7ee; border-left:4px solid var(--tone); border-radius:12px; padding:12px 16px 11px; }
-.statHead { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
-.statIcon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:10px; color:#fff; background:linear-gradient(135deg, var(--tone), var(--tone-soft)); flex-shrink:0; box-shadow:0 3px 8px var(--tone-soft); }
-.statMark { position:absolute; right:-14px; bottom:-18px; width:92px; height:92px; color:var(--tone); pointer-events:none; }
-.statLabel { font-size:12px; color:#7d8495; }
-.statValue { display:block; font-size:25px; font-weight:650; letter-spacing:-0.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
-.statSub { display:block; margin-top:5px; font-size:11px; color:#939aac; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
+.stat { min-width:0; position:relative; background:#fff; border:1px solid #e7eaf0; border-radius:12px; padding:12px 14px 11px; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
+.stat:hover { border-color:#d9dfe9; box-shadow:0 14px 30px -22px rgba(23,32,54,.32); transform:translateY(-1px); }
+.statHead { display:flex; align-items:center; gap:5px; margin-bottom:6px; }
+.statIcon { display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; color:var(--tone); background:var(--tone-soft); flex-shrink:0; }
+.statLabel { font-size:12px; font-weight:500; color:#7b8494; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
+.statValue { display:block; font-size:21px; font-weight:650; letter-spacing:-0.4px; color:#1b2130; white-space:nowrap; font-variant-numeric:tabular-nums; }
+.statSub { display:block; margin-top:8px; padding-top:7px; border-top:1px solid #f2f4f8; font-size:11px; color:#939aab; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .toneBlue { --tone:#4f79f6; --tone-soft:#eaf0fe; }
 .tonePurple { --tone:#8b5cf6; --tone-soft:#f1ebfe; }
 .toneGreen { --tone:#18a97b; --tone-soft:#e5f6f0; }
 .toneOrange { --tone:#e8892c; --tone-soft:#fcf1e4; }
 .toneTeal { --tone:#16a4b8; --tone-soft:#e4f5f8; }
-.tonePink { --tone:#d9538c; --tone-soft:#fbeaf1; }
 .card { min-width:0; background:#fff; border:1px solid #e4e7ee; border-radius:12px; margin-bottom:18px; overflow:hidden; }
 .cardHead { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:54px; padding:15px 18px; border-bottom:1px solid #eef0f4; }
 .cardHead h2 { font-size:14px; font-weight:600; margin:0; }
@@ -57,7 +66,7 @@
 .empty { margin:0; padding:28px 18px; color:#9aa2b1; font-size:12px; text-align:center; }
 .action { color:#818b9e; background:none; border:0; padding:3px 0; font:inherit; font-size:11px; cursor:pointer; }
 .action:hover { color:#279cb6; }
-.action:focus-visible,.turnHead:focus-visible { outline:2px solid #2ab1c6; outline-offset:-2px; }
+.action:focus-visible,.turnHead:focus-visible,.refresh:focus-visible { outline:2px solid #2ab1c6; outline-offset:-2px; }
 .turnList { padding:0 14px 14px; }
 .turn { margin-top:10px; border:1px solid #e7eaf0; border-radius:9px; background:#fff; overflow:hidden; }
 .turnHead { display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 14px; width:100%; text-align:left; background:#f8f9fc; border:0; cursor:pointer; color:#616c7f; font:inherit; font-size:11px; }
@@ -93,15 +102,15 @@
 .error { background:#fff4f1; color:#b86751; border:1px solid #f4d8ce; border-radius:9px; padding:12px 16px; margin-bottom:16px; font-size:12px; display:flex; gap:16px; justify-content:space-between; }
 @container (max-width:1050px) {
   .mid { grid-template-columns:minmax(0,1fr); }
-  .statRow { grid-template-columns:repeat(2,minmax(0,1fr)); }
-  .statValue { font-size:23px; }
+  .stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
   .table { font-size:12px; }
   .childName { width:34%; }
 }
 @container (max-width:700px) {
   .page { padding:18px 14px 24px; }
-  .stat { padding:12px 12px 11px; }
-  .statValue { font-size:20px; }
+  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .stat { padding:10px 12px 9px; }
+  .statValue { font-size:18px; }
   .table { font-size:10px; }
   .table th,.table td { padding:10px 3px; }
   .table th:first-child,.table td:first-child { padding-left:10px; }
@@ -119,4 +128,6 @@
 }
 @media (prefers-reduced-motion:reduce) {
   .chevron { transition:none; }
+  .stat { transition:none; }
+  .stat:hover { transform:none; }
 }

package/src/client/SessionUsageView.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
 import type { SessionUsageDetail, SessionUsageTotals } from '../wire.ts'
 import { billedTotal, cacheHitPercentOf } from './session-usage-core.ts'
-import { formatCompact, formatTokens, normalizeModelName } from './format.ts'
+import { formatCompact, formatTokens, normalizeModelName, decodeRateOf } from './format.ts'
 import { SESSION_USAGE_NS, type SessionUsageKey } from './session-usage-locales.ts'
 import { useSessionDetail } from './use-session-detail.ts'
 import { ModelLogo } from './ModelLogo.tsx'
@@ -45,19 +45,15 @@ const icons = {
   speed: 'M13 2 4 14h7l-1 8 9-12h-7l1-8Z',
   input: 'M12 3v12M7 10l5 5 5-5M4 21h16',
   output: 'M12 21V9M7 14l5-5 5 5M4 3h16',
-  read: 'M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7ZM15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z',
-  write: 'M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5Z',
 }
 
 function Stat({ tone, name, label, value, sub, title }: { tone: string; name: keyof typeof icons; label: string; value: string | JSX.Element; sub?: string; title?: string }): JSX.Element {
   const icon = icons[name]
   return <article className={`${css.stat} ${tone}`}>
-    {/* Oversized gradient watermark filling the card's empty right side. */}
-    <svg className={css.statMark} viewBox="0 0 24 24" aria-hidden="true">
-      <defs><linearGradient id={`usage-mark-${name}`} x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="currentColor" stopOpacity="0.3" /><stop offset="1" stopColor="currentColor" stopOpacity="0.03" /></linearGradient></defs>
-      <path d={icon} fill={`url(#usage-mark-${name})`} stroke={`url(#usage-mark-${name})`} strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-    <div className={css.statHead}><span className={css.statIcon}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={icon} /></svg></span><span className={css.statLabel}>{label}</span></div>
+    <div className={css.statHead}>
+      <span className={css.statIcon}><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={icon} /></svg></span>
+      <span className={css.statLabel}>{label}</span>
+    </div>
     <strong className={css.statValue} title={title}>{value}</strong>
     {sub !== undefined && <span className={css.statSub}>{sub}</span>}
   </article>
@@ -68,18 +64,12 @@ function Metrics({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
   const failed = detail.records.filter(row => row.status === 'failed').length
   const failRate = detail.requests > 0 ? (failed / detail.requests * 100).toFixed(1) : '0.0'
   return <div className={css.stats}>
-    <div className={css.statRow}>
-      <Stat tone={css.toneBlue} name="requests" label={t('requestsCount')} value={formatTokens(detail.requests)} sub={`${t('failed')} ${failed} · ${failRate}%`} />
-      <Stat tone={css.tonePurple} name="tokens" label={t('tokens')} value={formatCompact(billed)} title={formatTokens(billed)} sub={`${formatTokens(billed)} tokens`} />
-      <Stat tone={css.toneGreen} name="hit" label={t('hit')} value={<Hit totals={detail.totals} />} sub={`${formatCompact(detail.totals.cacheReadTokens)} ${t('cacheHit')}`} />
-      <Stat tone={css.toneOrange} name="speed" label={t('speed')} value={speed(detail.tokensPerSecond)} sub={`${t('first')} ${seconds(detail.averageFirstTokenMs)}`} />
-    </div>
-    <div className={css.statRow}>
-      <Stat tone={css.toneTeal} name="input" label={t('inputFull')} value={formatCompact(detail.totals.uncachedInputTokens)} title={formatTokens(detail.totals.uncachedInputTokens)} sub={formatTokens(detail.totals.uncachedInputTokens)} />
-      <Stat tone={css.toneOrange} name="output" label={t('outputFull')} value={formatCompact(detail.totals.outputTokens)} title={formatTokens(detail.totals.outputTokens)} sub={formatTokens(detail.totals.outputTokens)} />
-      <Stat tone={css.tonePurple} name="read" label={t('readFull')} value={formatCompact(detail.totals.cacheReadTokens)} title={formatTokens(detail.totals.cacheReadTokens)} sub={formatTokens(detail.totals.cacheReadTokens)} />
-      <Stat tone={css.tonePink} name="write" label={t('writeFull')} value={formatCompact(detail.totals.cacheWriteTokens)} title={formatTokens(detail.totals.cacheWriteTokens)} sub={formatTokens(detail.totals.cacheWriteTokens)} />
-    </div>
+    <Stat tone={css.toneBlue} name="requests" label={t('requestsCount')} value={formatTokens(detail.requests)} sub={`${t('failed')} ${failed} · ${failRate}%`} />
+    <Stat tone={css.tonePurple} name="tokens" label={t('tokens')} value={formatCompact(billed)} title={formatTokens(billed)} sub={`${formatTokens(billed)} tokens`} />
+    <Stat tone={css.toneTeal} name="input" label={t('inputFull')} value={formatCompact(detail.totals.uncachedInputTokens)} title={formatTokens(detail.totals.uncachedInputTokens)} sub={formatTokens(detail.totals.uncachedInputTokens)} />
+    <Stat tone={css.toneOrange} name="output" label={t('outputFull')} value={formatCompact(detail.totals.outputTokens)} title={formatTokens(detail.totals.outputTokens)} sub={formatTokens(detail.totals.outputTokens)} />
+    <Stat tone={css.toneGreen} name="hit" label={t('hit')} value={<Hit totals={detail.totals} />} sub={`${formatCompact(detail.totals.cacheReadTokens)} ${t('cacheHit')}`} />
+    <Stat tone={css.toneOrange} name="speed" label={t('speed')} value={speed(detail.tokensPerSecond)} sub={`${t('first')} ${seconds(detail.averageFirstTokenMs)}`} />
   </div>
 }
 
@@ -150,14 +140,22 @@ function Records({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
     }
     group.rows.push(record)
   }
+  // Newest turn on top: groups order by the time of their most recent request,
+  // not by first appearance, so the live work leads and finished history trails
+  // (records arrive root-session first, subagents after, regardless of time).
+  const latest = (group: { rows: Row[] }): number => group.rows.reduce((max, row) => Math.max(max, row.startedAt), 0)
+  groups.sort((a, b) => latest(b) - latest(a))
   return <section className={css.card}><header className={css.cardHead}><h2>{t('records')} <span className={css.count}>{detail.records.length}</span></h2><button type="button" className={css.action} onClick={toggleAll}>{t(allOpen ? 'collapse' : 'expand')}</button></header>
     <div className={css.turnList}>{groups.map(group => {
       const open = allOpen !== opened.has(group.key)
       const totals = sum(group.rows)
       const billed = billedTotal(totals)
       const running = group.rows.filter(row => row.status === 'running').length
-      const rates = group.rows.map(row => row.tokensPerSecond).filter((n): n is number => n !== null)
-      const avgRate = rates.length ? Math.round(rates.reduce((a, b) => a + b, 0) / rates.length) : null
+      // Same decode based rate as the card and the composer bottom bar: the
+      // turn's output tokens over its summed decode windows, never the mean of
+      // independently rounded per-request rates.
+      const rate = decodeRateOf(group.rows)
+      const avgRate = rate === null ? null : Math.round(rate)
       return <article key={group.key} className={css.turn}>
         <button type="button" className={css.turnHead} onClick={() => toggle(group.key)} aria-expanded={open} aria-controls={`usage-turn-${encodeURIComponent(group.key)}`}>
           <svg className={`${css.chevron} ${open ? css.rotated : ''}`} width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="m4 2 4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
@@ -172,7 +170,9 @@ function Records({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
           </span>
         </button>
         <div id={`usage-turn-${encodeURIComponent(group.key)}`} className={css.turnBody} hidden={!open}>
-          {group.rows.map(record => {
+          {/* Newest first inside and out: every turn lists its newest request
+              first, and turn groups themselves lead with the latest turn. */}
+          {group.rows.slice().reverse().map(record => {
             const duration = record.finishedAt !== null ? record.finishedAt - record.startedAt : null
             const billed = billedTotal(record.totals)
             const hit = cacheHitPercentOf(record.totals)
@@ -189,8 +189,8 @@ function Records({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
                 <span className={`${css.statusDot} ${record.status === 'running' ? css.live : record.status === 'failed' ? css.bad : record.status === 'interrupted' ? css.muted : css.good}`} />
                 <span className={css.recordModel} title={`${record.provider} / ${record.model}`}><ModelLogo provider={record.provider} model={record.model} className={css.modelLogo} />{record.model || '—'}</span>
                 <span className={css.routeText} title={record.provider}>{providerNames.get(record.provider) || record.provider || '—'} · {modelShort(record.model) || '—'}</span>
-                {statusText !== '' && <span className={record.status === 'running' ? css.live : record.status === 'failed' ? css.bad : css.muted}>{statusText}</span>}
                 {record.effort ? <span className={css.effort}>· {record.effort}</span> : null}
+                {statusText !== '' && <span className={record.status === 'running' ? css.live : record.status === 'failed' ? css.bad : css.muted}>{statusText}</span>}
               </div>
               {record.finishedAt !== null && <div className={css.recordMeta}>{meta.map((item, i) => <span key={i} title={item.title}>{i > 0 ? ' · ' : ''}{item.text}</span>)}</div>}
             </div>
@@ -207,10 +207,24 @@ export function SessionUsageContent({ detail, t }: { detail: SessionUsageDetail;
 }
 
 export function SessionUsageView({ sessionId, t }: SessionUsageViewProps): JSX.Element {
-  const { detail, loading, error, retry } = useSessionDetail(sessionId)
+  const { detail, loading, error, refresh, updatedAt } = useSessionDetail(sessionId)
   return <div className={css.scroll} data-dsh-session-usage><div className={css.page}>
+    {/* Freshness header: the view polls continuously, so it always shows a live
+        badge with the time of the last successful read, plus a manual refresh
+        that refetches immediately. */}
+    <header className={css.head}>
+      <span className={css.headStatus}>
+        <span className={css.liveDot} aria-hidden="true" />
+        <span>{t('live')}</span>
+        {updatedAt !== null && <span className={css.asOf}>{t('asOf')} {clock(updatedAt)}</span>}
+      </span>
+      <button type="button" className={css.refresh} onClick={refresh} disabled={loading}>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /></svg>
+        {t('refresh')}
+      </button>
+    </header>
     {loading && <p className={css.empty} role="status">{t('loading')}</p>}
-    {error && <div className={css.error} role="status">{t('failedLoad')}<button type="button" className={css.action} onClick={retry}>{t('retry')}</button></div>}
+    {error && <div className={css.error} role="status">{t('failedLoad')}<button type="button" className={css.action} onClick={refresh}>{t('retry')}</button></div>}
     {detail && <SessionUsageContent detail={detail} t={t} />}
   </div></div>
 }

package/src/client/format.ts

@@ -10,7 +10,7 @@
 
 // Shared with the host half (src/shared.ts has no Node/DOM types, so the
 // client bundle may import it at runtime).
-export { providerOf, modelNameOf, normalizeModelName, daysInRange as daysBetween } from '../shared.ts'
+export { providerOf, modelNameOf, normalizeModelName, daysInRange as daysBetween, decodeRateOf } from '../shared.ts'
 
 /** Exact token counts with thousands separators — no 万/亿/k/M units, the
  *  user reads the precise number (long values shrink to fit via FitText).

package/src/client/session-usage-locales.ts

@@ -15,6 +15,7 @@ export const usageZh = {
   provider: '供应商', status: '状态', exact: '完整 token 数',
   answering: '正在回答...', firstWait: '首字耗时', sec: '秒', tokenWord: 'token', perSec: 'token/秒',
   cacheShort: '缓存', avgCache: '平均缓存', avgRate: '平均速率', inProgress: '个进行中',
+  live: '实时更新', asOf: '统计截至', refresh: '刷新',
 }
 export type SessionUsageKey = keyof typeof usageZh
 export const usageEn: Record<SessionUsageKey, string> = {
@@ -32,6 +33,7 @@ export const usageEn: Record<SessionUsageKey, string> = {
   provider: 'Provider', status: 'Status', exact: 'Exact token count',
   answering: 'answering...', firstWait: 'first token', sec: 's', tokenWord: 'token', perSec: 'token/s',
   cacheShort: 'cache', avgCache: 'avg cache', avgRate: 'avg rate', inProgress: 'in progress',
+  live: 'Live', asOf: 'as of', refresh: 'Refresh',
 }
 export const usageZhTW: Record<SessionUsageKey, string> = {
   ...usageZh,
@@ -47,4 +49,5 @@ export const usageZhTW: Record<SessionUsageKey, string> = {
   main: '主會話', turn: '輪', step: '步', started: '開始', duration: '耗時', firstDetail: '首 token', provider: '供應商', status: '狀態', exact: '完整 token 數',
   answering: '正在回答...', firstWait: '首字耗時', sec: '秒', tokenWord: 'token', perSec: 'token/秒',
   cacheShort: '快取', avgCache: '平均快取', avgRate: '平均速率', inProgress: '個進行中',
+  live: '即時更新', asOf: '統計截至', refresh: '重新整理',
 }