From e83db3384e287e61c93023306ca2a5bd0cfee9ad Mon Sep 17 00:00:00 2001
From: akash3444 <akashmoradiya3444@gmail.com>
Date: Mon, 12 Oct 2026 13:04:49 +0530
Subject: [PATCH] fix(web): polish pooled usage limit display

- Hide the reset plate when a usage window has not started
- Align the pace indicator and refine the model dialog border
---
 .../components/usage/UsageLimitsPooled.tsx    | 41 +++++++++++--------
 .../src/components/usage/UsageModelDialog.tsx |  2 +-
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/apps/web/src/components/usage/UsageLimitsPooled.tsx b/apps/web/src/components/usage/UsageLimitsPooled.tsx
index 8a6d3cc5eecd..2930bdf8d41d 100644
--- a/apps/web/src/components/usage/UsageLimitsPooled.tsx
+++ b/apps/web/src/components/usage/UsageLimitsPooled.tsx
@@ -290,23 +290,26 @@ function PoolSegment({
             />
           ) : null}
           <span className="shrink-0 font-semibold text-foreground tabular-nums">{remaining}%</span>
-          {/* Countdown and badge get their own plate: fill and hatching run under them otherwise. */}
-          <span className="ms-auto flex shrink-0 items-center gap-1.5 rounded-sm bg-background/85 px-1.5 py-0.5 text-2xs text-foreground tabular-nums">
-            {resetsIn?.replace("resets in ", "↻ ") ?? ""}
-            {credits ? (
-              <>
-                {resetsIn ? (
-                  <span aria-hidden className="text-muted-foreground">
-                    ·
+          {/* Countdown and badge get their own plate: fill and hatching run under them otherwise.
+              An unstarted window has no reset, so the plate is skipped rather than drawn empty. */}
+          {resetsIn || credits ? (
+            <span className="ms-auto flex shrink-0 items-center gap-1.5 rounded-sm bg-background/85 px-1.5 py-0.5 text-2xs text-foreground tabular-nums">
+              {resetsIn?.replace("resets in ", "↻ ") ?? ""}
+              {credits ? (
+                <>
+                  {resetsIn ? (
+                    <span aria-hidden className="text-muted-foreground">
+                      ·
+                    </span>
+                  ) : null}
+                  <span aria-hidden className="inline-flex items-center gap-0.5 font-semibold">
+                    <TicketIcon className="size-3" aria-hidden />
+                    {credits}
                   </span>
-                ) : null}
-                <span aria-hidden className="inline-flex items-center gap-0.5 font-semibold">
-                  <TicketIcon className="size-3" aria-hidden />
-                  {credits}
-                </span>
-              </>
-            ) : null}
-          </span>
+                </>
+              ) : null}
+            </span>
+          ) : null}
         </div>
       </PopoverTrigger>
       <LegendRow account={account} window={window} color={color} now={now} index={index} />
@@ -514,8 +517,10 @@ function PoolWindowCard({
           <span className="text-3xl font-semibold text-foreground tabular-nums">
             {pool.remainingPercent}%
           </span>
-          <span className="text-sm text-muted-foreground">left</span>
-          {pool.pace ? <PaceIcon pace={pool.pace} /> : null}
+          <span className="inline-flex items-center gap-2 text-sm text-muted-foreground">
+            <span>left</span>
+            {pool.pace ? <PaceIcon pace={pool.pace} /> : null}
+          </span>
         </span>
         {nextRefill && pool.columns.length > 1 ? (
           <span className="text-xs font-medium text-foreground tabular-nums">
diff --git a/apps/web/src/components/usage/UsageModelDialog.tsx b/apps/web/src/components/usage/UsageModelDialog.tsx
index 920680286f54..959519528553 100644
--- a/apps/web/src/components/usage/UsageModelDialog.tsx
+++ b/apps/web/src/components/usage/UsageModelDialog.tsx
@@ -80,7 +80,7 @@ export function UsageModelDialog({
         if (!open) onClose();
       }}
     >
-      <DialogPopup className="max-w-3xl">
+      <DialogPopup className="max-w-3xl border-none ring ring-border/70 shadow-2xl">
         <DialogHeader>
           <div className="flex items-center gap-2">
             <ProviderInstanceIcon