{chartData.length > 0 ? (
diff --git a/ui/app/workspace/dashboard/components/overviewTab.tsx b/ui/app/workspace/dashboard/components/overviewTab.tsx
index ff59408e0dc..ebcb7d8065e 100644
--- a/ui/app/workspace/dashboard/components/overviewTab.tsx
+++ b/ui/app/workspace/dashboard/components/overviewTab.tsx
@@ -1,6 +1,4 @@
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { COMPACT_NUMBER_FORMAT } from "@/lib/utils/numbers";
-import NumberFlow from "@number-flow/react";
import type {
CostHistogramResponse,
LatencyHistogramResponse,
@@ -9,6 +7,8 @@ import type {
ModelHistogramResponse,
TokenHistogramResponse,
} from "@/lib/types/logs";
+import { COMPACT_NUMBER_FORMAT } from "@/lib/utils/numbers";
+import NumberFlow from "@number-flow/react";
import { memo, useMemo } from "react";
import { CHART_COLORS, CHART_HEADER_LEGEND_CLASS, LATENCY_COLORS, getModelColor } from "../utils/chartUtils";
import { ChartCard } from "./charts/chartCard";
@@ -159,6 +159,7 @@ function OverviewTabImpl({
testId="chart-log-volume"
totalLabel="Total"
total={volumeTotal !== null ?
: undefined}
+ totalTooltip={volumeTotal !== null ? volumeTotal.toLocaleString("en-US") : undefined}
legend={
@@ -171,7 +172,9 @@ function OverviewTabImpl({
}
- controls={
}
+ controls={
+
+ }
>
@@ -183,6 +186,7 @@ function OverviewTabImpl({
testId="chart-token-usage"
totalLabel="Total"
total={tokenTotal !== null ?
: undefined}
+ totalTooltip={tokenTotal !== null ? tokenTotal.toLocaleString("en-US") : undefined}
legend={
@@ -225,6 +229,11 @@ function OverviewTabImpl({
) : undefined
}
+ totalTooltip={
+ costTotal !== null
+ ? costTotal.toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 6 })
+ : undefined
+ }
legend={
{costModel === "all" ? (
@@ -300,6 +309,7 @@ function OverviewTabImpl({
testId="chart-model-usage"
totalLabel="Total"
total={modelUsageTotal !== null ?
: undefined}
+ totalTooltip={modelUsageTotal !== null ? modelUsageTotal.toLocaleString("en-US") : undefined}
legend={
{usageModel === "all" ? (
@@ -380,6 +390,7 @@ function OverviewTabImpl({
) : undefined
}
+ totalTooltip={latencyAvg !== null ? `${latencyAvg.toLocaleString("en-US", { maximumFractionDigits: 6 })}ms` : undefined}
legend={
@@ -401,11 +412,7 @@ function OverviewTabImpl({
}
controls={
-
+
}
>
diff --git a/ui/app/workspace/dashboard/components/providerUsageTab.tsx b/ui/app/workspace/dashboard/components/providerUsageTab.tsx
index c19df8868b8..dd1034fda4e 100644
--- a/ui/app/workspace/dashboard/components/providerUsageTab.tsx
+++ b/ui/app/workspace/dashboard/components/providerUsageTab.tsx
@@ -131,6 +131,11 @@ function ProviderUsageTabImpl({
) : undefined
}
+ totalTooltip={
+ providerCostTotal !== null
+ ? providerCostTotal.toLocaleString("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 6 })
+ : undefined
+ }
legend={
{providerCostProvider === "all" ? (
@@ -215,6 +220,7 @@ function ProviderUsageTabImpl({
testId="chart-provider-tokens"
totalLabel="Total"
total={providerTokenTotal !== null ?
: undefined}
+ totalTooltip={providerTokenTotal !== null ? providerTokenTotal.toLocaleString("en-US") : undefined}
legend={
{providerTokenProvider === "all" ? (
@@ -304,6 +310,9 @@ function ProviderUsageTabImpl({
) : undefined
}
+ totalTooltip={
+ providerLatencyAvg !== null ? `${providerLatencyAvg.toLocaleString("en-US", { maximumFractionDigits: 6 })}ms` : undefined
+ }
legend={
{providerLatencyProvider === "all" ? (
diff --git a/ui/app/workspace/dashboard/utils/chartUtils.ts b/ui/app/workspace/dashboard/utils/chartUtils.ts
index 3e967beb212..12019a3ce7f 100644
--- a/ui/app/workspace/dashboard/utils/chartUtils.ts
+++ b/ui/app/workspace/dashboard/utils/chartUtils.ts
@@ -30,23 +30,15 @@ export function formatFullTimestamp(timestamp: string): string {
// Format cost values
export function formatCost(cost: number): string {
+ if (cost === 0) {
+ return `$0`;
+ }
if (cost < 0.01) {
return `$${cost.toFixed(4)}`;
}
return `$${cost.toFixed(2)}`;
}
-// Format token values
-export function formatTokens(tokens: number): string {
- if (tokens >= 1000000) {
- return `${(tokens / 1000000).toFixed(1)}M`;
- }
- if (tokens >= 1000) {
- return `${(tokens / 1000).toFixed(1)}K`;
- }
- return tokens.toLocaleString();
-}
-
// Color palette for models. Length governs TOP_SERIES_LIMIT (top-N rollup cap),
// so colors and named-series count stay coupled — adding a color expands top-N.
export const MODEL_COLORS = [
diff --git a/ui/app/workspace/logs/sheets/logDetailView.tsx b/ui/app/workspace/logs/sheets/logDetailView.tsx
index e6bda63ae6c..03eb7c91736 100644
--- a/ui/app/workspace/logs/sheets/logDetailView.tsx
+++ b/ui/app/workspace/logs/sheets/logDetailView.tsx
@@ -1,4 +1,5 @@
-import { formatCost, formatLatency, formatTokens } from "@/app/workspace/dashboard/utils/chartUtils";
+import { formatCost, formatLatency } from "@/app/workspace/dashboard/utils/chartUtils";
+import { formatCompactNumber } from "@/lib/utils/numbers";
import {
AlertDialog,
AlertDialogAction,
@@ -764,14 +765,14 @@ export function LogDetailView({
mono
value={
log.token_usage
- ? `${formatTokens(log.token_usage.prompt_tokens ?? 0)} / ${formatTokens(log.token_usage.completion_tokens ?? 0)}`
+ ? `${formatCompactNumber(log.token_usage.prompt_tokens ?? 0)} / ${formatCompactNumber(log.token_usage.completion_tokens ?? 0)}`
: "—"
}
sub={
log.token_usage
- ? `total ${formatTokens(log.token_usage.total_tokens ?? 0)}${
+ ? `total ${formatCompactNumber(log.token_usage.total_tokens ?? 0)}${
log.token_usage.completion_tokens_details?.reasoning_tokens
- ? ` · reasoning ${formatTokens(log.token_usage.completion_tokens_details.reasoning_tokens)}`
+ ? ` · reasoning ${formatCompactNumber(log.token_usage.completion_tokens_details.reasoning_tokens)}`
: ""
}`
: "—"
diff --git a/ui/app/workspace/logs/views/columns.tsx b/ui/app/workspace/logs/views/columns.tsx
index 4a2381157c5..fb9a7f13676 100644
--- a/ui/app/workspace/logs/views/columns.tsx
+++ b/ui/app/workspace/logs/views/columns.tsx
@@ -1,4 +1,5 @@
-import { formatCost, formatLatency, formatTokens } from "@/app/workspace/dashboard/utils/chartUtils";
+import { formatCost, formatLatency } from "@/app/workspace/dashboard/utils/chartUtils";
+import { formatCompactNumber } from "@/lib/utils/numbers";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdownMenu";
@@ -295,7 +296,7 @@ export const createColumns = (
return (
-
{formatTokens(total)}
+
{formatCompactNumber(total)}
{hasSplit && (
@@ -305,9 +306,9 @@ export const createColumns = (
{hasSplit && (
- {formatTokens(prompt)}
+ {formatCompactNumber(prompt)}
/
- {formatTokens(completion)}
+ {formatCompactNumber(completion)}
)}
diff --git a/ui/components/rateLimitDisplay.tsx b/ui/components/rateLimitDisplay.tsx
index 20b457ccf6f..1ba294a0c26 100644
--- a/ui/components/rateLimitDisplay.tsx
+++ b/ui/components/rateLimitDisplay.tsx
@@ -2,7 +2,7 @@ import { Progress } from "@/components/ui/progress";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { resetDurationLabels } from "@/lib/constants/governance";
import { cn } from "@/lib/utils";
-import { formatCompactNumber } from "@/lib/utils/governance";
+import { formatCompactNumber } from "@/lib/utils/numbers";
interface RateLimitShape {
token_max_limit?: number | null;
diff --git a/ui/lib/utils/governance.ts b/ui/lib/utils/governance.ts
index e257ac2b1b2..578aba4c282 100644
--- a/ui/lib/utils/governance.ts
+++ b/ui/lib/utils/governance.ts
@@ -24,25 +24,12 @@ export function parseResetPeriod(duration: string): string {
return `${timeValue} ${unitName}`;
}
+import { formatCompactNumber } from "./numbers";
+
export function formatCurrency(dollars: number) {
return `$${dollars.toFixed(2)}`;
}
-/**
- * Formats a number compactly (e.g. 10000 → "10K", 1500000 → "1.5M").
- * Uses Intl.NumberFormat so boundary values promote correctly (999,950 → "1M", not "1000K")
- * and trailing zeros are dropped (10,000 → "10K", not "10.0K").
- */
-const compactNumberFormatter = new Intl.NumberFormat(undefined, {
- notation: "compact",
- maximumFractionDigits: 1,
-});
-
-export function formatCompactNumber(n: number): string {
- if (Math.abs(n) >= 1_000) return compactNumberFormatter.format(n);
- return n.toLocaleString();
-}
-
const shortDurationLabels: Record
= {
"1m": "/min",
"5m": "/5min",
diff --git a/ui/lib/utils/numbers.ts b/ui/lib/utils/numbers.ts
index 11fa4d24425..22fceec249e 100644
--- a/ui/lib/utils/numbers.ts
+++ b/ui/lib/utils/numbers.ts
@@ -10,4 +10,17 @@ export function formatCompactNumber(value: number, maximumFractionDigits = 2): s
...COMPACT_NUMBER_FORMAT,
maximumFractionDigits,
}).format(value);
+}
+
+export function formatCurrencyNumber(value: number, maximumFractionDigits = 2): string {
+ if (!Number.isFinite(value)) return "$0";
+ if (value !== 0 && Math.abs(value) < 0.01) {
+ return `$${value.toFixed(4)}`;
+ }
+ return new Intl.NumberFormat("en-US", {
+ ...COMPACT_NUMBER_FORMAT,
+ style: "currency",
+ currency: "USD",
+ maximumFractionDigits,
+ }).format(value);
}
\ No newline at end of file