feat: format token usage with "compact" notation (#238)

* feat: format token usage with "compact" notation

* chore: fix tests

Author: alex-mcgovern

src/features/alerts/components/__tests__/alerts-summary-workspace-token-usage.test.tsx

@@ -5,6 +5,7 @@ import { render, waitFor } from "@/lib/test-utils";
 
 import { AlertsSummaryWorkspaceTokenUsage } from "../alerts-summary-workspace-token-usage";
 import { TOKEN_USAGE_AGG } from "../../mocks/token-usage.mock";
+import { formatNumberCompact } from "@/lib/format-number";
 
 test("shows correct count when there is token usage", async () => {
   server.use(
@@ -17,10 +18,10 @@ test("shows correct count when there is token usage", async () => {
 
   await waitFor(() => {
     expect(getByTestId("usage-input-tokens")).toHaveTextContent(
-      TOKEN_USAGE_AGG.token_usage.input_tokens.toString(),
+      formatNumberCompact(TOKEN_USAGE_AGG.token_usage.input_tokens),
     );
     expect(getByTestId("usage-output-tokens")).toHaveTextContent(
-      TOKEN_USAGE_AGG.token_usage.output_tokens.toString(),
+      formatNumberCompact(TOKEN_USAGE_AGG.token_usage.output_tokens),
     );
   });
 });

src/features/alerts/components/__tests__/table-alerts.test.tsx

@@ -5,6 +5,7 @@ import { server } from "@/mocks/msw/node";
 import { http, HttpResponse } from "msw";
 import { makeMockAlert } from "../../mocks/alert.mock";
 import { TOKEN_USAGE_AGG } from "../../mocks/token-usage.mock";
+import { formatNumberCompact } from "@/lib/format-number";
 
 vi.mock("@untitled-ui/icons-react", async () => {
   const original = await vi.importActual<
@@ -18,14 +19,12 @@ vi.mock("@untitled-ui/icons-react", async () => {
 });
 
 const INPUT_TOKENS =
-  TOKEN_USAGE_AGG.tokens_by_model[
-    "claude-3-5-sonnet-latest"
-  ].token_usage.input_tokens.toString();
+  TOKEN_USAGE_AGG.tokens_by_model["claude-3-5-sonnet-latest"].token_usage
+    .input_tokens;
 
 const OUTPUT_TOKENS =
-  TOKEN_USAGE_AGG.tokens_by_model[
-    "claude-3-5-sonnet-latest"
-  ].token_usage.output_tokens.toString();
+  TOKEN_USAGE_AGG.tokens_by_model["claude-3-5-sonnet-latest"].token_usage
+    .output_tokens;
 
 test("renders token usage cell correctly", async () => {
   server.use(
@@ -53,7 +52,7 @@ test("renders token usage cell correctly", async () => {
 
   expect(
     getByRole("gridcell", {
-      name: `${INPUT_TOKENS} ${OUTPUT_TOKENS}`,
+      name: `${formatNumberCompact(INPUT_TOKENS)} ${formatNumberCompact(OUTPUT_TOKENS)}`,
     }),
   ).toBeVisible();
 });

src/features/alerts/components/alerts-summary.tsx

@@ -1,3 +1,4 @@
+import { formatNumberCompact } from "@/lib/format-number";
 import { Card, CardBody, Heading, Skeleton } from "@stacklok/ui-kit";
 import { ComponentProps } from "react";
 
@@ -13,7 +14,7 @@ function AlertsSummaryStatistic({
   return (
     <div data-testid={id} className="text-5xl flex items-center gap-1">
       <Icon className="size-11" />
-      {count}
+      {formatNumberCompact(count)}
     </div>
   );
 }

src/features/alerts/components/table-alert-token-usage.tsx

@@ -2,6 +2,7 @@ import { TokenUsageAggregate } from "@/api/generated";
 import { TextLinkButton, Tooltip, TooltipTrigger } from "@stacklok/ui-kit";
 import { Download01, Upload01 } from "@untitled-ui/icons-react";
 import { TokenUsageByProviders } from "./token-usage-by-providers";
+import { formatNumberCompact } from "@/lib/format-number";
 
 function Icons({
   input_tokens = 0,
@@ -14,11 +15,11 @@ function Icons({
     <div className="flex tabular-nums gap-4 items-center">
       <div className="flex items-center gap-1">
         <Download01 className="size-4" />
-        {input_tokens}
+        {formatNumberCompact(input_tokens ?? 0)}
       </div>
       <div className="flex items-center gap-1">
         <Upload01 className="size-4" />
-        <span className="block">{output_tokens}</span>
+        <span className="block">{formatNumberCompact(output_tokens ?? 0)}</span>
       </div>
     </div>
   );

src/features/alerts/components/token-usage-by-providers.tsx

@@ -1,5 +1,6 @@
 import { TokenUsage, TokenUsageAggregate } from "@/api/generated";
 import { formatCurrency } from "@/lib/currency";
+import { formatNumberCompact } from "@/lib/format-number";
 
 import { ArrowDown, ArrowUp } from "@untitled-ui/icons-react";
 
@@ -47,7 +48,7 @@ function UsageRow({
     <li className="min-w-40 flex items-center border-b border-b-gray-900 last:border-b-0 py-1 my-1 list-none">
       <UsageIcon iconType={type} className="size-4 text-gray-50" />
 
-      <div className="text-gray-50">{tokens}</div>
+      <div className="text-gray-50">{formatNumberCompact(tokens)}</div>
 
       <div className="ml-auto text-gray-25">
         {formatCurrency(cost, { currency: "USD" })}

src/lib/format-number.ts

@@ -0,0 +1,5 @@
+export const formatNumberCompact = (value: number) => {
+  return Intl.NumberFormat("en-US", {
+    notation: "compact",
+  }).format(value);
+};