From ae35b7a0e5691508fed554d53428ac92862cb1a1 Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Mon, 11 May 2026 06:25:50 +0530
Subject: [PATCH] fix: Usagemeter not defined error [P0] (#922)

---
 apps/web/components/add-document/index.tsx | 67 +++++++++++++++-------
 1 file changed, 47 insertions(+), 20 deletions(-)

diff --git a/apps/web/components/add-document/index.tsx b/apps/web/components/add-document/index.tsx
index 12406853..6a4775ee 100644
--- a/apps/web/components/add-document/index.tsx
+++ b/apps/web/components/add-document/index.tsx
@@ -311,27 +311,54 @@ export function AddDocument({
 				</div>
 
 				{isMobile && (
-					<div className="mt-3 grid grid-cols-2 gap-2">
-						<UsageMeter
-							label="Credits"
-							value={
-								isLoadingUsage
+					<div className="mt-3 flex flex-col gap-2">
+						<div className="flex justify-between items-center">
+							<span
+								className={cn(
+									"text-[#FAFAFA] text-sm font-medium",
+									dmSansClassName(),
+								)}
+							>
+								Plan usage
+							</span>
+							<span
+								className={cn(
+									"text-sm font-medium tabular-nums",
+									hasPaidPlan ? "text-[#4BA0FA]" : "text-[#737373]",
+									dmSansClassName(),
+								)}
+							>
+								{isLoadingUsage
 									? "…"
-									: `${tokensToCredits(tokensUsed)} / ${tokensToCredits(tokensLimit)}`
-							}
-							percent={tokensPercent}
-							active={hasPaidPlan}
-						/>
-						<UsageMeter
-							label="Searches"
-							value={
-								isLoadingUsage
-									? "…"
-									: `${formatUsageNumber(searchesUsed)} / ${formatUsageNumber(searchesLimit)}`
-							}
-							percent={searchesPercent}
-							active={hasPaidPlan}
-						/>
+									: `${planUsagePct < 1 && planUsagePct > 0 ? "< 1" : Math.round(planUsagePct)}% used`}
+							</span>
+						</div>
+						<div className="h-2 w-full rounded-[40px] bg-[#2E353D] p-px overflow-hidden">
+							<div
+								className="h-full rounded-[40px]"
+								style={{
+									width: `${planUsagePct}%`,
+									background:
+										planUsagePct > 80
+											? "#ef4444"
+											: hasPaidPlan
+												? "linear-gradient(to right, #4BA0FA 80%, #002757 100%)"
+												: "#0054AD",
+								}}
+								title={`${formatUsageNumber(tokensUsed)} tokens · ${formatUsageNumber(searchesUsed)} queries`}
+							/>
+						</div>
+						{!isLoadingUsage && (
+							<p
+								className={cn(
+									"text-xs text-[#737373] tabular-nums",
+									dmSansClassName(),
+								)}
+							>
+								{formatUsageNumber(tokensUsed)} tokens ·{" "}
+								{formatUsageNumber(searchesUsed)} queries
+							</p>
+						)}
 					</div>
 				)}