From 5c506a8158e7676fbba94239300fd0fdbe765968 Mon Sep 17 00:00:00 2001
From: Andrew Harvard <aharvard@squareup.com>
Date: Tue, 13 Jan 2026 09:13:10 -0500
Subject: [PATCH] feat(ui): format large and small token counts for readability
 (#6449)

---
 .../components/sessions/SessionsInsights.tsx  | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/ui/desktop/src/components/sessions/SessionsInsights.tsx b/ui/desktop/src/components/sessions/SessionsInsights.tsx
index b9ec0e2c..27bc358e 100644
--- a/ui/desktop/src/components/sessions/SessionsInsights.tsx
+++ b/ui/desktop/src/components/sessions/SessionsInsights.tsx
@@ -109,6 +109,22 @@ export function SessionInsights() {
       .replace(/\//g, '/');
   };
 
+  const formatTokens = (tokens: number | undefined): string => {
+    if (!tokens) {
+      return '0';
+    }
+    if (tokens >= 1_000_000_000) {
+      return `${(tokens / 1_000_000_000).toFixed(2)}B`;
+    }
+    if (tokens >= 1_000_000) {
+      return `${(tokens / 1_000_000).toFixed(2)}M`;
+    }
+    if (tokens >= 1_000) {
+      return `${(tokens / 1_000).toFixed(1)}K`;
+    }
+    return tokens.toString();
+  };
+
   // Render skeleton loader while data is loading
   const renderSkeleton = () => (
     <div className="bg-background-muted flex flex-col h-full">
@@ -262,9 +278,7 @@ export function SessionInsights() {
             <CardContent className="page-transition flex flex-col justify-end h-full p-0">
               <div className="flex flex-col justify-end">
                 <p className="text-4xl font-mono font-light flex items-end">
-                  {insights?.totalTokens && insights.totalTokens > 0
-                    ? `${(insights.totalTokens / 1000000).toFixed(2)}M`
-                    : '0.00M'}
+                  {formatTokens(insights?.totalTokens)}
                 </p>
                 <span className="text-xs text-text-muted">Total tokens</span>
               </div>