From e1ab10f24e34b92a57f467057683cf019f024676 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Wed, 2 Oct 2024 20:15:09 -0400
Subject: [PATCH] Format large numbers to use k or m

---
 webview-ui/src/components/chat/TaskHeader.tsx        |  9 +++++----
 webview-ui/src/components/history/HistoryPreview.tsx |  8 +++++---
 webview-ui/src/components/history/HistoryView.tsx    |  9 +++++----
 webview-ui/src/utils/format.ts                       | 12 ++++++++++++
 4 files changed, 27 insertions(+), 11 deletions(-)
 create mode 100644 webview-ui/src/utils/format.ts

diff --git a/webview-ui/src/components/chat/TaskHeader.tsx b/webview-ui/src/components/chat/TaskHeader.tsx
index 22261a7..91a1dd9 100644
--- a/webview-ui/src/components/chat/TaskHeader.tsx
+++ b/webview-ui/src/components/chat/TaskHeader.tsx
@@ -6,6 +6,7 @@ import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
 import Thumbnails from "../common/Thumbnails"
 import { mentionRegexGlobal } from "../../../../src/shared/context-mentions"
+import { formatLargeNumber } from "../../utils/format"
 
 interface TaskHeaderProps {
 	task: ClaudeMessage
@@ -257,14 +258,14 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 											className="codicon codicon-arrow-up"
 											style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-2px" }}
 										/>
-										{tokensIn?.toLocaleString()}
+										{formatLargeNumber(tokensIn || 0)}
 									</span>
 									<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
 										<i
 											className="codicon codicon-arrow-down"
 											style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-2px" }}
 										/>
-										{tokensOut?.toLocaleString()}
+										{formatLargeNumber(tokensOut || 0)}
 									</span>
 								</div>
 								{!isCostAvailable && <ExportButton />}
@@ -278,14 +279,14 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
 											className="codicon codicon-database"
 											style={{ fontSize: "12px", fontWeight: "bold", marginBottom: "-1px" }}
 										/>
-										+{(cacheWrites || 0)?.toLocaleString()}
+										+{formatLargeNumber(cacheWrites || 0)}
 									</span>
 									<span style={{ display: "flex", alignItems: "center", gap: "3px" }}>
 										<i
 											className="codicon codicon-arrow-right"
 											style={{ fontSize: "12px", fontWeight: "bold", marginBottom: 0 }}
 										/>
-										{(cacheReads || 0)?.toLocaleString()}
+										{formatLargeNumber(cacheReads || 0)}
 									</span>
 								</div>
 							)}
diff --git a/webview-ui/src/components/history/HistoryPreview.tsx b/webview-ui/src/components/history/HistoryPreview.tsx
index 4c50919..08aca2a 100644
--- a/webview-ui/src/components/history/HistoryPreview.tsx
+++ b/webview-ui/src/components/history/HistoryPreview.tsx
@@ -2,6 +2,7 @@ import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
 import { useExtensionState } from "../../context/ExtensionStateContext"
 import { vscode } from "../../utils/vscode"
 import { memo } from "react"
+import { formatLargeNumber } from "../../utils/format"
 
 type HistoryPreviewProps = {
 	showHistoryView: () => void
@@ -107,14 +108,15 @@ const HistoryPreview = ({ showHistoryView }: HistoryPreviewProps) => {
 								</div>
 								<div style={{ fontSize: "0.85em", color: "var(--vscode-descriptionForeground)" }}>
 									<span>
-										Tokens: ↑{item.tokensIn?.toLocaleString()} ↓{item.tokensOut?.toLocaleString()}
+										Tokens: ↑{formatLargeNumber(item.tokensIn || 0)} ↓
+										{formatLargeNumber(item.tokensOut || 0)}
 									</span>
 									{!!item.cacheWrites && (
 										<>
 											{" • "}
 											<span>
-												Cache: +{item.cacheWrites?.toLocaleString()} →{" "}
-												{(item.cacheReads || 0).toLocaleString()}
+												Cache: +{formatLargeNumber(item.cacheWrites || 0)} →{" "}
+												{formatLargeNumber(item.cacheReads || 0)}
 											</span>
 										</>
 									)}
diff --git a/webview-ui/src/components/history/HistoryView.tsx b/webview-ui/src/components/history/HistoryView.tsx
index c0b3ddb..21cb066 100644
--- a/webview-ui/src/components/history/HistoryView.tsx
+++ b/webview-ui/src/components/history/HistoryView.tsx
@@ -4,6 +4,7 @@ import { vscode } from "../../utils/vscode"
 import { Virtuoso } from "react-virtuoso"
 import { memo, useMemo, useState, useEffect } from "react"
 import Fuse, { FuseResult } from "fuse.js"
+import { formatLargeNumber } from "../../utils/format"
 
 type HistoryViewProps = {
 	onDone: () => void
@@ -305,7 +306,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 															marginBottom: "-2px",
 														}}
 													/>
-													{item.tokensIn?.toLocaleString()}
+													{formatLargeNumber(item.tokensIn || 0)}
 												</span>
 												<span
 													style={{
@@ -322,7 +323,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 															marginBottom: "-2px",
 														}}
 													/>
-													{item.tokensOut?.toLocaleString()}
+													{formatLargeNumber(item.tokensOut || 0)}
 												</span>
 											</div>
 											{!item.totalCost && <ExportButton itemId={item.id} />}
@@ -358,7 +359,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 															marginBottom: "-1px",
 														}}
 													/>
-													+{item.cacheWrites?.toLocaleString()}
+													+{formatLargeNumber(item.cacheWrites || 0)}
 												</span>
 												<span
 													style={{
@@ -375,7 +376,7 @@ const HistoryView = ({ onDone }: HistoryViewProps) => {
 															marginBottom: 0,
 														}}
 													/>
-													{(item.cacheReads || 0).toLocaleString()}
+													{formatLargeNumber(item.cacheReads || 0)}
 												</span>
 											</div>
 										)}
diff --git a/webview-ui/src/utils/format.ts b/webview-ui/src/utils/format.ts
new file mode 100644
index 0000000..2e473c9
--- /dev/null
+++ b/webview-ui/src/utils/format.ts
@@ -0,0 +1,12 @@
+export function formatLargeNumber(num: number): string {
+	if (num >= 1e9) {
+		return (num / 1e9).toFixed(1) + "b"
+	}
+	if (num >= 1e6) {
+		return (num / 1e6).toFixed(1) + "m"
+	}
+	if (num >= 1e3) {
+		return (num / 1e3).toFixed(1) + "k"
+	}
+	return num.toString()
+}