Add Auth Files quota estimate details modal

[WenjieZhao1]

Summary

• add a compact quota details modal for Auth Files quota bars
• reuse the existing Current / Estimated quota window usage data instead of adding a new estimate API
• keep Auth Files rows compact; token and USD details are shown after clicking a quota bar
• include English, Simplified Chinese, and Traditional Chinese labels

Scope

• frontend-only change
• no backend quota logic changes
• no pricing sync or LiteLLM changes
• no deployment changes

Verification

• npm --prefix ./web run lint
• npm --prefix ./web run test
• npm --prefix ./web run typecheck
• npm --prefix ./web run build
• go test ./cmd/... ./internal/...

[gemini-code-assist]

Code Review

This pull request introduces a new QuotaDetailsModal to display detailed quota usage information when clicking on a quota bar, replacing the previous behavior of expanding each row. It updates the QuotaBar component to act as a button, adds corresponding styles, tests, and translation strings. The feedback suggests two improvements: dynamically retrieving the active quota from row.displayQuotas to prevent displaying stale data if the quota is refreshed while the modal is open, and optimizing performance by returning null early in QuotaDetailsModal when no quota is selected to avoid rendering multiple hidden modal DOM elements.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Currently, selectedQuota stores a static snapshot of the quota object at the moment the user clicks the bar. If the row's quota is refreshed (either via background auto-refresh or manual update) while the modal is open, the modal will continue to display stale data.

We can resolve this by dynamically finding the matching quota from row.displayQuotas using the selected quota's key. This ensures the modal always displays live, up-to-date information.

  const activeQuota = selectedQuota ? (row.displayQuotas.find((q) => q.key === selectedQuota.key) ?? selectedQuota) : null

  return (
    <div className={styles.credentialQuotaPanel}>
      <div className={styles.credentialQuotaBars}>
        {/* 每个可计算进度的 quota 都独占一个稳定块；不可进度化 quota 在 view model 中已过滤。 */}
        {row.displayQuotas.map((quota) => <QuotaBar key={quota.key} quota={quota} quotaUsageMode={quotaUsageMode} onSelect={openQuotaDetails} />)}
      </div>
      <QuotaDetailsModal quota={activeQuota} open={quotaDetailsOpen} onClose={() => setQuotaDetailsOpen(false)} />
    </div>

[gemini-code-assist]

Since AuthFileQuotaPanel is rendered for every single row in the credentials table, each row mounts its own QuotaDetailsModal instance. When the page first loads, selectedQuota is null for all rows, meaning we render multiple hidden modals with empty/fallback values.

We can optimize this by returning null early in QuotaDetailsModal if quota is null. This prevents rendering any modal DOM elements on initial mount, significantly reducing the DOM size and improving render performance when there are many rows.

Additionally, because selectedQuota is kept as-is when the modal closes (only open becomes false), the modal can still safely perform its close transition before being cleaned up or replaced on the next open.

function QuotaDetailsModal({ quota, open, onClose }: { quota: DisplayQuota | null; open: boolean; onClose: () => void }) {
  if (!quota) {
    return null
  }
  const { t } = useTranslation()
  const currentUsage = quota.windowUsage
  const estimatedUsage = quota.windowUsageEstimate
  const billingUsage = quota.billingUsage
  const percentLabel = quota.barPercent === null || quota.barPercent === undefined ? '' : `${Math.round(quota.barPercent)}%`
  const resetLabel = quota.resetText ? formatQuotaResetLabel(quota.resetText) : ''

  return (
    <Modal open={open} title={t('usage_stats.credentials_quota_details_title', { label: quota.label })} onClose={onClose} width={520} className={styles.credentialQuotaDetailsModal}>

[Willxup]

gemini的comment得看一眼吧，这也是review的一部分，你可以看看其他PR的行为。