@oh-my-pi/omp-stats 18.4.1 → 18.4.3

package/dist/types/client/charts/BarList.d.ts

@@ -3,7 +3,7 @@ export interface BarListItem {
     key: string;
     label: ReactNode;
     value: number;
-    /** Formatted figure; defaults to `value.toLocaleString()`. */
+    /** Formatted figure; defaults to `formatInteger(value)`. */
     display?: string;
     color?: string;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/omp-stats",
-	"version": "18.4.1",
+	"version": "18.4.3",
 	"description": "Local observability dashboard for omp AI usage statistics",
 	"homepage": "https://omp.sh",
 	"author": {
@@ -42,9 +42,9 @@
 		"fmt": "oxfmt --no-error-on-unmatched-pattern 'src/**/*.{ts,tsx}' '{test,bench,examples,scripts}/**/*.ts' '*.ts'"
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-ai": "18.4.1",
-		"@oh-my-pi/pi-catalog": "18.4.1",
-		"@oh-my-pi/pi-utils": "18.4.1",
+		"@oh-my-pi/pi-ai": "18.4.3",
+		"@oh-my-pi/pi-catalog": "18.4.3",
+		"@oh-my-pi/pi-utils": "18.4.3",
 		"lucide-react": "^1.24.0",
 		"react": "19.2.7",
 		"react-dom": "19.2.7"

package/src/client/charts/BarList.tsx

@@ -1,10 +1,11 @@
 import type { ReactNode } from "react";
+import { formatInteger } from "../data/formatters";
 
 export interface BarListItem {
 	key: string;
 	label: ReactNode;
 	value: number;
-	/** Formatted figure; defaults to `value.toLocaleString()`. */
+	/** Formatted figure; defaults to `formatInteger(value)`. */
 	display?: string;
 	color?: string;
 }
@@ -30,7 +31,7 @@ export function BarList({ items, max, onSelect }: BarListProps) {
 							style={{ width: `${pct}%`, background: item.color ?? "var(--chart-primary)" }}
 						/>
 						<span className="bar-list-label">{item.label}</span>
-						<span className="bar-list-value">{item.display ?? item.value.toLocaleString()}</span>
+						<span className="bar-list-value">{item.display ?? formatInteger(item.value)}</span>
 					</>
 				);
 				return onSelect ? (

package/src/client/data/formatters.ts

@@ -1,18 +1,25 @@
 import { format, formatDistanceToNow } from "@oh-my-pi/pi-utils/dates";
 import type { MessageStats } from "../types";
 
+/**
+ * Every number on the dashboard uses one fixed locale. Labels, percents
+ * (`toFixed`), durations and dates are English, so following the browser
+ * locale mixed conventions (e.g. `1,4 Mr` beside `97.0%` on a tr-TR browser).
+ */
+const NUMBER_LOCALE = "en-US";
+
 export function formatInteger(value: number): string {
-	return value.toLocaleString();
+	return value.toLocaleString(NUMBER_LOCALE);
 }
 
 export function formatCompact(value: number): string {
-	return value.toLocaleString(undefined, { notation: "compact" });
+	return value.toLocaleString(NUMBER_LOCALE, { notation: "compact" });
 }
 
 export function formatCost(value: number, digits?: number): string {
 	if (value === 0) return "$0";
 	const fractionDigits = digits !== undefined ? digits : value > 0 && value < 0.01 ? 4 : 2;
-	return `$${value.toLocaleString(undefined, {
+	return `$${value.toLocaleString(NUMBER_LOCALE, {
 		minimumFractionDigits: fractionDigits,
 		maximumFractionDigits: fractionDigits,
 	})}`;

package/src/client/traces/TimelineCanvas.tsx

@@ -8,7 +8,7 @@
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { formatDurationMs } from "../data/formatters";
+import { formatDurationMs, formatInteger } from "../data/formatters";
 import type { TraceMarker, TraceSpan, TraceSpanKind, TraceTrack } from "../types";
 import { buildTicks, formatOffset, type TraceScale } from "./time-scale";
 import { type TraceTheme, useTraceTheme } from "./trace-colors";
@@ -738,7 +738,7 @@ function renderTooltip(hover: HoverState, traceStart: number) {
 			</div>
 			{span.kind === "model" && (
 				<div className="muted num">
-					{span.tokens !== undefined && <>{span.tokens.toLocaleString()} tok</>}
+					{span.tokens !== undefined && <>{formatInteger(span.tokens)} tok</>}
 					{span.cost !== undefined && <> · ${span.cost.toFixed(4)}</>}
 					{span.ttft !== undefined && <> · TTFT {formatDurationMs(span.ttft)}</>}
 					{span.isError && <> · error</>}

package/src/client/ui/Table.tsx

@@ -1,5 +1,6 @@
 import { ArrowDown, ArrowUp } from "lucide-react";
 import { Fragment, type ReactNode, useMemo, useState } from "react";
+import { formatInteger } from "../data/formatters";
 import { EmptyState } from "./States";
 
 export interface Column<T> {
@@ -154,7 +155,7 @@ export function Table<T>({
 			{limit !== undefined && sorted.length > limit && (
 				<div className="table-more">
 					<span className="micro">
-						{visible.length.toLocaleString()} of {sorted.length.toLocaleString()}
+						{formatInteger(visible.length)} of {formatInteger(sorted.length)}
 					</span>
 					{sorted.length > shown && (
 						<button