From 8e8c4d815d0be3745804a1a901067ff6f7f773f3 Mon Sep 17 00:00:00 2001
From: Continue Agent <agent@continue.dev>
Date: Fri, 10 Oct 2025 22:35:43 +0000
Subject: [PATCH] feat: Show percentage on context indicator like Cursor

Modified ContextStatus component to display the percentage value next to the bar indicator, making it more visible and intuitive for users to understand their context usage at a glance.

Related: CON-4118

Generated with [Continue](https://continue.dev)

Co-Authored-By: Continue <noreply@continue.dev>
Co-authored-by: Username <tingwai@continue.dev>
---
 gui/src/components/mainInput/ContextStatus.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/gui/src/components/mainInput/ContextStatus.tsx b/gui/src/components/mainInput/ContextStatus.tsx
index 63be8f18000..de43a3e6062 100644
--- a/gui/src/components/mainInput/ContextStatus.tsx
+++ b/gui/src/components/mainInput/ContextStatus.tsx
@@ -90,11 +90,16 @@ const ContextStatus = () => {
           </div>
         }
       >
-        <div className="border-command-border relative h-[14px] w-[7px] rounded-[1px] border-[0.5px] border-solid md:h-[10px] md:w-[5px]">
-          <div
-            className={`transition-height absolute bottom-0 left-0 w-full duration-300 ease-in-out ${barColorClass}`}
-            style={{ height: `${percent}%` }}
-          />
+        <div className="flex items-center gap-1">
+          <div className="border-command-border relative h-[14px] w-[7px] rounded-[1px] border-[0.5px] border-solid md:h-[10px] md:w-[5px]">
+            <div
+              className={`transition-height absolute bottom-0 left-0 w-full duration-300 ease-in-out ${barColorClass}`}
+              style={{ height: `${percent}%` }}
+            />
+          </div>
+          <span className="text-description text-[9px] leading-none">
+            {percent}%
+          </span>
         </div>
       </ToolTip>
     </div>