dsh-token-total 1.0.6 → 1.0.8

package/lib/client.js

@@ -29650,6 +29650,20 @@ window.__ModuleLoader__.load({
 			}
 			return out;
 		}
+		/** 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.
@@ -32638,6 +32652,7 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				let active = true;
 				let pending = false;
+				let wantedNow = false;
 				let timer;
 				let controller;
 				const request = () => {
@@ -32649,23 +32664,29 @@ window.__ModuleLoader__.load({
 						if (active) setReading({
 							sessionId,
 							detail,
-							error: false
+							error: false,
+							updatedAt: Date.now()
 						});
 					}).catch(() => {
 						if (active) setReading((previous) => ({
 							sessionId,
 							detail: previous?.sessionId === sessionId ? previous.detail : null,
-							error: true
+							error: true,
+							updatedAt: previous?.sessionId === sessionId ? previous.updatedAt : null
 						}));
 					}).finally(() => {
 						pending = false;
-						if (active) timer = setTimeout(request, DETAIL_POLL_MS);
+						if (active) timer = setTimeout(request, wantedNow ? 0 : DETAIL_POLL_MS);
+						wantedNow = false;
 					});
 				};
 				const wake = () => {
 					if (document.visibilityState === "visible") request();
 				};
-				refresh.current = request;
+				refresh.current = () => {
+					if (pending) wantedNow = true;
+					else request();
+				};
 				document.addEventListener("visibilitychange", wake);
 				request();
 				return () => {
@@ -32681,7 +32702,8 @@ window.__ModuleLoader__.load({
 				detail: current?.detail ?? null,
 				loading: current === null,
 				error: current?.error ?? false,
-				retry: () => refresh.current?.()
+				refresh: () => refresh.current?.(),
+				updatedAt: current?.updatedAt ?? null
 			};
 		}
 		//#endregion
@@ -32854,7 +32876,7 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0token-total-css:/home/runner/work/dsh-token-total/dsh-token-total/src/client/SessionUsageView.module.css?inline
-		const css = "/* A light, self-contained Usage surface. Tables fit the available width:\n * no horizontal scroll containers, fixed column contracts, titles for names.\n * Stat cards follow the reference dashboard: tinted left edge + icon chip,\n * label, big value, small subtitle. Request log folds by conversation turn. */\n.scroll_900471699 { height:100%; min-height:0; overflow-y:auto; background:#ffffff; color:#252936; color-scheme:light; container-type:inline-size; }\n.page_900471699 { 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; }\n.page_900471699 * { box-sizing:border-box; }\n.scope_900471699 { color:#8790a3; font-size:11px; margin:0 0 14px; }\n.stats_900471699 { display:grid; gap:12px; margin-bottom:18px; }\n.statRow_900471699 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }\n.stat_900471699 { 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; }\n.statHead_900471699 { display:flex; align-items:center; gap:8px; margin-bottom:8px; }\n.statIcon_900471699 { 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); }\n.statMark_900471699 { position:absolute; right:-14px; bottom:-18px; width:92px; height:92px; color:var(--tone); pointer-events:none; }\n.statLabel_900471699 { font-size:12px; color:#7d8495; }\n.statValue_900471699 { display:block; font-size:25px; font-weight:650; letter-spacing:-0.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }\n.statSub_900471699 { display:block; margin-top:5px; font-size:11px; color:#939aac; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }\n.toneBlue_900471699 { --tone:#4f79f6; --tone-soft:#eaf0fe; }\n.tonePurple_900471699 { --tone:#8b5cf6; --tone-soft:#f1ebfe; }\n.toneGreen_900471699 { --tone:#18a97b; --tone-soft:#e5f6f0; }\n.toneOrange_900471699 { --tone:#e8892c; --tone-soft:#fcf1e4; }\n.toneTeal_900471699 { --tone:#16a4b8; --tone-soft:#e4f5f8; }\n.tonePink_900471699 { --tone:#d9538c; --tone-soft:#fbeaf1; }\n.card_900471699 { min-width:0; background:#fff; border:1px solid #e4e7ee; border-radius:12px; margin-bottom:18px; overflow:hidden; }\n.cardHead_900471699 { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:54px; padding:15px 18px; border-bottom:1px solid #eef0f4; }\n.cardHead_900471699 h2 { font-size:14px; font-weight:600; margin:0; }\n.cardHead_900471699 > span { display:flex; gap:7px; align-items:center; font-size:11px; }\n.count_900471699 { display:inline-flex; align-items:center; justify-content:center; min-width:21px; padding:2px 6px; font-size:10px; color:#8b93a3; background:#f3f5f8; border-radius:5px; margin-left:5px; font-weight:500; }\n.mid_900471699 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:stretch; }\n.mid_900471699 .card_900471699 { height:100%; margin-bottom:0; }\n.mid_900471699 { margin-bottom:18px; }\n.table_900471699 { border-collapse:collapse; width:100%; table-layout:fixed; font-size:11px; }\n.table_900471699 th { color:#929aaa; font-weight:500; padding:12px 5px; text-align:right; vertical-align:middle; line-height:1.3; overflow-wrap:anywhere; }\n.table_900471699 td { padding:13px 5px; text-align:right; border-top:1px solid #eef0f4; color:#626c80; font-variant-numeric:tabular-nums; white-space:nowrap; }\n.table_900471699 th:first-child,.table_900471699 td:first-child { text-align:left; padding-left:16px; }\n.table_900471699 th:last-child,.table_900471699 td:last-child { padding-right:16px; }\n.childName_900471699 { width:28%; }\n.childRequests_900471699 { width:11%; }\n.modelName_900471699 { width:30%; }\n.modelRequests_900471699 { width:11%; }\n.modelHit_900471699 { width:16%; }\n.ellipsis_900471699 { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#394354; }\n/* By-model rows lead with the model's brand logo; the name keeps truncating\n * inside the flexible remainder of the cell. */\n.modelNameCell_900471699 { display:flex; align-items:center; gap:6px; min-width:0; }\n.modelNameCell_900471699 .ellipsis_900471699 { flex:1; min-width:0; }\n/* Gray provider label under a model name shown by several rows (同名模型). */\n.modelProvider_900471699 { display:block; margin-top:2px; font-size:10px; color:#939aaa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }\n.number_900471699 { font-variant-numeric:tabular-nums; }\n.speedCell_900471699 { display:inline-flex; align-items:baseline; gap:3px; white-space:nowrap; }\n.speedCell_900471699 small { font-size:9px; color:#929aaa; }\n.good_900471699 { color:#21a17b; }\n.warn_900471699 { color:#d69a21; }\n.bad_900471699 { color:#e06571; }\n.live_900471699 { color:#169bb3; }\n.muted_900471699 { color:#939aaa; }\n.empty_900471699 { margin:0; padding:28px 18px; color:#9aa2b1; font-size:12px; text-align:center; }\n.action_900471699 { color:#818b9e; background:none; border:0; padding:3px 0; font:inherit; font-size:11px; cursor:pointer; }\n.action_900471699:hover { color:#279cb6; }\n.action_900471699:focus-visible,.turnHead_900471699:focus-visible { outline:2px solid #2ab1c6; outline-offset:-2px; }\n.turnList_900471699 { padding:0 14px 14px; }\n.turn_900471699 { margin-top:10px; border:1px solid #e7eaf0; border-radius:9px; background:#fff; overflow:hidden; }\n.turnHead_900471699 { 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; }\n.chevron_900471699 { color:#99a1af; transition:transform 0.2s; }\n.rotated_900471699 { transform:rotate(90deg); }\n.turnTitle_900471699 { display:flex; align-items:center; gap:6px; min-width:0; font-size:12px; font-weight:600; color:#394354; }\n/* Turn topic is the group title now (the page header owns the session name),\n * so it carries the primary text color and truncates before the metrics. */\n.turnTopic_900471699 { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\n/* A subagent's turns look like this session's turns apart from the agent tag;\n * the tag keeps the full session name in its tooltip. */\n.turnAgent_900471699 { flex:none; padding:1px 6px; border-radius:5px; background:#e9edf4; color:#6f7889; font-size:10px; font-weight:500; }\n.turnSummary_900471699 { display:flex; gap:5px; align-items:center; white-space:nowrap; }\n.turnSummary_900471699 > span:last-child { margin-left:8px; }\n.turnBody_900471699 { border-top:1px solid #eef0f4; }\n.turnBody_900471699[hidden] { display:none; }\n/* A request row is one line: time, what answered, and its metrics pinned to the\n * row end. The metrics never wrap; they truncate with a tooltip before the head\n * gives up its model name. */\n.turnRequest_900471699 { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid #f3f5f9; }\n.turnRequest_900471699:first-child { border-top:0; }\n.turnRequestHead_900471699 { display:flex; align-items:center; gap:8px; font-size:11px; color:#616c7f; min-width:0; }\n.requestTime_900471699 { color:#9aa3b3; font-variant-numeric:tabular-nums; flex-shrink:0; }\n.statusDot_900471699 { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }\n/* Per-model brand logo: colors are baked into each logo's markup, only the\n * layout contract lives here. Unknown models get the neutral gray fallback. */\n.modelLogo_900471699 { flex-shrink:0; }\n.recordModel_900471699 { min-width:0; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#394354; font-weight:500; }\n.routeText_900471699 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#8b93a4; flex-shrink:1; }\n.effort_900471699 { white-space:nowrap; color:#9aa3b3; background:#f1f3f7; border-radius:5px; padding:1px 6px; }\n.recordMeta_900471699 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; font-size:10px; color:#949cab; font-variant-numeric:tabular-nums; }\n.note_900471699 { font-size:10px; line-height:1.7; color:#9aa3b3; margin:0; }\n.error_900471699 { 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; }\n@container (max-width:1050px) {\n  .mid_900471699 { grid-template-columns:minmax(0,1fr); }\n  .statRow_900471699 { grid-template-columns:repeat(2,minmax(0,1fr)); }\n  .statValue_900471699 { font-size:23px; }\n  .table_900471699 { font-size:12px; }\n  .childName_900471699 { width:34%; }\n}\n@container (max-width:700px) {\n  .page_900471699 { padding:18px 14px 24px; }\n  .stat_900471699 { padding:12px 12px 11px; }\n  .statValue_900471699 { font-size:20px; }\n  .table_900471699 { font-size:10px; }\n  .table_900471699 th,.table_900471699 td { padding:10px 3px; }\n  .table_900471699 th:first-child,.table_900471699 td:first-child { padding-left:10px; }\n  .table_900471699 th:last-child,.table_900471699 td:last-child { padding-right:10px; }\n  .childName_900471699 { width:25%; }\n  .childRequests_900471699 { width:11%; }\n  .modelName_900471699 { width:25%; }\n  .modelRequests_900471699 { width:11%; }\n  .modelHit_900471699 { width:17%; }\n  .turnHead_900471699 { gap:8px; padding:11px 10px; }\n  .turnSummary_900471699 { grid-column:2; font-size:10px; }\n  .turnRequest_900471699 { grid-template-columns:56px minmax(120px,1fr) auto; gap:8px; padding:10px; }\n  .turnRequestHead_900471699 { gap:6px; }\n  .routeText_900471699 { display:none; }\n}\n@media (prefers-reduced-motion:reduce) {\n  .chevron_900471699 { transition:none; }\n}\n";
+		const css = "/* A light, self-contained Usage surface. Tables fit the available width:\n * no horizontal scroll containers, fixed column contracts, titles for names.\n * Six stat cards sit in one row (≤1050px: 3-up, ≤700px: 2-up) as quiet white\n * surfaces on a pale canvas: no accent edges or watermarks, a flat tone chip\n * leading each label, hierarchy from the type scale and a hairline above the\n * footnote. Request log folds by conversation turn. */\n.scroll_900471699 { height:100%; min-height:0; overflow-y:auto; background:#f6f7f9; color:#252936; color-scheme:light; container-type:inline-size; }\n.page_900471699 { 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; }\n.page_900471699 * { box-sizing:border-box; }\n/* Freshness header: live badge + last-read stamp on the left, manual refresh\n * pinned to the right edge. */\n.head_900471699 { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }\n.headStatus_900471699 { display:flex; align-items:center; gap:7px; min-width:0; font-size:11px; color:#8790a3; }\n.liveDot_900471699 { width:6px; height:6px; border-radius:50%; background:#18a97b; box-shadow:0 0 0 3px #e5f6f0; flex-shrink:0; }\n.asOf_900471699 { color:#9aa3b3; font-variant-numeric:tabular-nums; white-space:nowrap; }\n.refresh_900471699 { 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; }\n.refresh_900471699:hover { color:#279cb6; border-color:#cbd3e0; }\n.refresh_900471699:disabled { opacity:.55; cursor:default; }\n.scope_900471699 { color:#8790a3; font-size:11px; margin:0 0 14px; }\n.stats_900471699 { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:16px; }\n.stat_900471699 { 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; }\n.stat_900471699:hover { border-color:#d9dfe9; box-shadow:0 14px 30px -22px rgba(23,32,54,.32); transform:translateY(-1px); }\n.statHead_900471699 { display:flex; align-items:center; gap:5px; margin-bottom:6px; }\n.statIcon_900471699 { 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; }\n.statLabel_900471699 { font-size:12px; font-weight:500; color:#7b8494; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\n.statValue_900471699 { display:block; font-size:21px; font-weight:650; letter-spacing:-0.4px; color:#1b2130; white-space:nowrap; font-variant-numeric:tabular-nums; }\n.statSub_900471699 { 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; }\n.toneBlue_900471699 { --tone:#4f79f6; --tone-soft:#eaf0fe; }\n.tonePurple_900471699 { --tone:#8b5cf6; --tone-soft:#f1ebfe; }\n.toneGreen_900471699 { --tone:#18a97b; --tone-soft:#e5f6f0; }\n.toneOrange_900471699 { --tone:#e8892c; --tone-soft:#fcf1e4; }\n.toneTeal_900471699 { --tone:#16a4b8; --tone-soft:#e4f5f8; }\n.card_900471699 { min-width:0; background:#fff; border:1px solid #e4e7ee; border-radius:12px; margin-bottom:18px; overflow:hidden; }\n.cardHead_900471699 { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:54px; padding:15px 18px; border-bottom:1px solid #eef0f4; }\n.cardHead_900471699 h2 { font-size:14px; font-weight:600; margin:0; }\n.cardHead_900471699 > span { display:flex; gap:7px; align-items:center; font-size:11px; }\n.count_900471699 { display:inline-flex; align-items:center; justify-content:center; min-width:21px; padding:2px 6px; font-size:10px; color:#8b93a3; background:#f3f5f8; border-radius:5px; margin-left:5px; font-weight:500; }\n.mid_900471699 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:stretch; }\n.mid_900471699 .card_900471699 { height:100%; margin-bottom:0; }\n.mid_900471699 { margin-bottom:18px; }\n.table_900471699 { border-collapse:collapse; width:100%; table-layout:fixed; font-size:11px; }\n.table_900471699 th { color:#929aaa; font-weight:500; padding:12px 5px; text-align:right; vertical-align:middle; line-height:1.3; overflow-wrap:anywhere; }\n.table_900471699 td { padding:13px 5px; text-align:right; border-top:1px solid #eef0f4; color:#626c80; font-variant-numeric:tabular-nums; white-space:nowrap; }\n.table_900471699 th:first-child,.table_900471699 td:first-child { text-align:left; padding-left:16px; }\n.table_900471699 th:last-child,.table_900471699 td:last-child { padding-right:16px; }\n.childName_900471699 { width:28%; }\n.childRequests_900471699 { width:11%; }\n.modelName_900471699 { width:30%; }\n.modelRequests_900471699 { width:11%; }\n.modelHit_900471699 { width:16%; }\n.ellipsis_900471699 { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#394354; }\n/* By-model rows lead with the model's brand logo; the name keeps truncating\n * inside the flexible remainder of the cell. */\n.modelNameCell_900471699 { display:flex; align-items:center; gap:6px; min-width:0; }\n.modelNameCell_900471699 .ellipsis_900471699 { flex:1; min-width:0; }\n/* Gray provider label under a model name shown by several rows (同名模型). */\n.modelProvider_900471699 { display:block; margin-top:2px; font-size:10px; color:#939aaa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }\n.number_900471699 { font-variant-numeric:tabular-nums; }\n.speedCell_900471699 { display:inline-flex; align-items:baseline; gap:3px; white-space:nowrap; }\n.speedCell_900471699 small { font-size:9px; color:#929aaa; }\n.good_900471699 { color:#21a17b; }\n.warn_900471699 { color:#d69a21; }\n.bad_900471699 { color:#e06571; }\n.live_900471699 { color:#169bb3; }\n.muted_900471699 { color:#939aaa; }\n.empty_900471699 { margin:0; padding:28px 18px; color:#9aa2b1; font-size:12px; text-align:center; }\n.action_900471699 { color:#818b9e; background:none; border:0; padding:3px 0; font:inherit; font-size:11px; cursor:pointer; }\n.action_900471699:hover { color:#279cb6; }\n.action_900471699:focus-visible,.turnHead_900471699:focus-visible,.refresh_900471699:focus-visible { outline:2px solid #2ab1c6; outline-offset:-2px; }\n.turnList_900471699 { padding:0 14px 14px; }\n.turn_900471699 { margin-top:10px; border:1px solid #e7eaf0; border-radius:9px; background:#fff; overflow:hidden; }\n.turnHead_900471699 { 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; }\n.chevron_900471699 { color:#99a1af; transition:transform 0.2s; }\n.rotated_900471699 { transform:rotate(90deg); }\n.turnTitle_900471699 { display:flex; align-items:center; gap:6px; min-width:0; font-size:12px; font-weight:600; color:#394354; }\n/* Turn topic is the group title now (the page header owns the session name),\n * so it carries the primary text color and truncates before the metrics. */\n.turnTopic_900471699 { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\n/* A subagent's turns look like this session's turns apart from the agent tag;\n * the tag keeps the full session name in its tooltip. */\n.turnAgent_900471699 { flex:none; padding:1px 6px; border-radius:5px; background:#e9edf4; color:#6f7889; font-size:10px; font-weight:500; }\n.turnSummary_900471699 { display:flex; gap:5px; align-items:center; white-space:nowrap; }\n.turnSummary_900471699 > span:last-child { margin-left:8px; }\n.turnBody_900471699 { border-top:1px solid #eef0f4; }\n.turnBody_900471699[hidden] { display:none; }\n/* A request row is one line: time, what answered, and its metrics pinned to the\n * row end. The metrics never wrap; they truncate with a tooltip before the head\n * gives up its model name. */\n.turnRequest_900471699 { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid #f3f5f9; }\n.turnRequest_900471699:first-child { border-top:0; }\n.turnRequestHead_900471699 { display:flex; align-items:center; gap:8px; font-size:11px; color:#616c7f; min-width:0; }\n.requestTime_900471699 { color:#9aa3b3; font-variant-numeric:tabular-nums; flex-shrink:0; }\n.statusDot_900471699 { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }\n/* Per-model brand logo: colors are baked into each logo's markup, only the\n * layout contract lives here. Unknown models get the neutral gray fallback. */\n.modelLogo_900471699 { flex-shrink:0; }\n.recordModel_900471699 { min-width:0; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#394354; font-weight:500; }\n.routeText_900471699 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#8b93a4; flex-shrink:1; }\n.effort_900471699 { white-space:nowrap; color:#9aa3b3; background:#f1f3f7; border-radius:5px; padding:1px 6px; }\n.recordMeta_900471699 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; font-size:10px; color:#949cab; font-variant-numeric:tabular-nums; }\n.note_900471699 { font-size:10px; line-height:1.7; color:#9aa3b3; margin:0; }\n.error_900471699 { 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; }\n@container (max-width:1050px) {\n  .mid_900471699 { grid-template-columns:minmax(0,1fr); }\n  .stats_900471699 { grid-template-columns:repeat(3,minmax(0,1fr)); }\n  .table_900471699 { font-size:12px; }\n  .childName_900471699 { width:34%; }\n}\n@container (max-width:700px) {\n  .page_900471699 { padding:18px 14px 24px; }\n  .stats_900471699 { grid-template-columns:repeat(2,minmax(0,1fr)); }\n  .stat_900471699 { padding:10px 12px 9px; }\n  .statValue_900471699 { font-size:18px; }\n  .table_900471699 { font-size:10px; }\n  .table_900471699 th,.table_900471699 td { padding:10px 3px; }\n  .table_900471699 th:first-child,.table_900471699 td:first-child { padding-left:10px; }\n  .table_900471699 th:last-child,.table_900471699 td:last-child { padding-right:10px; }\n  .childName_900471699 { width:25%; }\n  .childRequests_900471699 { width:11%; }\n  .modelName_900471699 { width:25%; }\n  .modelRequests_900471699 { width:11%; }\n  .modelHit_900471699 { width:17%; }\n  .turnHead_900471699 { gap:8px; padding:11px 10px; }\n  .turnSummary_900471699 { grid-column:2; font-size:10px; }\n  .turnRequest_900471699 { grid-template-columns:56px minmax(120px,1fr) auto; gap:8px; padding:10px; }\n  .turnRequestHead_900471699 { gap:6px; }\n  .routeText_900471699 { display:none; }\n}\n@media (prefers-reduced-motion:reduce) {\n  .chevron_900471699 { transition:none; }\n  .stat_900471699 { transition:none; }\n  .stat_900471699:hover { transform:none; }\n}\n";
 		const tagId = "dsh-token-total/SessionUsageView.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + tagId + "\"]") === null) {
 			const tag = document.createElement("style");
@@ -32866,13 +32888,16 @@ window.__ModuleLoader__.load({
 		var SessionUsageView_module_default = {
 			"scroll": "scroll_900471699",
 			"page": "page_900471699",
+			"head": "head_900471699",
+			"headStatus": "headStatus_900471699",
+			"liveDot": "liveDot_900471699",
+			"asOf": "asOf_900471699",
+			"refresh": "refresh_900471699",
 			"scope": "scope_900471699",
 			"stats": "stats_900471699",
-			"statRow": "statRow_900471699",
 			"stat": "stat_900471699",
 			"statHead": "statHead_900471699",
 			"statIcon": "statIcon_900471699",
-			"statMark": "statMark_900471699",
 			"statLabel": "statLabel_900471699",
 			"statValue": "statValue_900471699",
 			"statSub": "statSub_900471699",
@@ -32881,7 +32906,6 @@ window.__ModuleLoader__.load({
 			"toneGreen": "toneGreen_900471699",
 			"toneOrange": "toneOrange_900471699",
 			"toneTeal": "toneTeal_900471699",
-			"tonePink": "tonePink_900471699",
 			"card": "card_900471699",
 			"cardHead": "cardHead_900471699",
 			"count": "count_900471699",
@@ -32971,50 +32995,20 @@ window.__ModuleLoader__.load({
 			hit: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z",
 			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"
+			output: "M12 21V9M7 14l5-5 5 5M4 3h16"
 		};
 		function Stat({ tone, name, label, value, sub, title }) {
 			const icon = icons[name];
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
 				className: `${SessionUsageView_module_default.stat} ${tone}`,
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-						className: SessionUsageView_module_default.statMark,
-						viewBox: "0 0 24 24",
-						"aria-hidden": "true",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("linearGradient", {
-							id: `usage-mark-${name}`,
-							x1: "0",
-							y1: "0",
-							x2: "1",
-							y2: "1",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-								offset: "0",
-								stopColor: "currentColor",
-								stopOpacity: "0.3"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("stop", {
-								offset: "1",
-								stopColor: "currentColor",
-								stopOpacity: "0.03"
-							})]
-						}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-							d: icon,
-							fill: `url(#usage-mark-${name})`,
-							stroke: `url(#usage-mark-${name})`,
-							strokeWidth: "1.1",
-							strokeLinecap: "round",
-							strokeLinejoin: "round"
-						})]
-					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: SessionUsageView_module_default.statHead,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: SessionUsageView_module_default.statIcon,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-								width: "18",
-								height: "18",
+								width: "12",
+								height: "12",
 								viewBox: "0 0 24 24",
 								fill: "none",
 								stroke: "currentColor",
@@ -33047,76 +33041,53 @@ window.__ModuleLoader__.load({
 			const failRate = detail.requests > 0 ? (failed / detail.requests * 100).toFixed(1) : "0.0";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: SessionUsageView_module_default.stats,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: SessionUsageView_module_default.statRow,
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
-							tone: SessionUsageView_module_default.toneBlue,
-							name: "requests",
-							label: t("requestsCount"),
-							value: formatTokens(detail.requests),
-							sub: `${t("failed")} ${failed} · ${failRate}%`
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
-							tone: SessionUsageView_module_default.tonePurple,
-							name: "tokens",
-							label: t("tokens"),
-							value: formatCompact(billed),
-							title: formatTokens(billed),
-							sub: `${formatTokens(billed)} tokens`
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
-							tone: SessionUsageView_module_default.toneGreen,
-							name: "hit",
-							label: t("hit"),
-							value: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Hit, { totals: detail.totals }),
-							sub: `${formatCompact(detail.totals.cacheReadTokens)} ${t("cacheHit")}`
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
-							tone: SessionUsageView_module_default.toneOrange,
-							name: "speed",
-							label: t("speed"),
-							value: speed(detail.tokensPerSecond),
-							sub: `${t("first")} ${seconds(detail.averageFirstTokenMs)}`
-						})
-					]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: SessionUsageView_module_default.statRow,
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
-							tone: SessionUsageView_module_default.toneTeal,
-							name: "input",
-							label: t("inputFull"),
-							value: formatCompact(detail.totals.uncachedInputTokens),
-							title: formatTokens(detail.totals.uncachedInputTokens),
-							sub: formatTokens(detail.totals.uncachedInputTokens)
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
-							tone: SessionUsageView_module_default.toneOrange,
-							name: "output",
-							label: t("outputFull"),
-							value: formatCompact(detail.totals.outputTokens),
-							title: formatTokens(detail.totals.outputTokens),
-							sub: formatTokens(detail.totals.outputTokens)
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
-							tone: SessionUsageView_module_default.tonePurple,
-							name: "read",
-							label: t("readFull"),
-							value: formatCompact(detail.totals.cacheReadTokens),
-							title: formatTokens(detail.totals.cacheReadTokens),
-							sub: formatTokens(detail.totals.cacheReadTokens)
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
-							tone: SessionUsageView_module_default.tonePink,
-							name: "write",
-							label: t("writeFull"),
-							value: formatCompact(detail.totals.cacheWriteTokens),
-							title: formatTokens(detail.totals.cacheWriteTokens),
-							sub: formatTokens(detail.totals.cacheWriteTokens)
-						})
-					]
-				})]
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
+						tone: SessionUsageView_module_default.toneBlue,
+						name: "requests",
+						label: t("requestsCount"),
+						value: formatTokens(detail.requests),
+						sub: `${t("failed")} ${failed} · ${failRate}%`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
+						tone: SessionUsageView_module_default.tonePurple,
+						name: "tokens",
+						label: t("tokens"),
+						value: formatCompact(billed),
+						title: formatTokens(billed),
+						sub: `${formatTokens(billed)} tokens`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
+						tone: SessionUsageView_module_default.toneTeal,
+						name: "input",
+						label: t("inputFull"),
+						value: formatCompact(detail.totals.uncachedInputTokens),
+						title: formatTokens(detail.totals.uncachedInputTokens),
+						sub: formatTokens(detail.totals.uncachedInputTokens)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
+						tone: SessionUsageView_module_default.toneOrange,
+						name: "output",
+						label: t("outputFull"),
+						value: formatCompact(detail.totals.outputTokens),
+						title: formatTokens(detail.totals.outputTokens),
+						sub: formatTokens(detail.totals.outputTokens)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
+						tone: SessionUsageView_module_default.toneGreen,
+						name: "hit",
+						label: t("hit"),
+						value: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Hit, { totals: detail.totals }),
+						sub: `${formatCompact(detail.totals.cacheReadTokens)} ${t("cacheHit")}`
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Stat, {
+						tone: SessionUsageView_module_default.toneOrange,
+						name: "speed",
+						label: t("speed"),
+						value: speed(detail.tokensPerSecond),
+						sub: `${t("first")} ${seconds(detail.averageFirstTokenMs)}`
+					})
+				]
 			});
 		}
 		function Tables({ detail, t }) {
@@ -33290,6 +33261,8 @@ window.__ModuleLoader__.load({
 				}
 				group.rows.push(record);
 			}
+			const latest = (group) => group.rows.reduce((max, row) => Math.max(max, row.startedAt), 0);
+			groups.sort((a, b) => latest(b) - latest(a));
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: SessionUsageView_module_default.card,
 				children: [
@@ -33316,8 +33289,8 @@ window.__ModuleLoader__.load({
 							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 !== null);
-							const avgRate = rates.length ? Math.round(rates.reduce((a, b) => a + b, 0) / rates.length) : null;
+							const rate = decodeRateOf(group.rows);
+							const avgRate = rate === null ? null : Math.round(rate);
 							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("article", {
 								className: SessionUsageView_module_default.turn,
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -33388,7 +33361,7 @@ window.__ModuleLoader__.load({
 									id: `usage-turn-${encodeURIComponent(group.key)}`,
 									className: SessionUsageView_module_default.turnBody,
 									hidden: !open,
-									children: group.rows.map((record) => {
+									children: 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);
@@ -33431,14 +33404,14 @@ window.__ModuleLoader__.load({
 																modelShort(record.model) || "—"
 															]
 														}),
-														statusText !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-															className: record.status === "running" ? SessionUsageView_module_default.live : record.status === "failed" ? SessionUsageView_module_default.bad : SessionUsageView_module_default.muted,
-															children: statusText
-														}),
 														record.effort ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 															className: SessionUsageView_module_default.effort,
 															children: ["· ", record.effort]
-														}) : null
+														}) : null,
+														statusText !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															className: record.status === "running" ? SessionUsageView_module_default.live : record.status === "failed" ? SessionUsageView_module_default.bad : SessionUsageView_module_default.muted,
+															children: statusText
+														})
 													]
 												}),
 												record.finishedAt !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -33488,13 +33461,51 @@ window.__ModuleLoader__.load({
 			] });
 		}
 		function SessionUsageView({ sessionId, t }) {
-			const { detail, loading, error, retry } = useSessionDetail(sessionId);
+			const { detail, loading, error, refresh, updatedAt } = useSessionDetail(sessionId);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: SessionUsageView_module_default.scroll,
 				"data-dsh-session-usage": true,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: SessionUsageView_module_default.page,
 					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+							className: SessionUsageView_module_default.head,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: SessionUsageView_module_default.headStatus,
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: SessionUsageView_module_default.liveDot,
+										"aria-hidden": "true"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("live") }),
+									updatedAt !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: SessionUsageView_module_default.asOf,
+										children: [
+											t("asOf"),
+											" ",
+											clock(updatedAt)
+										]
+									})
+								]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+								type: "button",
+								className: SessionUsageView_module_default.refresh,
+								onClick: refresh,
+								disabled: loading,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+									width: "12",
+									height: "12",
+									viewBox: "0 0 24 24",
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									strokeLinecap: "round",
+									strokeLinejoin: "round",
+									"aria-hidden": "true",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M21 3v5h-5" })]
+								}), t("refresh")]
+							})]
+						}),
 						loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 							className: SessionUsageView_module_default.empty,
 							role: "status",
@@ -33506,7 +33517,7 @@ window.__ModuleLoader__.load({
 							children: [t("failedLoad"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								className: SessionUsageView_module_default.action,
-								onClick: retry,
+								onClick: refresh,
 								children: t("retry")
 							})]
 						}),
@@ -33577,7 +33588,10 @@ window.__ModuleLoader__.load({
 			cacheShort: "缓存",
 			avgCache: "平均缓存",
 			avgRate: "平均速率",
-			inProgress: "个进行中"
+			inProgress: "个进行中",
+			live: "实时更新",
+			asOf: "统计截至",
+			refresh: "刷新"
 		};
 		const usageEn = {
 			tab: "Usage",
@@ -33634,7 +33648,10 @@ window.__ModuleLoader__.load({
 			cacheShort: "cache",
 			avgCache: "avg cache",
 			avgRate: "avg rate",
-			inProgress: "in progress"
+			inProgress: "in progress",
+			live: "Live",
+			asOf: "as of",
+			refresh: "Refresh"
 		};
 		const usageZhTW = {
 			...usageZh,
@@ -33691,7 +33708,10 @@ window.__ModuleLoader__.load({
 			cacheShort: "快取",
 			avgCache: "平均快取",
 			avgRate: "平均速率",
-			inProgress: "個進行中"
+			inProgress: "個進行中",
+			live: "即時更新",
+			asOf: "統計截至",
+			refresh: "重新整理"
 		};
 		//#endregion
 		//#region src/client/index.tsx