From a77be28a95dd1049e59eb577e3a55239c98cfe07 Mon Sep 17 00:00:00 2001
From: Chris Estreich <cestreich@gmail.com>
Date: Wed, 23 Apr 2025 11:16:20 -0700
Subject: [PATCH] Use formatLargeNumber on token counts in task header (#2883)

* Format large numbers

* Add changeset
---
 .changeset/shiny-wolves-attend.md             | 5 +++++
 webview-ui/src/components/chat/TaskHeader.tsx | 9 +++++----
 2 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/shiny-wolves-attend.md

diff --git a/.changeset/shiny-wolves-attend.md b/.changeset/shiny-wolves-attend.md
new file mode 100644
index 0000000000..61b2bdc09b
--- /dev/null
+++ b/.changeset/shiny-wolves-attend.md
@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Use formatLargeNumber on token counts in task header
diff --git a/webview-ui/src/components/chat/TaskHeader.tsx b/webview-ui/src/components/chat/TaskHeader.tsx
index 531ec908f0..885be54265 100644
--- a/webview-ui/src/components/chat/TaskHeader.tsx
+++ b/webview-ui/src/components/chat/TaskHeader.tsx
@@ -7,6 +7,7 @@ import { CloudUpload, CloudDownload } from "lucide-react"
 import { ClineMessage } from "@roo/shared/ExtensionMessage"
 
 import { getMaxTokensForModel } from "@/utils/model-utils"
+import { formatLargeNumber } from "@/utils/format"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui"
 import { useExtensionState } from "@src/context/ExtensionStateContext"
@@ -141,13 +142,13 @@ const TaskHeader = ({
 									{typeof tokensIn === "number" && tokensIn > 0 && (
 										<span className="flex items-center gap-0.5">
 											<i className="codicon codicon-arrow-up text-xs font-bold" />
-											{tokensIn}
+											{formatLargeNumber(tokensIn)}
 										</span>
 									)}
 									{typeof tokensOut === "number" && tokensOut > 0 && (
 										<span className="flex items-center gap-0.5">
 											<i className="codicon codicon-arrow-down text-xs font-bold" />
-											{tokensOut}
+											{formatLargeNumber(tokensOut)}
 										</span>
 									)}
 								</div>
@@ -160,13 +161,13 @@ const TaskHeader = ({
 									{typeof cacheWrites === "number" && cacheWrites > 0 && (
 										<span className="flex items-center gap-0.5">
 											<CloudUpload size={16} />
-											{cacheWrites}
+											{formatLargeNumber(cacheWrites)}
 										</span>
 									)}
 									{typeof cacheReads === "number" && cacheReads > 0 && (
 										<span className="flex items-center gap-0.5">
 											<CloudDownload size={16} />
-											{cacheReads}
+											{formatLargeNumber(cacheReads)}
 										</span>
 									)}
 								</div>