feat: summarize remaining Codex quota

Author: AndrewZhuCC

apps/web/src/components/quota/QuotaSection.test.tsx

@@ -1,4 +1,4 @@
-import { act, useEffect } from 'react';
+import { act, useEffect, type ReactNode } from 'react';
 import { create, type ReactTestInstance, type ReactTestRenderer } from 'react-test-renderer';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { AuthFileItem } from '@/types';
@@ -162,6 +162,7 @@ const renderSection = (
   options: {
     config?: QuotaConfig<TestQuotaState, TestQuotaData>;
     files?: AuthFileItem[];
+    summary?: ReactNode;
   } = {}
 ) => {
   let renderer!: ReactTestRenderer;
@@ -173,6 +174,7 @@ const renderSection = (
         loading={false}
         disabled={false}
         accountDisplayMode="masked"
+        summary={options.summary}
       />
     );
   });
@@ -224,6 +226,18 @@ describe('QuotaSection account display mode', () => {
     (mocks.quotaStoreState.setCodexQuota as ReturnType<typeof vi.fn>).mockClear();
   });
 
+  it('renders an optional section summary before credential cards', () => {
+    const renderer = renderSection({ summary: <div data-test-summary>aggregate</div> });
+    const summary = renderer.root.findByProps({ 'data-test-summary': true });
+    const grid = renderer.root.findByProps({ className: 'codex-grid' });
+
+    expect(summary.children).toContain('aggregate');
+    expect(summary.parent).toBe(grid.parent);
+    expect(summary.parent!.children.indexOf(summary)).toBeLessThan(
+      summary.parent!.children.indexOf(grid)
+    );
+  });
+
   it('uses masked names in single quota refresh notifications', async () => {
     mocks.fetchQuota.mockResolvedValue({ resetCredits: 1 });
     const renderer = renderSection();

apps/web/src/components/quota/QuotaSection.tsx

@@ -2,7 +2,14 @@
  * Generic quota section component.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
@@ -130,6 +137,7 @@ interface QuotaSectionProps<TState extends QuotaStatusState, TData> {
   accountDisplayMode?: QuotaAccountDisplayMode;
   onAccountDisplayModeChange?: (mode: QuotaAccountDisplayMode) => void;
   headerSnapshotLookup?: UsageHeaderSnapshotLookup;
+  summary?: ReactNode;
 }
 
 export function QuotaSection<TState extends QuotaStatusState, TData>({
@@ -145,6 +153,7 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
   accountDisplayMode,
   onAccountDisplayModeChange,
   headerSnapshotLookup,
+  summary,
 }: QuotaSectionProps<TState, TData>) {
   const { t } = useTranslation();
   const resolvedTheme: ResolvedTheme = useThemeStore((state) => state.resolvedTheme);
@@ -560,6 +569,7 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
         </div>
       }
     >
+      {filteredFiles.length > 0 && summary}
       {filteredFiles.length === 0 ? (
         <EmptyState
           title={t(`${config.i18nPrefix}.empty_title`)}

apps/web/src/components/quota/index.ts

@@ -13,6 +13,7 @@ export {
   XAI_CONFIG,
   buildObservedCodexQuotaState,
   getQuotaStoreKey,
+  getScopedQuotaState,
   resolveQuotaDisplayState,
 } from './quotaConfigs';
 export type { QuotaConfig } from './quotaConfigs';

apps/web/src/features/authFiles/AuthFilesPage.tsx

@@ -63,9 +63,6 @@ import {
 import {
   monitoringAnalyticsApi,
   usageServiceApi,
-  type MonitoringAnalyticsCredentialStatRow,
-  type MonitoringAnalyticsInclude,
-  type MonitoringAnalyticsResponse,
   type QuotaCooldownInfo,
   type UsageHeaderSnapshot,
 } from '@/services/api/usageService';
@@ -80,6 +77,10 @@ import { useAuthFilesOauth } from '@/features/authFiles/hooks/useAuthFilesOauth'
 import { useAuthFilesPrefixProxyEditor } from '@/features/authFiles/hooks/useAuthFilesPrefixProxyEditor';
 import { useAuthFilesStatusBarCache } from '@/features/authFiles/hooks/useAuthFilesStatusBarCache';
 import { useAntigravitySubscriptions } from '@/features/authFiles/hooks/useAntigravitySubscriptions';
+import {
+  fetchAuthFileUsageRows,
+  type AuthFileUsageRows,
+} from '@/features/authFiles/hooks/useAuthFileUsageAnalytics';
 import {
   BATCH_BAR_BASE_TRANSFORM,
   BATCH_BAR_HIDDEN_TRANSFORM,
@@ -134,13 +135,6 @@ import type { AuthFileItem, CodexQuotaState } from '@/types';
 import { useAuthStore, useNotificationStore, useQuotaStore, useThemeStore } from '@/stores';
 import styles from './AuthFilesPage.module.scss';
 
-const AUTH_FILE_USAGE_FIVE_HOUR_MS = 5 * 60 * 60 * 1000;
-const AUTH_FILE_USAGE_WEEKLY_MS = 7 * 24 * 60 * 60 * 1000;
-const AUTH_FILE_USAGE_HISTORY_FROM_MS = 1;
-const AUTH_FILE_USAGE_ANALYTICS_INCLUDE = {
-  credential_stats: true,
-} satisfies MonitoringAnalyticsInclude;
-
 const hasInlineQuotaLayout = (file: AuthFileItem): boolean => {
   if (isRuntimeOnlyAuthFile(file)) return false;
   const provider = resolveAuthProvider(file);
@@ -199,25 +193,15 @@ type QuotaCooldownState = {
   items: Map<string, QuotaCooldownInfo>;
 };
 
-type AuthFileUsageRows = {
-  retained: MonitoringAnalyticsCredentialStatRow[];
-  fiveHour: MonitoringAnalyticsCredentialStatRow[];
-  weekly: MonitoringAnalyticsCredentialStatRow[];
-};
+const getQuotaCooldownContextKey = (managerServiceBase: string, managementKey: string): string =>
+  `${managerServiceBase}\u0000${managementKey}`;
 
 const EMPTY_AUTH_FILE_USAGE_ROWS: AuthFileUsageRows = {
   retained: [],
   fiveHour: [],
   weekly: [],
 };
 
-const getQuotaCooldownContextKey = (managerServiceBase: string, managementKey: string): string =>
-  `${managerServiceBase}\u0000${managementKey}`;
-
-const readCredentialStats = (
-  response: MonitoringAnalyticsResponse
-): MonitoringAnalyticsCredentialStatRow[] => response.credential_stats ?? [];
-
 export function AuthFilesPage() {
   const { t } = useTranslation();
   const showNotification = useNotificationStore((state) => state.showNotification);
@@ -654,38 +638,13 @@ export function AuthFilesPage() {
     }
 
     const id = ++authFileUsageReqId.current;
-    const nowMs = Date.now();
-    const buildRequest = (fromMs: number) => ({
-      from_ms: fromMs,
-      to_ms: nowMs,
-      now_ms: nowMs,
-      include: AUTH_FILE_USAGE_ANALYTICS_INCLUDE,
-    });
-
     try {
-      const [retained, fiveHour, weekly] = await Promise.all([
-        monitoringAnalyticsApi.getAnalytics(
-          managerServiceBase,
-          managementKey,
-          buildRequest(AUTH_FILE_USAGE_HISTORY_FROM_MS)
-        ),
-        monitoringAnalyticsApi.getAnalytics(
-          managerServiceBase,
-          managementKey,
-          buildRequest(nowMs - AUTH_FILE_USAGE_FIVE_HOUR_MS)
-        ),
-        monitoringAnalyticsApi.getAnalytics(
-          managerServiceBase,
-          managementKey,
-          buildRequest(nowMs - AUTH_FILE_USAGE_WEEKLY_MS)
-        ),
-      ]);
-      if (id !== authFileUsageReqId.current) return;
-      setAuthFileUsageRows({
-        retained: readCredentialStats(retained),
-        fiveHour: readCredentialStats(fiveHour),
-        weekly: readCredentialStats(weekly),
+      const nextRows = await fetchAuthFileUsageRows({
+        managerServiceBase,
+        managementKey,
       });
+      if (id !== authFileUsageReqId.current) return;
+      setAuthFileUsageRows(nextRows);
     } catch {
       if (id === authFileUsageReqId.current) {
         setAuthFileUsageRows(EMPTY_AUTH_FILE_USAGE_ROWS);

apps/web/src/features/authFiles/hooks/useAuthFileUsageAnalytics.test.tsx

@@ -0,0 +1,89 @@
+import { useEffect } from 'react';
+import { act, create, type ReactTestRenderer } from 'react-test-renderer';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { MonitoringAnalyticsResponse } from '@/services/api/usageService';
+import { useAuthFileUsageAnalytics } from './useAuthFileUsageAnalytics';
+
+const { mocks } = vi.hoisted(() => ({
+  mocks: {
+    getAnalytics: vi.fn(),
+  },
+}));
+
+vi.mock('@/services/api/usageService', () => ({
+  monitoringAnalyticsApi: {
+    getAnalytics: mocks.getAnalytics,
+  },
+}));
+
+function Harness({ onRows }: { onRows: (value: { fiveHour: number; weekly: number }) => void }) {
+  const { rows, load } = useAuthFileUsageAnalytics({
+    managerServiceBase: 'http://manager.local:18317',
+    managementKey: 'test-key',
+    enabled: true,
+    includeRetained: false,
+  });
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  useEffect(() => {
+    onRows({ fiveHour: rows.fiveHour.length, weekly: rows.weekly.length });
+  }, [onRows, rows]);
+
+  return null;
+}
+
+describe('useAuthFileUsageAnalytics', () => {
+  beforeEach(() => {
+    (
+      globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
+    ).IS_REACT_ACT_ENVIRONMENT = true;
+    mocks.getAnalytics.mockReset();
+  });
+
+  it('loads only 5-hour and weekly credential stats when retained history is disabled', async () => {
+    const response = (id: string): MonitoringAnalyticsResponse => ({
+      generated_at_ms: 1_700_000_000_000,
+      granularity: 'hour',
+      credential_stats: [
+        {
+          id,
+          auth_file_snapshot: 'codex-main.json',
+          auth_index: '0',
+          calls: 1,
+          success_calls: 1,
+          failure_calls: 0,
+          success_rate: 1,
+          input_tokens: 0,
+          output_tokens: 0,
+          cached_tokens: 0,
+          cache_read_tokens: 0,
+          cache_creation_tokens: 0,
+          total_tokens: 1,
+          cost: 0.01,
+          average_latency_ms: null,
+          last_seen_ms: 0,
+        },
+      ],
+    });
+    mocks.getAnalytics
+      .mockResolvedValueOnce(response('five-hour'))
+      .mockResolvedValueOnce(response('weekly'));
+    const onRows = vi.fn();
+    let renderer!: ReactTestRenderer;
+
+    await act(async () => {
+      renderer = create(<Harness onRows={onRows} />);
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    expect(mocks.getAnalytics).toHaveBeenCalledTimes(2);
+    expect(mocks.getAnalytics.mock.calls[0]?.[2].include).toEqual({ credential_stats: true });
+    expect(onRows).toHaveBeenLastCalledWith({ fiveHour: 1, weekly: 1 });
+
+    act(() => renderer.unmount());
+  });
+});