feat(usage): add credential (auth index) breakdown card

src/components/usage/CredentialStatsCard.tsx

@@ -0,0 +1,91 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card } from '@/components/ui/Card';
+import { computeKeyStats, formatCompactNumber } from '@/utils/usage';
+import type { UsagePayload } from './hooks/useUsageData';
+import styles from '@/pages/UsagePage.module.scss';
+
+export interface CredentialStatsCardProps {
+  usage: UsagePayload | null;
+  loading: boolean;
+}
+
+interface CredentialRow {
+  key: string;
+  success: number;
+  failure: number;
+  total: number;
+  successRate: number;
+}
+
+export function CredentialStatsCard({ usage, loading }: CredentialStatsCardProps) {
+  const { t } = useTranslation();
+
+  const rows = useMemo((): CredentialRow[] => {
+    if (!usage) return [];
+    const { byAuthIndex } = computeKeyStats(usage);
+    return Object.entries(byAuthIndex)
+      .map(([key, bucket]) => {
+        const total = bucket.success + bucket.failure;
+        return {
+          key,
+          success: bucket.success,
+          failure: bucket.failure,
+          total,
+          successRate: total > 0 ? (bucket.success / total) * 100 : 100,
+        };
+      })
+      .sort((a, b) => b.total - a.total);
+  }, [usage]);
+
+  return (
+    <Card title={t('usage_stats.credential_stats')}>
+      {loading ? (
+        <div className={styles.hint}>{t('common.loading')}</div>
+      ) : rows.length > 0 ? (
+        <div className={styles.tableWrapper}>
+          <table className={styles.table}>
+            <thead>
+              <tr>
+                <th>{t('usage_stats.credential_name')}</th>
+                <th>{t('usage_stats.requests_count')}</th>
+                <th>{t('usage_stats.success_rate')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row) => (
+                <tr key={row.key}>
+                  <td className={styles.modelCell}>{row.key}</td>
+                  <td>
+                    <span className={styles.requestCountCell}>
+                      <span>{formatCompactNumber(row.total)}</span>
+                      <span className={styles.requestBreakdown}>
+                        (<span className={styles.statSuccess}>{row.success.toLocaleString()}</span>{' '}
+                        <span className={styles.statFailure}>{row.failure.toLocaleString()}</span>)
+                      </span>
+                    </span>
+                  </td>
+                  <td>
+                    <span
+                      className={
+                        row.successRate >= 95
+                          ? styles.statSuccess
+                          : row.successRate >= 80
+                            ? styles.statNeutral
+                            : styles.statFailure
+                      }
+                    >
+                      {row.successRate.toFixed(1)}%
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <div className={styles.hint}>{t('usage_stats.no_data')}</div>
+      )}
+    </Card>
+  );
+}

src/components/usage/index.ts

@@ -26,3 +26,6 @@ export type { ModelStatsCardProps, ModelStat } from './ModelStatsCard';
 
 export { PriceSettingsCard } from './PriceSettingsCard';
 export type { PriceSettingsCardProps } from './PriceSettingsCard';
+
+export { CredentialStatsCard } from './CredentialStatsCard';
+export type { CredentialStatsCardProps } from './CredentialStatsCard';

src/i18n/locales/en.json

@@ -812,7 +812,9 @@
     "cost_axis_label": "Cost ($)",
     "cost_need_price": "Set a model price to view cost stats",
     "cost_need_usage": "No usage data available to calculate cost",
-    "cost_no_data": "No cost data yet"
+    "cost_no_data": "No cost data yet",
+    "credential_stats": "Credential Statistics",
+    "credential_name": "Credential"
   },
   "stats": {
     "success": "Success",

src/i18n/locales/ru.json

@@ -815,7 +815,9 @@
     "cost_axis_label": "Стоимость ($)",
     "cost_need_price": "Задайте стоимость модели, чтобы увидеть статистику затрат",
     "cost_need_usage": "Нет данных использования для расчёта стоимости",
-    "cost_no_data": "Данных о стоимости ещё нет"
+    "cost_no_data": "Данных о стоимости ещё нет",
+    "credential_stats": "Статистика учётных данных",
+    "credential_name": "Учётные данные"
   },
   "stats": {
     "success": "Успех",

src/i18n/locales/zh-CN.json

@@ -812,7 +812,9 @@
     "cost_axis_label": "花费 ($)",
     "cost_need_price": "请先设置模型价格",
     "cost_need_usage": "暂无使用数据，无法计算花费",
-    "cost_no_data": "没有可计算的花费数据"
+    "cost_no_data": "没有可计算的花费数据",
+    "credential_stats": "凭证统计",
+    "credential_name": "凭证"
   },
   "stats": {
     "success": "成功",

src/pages/UsagePage.tsx

@@ -24,6 +24,7 @@ import {
   ApiDetailsCard,
   ModelStatsCard,
   PriceSettingsCard,
+  CredentialStatsCard,
   useUsageData,
   useSparklines,
   useChartData
@@ -362,6 +363,9 @@ export function UsagePage() {
         <ModelStatsCard modelStats={modelStats} loading={loading} hasPrices={hasPrices} />
       </div>
 
+      {/* Credential Stats */}
+      <CredentialStatsCard usage={filteredUsage} loading={loading} />
+
       {/* Price Settings */}
       <PriceSettingsCard
         modelNames={modelNames}