Format large numbers to use k or m

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>
 										</>
 									)}

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>
 										)}