2 files changed, 66 insertions, 5 deletions
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 },
diff --git a/src/features/chat/ui/ChatView.svelte b/src/features/chat/ui/ChatView.svelte
index ba6e961..3d1421d 100644
--- a/src/features/chat/ui/ChatView.svelte
+++ b/src/features/chat/ui/ChatView.svelte
@@ -1,6 +1,18 @@
 <script lang="ts">
 	import { groupRenderedChunks, type RenderedChunk } from "../index";
-	import { interleaveTurnMetrics, viewStepMetrics, viewTurnMetrics, type TurnMetricsEntry } from "../../../core/metrics";
+	import {
+		interleaveTurnMetrics,
+		viewCacheRate,
+		viewStepMetrics,
+		viewTurnMetrics,
+		type TurnMetricsEntry,
+	} from "../../../core/metrics";
+
+	const badgeClass = {
+		success: "badge-success",
+		warning: "badge-warning",
+		error: "badge-error",
+	} as const;
 
 	let {
 		chunks,
@@ -132,12 +144,26 @@
 			</div>
 		{:else if row.kind === "turn-metrics"}
 			{@const turnView = viewTurnMetrics(row.turn)}
+			{@const lastCache = viewCacheRate(row.turn.usage)}
+			{@const chatCache = viewCacheRate(row.cumulativeUsage)}
 			<div class="chat chat-start">
 				<div class="chat-bubble w-full max-w-5xl bg-transparent p-0">
-					<div class="text-xs opacity-70">
-						turn · {turnView.tokensLabel} ({turnView.breakdown})
-						{#if turnView.tps} · {turnView.tps}{/if}
-						{#if turnView.duration} · {turnView.duration}{/if}
+					<div class="flex flex-col gap-1 text-xs">
+						<div class="opacity-70">
+							turn · {turnView.tokensLabel} ({turnView.breakdown})
+							{#if turnView.tps} · {turnView.tps}{/if}
+							{#if turnView.duration} · {turnView.duration}{/if}
+						</div>
+						<div class="flex flex-wrap items-center gap-x-3 gap-y-1">
+							<span class="flex items-center gap-1">
+								<span class="opacity-70">Last turn:</span>
+								<span class="badge badge-sm {badgeClass[lastCache.level]}">{lastCache.pct}%</span>
+							</span>
+							<span class="flex items-center gap-1">
+								<span class="opacity-70">Chat Total:</span>
+								<span class="badge badge-sm {badgeClass[chatCache.level]}">{chatCache.pct}%</span>
+							</span>
+						</div>
 					</div>
 				</div>
 			</div>