From 8cedd5f45e160039f3b36aa3e0f96c8868caac9f Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Sun, 14 Dec 2025 02:33:10 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=20fix:=20Add=20i18n=20and=20accessibi?=
 =?UTF-8?q?lity=20to=20TokenUsageIndicator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Chat/Input/TokenUsageIndicator.tsx        | 27 +++++++++++++++----
 client/src/locales/en/translation.json        |  4 +++
 client/src/store/index.ts                     |  3 +++
 3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Chat/Input/TokenUsageIndicator.tsx b/client/src/components/Chat/Input/TokenUsageIndicator.tsx
index affe950d6e..d22fad8cef 100644
--- a/client/src/components/Chat/Input/TokenUsageIndicator.tsx
+++ b/client/src/components/Chat/Input/TokenUsageIndicator.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { TooltipAnchor } from '@librechat/client';
-import { useTokenUsage } from '~/hooks';
+import { useLocalize, useTokenUsage } from '~/hooks';
 import { cn } from '~/utils';
 
 function formatTokens(n: number): string {
@@ -14,6 +14,7 @@ function formatTokens(n: number): string {
 }
 
 const TokenUsageIndicator = memo(function TokenUsageIndicator() {
+  const localize = useLocalize();
   const { inputTokens, outputTokens, maxContext } = useTokenUsage();
 
   const totalUsed = inputTokens + outputTokens;
@@ -28,10 +29,21 @@ const TokenUsageIndicator = memo(function TokenUsageIndicator() {
   const offset = circumference - (percentage / 100) * circumference;
 
   const tooltipText = hasMaxContext
-    ? `Input: ${formatTokens(inputTokens)} | Output: ${formatTokens(outputTokens)} | Max: ${formatTokens(maxContext)}`
-    : `Input: ${formatTokens(inputTokens)} | Output: ${formatTokens(outputTokens)} | Max: N/A`;
+    ? localize('com_ui_token_usage_with_max', {
+        0: formatTokens(inputTokens),
+        1: formatTokens(outputTokens),
+        2: formatTokens(maxContext),
+      })
+    : localize('com_ui_token_usage_no_max', {
+        0: formatTokens(inputTokens),
+        1: formatTokens(outputTokens),
+      });
 
-  // Color based on percentage
+  const ariaLabel = hasMaxContext
+    ? localize('com_ui_token_usage_aria', { 0: Math.round(percentage).toString() })
+    : localize('com_ui_token_usage_indicator');
+
+  // Color based on percentage (using raw colors to match existing patterns in AudioRecorder.tsx)
   const getProgressColor = () => {
     if (!hasMaxContext) {
       return 'stroke-text-secondary';
@@ -49,12 +61,17 @@ const TokenUsageIndicator = memo(function TokenUsageIndicator() {
     <TooltipAnchor
       description={tooltipText}
       render={
-        <div className="flex size-9 items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover">
+        <div
+          className="flex size-9 items-center justify-center rounded-full p-1 transition-colors hover:bg-surface-hover"
+          role="img"
+          aria-label={ariaLabel}
+        >
           <svg
             width={size}
             height={size}
             viewBox={`0 0 ${size} ${size}`}
             className="rotate-[-90deg]"
+            aria-hidden="true"
           >
             {/* Background ring */}
             <circle
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index e97f74ad68..4379ad6904 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1322,6 +1322,10 @@
   "com_ui_token": "token",
   "com_ui_token_exchange_method": "Token Exchange Method",
   "com_ui_token_url": "Token URL",
+  "com_ui_token_usage_aria": "Context window {{0}}% used",
+  "com_ui_token_usage_indicator": "Token usage indicator",
+  "com_ui_token_usage_no_max": "Input: {{0}} | Output: {{1}} | Max: N/A",
+  "com_ui_token_usage_with_max": "Input: {{0}} | Output: {{1}} | Max: {{2}}",
   "com_ui_tokens": "tokens",
   "com_ui_tool_collection_prefix": "A collection of tools from",
   "com_ui_tool_list_collapse": "Collapse {{serverName}} tool list",
diff --git a/client/src/store/index.ts b/client/src/store/index.ts
index 25d721e65b..e490c11635 100644
--- a/client/src/store/index.ts
+++ b/client/src/store/index.ts
@@ -12,9 +12,11 @@ import lang from './language';
 import settings from './settings';
 import misc from './misc';
 import isTemporary from './temporary';
+import * as tokenUsage from './tokenUsage';
 export * from './agents';
 export * from './mcp';
 export * from './favorites';
+export * from './tokenUsage';
 
 export default {
   ...artifacts,
@@ -31,4 +33,5 @@ export default {
   ...settings,
   ...misc,
   ...isTemporary,
+  ...tokenUsage,
 };