fix(billing): align TeamUsage with backend PR #616

app/src/components/settings/panels/billing/InferenceBudget.tsx

@@ -32,21 +32,9 @@ const InferenceBudget = ({ teamUsage, isLoadingCredits }: InferenceBudgetProps)
             }}
           />
         </div>
-        <div className="flex items-center justify-between">
-          <span className="text-[11px] text-stone-500">
-            Daily usage: ${teamUsage.dailyUsage.toFixed(3)}
-          </span>
-          <span className="text-[11px] text-stone-500">
-            {(
-              (teamUsage.totalInputTokensThisCycle + teamUsage.totalOutputTokensThisCycle) /
-              1000
-            ).toFixed(1)}
-            k tokens this cycle
-          </span>
-        </div>
         <div className="mt-1 flex items-center justify-between">
           <span className="text-[11px] text-stone-500">
-            10-hour cap: ${teamUsage.fiveHourSpendUsd.toFixed(2)} / $
+            5-hour cap: ${teamUsage.cycleLimit5hr.toFixed(2)} / $
             {teamUsage.fiveHourCapUsd.toFixed(2)}
           </span>
           <span className="text-[11px] text-stone-500">

app/src/hooks/useUsageState.ts

@@ -74,7 +74,7 @@ export function useUsageState(): UsageState {
 
   const usagePct10h =
     teamUsage && teamUsage.fiveHourCapUsd > 0
-      ? Math.min(1, teamUsage.fiveHourSpendUsd / teamUsage.fiveHourCapUsd)
+      ? Math.min(1, teamUsage.cycleLimit5hr / teamUsage.fiveHourCapUsd)
       : 0;
 
   const usagePct7d =
@@ -86,9 +86,9 @@ export function useUsageState(): UsageState {
 
   const isRateLimited =
     teamUsage !== null &&
-    !teamUsage.bypassRateLimit &&
+    !teamUsage.bypassCycleLimit &&
     teamUsage.fiveHourCapUsd > 0 &&
-    teamUsage.fiveHourSpendUsd >= teamUsage.fiveHourCapUsd;
+    teamUsage.cycleLimit5hr >= teamUsage.fiveHourCapUsd;
 
   const isAtLimit = isBudgetExhausted || isRateLimited;
 

app/src/pages/Conversations.tsx

@@ -1219,9 +1219,9 @@ const Conversations = () => {
             )}
           {teamUsage &&
             (teamUsage.remainingUsd <= 0 ||
-              (!teamUsage.bypassRateLimit &&
+              (!teamUsage.bypassCycleLimit &&
                 teamUsage.fiveHourCapUsd > 0 &&
-                teamUsage.fiveHourSpendUsd >= teamUsage.fiveHourCapUsd)) && (
+                teamUsage.cycleLimit5hr >= teamUsage.fiveHourCapUsd)) && (
               <div className="mb-3 p-3 rounded-xl bg-coral-50 border border-coral-200 flex items-center justify-between gap-3">
                 <div className="flex items-center gap-2 min-w-0">
                   <svg
@@ -1257,12 +1257,12 @@ const Conversations = () => {
               <div className="relative group">
                 {teamUsage ? (
                   <div className="flex items-center gap-2">
-                    {!teamUsage.bypassRateLimit && (
+                    {!teamUsage.bypassCycleLimit && (
                       <LimitPill
                         label="5h"
                         usedPct={
                           teamUsage.fiveHourCapUsd > 0
-                            ? Math.min(1, teamUsage.fiveHourSpendUsd / teamUsage.fiveHourCapUsd)
+                            ? Math.min(1, teamUsage.cycleLimit5hr / teamUsage.fiveHourCapUsd)
                             : 0
                         }
                       />
@@ -1286,11 +1286,11 @@ const Conversations = () => {
                 {teamUsage && (
                   <div className="absolute bottom-full right-0 mb-2 hidden group-hover:block z-50">
                     <div className="bg-stone-900 text-white text-[10px] rounded-lg px-3 py-2 shadow-lg whitespace-nowrap space-y-1.5">
-                      {!teamUsage.bypassRateLimit && (
+                      {!teamUsage.bypassCycleLimit && (
                         <div className="flex items-center justify-between gap-4">
                           <span className="text-stone-400">5-hour limit</span>
                           <span>
-                            ${teamUsage.fiveHourSpendUsd.toFixed(2)} / $
+                            ${teamUsage.cycleLimit5hr.toFixed(2)} / $
                             {teamUsage.fiveHourCapUsd.toFixed(2)}
                             {teamUsage.fiveHourResetsAt && (
                               <span className="text-stone-400 ml-1">

app/src/services/api/creditsApi.ts

@@ -9,27 +9,20 @@ export interface CreditBalance {
 export interface TeamUsage {
   remainingUsd: number;
   cycleBudgetUsd: number;
-  dailyUsage: number;
-  totalInputTokensThisCycle: number;
-  totalOutputTokensThisCycle: number;
-  /**
-   * Rolling inference window: USD spent in the last 10 hours (server-enforced window).
-   * JSON field name is historical (`fiveHour*`).
-   */
-  fiveHourSpendUsd: number;
-  /**
-   * Max USD allowed in that 10-hour rolling window for the current subscription tier
-   * (FREE / BASIC / PRO). Backend sets the amount; the window length is fixed server-side.
-   */
+  /** Amount spent in the current 5-hour fixed window (USD) */
+  cycleLimit5hr: number;
+  /** Amount spent in the current 7-day cycle (USD) */
+  cycleLimit7day: number;
+  /** Max USD allowed in the 5-hour window for the current subscription tier */
   fiveHourCapUsd: number;
-  /** ISO timestamp when the oldest rolling-window entry expires (null if window is empty) */
+  /** ISO timestamp when the 5-hour window resets (null if window is empty) */
   fiveHourResetsAt: string | null;
   /** ISO timestamp when the current weekly cycle started */
   cycleStartDate: string;
   /** ISO timestamp when the current weekly cycle ends */
   cycleEndsAt: string;
-  /** When true, the 10-hour rolling window rate limit is not enforced for this user (test/internal accounts) */
-  bypassRateLimit?: boolean;
+  /** When true, cycle limits are not enforced for this user (test/internal accounts) */
+  bypassCycleLimit?: boolean;
 }
 
 export interface TopUpResult {

scripts/mock-api-core.mjs

@@ -310,12 +310,13 @@ async function handleRequest(req, res) {
       data: {
         cycleBudgetUsd: 10,
         remainingUsd: 10,
-        dailyUsage: 0,
-        totalInputTokensThisCycle: 0,
-        totalOutputTokensThisCycle: 0,
-        spentThisCycleUsd: 0,
-        spentTodayUsd: 0,
+        cycleLimit5hr: 0,
+        cycleLimit7day: 0,
+        fiveHourCapUsd: 5,
+        fiveHourResetsAt: null,
         cycleStartDate: new Date().toISOString(),
+        cycleEndsAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
+        bypassCycleLimit: false,
       },
     });
     return;