Commit be53bbd85044e937c359a89b6004c3d3c38ffcf1 | the-knife

author	Chris Deeming <chris@xenforo.com> 2026-09-06 00:22:15+01:00
committer	GitHub <noreply@github.com> 2026-09-05 16:22:15-07:00
log	be53bbd85044e937c359a89b6004c3d3c38ffcf1
tree	70c9df93df174b795e7065246edd8262c4c875b2
parent	585ce2c2ab396e4c3c5ffcfc422449c07896ddf9
signature	Signed by PGP key B5690EEEBB952194

feat(usage): show remaining quota instead of used (#9889)

Co-authored-by: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com>

5 files changed, 51 insertions(+), 29 deletions(-)

apps
- mobile
  - src
    features
    usage
    UsageLimitsSection.tsx
- web
  - src
    components
    usage
    UsageLimits.tsx
docs
- user
  - usage.md
packages
- shared
  - src
    usageLimits.test.ts
    usageLimits.ts

apps/mobile/src/features/usage/UsageLimitsSection.tsx+17-12

 @@ -18,6 +18,7 @@ import {
   limitsNotice,
   paceOf,
   providerLimitsLabel,
+  remainingPercent,
 } from "@t3tools/shared/usageLimits";
 import { type ReactNode, useState } from "react";
 import { Alert, Pressable, View } from "react-native";
 @@ -44,9 +45,10 @@ function useBarColor(driver: Driver): string | null {
 }
 /**
- * One window as a bar spanning its whole duration: the fill is quota spent,
+ * One window as a bar spanning its whole duration: the fill is quota left,
- * the hairline is how far into the window the clock is. Pace sits under the
+ * the hairline is how much of the window is left, so even spending keeps the
- * left edge, the countdown under the right, so a row reads in one glance.
+ * fill on the line. Pace sits under the left edge, the countdown under the
+ * right, so a row reads in one glance.
  */
 function WindowRow(props: {
   readonly window: ServerProviderUsageWindow;
 @@ -54,37 +56,40 @@ function WindowRow(props: {
   readonly now: number;
 }) {
   const { window, now } = props;
-  const used = Math.round(Math.max(0, Math.min(100, window.usedPercent)));
+  const remaining = remainingPercent(window);
   const elapsed = elapsedShare(window, now);
+  const timeLeft = elapsed === null ? null : Math.round((1 - elapsed) * 100);
   const pace = paceOf(window, now);
   const resetsIn = formatResetsIn(window, now);
   return (
     <View className="gap-1">
       <View className="flex-row items-baseline justify-between gap-3">
         <Text className="text-sm text-foreground">{window.label}</Text>
-        <Text className="text-sm font-t3-medium tabular-nums text-foreground">{used}%</Text>
+        <Text className="text-sm font-t3-medium tabular-nums text-foreground">
+          {remaining}% left
+        </Text>
       </View>
       <View className="h-3 justify-center">
         <View className="h-1.5 flex-row overflow-hidden rounded-full bg-subtle">
           <View
             className={
-              used >= 90
+              remaining <= 10
                 ? "h-full rounded-full bg-red-500"
-                : used >= 70
+                : remaining <= 30
                   ? "h-full rounded-full bg-amber-500"
                   : "h-full rounded-full bg-foreground"
             }
             style={[
-              { flex: used },
+              { flex: remaining },
-              used < 70 && props.color ? { backgroundColor: props.color } : null,
+              remaining > 30 && props.color ? { backgroundColor: props.color } : null,
             ]}
           />
-          <View style={{ flex: 100 - used }} />
+          <View style={{ flex: 100 - remaining }} />
         </View>
-        {elapsed !== null ? (
+        {timeLeft !== null ? (
           <View
             className="absolute top-0 bottom-0 w-px bg-foreground"
-            style={{ left: `${elapsed * 100}%`, opacity: 0.6 }}
+            style={{ left: `${timeLeft}%`, opacity: 0.6 }}
           />
         ) : null}
       </View>

apps/web/src/components/usage/UsageLimits.tsx+13-11

 @@ -20,6 +20,7 @@ import {
   type LimitPace,
   paceOf,
   providerLimitsLabel,
+  remainingPercent,
 } from "@t3tools/shared/usageLimits";
 import { GaugeIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";
 import { Fragment, useState } from "react";
 @@ -95,14 +96,16 @@ function WindowBar({
   readonly now: number;
 }) {
   const timestampFormat = usePrimarySettings((settings) => settings.timestampFormat);
-  const used = Math.max(0, Math.min(100, window.usedPercent));
+  const remaining = remainingPercent(window);
   const elapsed = elapsedShare(window, now);
+  // The fill is quota left, so the even-spending mark is the time left.
+  const timeLeft = elapsed === null ? null : Math.round((1 - elapsed) * 100);
   const resetsIn = formatResetsIn(window, now);
   const resetsAt = window.resetsAt
     ? formatUpcomingTimestamp(window.resetsAt, timestampFormat, now)
     : null;
-  const summary = `${window.label}: ${Math.round(used)}% used${
+  const summary = `${window.label}: ${remaining}% left${
-    elapsed === null ? "" : `, ${Math.round(elapsed * 100)}% of the window elapsed`
+    timeLeft === null ? "" : `, ${timeLeft}% of the window left`
   }${resetsIn ? `, ${resetsIn}` : ""}`;
   return (
 @@ -118,27 +121,26 @@ function WindowBar({
         }
       >
         <div className="absolute inset-x-0 inset-y-1.5 rounded-full bg-muted" />
-        {used > 0 ? (
+        {remaining > 0 ? (
           <div
             className="absolute inset-y-1.5 left-0 rounded-full"
-            style={{ width: `${used}%`, backgroundColor: color }}
+            style={{ width: `${remaining}%`, backgroundColor: color }}
           />
         ) : null}
-        {elapsed !== null ? (
+        {timeLeft !== null ? (
           <span
             aria-hidden
             className="absolute inset-y-0.5 w-px -translate-x-1/2 bg-foreground/60"
-            style={{ left: `${elapsed * 100}%` }}
+            style={{ left: `${timeLeft}%` }}
           />
         ) : null}
       </TooltipTrigger>
       <TooltipPopup side="top" className="max-w-72 text-xs">
         <div className="flex flex-col gap-0.5">
           <span className="text-foreground">
-            {Math.round(used)}% used
+            {remaining}% left{timeLeft !== null ? ` · ${timeLeft}% of the window left` : ""}
-            {elapsed !== null ? ` · ${Math.round(elapsed * 100)}% of the window elapsed` : ""}
           </span>
-          {elapsed !== null ? (
+          {timeLeft !== null ? (
             <span className="text-muted-foreground">The line is where even spending would be.</span>
           ) : null}
           {resetsAt ? (
 @@ -185,7 +187,7 @@ export function LimitWindows({
             <span className="flex min-w-0 items-center gap-2 text-xs">
               <span className="truncate text-muted-foreground">{window.label}</span>
               <span className="ms-auto shrink-0 font-medium text-foreground tabular-nums">
-                {Math.round(window.usedPercent)}%
+                {remainingPercent(window)}% left
               </span>
             </span>
             <WindowBar color={color} window={window} now={now} />

docs/user/usage.md+3-3

...	@@ -39,9 +39,9 @@ the dialog.	...	@@ -39,9 +39,9 @@ the dialog.
39		39
40	## Track subscription limits	40	## Track subscription limits
41		41
42	Usage → Limits shows quota use and reset times for Codex and Claude subscriptions. It also	42	Usage → Limits shows how much quota is left in each window and when it resets, for Codex and
43	compares quota consumed with time elapsed in each window, so you can judge your pace before the	43	Claude subscriptions. For windows with timing data, each bar also marks how much of the window is
44	next reset.	44	left, so you can judge your pace before the next reset.
45		45
46	If a window looks stale, refresh Limits to re-check every provider and hub.	46	If a window looks stale, refresh Limits to re-check every provider and hub.
47		47

packages/shared/src/usageLimits.test.ts+10

 @@ -20,6 +20,7 @@ import {
   limitsNotice,
   paceOf,
   providersWithLimits,
+  remainingPercent,
 } from "./usageLimits.ts";
 const now = Date.parse("2026-09-03T12:00:00.000Z");
 @@ -493,6 +494,15 @@ describe("sameUsageLimitCommandCoverage", () => {
   });
 });
+describe("remainingPercent", () => {
+  it("inverts and clamps the reported usage", () => {
+    expect(remainingPercent(window)).toBe(60);
+    expect(remainingPercent({ ...window, usedPercent: 0 })).toBe(100);
+    expect(remainingPercent({ ...window, usedPercent: 100 })).toBe(0);
+    expect(remainingPercent({ ...window, usedPercent: 33.4 })).toBe(67);
+  });
+});
 describe("isUsageLimitsCommand", () => {
   it("recognizes only the standalone local action", () => {
     expect(isUsageLimitsCommand("  /USAGE-LIMITS\n")).toBe(true);

packages/shared/src/usageLimits.ts+8-3

 @@ -166,6 +166,11 @@ export function limitsNotice(limits: ServerProviderUsageLimits): string | null {
   return limits.windows.length === 0 ? "No limits reported." : null;
 }
+/** Quota left in the window, 0..100. Bars and labels show what remains, as Codex does. */
+export function remainingPercent(window: ServerProviderUsageWindow): number {
+  return Math.round(100 - Math.max(0, Math.min(100, window.usedPercent)));
+}
 function resetMillis(window: ServerProviderUsageWindow): number | null {
   if (window.resetsAt === undefined) return null;
   const at = Date.parse(window.resetsAt);
 @@ -184,9 +189,9 @@ export function elapsedShare(window: ServerProviderUsageWindow, now: number): nu
 export type LimitPace = "ahead" | "on" | "under";
 /**
- * Usage against the clock. The bar is the whole window, so the elapsed share
+ * Usage against the clock. Spending evenly leaves the same share of quota as
- * is also where even spending would have put the fill; within five points of
+ * there is time left in the window; within five points of that counts as on
- * it counts as on pace.
+ * pace, further ahead means the window may run dry first.
  */
 export function paceOf(window: ServerProviderUsageWindow, now: number): LimitPace | null {
   const elapsed = elapsedShare(window, now);