From 89ca80bac1e143a4ec5ba6e2e1d4998acce2553c Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Wed, 10 Jun 2026 10:34:37 +0900
Subject: feat(metrics): inline cache hit-rate badges (last turn + chat total)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Derive cache hit rate (cacheReadTokens / inputTokens) from data already
folded in core/metrics — no backend/contract change.

- core/metrics: computeCachePct + viewCacheRate (pct + success/warning/error
  level by 66/33 thresholds + isHit); thread a running cumulativeUsage onto
  each finalized turn-metrics row for the conversation total.
- ChatView: render two labelled, colour-coded percentage badges in the
  turn-total bubble — "Last turn:" (that turn) and "Chat Total:" (cumulative).
- Honour backend caveats: absent cache fields -> 0, divide-by-zero guarded,
  a legitimate 0% renders plainly (not "no data").
---
 src/features/chat/ui.test.ts | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

(limited to 'src/features/chat/ui.test.ts')

diff --git a/src/features/chat/ui.test.ts b/src/features/chat/ui.test.ts
index 4abf717..ddec388 100644
--- a/src/features/chat/ui.test.ts
+++ b/src/features/chat/ui.test.ts
@@ -326,6 +326,41 @@ describe("ChatView", () => {
 		expect(screen.getByText(/1\.2s/)).toBeInTheDocument();
 	});
 
+	it("renders cache hit-rate badges (Last turn + Chat Total) coloured by level", () => {
+		const chunks: RenderedChunk[] = [
+			{ seq: 1, role: "user", chunk: { type: "text", text: "Hi" }, provisional: false },
+			{
+				seq: 2,
+				role: "assistant",
+				chunk: { type: "text", text: "Hello!" },
+				provisional: false,
+			},
+		];
+		const turnMetrics: TurnMetricsEntry[] = [
+			{
+				turnId: "t1",
+				steps: [],
+				total: {
+					turnId: "t1",
+					usage: { inputTokens: 100, outputTokens: 10, cacheReadTokens: 93 },
+					steps: [],
+				},
+			},
+		];
+
+		const { container } = render(ChatView, { props: { chunks, turnMetrics } });
+
+		expect(screen.getByText("Last turn:")).toBeInTheDocument();
+		expect(screen.getByText("Chat Total:")).toBeInTheDocument();
+		// single turn ⇒ both the turn rate and the cumulative are 93% ⇒ success badge
+		const badges = container.querySelectorAll(".badge");
+		expect(badges).toHaveLength(2);
+		for (const b of badges) {
+			expect(b.textContent).toBe("93%");
+			expect(b.classList.contains("badge-success")).toBe(true);
+		}
+	});
+
 	it("renders step-metrics inline after tool group", () => {
 		const chunks: RenderedChunk[] = [
 			{ seq: 1, role: "user", chunk: { type: "text", text: "Run it" }, provisional: false },
-- 
cgit v1.2.3