From 5d47c500b2a313c9f09a6d8564007a0426de5f22 Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Mon, 22 Jun 2026 11:47:34 +0900
Subject: feat(metrics): show turn number in metrics bubble (turn N · ...)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The turn number comes from the entry's position in the metrics array
(1-based), which is correct regardless of trimming since stepId matching
aligns segments to the right entry. Now displays 'turn 3 · 12k tok' instead
of just 'turn · 12k tok'.
---
 src/features/chat/ui.test.ts         | 8 ++++----
 src/features/chat/ui/ChatView.svelte | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/features/chat')

diff --git a/src/features/chat/ui.test.ts b/src/features/chat/ui.test.ts
index 94db0ae..2891e5b 100644
--- a/src/features/chat/ui.test.ts
+++ b/src/features/chat/ui.test.ts
@@ -374,7 +374,7 @@ describe("ChatView", () => {
 		expect(screen.getByText("Hello!")).toBeInTheDocument();
 		expect(screen.getByText(/step 1/)).toBeInTheDocument();
 		expect(screen.getAllByText(/150 tok/)).toHaveLength(2);
-		expect(screen.getByText(/turn · 150 tok \(100 in \/ 50 out\)/)).toBeInTheDocument();
+		expect(screen.getByText(/turn 1 · 150 tok \(100 in \/ 50 out\)/)).toBeInTheDocument();
 		expect(screen.getByText(/1\.2s/)).toBeInTheDocument();
 	});
 
@@ -478,11 +478,11 @@ describe("ChatView", () => {
 
 		// Both step-metrics and turn-metrics render
 		expect(screen.getByText(/step 1/)).toBeInTheDocument();
-		expect(screen.getByText(/turn · 100 tok/)).toBeInTheDocument();
+		expect(screen.getByText(/turn 1 · 100 tok/)).toBeInTheDocument();
 
 		// They are in separate elements (different rows)
 		const stepEl = screen.getByText(/step 1 · 100 tok/).closest("div");
-		const turnEl = screen.getByText(/turn · 100 tok/).closest("div");
+		const turnEl = screen.getByText(/turn 1 · 100 tok/).closest("div");
 		expect(stepEl).not.toBe(turnEl);
 	});
 
@@ -556,7 +556,7 @@ describe("ChatView", () => {
 		expect(screen.getByText(/step 1/)).toBeInTheDocument();
 		expect(screen.getAllByText(/15 tok/)).toHaveLength(2);
 		// Turn metrics rendered
-		expect(screen.getByText(/turn · 15 tok \(10 in \/ 5 out\)/)).toBeInTheDocument();
+		expect(screen.getByText(/turn 1 · 15 tok \(10 in \/ 5 out\)/)).toBeInTheDocument();
 		// No "null" or "undefined" in the DOM
 		expect(screen.queryByText("null")).toBeNull();
 		expect(screen.queryByText("undefined")).toBeNull();
diff --git a/src/features/chat/ui/ChatView.svelte b/src/features/chat/ui/ChatView.svelte
index d1d7709..2a17ac7 100644
--- a/src/features/chat/ui/ChatView.svelte
+++ b/src/features/chat/ui/ChatView.svelte
@@ -185,7 +185,7 @@
 				</div>
 			</div>
 		{:else if row.kind === "turn-metrics"}
-			{@const turnView = viewTurnMetrics(row.turn)}
+			{@const turnView = viewTurnMetrics(row.turn, row.turnNumber)}
 			{@const lastCache = viewCacheRate(row.turn.usage)}
 			{@const chatCache = viewCacheRate(row.cumulativeUsage)}
 			{@const retention = viewExpectedCache(row.turn.usage, row.prevTurnUsage)}
@@ -193,7 +193,7 @@
 				<div class="chat-bubble w-full max-w-5xl bg-transparent p-0">
 					<div class="flex flex-col gap-1 text-xs">
 						<div class="opacity-70">
-							turn · {turnView.tokensLabel} ({turnView.breakdown})
+							{turnView.label} · {turnView.tokensLabel} ({turnView.breakdown})
 							{#if turnView.tps} · {turnView.tps}{/if}
 							{#if turnView.duration} · {turnView.duration}{/if}
 						</div>
-- 
cgit v1.2.3