Fix cache token pricing and dashboard display (#5)

Count cache creation separately from fresh input, support alternate OTel cache token attributes, and display bundled pricing fields correctly in the dashboard. Includes regression coverage for cache token normalization.

Author: dcolazin

dashboard-ui/app.js

@@ -238,7 +238,7 @@ async function renderPricing() {
       <button id="refresh-pricing" class="btn" type="button">Refresh pricing</button>
     </div>
     <div class="overflow-x-auto"><table class="table"><thead><tr><th>Model</th><th>Input</th><th>Output</th><th>Cache read</th><th>Cache write</th><th>Premium</th></tr></thead><tbody>
-      ${models.map(([model, row]) => `<tr><td class="font-medium">${escapeHtml(model)}</td><td>${pricingValue(row, ["input", "input_per_mtok", "input_cost_per_1m"])}</td><td>${pricingValue(row, ["output", "output_per_mtok", "output_cost_per_1m"])}</td><td>${pricingValue(row, ["cache_read", "cache_read_per_mtok"])}</td><td>${pricingValue(row, ["cache_write", "cache_write_per_mtok"])}</td><td>${pricingValue(row, ["premium_request", "premium_requests", "request"])} </td></tr>`).join("") || `<tr><td colspan="6">${emptyInline("Pricing data is not available yet.")}</td></tr>`}
+      ${models.map(([model, row]) => `<tr><td class="font-medium">${escapeHtml(model)}</td><td>${pricingValue(row, ["input"])}</td><td>${pricingValue(row, ["output"])}</td><td>${pricingValue(row, ["cached_input"])}</td><td>${pricingValue(row, ["cache_write"])}</td><td>—</td></tr>`).join("") || `<tr><td colspan="6">${emptyInline("Pricing data is not available yet.")}</td></tr>`}
     </tbody></table></div>
   </section>`;
   document.querySelector("#refresh-pricing").addEventListener("click", async (event) => {
@@ -359,8 +359,8 @@ function drawerContent(session, details) {
   <div class="mt-3 grid gap-3 sm:grid-cols-4">
     ${miniStat("Started", formatDate(session.started_at))}${miniStat("Last seen", formatDate(session.last_seen_at))}${miniStat("Requests", tok(session.premium_requests || calls.length))}${miniStat("Cache tokens", tok(totalCache))}
   </div>
-  <section class="mt-6"><h3 class="text-sm font-semibold">LLM calls</h3><div class="mt-3 overflow-x-auto"><table class="table"><thead><tr><th>Time</th><th>Model</th><th>Cost</th><th>Input</th><th>Output</th><th>Duration</th></tr></thead><tbody>
-    ${calls.map((call) => `<tr><td class="whitespace-nowrap text-muted-foreground">${formatDate(call.ts || call.started_at || call.timestamp || call.time)}</td><td>${escapeHtml(call.model || session.model || "unknown")}</td><td>${money(call.usd_cost)}</td><td>${tok(call.input_tokens)}</td><td>${tok(call.output_tokens)}</td><td>${tok(call.duration_ms || call.api_duration_ms || 0)} ms</td></tr>`).join("") || `<tr><td colspan="6">${emptyInline("No per-call records were returned for this session.")}</td></tr>`}
+  <section class="mt-6"><h3 class="text-sm font-semibold">LLM calls</h3><div class="mt-3 overflow-x-auto"><table class="table"><thead><tr><th>Time</th><th>Model</th><th>Cost</th><th>Fresh Input</th><th>Cache Read</th><th>Cache Write</th><th>Output</th><th>Duration</th></tr></thead><tbody>
+    ${calls.map((call) => `<tr><td class="whitespace-nowrap text-muted-foreground">${formatDate(call.ts || call.started_at || call.timestamp || call.time)}</td><td>${escapeHtml(call.model || session.model || "unknown")}</td><td>${money(call.usd_cost)}</td><td>${tok(call.input_tokens)}</td><td>${tok(call.cache_read || 0)}</td><td>${tok(call.cache_creation || 0)}</td><td>${tok(call.output_tokens)}</td><td>${tok(call.duration_ms || call.api_duration_ms || 0)} ms</td></tr>`).join("") || `<tr><td colspan="8">${emptyInline("No per-call records were returned for this session.")}</td></tr>`}
   </tbody></table></div></section>`;
 }
 

src/otel/parser.ts

@@ -115,12 +115,12 @@ export function normalizeSpan(record: unknown): NormalizedCall | null {
   if (!model) return null;
 
   const rawInput = num(a["gen_ai.usage.input_tokens"], a.input_tokens, record.input_tokens);
-  const cacheRead = num(a["gen_ai.usage.cache_read.input_tokens"], a.cache_read, record.cache_read);
-  const cacheCreation = num(a["gen_ai.usage.cache_creation.input_tokens"], a["gen_ai.usage.cache_write.input_tokens"], a.cache_creation, a.cache_write, record.cache_creation, record.cache_write);
+  const cacheRead = num(a["gen_ai.usage.cache_read_input_tokens"], a["gen_ai.usage.cache_read.input_tokens"], a["gen_ai.usage.cache_read"], a.cache_read_tokens, a["cache_read_input_tokens"], a.cache_read, record.cache_read_tokens, record.cache_read);
+  const cacheCreation = num(a["gen_ai.usage.cache_creation_input_tokens"], a["gen_ai.usage.cache_creation.input_tokens"], a["gen_ai.usage.cache_creation"], a["gen_ai.usage.cache_write_input_tokens"], a["gen_ai.usage.cache_write.input_tokens"], a["gen_ai.usage.cache_write"], a.cache_creation_tokens, a["cache_write_input_tokens"], a.cache_creation, a.cache_write, record.cache_creation_tokens, record.cache_creation, record.cache_write);
   const output = num(a["gen_ai.usage.output_tokens"], a.output_tokens, record.output_tokens);
   const reasoning = num(a["gen_ai.usage.reasoning.output_tokens"], a["gen_ai.usage.reasoning_tokens"], a.reasoning, record.reasoning);
-  // OTel gen_ai.usage.input_tokens includes cache reads; keep only fresh input for downstream aggregations.
-  const freshInput = Math.max(rawInput - cacheRead, 0);
+  // Total input includes both cache categories; downstream aggregations store only fresh input here.
+  const freshInput = Math.max(rawInput - cacheRead - cacheCreation, 0);
 
   const start = timeFromTuple(record.startTime) ?? timeFromNano(record.startTimeUnixNano) ?? isoTime(record.ts) ?? isoTime(a.ts) ?? timeFromTuple(record.hrTime);
   const end = timeFromTuple(record.endTime) ?? timeFromNano(record.endTimeUnixNano);

tests-ts/otel-parser.test.ts

@@ -13,7 +13,7 @@ describe("OTel parser", () => {
 
   it("normalizes a Format-A-ish span fixture with fresh input", () => {
     const call = normalizeSpan(fixture);
-    expect(call).toMatchObject({ session_id: "sess-test-123", model: "claude-opus-4.7", input_tokens: 800, output_tokens: 100, cache_read: 200, cache_creation: 100, reasoning: 20, duration_ms: 321, source: "cli-span" });
+    expect(call).toMatchObject({ session_id: "sess-test-123", model: "claude-opus-4.7", input_tokens: 700, output_tokens: 100, cache_read: 200, cache_creation: 100, reasoning: 20, duration_ms: 321, source: "cli-span" });
     expect(call?.dedup_key).toBe("span-1");
     expect(call?.ts).toBe("2026-05-13T12:00:00.000Z");
   });
@@ -30,6 +30,22 @@ describe("OTel parser", () => {
     expect(call).toMatchObject({ dedup_key: "resp-1", session_id: "sess-b", model: "gpt-5-mini", input_tokens: 30, output_tokens: 7, cache_read: 20, duration_ms: 0, source: "chat-logrecord" });
   });
 
+  it("normalizes alternate cache token attribute names", () => {
+    const call = normalizeSpan({
+      traceId: "t2",
+      spanId: "s2",
+      attributes: {
+        "gen_ai.operation.name": "chat",
+        "gen_ai.request.model": "claude-sonnet-4.6",
+        "gen_ai.usage.input_tokens": 1_000,
+        "gen_ai.usage.cache_read_input_tokens": 250,
+        "gen_ai.usage.cache_write_input_tokens": 150,
+        "gen_ai.usage.output_tokens": 50,
+      },
+    });
+    expect(call).toMatchObject({ input_tokens: 600, cache_read: 250, cache_creation: 150, output_tokens: 50 });
+  });
+
   it("returns null for metric records", () => {
     expect(normalizeSpan({ scopeMetrics: [], attributes: { "gen_ai.operation.name": "chat" } })).toBeNull();
   });