dsh-token-total 1.1.0 → 1.1.3

package/lib/client.js

@@ -31281,16 +31281,25 @@ window.__ModuleLoader__.load({
 		const CJK_TOKENS_PER_CHAR = .6;
 		const ASCII_TOKENS_PER_CHAR = .3;
 		/**
-		* Shortest observable decode window before a live rate is published, in ms
-		* (the same floor MiMo-Code's sidebar tps uses). Below it the first chunk's
-		* burst would read as hundreds of tok/s; the sampler also publishes its FIRST
-		* reading at exactly this mark rather than at the next steady cadence.
+		* Shortest observable decode window before a live rate is published, in ms.
+		* Below it the first chunk's burst would read as hundreds of tok/s; the
+		* sampler also publishes its FIRST reading at exactly this mark rather than at
+		* the next steady cadence.
+		*
+		* The floor is deliberately short — 200 ms, down from the 500 ms MiMo-Code's
+		* sidebar tps holds — because every step opens a window of its own, and at
+		* 500 ms a step that finishes inside the floor never published at all: a run
+		* of short steps (one burst of tool-call arguments, then settle) kept showing
+		* a figure measured somewhere else while the screen was full of live output.
+		* At this length the opening burst is judged by the plausibility check below
+		* rather than by waiting it out, and the smoothing constant still carries the
+		* first reading only part of the way into an established figure.
 		*
 		* The floor is a publishing gate, NOT a rejection gate: it is applied after the
 		* plausibility check below, so a backlog frame can never dodge that check by
 		* arriving early (see {@link StreamingRateSampler.observe}).
 		*/
-		const MIN_STREAM_WINDOW_MS = 500;
+		const MIN_STREAM_WINDOW_MS = 200;
 		/**
 		* Longest window a live rate may span, in ms. This is the bound the previous
 		* cumulative quotient lacked: any artifact inside the window — a frame the UI
@@ -31652,9 +31661,14 @@ window.__ModuleLoader__.load({
 		* cannot see.
 		*
 		* Streaming throughput replaces the gauge pill's speed
-		* figure with a live estimate while a step is still streaming and drops back to
-		* the official session figure the moment it settles. That subscription lives in
-		* its own child component so stream deltas never re-render the pills. The live
+		* figure with a live estimate of what is happening now, and hands the slot back
+		* to the session's decode average when nothing is streaming. While a step
+		* streams the live rate is the only reading that can match the pace of the
+		* answer on screen; once the step settles it becomes a figure from a window
+		* nobody is watching any more, so the pill returns to the same quotient the
+		* usage view quotes (ΣoutputTokens / ΣdecodeMs) instead of freezing on the last
+		* measurement. That subscription lives in its own child component, so stream
+		* deltas never re-render the pills. The live
 		* figure itself is measured by a bounded sliding window over observed token
 		* growth (stats-line-core's StreamingRateSampler): the earlier cumulative
 		* quotient charged a whole step's text to a window that had just opened, so a
@@ -31740,23 +31754,35 @@ window.__ModuleLoader__.load({
 		* The gauge pill's always-on streaming speed slot.
 		*
 		* It subscribes to `legacy.partial` itself so per-frame deltas re-render only
-		* this child, not the surrounding pills. Until the streaming step has a
-		* measurable window the official session
-		* figure stays on screen, so the slot is never empty and the handover at
-		* settle is a plain value change.
+		* this child, not the surrounding pills. Two figures share the slot, chosen by
+		* whether a step is streaming right now:
+		*
+		* - while one is (`partial != null`), the measured rate of THAT stream — a
+		*   bounded sliding window over observed token growth (stats-line-core's
+		*   StreamingRateSampler), the only reading that can track the pace of the
+		*   answer currently on screen;
+		* - otherwise the session's own decode average, ΣoutputTokens / ΣdecodeMs —
+		*   the same quotient `decodeRateOf` quotes in the usage view. An idle composer
+		*   must not freeze on whatever the last window happened to measure: a settled
+		*   thirty-step turn kept showing its final second-long reading (57 tok/s)
+		*   beside the usage view's 156 tok/s for the same work, and the two read as a
+		*   contradiction rather than as two scopes of one number.
+		*
+		* The measured reading carries the step it was taken in, so a new step cannot
+		* inherit the previous one's figure before its own window publishes; nothing is
+		* held across the gap — the gap is exactly when the average applies.
 		*
 		* One window covers a whole step, across every output kind the accumulator
 		* carries — reasoning, answer text, and Tool-call arguments — because the
 		* provider bills all three as completion tokens and a step emits them in
-		* sequence. Between steps the partial is gone (the step's assistant/message
-		* settles it and the next step has not begun), so Tool execution shows the
-		* official figure until the next step opens its own window.
+		* sequence.
 		*
 		* Sampling happens in a layout effect and the figure it yields is published as
 		* state, so no render reads a clock or mutates the window: a render React starts
 		* and then discards must not decide what the next committed one displays. The
 		* rate itself comes from stats-line-core's StreamingRateSampler — a bounded
-		* window over observed token growth, smoothed, and held while nothing arrives.
+		* window over observed token growth, smoothed, and held while nothing arrives
+		* inside the step it belongs to.
 		*/
 		function LiveSpeed({ useChat, scale, fallback, t }) {
 			const partial = useChat((s) => s.legacy.partial);
@@ -31768,22 +31794,20 @@ window.__ModuleLoader__.load({
 				rate: new StreamingRateSampler()
 			};
 			const rate = sampler.current.rate;
-			const [published, setPublished] = (0, react.useState)({
-				key: null,
-				rate: null
-			});
+			const [reading, setReading] = (0, react.useState)(null);
 			const scaleRef = (0, react.useRef)(scale);
 			const [beat, setBeat] = (0, react.useState)(0);
 			(0, react.useLayoutEffect)(() => {
+				if (key === null) return;
 				if (scaleRef.current !== scale) {
 					scaleRef.current = scale;
 					rate.reset();
 				}
 				rate.observe(tokens, Date.now());
 				const next = rate.ratePerSecond();
-				setPublished((previous) => previous.key === key && previous.rate === next ? previous : {
+				if (next !== null) setReading((previous) => previous !== null && previous.key === key && previous.value === next ? previous : {
 					key,
-					rate: next
+					value: next
 				});
 			}, [
 				tokens,
@@ -31802,8 +31826,8 @@ window.__ModuleLoader__.load({
 					clearInterval(handle);
 				};
 			}, [streaming]);
-			const reading = published.key === key ? published.rate : null;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpeedFigure, { text: reading === null ? fallback : t("stats.tokensPerSecond", { throughput: formatTokensPerSecond(reading) }) });
+			const measured = reading !== null && reading.key === key ? reading.value : null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SpeedFigure, { text: measured === null ? fallback : t("stats.tokensPerSecond", { throughput: formatTokensPerSecond(measured) }) });
 		}
 		function TimePill({ stats, t, dialog, useChat, scale, dock }) {
 			const { open, setOpen, rootRef, panelRef, pos } = useStatDialog(dialog);
@@ -32707,24 +32731,55 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
-		//#region src/client/context-window-core.ts
-		/** Legend order, also the color assignment order (see the CSS module). */
-		const CONTEXT_CATEGORY_ORDER = [
-			"system",
-			"tools",
-			"memory",
-			"files",
-			"results",
-			"conversation"
+		//#region src/usage-buckets.ts
+		const USAGE_BUCKET_ORDER = [
+			"systemPrompt",
+			"user",
+			"skill",
+			"toolResult",
+			"toolDef",
+			"injected",
+			"assistant",
+			"output"
 		];
-		/** Per-category token totals in legend order, empty categories dropped. */
-		function contextCategoryTotals(items) {
+		/** The buckets that describe the live window (output never occupies it). */
+		const CONTEXT_BUCKET_ORDER = USAGE_BUCKET_ORDER.filter((key) => key !== "output");
+		//#endregion
+		//#region src/client/context-window-core.ts
+		/** Which legend bucket one window row belongs to.
+		*
+		*  The row categories are the treemap's (they group files separately); the
+		*  cards speak the eight-bucket legend instead. A folded `rest` row lost its
+		*  kind, so a conversation tail lands with the assistant — the larger half of
+		*  what a turn replays.
+		*/
+		function contextBucketOf(item) {
+			switch (item.category) {
+				case "system": return "systemPrompt";
+				case "tools": return "toolDef";
+				case "memory": return item.kind === "skill-catalog" ? "skill" : "injected";
+				case "files":
+				case "results": return "toolResult";
+				case "conversation": return item.kind === "user" ? "user" : "assistant";
+				default: return "injected";
+			}
+		}
+		/** The live window folded into the same legend the spend card prints, in
+		*  legend order and keeping zero buckets so both cards stay aligned. */
+		function contextBucketTotals(items) {
 			const totals = /* @__PURE__ */ new Map();
-			for (const item of items) totals.set(item.category, (totals.get(item.category) ?? 0) + item.tokens);
-			return CONTEXT_CATEGORY_ORDER.map((key) => ({
+			for (const item of items) {
+				const key = contextBucketOf(item);
+				totals.set(key, (totals.get(key) ?? 0) + item.tokens);
+			}
+			return CONTEXT_BUCKET_ORDER.map((key) => ({
 				key,
 				tokens: totals.get(key) ?? 0
-			})).filter((row) => row.tokens > 0);
+			}));
+		}
+		/** What a share of the whole is, for the legend column. */
+		function bucketPercent(tokens, total) {
+			return total > 0 ? tokens / total * 100 : 0;
 		}
 		/** Window occupancy in whole percent, or null when the host never reported the
 		*  model's window (the panel then says "unknown" instead of guessing one). */
@@ -32743,98 +32798,10 @@ window.__ModuleLoader__.load({
 				estimateDiffers: context.promptTokens !== null && gap > .15
 			};
 		}
-		/** Aspect ratio of the worst tile in a row of `sum` area, given the strip's
-		*  short side — the squarified-treemap cost function. */
-		function worstRatio(sum, max, min, side) {
-			const squared = sum * sum;
-			const sideSquared = side * side;
-			return Math.max(sideSquared * max / squared, squared / (sideSquared * min));
-		}
-		const round = (value) => Math.round(value * 100) / 100;
-		/**
-		* Squarified treemap (Bruls, Huizing & van Wijk): tile `width`×`height` with
-		* one block per positive weight, proportional to its tokens and as close to
-		* square as the greedy row packing allows. Blocks come back in the input's
-		* descending-weight order, covering the whole area.
-		*/
-		function treemapLayout(rows, width, height) {
-			const ordered = rows.filter((row) => row.tokens > 0 && Number.isFinite(row.tokens)).sort((a, b) => b.tokens - a.tokens);
-			if (ordered.length === 0 || !(width > 0) || !(height > 0)) return [];
-			const total = ordered.reduce((sum, row) => sum + row.tokens, 0);
-			const scale = width * height / total;
-			const areas = ordered.map((row) => ({
-				key: row.key,
-				area: row.tokens * scale
-			}));
-			const boxes = [];
-			let x = 0;
-			let y = 0;
-			let w = width;
-			let h = height;
-			let index = 0;
-			while (index < areas.length) {
-				const side = Math.min(w, h);
-				if (!(side > 0)) break;
-				let end = index + 1;
-				let sum = areas[index].area;
-				let max = sum;
-				let min = sum;
-				let worst = worstRatio(sum, max, min, side);
-				while (end < areas.length) {
-					const area = areas[end].area;
-					const nextSum = sum + area;
-					const nextMax = Math.max(max, area);
-					const nextMin = Math.min(min, area);
-					const nextWorst = worstRatio(nextSum, nextMax, nextMin, side);
-					if (nextWorst > worst) break;
-					sum = nextSum;
-					max = nextMax;
-					min = nextMin;
-					worst = nextWorst;
-					end++;
-				}
-				const thickness = sum / side;
-				if (!(thickness > 0)) break;
-				let offset = 0;
-				for (let k = index; k < end; k++) {
-					const length = areas[k].area / thickness;
-					const box = w >= h ? {
-						key: areas[k].key,
-						x,
-						y: y + offset,
-						width: thickness,
-						height: length
-					} : {
-						key: areas[k].key,
-						x: x + offset,
-						y,
-						width: length,
-						height: thickness
-					};
-					boxes.push({
-						key: box.key,
-						x: round(box.x),
-						y: round(box.y),
-						width: round(box.width),
-						height: round(box.height)
-					});
-					offset += length;
-				}
-				if (w >= h) {
-					x += thickness;
-					w -= thickness;
-				} else {
-					y += thickness;
-					h -= thickness;
-				}
-				index = end;
-			}
-			return boxes;
-		}
 		//#endregion
-		//#region \0token-total-css:/home/runner/work/dsh-token-total/dsh-token-total/src/client/ContextWindowPanel.module.css?inline
-		const css$1 = "/* The context-window panel: magpie's shape on this page's surfaces — a header\n * with the model and a live pill, the used total beside the newest answer's\n * prompt-cache split, a treemap of what occupies the window, and one legend row\n * naming the six buckets. Category colors live as custom properties on the tone\n * classes so the tile and the legend dot share one palette. */\n.panel_1441117854 { background:#fff; border:1px solid #e4e7ee; border-radius:12px; margin:0 0 16px; overflow:hidden; container-type:inline-size; }\n.head_1441117854 { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px 0; }\n.headCollapsed_1441117854 { padding-bottom:12px; }\n.toggle_1441117854 { display:flex; align-items:center; gap:6px; min-width:0; flex:none; background:none; border:0; padding:0; font:inherit; color:#394354; cursor:pointer; }\n.toggle_1441117854 h2 { font-size:13px; font-weight:600; margin:0; white-space:nowrap; }\n.chevron_1441117854 { flex:none; color:#99a1af; transition:transform .2s; }\n.chevronOpen_1441117854 { transform:rotate(90deg); }\n.headLead_1441117854 { display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; }\n/* Folded digest: the used/window figures plus a strip whose whole length is the\n * model's window — the tinted head is what the six buckets occupy, and the grey\n * track behind it is the room still free. A collapsed panel answers \"how full,\n * with what, and how much is left\" while it refreshes. */\n.digest_1441117854 { display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; }\n/* The figures never shrink — a truncated count is worse than no strip — so the\n * strip absorbs the shortfall and steps aside once it can no longer be read. */\n.digestTotal_1441117854 { flex:none; white-space:nowrap; font-size:11px; color:#6f7889; font-variant-numeric:tabular-nums; }\n/* The track is the free room: `#eef0f4` shows through after the used share. */\n.digestBar_1441117854 { display:flex; flex:1 1 auto; min-width:0; max-width:320px; height:8px; border-radius:999px; overflow:hidden; background:#e8ebf1; }\n.digestSeg_1441117854 { height:100%; flex:none; background:var(--ctx); transition:width .35s; }\n.headRight_1441117854 { display:flex; align-items:center; gap:8px; min-width:0; flex:none; }\n.model_1441117854 { min-width:0; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:#8b93a4; }\n.livePill_1441117854 { display:inline-flex; align-items:center; gap:4px; flex:none; padding:1px 8px 1px 6px; border-radius:999px; background:#e9f8f1; color:#128a63; font-size:10px; font-weight:500; }\n.liveDot_1441117854 { width:5px; height:5px; border-radius:50%; background:#18a97b; box-shadow:0 0 0 2px #d6f2e5; }\n.liveTime_1441117854 { font-variant-numeric:tabular-nums; opacity:.85; }\n.toggle_1441117854:focus-visible { outline:2px solid #2ab1c6; outline-offset:2px; }\n.body_1441117854 { padding:10px 16px 14px; }\n.body_1441117854[hidden] { display:none; }\n.summary_1441117854 { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,260px); align-items:end; gap:18px; padding-bottom:12px; }\n.used_1441117854 { display:flex; flex-direction:column; gap:1px; min-width:0; }\n.label_1441117854 { font-size:11px; color:#8790a3; }\n.total_1441117854 { font-size:28px; font-weight:650; line-height:1.15; letter-spacing:-.6px; color:#1b2130; font-variant-numeric:tabular-nums; white-space:nowrap; }\n.total_1441117854 small { margin-left:4px; font-size:11px; font-weight:500; letter-spacing:0; color:#98a0ae; }\n.window_1441117854 { font-size:11px; color:#939aab; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }\n.cache_1441117854 { display:flex; flex-direction:column; gap:6px; min-width:0; }\n.cacheBar_1441117854 { display:flex; width:100%; height:5px; border-radius:999px; overflow:hidden; background:#eef0f4; }\n.cacheHit_1441117854 { height:100%; background:#2ec4a0; }\n.cacheMiss_1441117854 { height:100%; background:#dfe3ea; }\n.cacheEmpty_1441117854 { display:block; width:100%; height:100%; background:repeating-linear-gradient(90deg,#e6e9ef 0 3px,transparent 3px 7px); }\n.cacheLegend_1441117854 { display:flex; flex-wrap:wrap; gap:2px 10px; font-size:10px; color:#8b93a4; font-variant-numeric:tabular-nums; }\n.cacheLegend_1441117854 i { display:inline-block; width:6px; height:6px; margin-right:4px; border-radius:50%; }\n.cacheHitDot_1441117854 { background:#2ec4a0; }\n.cacheMissDot_1441117854 { background:#dfe3ea; }\n.cachePending_1441117854 { color:#9aa3b3; }\n.note_1441117854 { margin:0 0 10px; padding:5px 8px; border:1px solid #f2e4c6; border-radius:6px; background:#fdf7ea; font-size:10.5px; line-height:1.5; color:#8a6a2a; font-variant-numeric:tabular-nums; }\n.map_1441117854 { position:relative; height:268px; border-radius:9px; overflow:hidden; }\n/* Slots glide into their new geometry when a refresh re-writes the estimate,\n * so a change in the data reads as motion instead of a silent repaint. */\n.slot_1441117854 { position:absolute; box-sizing:border-box; padding:1.5px; transition:left .35s, top .35s, width .35s, height .35s; }\n.tile_1441117854 { display:flex; flex-direction:column; gap:1px; box-sizing:border-box; width:100%; height:100%; padding:5px 6px; border:1px solid var(--ctx-line); border-radius:7px; background:var(--ctx-soft); color:var(--ctx-ink); overflow:hidden; }\n.tileLabel_1441117854 { font-size:11px; font-weight:600; line-height:1.25; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }\n.tileSize_1441117854 { font-size:10px; opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }\n/* The hover card: exact figures a tile has no room to print. */\n.tip_1441117854 { position:absolute; z-index:2; box-sizing:border-box; width:220px; padding:8px 10px; border:1px solid #e0e4ec; border-radius:8px; background:#fff; box-shadow:0 8px 20px rgba(23,32,54,.12); font-size:11px; line-height:1.55; pointer-events:none; }\n.tipName_1441117854 { font-weight:600; color:#1b2130; overflow-wrap:anywhere; }\n.tipMeta_1441117854 { color:#6f7889; font-variant-numeric:tabular-nums; }\n.tipShare_1441117854 { color:#4a5567; font-variant-numeric:tabular-nums; }\n.legend_1441117854 { display:flex; flex-wrap:wrap; gap:5px 14px; list-style:none; margin:0; padding:10px 0 0; border-top:1px solid #f2f4f8; margin-top:10px; font-size:11px; color:#6f7889; }\n.legend_1441117854 li { display:flex; align-items:center; gap:5px; }\n.legendName_1441117854 { white-space:nowrap; }\n.legendValue_1441117854 { color:#98a0ae; font-variant-numeric:tabular-nums; }\n.swatch_1441117854 { display:inline-block; flex:none; box-sizing:border-box; width:9px; height:9px; border-radius:3px; background:var(--ctx-soft); background:color-mix(in srgb, var(--ctx) 50%, var(--ctx-soft)); border:1px solid var(--ctx-line); }\n.empty_1441117854 { margin:0; padding:24px 0; text-align:center; font-size:12px; color:#9aa2b1; }\n/* Category palette: `--ctx` is the accent tint, `--ctx-soft` the tile fill (and\n * the legend swatch, so the dots match the tiles exactly), `--ctx-ink` the tile\n * text, `--ctx-line` its hairline border. */\n.toneSystem_1441117854 { --ctx:#a346e6; --ctx-soft:#f6ecfd; --ctx-ink:#6c2e9e; --ctx-line:#ecdafa; }\n.toneTools_1441117854 { --ctx:#4f79f6; --ctx-soft:#eaf0fe; --ctx-ink:#3a5aa8; --ctx-line:#d9e3fb; }\n.toneMemory_1441117854 { --ctx:#8fb21e; --ctx-soft:#f1f5d8; --ctx-ink:#5a7012; --ctx-line:#dfe8bd; }\n.toneFiles_1441117854 { --ctx:#18a97b; --ctx-soft:#e6f6ee; --ctx-ink:#1c7a56; --ctx-line:#d2ecdf; }\n.toneResults_1441117854 { --ctx:#e8853f; --ctx-soft:#fdeee3; --ctx-ink:#a35d24; --ctx-line:#f7ddc8; }\n.toneConversation_1441117854 { --ctx:#c2327f; --ctx-soft:#fbe9f3; --ctx-ink:#8c2259; --ctx-line:#f2d3e4; }\n@media (max-width:700px) {\n  .head_1441117854 { padding:11px 12px 0; }\n  .headCollapsed_1441117854 { padding-bottom:11px; }\n  .body_1441117854 { padding:9px 12px 12px; }\n  .summary_1441117854 { grid-template-columns:minmax(0,1fr); gap:10px; }\n  .total_1441117854 { font-size:24px; }\n  .map_1441117854 { height:220px; }\n  .model_1441117854 { display:none; }\n}\n/* Container queries measure this card, not the page — the panel sits in a\n * column, so below ~620px the strip is no longer readable and steps aside; the\n * figures keep every number, and the tooltip still holds the split. */\n@container (max-width:620px) {\n  .digestBar_1441117854 { display:none; }\n  .model_1441117854 { display:none; }\n}\n@media (prefers-reduced-motion:reduce) {\n  .chevron_1441117854 { transition:none; }\n  .slot_1441117854 { transition:none; }\n  .digestSeg_1441117854 { transition:none; }\n}\n";
-		const tagId$1 = "dsh-token-total/ContextWindowPanel.module.css";
+		//#region \0token-total-css:/home/runner/work/dsh-token-total/dsh-token-total/src/client/UsageCards.module.css?inline
+		const css$1 = "/* The two live cards that replaced the context-window panel: the window's\n * current composition on the left, the session's spend composition on the\n * right. Surfaces ride the host semantic tokens (`--dsw-alias-*`) like every\n * other card on this page, so light/dark flip for free; only the eight bucket\n * hues are this plugin's own (they match the reference design and the\n * dashboard's chart accents). Each bucket sets `--bucket`, and the swatch, ring\n * segment, bar segment and value text all read that one variable. */\n.grid_673061119 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin:0 0 18px; align-items:stretch; }\n.card_673061119 { min-width:0; display:flex; flex-direction:column; background:var(--dsw-alias-bg-layer-1); border:1px solid var(--dsw-alias-border-l2); border-radius:12px; overflow:hidden; }\n.head_673061119 { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; padding:12px 16px 0; }\n.title_673061119 { margin:0; font-size:13px; font-weight:600; color:var(--dsw-alias-label-primary); white-space:nowrap; }\n.model_673061119 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--dsw-alias-label-tertiary); }\n.cacheBadge_673061119 { flex:none; font-size:11px; color:var(--dsw-alias-label-tertiary); white-space:nowrap; }\n.cacheBadge_673061119 b { margin-left:2px; font-weight:600; color:var(--dsw-alias-state-success-primary); font-variant-numeric:tabular-nums; }\n.body_673061119 { flex:1 1 auto; padding:12px 16px 16px; }\n/* ── Left card: the live window ─────────────────────────────────────────── */\n.totalRow_673061119 { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }\n.total_673061119 { font-size:20px; font-weight:650; letter-spacing:-.3px; color:var(--dsw-alias-label-primary); font-variant-numeric:tabular-nums; white-space:nowrap; }\n.totalShare_673061119 { flex:none; font-size:11px; color:var(--dsw-alias-label-tertiary); white-space:nowrap; }\n.totalShare_673061119 b { color:var(--dsw-alias-label-primary-dimmed); font-weight:600; font-variant-numeric:tabular-nums; }\n/* A stacked share bar over the drawn content; the empty state is the same\n * diagonal hatch the old panel used for \"no data yet\". */\n.bar_673061119 { display:flex; width:100%; height:10px; margin:12px 0 14px; border-radius:999px; overflow:hidden; background:var(--dsw-alias-border-l1); }\n.barSeg_673061119 { height:100%; flex:none; background:var(--bucket); transition:width .35s ease; }\n.barEmpty_673061119 { display:block; width:100%; height:100%; background:repeating-linear-gradient(90deg,var(--dsw-alias-border-l2) 0 4px,transparent 4px 8px); }\n/* ── Right card: the spend composition ──────────────────────────────────── */\n.statsMain_673061119 { display:flex; align-items:center; gap:16px; }\n.ringWrap_673061119 { position:relative; flex:none; width:116px; height:116px; }\n.ring_673061119 { display:block; }\n.ringTrack_673061119 { stroke:var(--dsw-alias-border-l1); }\n.ringCenter_673061119 { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; text-align:center; pointer-events:none; }\n.ringTotal_673061119 { font-size:17px; font-weight:650; letter-spacing:-.3px; color:var(--dsw-alias-label-primary); font-variant-numeric:tabular-nums; }\n.ringCaption_673061119 { font-size:10px; color:var(--dsw-alias-label-tertiary); }\n/* Legend: two columns, column-major (left column is the first four buckets,\n * the right column the rest), so the reading order matches the ring. */\n.legend_673061119 { flex:1 1 auto; min-width:0; display:grid; grid-template-rows:repeat(4,auto); grid-auto-flow:column; gap:7px 16px; margin:0; padding:0; list-style:none; }\n.legendRow_673061119 { display:grid; grid-template-columns:7px minmax(0,1fr) auto auto; align-items:center; gap:6px; min-width:0; font-size:11px; }\n.swatch_673061119 { width:7px; height:7px; border-radius:50%; background:var(--bucket); }\n.legendName_673061119 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dsw-alias-label-secondary); }\n.legendPercent_673061119 { color:var(--dsw-alias-label-tertiary); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }\n.legendValue_673061119 { color:var(--bucket); font-variant-numeric:tabular-nums; font-weight:500; text-align:right; white-space:nowrap; }\n.legendSuffix_673061119 { color:var(--dsw-alias-label-tertiary); font-weight:400; }\n.empty_673061119 { margin:16px 0 18px; text-align:center; font-size:12px; color:var(--dsw-alias-label-tertiary); }\n/* ── Bucket palette ─────────────────────────────────────────────────────── */\n.toneSystemPrompt_673061119 { --bucket:#6f6bf5; }\n.toneUser_673061119 { --bucket:#2bb673; }\n.toneSkill_673061119 { --bucket:#16b8a6; }\n.toneToolResult_673061119 { --bucket:#4d6bfe; }\n.toneToolDef_673061119 { --bucket:#f0a53a; }\n.toneInjected_673061119 { --bucket:#a75ff0; }\n.toneAssistant_673061119 { --bucket:#7c8cff; }\n.toneOutput_673061119 { --bucket:#ef5da8; }\n/* Narrow surfaces: one card per row, and the legends go back to wrapping rows\n * (a two-column legend cannot keep 11 px labels readable under ~340 px). */\n@container (max-width:880px) {\n  .grid_673061119 { grid-template-columns:minmax(0,1fr); }\n}\n@container (max-width:520px) {\n  .statsMain_673061119 { flex-wrap:wrap; justify-content:center; }\n  .legend_673061119 { grid-template-rows:none; grid-auto-flow:row; grid-template-columns:minmax(0,1fr); width:100%; }\n}\n@media (prefers-reduced-motion:reduce) {\n  .barSeg_673061119 { transition:none; }\n}\n/* Dark theme: the host re-resolves its aliases; only the bucket hues need a\n * brighter variant so chips and ring segments hold their weight. */\nbody[data-ds-dark-theme] .toneSystemPrompt_673061119 { --bucket:#9b96ff; }\nbody[data-ds-dark-theme] .toneUser_673061119 { --bucket:#3ed08a; }\nbody[data-ds-dark-theme] .toneSkill_673061119 { --bucket:#2fd6c2; }\nbody[data-ds-dark-theme] .toneToolResult_673061119 { --bucket:#7d95ff; }\nbody[data-ds-dark-theme] .toneToolDef_673061119 { --bucket:#f5b861; }\nbody[data-ds-dark-theme] .toneInjected_673061119 { --bucket:#c184ff; }\nbody[data-ds-dark-theme] .toneAssistant_673061119 { --bucket:#9aabff; }\nbody[data-ds-dark-theme] .toneOutput_673061119 { --bucket:#ff85c0; }\n";
+		const tagId$1 = "dsh-token-total/UsageCards.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + tagId$1 + "\"]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "dsh-token-total";
@@ -32842,423 +32809,305 @@ window.__ModuleLoader__.load({
 			tag.textContent = css$1;
 			document.head.appendChild(tag);
 		}
-		var ContextWindowPanel_module_default = {
-			"panel": "panel_1441117854",
-			"head": "head_1441117854",
-			"headCollapsed": "headCollapsed_1441117854",
-			"toggle": "toggle_1441117854",
-			"chevron": "chevron_1441117854",
-			"chevronOpen": "chevronOpen_1441117854",
-			"headLead": "headLead_1441117854",
-			"digest": "digest_1441117854",
-			"digestTotal": "digestTotal_1441117854",
-			"digestBar": "digestBar_1441117854",
-			"digestSeg": "digestSeg_1441117854",
-			"headRight": "headRight_1441117854",
-			"model": "model_1441117854",
-			"livePill": "livePill_1441117854",
-			"liveDot": "liveDot_1441117854",
-			"liveTime": "liveTime_1441117854",
-			"body": "body_1441117854",
-			"summary": "summary_1441117854",
-			"used": "used_1441117854",
-			"label": "label_1441117854",
-			"total": "total_1441117854",
-			"window": "window_1441117854",
-			"cache": "cache_1441117854",
-			"cacheBar": "cacheBar_1441117854",
-			"cacheHit": "cacheHit_1441117854",
-			"cacheMiss": "cacheMiss_1441117854",
-			"cacheEmpty": "cacheEmpty_1441117854",
-			"cacheLegend": "cacheLegend_1441117854",
-			"cacheHitDot": "cacheHitDot_1441117854",
-			"cacheMissDot": "cacheMissDot_1441117854",
-			"cachePending": "cachePending_1441117854",
-			"note": "note_1441117854",
-			"map": "map_1441117854",
-			"slot": "slot_1441117854",
-			"tile": "tile_1441117854",
-			"tileLabel": "tileLabel_1441117854",
-			"tileSize": "tileSize_1441117854",
-			"tip": "tip_1441117854",
-			"tipName": "tipName_1441117854",
-			"tipMeta": "tipMeta_1441117854",
-			"tipShare": "tipShare_1441117854",
-			"legend": "legend_1441117854",
-			"legendName": "legendName_1441117854",
-			"legendValue": "legendValue_1441117854",
-			"swatch": "swatch_1441117854",
-			"empty": "empty_1441117854",
-			"toneSystem": "toneSystem_1441117854",
-			"toneTools": "toneTools_1441117854",
-			"toneMemory": "toneMemory_1441117854",
-			"toneFiles": "toneFiles_1441117854",
-			"toneResults": "toneResults_1441117854",
-			"toneConversation": "toneConversation_1441117854"
+		var UsageCards_module_default = {
+			"grid": "grid_673061119",
+			"card": "card_673061119",
+			"head": "head_673061119",
+			"title": "title_673061119",
+			"model": "model_673061119",
+			"cacheBadge": "cacheBadge_673061119",
+			"body": "body_673061119",
+			"totalRow": "totalRow_673061119",
+			"total": "total_673061119",
+			"totalShare": "totalShare_673061119",
+			"bar": "bar_673061119",
+			"barSeg": "barSeg_673061119",
+			"barEmpty": "barEmpty_673061119",
+			"statsMain": "statsMain_673061119",
+			"ringWrap": "ringWrap_673061119",
+			"ring": "ring_673061119",
+			"ringTrack": "ringTrack_673061119",
+			"ringCenter": "ringCenter_673061119",
+			"ringTotal": "ringTotal_673061119",
+			"ringCaption": "ringCaption_673061119",
+			"legend": "legend_673061119",
+			"legendRow": "legendRow_673061119",
+			"swatch": "swatch_673061119",
+			"legendName": "legendName_673061119",
+			"legendPercent": "legendPercent_673061119",
+			"legendValue": "legendValue_673061119",
+			"legendSuffix": "legendSuffix_673061119",
+			"empty": "empty_673061119",
+			"toneSystemPrompt": "toneSystemPrompt_673061119",
+			"toneUser": "toneUser_673061119",
+			"toneSkill": "toneSkill_673061119",
+			"toneToolResult": "toneToolResult_673061119",
+			"toneToolDef": "toneToolDef_673061119",
+			"toneInjected": "toneInjected_673061119",
+			"toneAssistant": "toneAssistant_673061119",
+			"toneOutput": "toneOutput_673061119"
 		};
 		//#endregion
-		//#region src/client/ContextWindowPanel.tsx
-		const CATEGORY_LABEL = {
-			system: "contextSystem",
-			tools: "contextTools",
-			memory: "contextMemory",
-			files: "contextFiles",
-			results: "contextResults",
-			conversation: "contextConversation"
-		};
-		const CATEGORY_TONE = {
-			system: ContextWindowPanel_module_default.toneSystem,
-			tools: ContextWindowPanel_module_default.toneTools,
-			memory: ContextWindowPanel_module_default.toneMemory,
-			files: ContextWindowPanel_module_default.toneFiles,
-			results: ContextWindowPanel_module_default.toneResults,
-			conversation: ContextWindowPanel_module_default.toneConversation
+		//#region src/client/UsageCards.tsx
+		/** Legend names, one per bucket (the context-window panel's category names are
+		*  a different split — files live inside tool results here). */
+		const BUCKET_LABEL = {
+			systemPrompt: "bucketSystemPrompt",
+			user: "bucketUser",
+			skill: "bucketSkill",
+			toolResult: "bucketToolResult",
+			toolDef: "bucketToolDef",
+			injected: "bucketInjected",
+			assistant: "bucketAssistant",
+			output: "bucketOutput"
 		};
-		/** Which locale string names an injected/system row, keyed by its log kind. */
-		const KIND_LABEL = {
-			"system-prompt": "contextKindSystemPrompt",
-			"runtime-context": "contextKindRuntimeContext",
-			"skill-catalog": "contextKindSkillCatalog",
-			"time-context": "contextKindTimeContext",
-			"compaction-summary": "contextKindCompaction",
-			user: "contextKindUser",
-			assistant: "contextKindAssistant"
+		/** Each bucket brings its own accent as a CSS custom property, so the swatch,
+		*  the ring segment, the bar segment and the value text all read one variable. */
+		const BUCKET_TONE = {
+			systemPrompt: UsageCards_module_default.toneSystemPrompt,
+			user: UsageCards_module_default.toneUser,
+			skill: UsageCards_module_default.toneSkill,
+			toolResult: UsageCards_module_default.toneToolResult,
+			toolDef: UsageCards_module_default.toneToolDef,
+			injected: UsageCards_module_default.toneInjected,
+			assistant: UsageCards_module_default.toneAssistant,
+			output: UsageCards_module_default.toneOutput
 		};
-		/** What one treemap tile is called: a tool name or path as-is, an
-		*  injected kind through the dictionary, and a folded tail as "N more". */
-		function itemText(item, t) {
-			if (item.kind === "rest") return t("contextKindRest", { count: String(item.count) });
-			const label = item.kind === void 0 ? void 0 : KIND_LABEL[item.kind];
-			const base = label !== void 0 ? t(label) : item.label || item.kind || "";
-			return item.count > 1 ? `${base} ${t("contextTimes", { count: String(item.count) })}` : base;
-		}
-		const sumOf = (items) => items.reduce((sum, item) => sum + item.tokens, 0);
-		/** Wall-clock stamp of the last successful read, same shape as the page's. */
-		const clock$1 = (ms) => new Date(ms).toLocaleTimeString([], {
-			hour: "2-digit",
-			minute: "2-digit",
-			second: "2-digit"
-		});
-		/** Hover-card footprint estimate, so the tip can be kept inside the map
-		*  without measuring itself first. */
-		const TIP_W = 220;
-		const TIP_H = 70;
-		/** The hover card for one tile: name and call count, the exact token count
-		*  with its category, and the block's share of the estimate and of the
-		*  model's window — the figures a tile has no room to print. */
-		function Tip({ item, box, map, t, total, contextWindow }) {
-			const share = total > 0 ? formatPercent(item.tokens / total * 100) : null;
-			const windowShare = contextWindow !== null && contextWindow > 0 ? formatPercent(item.tokens / contextWindow * 100) : null;
-			const left = Math.min(Math.max(box.x + box.width / 2 - TIP_W / 2, 4), Math.max(4, map.width - TIP_W - 4));
-			const top = box.y + box.height + 6 + TIP_H < map.height - 4 ? box.y + box.height + 6 : Math.max(4, box.y - TIP_H - 6);
+		/** Approximate value as the card prints it: "≈299.1k". */
+		const approx = (n) => `≈${formatCompact(n)}`;
+		/** Ring geometry: a 116 px donut with a 15 px stroke. */
+		const RING_SIZE = 116;
+		const RING_STROKE = 15;
+		const RING_RADIUS = 101 / 2 - 2;
+		const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
+		/** Donut of bucket shares with the grand total in the middle. Segments are
+		*  stroked along one circle and offset by the running length, so the ring is
+		*  DPI-independent and needs no chart library. `total` sizes the segments (the
+		*  replay estimate); `center` is the exact billed figure the card headlines. */
+		function Ring({ rows, total, center, centerTitle, caption }) {
+			const drawn = rows.filter((row) => row.tokens > 0);
+			let offset = 0;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: ContextWindowPanel_module_default.tip,
-				role: "tooltip",
-				style: {
-					left,
-					top
-				},
+				className: UsageCards_module_default.ringWrap,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+					className: UsageCards_module_default.ring,
+					width: RING_SIZE,
+					height: RING_SIZE,
+					viewBox: `0 0 ${RING_SIZE} ${RING_SIZE}`,
+					role: "img",
+					"aria-label": caption,
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: caption }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+							className: UsageCards_module_default.ringTrack,
+							cx: RING_SIZE / 2,
+							cy: RING_SIZE / 2,
+							r: RING_RADIUS,
+							fill: "none",
+							strokeWidth: RING_STROKE
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
+							transform: `rotate(-90 ${RING_SIZE / 2} ${RING_SIZE / 2})`,
+							children: drawn.map((row) => {
+								const length = total > 0 ? row.tokens / total * RING_CIRCUMFERENCE : 0;
+								const visible = Math.max(length - 1.2, .6);
+								const dash = `${visible} ${RING_CIRCUMFERENCE - visible}`;
+								const circle = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+									className: BUCKET_TONE[row.key],
+									cx: RING_SIZE / 2,
+									cy: RING_SIZE / 2,
+									r: RING_RADIUS,
+									fill: "none",
+									stroke: "var(--bucket)",
+									strokeWidth: RING_STROKE,
+									strokeDasharray: dash,
+									strokeDashoffset: -offset
+								}, row.key);
+								offset += length;
+								return circle;
+							})
+						})
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: UsageCards_module_default.ringCenter,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+						className: UsageCards_module_default.ringTotal,
+						title: centerTitle,
+						children: center
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: UsageCards_module_default.ringCaption,
+						children: caption
+					})]
+				})]
+			});
+		}
+		/** One legend entry: swatch, name, share, approximate value. */
+		function LegendRow({ row, percent, suffix, t }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: `${UsageCards_module_default.legendRow} ${BUCKET_TONE[row.key]}`,
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: ContextWindowPanel_module_default.tipName,
-						children: itemText(item, t)
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+						className: UsageCards_module_default.swatch,
+						"aria-hidden": "true"
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: ContextWindowPanel_module_default.tipMeta,
-						children: [
-							formatTokens(item.tokens),
-							" token · ",
-							t(CATEGORY_LABEL[item.category])
-						]
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: UsageCards_module_default.legendName,
+						children: t(BUCKET_LABEL[row.key])
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: UsageCards_module_default.legendPercent,
+						children: [percent.toFixed(1), "%"]
 					}),
-					share !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: ContextWindowPanel_module_default.tipShare,
-						children: [t("contextTipShare", { percent: share }), windowShare === null ? "" : ` · ${t("contextTipWindow", { percent: windowShare })}`]
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: UsageCards_module_default.legendValue,
+						title: formatTokens(row.tokens),
+						children: [approx(row.tokens), suffix === void 0 ? "" : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: UsageCards_module_default.legendSuffix,
+							children: [" · ", suffix]
+						})]
 					})
 				]
 			});
 		}
-		function Treemap({ items, t, contextWindow }) {
-			const hostRef = (0, react.useRef)(null);
-			const [size, setSize] = (0, react.useState)({
-				width: 0,
-				height: 0
-			});
-			const [hoverKey, setHoverKey] = (0, react.useState)(null);
-			(0, react.useLayoutEffect)(() => {
-				const host = hostRef.current;
-				if (host === null) return;
-				const measure = () => setSize((previous) => {
-					const width = host.clientWidth;
-					const height = host.clientHeight;
-					return previous.width === width && previous.height === height ? previous : {
-						width,
-						height
-					};
-				});
-				measure();
-				if (typeof ResizeObserver === "undefined") {
-					window.addEventListener("resize", measure);
-					return () => window.removeEventListener("resize", measure);
-				}
-				const observer = new ResizeObserver(measure);
-				observer.observe(host);
-				return () => observer.disconnect();
-			}, []);
-			const boxes = (0, react.useMemo)(() => treemapLayout(items.map((item) => ({
-				key: item.key,
-				tokens: item.tokens
-			})), size.width, size.height), [
-				items,
-				size.width,
-				size.height
-			]);
-			const byKey = (0, react.useMemo)(() => new Map(items.map((item) => [item.key, item])), [items]);
-			const hoverBox = hoverKey === null ? void 0 : boxes.find((box) => box.key === hoverKey);
-			const hoverItem = hoverBox === void 0 ? void 0 : byKey.get(hoverBox.key);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				ref: hostRef,
-				className: ContextWindowPanel_module_default.map,
-				onMouseLeave: () => setHoverKey(null),
-				children: [boxes.map((box) => {
-					const item = byKey.get(box.key);
-					if (item === void 0 || box.width <= 0 || box.height <= 0) return null;
-					const text = itemText(item, t);
-					const showLabel = box.width >= 46 && box.height >= 22;
-					const showSize = box.width >= 62 && box.height >= 40;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: ContextWindowPanel_module_default.slot,
-						style: {
-							left: box.x,
-							top: box.y,
-							width: box.width,
-							height: box.height
-						},
-						onMouseEnter: () => setHoverKey(box.key),
-						"aria-label": `${text} · ${formatTokens(item.tokens)} token · ${t(CATEGORY_LABEL[item.category])}`,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: `${ContextWindowPanel_module_default.tile} ${CATEGORY_TONE[item.category]}`,
-							children: [showLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: ContextWindowPanel_module_default.tileLabel,
-								children: text
-							}), showSize && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								className: ContextWindowPanel_module_default.tileSize,
-								children: [
-									formatCompact(item.tokens),
-									" · ",
-									t(CATEGORY_LABEL[item.category])
-								]
-							})]
-						})
-					}, box.key);
-				}), hoverBox !== void 0 && hoverItem !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tip, {
-					item: hoverItem,
-					box: hoverBox,
-					map: size,
-					t,
-					total: sumOf(items),
-					contextWindow
-				})]
-			});
-		}
-		/** The context-window panel above the Usage cards, in magpie's shape: the used
-		*  total and the model's window on the left, the newest answer's prompt-cache
-		*  split on the right, a treemap of what occupies the window below (with a
-		*  hover card per tile), and one legend row naming the six buckets with their
-		*  sizes. Every figure is an estimate, so the panel never claims an exact
-		*  count — and the live pill stamps when the estimate was last refreshed. */
-		function ContextWindowPanel({ context, t, updatedAt }) {
-			const [open, setOpen] = (0, react.useState)(true);
-			const totals = contextCategoryTotals(context.items);
+		/** Left card: the live window's composition, its occupancy and the hard cap. */
+		function ContextCard({ context, t }) {
 			const reading = contextReading(context);
-			const percent = reading.percent;
-			const hitRate = context.cacheKnown ? cacheRate(context.cacheHitTokens, context.cacheMissTokens) : null;
-			const model = context.model !== "" && !context.model.includes("/") && context.provider !== "" ? `${context.provider}/${context.model}` : context.model;
-			const windowText = context.contextWindow === null ? t("contextWindowUnknown") : t("contextWindowKnown", {
-				value: formatCompact(context.contextWindow),
-				percent: String(percent ?? 0)
-			});
-			const categoryTotal = totals.reduce((sum, row) => sum + row.tokens, 0);
-			const windowKnown = context.contextWindow !== null && context.contextWindow > 0;
-			const usedShare = windowKnown ? Math.min(100, Math.max(0, reading.usedTokens / context.contextWindow * 100)) : 100;
-			const freeTokens = windowKnown ? Math.max(0, context.contextWindow - reading.usedTokens) : 0;
-			const digestLabel = [
-				`${t("contextUsed")} ${formatTokens(reading.usedTokens)} token`,
-				...totals.map((row) => `${t(CATEGORY_LABEL[row.key])} ${formatCompact(row.tokens)}`),
-				windowKnown ? `${t("contextFree")} ${formatTokens(freeTokens)} token` : windowText
-			].join(" · ");
-			const digestText = context.contextWindow === null ? t("contextDigestUnknown", { used: formatCompact(reading.usedTokens) }) : t("contextDigest", {
+			const rows = contextBucketTotals(context.items);
+			const total = rows.reduce((sum, row) => sum + row.tokens, 0);
+			const capacity = context.contextWindow !== null && context.contextWindow > 0 ? context.contextWindow : total;
+			const occupied = Math.min(100, bucketPercent(reading.usedTokens, capacity));
+			const windowText = context.contextWindow !== null && context.contextWindow > 0 ? t("contextWindowTotal", {
 				used: formatCompact(reading.usedTokens),
-				window: formatCompact(context.contextWindow),
-				percent: String(percent ?? 0)
-			});
+				window: formatCompact(context.contextWindow)
+			}) : t("contextWindowTotalUnknown", { used: formatCompact(reading.usedTokens) });
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
-				className: ContextWindowPanel_module_default.panel,
-				"data-dsh-context-window": true,
+				className: `${UsageCards_module_default.card} ${UsageCards_module_default.contextCard}`,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-					className: open ? ContextWindowPanel_module_default.head : `${ContextWindowPanel_module_default.head} ${ContextWindowPanel_module_default.headCollapsed}`,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: ContextWindowPanel_module_default.headLead,
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							className: ContextWindowPanel_module_default.toggle,
-							onClick: () => setOpen(!open),
-							"aria-expanded": open,
-							"aria-controls": "dsh-context-window-body",
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-								className: `${ContextWindowPanel_module_default.chevron} ${open ? ContextWindowPanel_module_default.chevronOpen : ""}`,
-								width: "12",
-								height: "12",
-								viewBox: "0 0 12 12",
-								"aria-hidden": "true",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
-									d: "m4 2 4 4-4 4",
-									stroke: "currentColor",
-									strokeWidth: "1.5",
-									fill: "none"
-								})
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: t("contextTitle") })]
-						}), !open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: ContextWindowPanel_module_default.digest,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: ContextWindowPanel_module_default.digestTotal,
-								title: `${t("contextUsed")} ${formatTokens(reading.usedTokens)} token · ${windowText}`,
-								children: digestText
-							}), categoryTotal > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: ContextWindowPanel_module_default.digestBar,
-								role: "img",
-								"aria-label": digestLabel,
-								title: digestLabel,
-								children: totals.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: `${ContextWindowPanel_module_default.digestSeg} ${CATEGORY_TONE[row.key]}`,
-									style: { width: `${row.tokens / categoryTotal * usedShare}%` }
-								}, row.key))
-							})]
-						})]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: ContextWindowPanel_module_default.headRight,
-						children: [model !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: ContextWindowPanel_module_default.model,
-							title: `${context.provider} / ${context.model}`,
-							children: model
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: ContextWindowPanel_module_default.livePill,
-							children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: ContextWindowPanel_module_default.liveDot,
-									"aria-hidden": "true"
-								}),
-								t("contextLive"),
-								typeof updatedAt === "number" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-									className: ContextWindowPanel_module_default.liveTime,
-									children: [" · ", clock$1(updatedAt)]
-								})
-							]
-						})]
+					className: UsageCards_module_default.head,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: UsageCards_module_default.title,
+						children: t("currentContextTitle")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: UsageCards_module_default.model,
+						title: `${context.provider} / ${context.model}`,
+						children: [context.provider, context.model].filter(Boolean).join(" · ") || "—"
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					id: "dsh-context-window-body",
-					className: ContextWindowPanel_module_default.body,
-					hidden: !open,
+					className: UsageCards_module_default.body,
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: ContextWindowPanel_module_default.summary,
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: ContextWindowPanel_module_default.used,
+							className: UsageCards_module_default.totalRow,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", {
+								className: UsageCards_module_default.total,
+								title: formatTokens(reading.usedTokens),
+								children: windowText
+							}), reading.percent !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: UsageCards_module_default.totalShare,
 								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: ContextWindowPanel_module_default.label,
-										children: t("contextUsed")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("strong", {
-										className: ContextWindowPanel_module_default.total,
-										title: formatTokens(reading.usedTokens),
-										children: [formatCompact(reading.usedTokens), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("small", { children: "token" })]
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: ContextWindowPanel_module_default.window,
-										children: windowText
-									})
-								]
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: ContextWindowPanel_module_default.cache,
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: ContextWindowPanel_module_default.label,
-										children: t("contextCache")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: ContextWindowPanel_module_default.cacheBar,
-										children: hitRate === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: ContextWindowPanel_module_default.cacheEmpty }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: ContextWindowPanel_module_default.cacheHit,
-											style: { width: `${hitRate}%` }
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: ContextWindowPanel_module_default.cacheMiss,
-											style: { width: `${100 - hitRate}%` }
-										})] })
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										className: ContextWindowPanel_module_default.cacheLegend,
-										children: hitRate === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-											className: ContextWindowPanel_module_default.cachePending,
-											children: t("contextCachePending")
-										}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-												className: ContextWindowPanel_module_default.cacheHitDot,
-												"aria-hidden": "true"
-											}),
-											t("contextCacheHit"),
-											" ",
-											formatPercent(hitRate)
-										] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
-												className: ContextWindowPanel_module_default.cacheMissDot,
-												"aria-hidden": "true"
-											}),
-											t("contextCacheMiss"),
-											" ",
-											formatPercent(100 - hitRate)
-										] })] })
-									})
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("b", { children: formatPercent(reading.percent) }),
+									" ",
+									t("contextUsedShort")
 								]
 							})]
 						}),
-						reading.estimateDiffers && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: ContextWindowPanel_module_default.note,
-							children: t("contextEstimateNote", {
-								estimate: formatCompact(reading.estimateTokens),
-								billed: formatCompact(reading.usedTokens)
-							})
-						}),
-						context.items.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: ContextWindowPanel_module_default.empty,
-							children: t("contextEmpty")
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Treemap, {
-							items: context.items,
-							t,
-							contextWindow: context.contextWindow
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: UsageCards_module_default.bar,
+							role: "img",
+							"aria-label": t("currentContextTitle"),
+							children: [rows.map((row) => row.tokens > 0 && total > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: `${UsageCards_module_default.barSeg} ${BUCKET_TONE[row.key]}`,
+								style: { width: `${bucketPercent(row.tokens, total) * occupied / 100}%` }
+							}, row.key) : null), total <= 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: UsageCards_module_default.barEmpty })]
 						}),
-						totals.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-							className: ContextWindowPanel_module_default.legend,
-							children: totals.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", { children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: `${ContextWindowPanel_module_default.swatch} ${CATEGORY_TONE[row.key]}`,
-									"aria-hidden": "true"
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: ContextWindowPanel_module_default.legendName,
-									children: t(CATEGORY_LABEL[row.key])
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: ContextWindowPanel_module_default.legendValue,
-									children: formatCompact(row.tokens)
-								})
-							] }, row.key))
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+							className: UsageCards_module_default.legend,
+							children: rows.map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LegendRow, {
+								row,
+								percent: bucketPercent(row.tokens, total),
+								t
+							}, row.key))
 						})
 					]
 				})]
 			});
 		}
+		/** Right card: every request's replayed content plus the billed output. */
+		function StatsCard({ detail, t }) {
+			const composition = detail.composition ?? null;
+			const rows = composition?.buckets ?? [];
+			const total = rows.reduce((sum, row) => sum + row.tokens, 0);
+			const billed = composition?.billedTokens ?? 0;
+			const hit = composition !== null ? cacheHitPercentOf(composition.totals) : detail.context?.cacheKnown ? cacheRate(detail.context.cacheHitTokens, detail.context.cacheMissTokens) : null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: `${UsageCards_module_default.card} ${UsageCards_module_default.statsCard}`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
+					className: UsageCards_module_default.head,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+						className: UsageCards_module_default.title,
+						children: t("statsTitle")
+					}), hit !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: UsageCards_module_default.cacheBadge,
+						children: [
+							t("statsCacheHit"),
+							" ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("b", { children: [hit.toFixed(2), "%"] })
+						]
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: UsageCards_module_default.body,
+					children: composition === null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: UsageCards_module_default.empty,
+						children: t("statsEmpty")
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: UsageCards_module_default.statsMain,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Ring, {
+							rows,
+							total,
+							center: formatCompact(billed),
+							centerTitle: formatTokens(billed),
+							caption: t("statsTotal")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+							className: UsageCards_module_default.legend,
+							children: USAGE_BUCKET_ORDER.map((key) => {
+								const row = rows.find((item) => item.key === key) ?? {
+									key,
+									tokens: 0
+								};
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LegendRow, {
+									row,
+									percent: bucketPercent(row.tokens, total),
+									suffix: key === "output" ? t("statsIncludesThinking") : void 0,
+									t
+								}, key);
+							})
+						})]
+					}) })
+				})]
+			});
+		}
+		/** The pair, rendered where the context-window panel used to sit. */
+		function SessionUsageCards({ detail, t }) {
+			if (detail.context === null || detail.context === void 0) {
+				if (detail.composition === null || detail.composition === void 0) return null;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: UsageCards_module_default.grid,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatsCard, {
+						detail,
+						t
+					})
+				});
+			}
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: UsageCards_module_default.grid,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextCard, {
+					context: detail.context,
+					t
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatsCard, {
+					detail,
+					t
+				})]
+			});
+		}
 		//#endregion
 		//#region src/client/model-logos-data.ts
 		/**
@@ -34003,11 +33852,10 @@ window.__ModuleLoader__.load({
 					detail,
 					t
 				}),
-				detail.context ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextWindowPanel, {
-					context: detail.context,
-					t,
-					updatedAt
-				}) : null,
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SessionUsageCards, {
+					detail,
+					t
+				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Records, {
 					detail,
 					t
@@ -34152,6 +34000,7 @@ window.__ModuleLoader__.load({
 			asOf: "统计截至",
 			refresh: "刷新",
 			contextTitle: "上下文窗口",
+			currentContextTitle: "当前上下文",
 			contextUsed: "已用上下文",
 			contextLive: "实时",
 			contextWindowKnown: "模型窗口 {value} · 已用 {percent}%",
@@ -34181,7 +34030,23 @@ window.__ModuleLoader__.load({
 			contextEmpty: "本会话还没有可统计的上下文",
 			contextTipShare: "占上下文 {percent}",
 			contextTipWindow: "占窗口 {percent}",
-			contextEstimateNote: "色块按历史重放估算 {estimate}；供应商实测提示词 {billed}（上游已压缩或裁剪）"
+			contextEstimateNote: "色块按历史重放估算 {estimate}；供应商实测提示词 {billed}（上游已压缩或裁剪）",
+			statsTitle: "Token 统计",
+			statsTotal: "总用量",
+			statsCacheHit: "缓存命中",
+			statsIncludesThinking: "含思考",
+			statsEmpty: "本会话还没有可统计的 token",
+			contextWindowTotal: "{used} / {window} tokens",
+			contextWindowTotalUnknown: "{used} tokens",
+			contextUsedShort: "上下文已用",
+			bucketSystemPrompt: "系统提示词",
+			bucketUser: "用户消息",
+			bucketSkill: "技能注入",
+			bucketToolResult: "工具结果",
+			bucketToolDef: "工具定义",
+			bucketInjected: "注入内容",
+			bucketAssistant: "助手消息",
+			bucketOutput: "输出"
 		};
 		const usageEn = {
 			tab: "Usage",
@@ -34243,6 +34108,7 @@ window.__ModuleLoader__.load({
 			asOf: "as of",
 			refresh: "Refresh",
 			contextTitle: "Context window",
+			currentContextTitle: "Current context",
 			contextUsed: "Context used",
 			contextLive: "Live",
 			contextWindowKnown: "Window {value} · {percent}% used",
@@ -34272,7 +34138,23 @@ window.__ModuleLoader__.load({
 			contextEmpty: "Nothing in this session’s context yet",
 			contextTipShare: "{percent} of context",
 			contextTipWindow: "{percent} of window",
-			contextEstimateNote: "Blocks estimate {estimate} by replay; the provider billed {billed} after upstream compression"
+			contextEstimateNote: "Blocks estimate {estimate} by replay; the provider billed {billed} after upstream compression",
+			statsTitle: "Token stats",
+			statsTotal: "Total usage",
+			statsCacheHit: "Cache hit",
+			statsIncludesThinking: "incl. thinking",
+			statsEmpty: "No token spend recorded for this session yet",
+			contextWindowTotal: "{used} / {window} tokens",
+			contextWindowTotalUnknown: "{used} tokens",
+			contextUsedShort: "context used",
+			bucketSystemPrompt: "System prompt",
+			bucketUser: "User messages",
+			bucketSkill: "Skill injection",
+			bucketToolResult: "Tool results",
+			bucketToolDef: "Tool definitions",
+			bucketInjected: "Injected content",
+			bucketAssistant: "Assistant messages",
+			bucketOutput: "Output"
 		};
 		const usageZhTW = {
 			...usageZh,
@@ -34334,6 +34216,7 @@ window.__ModuleLoader__.load({
 			asOf: "統計截至",
 			refresh: "重新整理",
 			contextTitle: "上下文視窗",
+			currentContextTitle: "當前上下文",
 			contextUsed: "已用上下文",
 			contextLive: "即時",
 			contextWindowKnown: "模型視窗 {value} · 已用 {percent}%",
@@ -34363,7 +34246,23 @@ window.__ModuleLoader__.load({
 			contextEmpty: "本會話還沒有可統計的上下文",
 			contextTipShare: "佔上下文 {percent}",
 			contextTipWindow: "佔視窗 {percent}",
-			contextEstimateNote: "色塊按歷史重放估算 {estimate}；供應商實測提示詞 {billed}（上游已壓縮或裁剪）"
+			contextEstimateNote: "色塊按歷史重放估算 {estimate}；供應商實測提示詞 {billed}（上游已壓縮或裁剪）",
+			statsTitle: "Token 統計",
+			statsTotal: "總用量",
+			statsCacheHit: "快取命中",
+			statsIncludesThinking: "含思考",
+			statsEmpty: "本會話還沒有可統計的 token",
+			contextWindowTotal: "{used} / {window} tokens",
+			contextWindowTotalUnknown: "{used} tokens",
+			contextUsedShort: "上下文已用",
+			bucketSystemPrompt: "系統提示詞",
+			bucketUser: "使用者訊息",
+			bucketSkill: "技能注入",
+			bucketToolResult: "工具結果",
+			bucketToolDef: "工具定義",
+			bucketInjected: "注入內容",
+			bucketAssistant: "助手訊息",
+			bucketOutput: "輸出"
 		};
 		//#endregion
 		//#region src/client/index.tsx