feat(usage): show reserve and deficit pace on Limits

apps/mobile/src/features/usage/UsageLimitsPooled.tsx

@@ -6,6 +6,7 @@ import {
   collectLimitNotices,
   collectLimitPools,
   cursorUsageWindowDetails,
+  describeWindowPace,
   displayLimitWindows,
   formatDuration,
   formatResetsIn,
@@ -23,11 +24,10 @@ import { AppText as Text } from "../../components/AppText";
 import { ProviderIcon } from "../../components/ProviderIcon";
 import { SettingsScreen } from "../settings/components/SettingsScreen";
 import { environmentPresentations } from "../../state/presentation";
-import { ResetCredits } from "./UsageLimitsSection";
+import { PaceLine, ResetCredits } from "./UsageLimitsSection";
 import { useProviderColors } from "./usageProviders";
 
 const DRIVER_LABEL: Partial<Record<string, string>> = { codex: "Codex", claudeAgent: "Claude" };
-const PACE_LABEL = { ahead: "Ahead of pace", on: "On pace", under: "Under pace" } as const;
 
 function accountName(account: LimitAccount) {
   if (account.displayName) return account.displayName;
@@ -110,9 +110,6 @@ function PoolWindowCard({
             <Text className="text-sm text-foreground-muted">left</Text>
           </View>
         </View>
-        {pool.pace ? (
-          <Text className="text-xs text-foreground-tertiary">{PACE_LABEL[pool.pace]}</Text>
-        ) : null}
       </View>
       {description ? <Text className="text-xs text-foreground-muted">{description}</Text> : null}
       {nextRefill ? (
@@ -124,21 +121,28 @@ function PoolWindowCard({
       <View className="flex-row gap-1">
         {pool.columns.map(({ account, window }, index) => {
           if (!window) return <View key={account.key} className="h-7 min-w-0 flex-1" />;
+          const pace = describeWindowPace(window, now);
           return (
             <Pressable
               key={account.key}
               accessibilityRole="button"
-              accessibilityLabel={`Segment ${index + 1}, ${accountName(account)}, ${remainingPercent(window)}% left`}
+              accessibilityLabel={`Segment ${index + 1}, ${accountName(account)}, ${pace.summary}`}
               accessibilityHint="Show account details"
               onPress={() => openAccount(account)}
-              className="h-7 min-w-0 flex-1 overflow-hidden rounded-md bg-subtle"
+              className="relative h-7 min-w-0 flex-1 overflow-visible rounded-md bg-transparent"
             >
-              <AccountSegment
-                remaining={remainingPercent(window)}
-                color={color}
-                pending={Boolean(window.resetsAt)}
-              />
-              <View pointerEvents="none" className="absolute inset-0 items-center justify-center">
+              <View className="absolute inset-0 overflow-hidden rounded-md bg-subtle">
+                <AccountSegment
+                  remaining={pace.remaining}
+                  color={color}
+                  pending={Boolean(window.resetsAt)}
+                />
+              </View>
+              {pace.timeLeft !== null ? <PaceLine percent={pace.timeLeft} /> : null}
+              <View
+                pointerEvents="none"
+                className="absolute inset-0 z-20 items-center justify-center"
+              >
                 <Text className="text-xs font-t3-medium tabular-nums text-foreground">
                   {index + 1}
                 </Text>
@@ -215,7 +219,7 @@ export function UsageLimitsSection({
     selectedEnvironmentIds === null
       ? presentations
       : new Map([...presentations].filter(([id]) => selectedEnvironmentIds.has(id)));
-  const pools = collectLimitPools(collectLimitAccounts(selected), now);
+  const pools = collectLimitPools(collectLimitAccounts(selected));
   const notices = collectLimitNotices(selected);
   const colors = useProviderColors();
   const cursorPromptAt =
@@ -304,6 +308,29 @@ type AccountScreenProps = StaticScreenProps<{
   now: number;
 }>;
 
+function AccountPace({
+  window,
+  now,
+}: {
+  readonly window: Parameters<typeof describeWindowPace>[0];
+  readonly now: number;
+}) {
+  const pace = describeWindowPace(window, now);
+  return (
+    <>
+      <Text className="text-3xl font-t3-bold tabular-nums text-foreground">
+        {pace.remaining}% left
+      </Text>
+      {pace.detail ? (
+        <View className="gap-1">
+          <Text className="text-sm text-foreground-muted">{pace.summary}</Text>
+          <Text className="text-sm text-foreground-muted">{pace.detail}</Text>
+        </View>
+      ) : null}
+    </>
+  );
+}
+
 /** Resolve the account again so live quota and credit updates reach the open detail screen. */
 export function UsageLimitAccountScreen({ route }: AccountScreenProps) {
   const insets = useSafeAreaInsets();
@@ -317,7 +344,7 @@ export function UsageLimitAccountScreen({ route }: AccountScreenProps) {
       : new Map([...presentations].filter(([id]) => selectedIds.has(id)));
   const accounts = collectLimitAccounts(selected);
   const account = accounts.find((candidate) => candidate.key === accountKey);
-  const pool = collectLimitPools(accounts, now)
+  const pool = collectLimitPools(accounts)
     .find((candidate) => candidate.driver === account?.driver)
     ?.windows.find((candidate) => candidate.id === windowId && candidate.kind === windowKind);
   const window = pool?.members.find((member) => member.account.key === accountKey)?.window;
@@ -363,9 +390,7 @@ export function UsageLimitAccountScreen({ route }: AccountScreenProps) {
             </View>
             <View className="gap-3 rounded-[24px] border-continuous bg-card p-4">
               <Text className="text-sm font-t3-medium text-foreground">{window.label}</Text>
-              <Text className="text-3xl font-t3-bold tabular-nums text-foreground">
-                {remainingPercent(window)}% left
-              </Text>
+              <AccountPace window={window} now={now} />
               {window.resetsAt ? (
                 <Text selectable className="text-sm text-foreground-muted">
                   Resets{" "}

apps/mobile/src/features/usage/UsageLimitsSection.test.ts

@@ -33,6 +33,7 @@ vi.mock("@effect/atom-react", () => ({ useAtomValue: () => state.presentations }
 vi.mock("react-native", () => ({ Alert: {}, Pressable: "button", View: "div" }));
 vi.mock("../../components/AppText", () => ({ AppText: "span" }));
 vi.mock("../../components/ProviderIcon", () => ({ ProviderIcon: () => null }));
+vi.mock("../../components/AppSymbol", () => ({ SymbolView: () => null }));
 vi.mock("./usageProviders", () => ({ useProviderColors: () => ({}) }));
 vi.mock("../../state/presentation", () => ({
   environmentPresentations: { presentationsAtom: null },

apps/mobile/src/features/usage/UsageLimitsSection.tsx

@@ -9,12 +9,10 @@ import type {
   UsageProviderKind,
 } from "@t3tools/contracts";
 import {
-  elapsedShare,
+  describeWindowPace,
   formatDuration,
   formatResetsIn,
   limitsNotice,
-  paceOf,
-  remainingPercent,
 } from "@t3tools/shared/usageLimits";
 import { type ReactNode, useEffect, useEffectEvent, useRef, useState } from "react";
 import { refreshUsageLimits } from "@t3tools/client-runtime/state/usage";
@@ -27,8 +25,6 @@ import { serverEnvironment } from "../../state/server";
 import { useAtomCommand } from "../../state/use-atom-command";
 import { useProviderColors } from "./usageProviders";
 
-const PACE_LABEL = { ahead: "ahead of pace", on: "on pace", under: "under pace" } as const;
-
 type Driver = ServerProvider["driver"];
 
 /** The series colour the usage chart uses for this driver, so the two views read as one. */
@@ -39,60 +35,60 @@ function useBarColor(driver: Driver): string | null {
   return kind ? colors[kind] : null;
 }
 
+/** Grey tick, 10% taller than the bar on each side. Same mark as the web bar. */
+export function PaceLine({ percent }: { readonly percent: number }) {
+  return (
+    <View
+      pointerEvents="none"
+      className="absolute z-10 w-0.5 rounded-full border border-background bg-foreground/70"
+      style={{ left: `${percent}%`, marginLeft: -1, top: "-10%", height: "120%" }}
+    />
+  );
+}
+
 /**
- * One window as a bar spanning its whole duration: the fill is quota left,
- * the hairline is how much of the window is left, so even spending keeps the
- * fill on the line. Pace sits under the left edge, the countdown under the
- * right, so a row reads in one glance.
+ * One window as a bar spanning its whole duration. The fill is quota left.
+ * The line is how much of the window is left. The countdown sits under the bar.
  */
 function WindowRow(props: {
   readonly window: ServerProviderUsageWindow;
   readonly color: string | null;
   readonly now: number;
 }) {
   const { window, now } = props;
-  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 pace = describeWindowPace(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">
-          {remaining}% left
-        </Text>
+        <View className="flex-row items-center gap-1.5">
+          <Text className="text-sm font-t3-medium tabular-nums text-foreground">
+            {pace.remaining}% left
+          </Text>
+        </View>
       </View>
-      <View className="h-3 justify-center">
+      <View className="relative h-3.5 justify-center">
         <View className="h-1.5 flex-row overflow-hidden rounded-full bg-subtle">
           <View
             className={
-              remaining <= 10
+              pace.remaining <= 10
                 ? "h-full rounded-full bg-red-500"
-                : remaining <= 30
+                : pace.remaining <= 30
                   ? "h-full rounded-full bg-amber-500"
                   : "h-full rounded-full bg-foreground"
             }
             style={[
-              { flex: remaining },
-              remaining > 30 && props.color ? { backgroundColor: props.color } : null,
+              { flex: pace.remaining },
+              pace.remaining > 30 && props.color ? { backgroundColor: props.color } : null,
             ]}
           />
-          <View style={{ flex: 100 - remaining }} />
+          <View style={{ flex: 100 - pace.remaining }} />
         </View>
-        {timeLeft !== null ? (
-          <View
-            className="absolute top-0 bottom-0 w-px bg-foreground"
-            style={{ left: `${timeLeft}%`, opacity: 0.6 }}
-          />
-        ) : null}
+        {pace.timeLeft !== null ? <PaceLine percent={pace.timeLeft} /> : null}
       </View>
-      {pace || resetsIn ? (
-        <View className="flex-row justify-between gap-3">
-          <Text className="text-xs text-foreground-tertiary">{pace ? PACE_LABEL[pace] : ""}</Text>
-          <Text className="text-xs tabular-nums text-foreground-tertiary">{resetsIn ?? ""}</Text>
-        </View>
+      {resetsIn ? (
+        <Text className="text-xs tabular-nums text-foreground-tertiary">{resetsIn}</Text>
       ) : null}
     </View>
   );

apps/mobile/src/widgets/subscriptionUsageSnapshot.ts

@@ -49,7 +49,7 @@ function subscriptionUsageProps(
   configuredDrivers: ReadonlySet<string>,
   maxWindowsPerProvider: number,
 ): SubscriptionUsageSnapshot {
-  const pools = collectLimitPools(accounts, now);
+  const pools = collectLimitPools(accounts);
   const checked = accounts
     .filter((account) => account.driver === "codex" || account.driver === "claudeAgent")
     .map((account) => Date.parse(account.limits.checkedAt));

apps/server/src/provider/Layers/codexUsageLimits.test.ts

@@ -58,7 +58,6 @@ describe("codexRateLimitsToLimits", () => {
         kind: "monthly",
         label: "Monthly",
         usedPercent: 80,
-        windowDurationMins: 43_200,
       },
     ]);
   });

apps/server/src/provider/Layers/codexUsageLimits.ts

@@ -81,16 +81,20 @@ function codexRateLimitsToWindows(
   const windows: ServerProviderUsageWindow[] = [];
   for (const [id, window, fallbackMins] of positions) {
     if (!window || !Number.isFinite(window.usedPercent)) continue;
-    const windowDurationMins =
-      typeof window.windowDurationMins === "number" ? window.windowDurationMins : fallbackMins;
-    const kind = kindForDuration(windowDurationMins);
+    // The fallback only names the window. Storing it as a duration would pace
+    // a Free/Go month as if every cycle were 30 days.
+    const reportedMins =
+      typeof window.windowDurationMins === "number" && window.windowDurationMins > 0
+        ? window.windowDurationMins
+        : undefined;
+    const kind = kindForDuration(reportedMins ?? fallbackMins);
     const resetsAt = isoFromEpochSeconds(window.resetsAt);
     windows.push({
       id,
       kind,
       label: labelForKind(kind),
       usedPercent: clampPercent(window.usedPercent),
-      windowDurationMins,
+      ...(reportedMins !== undefined ? { windowDurationMins: reportedMins } : {}),
       ...(resetsAt ? { resetsAt } : {}),
     });
   }