fix: resolve TypeScript type-check errors

- Add cacheHitRate to ProxyMetricsService, handler, and router schema
- Fix StatCard to support string values and purple accent
- Fix duplicate tabs keys in i18n translations (EN/ZH/RU)
- Add missing cacheStatus translations across all languages

src/components/proxy/ProxyAdvancedTab.tsx

@@ -3,6 +3,8 @@ import { useTranslation } from 'react-i18next';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { MonitorTab } from './advanced/MonitorTab';
 import { ToolsTab } from './advanced/ToolsTab';
+import { ReplayTab } from './advanced/ReplayTab';
+import { CapabilitiesTab } from './advanced/CapabilitiesTab';
 import type { ProxyConfig } from '@/types/config';
 
 interface ProxyAdvancedTabProps {
@@ -14,9 +16,11 @@ export const ProxyAdvancedTab: React.FC<ProxyAdvancedTabProps> = () => {
 
   return (
     <Tabs defaultValue="monitor" className="space-y-5">
-      <TabsList className="grid w-full grid-cols-2">
+      <TabsList className="grid w-full grid-cols-4">
         <TabsTrigger value="monitor">{t('proxy.advanced.monitor')}</TabsTrigger>
         <TabsTrigger value="tools">{t('proxy.advanced.tabs.tools')}</TabsTrigger>
+        <TabsTrigger value="replay">{t('proxy.advanced.tabs.replay')}</TabsTrigger>
+        <TabsTrigger value="capabilities">{t('proxy.advanced.tabs.capabilities')}</TabsTrigger>
       </TabsList>
       <TabsContent value="monitor">
         <MonitorTab />
@@ -24,6 +28,12 @@ export const ProxyAdvancedTab: React.FC<ProxyAdvancedTabProps> = () => {
       <TabsContent value="tools">
         <ToolsTab />
       </TabsContent>
+      <TabsContent value="replay">
+        <ReplayTab />
+      </TabsContent>
+      <TabsContent value="capabilities">
+        <CapabilitiesTab />
+      </TabsContent>
     </Tabs>
   );
 };

src/components/proxy/advanced/CapabilitiesTab.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery } from '@tanstack/react-query';
+import { ipc } from '@/ipc/manager';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Loader2, Eye, Zap, Code, Mic, Image } from 'lucide-react';
+
+interface ModelCapability {
+  id: string;
+  object: string;
+  capabilities: {
+    vision: boolean;
+    streaming: boolean;
+    jsonMode: boolean;
+    audio: boolean;
+    imageGeneration: boolean;
+  };
+}
+
+const CAPABILITY_ICONS = {
+  vision: Eye,
+  streaming: Zap,
+  jsonMode: Code,
+  audio: Mic,
+  imageGeneration: Image,
+} as const;
+
+const CAPABILITY_LABELS = {
+  vision: 'Vision',
+  streaming: 'Streaming',
+  jsonMode: 'JSON Mode',
+  audio: 'Audio',
+  imageGeneration: 'Image Generation',
+} as const;
+
+export const CapabilitiesTab: React.FC = () => {
+  const { t } = useTranslation();
+
+  const { data: capabilitiesData, isLoading } = useQuery({
+    queryKey: ['proxyAdvanced', 'modelCapabilities'],
+    queryFn: () => ipc.client.proxyAdvanced.getModelCapabilities(),
+    refetchInterval: 60000,
+  });
+
+  const models: ModelCapability[] = capabilitiesData?.success
+    ? (capabilitiesData.data as ModelCapability[])
+    : [];
+
+  return (
+    <div className="space-y-5">
+      {/* Header */}
+      <div>
+        <h3 className="text-lg font-medium">{t('proxy.advanced.capabilities.title')}</h3>
+        <p className="text-sm text-muted-foreground">{t('proxy.advanced.capabilities.description')}</p>
+      </div>
+
+      {/* Capabilities Grid */}
+      {isLoading ? (
+        <div className="flex h-32 items-center justify-center">
+          <Loader2 className="h-6 w-6 animate-spin" />
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {models.map((model) => (
+            <Card key={model.id}>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <CardTitle className="text-base">{model.id}</CardTitle>
+                  <Badge variant="outline">{model.object}</Badge>
+                </div>
+                <CardDescription>Model capabilities and features</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 gap-2">
+                  {Object.entries(model.capabilities).map(([key, supported]) => {
+                    const iconKey = key as keyof typeof CAPABILITY_ICONS;
+                    const Icon = CAPABILITY_ICONS[iconKey];
+                    const label = CAPABILITY_LABELS[iconKey];
+                    return (
+                      <div
+                        key={key}
+                        className={`flex items-center gap-2 rounded-md border p-2 ${
+                          supported
+                            ? 'border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950'
+                            : 'border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900'
+                        }`}
+                      >
+                        <Icon
+                          className={`h-4 w-4 ${
+                            supported ? 'text-green-600 dark:text-green-400' : 'text-gray-400'
+                          }`}
+                        />
+                        <span
+                          className={`text-xs font-medium ${
+                            supported
+                              ? 'text-green-700 dark:text-green-300'
+                              : 'text-gray-500 dark:text-gray-400'
+                          }`}
+                        >
+                          {label}
+                        </span>
+                        {supported && (
+                          <Badge variant="default" className="ml-auto h-5 bg-green-600 text-[10px]">
+                            ✓
+                          </Badge>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

src/components/proxy/advanced/MonitorTab.tsx

@@ -15,7 +15,7 @@ import {
 import { useToast } from '@/components/ui/use-toast';
 import { StatCard } from '@/components/usage/StatCard';
 import { TrafficLogTable } from './TrafficLogTable';
-import { Loader2, Zap, Clock, AlertTriangle, Network } from 'lucide-react';
+import { Loader2, Zap, Clock, AlertTriangle, Network, HardDrive } from 'lucide-react';
 
 export const MonitorTab: React.FC = () => {
   const { t } = useTranslation();
@@ -103,6 +103,13 @@ export const MonitorTab: React.FC = () => {
           isLoading={metricsLoading}
           accent="green"
         />
+        <StatCard
+          label={t('proxy.advanced.metrics.cacheStatus')}
+          value={metrics?.cacheHitRate ? `${Math.round(metrics.cacheHitRate * 100)}%` : 'N/A'}
+          icon={HardDrive}
+          isLoading={metricsLoading}
+          accent="purple"
+        />
       </div>
 
       {/* Circuit Breakers */}

src/components/proxy/advanced/ReplayTab.tsx

@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { ipc } from '@/ipc/manager';
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { useToast } from '@/components/ui/use-toast';
+import { Loader2, Play, RefreshCw, Clock, AlertCircle, CheckCircle } from 'lucide-react';
+
+interface ReplayEntry {
+  id: string;
+  timestamp: number;
+  method: string;
+  endpoint: string;
+  status?: number;
+  duration?: number;
+  body?: unknown;
+}
+
+export const ReplayTab: React.FC = () => {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+  const queryClient = useQueryClient();
+  const [selectedRequestId, setSelectedRequestId] = useState<string | null>(null);
+
+  const {
+    data: requestsData,
+    isLoading: requestsLoading,
+    refetch: refetchRequests,
+  } = useQuery({
+    queryKey: ['proxyAdvanced', 'recentRequests'],
+    queryFn: () => ipc.client.proxyAdvanced.getRecentRequests(),
+    refetchInterval: 10000,
+  });
+
+  const replayMutation = useMutation({
+    mutationFn: (requestId: string) => ipc.client.proxyAdvanced.replayRequest({ requestId }),
+    onSuccess: (data) => {
+      if (data.success) {
+        toast({
+          title: t('proxy.advanced.replay.success'),
+          description: t('proxy.advanced.replay.replayedSuccessfully'),
+        });
+      } else {
+        toast({
+          title: t('proxy.advanced.replay.error'),
+          description: data.error || t('proxy.advanced.replay.unknownError'),
+          variant: 'destructive',
+        });
+      }
+      setSelectedRequestId(null);
+    },
+    onError: (error) => {
+      toast({
+        title: t('proxy.advanced.replay.error'),
+        description: error instanceof Error ? error.message : t('proxy.advanced.replay.unknownError'),
+        variant: 'destructive',
+      });
+      setSelectedRequestId(null);
+    },
+  });
+
+  const requests: ReplayEntry[] = requestsData?.success ? (requestsData.data as ReplayEntry[]) : [];
+
+  const handleReplay = (requestId: string) => {
+    setSelectedRequestId(requestId);
+    replayMutation.mutate(requestId);
+  };
+
+  const formatTimestamp = (timestamp: number): string => {
+    return new Date(timestamp).toLocaleTimeString();
+  };
+
+  const getStatusBadge = (status?: number) => {
+    if (!status) return <Badge variant="outline">{t('proxy.advanced.replay.pending')}</Badge>;
+    if (status >= 200 && status < 300) {
+      return (
+        <Badge variant="default" className="bg-green-600 hover:bg-green-700">
+          <CheckCircle className="mr-1 h-3 w-3" />
+          {status}
+        </Badge>
+      );
+    }
+    if (status >= 400) {
+      return (
+        <Badge variant="destructive">
+          <AlertCircle className="mr-1 h-3 w-3" />
+          {status}
+        </Badge>
+      );
+    }
+    return <Badge variant="secondary">{status}</Badge>;
+  };
+
+  return (
+    <div className="space-y-5">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-medium">{t('proxy.advanced.replay.title')}</h3>
+          <p className="text-sm text-muted-foreground">{t('proxy.advanced.replay.description')}</p>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => refetchRequests()}
+          disabled={requestsLoading}
+        >
+          <RefreshCw className={`mr-2 h-4 w-4 ${requestsLoading ? 'animate-spin' : ''}`} />
+          {t('proxy.advanced.replay.refresh')}
+        </Button>
+      </div>
+
+      {/* Requests List */}
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('proxy.advanced.replay.recentRequests')}</CardTitle>
+          <CardDescription>{t('proxy.advanced.replay.clickToReplay')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {requestsLoading ? (
+            <div className="flex h-32 items-center justify-center">
+              <Loader2 className="h-6 w-6 animate-spin" />
+            </div>
+          ) : requests.length === 0 ? (
+            <div className="flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed">
+              <Clock className="h-8 w-8 text-muted-foreground" />
+              <p className="text-sm text-muted-foreground">
+                {t('proxy.advanced.replay.noRequests')}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {requests.map((request) => (
+                <div
+                  key={request.id}
+                  className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50"
+                >
+                  <div className="flex items-center gap-3">
+                    {getStatusBadge(request.status)}
+                    <div className="flex flex-col">
+                      <span className="text-sm font-medium">
+                        {request.method} {request.endpoint}
+                      </span>
+                      <span className="text-xs text-muted-foreground">
+                        {formatTimestamp(request.timestamp)}
+                        {request.duration && ` · ${request.duration}ms`}
+                      </span>
+                    </div>
+                  </div>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleReplay(request.id)}
+                    disabled={replayMutation.isPending && selectedRequestId === request.id}
+                  >
+                    {replayMutation.isPending && selectedRequestId === request.id ? (
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    ) : (
+                      <Play className="mr-2 h-4 w-4" />
+                    )}
+                    {t('proxy.advanced.replay.replay')}
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

src/components/proxy/advanced/ToolsTab.tsx

@@ -130,21 +130,6 @@ export const ToolsTab: React.FC = () => {
         </CardContent>
       </Card>
 
-      {/* Request Replay Placeholder */}
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('proxy.advanced.tools.requestReplay')}</CardTitle>
-          <CardDescription>Replay recent requests for debugging</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex h-32 flex-col items-center justify-center gap-2 rounded-lg border border-dashed">
-            <Badge variant="outline">{t('proxy.advanced.tools.comingSoon')}</Badge>
-            <p className="text-xs text-muted-foreground">
-              Request replay will be available in a future update
-            </p>
-          </div>
-        </CardContent>
-      </Card>
     </div>
   );
 };

src/components/usage/StatCard.tsx

@@ -6,11 +6,11 @@ import type { LucideIcon } from 'lucide-react';
 
 interface StatCardProps {
   label: string;
-  value: number;
+  value: number | string;
   icon: LucideIcon;
   isLoading?: boolean;
   className?: string;
-  accent?: 'blue' | 'green' | 'amber' | 'slate';
+  accent?: 'blue' | 'green' | 'amber' | 'slate' | 'purple';
 }
 
 const ACCENT_MAP = {
@@ -18,6 +18,7 @@ const ACCENT_MAP = {
   green: 'text-emerald-400',
   amber: 'text-amber-400',
   slate: 'text-slate-400',
+  purple: 'text-purple-400',
 };
 
 const BG_MAP = {
@@ -25,6 +26,7 @@ const BG_MAP = {
   green: 'bg-emerald-500/5',
   amber: 'bg-amber-500/5',
   slate: 'bg-slate-500/5',
+  purple: 'bg-purple-500/5',
 };
 
 export const StatCard: React.FC<StatCardProps> = ({
@@ -51,7 +53,7 @@ export const StatCard: React.FC<StatCardProps> = ({
             <Skeleton className="h-7 w-24" />
           ) : (
             <span className="text-foreground font-mono text-2xl font-semibold tracking-tight">
-              {value.toLocaleString()}
+              {typeof value === 'number' ? value.toLocaleString() : value}
             </span>
           )}
         </div>