dsh-token-total 1.0.9 → 1.1.2

package/lib/index.js

@@ -1620,6 +1620,16 @@ function promptTokensOf(usage) {
 	const cached = Number(record?.cacheReadTokens) || 0;
 	return input + cached > 0 ? input + cached : null;
 }
+/** Prompt tokens one tool definition costs: its name, description and JSON
+*  schema, plus the framing every schema node pays. 0 for a nameless entry.
+*  Shared with the spend composition, which replays the same catalogue on
+*  every request. */
+function toolTokens(tool) {
+	const record = tool;
+	const name = String(record?.name ?? "");
+	if (name === "") return 0;
+	return estimateTokens(name) + valueTokens(record?.description) + estimateTokens(JSON.stringify(record?.parameters ?? {})) + TOOL_SCHEMA_OVERHEAD_TOKENS;
+}
 /** Fold one category's rows: keep the biggest until KEEP_SHARE is covered (and
 *  never more than MAX_ROWS_PER_CATEGORY), then merge the tail into one row so
 *  a session with 200 tool calls still yields a readable treemap. */
@@ -1774,10 +1784,10 @@ function buildSessionContextWindow(events) {
 	}
 	for (const summary of summaries) if (summary.tokens > 0) add("memory", "", summary.tokens, "compaction-summary");
 	for (const tool of tools) {
-		const record = tool;
-		const name = String(record?.name ?? "");
-		if (name === "") continue;
-		add("tools", name, estimateTokens(name) + valueTokens(record?.description) + estimateTokens(JSON.stringify(record?.parameters ?? {})) + TOOL_SCHEMA_OVERHEAD_TOKENS);
+		const tokens = toolTokens(tool);
+		const name = String(tool?.name ?? "");
+		if (name === "" || tokens === 0) continue;
+		add("tools", name, tokens);
 	}
 	const items = foldDrafts([...drafts.values()]);
 	return {
@@ -1793,6 +1803,197 @@ function buildSessionContextWindow(events) {
 	};
 }
 //#endregion
+//#region src/usage-buckets.ts
+const USAGE_BUCKET_ORDER = [
+	"systemPrompt",
+	"user",
+	"skill",
+	"toolResult",
+	"toolDef",
+	"injected",
+	"assistant",
+	"output"
+];
+USAGE_BUCKET_ORDER.filter((key) => key !== "output");
+//#endregion
+//#region src/usage-composition.ts
+/**
+* Spend composition: what the session's requests actually paid for, split by
+* what filled each prompt.
+*
+* The context-window snapshot answers "what is in the window NOW". This module
+* answers the other half of the picture: every provider request replays the
+* whole message list, so a session that made 300 calls paid for the system
+* prompt 300 times. The number the Token stats card shows per bucket is
+* therefore the sum of that bucket's size AT EVERY REQUEST — not its current
+* size, which would always favour whatever arrived last.
+*
+* The naive way to get that is to rebuild the replayed list per request, which
+* is O(requests × events) and far too slow for a view that polls every 1.5 s
+* over a long session. Instead this walks the log ONCE and keeps a live block
+* map with per-bucket subtotals: a request snapshots those subtotals (8 adds)
+* plus the tool catalogue total, and shadowed sequences subtract their block
+* the moment compaction prunes them. That is O(events + requests × 8).
+*
+* Token sizes are ESTIMATES from the same character-count estimator as
+* `context-window.ts` (the provider never reports a per-block number), so the
+* card labels them approximate. The billed total, cache split and request
+* count come straight from `usage` records and are exact.
+*/
+/** Shadowed sequences a compaction event removed from the replay list. */
+function shadowedSeqs(data) {
+	const seqs = [];
+	for (const seq of Array.isArray(data?.shadowedSeqs) ? data.shadowedSeqs : []) seqs.push(Number(seq));
+	const range = data?.shadowedRange;
+	if (typeof range?.start === "number" && typeof range?.end === "number") for (let seq = range.start; seq <= range.end; seq++) seqs.push(seq);
+	return seqs;
+}
+/**
+* Accumulate one session's own events into the eight legend buckets.
+*
+* Returns null for an empty log or a log whose requests never reported usage
+* (an older host writing no usage records) so the card can hide itself rather
+* than draw an empty ring.
+*/
+function buildSessionUsageComposition(events) {
+	if (events.length === 0) return null;
+	const ordered = [...events].sort((a, b) => a.seq - b.seq);
+	/** Blocks still replayed by the next request, keyed by their event sequence. */
+	const live = /* @__PURE__ */ new Map();
+	/** Current size of the replay list per bucket — what one request would send. */
+	const liveByBucket = /* @__PURE__ */ new Map();
+	/** What every request so far sent, summed per bucket. */
+	const acc = /* @__PURE__ */ new Map();
+	const totals = {
+		uncachedInputTokens: 0,
+		outputTokens: 0,
+		cacheReadTokens: 0,
+		cacheWriteTokens: 0
+	};
+	let billed = 0;
+	let requests = 0;
+	/** Prompt tokens the newest request/header's tool catalogue costs. */
+	let catalogue = 0;
+	const addBlock = (seq, bucket, tokens) => {
+		if (tokens <= 0) return;
+		live.set(seq, {
+			bucket,
+			tokens
+		});
+		liveByBucket.set(bucket, (liveByBucket.get(bucket) ?? 0) + tokens);
+	};
+	const dropBlock = (seq) => {
+		const block = live.get(seq);
+		if (block === void 0) return;
+		live.delete(seq);
+		liveByBucket.set(block.bucket, (liveByBucket.get(block.bucket) ?? 0) - block.tokens);
+	};
+	/** Charge one request for everything it replayed. */
+	const snapshot = () => {
+		for (const [bucket, tokens] of liveByBucket) if (tokens > 0) acc.set(bucket, (acc.get(bucket) ?? 0) + tokens);
+		if (catalogue > 0) acc.set("toolDef", (acc.get("toolDef") ?? 0) + catalogue);
+	};
+	/** Fold the provider's exact report into the billed split. */
+	const account = (usage) => {
+		const input = Number(usage?.inputTokens) || 0;
+		const cacheRead = Number(usage?.cacheReadTokens) || 0;
+		const cacheWrite = Number(usage?.cacheWriteTokens) || 0;
+		const output = Number(usage?.outputTokens) || 0;
+		totals.uncachedInputTokens += input;
+		totals.cacheReadTokens += cacheRead;
+		totals.cacheWriteTokens += cacheWrite;
+		totals.outputTokens += output;
+		billed += input + cacheRead + cacheWrite + output;
+		requests++;
+		if (output > 0) acc.set("output", (acc.get("output") ?? 0) + output);
+	};
+	for (const event of ordered) {
+		const data = event.data ?? {};
+		if (event.type === "compaction/prune" || event.type === "compaction/summary") {
+			if (event.type === "compaction/summary" && data.usage !== void 0 && data.usage !== null) {
+				snapshot();
+				account(data.usage);
+			}
+			for (const seq of shadowedSeqs(data)) dropBlock(seq);
+			if (event.type === "compaction/summary") addBlock(event.seq, "injected", messageTokens({ content: data.summary }));
+			continue;
+		}
+		if (event.type === "request/header") {
+			const header = data.header ?? {};
+			if (Array.isArray(header.tools)) {
+				catalogue = 0;
+				for (const tool of header.tools) catalogue += toolTokens(tool);
+			}
+			continue;
+		}
+		if (event.type === "assistant/message") {
+			if (data.usage !== void 0 && data.usage !== null) {
+				snapshot();
+				account(data.usage);
+			}
+			addBlock(event.seq, "assistant", messageTokens(data.message ?? { content: data.content }));
+			continue;
+		}
+		if (event.type === "system/message") {
+			const bucket = String(data.message?.source?.kind ?? data.source?.kind ?? "system-prompt") === "system-prompt" ? "systemPrompt" : "injected";
+			addBlock(event.seq, bucket, messageTokens(data.message ?? { content: data.content }));
+			continue;
+		}
+		if (event.type === "user/message") {
+			const kind = String(data.source?.kind ?? data.message?.source?.kind ?? "user");
+			const bucket = kind === "user" ? "user" : kind === "skill-catalog" ? "skill" : "injected";
+			addBlock(event.seq, bucket, messageTokens(data.message ?? { content: data.content }));
+			continue;
+		}
+		if (event.type === "tool/result") {
+			addBlock(event.seq, "toolResult", messageTokens(data.message ?? {}));
+			continue;
+		}
+	}
+	if (requests === 0) return null;
+	return {
+		buckets: USAGE_BUCKET_ORDER.map((key) => ({
+			key,
+			tokens: Math.max(0, Math.round(acc.get(key) ?? 0))
+		})),
+		billedTokens: billed,
+		totals,
+		requests
+	};
+}
+/** Add one tree's compositions into the root's, matching its other aggregates. */
+function mergeUsageCompositions(parts) {
+	const present = parts.filter((part) => part !== null && part !== void 0);
+	if (present.length === 0) return null;
+	const acc = /* @__PURE__ */ new Map();
+	const totals = {
+		uncachedInputTokens: 0,
+		outputTokens: 0,
+		cacheReadTokens: 0,
+		cacheWriteTokens: 0
+	};
+	let billed = 0;
+	let requests = 0;
+	for (const part of present) {
+		for (const bucket of part.buckets) acc.set(bucket.key, (acc.get(bucket.key) ?? 0) + bucket.tokens);
+		totals.uncachedInputTokens += part.totals.uncachedInputTokens;
+		totals.cacheReadTokens += part.totals.cacheReadTokens;
+		totals.cacheWriteTokens += part.totals.cacheWriteTokens;
+		totals.outputTokens += part.totals.outputTokens;
+		billed += part.billedTokens;
+		requests += part.requests;
+	}
+	return {
+		buckets: USAGE_BUCKET_ORDER.map((key) => ({
+			key,
+			tokens: acc.get(key) ?? 0
+		})),
+		billedTokens: billed,
+		totals,
+		requests
+	};
+}
+//#endregion
 //#region src/session-detail.ts
 const zero = () => ({
 	uncachedInputTokens: 0,
@@ -2120,7 +2321,8 @@ async function one(p, id, header, live) {
 		requests,
 		averageFirstTokenMs: firsts.length ? firsts.reduce((a, b) => a + b, 0) / firsts.length : null,
 		tokensPerSecond: decodeRateOf(records),
-		context: buildSessionContextWindow(own)
+		context: buildSessionContextWindow(own),
+		composition: buildSessionUsageComposition(own)
 	};
 }
 async function buildSessionUsageDetail(persistence, sessions, rootId, ctx) {
@@ -2220,7 +2422,8 @@ async function buildSessionUsageDetail(persistence, sessions, rootId, ctx) {
 		}),
 		records,
 		routes: [...routeMap.values()],
-		context: parts[0]?.context ?? null
+		context: parts[0]?.context ?? null,
+		composition: mergeUsageCompositions(parts.map((p) => p.composition))
 	};
 }
 //#endregion

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

@@ -0,0 +1,28 @@
+/**
+ * The two cards that replaced the context-window panel.
+ *
+ * Left: what the window holds RIGHT NOW (the context snapshot). Right: what the
+ * session's requests actually spent, split by content (the spend composition).
+ * They answer two different questions — "what is in the prompt" and "what did
+ * the whole session pay for" — so they sit side by side at equal weight rather
+ * than one above the other.
+ *
+ * Everything is drawn from the detail payload the view already polls every
+ * 1.5 s (`useSessionDetail`), so both cards refresh with no extra timer. The
+ * charts are hand-rolled SVG/CSS: the plugin ships no chart dependency, and a
+ * ring plus a stacked bar is little enough markup to keep it that way.
+ *
+ * The palette is the plugin's tone scale, matching the stat cards above and the
+ * dashboard charts; dark values flip under `body[data-ds-dark-theme]` (the
+ * host's own theme switch), and every surface uses the host's semantic tokens
+ * so the cards sit on the same canvas as the tables.
+ */
+import type { SessionUsageDetail } from '../wire.ts';
+import type { SessionUsageKey } from './session-usage-locales.ts';
+type T = (key: SessionUsageKey, params?: Record<string, string>) => string;
+/** The pair, rendered where the context-window panel used to sit. */
+export declare function SessionUsageCards({ detail, t }: {
+    detail: SessionUsageDetail;
+    t: T;
+}): JSX.Element | null;
+export {};

package/lib/types/client/context-window-core.d.ts

@@ -4,6 +4,7 @@
  * separate from the component so both are testable without a DOM.
  */
 import type { SessionContextCategory, SessionContextItem, SessionContextWindow } from '../wire.ts';
+import type { SessionUsageBucket } from '../wire.ts';
 /** Legend order, also the color assignment order (see the CSS module). */
 export declare const CONTEXT_CATEGORY_ORDER: readonly SessionContextCategory[];
 /** One positioned treemap block in container pixels. */
@@ -19,6 +20,14 @@ export declare function contextCategoryTotals(items: readonly SessionContextItem
     key: SessionContextCategory;
     tokens: number;
 }>;
+/** The live window folded into the same legend the spend card prints, in
+ *  legend order and keeping zero buckets so both cards stay aligned. */
+export declare function contextBucketTotals(items: readonly SessionContextItem[]): Array<{
+    key: SessionUsageBucket;
+    tokens: number;
+}>;
+/** What a share of the whole is, for the legend column. */
+export declare function bucketPercent(tokens: number, total: number): number;
 /** 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). */
 export declare function contextWindowPercent(usedTokens: number, contextWindow: number | null): number | null;

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

@@ -60,10 +60,14 @@ export declare const usageZh: {
     asOf: string;
     refresh: string;
     contextTitle: string;
+    currentContextTitle: string;
     contextUsed: string;
     contextLive: string;
     contextWindowKnown: string;
     contextWindowUnknown: string;
+    contextDigest: string;
+    contextDigestUnknown: string;
+    contextFree: string;
     contextCache: string;
     contextCacheHit: string;
     contextCacheMiss: string;
@@ -87,6 +91,22 @@ export declare const usageZh: {
     contextTipShare: string;
     contextTipWindow: string;
     contextEstimateNote: string;
+    statsTitle: string;
+    statsTotal: string;
+    statsCacheHit: string;
+    statsIncludesThinking: string;
+    statsEmpty: string;
+    contextWindowTotal: string;
+    contextWindowTotalUnknown: string;
+    contextUsedShort: string;
+    bucketSystemPrompt: string;
+    bucketUser: string;
+    bucketSkill: string;
+    bucketToolResult: string;
+    bucketToolDef: string;
+    bucketInjected: string;
+    bucketAssistant: string;
+    bucketOutput: string;
 };
 export type SessionUsageKey = keyof typeof usageZh;
 export declare const usageEn: Record<SessionUsageKey, string>;

package/lib/types/context-window.d.ts

@@ -31,6 +31,11 @@ import type { SessionContextWindow } from './wire.ts';
 export declare function estimateTokens(text: string): number;
 /** Approximate tokens of one replayed message (content + framing). */
 export declare function messageTokens(message: unknown): number;
+/** Prompt tokens one tool definition costs: its name, description and JSON
+ *  schema, plus the framing every schema node pays. 0 for a nameless entry.
+ *  Shared with the spend composition, which replays the same catalogue on
+ *  every request. */
+export declare function toolTokens(tool: unknown): number;
 /** Build the context-window snapshot from one session's own events. Returns
  *  null for an empty log so the panel can hide itself. */
 export declare function buildSessionContextWindow(events: readonly UsageSessionEvent[]): SessionContextWindow | null;

package/lib/types/usage-buckets.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The legend order of the Token stats card, shared by the host accumulator and
+ * the client card so the two halves can never disagree about which bucket sits
+ * where. Left column first (what filled the prompt), right column second: the
+ * layout mirrors the reference design — system/user/skill/results on the left,
+ * tool definitions/injected/assistant/output on the right.
+ *
+ * Kept in its own dependency-free module: the host builds the numbers and the
+ * client paints them, and neither should pull the other's graph in for this.
+ */
+import type { SessionUsageBucket } from './wire.ts';
+export declare const USAGE_BUCKET_ORDER: readonly SessionUsageBucket[];
+/** The buckets that describe the live window (output never occupies it). */
+export declare const CONTEXT_BUCKET_ORDER: readonly SessionUsageBucket[];

package/lib/types/usage-composition.d.ts

@@ -0,0 +1,12 @@
+import type { UsageSessionEvent } from './context-types.ts';
+import type { SessionUsageComposition } from './wire.ts';
+/**
+ * Accumulate one session's own events into the eight legend buckets.
+ *
+ * Returns null for an empty log or a log whose requests never reported usage
+ * (an older host writing no usage records) so the card can hide itself rather
+ * than draw an empty ring.
+ */
+export declare function buildSessionUsageComposition(events: readonly UsageSessionEvent[]): SessionUsageComposition | null;
+/** Add one tree's compositions into the root's, matching its other aggregates. */
+export declare function mergeUsageCompositions(parts: ReadonlyArray<SessionUsageComposition | null | undefined>): SessionUsageComposition | null;

package/lib/types/wire.d.ts

@@ -191,6 +191,36 @@ export interface SessionUsageDetail {
     /** The root session's live context composition, rendered above the cards.
      *  Null when the log has no readable events (or on an older host). */
     context?: SessionContextWindow | null;
+    /** What the session's requests spent, split by what filled the prompt.
+     *  Null when the log has no readable usage (or on an older host). */
+    composition?: SessionUsageComposition | null;
+}
+/** The eight buckets the Token stats card names, in legend order: the left
+ *  column first (prompt composition), then the right column. */
+export type SessionUsageBucket = 'systemPrompt' | 'user' | 'skill' | 'toolResult' | 'toolDef' | 'injected' | 'assistant' | 'output';
+/** One session tree's spend split by prompt content.
+ *
+ *  Every provider request replays the whole message list, so a bucket's number
+ *  is what that bucket contributed ACROSS ALL REQUESTS, not its size in the
+ *  window today. The replay figures are ESTIMATES (character counts, the same
+ *  estimator the context-window snapshot uses) because the provider only bills
+ *  a whole prompt; the billed total and its cache split are exact and drive
+ *  the headline and the cache-hit badge. */
+export interface SessionUsageComposition {
+    /** Estimated replay tokens per bucket, in legend order (kept at 0 when a
+     *  bucket never appeared so the card can keep a stable order). */
+    buckets: Array<{
+        key: SessionUsageBucket;
+        tokens: number;
+    }>;
+    /** Exact provider-billed total across the same requests (prompt including
+     *  cached tokens, plus output). */
+    billedTokens: number;
+    /** The same spend split into the four billing buckets, for the cache badge
+     *  and any future detail row. */
+    totals: SessionUsageTotals;
+    /** How many provider answers the accumulation covers (compaction included). */
+    requests: number;
 }
 /** The six buckets the context-window panel paints, in legend order. They are
  *  the buckets a reader thinks in: the harness prompt, the tool catalogue, the

package/package.json

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

package/src/client/ContextWindowPanel.module.css

@@ -3,14 +3,26 @@
  * prompt-cache split, a treemap of what occupies the window, and one legend row
  * naming the six buckets. Category colors live as custom properties on the tone
  * classes so the tile and the legend dot share one palette. */
-.panel { background:#fff; border:1px solid #e4e7ee; border-radius:12px; margin:0 0 16px; overflow:hidden; }
+.panel { background:#fff; border:1px solid #e4e7ee; border-radius:12px; margin:0 0 16px; overflow:hidden; container-type:inline-size; }
 .head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px 0; }
 .headCollapsed { padding-bottom:12px; }
-.toggle { display:flex; align-items:center; gap:6px; min-width:0; background:none; border:0; padding:0; font:inherit; color:#394354; cursor:pointer; }
+.toggle { display:flex; align-items:center; gap:6px; min-width:0; flex:none; background:none; border:0; padding:0; font:inherit; color:#394354; cursor:pointer; }
 .toggle h2 { font-size:13px; font-weight:600; margin:0; white-space:nowrap; }
 .chevron { flex:none; color:#99a1af; transition:transform .2s; }
 .chevronOpen { transform:rotate(90deg); }
-.headRight { display:flex; align-items:center; gap:8px; min-width:0; }
+.headLead { display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; }
+/* Folded digest: the used/window figures plus a strip whose whole length is the
+ * model's window — the tinted head is what the six buckets occupy, and the grey
+ * track behind it is the room still free. A collapsed panel answers "how full,
+ * with what, and how much is left" while it refreshes. */
+.digest { display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; }
+/* The figures never shrink — a truncated count is worse than no strip — so the
+ * strip absorbs the shortfall and steps aside once it can no longer be read. */
+.digestTotal { flex:none; white-space:nowrap; font-size:11px; color:#6f7889; font-variant-numeric:tabular-nums; }
+/* The track is the free room: `#eef0f4` shows through after the used share. */
+.digestBar { display:flex; flex:1 1 auto; min-width:0; max-width:320px; height:8px; border-radius:999px; overflow:hidden; background:#e8ebf1; }
+.digestSeg { height:100%; flex:none; background:var(--ctx); transition:width .35s; }
+.headRight { display:flex; align-items:center; gap:8px; min-width:0; flex:none; }
 .model { min-width:0; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:#8b93a4; }
 .livePill { 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; }
 .liveDot { width:5px; height:5px; border-radius:50%; background:#18a97b; box-shadow:0 0 0 2px #d6f2e5; }
@@ -71,7 +83,15 @@
   .map { height:220px; }
   .model { display:none; }
 }
+/* Container queries measure this card, not the page — the panel sits in a
+ * column, so below ~620px the strip is no longer readable and steps aside; the
+ * figures keep every number, and the tooltip still holds the split. */
+@container (max-width:620px) {
+  .digestBar { display:none; }
+  .model { display:none; }
+}
 @media (prefers-reduced-motion:reduce) {
   .chevron { transition:none; }
   .slot { transition:none; }
+  .digestSeg { transition:none; }
 }

package/src/client/ContextWindowPanel.tsx

@@ -157,14 +157,52 @@ export function ContextWindowPanel({ context, t, updatedAt }: {
       value: formatCompact(context.contextWindow),
       percent: String(percent ?? 0),
     })
+  // Folded, the body's figures are out of sight, so the header carries the
+  // digest itself: used / window · share, then a strip whose whole length is
+  // the model's window — the tinted part is what is in use, cut into the six
+  // buckets in legend order, and the grey tail is the room still free. So the
+  // bar reads as occupancy, not as a share of itself. Both read the same
+  // snapshot the body does, so every poll redraws them in place — the figures
+  // and the proportions stay live without the panel ever being opened.
+  const categoryTotal = totals.reduce((sum, row) => sum + row.tokens, 0)
+  // Without a reported window there is no "free room" to draw: the strip spans
+  // what is in use instead of inventing a denominator.
+  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', {
+      used: formatCompact(reading.usedTokens),
+      window: formatCompact(context.contextWindow),
+      percent: String(percent ?? 0),
+    })
   return <section className={css.panel} data-dsh-context-window>
     {/* Collapsed, the body's spacing is gone, so the header pads its own
         bottom — otherwise the folded row reads heavy on top. */}
     <header className={open ? css.head : `${css.head} ${css.headCollapsed}`}>
-      <button type="button" className={css.toggle} onClick={() => setOpen(!open)} aria-expanded={open} aria-controls="dsh-context-window-body">
-        <svg className={`${css.chevron} ${open ? css.chevronOpen : ''}`} width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="m4 2 4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
-        <h2>{t('contextTitle')}</h2>
-      </button>
+      <div className={css.headLead}>
+        <button type="button" className={css.toggle} onClick={() => setOpen(!open)} aria-expanded={open} aria-controls="dsh-context-window-body">
+          <svg className={`${css.chevron} ${open ? css.chevronOpen : ''}`} width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="m4 2 4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
+          <h2>{t('contextTitle')}</h2>
+        </button>
+        {!open && <div className={css.digest}>
+          <span className={css.digestTotal} title={`${t('contextUsed')} ${formatTokens(reading.usedTokens)} token · ${windowText}`}>
+            {digestText}
+          </span>
+          {categoryTotal > 0 && <span className={css.digestBar} role="img" aria-label={digestLabel} title={digestLabel}>
+            {totals.map(row => <span key={row.key} className={`${css.digestSeg} ${CATEGORY_TONE[row.key]}`}
+              style={{ width: `${row.tokens / categoryTotal * usedShare}%` }} />)}
+          </span>}
+        </div>}
+      </div>
       <div className={css.headRight}>
         {model !== '' && <span className={css.model} title={`${context.provider} / ${context.model}`}>{model}</span>}
         <span className={css.livePill}>

package/src/client/SessionUsageView.tsx

@@ -5,7 +5,7 @@ import { billedTotal, cacheHitPercentOf } from './session-usage-core.ts'
 import { formatCompact, formatTokens, normalizeModelName, decodeRateOf } from './format.ts'
 import { SESSION_USAGE_NS, type SessionUsageKey } from './session-usage-locales.ts'
 import { useSessionDetail } from './use-session-detail.ts'
-import { ContextWindowPanel } from './ContextWindowPanel.tsx'
+import { SessionUsageCards } from './UsageCards.tsx'
 import { ModelLogo } from './ModelLogo.tsx'
 import css from './SessionUsageView.module.css'
 
@@ -206,11 +206,11 @@ function Records({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
 export function SessionUsageContent({ detail, t, updatedAt }: { detail: SessionUsageDetail; t: T; updatedAt?: number | null }): JSX.Element {
   return <>
     <p className={css.scope}>{t('scope')}</p><Metrics detail={detail} t={t} /><Tables detail={detail} t={t} />
-    {/* The context window sits between the per-subagent/model tables and the
-        request records: it describes what the next request carries right now,
-        while everything above is spent-token history and everything below is
-        per-turn detail. */}
-    {detail.context ? <ContextWindowPanel context={detail.context} t={t} updatedAt={updatedAt} /> : null}
+    {/* The two live cards sit between the per-subagent/model tables and the
+        request records: the left one describes what the next request carries
+        right now, the right one what the whole session spent, while everything
+        above is spent-token history and everything below is per-turn detail. */}
+    <SessionUsageCards detail={detail} t={t} />
     <Records key={detail.sessionId} detail={detail} t={t} /><p className={css.note}>{t('note')}</p>
   </>
 }