feat: add usage stats key renderer

tests/render.test.ts

@@ -1,6 +1,6 @@
 import assert from "node:assert/strict";
 import { test } from "node:test";
-import { renderGpuGraph, renderInflight, svgDataUrl } from "../src/lib/render";
+import { renderGpuGraph, renderInflight, renderUsage, svgDataUrl, formatCompact } from "../src/lib/render";
 
 test("svgDataUrl wraps an SVG as a base64 data URL", () => {
   const url = svgDataUrl("<svg></svg>");
@@ -99,3 +99,37 @@ test("renderGpuGraph: single-point history avoids divide-by-zero", () => {
   const svg = renderGpuGraph({ gpuName: "ALL GPUS", metric: "util_percent", value: 50, history: [50], offline: false });
   assert.match(svg, /<svg/);
 });
+
+test("formatCompact renders integers, k, and M", () => {
+  assert.equal(formatCompact(0), "0");
+  assert.equal(formatCompact(999), "999");
+  assert.equal(formatCompact(52100), "52.1k");
+  assert.equal(formatCompact(1200000), "1.2M");
+});
+
+test("renderUsage shows the primary stat big and the rest small", () => {
+  const svg = renderUsage({
+    modelName: "DeepSeek-V4-Flash-0731",
+    stats: { totalRequests: 1950, totalInputTokens: 312177540, totalOutputTokens: 889193, genP95: 378.86 },
+    primaryStat: "gen_p95",
+    offline: false,
+  });
+  assert.match(svg, />379</);
+  assert.match(svg, /REQ/);
+  assert.match(svg, /IN/);
+  assert.match(svg, /OUT/);
+  assert.match(svg, /312.2M/);
+  assert.match(svg, /#10131a/);
+});
+
+test("renderUsage renders -- when stats are unknown and OFFLINE when offline", () => {
+  const none = renderUsage({ modelName: "A", stats: undefined, primaryStat: "requests", offline: false });
+  assert.match(none, />--</);
+  const off = renderUsage({ modelName: "A", stats: undefined, primaryStat: "requests", offline: true });
+  assert.match(off, /OFFLINE/);
+});
+
+test("renderUsage labels the aggregate view ALL MODELS", () => {
+  const svg = renderUsage({ modelName: "all", stats: { totalRequests: 1, totalInputTokens: 1, totalOutputTokens: 1, genP95: 1 }, primaryStat: "requests", offline: false });
+  assert.match(svg, /ALL MODELS/);
+});