feat(web): 基于 /backend-api/subscriptions 的轻量 Codex Subscription

apps/web/src/features/accounts/AccountsPage.module.scss

@@ -633,6 +633,11 @@
   font-weight: 750;
 }
 
+.accountPlanBadge[role='button'],
+.accountCardPlan[role='button'] {
+  cursor: pointer;
+}
+
 .accountResetCreditsButton {
   display: inline-flex;
   align-items: center;

apps/web/src/features/accounts/AccountsPage.tsx

@@ -223,6 +223,13 @@
   type DetailTab,
 } from '@/features/accounts/model/accountsPagePresentation';
 import { buildAccountSubscriptionPresentation } from '@/features/accounts/model/accountSubscriptionPresentation';
+import {
+  ensureCodexSubscriptionFresh,
+  ensureCodexSubscriptionTargetsFresh,
+  resolveCodexSubscriptionRefreshAuthIndex,
+  shouldShowCodexSubscriptionTab,
+  useCodexSubscriptionStore,
+} from '@/features/accounts/model/codexSubscription';
 import { resolveAccountQuotaWindowUsageAndForecast } from '@/features/accounts/model/accountQuotaWindowUsagePresentation';
 import { formatCompactNumber, formatCompactUsd, formatUsd } from '@/utils/usage';
 import {
@@ -291,6 +298,7 @@
   AccountOverviewTab,
   AccountProviderTabs,
   AccountQuotaTab,
+  AccountSubscriptionTab,
   AccountsBatchDeletePreview,
 } from '@/features/accounts/components';
 import {
@@ -316,6 +324,7 @@
 import type { AuthFileItem, CodexQuotaState, XaiQuotaState } from '@/types';
 import {
   fetchCodexResetCredits,
+  resolveCodexChatgptAccountId,
   type CodexResetCreditsData,
 } from '@/utils/quota';
 import type { AuthJsonInputType } from '@/features/authFiles/sessionAuthConverter';
@@ -1387,6 +1396,8 @@
   const [detailTab, setDetailTab] = useState<DetailTab>(
     () => initialWorkspaceUrlState.current.detailTab
   );
+  const [subscriptionRefreshing, setSubscriptionRefreshing] = useState(false);
+  const subscriptionEntries = useCodexSubscriptionStore((state) => state.entries);
   const [providerFilter, setProviderFilter] = useState(
     () => initialWorkspaceUrlState.current.providerFilter
   );
@@ -3982,27 +3993,29 @@
     return { codexQuotaBySelectionKey, codexHeaderSnapshotBySelectionKey };
   }, [files, getDisplayCodexHeaderSnapshot, getDisplayCodexQuota]);
 
-  const rows = useMemo(
-    () =>
-      buildAccountRows(
-        files,
-        baseQuotaStores,
-        effectiveInspectionResults,
-        accountQuotaOverrides,
-        freshAccountInspectionBySelectionKey,
-        credentialEvidenceBoundariesBySelectionKey,
-        credentialStatusBoundaries
-      ),
-    [
-      accountQuotaOverrides,
-      baseQuotaStores,
+  const rows = useMemo(() => {
+    // #742 sort=remaining bakes subscriptionUntilMs on row build; keep this dep
+    // so ready/soft_failed store flips rebuild rows instead of forking list vs sort.
+    void subscriptionEntries;
+    return buildAccountRows(
       files,
-      credentialEvidenceBoundariesBySelectionKey,
-      credentialStatusBoundaries,
+      baseQuotaStores,
       effectiveInspectionResults,
+      accountQuotaOverrides,
       freshAccountInspectionBySelectionKey,
-    ]
-  );
+      credentialEvidenceBoundariesBySelectionKey,
+      credentialStatusBoundaries
+    );
+  }, [
+    accountQuotaOverrides,
+    baseQuotaStores,
+    files,
+    credentialEvidenceBoundariesBySelectionKey,
+    credentialStatusBoundaries,
+    effectiveInspectionResults,
+    freshAccountInspectionBySelectionKey,
+    subscriptionEntries,
+  ]);
   const codexStatusBySelectionKey = useMemo(() => {
     const statusMap = new Map<string, ReturnType<typeof getAuthFileCodexStatus>>();
     rows.forEach((row) => {
@@ -4360,6 +4373,11 @@
     () => rows.find((row) => row.selectionKey === selectedRowKey) ?? null,
     [rows, selectedRowKey]
   );
+  useEffect(() => {
+    ensureCodexSubscriptionTargetsFresh(filteredRows, (row) =>
+      row.provider === CODEX_CONFIG.type ? getActiveCodexQuota(row.raw) : undefined
+    );
+  }, [filteredRows, getActiveCodexQuota, subscriptionEntries]);
   const accountHistoryTargets = useMemo(() => buildAccountHistoryTargetEntries(rows), [rows]);
   const accountHistoryAutoContextKey = useMemo(
     () =>
@@ -5087,6 +5105,19 @@
     ]
   );
 
+  const openAccountSubscriptionDetail = useCallback(
+    (row: AccountRow, event?: { stopPropagation(): void; preventDefault(): void }) => {
+      event?.stopPropagation();
+      event?.preventDefault();
+      const quota = row.provider === CODEX_CONFIG.type ? getActiveCodexQuota(row.raw) : undefined;
+      void openAccountDetail(
+        row,
+        shouldShowCodexSubscriptionTab(row, quota) ? 'subscription' : 'overview'
+      );
+    },
+    [getActiveCodexQuota, openAccountDetail]
+  );
+
   const closeAccountDetail = useCallback(() => {
     detailAnchorRef.current = null;
     setDetailAnchor(null);
@@ -7044,7 +7075,7 @@
       };
       void runResetTransaction();
     },
     [
       canResetCodexQuota,
       getDisplayAccount,
       invalidateCodexCredentialStatusForSelectionKeys,
@@ -8459,9 +8490,14 @@
     });
     const codexQuotaState =
       row.provider === CODEX_CONFIG.type ? getActiveCodexQuota(row.raw) : undefined;
+    const subscriptionAccountId = resolveCodexChatgptAccountId(row.raw);
+    const subscriptionEntry = subscriptionAccountId
+      ? subscriptionEntries[subscriptionAccountId]
+      : undefined;
     const subscriptionPresentation = buildAccountSubscriptionPresentation({
       row,
       codexQuota: codexQuotaState,
+      subscriptionsRecord: subscriptionEntry?.status === 'ready' ? subscriptionEntry.record : null,
     });
     const codexResetCreditsCount =
       codexQuotaState?.rateLimitResetCreditsAvailableCount ??
@@ -8768,11 +8804,28 @@
                                 ? styles.accountPlanBadgeDaysWarning
                                 : styles.accountPlanBadgeDaysNormal
                             : '';
+                        const planOpenProps = ctx.subscriptionPresentation.isPaidCodex
+                          ? {
+                              role: 'button' as const,
+                              tabIndex: 0,
+                              onClick: (event: ReactMouseEvent) =>
+                                openAccountSubscriptionDetail(row, event),
+                              onKeyDown: (event: KeyboardEvent) => {
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                  openAccountSubscriptionDetail(row, event);
+                                }
+                              },
+                              'aria-label': t('accounts.open_subscription_detail', {
+                                name: getDisplayFileName(row.fileName),
+                              }),
+                            }
+                          : {};
                         return ctx.subscriptionPresentation.planPresentation?.shortLabel &&
                           ctx.subscriptionPresentation.planPresentation.shortLabel !== '-' ? (
                           <span
                             className={styles.accountPlanBadge}
                             title={ctx.subscriptionPresentation.planPresentation?.fullLabel}
+                            {...planOpenProps}
                           >
                             {ctx.subscriptionPresentation.planPresentation.shortLabel}
                             {remainingDays !== null ? (
@@ -8794,6 +8847,7 @@
                               days: remainingDays,
                               defaultValue: `剩余 ${remainingDays} 天`,
                             })}
+                            {...planOpenProps}
                           >
                             {t('accounts.list_plan_remaining_days', {
                               days: remainingDays,
@@ -9233,7 +9287,25 @@
                     </div>
                   </div>
 
-                  <div className={styles.accountCardPlan}>
+                  <div
+                    className={styles.accountCardPlan}
+                    {...(ctx.subscriptionPresentation.isPaidCodex
+                      ? {
+                          role: 'button' as const,
+                          tabIndex: 0,
+                          onClick: (event: ReactMouseEvent) =>
+                            openAccountSubscriptionDetail(row, event),
+                          onKeyDown: (event: KeyboardEvent) => {
+                            if (event.key === 'Enter' || event.key === ' ') {
+                              openAccountSubscriptionDetail(row, event);
+                            }
+                          },
+                          'aria-label': t('accounts.open_subscription_detail', {
+                            name: getDisplayFileName(row.fileName),
+                          }),
+                        }
+                      : {})}
+                  >
                     <span
                       className={styles.accountPlanName}
                       title={ctx.subscriptionPresentation.planPresentation?.fullLabel}
@@ -9408,9 +9480,22 @@
 
     const providerIcon = getAuthFileIcon(selectedRow.provider, resolvedTheme);
 
+    const selectedSubscriptionAccountId = resolveCodexChatgptAccountId(selectedRow.raw);
+    const selectedSubscriptionEntry = selectedSubscriptionAccountId
+      ? subscriptionEntries[selectedSubscriptionAccountId] ?? { status: 'idle' as const }
+      : { status: 'idle' as const };
+    const selectedSubscriptionRecord =
+      selectedSubscriptionEntry.status === 'ready' ? selectedSubscriptionEntry.record : null;
+    const showSubscriptionTab = shouldShowCodexSubscriptionTab(
+      selectedRow,
+      selectedRow.provider === CODEX_CONFIG.type ? getActiveCodexQuota(selectedRow.raw) : undefined
+    );
     const detailTabs: Array<{ id: DetailTab; label: string }> = [
       { id: 'overview', label: t('accounts.detail_tab_overview') },
       { id: 'quota', label: t('accounts.detail_tab_quota') },
+      ...(showSubscriptionTab
+        ? [{ id: 'subscription' as const, label: t('accounts.detail_tab_subscription') }]
+        : []),
       { id: 'config', label: t('accounts.detail_tab_config') },
       { id: 'models', label: t('accounts.detail_tab_models') },
       { id: 'diagnostics', label: t('accounts.detail_tab_diagnostics') },
@@ -9482,6 +9567,7 @@
       history: accountHistoryByRowKey.get(selectedRow.selectionKey) ?? null,
       valueRow,
       codexQuota: selectedCodexQuota,
+      codexSubscription: selectedSubscriptionRecord,
       xaiQuota:
         selectedRow.provider === XAI_CONFIG.type
           ? getCredentialScopedQuotaState(xaiQuota, selectedRow.raw)
@@ -9498,6 +9584,43 @@
     const modelsTargetMatches = modelsSelectionKey === selectedRow.selectionKey;
 
     const renderActiveDetail = () => {
+      if (detailTab === 'subscription' && showSubscriptionTab) {
+        return (
+          <AccountSubscriptionTab
+            entry={selectedSubscriptionEntry}
+            missingAccountId={!selectedSubscriptionAccountId}
+            refreshing={subscriptionRefreshing || selectedSubscriptionEntry.status === 'loading'}
+            onRefresh={() => {
+              if (!selectedSubscriptionAccountId) return;
+              const siblingAuthIndexes = [
+                ...new Set(
+                  filteredRows
+                    .filter(
+                      (row) =>
+                        resolveCodexChatgptAccountId(row.raw) === selectedSubscriptionAccountId
+                    )
+                    .map((row) =>
+                      normalizeAuthIndex(row.authIndex ?? row.raw.auth_index ?? row.raw.authIndex)
+                    )
+                    .filter((index): index is string => Boolean(index))
+                ),
+              ];
+              const authIndex = resolveCodexSubscriptionRefreshAuthIndex(
+                selectedSubscriptionAccountId,
+                selectedRow.authIndex ?? '',
+                siblingAuthIndexes
+              );
+              if (!authIndex) return;
+              setSubscriptionRefreshing(true);
+              void ensureCodexSubscriptionFresh({
+                accountId: selectedSubscriptionAccountId,
+                authIndex,
+                force: true,
+              }).finally(() => setSubscriptionRefreshing(false));
+            }}
+          />
+        );
+      }
       if (detailTab === 'quota') {
         return (
           <AccountQuotaTab

apps/web/src/features/accounts/accountsWorkspaceWiring.test.ts

@@ -112,6 +112,7 @@ describe('accounts workspace wiring', () => {
       locale.accounts.detail_tab_models,
       locale.accounts.detail_tab_diagnostics,
     ]).toEqual(expectedLabels);
+    expect(locale.accounts.detail_tab_subscription).toBeTypeOf('string');
   });
 
   it.each([en, ru, zhCN, zhTW])('keeps credential-configuration copy complete', (locale) => {