diff --git a/packages/app/src/components/context-window-meter.tsx b/packages/app/src/components/context-window-meter.tsx
index 2696f7c1ba..4ea10a936b 100644
--- a/packages/app/src/components/context-window-meter.tsx
+++ b/packages/app/src/components/context-window-meter.tsx
@@ -3,7 +3,7 @@ import Svg, { Circle } from "react-native-svg";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
import { useTranslation } from "react-i18next";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { formatTokenCount } from "./context-window-meter.utils";
+import { formatContextPercentage, formatTokenCount } from "./context-window-meter.utils";
interface ContextWindowMeterProps {
maxTokens: number | null;
@@ -99,7 +99,7 @@ export function ContextWindowMeter({
glyphSize,
}: ContextWindowMeterProps) {
const { theme } = useUnistyles();
- const { t } = useTranslation();
+ const { t, i18n } = useTranslation();
const percentage =
maxTokens !== null && usedTokens !== null ? getUsagePercentage(maxTokens, usedTokens) : null;
const geometry = getMeterGeometry(showPercentage, glyphSize);
@@ -183,7 +183,9 @@ export function ContextWindowMeter({
/>
{showPercentage ? (
- {`${roundedPercentage}%`}
+
+ {formatContextPercentage(roundedPercentage, i18n.resolvedLanguage)}
+
) : null}
diff --git a/packages/app/src/components/context-window-meter.utils.ts b/packages/app/src/components/context-window-meter.utils.ts
index a0fa45ccbf..1f7035e44e 100644
--- a/packages/app/src/components/context-window-meter.utils.ts
+++ b/packages/app/src/components/context-window-meter.utils.ts
@@ -7,3 +7,10 @@ export function formatTokenCount(value: number): string {
}
return Math.round(value).toString();
}
+
+export function formatContextPercentage(value: number, locale?: string): string {
+ return new Intl.NumberFormat(locale, {
+ style: "percent",
+ maximumFractionDigits: 0,
+ }).format(Math.max(0, Math.min(100, value)) / 100);
+}
diff --git a/packages/app/src/usage/format.test.ts b/packages/app/src/usage/format.test.ts
index cda2b9d9d4..f4e1ac4f0c 100644
--- a/packages/app/src/usage/format.test.ts
+++ b/packages/app/src/usage/format.test.ts
@@ -36,4 +36,8 @@ describe("formatAmount", () => {
expect(formatRunsOutLabel(twoHoursFromNow, NOW)).toBe("2時間後に上限に到達");
expect(formatAgo(threeDaysAgo, NOW)).toBe("3日前");
});
+
+ it("formats percentages with locale-specific spacing", () => {
+ expect(formatPct(42, "fr")).toBe("42\u00a0%");
+ });
});