From e0610b0d141b249f70f3ce443ee8209928584f5b Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Mon, 15 Dec 2025 17:15:58 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=20feat:=20Enhance=20TokenUsageIndicat?=
 =?UTF-8?q?or=20accessibility=20with=20detailed=20aria=20labels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Chat/Input/TokenUsageIndicator.tsx         | 18 +++++++++++++-----
 client/src/locales/en/translation.json         |  3 ++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Chat/Input/TokenUsageIndicator.tsx b/client/src/components/Chat/Input/TokenUsageIndicator.tsx
index d22fad8cef..d99c1bcf94 100644
--- a/client/src/components/Chat/Input/TokenUsageIndicator.tsx
+++ b/client/src/components/Chat/Input/TokenUsageIndicator.tsx
@@ -23,7 +23,7 @@ const TokenUsageIndicator = memo(function TokenUsageIndicator() {
 
   // Ring calculations
   const size = 28;
-  const strokeWidth = 2.5;
+  const strokeWidth = 3.5;
   const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const offset = circumference - (percentage / 100) * circumference;
@@ -40,10 +40,18 @@ const TokenUsageIndicator = memo(function TokenUsageIndicator() {
       });
 
   const ariaLabel = hasMaxContext
-    ? localize('com_ui_token_usage_aria', { 0: Math.round(percentage).toString() })
-    : localize('com_ui_token_usage_indicator');
+    ? localize('com_ui_token_usage_aria_full', {
+        0: formatTokens(inputTokens),
+        1: formatTokens(outputTokens),
+        2: formatTokens(maxContext),
+        3: Math.round(percentage).toString(),
+      })
+    : localize('com_ui_token_usage_aria_no_max', {
+        0: formatTokens(inputTokens),
+        1: formatTokens(outputTokens),
+      });
 
-  // Color based on percentage (using raw colors to match existing patterns in AudioRecorder.tsx)
+  // Color based on percentage
   const getProgressColor = () => {
     if (!hasMaxContext) {
       return 'stroke-text-secondary';
@@ -80,7 +88,7 @@ const TokenUsageIndicator = memo(function TokenUsageIndicator() {
               r={radius}
               fill="transparent"
               strokeWidth={strokeWidth}
-              className="stroke-border-medium"
+              className="stroke-border-heavy"
             />
             {/* Progress ring */}
             <circle
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 4379ad6904..9a15b24253 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -1322,7 +1322,8 @@
   "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_aria_full": "Token usage: {{0}} input, {{1}} output, {{2}} max context, {{3}}% used",
+  "com_ui_token_usage_aria_no_max": "Token usage: {{0}} input, {{1}} output",
   "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}}",