dsh-token-total 1.0.5 → 1.0.7

package/lib/index.js

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

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

@@ -0,0 +1,18 @@
+export interface ModelLogoProps {
+    /** Raw model id; may itself be a "provider/model" ref. */
+    model: string;
+    /** Resolved model display name (the by-model row's label) — matched with
+     *  the raw id, so an opaque route id beside a brandful name still brands. */
+    name?: string;
+    /** Provider route id — a secondary match signal for opaque model ids. */
+    provider?: string;
+    /** Resolved provider display names (the by-model row's split), matched last. */
+    providers?: ReadonlyArray<string>;
+    /** Rendered square size; the record rows read at 13px. */
+    size?: number;
+    className?: string;
+}
+/** One model's brand logo inline. The markup is a bundled constant (never
+ *  request data) rendered as-is so each brand keeps its own gradients,
+ *  circles and multi-path fills; ids inside stay unique across brands. */
+export declare function ModelLogo({ model, name, provider, providers, size, className }: ModelLogoProps): JSX.Element;

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

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

package/lib/types/client/model-logos-core.d.ts

@@ -0,0 +1,11 @@
+/** Brand ids in match order — every id here must ship markup. */
+export declare const MODEL_LOGO_BRANDS: ReadonlyArray<string>;
+/** Resolve the brand id for one usage record. The model's own naming (raw
+ *  model id plus its resolved display name) decides the brand when it can;
+ *  the provider fields (route id and provider display names) are the fallback
+ *  for opaque model ids, so a Llama served through a vertex/google route keeps
+ *  the Llama mark. Empty/undefined parts are ignored; null when no bundled
+ *  brand matches. */
+export declare function resolveModelLogo(provider: string | null | undefined, model: string | null | undefined, name?: string | null, providers?: ReadonlyArray<string>): string | null;
+/** Inner SVG markup of a brand's logo, or undefined for an unknown id. */
+export declare function modelLogoMarkup(id: string | null): string | undefined;

package/lib/types/client/model-logos-data.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Official per-brand logos for the usage panel: the inner markup of each
+ * brand's 24x24 SVG, extracted verbatim from @lobehub/icons-static-svg
+ * (MIT). Regenerate from .tmp/gen-logos.mjs after refreshing .tmp/logos/;
+ * brand colors are baked in, so no fill follows currentColor. Brand
+ * matching lives in model-logos-core.ts.
+ */
+export declare const MODEL_LOGOS: Readonly<Record<string, string>>;

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

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

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

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

package/lib/types/shared.d.ts

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

package/lib/types/wire.d.ts

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

package/package.json

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

package/src/client/ModelLogo.tsx

@@ -0,0 +1,29 @@
+import { modelLogoMarkup, resolveModelLogo } from './model-logos-core.ts'
+
+/** Neutral glyph for models no bundled brand matches: a soft four-point AI
+ *  spark in the panel's muted gray, so an unknown model reads as "unbranded"
+ *  rather than as some other vendor. */
+const FALLBACK = '<path d="M12 1.6l2.14 5.96a2 2 0 0 0 1.22 1.22l5.96 2.14-5.96 2.14a2 2 0 0 0-1.22 1.22L12 20.24l-2.14-5.96a2 2 0 0 0-1.22-1.22L2.68 10.92l5.96-2.14a2 2 0 0 0 1.22-1.22L12 1.6z" fill="#9aa3b3"/>'
+
+export interface ModelLogoProps {
+  /** Raw model id; may itself be a "provider/model" ref. */
+  model: string
+  /** Resolved model display name (the by-model row's label) — matched with
+   *  the raw id, so an opaque route id beside a brandful name still brands. */
+  name?: string
+  /** Provider route id — a secondary match signal for opaque model ids. */
+  provider?: string
+  /** Resolved provider display names (the by-model row's split), matched last. */
+  providers?: ReadonlyArray<string>
+  /** Rendered square size; the record rows read at 13px. */
+  size?: number
+  className?: string
+}
+
+/** One model's brand logo inline. The markup is a bundled constant (never
+ *  request data) rendered as-is so each brand keeps its own gradients,
+ *  circles and multi-path fills; ids inside stay unique across brands. */
+export function ModelLogo({ model, name, provider, providers, size = 13, className }: ModelLogoProps): JSX.Element {
+  const markup = modelLogoMarkup(resolveModelLogo(provider, model, name, providers)) ?? FALLBACK
+  return <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" className={className} dangerouslySetInnerHTML={{ __html: markup }} />
+}

package/src/client/SessionUsageView.module.css

@@ -5,6 +5,15 @@
 .scroll { height:100%; min-height:0; overflow-y:auto; background:#ffffff; color:#252936; color-scheme:light; container-type:inline-size; }
 .page { box-sizing:border-box; width:100%; max-width:1160px; margin:0 auto; padding:24px 26px 32px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:13px; }
 .page * { box-sizing:border-box; }
+/* Freshness header: live badge + last-read stamp on the left, manual refresh
+ * pinned to the right edge. */
+.head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
+.headStatus { display:flex; align-items:center; gap:7px; min-width:0; font-size:11px; color:#8790a3; }
+.liveDot { width:6px; height:6px; border-radius:50%; background:#18a97b; box-shadow:0 0 0 3px #e5f6f0; flex-shrink:0; }
+.asOf { color:#9aa3b3; font-variant-numeric:tabular-nums; white-space:nowrap; }
+.refresh { display:inline-flex; align-items:center; gap:5px; flex:none; color:#6f7a8d; background:#fff; border:1px solid #e4e7ee; border-radius:8px; padding:5px 11px; font:inherit; font-size:11px; cursor:pointer; }
+.refresh:hover { color:#279cb6; border-color:#cbd3e0; }
+.refresh:disabled { opacity:.55; cursor:default; }
 .scope { color:#8790a3; font-size:11px; margin:0 0 14px; }
 .stats { display:grid; gap:12px; margin-bottom:18px; }
 .statRow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@@ -40,6 +49,10 @@
 .modelRequests { width:11%; }
 .modelHit { width:16%; }
 .ellipsis { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#394354; }
+/* By-model rows lead with the model's brand logo; the name keeps truncating
+ * inside the flexible remainder of the cell. */
+.modelNameCell { display:flex; align-items:center; gap:6px; min-width:0; }
+.modelNameCell .ellipsis { flex:1; min-width:0; }
 /* Gray provider label under a model name shown by several rows (同名模型). */
 .modelProvider { display:block; margin-top:2px; font-size:10px; color:#939aaa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
 .number { font-variant-numeric:tabular-nums; }
@@ -53,7 +66,7 @@
 .empty { margin:0; padding:28px 18px; color:#9aa2b1; font-size:12px; text-align:center; }
 .action { color:#818b9e; background:none; border:0; padding:3px 0; font:inherit; font-size:11px; cursor:pointer; }
 .action:hover { color:#279cb6; }
-.action:focus-visible,.turnHead:focus-visible { outline:2px solid #2ab1c6; outline-offset:-2px; }
+.action:focus-visible,.turnHead:focus-visible,.refresh:focus-visible { outline:2px solid #2ab1c6; outline-offset:-2px; }
 .turnList { padding:0 14px 14px; }
 .turn { margin-top:10px; border:1px solid #e7eaf0; border-radius:9px; background:#fff; overflow:hidden; }
 .turnHead { display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 14px; width:100%; text-align:left; background:#f8f9fc; border:0; cursor:pointer; color:#616c7f; font:inherit; font-size:11px; }
@@ -77,9 +90,10 @@
 .turnRequest:first-child { border-top:0; }
 .turnRequestHead { display:flex; align-items:center; gap:8px; font-size:11px; color:#616c7f; min-width:0; }
 .requestTime { color:#9aa3b3; font-variant-numeric:tabular-nums; flex-shrink:0; }
-.statusDot { width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }
-.routeDot { width:6px; height:6px; border-radius:50%; background:#21a17b; flex-shrink:0; }
-.whale { color:#4d6bfe; flex-shrink:0; }
+.statusDot { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
+/* Per-model brand logo: colors are baked into each logo's markup, only the
+ * layout contract lives here. Unknown models get the neutral gray fallback. */
+.modelLogo { flex-shrink:0; }
 .recordModel { min-width:0; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#394354; font-weight:500; }
 .routeText { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#8b93a4; flex-shrink:1; }
 .effort { white-space:nowrap; color:#9aa3b3; background:#f1f3f7; border-radius:5px; padding:1px 6px; }

package/src/client/SessionUsageView.tsx

@@ -2,9 +2,10 @@ import { useState } from 'react'
 import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
 import type { SessionUsageDetail, SessionUsageTotals } from '../wire.ts'
 import { billedTotal, cacheHitPercentOf } from './session-usage-core.ts'
-import { formatCompact, formatTokens, normalizeModelName } from './format.ts'
+import { formatCompact, formatTokens, normalizeModelName, decodeRateOf } from './format.ts'
 import { SESSION_USAGE_NS, type SessionUsageKey } from './session-usage-locales.ts'
 import { useSessionDetail } from './use-session-detail.ts'
+import { ModelLogo } from './ModelLogo.tsx'
 import css from './SessionUsageView.module.css'
 
 type T = (key: SessionUsageKey) => string
@@ -19,7 +20,6 @@ const tokShort = (n: number): string => n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` :
 const pctInt = (rate: number | null): string => rate === null ? '—' : `${Math.round(rate)}%`
 const speed = (n: number | null): string => n !== null && Number.isFinite(n) ? `${Math.round(n)} tok/s` : '—'
 const clock = (ms: number): string => new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
-const whale = 'M8 39.5C13.5 27.6 26.8 19.4 42.5 19.1c-1.6 2.4-2.3 5-2 7.9-5.6-1.7-11.7-.4-16.2 3.4 4.7 1.1 8.4 4.3 10.2 8.7 1.3-.4 2.7-1 4-1.9.4 2.1-.2 4.3-1.6 5.9-7.7.6-15.5-1.6-20.7-6.6-.7 1.9-.9 3.9-.6 5.9-3.1-1.2-5.6-3-7.6-2.9z'
 const modelShort = (ref: string): string => ref.includes('/') ? ref.slice(ref.indexOf('/') + 1) : ref
 const zero = (): SessionUsageTotals => ({ uncachedInputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0 })
 const sum = (rows: Row[]): SessionUsageTotals => rows.reduce((acc, r) => ({
@@ -108,7 +108,7 @@ function Tables({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Elemen
           const providers = row.providers ?? []
           const shared = (nameCounts.get(normalizeModelName(name)) ?? 0) > 1
           return <tr key={row.model}>
-            <td><span className={css.ellipsis} title={row.model}>{name}</span>
+            <td><span className={css.modelNameCell}><ModelLogo model={row.model} name={row.name} providers={row.providers} className={css.modelLogo} /><span className={css.ellipsis} title={row.model}>{name}</span></span>
               {shared && providers.length > 0 ? <small className={css.modelProvider} title={providers.join(' / ')}>{providers.join(' / ')}</small> : null}
             </td>
             <td>{formatTokens(row.requests)}</td><td><Token n={row.totals.uncachedInputTokens} /></td><td><Token n={row.totals.outputTokens} /></td><td><Token n={row.totals.cacheReadTokens} /></td><td><Token n={row.totals.cacheWriteTokens} /></td><td><Hit totals={row.totals} /></td>
@@ -156,8 +156,11 @@ function Records({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
       const totals = sum(group.rows)
       const billed = billedTotal(totals)
       const running = group.rows.filter(row => row.status === 'running').length
-      const rates = group.rows.map(row => row.tokensPerSecond).filter((n): n is number => n !== null)
-      const avgRate = rates.length ? Math.round(rates.reduce((a, b) => a + b, 0) / rates.length) : null
+      // Same decode based rate as the card and the composer bottom bar: the
+      // turn's output tokens over its summed decode windows, never the mean of
+      // independently rounded per-request rates.
+      const rate = decodeRateOf(group.rows)
+      const avgRate = rate === null ? null : Math.round(rate)
       return <article key={group.key} className={css.turn}>
         <button type="button" className={css.turnHead} onClick={() => toggle(group.key)} aria-expanded={open} aria-controls={`usage-turn-${encodeURIComponent(group.key)}`}>
           <svg className={`${css.chevron} ${open ? css.rotated : ''}`} width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="m4 2 4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
@@ -172,7 +175,9 @@ function Records({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
           </span>
         </button>
         <div id={`usage-turn-${encodeURIComponent(group.key)}`} className={css.turnBody} hidden={!open}>
-          {group.rows.map(record => {
+          {/* Requests arrive in event order, so every turn lists its newest
+              request first; turn groups themselves keep chronological order. */}
+          {group.rows.slice().reverse().map(record => {
             const duration = record.finishedAt !== null ? record.finishedAt - record.startedAt : null
             const billed = billedTotal(record.totals)
             const hit = cacheHitPercentOf(record.totals)
@@ -187,11 +192,10 @@ function Records({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
               <span className={css.requestTime}>{clock(record.startedAt)}</span>
               <div className={css.turnRequestHead}>
                 <span className={`${css.statusDot} ${record.status === 'running' ? css.live : record.status === 'failed' ? css.bad : record.status === 'interrupted' ? css.muted : css.good}`} />
-                <span className={css.recordModel} title={`${record.provider} / ${record.model}`}><svg className={css.whale} width="13" height="13" viewBox="0 0 64 64" aria-hidden="true"><path d={whale} fill="currentColor" /></svg>{record.model || '—'}</span>
-                <span className={css.routeDot} />
+                <span className={css.recordModel} title={`${record.provider} / ${record.model}`}><ModelLogo provider={record.provider} model={record.model} className={css.modelLogo} />{record.model || '—'}</span>
                 <span className={css.routeText} title={record.provider}>{providerNames.get(record.provider) || record.provider || '—'} · {modelShort(record.model) || '—'}</span>
-                {statusText !== '' && <span className={record.status === 'running' ? css.live : record.status === 'failed' ? css.bad : css.muted}>{statusText}</span>}
                 {record.effort ? <span className={css.effort}>· {record.effort}</span> : null}
+                {statusText !== '' && <span className={record.status === 'running' ? css.live : record.status === 'failed' ? css.bad : css.muted}>{statusText}</span>}
               </div>
               {record.finishedAt !== null && <div className={css.recordMeta}>{meta.map((item, i) => <span key={i} title={item.title}>{i > 0 ? ' · ' : ''}{item.text}</span>)}</div>}
             </div>
@@ -208,10 +212,24 @@ export function SessionUsageContent({ detail, t }: { detail: SessionUsageDetail;
 }
 
 export function SessionUsageView({ sessionId, t }: SessionUsageViewProps): JSX.Element {
-  const { detail, loading, error, retry } = useSessionDetail(sessionId)
+  const { detail, loading, error, refresh, updatedAt } = useSessionDetail(sessionId)
   return <div className={css.scroll} data-dsh-session-usage><div className={css.page}>
+    {/* Freshness header: the view polls continuously, so it always shows a live
+        badge with the time of the last successful read, plus a manual refresh
+        that refetches immediately. */}
+    <header className={css.head}>
+      <span className={css.headStatus}>
+        <span className={css.liveDot} aria-hidden="true" />
+        <span>{t('live')}</span>
+        {updatedAt !== null && <span className={css.asOf}>{t('asOf')} {clock(updatedAt)}</span>}
+      </span>
+      <button type="button" className={css.refresh} onClick={refresh} disabled={loading}>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /></svg>
+        {t('refresh')}
+      </button>
+    </header>
     {loading && <p className={css.empty} role="status">{t('loading')}</p>}
-    {error && <div className={css.error} role="status">{t('failedLoad')}<button type="button" className={css.action} onClick={retry}>{t('retry')}</button></div>}
+    {error && <div className={css.error} role="status">{t('failedLoad')}<button type="button" className={css.action} onClick={refresh}>{t('retry')}</button></div>}
     {detail && <SessionUsageContent detail={detail} t={t} />}
   </div></div>
 }

package/src/client/format.ts

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