sync: update from private repo (e62f5c7)

ui/src/components/settings/GatewayKeyUsagePanel.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
 import { getGatewayKeyUsage } from '../../api';
 
 interface Props {
@@ -19,6 +20,7 @@ function fmtTokens(n: number): string {
  * lean.
  */
 export function GatewayKeyUsagePanel({ keyId, onClose }: Props) {
+  const { t } = useTranslation('settings');
   const { data, isLoading, error } = useQuery({
     queryKey: ['gateway-key-usage', keyId],
     queryFn: () => getGatewayKeyUsage(keyId),
@@ -39,7 +41,7 @@ export function GatewayKeyUsagePanel({ keyId, onClose }: Props) {
       <div className="bg-surface rounded-lg shadow-xl max-w-2xl w-full mx-4 p-6">
         <div className="flex justify-between items-start mb-4">
           <div>
-            <h3 className="text-lg font-semibold text-slate-800">Key 使用状況</h3>
+            <h3 className="text-lg font-semibold text-slate-800">{t('gateway.usagePanel.title')}</h3>
             <p className="text-xs text-slate-500 font-mono">{keyId}</p>
           </div>
           <button
@@ -54,7 +56,7 @@ export function GatewayKeyUsagePanel({ keyId, onClose }: Props) {
 
         {isLoading && <div className="text-sm text-slate-500">Loading…</div>}
         {error && (
-          <div className="text-sm text-red-600">取得エラー: {String((error as Error).message ?? error)}</div>
+          <div className="text-sm text-red-600">{t('gateway.keys.fetchError', { msg: String((error as Error).message ?? error) })}</div>
         )}
 
         {data && (
@@ -63,7 +65,7 @@ export function GatewayKeyUsagePanel({ keyId, onClose }: Props) {
             <div className="border border-hairline rounded p-3 mb-4">
               <div className="flex justify-between items-baseline mb-2">
                 <span className="text-xs font-medium text-slate-600 uppercase tracking-wide">
-                  今月 ({data.currentPeriod})
+                  {t('gateway.usagePanel.thisMonth', { period: data.currentPeriod })}
                 </span>
                 <span className="text-xs text-slate-500">
                   Requests: {data.requestsThisMonth.toLocaleString()}
@@ -112,10 +114,10 @@ export function GatewayKeyUsagePanel({ keyId, onClose }: Props) {
             {/* History bars */}
             <div className="border border-hairline rounded p-3">
               <div className="text-xs font-medium text-slate-600 uppercase tracking-wide mb-2">
-                過去 12 か月
+                {t('gateway.usagePanel.past12')}
               </div>
               {data.history.length === 0 ? (
-                <div className="text-sm text-slate-400 italic">履歴なし</div>
+                <div className="text-sm text-slate-400 italic">{t('gateway.usagePanel.noHistory')}</div>
               ) : (
                 <div className="space-y-1.5">
                   {data.history.map((h) => {